Skip to content

Commit 6bf1a72

Browse files
stockiNailstockiNail
authored
Use scale defined in the chart when x/y ScaleID options are not set (#678)
* Use scale defined in the chart when x/y ScaleID options are not set * removes an empty line * fixes CC * updates documentation * applies review * adds note about breaking changes to migration guide
1 parent dda0e5c commit 6bf1a72

27 files changed

+380
-46
lines changed

‎docs/guide/migrationV2.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
11
# 2.x Migration guide
2+
3+
`chartjs-plugin-annotation` plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
4+
5+
## Options
6+
7+
A number of changes were made to the configuration options passed to the plugin configuration. Those changes are documented below.
8+
9+
* `xScaleID` option default has been changed, now set to `undefined`. If the option is missing, the plugin will try to use the first scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
10+
* `yScaleID` option default has been changed, now set to `undefined`. If the option is missing, the plugin will try to use the first scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.

‎docs/guide/types/box.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ The following options are available for box annotations.
7171
| [`shadowOffsetY`](#styling) | `number` | Yes | `0`
7272
| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
7373
| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
74-
| [`xScaleID`](#general) | `string` | Yes | `'x'`
74+
| [`xScaleID`](#general) | `string` | Yes | `undefined`
7575
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
7676
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
77-
| [`yScaleID`](#general) | `string` | Yes | `'y'`
77+
| [`yScaleID`](#general) | `string` | Yes | `undefined`
7878

7979
### General
8080

@@ -88,10 +88,10 @@ If one of the axes does not match an axis in the chart, the box will take the en
8888
| `rotation` | Rotation of the box in degrees.
8989
| `xMax` | Right edge of the box in units along the x axis.
9090
| `xMin` | Left edge of the box in units along the x axis.
91-
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
91+
| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
9292
| `yMax` | Bottom edge of the box in units along the y axis.
9393
| `yMin` | Top edge of the box in units along the y axis.
94-
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
94+
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
9595

9696
### Styling
9797

‎docs/guide/types/ellipse.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ The following options are available for ellipse annotations.
6767
| [`shadowOffsetY`](#styling) | `number` | Yes | `0`
6868
| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
6969
| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
70-
| [`xScaleID`](#general) | `string` | Yes | `'x'`
70+
| [`xScaleID`](#general) | `string` | Yes | `undefined`
7171
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
7272
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
73-
| [`yScaleID`](#general) | `string` | Yes | `'y'`
73+
| [`yScaleID`](#general) | `string` | Yes | `undefined`
7474

7575
### General
7676

@@ -84,10 +84,10 @@ If one of the axes does not match an axis in the chart, the ellipse will take th
8484
| `rotation` | Rotation of the ellipse in degrees, default is 0.
8585
| `xMax` | Right edge of the ellipse in units along the x axis.
8686
| `xMin` | Left edge of the ellipse in units along the x axis.
87-
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
87+
| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
8888
| `yMax` | Bottom edge of the ellipse in units along the y axis.
8989
| `yMin` | Top edge of the ellipse in units along the y axis.
90-
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
90+
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
9191

9292
### Styling
9393

‎docs/guide/types/label.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,12 @@ The following options are available for label annotations.
8484
| [`xAdjust`](#general) | `number` | Yes | `0`
8585
| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
8686
| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
87-
| [`xScaleID`](#general) | `string` | Yes | `'x'`
87+
| [`xScaleID`](#general) | `string` | Yes | `undefined`
8888
| [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
8989
| [`yAdjust`](#general) | `number` | Yes | `0`
9090
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
9191
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
92-
| [`yScaleID`](#general) | `string` | Yes | `'y'`
92+
| [`yScaleID`](#general) | `string` | Yes | `undefined`
9393
| [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
9494

9595
### General
@@ -112,12 +112,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
112112
| `xAdjust` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
113113
| `xMax` | Right edge of the box in units along the x axis.
114114
| `xMin` | Left edge of the box in units along the x axis.
115-
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
115+
| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
116116
| `xValue` | X coordinate of the point in units along the x axis.
117117
| `yAdjust` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.
118118
| `yMax` | Bottom edge of the box in units along the y axis.
119119
| `yMin` | Top edge of the box in units along the y axis.
120-
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
120+
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
121121
| `yValue` | Y coordinate of the point in units along the y axis.
122122

123123
### Styling

‎docs/guide/types/line.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ The following options are available for line annotations. All of these options c
6868
| [`value`](#positioning) | `number` | Yes | `undefined`
6969
| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
7070
| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
71-
| [`xScaleID`](#positioning) | `string` | Yes | `'x'`
71+
| [`xScaleID`](#positioning) | `string` | Yes | `undefined`
7272
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
7373
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
74-
| [`yScaleID`](#positioning) | `string` | Yes | `'y'`
74+
| [`yScaleID`](#positioning) | `string` | Yes | `undefined`
7575

7676
### General
7777

@@ -103,10 +103,10 @@ If `scaleID` is unset, then `xScaleID` and `yScaleID` are used to draw a line fr
103103
| `value` | End one of the line when a single scale is specified.
104104
| `xMax` | X coordinate of end two of the line in units along the x axis.
105105
| `xMin` | X coordinate of end one of the line in units along the x axis.
106-
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
106+
| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
107107
| `yMax` | Y coordinate of end two of the line in units along the y axis.
108108
| `yMin` | Y coordinate of end one of the line in units along the y axis.
109-
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
109+
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
110110

111111
### Styling
112112

‎docs/guide/types/point.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,12 @@ The following options are available for point annotations.
6868
| [`xAdjust`](#general) | `number` | Yes | `0`
6969
| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
7070
| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
71-
| [`xScaleID`](#general) | `string` | Yes | `'x'`
71+
| [`xScaleID`](#general) | `string` | Yes | `undefined`
7272
| [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
7373
| [`yAdjust`](#general) | `number` | Yes | `0`
7474
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
7575
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
76-
| [`yScaleID`](#general) | `string` | Yes | `'y'`
76+
| [`yScaleID`](#general) | `string` | Yes | `undefined`
7777
| [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
7878

7979
### General
@@ -92,12 +92,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
9292
| `xAdjust` | Adjustment along x-axis (left-right) of point relative to computed position. Negative values move the point left, positive right.
9393
| `xMax` | Right edge of the box in units along the x axis.
9494
| `xMin` | Left edge of the box in units along the x axis.
95-
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
95+
| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
9696
| `xValue` | X coordinate of the point in units along the x axis.
9797
| `yAdjust` | Adjustment along y-axis (top-bottom) of point relative to computed position. Negative values move the point up, positive down.
9898
| `yMax` | Bottom edge of the box in units along the y axis.
9999
| `yMin` | Top edge of the box in units along the y axis.
100-
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
100+
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
101101
| `yValue` | Y coordinate of the point in units along the y axis.
102102

103103
### Styling

‎docs/guide/types/polygon.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
9898
| `xAdjust` | Adjustment along x-axis (left-right) of polygon relative to computed position. Negative values move the polygon left, positive right.
9999
| `xMax` | Right edge of the box in units along the x axis.
100100
| `xMin` | Left edge of the box in units along the x axis.
101-
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
101+
| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
102102
| `xValue` | X coordinate of the polygon in units along the x axis.
103103
| `yAdjust` | Adjustment along y-axis (top-bottom) of polygon relative to computed position. Negative values move the polygon up, positive down.
104104
| `yMax` | Bottom edge of the box in units along the y axis.
105105
| `yMin` | Top edge of the box in units along the y axis.
106-
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
106+
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
107107
| `yValue` | Y coordinate of the polygon in units along the y axis.
108108

109109
### Styling

‎src/helpers/helpers.chart.js

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,25 @@ export function scaleValue(scale, value, fallback) {
2121
return isFinite(value) ? scale.getPixelForValue(value) : fallback;
2222
}
2323

24+
/**
25+
* @param {Object} scales - chartjs object with all scales
26+
* @param {Object} options - plugin options
27+
* @param {string} key - annotation plugin scale id option key
28+
* @returns {string} the unique scale defined in chartjs or the key passed as argument
29+
*/
30+
export function retrieveScaleID(scales, options, key) {
31+
const scaleID = options[key];
32+
if (scaleID || key === 'scaleID') {
33+
return scaleID;
34+
}
35+
const axis = key.charAt(0);
36+
const axes = Object.values(scales).filter((scale) => scale.axis && scale.axis === axis);
37+
if (axes.length) {
38+
return axes[0].id;
39+
}
40+
return axis;
41+
}
42+
2443
/**
2544
* @param {Scale} scale
2645
* @param {{start: number, end: number}} options
@@ -48,8 +67,8 @@ function getChartDimensionByScale(scale, options) {
4867
*/
4968
export function getChartPoint(chart, options) {
5069
const {chartArea, scales} = chart;
51-
const xScale = scales[options.xScaleID];
52-
const yScale = scales[options.yScaleID];
70+
const xScale = scales[retrieveScaleID(scales, options, 'xScaleID')];
71+
const yScale = scales[retrieveScaleID(scales, options, 'yScaleID')];
5372
let x = chartArea.width / 2;
5473
let y = chartArea.height / 2;
5574

@@ -69,8 +88,9 @@ export function getChartPoint(chart, options) {
6988
* @returns {{x?:number, y?: number, x2?: number, y2?: number, width?: number, height?: number}}
7089
*/
7190
export function getChartRect(chart, options) {
72-
const xScale = chart.scales[options.xScaleID];
73-
const yScale = chart.scales[options.yScaleID];
91+
const scales = chart.scales;
92+
const xScale = scales[retrieveScaleID(scales, options, 'xScaleID')];
93+
const yScale = scales[retrieveScaleID(scales, options, 'yScaleID')];
7494
let {top: y, left: x, bottom: y2, right: x2} = chart.chartArea;
7595

7696
if (!xScale && !yScale) {

‎src/scale.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import {isFinite, valueOrDefault, defined} from 'chart.js/helpers';
2+
import {retrieveScaleID} from './helpers';
23

34
export function adjustScaleRange(chart, scale, annotations) {
4-
const range = getScaleLimits(scale, annotations);
5+
const range = getScaleLimits(chart.scales, scale, annotations);
56
let changed = changeScaleLimit(scale, range, 'min', 'suggestedMin');
67
changed = changeScaleLimit(scale, range, 'max', 'suggestedMax') || changed;
78
if (changed && typeof scale.handleTickRangeOptions === 'function') {
@@ -29,8 +30,9 @@ function scaleLimitDefined(scaleOptions, limit, suggestedLimit) {
2930

3031
function verifyScaleIDs(annotation, scales) {
3132
for (const key of ['scaleID', 'xScaleID', 'yScaleID']) {
32-
if (annotation[key] && !scales[annotation[key]] && verifyProperties(annotation, key)) {
33-
console.warn(`No scale found with id '${annotation[key]}' for annotation '${annotation.id}'`);
33+
const scaleID = retrieveScaleID(scales, annotation, key);
34+
if (scaleID && !scales[scaleID] && verifyProperties(annotation, key)) {
35+
console.warn(`No scale found with id '${scaleID}' for annotation '${annotation.id}'`);
3436
}
3537
}
3638
}
@@ -48,7 +50,7 @@ function verifyProperties(annotation, key) {
4850
return false;
4951
}
5052

51-
function getScaleLimits(scale, annotations) {
53+
function getScaleLimits(scales, scale, annotations) {
5254
const axis = scale.axis;
5355
const scaleID = scale.id;
5456
const scaleIDOption = axis + 'ScaleID';
@@ -59,7 +61,7 @@ function getScaleLimits(scale, annotations) {
5961
for (const annotation of annotations) {
6062
if (annotation.scaleID === scaleID) {
6163
updateLimits(annotation, scale, ['value', 'endValue'], limits);
62-
} else if (annotation[scaleIDOption] === scaleID) {
64+
} else if (retrieveScaleID(scales, annotation, scaleIDOption) === scaleID) {
6365
updateLimits(annotation, scale, [axis + 'Min', axis + 'Max', axis + 'Value'], limits);
6466
}
6567
}

‎src/types/box.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,10 +92,10 @@ BoxAnnotation.defaults = {
9292
shadowOffsetY: 0,
9393
xMax: undefined,
9494
xMin: undefined,
95-
xScaleID: 'x',
95+
xScaleID: undefined,
9696
yMax: undefined,
9797
yMin: undefined,
98-
yScaleID: 'y'
98+
yScaleID: undefined
9999
};
100100

101101
BoxAnnotation.defaultRoutes = {

0 commit comments

Comments
 (0)