in clns-acuity-vahub/vahub/src/main/webapp/src/vahub-charts/barchart/BarLineChart.ts [97:292]
public redraw(animate = false): void {
const that = this;
let innerSpace, rectContainer, lineContainer;
const series = this.series
.filter(item => item.name !== MeasureNumberOptions)
.reduce((acc, val) => acc.concat(val.data), []);
const subjectsNumberSeries = this.series
.find(item => item.name === MeasureNumberOptions);
const subjectsNumber = subjectsNumberSeries.data;
const subjectsDataMax = subjectsNumberSeries.dataMax;
const subjectsData = subjectsNumberSeries.data;
this.xScale = d3.scaleBand()
.domain(this.xAxis[0].getFilteredCategories(this.limits.x))
.range([0, this.width]);
this.xAxisScale = d3.axisBottom(this.xScale)
.tickValues(getCategoricalAxisValues(this.xScale.domain(), this.width));
const rotatedTicksMargin = rotatedLabelsMargin(this.xAxis[0], this.xScale, this.xAxisScale);
const chartHeight = this.height - rotatedTicksMargin;
const yDomain = () => {
if (this.limits.y[0] === this.limits.y[1]) {
if (this.limits.y[0] > RANGE_ENLARGER) {
return [this.limits.y[0] - RANGE_ENLARGER, this.limits.y[1] + RANGE_ENLARGER];
}
return [0, this.limits.y[1] + RANGE_ENLARGER];
}
return [this.limits.y[0], this.limits.y[1]];
};
this.yScale = d3.scaleLinear()
.domain(yDomain())
.range([chartHeight, 0]);
this.yRightScale = d3.scaleLinear()
.domain([0, subjectsDataMax * Y_RIGHT_SCALE_RATIO])
.range([chartHeight, 0]);
this.yAxisScale = d3.axisLeft(this.yScale)
.tickSize(0);
this.yAxisRightScale = d3.axisRight(this.yRightScale)
.tickSize(0);
if (animate) {
innerSpace = this.svg.select('g');
innerSpace.select('.y-axis')
.transition()
.duration(this.animationTime)
.call(this.yAxisScale);
innerSpace.select('.x-axis')
.transition()
.duration(this.animationTime)
.attr('transform', `translate(0, ${chartHeight})`)
.call(this.xAxisScale)
.on('end', () => {
innerSpace.select('.x-axis')
.selectAll('.tick text')
.call(wrap(rotatedTicksMargin && this.width, ROTATED_LABELS_SHIFT, this.xAxisScale.tickValues()));
});
rectContainer = innerSpace.select('#bars');
lineContainer = innerSpace.select('#line');
this.resizeClipPath(chartHeight);
} else {
this.svg.selectAll('g').remove();
innerSpace = this.svg.append('g')
.attr('transform', `translate(${this.margins.left}, ${this.margins.top})`);
this.addClipPath(innerSpace);
this.addTooltip();
innerSpace.append('g')
.attr('class', 'y-axis no-axis line')
.call(this.yAxisScale)
.select('path')
.attr('stroke-width', '0');
innerSpace.append('g')
.attr('class', 'y-axis-right no-axis line')
.attr('transform', `translate(${this.width}, 0)`)
.call(this.yAxisRightScale)
.select('path')
.attr('stroke-width', '0');
innerSpace.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0, ${chartHeight})`)
.call(this.xAxisScale)
.select('path')
.attr('stroke', PLOT_COLORS.lineColor);
innerSpace.selectAll('text')
.style('font-size', '11px');
innerSpace.append('g').append('text')
.attr('class', 'axis-label')
.attr('x', 0)
.attr('y', -this.width - this.margins.left)
.attr('text-anchor', 'middle')
.attr('font-size', '12px')
.attr('color', PLOT_COLORS.axisLabelColor)
.text(this.yAxis[1].title)
.attr('style', `transform: rotate(90deg) translate(${that.height / 2}px)`);
innerSpace
.append('g')
.attr('class', 'brush')
.call(d3.brush()
.extent([[0, 0], [this.width, chartHeight]])
.filter(() => true)
.on('end', (event) => {
if (!event.selection) {
that.removeSelection();
this.update();
return;
}
const xMin = getReversedScaledValue(this.xAxis[0], this.xScale, event.selection[0][0]);
const xMax = getReversedScaledValue(this.xAxis[0], this.xScale, event.selection[1][0]);
const yMin = this.yScale.invert(event.selection[0][1]);
const yMax = this.yScale.invert(event.selection[1][1]);
const chartX = event.selection[1][0];
const chartY = event.selection[1][1];
const selectionCords = {
xAxis: [
{
min: Math.min(xMin, xMax),
max: Math.max(xMin, xMax),
axis: {
categories: that.xAxis[0].categories
}
}
],
yAxis: [
{
min: Math.floor(Math.min(yMin, yMax)),
max: Math.ceil(Math.max(yMin, yMax)),
}
]
};
const originalEvent = {
...event,
offsetX: chartX,
offsetY: chartY,
ctrlKey: event.sourceEvent.ctrlKey
};
that.selection(getSelectionRequest(event, selectionCords, chartX, chartY, originalEvent));
innerSpace.select('.brush').call(d3.brush().clear);
})
);
innerSpace.select('.brush .selection')
.attr('fill', PLOT_COLORS.selectedBarColor)
.attr('stroke', PLOT_COLORS.brushSelection)
.attr('stroke-width', .5)
.attr('id', 'brushSelection')
.attr('pointer', 'crosshair')
.attr('pointer-events', 'none');
rectContainer = innerSpace.append('g')
.attr('id', 'bars')
.attr('clip-path', this.clipPathURL);
lineContainer = innerSpace
.append('path')
.attr('id', 'line')
.attr('clip-path', this.clipPathURL);
innerSpace.append('g')
.append('circle')
.attr('class', 'focus')
.attr('r', 0)
.style('fill', PLOT_COLORS.whisker)
.style('stroke', PLOT_COLORS.whisker)
.style('stroke-opacity', FOCUS.strokeOpacity)
.style('stroke-width', FOCUS.stroke)
.style('transition', `r ${MICROANIMATION_TIME}s`);
innerSpace.append('use').attr('xlink:href', '#brushSelection');
}
innerSpace.select('.x-axis')
.selectAll('.tick text')
.call(wrap(rotatedTicksMargin && this.width, ROTATED_LABELS_SHIFT));
const bars = rectContainer
.selectAll(`.${BAR_CLASS}`)
.data(series);
const line = lineContainer
.datum(subjectsNumber);
this.enter(bars, animate, series, subjectsData);
this.drawLine(line, subjectsNumber, series, subjectsData, animate);
}