in src/barChart.ts [348:447]
public update(options: VisualUpdateOptions) {
let viewModel: BarChartViewModel = visualTransform(options, this.host);
let settings = this.barChartSettings = viewModel.settings;
this.barDataPoints = viewModel.dataPoints;
// Turn on landing page in capabilities and remove comment to turn on landing page!
// this.HandleLandingPage(options);
let width = options.viewport.width;
let height = options.viewport.height;
this.svg
.attr("width", width)
.attr("height", height);
if (settings.enableAxis.show) {
let margins = BarChart.Config.margins;
height -= margins.bottom;
}
this.helpLinkElement
.classed("hidden", !settings.generalView.showHelpLink)
.style("border-color", settings.generalView.helpLinkColor)
.style("color", settings.generalView.helpLinkColor);
this.xAxis
.style("font-size", Math.min(height, width) * BarChart.Config.xAxisFontMultiplier)
.style("fill", settings.enableAxis.fill);
let yScale = scaleLinear()
.domain([0, viewModel.dataMax])
.range([height, 0]);
let xScale = scaleBand()
.domain(viewModel.dataPoints.map(d => d.category))
.rangeRound([0, width])
.padding(0.2);
let xAxis = axisBottom(xScale);
const colorObjects = options.dataViews[0] ? options.dataViews[0].metadata.objects : null;
this.xAxis.attr('transform', 'translate(0, ' + height + ')')
.call(xAxis)
.attr("color", getAxisTextFillColor(
colorObjects,
this.host.colorPalette,
defaultSettings.enableAxis.fill
));
const textNodes = this.xAxis.selectAll("text")
BarChart.wordBreak(textNodes, xScale.bandwidth(), height);
this.handleAverageLineUpdate(height, width, yScale);
this.barSelection = this.barContainer
.selectAll('.bar')
.data(this.barDataPoints);
const barSelectionMerged = this.barSelection
.enter()
.append('rect')
.merge(<any>this.barSelection);
barSelectionMerged.classed('bar', true);
const opacity: number = viewModel.settings.generalView.opacity / 100;
barSelectionMerged
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(<number>d.value))
.attr("y", d => yScale(<number>d.value))
.attr("x", d => xScale(d.category))
.style("fill-opacity", opacity)
.style("stroke-opacity", opacity)
.style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
.style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
.style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);
this.tooltipServiceWrapper.addTooltip(barSelectionMerged,
(datapoint: BarChartDataPoint) => this.getTooltipData(datapoint),
(datapoint: BarChartDataPoint) => datapoint.selectionId
);
this.syncSelectionState(
barSelectionMerged,
<ISelectionId[]>this.selectionManager.getSelectionIds()
);
barSelectionMerged.on('click', (d) => {
// Allow selection only if the visual is rendered in a view that supports interactivity (e.g. Report)
if (this.host.hostCapabilities.allowInteractions) {
const isCtrlPressed: boolean = (<MouseEvent>d3Event).ctrlKey;
this.selectionManager
.select(d.selectionId, isCtrlPressed)
.then((ids: ISelectionId[]) => {
this.syncSelectionState(barSelectionMerged, ids);
});
(<Event>d3Event).stopPropagation();
}
});
this.barSelection
.exit()
.remove();
this.handleClick(barSelectionMerged);
}