Skip to content

Commit 7f31cd6

Browse files
stockiNailstockiNail
authored
Add xAdjust and yAdjust options to point and polygon annotations (#551)
* first commit * adds test cases * adds docs, samples and types * adds adjustment to the samples * renames samples files * additional test case
1 parent 03b1d73 commit 7f31cd6

File tree

21 files changed

+903
-5
lines changed

21 files changed

+903
-5
lines changed

‎docs/.vuepress/config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,13 +144,15 @@ module.exports = {
144144
children: [
145145
'point/basic',
146146
'point/combined',
147+
'point/outsideChartArea',
147148
]
148149
},
149150
{
150151
title: 'Polygon annotations',
151152
children: [
152153
'polygon/basic',
153154
'polygon/stop',
155+
'polygon/outsideChartArea',
154156
]
155157
},
156158
{

‎docs/guide/types/point.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,12 @@ The following options are available for point annotations.
6060
| [`pointStyle`](#styling) | [`PointStyle`](../options#point-style) | Yes | `'circle'`
6161
| [`radius`](#general) | `number` | Yes | `10`
6262
| [`rotation`](#general) | `number` | Yes | `0`
63+
| [`xAdjust`](#general) | `number` | Yes | `0`
6364
| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
6465
| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
6566
| [`xScaleID`](#general) | `string` | Yes | `'x'`
6667
| [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
68+
| [`yAdjust`](#general) | `number` | Yes | `0`
6769
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
6870
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
6971
| [`yScaleID`](#general) | `string` | Yes | `'y'`
@@ -83,10 +85,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
8385
| `drawTime` | See [drawTime](../options#draw-time).
8486
| `radius` | Size of the point in pixels.
8587
| `rotation` | Rotation of point, in degrees.
88+
| `xAdjust` | Adjustment along x-axis (left-right) of point relative to computed position. Negative values move the point left, positive right.
8689
| `xMax` | Right edge of the box in units along the x axis.
8790
| `xMin` | Left edge of the box in units along the x axis.
8891
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
8992
| `xValue` | X coordinate of the point in units along the x axis.
93+
| `yAdjust` | Adjustment along y-axis (top-bottom) of point relative to computed position. Negative values move the point up, positive down.
9094
| `yMax` | Bottom edge of the box in units along the y axis.
9195
| `yMin` | Top edge of the box in units along the y axis.
9296
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.

‎docs/guide/types/polygon.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,12 @@ The following options are available for polygon annotations.
6464
| [`radius`](#general) | `number` | Yes | `10`
6565
| [`rotation`](#general) | `number` | Yes | `0`
6666
| [`sides`](#general) | `number` | Yes | `3`
67+
| [`xAdjust`](#general) | `number` | Yes | `0`
6768
| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
6869
| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
6970
| [`xScaleID`](#general) | `string` | Yes | `'x'`
7071
| [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
72+
| [`yAdjust`](#general) | `number` | Yes | `0`
7173
| [`yScaleID`](#general) | `string` | Yes | `'y'`
7274
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
7375
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
@@ -87,10 +89,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
8789
| `radius` | Size of the polygon in pixels.
8890
| `rotation` | Rotation of polygon, in degrees.
8991
| `sides` | Amount of sides of polygon.
92+
| `xAdjust` | Adjustment along x-axis (left-right) of polygon relative to computed position. Negative values move the polygon left, positive right.
9093
| `xMax` | Right edge of the box in units along the x axis.
9194
| `xMin` | Left edge of the box in units along the x axis.
9295
| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
9396
| `xValue` | X coordinate of the polygon in units along the x axis.
97+
| `yAdjust` | Adjustment along y-axis (top-bottom) of polygon relative to computed position. Negative values move the polygon up, positive down.
9498
| `yMax` | Bottom edge of the box in units along the y axis.
9599
| `yMin` | Top edge of the box in units along the y axis.
96100
| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.

‎docs/samples/point/outsideChartArea.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# Points outside of chart area
2+
3+
```js chart-editor
4+
// <block:setup:6>
5+
const DATA_COUNT = 12;
6+
const MIN = 10;
7+
const MAX = 100;
8+
9+
Utils.srand(8);
10+
11+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
12+
13+
const data = {
14+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
15+
datasets: [{
16+
data: Utils.numbers(numberCfg)
17+
}, {
18+
data: Utils.numbers(numberCfg)
19+
}]
20+
};
21+
// </block:setup>
22+
23+
// <block:annotation1:1>
24+
const annotation1 = {
25+
type: 'point',
26+
backgroundColor: 'lime',
27+
borderColor: 'black',
28+
borderWidth: 1,
29+
pointStyle: 'triangle',
30+
radius: 15,
31+
xValue: 3,
32+
xScaleID: 'x',
33+
yAdjust: 5,
34+
yValue: 0,
35+
yScaleID: 'y'
36+
};
37+
// </block:annotation1>
38+
39+
// <block:annotation2:2>
40+
const annotation2 = {
41+
type: 'point',
42+
backgroundColor: 'lime',
43+
borderColor: 'black',
44+
borderWidth: 1,
45+
pointStyle: 'triangle',
46+
radius: 15,
47+
rotation: 180,
48+
xValue: 3,
49+
xScaleID: 'x',
50+
yAdjust: -5,
51+
yValue: 100,
52+
yScaleID: 'y'
53+
};
54+
// </block:annotation2>
55+
56+
/* <block:config:0> */
57+
const config = {
58+
type: 'bar',
59+
data,
60+
options: {
61+
layout: {
62+
padding: {
63+
top: 16
64+
}
65+
},
66+
scale: {
67+
y: {
68+
beginAtZero: true,
69+
max: 100,
70+
min: 0
71+
}
72+
},
73+
plugins: {
74+
annotation: {
75+
clip: false,
76+
drawTime: 'afterDraw',
77+
annotations: {
78+
annotation1,
79+
annotation2
80+
}
81+
}
82+
}
83+
}
84+
};
85+
/* </block:config> */
86+
87+
const actions = [
88+
{
89+
name: 'Randomize',
90+
handler: function(chart) {
91+
chart.data.datasets.forEach(function(dataset, i) {
92+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
93+
});
94+
const xValue = Utils.rand(0, DATA_COUNT - 1);
95+
chart.options.plugins.annotation.annotations.annotation1.xValue = xValue;
96+
chart.options.plugins.annotation.annotations.annotation2.xValue = xValue;
97+
chart.update();
98+
}
99+
}
100+
];
101+
102+
module.exports = {
103+
actions: actions,
104+
config: config,
105+
};
106+
```

‎docs/samples/polygon/outsideChartArea.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# Polygons outside of chart area
2+
3+
```js chart-editor
4+
// <block:setup:4>
5+
const DATA_COUNT = 12;
6+
const MIN = 10;
7+
const MAX = 100;
8+
9+
Utils.srand(8);
10+
11+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
12+
13+
const data = {
14+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
15+
datasets: [{
16+
data: Utils.numbers(numberCfg)
17+
}, {
18+
data: Utils.numbers(numberCfg)
19+
}]
20+
};
21+
// </block:setup>
22+
23+
// <block:annotation1:1>
24+
const annotation1 = {
25+
type: 'line',
26+
borderColor: 'lime',
27+
borderWidth: 2,
28+
scaleID: 'x',
29+
value: 3
30+
};
31+
// </block:annotation1>
32+
33+
// <block:annotation2:2>
34+
const annotation2 = {
35+
type: 'polygon',
36+
backgroundColor: 'lime',
37+
borderColor: 'black',
38+
borderWidth: 1,
39+
radius: 15,
40+
sides: 5,
41+
xValue: 3,
42+
xScaleID: 'x',
43+
yAdjust: 5,
44+
yValue: 0,
45+
yScaleID: 'y'
46+
};
47+
// </block:annotation2>
48+
49+
// <block:annotation3:3>
50+
const annotation3 = {
51+
type: 'polygon',
52+
backgroundColor: 'lime',
53+
borderColor: 'black',
54+
borderWidth: 1,
55+
pointStyle: 'triangle',
56+
radius: 15,
57+
rotation: 180,
58+
sides: 5,
59+
xValue: 3,
60+
xScaleID: 'x',
61+
yAdjust: -5,
62+
yValue: 100,
63+
yScaleID: 'y'
64+
};
65+
// </block:annotation3>
66+
67+
/* <block:config:0> */
68+
const config = {
69+
type: 'bar',
70+
data,
71+
options: {
72+
layout: {
73+
padding: {
74+
top: 20
75+
}
76+
},
77+
scale: {
78+
y: {
79+
beginAtZero: true,
80+
max: 100,
81+
min: 0
82+
}
83+
},
84+
plugins: {
85+
annotation: {
86+
clip: false,
87+
drawTime: 'afterDraw',
88+
annotations: {
89+
annotation1,
90+
annotation2,
91+
annotation3
92+
}
93+
}
94+
}
95+
}
96+
};
97+
/* </block:config> */
98+
99+
const actions = [
100+
{
101+
name: 'Randomize',
102+
handler: function(chart) {
103+
chart.data.datasets.forEach(function(dataset, i) {
104+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
105+
});
106+
const xValue = Utils.rand(0, DATA_COUNT - 1);
107+
chart.options.plugins.annotation.annotations.annotation1.value = xValue;
108+
chart.options.plugins.annotation.annotations.annotation2.xValue = xValue;
109+
chart.options.plugins.annotation.annotations.annotation3.xValue = xValue;
110+
chart.update();
111+
}
112+
}
113+
];
114+
115+
module.exports = {
116+
actions: actions,
117+
config: config,
118+
};
119+
```

‎src/helpers/helpers.chart.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ export function getChartRect(chart, options) {
6868
export function getChartCircle(chart, options) {
6969
const point = getChartPoint(chart, options);
7070
return {
71-
x: point.x,
72-
y: point.y,
71+
x: point.x + options.xAdjust,
72+
y: point.y + options.yAdjust,
7373
width: options.radius * 2,
7474
height: options.radius * 2
7575
};
@@ -85,8 +85,8 @@ export function resolvePointPosition(chart, options) {
8585
options.radius = radius;
8686
}
8787
return {
88-
x: point.x,
89-
y: point.y,
88+
x: point.x + options.xAdjust,
89+
y: point.y + options.yAdjust,
9090
width: radius * 2,
9191
height: radius * 2
9292
};

‎src/types/point.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@ PointAnnotation.defaults = {
3232
pointStyle: 'circle',
3333
radius: 10,
3434
rotation: 0,
35+
xAdjust: 0,
3536
xMax: undefined,
3637
xMin: undefined,
3738
xScaleID: 'x',
3839
xValue: undefined,
40+
yAdjust: 0,
3941
yMax: undefined,
4042
yMin: undefined,
4143
yScaleID: 'y',

‎src/types/polygon.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,12 @@ PolygonAnnotation.defaults = {
5757
radius: 10,
5858
rotation: 0,
5959
sides: 3,
60+
xAdjust: 0,
6061
xMax: undefined,
6162
xMin: undefined,
6263
xScaleID: 'x',
6364
xValue: undefined,
65+
yAdjust: 0,
6466
yMax: undefined,
6567
yMin: undefined,
6668
yScaleID: 'y',

0 commit comments

Comments
 (0)