From af7965fc31655f13a99e145f15bb73637b840b14 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sun, 18 Apr 2021 05:49:22 -0400 Subject: [PATCH] Cartesian scale tick backdrop (#8931) --- docs/axes/_common_ticks.md | 3 + docs/axes/radial/linear.md | 3 - src/core/core.scale.defaults.js | 4 ++ src/core/core.scale.js | 59 ++++++++++++++-- src/scales/scale.radialLinear.js | 6 -- test/fixtures/core.scale/tick-backdrop.js | 76 +++++++++++++++++++++ test/fixtures/core.scale/tick-backdrop.png | Bin 0 -> 9467 bytes test/specs/scale.radialLinear.tests.js | 2 - types/index.esm.d.ts | 33 +++++---- 9 files changed, 154 insertions(+), 32 deletions(-) create mode 100644 test/fixtures/core.scale/tick-backdrop.js create mode 100644 test/fixtures/core.scale/tick-backdrop.png diff --git a/docs/axes/_common_ticks.md b/docs/axes/_common_ticks.md index 94e22f5a90d..1c17aba395b 100644 --- a/docs/axes/_common_ticks.md +++ b/docs/axes/_common_ticks.md @@ -4,12 +4,15 @@ Namespace: `options.scales[scaleId].ticks` | Name | Type | Scriptable | Default | Description | ---- | ---- | :-------------------------------: | ------- | ----------- +| `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops. +| `backdropPadding` | [`Padding`](../../general/padding.md) | Yes | `2` | Padding of label backdrop. | `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](/axes/labelling.md#creating-custom-tick-formats). | `display` | `boolean` | | `true` | If true, show tick labels. | `color` | [`Color`](/general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks. | `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](/general/fonts.md) | `major` | `object` | | `{}` | [Major ticks configuration](/axes/styling.md#major-tick-configuration). | `padding` | `number` | | `3` | Sets the offset of the tick labels from the axis +| `showLabelBackdrop` | `boolean` | Yes | `true` for radial scale, `false` otherwise | If true, draw a background behind the tick labels. | `textStrokeColor` | [`Color`](/general/colors.md) | Yes | `` | The color of the stroke around the text. | `textStrokeWidth` | `number` | Yes | `0` | Stroke width around the text. | `z` | `number` | | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top. diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index ea6071b5e65..2d1c0e35703 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -28,14 +28,11 @@ Namespace: `options.scales[scaleId].ticks` | Name | Type | Scriptable | Default | Description | ---- | ---- | ------- | ------- | ----------- -| `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops. -| `backdropPadding` | [`Padding`](../../general/padding.md) | Yes | `2` | Padding of label backdrop. | `count` | `number` | Yes | `undefined` | The number of ticks to generate. If specified, this overrides the automatic generation. | `format` | `object` | Yes | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter | `maxTicksLimit` | `number` | Yes | `11` | Maximum number of ticks and gridlines to show. | `precision` | `number` | Yes | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. | `stepSize` | `number` | Yes | | User defined fixed step size for the scale. [more...](#step-size) -| `showLabelBackdrop` | `boolean` | Yes | `true` | If true, draw a background behind the tick labels. !!!include(axes/_common_ticks.md)!!! diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js index 490b09454a2..960d1794962 100644 --- a/src/core/core.scale.defaults.js +++ b/src/core/core.scale.defaults.js @@ -71,6 +71,10 @@ defaults.set('scale', { major: {}, align: 'center', crossAlign: 'near', + + showLabelBackdrop: false, + backdropColor: 'rgba(255, 255, 255, 0.75)', + backdropPadding: 2, } }); diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 2eda295df0a..95ff5f8b84c 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -773,7 +773,7 @@ export default class Scale extends Element { } /** - * @return {{ first: object, last: object, widest: object, highest: object }} + * @return {{ first: object, last: object, widest: object, highest: object, widths: Array, heights: array }} * @private */ _getLabelSizes() { @@ -796,7 +796,7 @@ export default class Scale extends Element { /** * Returns {width, height, offset} objects for the first, last, widest, highest tick * labels where offset indicates the anchor point offset from the top in pixels. - * @return {{ first: object, last: object, widest: object, highest: object }} + * @return {{ first: object, last: object, widest: object, highest: object, widths: Array, heights: array }} * @private */ _computeLabelSizes(ticks, length) { @@ -845,7 +845,9 @@ export default class Scale extends Element { first: valueAt(0), last: valueAt(length - 1), widest: valueAt(widest), - highest: valueAt(highest) + highest: valueAt(highest), + widths, + heights, }; } @@ -1226,6 +1228,48 @@ export default class Scale extends Element { textOffset = (1 - lineCount) * lineHeight / 2; } + let backdrop; + + if (optsAtIndex.showLabelBackdrop) { + const labelPadding = toPadding(optsAtIndex.backdropPadding); + const height = labelSizes.heights[i]; + const width = labelSizes.widths[i]; + + let top = y + textOffset - labelPadding.top; + let left = x - labelPadding.left; + + switch (textBaseline) { + case 'middle': + top -= height / 2; + break; + case 'bottom': + top -= height; + break; + default: + break; + } + + switch (textAlign) { + case 'center': + left -= width / 2; + break; + case 'right': + left -= width; + break; + default: + break; + } + + backdrop = { + left, + top, + width: width + labelPadding.width, + height: height + labelPadding.height, + + color: optsAtIndex.backdropColor, + }; + } + items.push({ rotation, label, @@ -1236,7 +1280,8 @@ export default class Scale extends Element { textOffset, textAlign, textBaseline, - translation: [x, y] + translation: [x, y], + backdrop, }); } @@ -1466,6 +1511,12 @@ export default class Scale extends Element { const item = items[i]; const tickFont = item.font; const label = item.label; + + if (item.backdrop) { + ctx.fillStyle = item.backdrop.color; + ctx.fillRect(item.backdrop.left, item.backdrop.top, item.backdrop.width, item.backdrop.height); + } + let y = item.textOffset; renderText(ctx, label, 0, y, tickFont, item); } diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 52777619a09..a12acb2b105 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -594,12 +594,6 @@ RadialLinearScale.defaults = { // Boolean - Show a backdrop to the scale label showLabelBackdrop: true, - // String - The colour of the label backdrop - backdropColor: 'rgba(255,255,255,0.75)', - - // Number/Object - The backdrop padding of the label in pixels - backdropPadding: 2, - callback: Ticks.formatters.numeric }, diff --git a/test/fixtures/core.scale/tick-backdrop.js b/test/fixtures/core.scale/tick-backdrop.js new file mode 100644 index 00000000000..feeee9a4718 --- /dev/null +++ b/test/fixtures/core.scale/tick-backdrop.js @@ -0,0 +1,76 @@ +const grid = { + display: false +}; +const title = { + display: false, +}; +module.exports = { + config: { + type: 'line', + options: { + events: [], + scales: { + top: { + type: 'linear', + position: 'top', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'red', + backdropPadding: 5, + align: 'start', + crossAlign: 'near', + }, + grid, + title + }, + left: { + type: 'linear', + position: 'left', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'green', + backdropPadding: 5, + crossAlign: 'center', + }, + grid, + title + }, + bottom: { + type: 'linear', + position: 'bottom', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'blue', + backdropPadding: 5, + align: 'end', + crossAlign: 'far', + }, + grid, + title + }, + right: { + type: 'linear', + position: 'right', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'gray', + backdropPadding: 5, + }, + grid, + title + }, + } + } + }, + options: { + canvas: { + height: 256, + width: 256 + }, + spriteText: true, + } +}; diff --git a/test/fixtures/core.scale/tick-backdrop.png b/test/fixtures/core.scale/tick-backdrop.png new file mode 100644 index 0000000000000000000000000000000000000000..d6c79096e2b990a75ba18825ad3999f1a8766b44 GIT binary patch literal 9467 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 Nn7*0b6CKB>{{_jHvrhm3 literal 0 HcmV?d00001 diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js index 75cbfd5e795..b2e545b58ae 100644 --- a/test/specs/scale.radialLinear.tests.js +++ b/test/specs/scale.radialLinear.tests.js @@ -36,8 +36,6 @@ describe('Test the radial linear scale', function() { ticks: { color: Chart.defaults.color, showLabelBackdrop: true, - backdropColor: 'rgba(255,255,255,0.75)', - backdropPadding: 2, callback: defaultConfig.ticks.callback }, diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index f700c0738a3..1b9c405378e 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2693,6 +2693,17 @@ export interface GridLineOptions { } export interface TickOptions { + /** + * Color of label backdrops. + * @default 'rgba(255, 255, 255, 0.75)' + */ + backdropColor: Scriptable; + /** + * Padding of tick backdrop. + * @default 2 + */ + backdropPadding: number | ChartArea; + /** * Returns the string representation of the tick value as it should be displayed on the chart. See callback. */ @@ -2715,6 +2726,11 @@ export interface TickOptions { * Sets the offset of the tick labels from the axis */ padding: number; + /** + * If true, draw a background behind the tick labels. + * @default false + */ + showLabelBackdrop: Scriptable; /** * The color of the stroke around the text. * @default undefined @@ -3116,17 +3132,6 @@ export type RadialLinearScaleOptions = CoreScaleOptions & { suggestedMin: number; ticks: TickOptions & { - /** - * Color of label backdrops. - * @default 'rgba(255, 255, 255, 0.75)' - */ - backdropColor: Scriptable; - /** - * Padding of label backdrop. - * @default 2 - */ - backdropPadding: number | ChartArea; - /** * The Intl.NumberFormat options used by the default label formatter */ @@ -3152,12 +3157,6 @@ export type RadialLinearScaleOptions = CoreScaleOptions & { * User defined number of ticks */ count: number; - - /** - * If true, draw a background behind the tick labels. - * @default true - */ - showLabelBackdrop: Scriptable; }; };