in clns-acuity-vahub/vahub/src/main/webapp/src/vahub-charts/shiftchart/ShiftChart.ts [72:234]
public redraw(animate = false): void {
const series: ErrorBarData[] = this.series.reduce((acc, val) => acc.concat(val.data), []);
const that = this;
let innerSpace, plotLinesContainer, barsContainer, selectedZonesContainer = null;
this.yScale = d3.scaleLinear()
.domain(this.limits.y)
.range([this.height, 0]);
this.xScale = d3.scaleLinear()
.domain(this.limits.x)
.range([0, this.width]);
this.yAxisScale = d3.axisLeft(this.yScale)
.tickSize(-this.width)
.ticks(Math.floor(this.height / TICK_GAP));
this.xAxisScale = d3.axisBottom(this.xScale)
.ticks(Math.floor(this.width / XAXIS_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)
.call(this.xAxisScale);
plotLinesContainer = innerSpace.select('.plot-lines');
barsContainer = innerSpace.select('#bars');
} else {
this.svg.selectAll('g').remove();
innerSpace = this.svg.append('g')
.attr('transform', 'translate(' + this.margins.left + ')');
innerSpace.append('g')
.attr('class', 'y-axis no-axis-line')
.call(this.yAxisScale)
.select('path')
.attr('stroke-width', '0');
innerSpace.selectAll('g.tick')
.select('line')
.attr('stroke', PLOT_COLORS.horizontalTicks);
innerSpace.append('g')
.attr('transform', `translate(0,${this.height})`)
.attr('class', 'x-axis')
.call(this.xAxisScale)
.select('path')
.attr('stroke', PLOT_COLORS.xAxis);
const yAxisTitle = splitAxisLabel(this.yAxis[0].title, this.height);
const yAxisCoordinate = -this.margins.left / 2 - Y_AXIS_LABELS_SHIFT
* (yAxisTitle.length > 2 ? (yAxisTitle.length - 1) : yAxisTitle.length);
innerSpace.append('text')
.attr('class', 'axis-label')
.attr('x', this.width / 2)
.attr('y', this.height + XAXIS_LABEL_POSITIONING)
.attr('text-anchor', 'middle')
.attr('font-size', '11px')
.attr('color', PLOT_COLORS.axisLabels)
.text(this.xAxis[0].title);
const label = innerSpace.append('g').append('text')
.attr('class', 'axis-label')
.attr('x', 0)
.attr('y', yAxisCoordinate)
.attr('text-anchor', 'middle')
.attr('font-size', '11px')
.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);
});
this.addTooltip();
this.tooltipContainer
.style('transition', '.25s');
this.addClipPath(innerSpace);
innerSpace.append('g')
.attr('class', 'brush')
.attr('id', 'brush_' + this.id)
.call(d3.brush()
.extent([[0, 0], [this.width, this.height]])
.filter(() => true)
.on('end', (event) => {
if (!event.selection) {
that.setSelectedZone(null);
that.redrawSelectionZones(that.xScale, that.yScale);
that.removeSelection();
return;
}
const xMin = this.xScale.invert(event.selection[0][0]);
const xMax = 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] + that.margins.left;
const chartY = event.selection[1][1] + that.margins.top;
const selectionCords = {
xAxis: [
{
min: Math.min(xMin, xMax),
max: Math.max(xMin, xMax),
axis: {
categories: this.series[0].categories
}
}
],
yAxis: [
{
min: Math.min(yMin, yMax),
max: 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);
this.setSelectedZone({
xMin,
xMax,
yMin: yMax,
yMax: yMin
}, event.originalEvent.ctrlKey);
})
);
plotLinesContainer = innerSpace
.append('g')
.attr('class', 'plot-lines');
selectedZonesContainer = innerSpace.append('g')
.attr('class', 'selection-zones')
.attr('clip-path', this.clipPathURL);
barsContainer = innerSpace.append('g')
.attr('id', 'bars')
.attr('clip-path', this.clipPathURL);
}
this.redrawSelectionZones(this.xScale, this.yScale, selectedZonesContainer, animate);
this.drawPlotLines(plotLinesContainer, animate);
this.drawBars(barsContainer, series, animate);
}