in clns-acuity-vahub/vahub/src/main/webapp/src/vahub-charts/linechart/RangeChart.ts [110:263]
public redraw(animate = false): void {
const that = this;
const areaSeries = this.series.filter(data => data.type === DATA_TYPES.arearange);
const lineSeries = this.series.filter(data => data.type === DATA_TYPES.line);
if (!lineSeries[0].data.length) {
this.showNoData();
return;
}
let innerSpace, lines, intervals, plotLines;
this.setXAxis();
const rotatedTicksMargin = rotatedLabelsMargin(this.xAxis[0], this.xScale, this.xAxisScale);
const chartHeight = this.height - rotatedTicksMargin;
this.yScale = d3.scaleLinear()
.domain(this.limits.y)
.range([chartHeight, 0]);
this.yAxisScale = d3.axisLeft(this.yScale)
.tickSize(-this.width)
.ticks(Math.floor(chartHeight / TICK_GAP));
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);
this.resizeClipPath(chartHeight);
lines = innerSpace.select('#lines');
intervals = innerSpace.select('#intervals');
plotLines = innerSpace.select('#plot-lines');
} else {
this.svg.selectAll('g').remove();
const yAxisTitle = splitAxisLabel(this.yAxis[0].title, this.height);
const yAxisCoordinate = - this.margins.left / 2 - (yAxisTitle.length - 1) * Y_AXIS_LABELS_SHIFT;
innerSpace = this.svg.append('g')
.attr('transform', 'translate(' + this.margins.left + ',' + this.margins.top / 2 + ')')
.on('mousemove', (e) => this.handleMouseMovement(e, true))
.on('mouseleave', () => this.clearActivePoint());
this.addClipPath(innerSpace, chartHeight);
innerSpace.append('g') // add yAxis
.attr('class', 'y-axis')
.call(this.yAxisScale)
.selectAll('line')
.attr('stroke', PLOT_COLORS.lineColor);
innerSpace.append('g') // add XAxis
.attr('class', 'x-axis')
.attr('transform', `translate(0,${chartHeight})`)
.call(this.xAxisScale)
.selectAll('line')
.attr('stroke', PLOT_COLORS.lineColor);
const label = innerSpace.append('g').append('text')
.attr('class', 'axis-label')
.attr('x', 0)
.attr('y', yAxisCoordinate)
.attr('text-anchor', 'middle')
.attr('font-size', '12px')
.attr('color', PLOT_COLORS.axisLabelColor)
.attr('style', `transform: rotate(-90deg) translate(${- that.height / 2}px)`);
yAxisTitle.forEach((word, i) => {
label.append('tspan')
.attr('dy', i > 0 ? Y_AXIS_LABELS_SHIFT : 0)
.attr('x', 0)
.text(word);
});
innerSpace.selectAll('path') // repaint chart borders for export
.attr('stroke', PLOT_COLORS.lineColor);
innerSpace.append('g') // Add the brush feature
.attr('class', 'brush')
.attr('id', 'brush_' + this.id)
.call(d3.brush()
.extent([[0, 0], [this.width, chartHeight]])
.filter(() => true) //reset filter that filters out events with ctrl button by default
.on('end', (event) => {
if (!event.selection) {
that.removeSelection();
this.update();
return;
}
const xMin = this.xAxis[0].isCategorical
? this.reversedScale(event.selection[0][0])
: this.xScale.invert(event.selection[0][0]);
const xMax = this.xAxis[0].isCategorical
? this.reversedScale(event.selection[1][0])
: this.xScale.invert(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),
}
],
yAxis: [
{
min: Math.min(yMin, yMax),
max: Math.max(yMin, yMax),
}
]
};
const originalEvent = {
...event,
offsetX: chartX,
offsetY: chartY,
ctrlKey: event.sourceEvent.ctrlKey,
};
innerSpace.select('.brush').call(d3.brush().clear);
that.selection(getSelectionRequest(event, selectionCords, chartX, chartY, originalEvent));
})
);
this.addTooltip();
plotLines = innerSpace.append('g')
.attr('id', 'plot-lines');
intervals = innerSpace.append('g')
.attr('id', 'intervals')
.attr('clip-path', this.clipPathURL);
lines = innerSpace.append('g')
.attr('id', 'lines')
.attr('clip-path', this.clipPathURL);
}
this.drawPlotLines(plotLines, animate);
this.drawInterval(intervals, areaSeries, animate);
lineSeries.forEach((serie, i) => this.drawLineWithPoints(lines, serie, animate, i));
innerSpace.selectAll('.tick line') // repaint chart borders for export
.attr('stroke', PLOT_COLORS.lineColor);
this.svg.select('.x-axis')
.selectAll('.tick text')
.call(wrap(rotatedTicksMargin && this.width));
}