in src/visual.ts [757:855]
private setUpBulletsHorizontally(bulletBody: BulletSelection<any>, model: BulletChartModel, reveresed: boolean): void {
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, this.calculateLabelWidth(bars[d.barIndex], d, reveresed))))
.attr("y", ((d: BarRect) => Math.max(BulletChart.zeroValue, bars[d.barIndex].y)))
.attr("width", ((d: BarRect) => Math.max(BulletChart.zeroValue, d.end - d.start)))
.attr("height", BulletChart.BulletSize)
.classed("range", true)
.style("fill", (d: BarRect) => d.fillColor)
.style("stroke", (d: BarRect) => d.strokeColor)
.style("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);
valueSelectionMerged
.attr("x", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, this.calculateLabelWidth(bars[d.barIndex], d, reveresed))))
.attr("y", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, bars[d.barIndex].y + BulletChart.bulletMiddlePosition)))
.attr("width", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, d.end - d.start)))
.attr("height", BulletChart.BulletSize * BulletChart.value1 / BulletChart.value4)
.classed("value", true)
.style("fill", (d: BarValueRect) => d.fillColor)
.style("stroke", (d: BarValueRect) => d.strokeColor)
.style("stroke-width", (d: BarValueRect) => d.strokeWidth);
valueSelection.exit();
// Draw markers
this.drawFirstTargets(targetValues,
(d: TargetValue) => this.calculateLabelWidth(bars[d.barIndex], null, reveresed) + d.value,
(d: TargetValue) => this.calculateLabelWidth(bars[d.barIndex], null, reveresed) + d.value,
(d: TargetValue) => bars[d.barIndex].y + BulletChart.MarkerMarginHorizontal,
(d: TargetValue) => bars[d.barIndex].y + BulletChart.MarkerMarginHorizontalEnd);
this.drawSecondTargets(
targetValues,
(d: TargetValue) => this.calculateLabelWidth(bars[d.barIndex], null, reveresed) + d.value2,
(d: TargetValue) => bars[d.barIndex].y + BulletChart.BulletSize / BulletChart.value2);
this.drawAxesLabels(model, reveresed);
let measureUnitsText = 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) => {
if (reveresed)
return BulletChart.XMarginHorizontalLeft + BulletChart.XMarginHorizontalRight + model.viewportLength + BulletChart.SubtitleMargin;
return d.x - BulletChart.SubtitleMargin;
}))
.attr("y", ((d: BarData) => d.y + this.data.labelHeight / BulletChart.value2 + BulletChart.value12 + BulletChart.BulletSize / 2))
.attr("fill", model.settings.axis.unitsColor)
.attr("font-size", PixelConverter.fromPoint(BulletChart.DefaultSubtitleFontSizeInPt))
.text(measureUnitsText);
}
if (this.interactivityService) {
let targetCollection = 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,
(data: TooltipEnabledDataPoint) => data.tooltipInfo);
this.tooltipServiceWrapper.addTooltip(
bullets,
(data: TooltipEnabledDataPoint) => data.tooltipInfo
);
}