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 94e22f5a9..1c17aba39 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 ea6071b5e..2d1c0e357 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 490b09454..960d17949 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 2eda295df..95ff5f8b8 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 52777619a..a12acb2b1 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 000000000..feeee9a47 --- /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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 literal 0 Hc-jL100001 diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js index 75cbfd5e7..b2e545b58 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 f700c0738..1b9c40537 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; }; }; -- 2.47.2