Skip to content

Commit 3eb9477

Browse files
LeeLenaleeeLeeLenaleee
authored
Put the border opts in own object (#10571)
* put borderOpts in own object * document z option * remove todo and change scaleId to id * update some tests * clean bit, remove console log * fix failing test * lint * Remove comment
1 parent 49b16c9 commit 3eb9477

27 files changed

+209
-121
lines changed

‎docs/axes/_common.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Namespace: `options.scales[scaleId]`
77
| `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
88
| `alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
99
| `backgroundColor` | [`Color`](/general/colors.md) | | Background color of the scale area.
10+
| `border` | `object` | | Border configuration. [more...](/axes/styling.md#border-configuration)
1011
| `display` | `boolean`\|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
1112
| `grid` | `object` | | Grid line configuration. [more...](/axes/styling.md#grid-line-configuration)
1213
| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](/axes/index.md#axis-range-settings)

‎docs/axes/styling.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,9 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
88

99
| Name | Type | Scriptable | Indexable | Default | Description
1010
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
11-
| `borderColor` | [`Color`](../general/colors.md) | | | `Chart.defaults.borderColor` | The color of the border line.
12-
| `borderWidth` | `number` | | | `1` | The width of the border line.
13-
| `borderDash` | `number[]` | Yes | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
14-
| `borderDashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
1511
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only).
1612
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on.
1713
| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
18-
| `drawBorder` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area.
1914
| `drawOnChartArea` | `boolean` | | | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
2015
| `drawTicks` | `boolean` | | | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
2116
| `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
@@ -25,7 +20,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
2520
| `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.
2621
| `tickLength` | `number` | | | `8` | Length in pixels that the grid lines will draw into the axis area.
2722
| `tickWidth` | `number` | Yes | Yes | | Width of the tick mark in pixels. If unset, defaults to the grid line width.
28-
| `z` | `number` | | | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
23+
| `z` | `number` | | | `-1` | z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
2924

3025
The scriptable context is described in [Options](../general/options.md#tick) section.
3126

@@ -42,3 +37,16 @@ Namespace: `options.scales[scaleId].ticks.major`, it defines options for the maj
4237
| Name | Type | Default | Description
4338
| ---- | ---- | ------- | -----------
4439
| `enabled` | `boolean` | `false` | If true, major ticks are generated. A major tick will affect autoskipping and `major` will be defined on ticks in the scriptable options context.
40+
41+
## Border Configuration
42+
43+
Namespace: `options.scales[scaleId].border`, it defines options for the border that run perpendicular to the axis.
44+
45+
| Name | Type | Scriptable | Indexable | Default | Description
46+
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
47+
| `display` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area.
48+
| `color` | [`Color`](../general/colors.md) | | | `Chart.defaults.borderColor` | The color of the border line.
49+
| `width` | `number` | | | `1` | The width of the border line.
50+
| `dash` | `number[]` | Yes | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
51+
| `dashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
52+
| `z` | `number` | | | `0` | z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.

‎docs/migration/v4-migration.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ A number of changes were made to the configuration options passed to the `Chart`
1717
* The radialLinear grid indexable and scriptable options don't decrease the index of the specified grid line anymore.
1818
* The `destroy` plugin hook has been removed and replaced with `afterDestroy`.
1919
* Ticks callback on time scale now receives timestamp instead of a formatted label.
20+
* `scales[id].grid.drawBorder` has been renamed to `scales[id].border.display`.
21+
* `scales[id].grid.borderWidth` has been renamed to `scales[id].border.width`.
22+
* `scales[id].grid.borderColor` has been renamed to `scales[id].border.color`.
23+
* `scales[id].grid.borderDash` has been renamed to `scales[id].border.dash`.
24+
* `scales[id].grid.borderDashOffset` has been renamed to `scales[id].border.dashOffset`.
25+
* The z index for the border of a scale is now configurable instead of being 1 higher as the grid z index.
2026
* Linear scales now add and subtracts `5%` of the max value to the range if the min and max are the same instead of `1`.
2127
* If the tooltip callback returns `undefined`, then the default callback will be used.
2228

‎docs/samples/scale-options/grid.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,16 +61,20 @@ const config = {
6161
},
6262
scales: {
6363
x: {
64+
border: {
65+
display: BORDER
66+
},
6467
grid: {
6568
display: DISPLAY,
66-
drawBorder: BORDER,
6769
drawOnChartArea: CHART_AREA,
6870
drawTicks: TICKS,
6971
}
7072
},
7173
y: {
74+
border: {
75+
display: false
76+
},
7277
grid: {
73-
drawBorder: false,
7478
color: function(context) {
7579
if (context.tick.value > 0) {
7680
return Utils.CHART_COLORS.green;

‎src/core/core.scale.defaults.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,19 @@ export function applyScaleDefaults(defaults) {
2626
grid: {
2727
display: true,
2828
lineWidth: 1,
29-
drawBorder: true,
3029
drawOnChartArea: true,
3130
drawTicks: true,
3231
tickLength: 8,
3332
tickWidth: (_ctx, options) => options.lineWidth,
3433
tickColor: (_ctx, options) => options.color,
3534
offset: false,
36-
borderDash: [],
37-
borderDashOffset: 0.0,
38-
borderWidth: 1
35+
},
36+
37+
border: {
38+
display: true,
39+
dash: [],
40+
dashOffset: 0.0,
41+
width: 1
3942
},
4043

4144
// scale title
@@ -80,13 +83,13 @@ export function applyScaleDefaults(defaults) {
8083

8184
defaults.route('scale.ticks', 'color', '', 'color');
8285
defaults.route('scale.grid', 'color', '', 'borderColor');
83-
defaults.route('scale.grid', 'borderColor', '', 'borderColor');
86+
defaults.route('scale.border', 'color', '', 'borderColor');
8487
defaults.route('scale.title', 'color', '', 'color');
8588

8689
defaults.describe('scale', {
8790
_fallback: false,
8891
_scriptable: (name) => !name.startsWith('before') && !name.startsWith('after') && name !== 'callback' && name !== 'parser',
89-
_indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash',
92+
_indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash' && name !== 'dash',
9093
});
9194

9295
defaults.describe('scales', {

‎src/core/core.scale.js

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,16 +1004,16 @@ export default class Scale extends Element {
10041004
const axis = this.axis;
10051005
const chart = this.chart;
10061006
const options = this.options;
1007-
const {grid, position} = options;
1007+
const {grid, position, border} = options;
10081008
const offset = grid.offset;
10091009
const isHorizontal = this.isHorizontal();
10101010
const ticks = this.ticks;
10111011
const ticksLength = ticks.length + (offset ? 1 : 0);
10121012
const tl = getTickMarkLength(grid);
10131013
const items = [];
10141014

1015-
const borderOpts = grid.setContext(this.getContext());
1016-
const axisWidth = borderOpts.drawBorder ? borderOpts.borderWidth : 0;
1015+
const borderOpts = border.setContext(this.getContext());
1016+
const axisWidth = borderOpts.display ? borderOpts.width : 0;
10171017
const axisHalfWidth = axisWidth / 2;
10181018
const alignBorderValue = function(pixel) {
10191019
return _alignPixel(chart, pixel, axisWidth);
@@ -1076,12 +1076,14 @@ export default class Scale extends Element {
10761076
const limit = valueOrDefault(options.ticks.maxTicksLimit, ticksLength);
10771077
const step = Math.max(1, Math.ceil(ticksLength / limit));
10781078
for (i = 0; i < ticksLength; i += step) {
1079-
const optsAtIndex = grid.setContext(this.getContext(i));
1079+
const context = this.getContext(i);
1080+
const optsAtIndex = grid.setContext(context);
1081+
const optsAtIndexBorder = border.setContext(context);
10801082

10811083
const lineWidth = optsAtIndex.lineWidth;
10821084
const lineColor = optsAtIndex.color;
1083-
const borderDash = optsAtIndex.borderDash || [];
1084-
const borderDashOffset = optsAtIndex.borderDashOffset;
1085+
const borderDash = optsAtIndexBorder.dash || [];
1086+
const borderDashOffset = optsAtIndexBorder.dashOffset;
10851087

10861088
const tickWidth = optsAtIndex.tickWidth;
10871089
const tickColor = optsAtIndex.tickColor;
@@ -1496,9 +1498,9 @@ export default class Scale extends Element {
14961498
* @protected
14971499
*/
14981500
drawBorder() {
1499-
const {chart, ctx, options: {grid}} = this;
1500-
const borderOpts = grid.setContext(this.getContext());
1501-
const axisWidth = grid.drawBorder ? borderOpts.borderWidth : 0;
1501+
const {chart, ctx, options: {border, grid}} = this;
1502+
const borderOpts = border.setContext(this.getContext());
1503+
const axisWidth = border.display ? borderOpts.width : 0;
15021504
if (!axisWidth) {
15031505
return;
15041506
}
@@ -1516,8 +1518,8 @@ export default class Scale extends Element {
15161518
x1 = x2 = borderValue;
15171519
}
15181520
ctx.save();
1519-
ctx.lineWidth = borderOpts.borderWidth;
1520-
ctx.strokeStyle = borderOpts.borderColor;
1521+
ctx.lineWidth = borderOpts.width;
1522+
ctx.strokeStyle = borderOpts.color;
15211523

15221524
ctx.beginPath();
15231525
ctx.moveTo(x1, y1);
@@ -1622,6 +1624,7 @@ export default class Scale extends Element {
16221624
const opts = this.options;
16231625
const tz = opts.ticks && opts.ticks.z || 0;
16241626
const gz = valueOrDefault(opts.grid && opts.grid.z, -1);
1627+
const bz = valueOrDefault(opts.border && opts.border.z, 0);
16251628

16261629
if (!this._isVisible() || this.draw !== Scale.prototype.draw) {
16271630
// backward compatibility: draw has been overridden by custom scale
@@ -1641,7 +1644,7 @@ export default class Scale extends Element {
16411644
this.drawTitle();
16421645
}
16431646
}, {
1644-
z: gz + 1, // TODO, v4 move border options to its own object and add z
1647+
z: bz,
16451648
draw: () => {
16461649
this.drawBorder();
16471650
}

‎src/scales/scale.radialLinear.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ function pathRadiusLine(scale, radius, circular, labelCount) {
264264
}
265265
}
266266

267-
function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
267+
function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) {
268268
const ctx = scale.ctx;
269269
const circular = gridLineOpts.circular;
270270

@@ -277,8 +277,8 @@ function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
277277
ctx.save();
278278
ctx.strokeStyle = color;
279279
ctx.lineWidth = lineWidth;
280-
ctx.setLineDash(gridLineOpts.borderDash);
281-
ctx.lineDashOffset = gridLineOpts.borderDashOffset;
280+
ctx.setLineDash(borderOpts.dash);
281+
ctx.lineDashOffset = borderOpts.dashOffset;
282282

283283
ctx.beginPath();
284284
pathRadiusLine(scale, radius, circular, labelCount);
@@ -527,7 +527,7 @@ export default class RadialLinearScale extends LinearScaleBase {
527527
drawGrid() {
528528
const ctx = this.ctx;
529529
const opts = this.options;
530-
const {angleLines, grid} = opts;
530+
const {angleLines, grid, border} = opts;
531531
const labelCount = this._pointLabels.length;
532532

533533
let i, offset, position;
@@ -540,8 +540,11 @@ export default class RadialLinearScale extends LinearScaleBase {
540540
this.ticks.forEach((tick, index) => {
541541
if (index !== 0) {
542542
offset = this.getDistanceFromCenterForValue(tick.value);
543-
const optsAtIndex = grid.setContext(this.getContext(index));
544-
drawRadiusLine(this, optsAtIndex, offset, labelCount);
543+
const context = this.getContext(index);
544+
const optsAtIndex = grid.setContext(context);
545+
const optsAtIndexBorder = border.setContext(context);
546+
547+
drawRadiusLine(this, optsAtIndex, offset, labelCount, optsAtIndexBorder);
545548
}
546549
});
547550
}

‎test/fixtures/core.layouts/stacked-boxes-with-weight.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ module.exports = {
1919
stackWeight: 2,
2020
offset: true,
2121
bounds: 'data',
22-
grid: {
23-
borderColor: 'red'
22+
border: {
23+
color: 'red'
2424
},
2525
ticks: {
2626
autoSkip: false,
@@ -35,8 +35,8 @@ module.exports = {
3535
stackWeight: 2,
3636
offset: true,
3737
bounds: 'data',
38-
grid: {
39-
borderColor: 'green'
38+
border: {
39+
color: 'green'
4040
},
4141
ticks: {
4242
autoSkip: false,
@@ -51,8 +51,8 @@ module.exports = {
5151
stackWeight: 6,
5252
offset: true,
5353
bounds: 'data',
54-
grid: {
55-
borderColor: 'blue'
54+
border: {
55+
color: 'blue'
5656
},
5757
ticks: {
5858
autoSkip: false,
@@ -66,8 +66,8 @@ module.exports = {
6666
stack: '1',
6767
stackWeight: 2,
6868
offset: true,
69-
grid: {
70-
borderColor: 'red'
69+
border: {
70+
color: 'red'
7171
},
7272
ticks: {
7373
precision: 0
@@ -79,8 +79,8 @@ module.exports = {
7979
stack: '1',
8080
offset: true,
8181
stackWeight: 2,
82-
grid: {
83-
borderColor: 'green'
82+
border: {
83+
color: 'green'
8484
},
8585
ticks: {
8686
precision: 0
@@ -92,8 +92,8 @@ module.exports = {
9292
stack: '1',
9393
stackWeight: 3,
9494
offset: true,
95-
grid: {
96-
borderColor: 'blue'
95+
border: {
96+
color: 'blue'
9797
},
9898
ticks: {
9999
precision: 0

‎test/fixtures/core.layouts/stacked-boxes.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ module.exports = {
1818
stack: '1',
1919
offset: true,
2020
bounds: 'data',
21-
grid: {
22-
borderColor: 'red'
21+
border: {
22+
color: 'red'
2323
},
2424
ticks: {
2525
autoSkip: false,
@@ -33,8 +33,8 @@ module.exports = {
3333
stack: '1',
3434
offset: true,
3535
bounds: 'data',
36-
grid: {
37-
borderColor: 'green'
36+
border: {
37+
color: 'green'
3838
},
3939
ticks: {
4040
autoSkip: false,
@@ -48,8 +48,8 @@ module.exports = {
4848
stack: '1',
4949
offset: true,
5050
bounds: 'data',
51-
grid: {
52-
borderColor: 'blue'
51+
border: {
52+
color: 'blue'
5353
},
5454
ticks: {
5555
autoSkip: false,
@@ -62,8 +62,8 @@ module.exports = {
6262
position: 'left',
6363
stack: '1',
6464
offset: true,
65-
grid: {
66-
borderColor: 'red'
65+
border: {
66+
color: 'red'
6767
},
6868
ticks: {
6969
precision: 0
@@ -74,8 +74,8 @@ module.exports = {
7474
position: 'left',
7575
stack: '1',
7676
offset: true,
77-
grid: {
78-
borderColor: 'green'
77+
border: {
78+
color: 'green'
7979
},
8080
ticks: {
8181
precision: 0
@@ -86,8 +86,8 @@ module.exports = {
8686
position: 'left',
8787
stack: '1',
8888
offset: true,
89-
grid: {
90-
borderColor: 'blue'
89+
border: {
90+
color: 'blue',
9191
},
9292
ticks: {
9393
precision: 0

0 commit comments

Comments
 (0)