From 8840936ef0216a71652fec0696af2f7d3b2c2cec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Wed, 10 May 2023 13:23:31 +0200 Subject: [PATCH] Fixed #18960, dumbbell data labels position issue. --- ts/Series/ColumnRange/ColumnRangeSeries.ts | 188 +++++++++++---------- ts/Series/Dumbbell/DumbbellSeries.ts | 12 +- 2 files changed, 105 insertions(+), 95 deletions(-) diff --git a/ts/Series/ColumnRange/ColumnRangeSeries.ts b/ts/Series/ColumnRange/ColumnRangeSeries.ts index c1c6b312943..a2d842688c0 100644 --- a/ts/Series/ColumnRange/ColumnRangeSeries.ts +++ b/ts/Series/ColumnRange/ColumnRangeSeries.ts @@ -176,103 +176,105 @@ class ColumnRangeSeries extends AreaRangeSeries { return columnProto.translate3dShapes.apply(this, arguments as any); } -} - + public afterColumnTranslate(): void { + /** + * Translate data points from raw values x and y to plotX and plotY + * @private + */ + const yAxis = this.yAxis, + xAxis = this.xAxis, + startAngleRad = (xAxis as RadialAxis.AxisComposition).startAngleRad, + chart = this.chart, + isRadial = this.xAxis.isRadial, + safeDistance = Math.max(chart.chartWidth, chart.chartHeight) + 999; + + let height: number, + heightDifference: number, + start: number, + plotHigh: number, + y: number; + + // eslint-disable-next-line valid-jsdoc + /** + * Don't draw too far outside plot area (#6835) + * @private + */ + function safeBounds(pixelPos: number): number { + return clamp(pixelPos, -safeDistance, safeDistance); + } -addEvent(ColumnRangeSeries, 'afterColumnTranslate', function (): void { - /** - * Translate data points from raw values x and y to plotX and plotY - * @private - */ - const yAxis = this.yAxis, - xAxis = this.xAxis, - startAngleRad = (xAxis as RadialAxis.AxisComposition).startAngleRad, - chart = this.chart, - isRadial = this.xAxis.isRadial, - safeDistance = Math.max(chart.chartWidth, chart.chartHeight) + 999; - - let height: number, - heightDifference: number, - start: number, - plotHigh: number, - y: number; - - // eslint-disable-next-line valid-jsdoc - /** - * Don't draw too far outside plot area (#6835) - * @private - */ - function safeBounds(pixelPos: number): number { - return clamp(pixelPos, -safeDistance, safeDistance); - } + // Set plotLow and plotHigh + this.points.forEach((point): void => { + const shapeArgs = point.shapeArgs || {}, + minPointLength = this.options.minPointLength, + plotY = point.plotY, + plotHigh = yAxis.translate( + point.high, 0 as any, 1 as any, 0 as any, 1 as any + ); - // Set plotLow and plotHigh - this.points.forEach((point): void => { - const shapeArgs = point.shapeArgs || {}, - minPointLength = this.options.minPointLength, - plotY = point.plotY, - plotHigh = yAxis.translate( - point.high, 0 as any, 1 as any, 0 as any, 1 as any - ); - - if (isNumber(plotHigh) && isNumber(plotY)) { - point.plotHigh = safeBounds(plotHigh); - point.plotLow = safeBounds(plotY); - - // adjust shape - y = point.plotHigh; - height = pick( - (point as any).rectPlotY, - point.plotY - ) - point.plotHigh; - - // Adjust for minPointLength - if (Math.abs(height) < (minPointLength as any)) { - heightDifference = ((minPointLength as any) - height); - height += heightDifference; - y -= heightDifference / 2; - - // Adjust for negative ranges or reversed Y axis (#1457) - } else if (height < 0) { - height *= -1; - y -= height; + if (isNumber(plotHigh) && isNumber(plotY)) { + point.plotHigh = safeBounds(plotHigh); + point.plotLow = safeBounds(plotY); + + // adjust shape + y = point.plotHigh; + height = pick( + (point as any).rectPlotY, + point.plotY + ) - point.plotHigh; + + // Adjust for minPointLength + if (Math.abs(height) < (minPointLength as any)) { + heightDifference = ((minPointLength as any) - height); + height += heightDifference; + y -= heightDifference / 2; + + // Adjust for negative ranges or reversed Y axis (#1457) + } else if (height < 0) { + height *= -1; + y -= height; + } + + if (isRadial && this.polar) { + + start = point.barX + startAngleRad; + point.shapeType = 'arc'; + point.shapeArgs = this.polar.arc( + y + height, + y, + start, + start + point.pointWidth + ); + } else { + + shapeArgs.height = height; + shapeArgs.y = y; + const { x = 0, width = 0 } = shapeArgs; + // #17912, aligning column range points + // merge if shapeArgs contains more properties e.g. for 3d + point.shapeArgs = merge(point.shapeArgs, + this.crispCol(x, y, width, height)); + + point.tooltipPos = chart.inverted ? + [ + yAxis.len + yAxis.pos - chart.plotLeft - y - + height / 2, + xAxis.len + xAxis.pos - chart.plotTop - x - + width / 2, + height + ] : [ + xAxis.left - chart.plotLeft + x + width / 2, + yAxis.pos - chart.plotTop + y + height / 2, + height + ]; // don't inherit from column tooltip position - #3372 + } } + }); + } +} - if (isRadial && this.polar) { - - start = point.barX + startAngleRad; - point.shapeType = 'arc'; - point.shapeArgs = this.polar.arc( - y + height, - y, - start, - start + point.pointWidth - ); - } else { - - shapeArgs.height = height; - shapeArgs.y = y; - const { x = 0, width = 0 } = shapeArgs; - // #17912, aligning column range points - // merge if shapeArgs contains more properties e.g. for 3d - point.shapeArgs = merge(point.shapeArgs, - this.crispCol(x, y, width, height)); - - point.tooltipPos = chart.inverted ? - [ - yAxis.len + yAxis.pos - chart.plotLeft - y - - height / 2, - xAxis.len + xAxis.pos - chart.plotTop - x - - width / 2, - height - ] : [ - xAxis.left - chart.plotLeft + x + width / 2, - yAxis.pos - chart.plotTop + y + height / 2, - height - ]; // don't inherit from column tooltip position - #3372 - } - } - }); +addEvent(ColumnRangeSeries, 'afterColumnTranslate', function (): void { + ColumnRangeSeries.prototype.afterColumnTranslate.apply(this); }, { order: 5 }); /* * diff --git a/ts/Series/Dumbbell/DumbbellSeries.ts b/ts/Series/Dumbbell/DumbbellSeries.ts index 5a4095a10df..58939ea58ef 100755 --- a/ts/Series/Dumbbell/DumbbellSeries.ts +++ b/ts/Series/Dumbbell/DumbbellSeries.ts @@ -483,6 +483,16 @@ class DumbbellSeries extends AreaRangeSeries { return pointAttribs; } + + /** + * Set the shape arguments for dummbells. + * @private + */ + public setShapeArgs(): void { + colProto.translate.apply(this); + columnRangeProto.afterColumnTranslate.apply(this); + } + } /* * @@ -496,7 +506,6 @@ interface DumbbellSeries { crispCol: typeof colProto.crispCol; trackerGroups: Array; translatePoint: typeof AreaRangeSeries.prototype['translate']; - setShapeArgs: typeof columnRangeProto['translate']; seriesDrawPoints: typeof AreaRangeSeries.prototype['drawPoints']; } extend(DumbbellSeries.prototype, { @@ -504,7 +513,6 @@ extend(DumbbellSeries.prototype, { drawGraph: noop, drawTracker: ColumnSeries.prototype.drawTracker, pointClass: DumbbellPoint, - setShapeArgs: columnRangeProto.translate, seriesDrawPoints: areaRangeProto.drawPoints, trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'], translatePoint: areaRangeProto.translate