in src/visual.ts [936:1032]
private setUpBulletsVertically(bulletBody: BulletSelection<any>, model: BulletChartModel, reveresed: boolean) {
let bars: BarData[] = model.bars;
let rects: BarRect[] = model.barRects;
let valueRects: BarValueRect[] = model.valueRects;
let targetValues: TargetValue[] = model.targetValues;
let barSelection: BulletSelection<any> = this.labelGraphicsContext.selectAll("text").data(bars, (d: BarData) => d.key);
let rectSelection: BulletSelection<any> = this.bulletGraphicsContext.selectAll("rect.range").data(rects, (d: BarRect) => d.key);
// Draw bullets
let bullets: BulletSelection<any> = rectSelection
.enter()
.append("rect")
.merge(rectSelection);
bullets
.attr("x", ((d: BarRect) => Math.max(BulletChart.zeroValue, bars[d.barIndex].x)))
.attr("y", ((d: BarRect) => Math.max(BulletChart.zeroValue, this.calculateLabelHeight(bars[d.barIndex], d, reveresed))))
.attr("height", ((d: BarRect) => Math.max(BulletChart.zeroValue, d.start - d.end)))
.attr("width", BulletChart.BulletSize)
.classed("range", true)
.style("fill", (d: BarRect) => d.fillColor)
.attr("stroke", (d: BarRect) => d.strokeColor)
.attr("stroke-width", (d: BarRect) => d.strokeWidth);
rectSelection.exit();
// Draw value rects
let valueSelection: BulletSelection<any> = this.bulletGraphicsContext.selectAll("rect.value").data(valueRects, (d: BarValueRect) => d.key);
let valueSelectionMerged = valueSelection
.enter()
.append("rect")
.merge(valueSelection)
.attr("x", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, bars[d.barIndex].x + BulletChart.bulletMiddlePosition)))
.attr("y", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, this.calculateLabelHeight(bars[d.barIndex], d, reveresed))))
.attr("height", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, d.start - d.end)))
.attr("width", BulletChart.BulletSize * BulletChart.value1 / BulletChart.value4)
.classed("value", true)
.style("fill", (d: BarValueRect) => d.fillColor)
.attr("stroke", (d: BarRect) => d.strokeColor)
.attr("stroke-width", (d: BarRect) => d.strokeWidth);
valueSelection.exit();
// Draw markers
this.drawFirstTargets(
targetValues,
(d: TargetValue) => bars[d.barIndex].x + BulletChart.MarkerMarginVertical,
(d: TargetValue) => bars[d.barIndex].x + (BulletChart.MarkerMarginVertical * BulletChart.value3),
(d: TargetValue) => this.calculateLabelHeight(bars[d.barIndex], null, reveresed) + d.value,
(d: TargetValue) => this.calculateLabelHeight(bars[d.barIndex], null, reveresed) + d.value);
this.drawSecondTargets(targetValues,
(d: TargetValue) => bars[d.barIndex].x + BulletChart.BulletSize / BulletChart.value2,
(d: TargetValue) => this.calculateLabelHeight(bars[d.barIndex], null, reveresed) + d.value2);
let labelsStartPos: number =
BulletChart.YMarginVertical +
(reveresed ? model.viewportLength + 15 : 0) +
this.data.labelHeightTop;
this.drawAxes(model, reveresed, labelsStartPos);
let measureUnitsText: string = TextMeasurementService.getTailoredTextOrDefault(
BulletChart.getTextProperties(model.settings.axis.measureUnits, BulletChart.DefaultSubtitleFontSizeInPt),
BulletChart.MaxMeasureUnitWidth);
// Draw measure label
if (model.settings.axis.measureUnits) {
barSelection
.enter()
.append("text")
.merge(barSelection)
.attr("x", ((d: BarData) => d.x + BulletChart.BulletSize))
.attr("y", ((d: BarData) => {
return labelsStartPos + BulletChart.SubtitleMargin + BulletChart.value12;
}))
.attr("fill", model.settings.axis.unitsColor)
.attr("font-size", PixelConverter.fromPoint(BulletChart.DefaultSubtitleFontSizeInPt))
.text(measureUnitsText);
}
if (this.interactivityService) {
let targetCollection: BarRect[] = this.data.barRects.concat(this.data.valueRects);
let behaviorOptions: BulletBehaviorOptions = {
rects: bullets,
valueRects: valueSelectionMerged,
clearCatcher: this.clearCatcher,
interactivityService: this.interactivityService,
bulletChartSettings: this.data.settings,
hasHighlights: this.data.hasHighlights,
behavior: this.behavior,
dataPoints: targetCollection
};
this.interactivityService.bind(behaviorOptions);
}
barSelection.exit();
this.tooltipServiceWrapper.addTooltip(
valueSelectionMerged,
(tooltipEvent: TooltipEventArgs<TooltipEnabledDataPoint>) => tooltipEvent.data.tooltipInfo);
this.tooltipServiceWrapper.addTooltip(
bullets,
(tooltipEvent: TooltipEventArgs<TooltipEnabledDataPoint>) => tooltipEvent.data.tooltipInfo);
}