From: Evert Timberg Date: Sat, 13 Mar 2021 22:37:43 +0000 (-0500) Subject: Radial scale point label backdrop color (#8633) X-Git-Tag: v3.0.0-beta.14~15 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=d84db2cefc6ee028779bab5d62982151060de416;p=thirdparty%2FChart.js.git Radial scale point label backdrop color (#8633) * Radial scale point label backdrop color * Update default tests * backdropPadding is a single setting * Up the tolerance a bit * Update tick backdrop padding options --- diff --git a/docs/docs/axes/radial/linear.mdx b/docs/docs/axes/radial/linear.mdx index 7925af007..caf88a5d8 100644 --- a/docs/docs/axes/radial/linear.mdx +++ b/docs/docs/axes/radial/linear.mdx @@ -34,8 +34,7 @@ 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. -| `backdropPaddingX` | `number` | | `2` | Horizontal padding of label backdrop. -| `backdropPaddingY` | `number` | | `2` | Vertical padding of label backdrop. +| `backdropPadding` | `number`\|`{top: number, bottom: number}` | | `2` | Padding of label backdrop. | `format` | `object` | | | 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` | | `11` | Maximum number of ticks and gridlines to show. | `precision` | `number` | | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. @@ -126,6 +125,8 @@ Namespace: `options.scales[scaleId].pointLabels` | Name | Type | Scriptable | Default | Description | ---- | ---- | ------- | ------- | ----------- +| `backdropColor` | [`Color`](../../general/colors.md) | `true` | `undefined` | Background color of the point label. +| `backdropPadding` | `number`\|`{top: number, bottom: number}` | | `2` | Padding of label backdrop. | `display` | `boolean` | | `true` | if true, point labels are shown. | `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string. | `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.color` | Color of label. diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index 1a21a275b..1504aa1d1 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -235,6 +235,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now * `options.ticks.fixedStepSize` is no longer used. Use `options.ticks.stepSize`. * `options.ticks.major` and `options.ticks.minor` were replaced with scriptable options for tick fonts. * `Chart.Ticks.formatters.linear` was renamed to `Chart.Ticks.formatters.numeric`. +* `options.ticks.backdropPaddingX` and `options.ticks.backdropPaddingY` were replaced with `options.ticks.backdropPadding` in the radial linear scale. #### Tooltip diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 298717aaf..52777619a 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -4,13 +4,14 @@ import {HALF_PI, isNumber, TAU, toDegrees, toRadians, _normalizeAngle} from '../ import LinearScaleBase from './scale.linearbase'; import Ticks from '../core/core.ticks'; import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core'; -import {toFont} from '../helpers/helpers.options'; +import {toFont, toPadding} from '../helpers/helpers.options'; function getTickBackdropHeight(opts) { const tickOpts = opts.ticks; if (tickOpts.display && opts.display) { - return valueOrDefault(tickOpts.font && tickOpts.font.size, defaults.font.size) + tickOpts.backdropPaddingY * 2; + const padding = toPadding(tickOpts.backdropPadding); + return valueOrDefault(tickOpts.font && tickOpts.font.size, defaults.font.size) + padding.height; } return 0; } @@ -202,7 +203,15 @@ function drawPointLabels(scale, labelCount) { for (let i = labelCount - 1; i >= 0; i--) { const optsAtIndex = pointLabels.setContext(scale.getContext(i)); const plFont = toFont(optsAtIndex.font); - const {x, y, textAlign} = scale._pointLabelItems[i]; + const {x, y, textAlign, left, top, right, bottom} = scale._pointLabelItems[i]; + const {backdropColor} = optsAtIndex; + + if (!isNullOrUndef(backdropColor)) { + const padding = toPadding(optsAtIndex.backdropPadding); + ctx.fillStyle = backdropColor; + ctx.fillRect(left - padding.left, top - padding.top, right - left + padding.width, bottom - top + padding.height); + } + renderText( ctx, scale._pointLabels[i], @@ -532,12 +541,12 @@ export default class RadialLinearScale extends LinearScaleBase { width = ctx.measureText(tick.label).width; ctx.fillStyle = optsAtIndex.backdropColor; - const {backdropPaddingX, backdropPaddingY} = optsAtIndex; + const padding = toPadding(optsAtIndex.backdropPadding); ctx.fillRect( - -width / 2 - backdropPaddingX, - -offset - tickFont.size / 2 - backdropPaddingY, - width + backdropPaddingX * 2, - tickFont.size + backdropPaddingY * 2 + -width / 2 - padding.left, + -offset - tickFont.size / 2 - padding.top, + width + padding.width, + tickFont.size + padding.height ); } @@ -588,16 +597,18 @@ RadialLinearScale.defaults = { // String - The colour of the label backdrop backdropColor: 'rgba(255,255,255,0.75)', - // Number - The backdrop padding above & below the label in pixels - backdropPaddingY: 2, - - // Number - The backdrop padding to the side of the label in pixels - backdropPaddingX: 2, + // Number/Object - The backdrop padding of the label in pixels + backdropPadding: 2, callback: Ticks.formatters.numeric }, pointLabels: { + backdropColor: undefined, + + // Number - The backdrop padding above & below the label in pixels + backdropPadding: 2, + // Boolean - if true, show point labels display: true, diff --git a/test/fixtures/scale.radialLinear/pointLabels/background.js b/test/fixtures/scale.radialLinear/pointLabels/background.js new file mode 100644 index 000000000..62b90a182 --- /dev/null +++ b/test/fixtures/scale.radialLinear/pointLabels/background.js @@ -0,0 +1,50 @@ +module.exports = { + tolerance: 0.01, + config: { + type: 'radar', + data: { + labels: [ + ['VENTE ET', 'COMMERCIALISATION'], + ['GESTION', 'FINANCIÈRE'], + 'NUMÉRIQUE', + ['ADMINISTRATION', 'ET OPÉRATION'], + ['RESSOURCES', 'HUMAINES'], + 'INNOVATION' + ], + datasets: [ + { + backgroundColor: '#E43E51', + label: 'Compétences entrepreunariales', + data: [3, 2, 2, 1, 3, 1] + } + ] + }, + options: { + plugins: { + legend: false, + tooltip: false, + filler: false + }, + scales: { + r: { + min: 0, + max: 3, + pointLabels: { + backdropColor: 'blue', + backdropPadding: {left: 5, right: 5, top: 2, bottom: 2}, + }, + ticks: { + display: false, + stepSize: 1, + maxTicksLimit: 1 + } + } + }, + responsive: true, + maintainAspectRatio: false + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/scale.radialLinear/pointLabels/background.png b/test/fixtures/scale.radialLinear/pointLabels/background.png new file mode 100644 index 000000000..963aef94b Binary files /dev/null and b/test/fixtures/scale.radialLinear/pointLabels/background.png differ diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js index d4ef2a779..75cbfd5e7 100644 --- a/test/specs/scale.radialLinear.tests.js +++ b/test/specs/scale.radialLinear.tests.js @@ -37,12 +37,13 @@ describe('Test the radial linear scale', function() { color: Chart.defaults.color, showLabelBackdrop: true, backdropColor: 'rgba(255,255,255,0.75)', - backdropPaddingY: 2, - backdropPaddingX: 2, + backdropPadding: 2, callback: defaultConfig.ticks.callback }, pointLabels: { + backdropColor: undefined, + backdropPadding: 2, color: Chart.defaults.color, display: true, font: { diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 0f4739da6..d12b52500 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -3005,6 +3005,17 @@ export type RadialLinearScaleOptions = CoreScaleOptions & { max: number; pointLabels: { + /** + * Background color of the point label. + * @default undefined + */ + backdropColor: Scriptable; + /** + * Padding of label backdrop. + * @default 2 + */ + backdropPadding: Scriptable; + /** * if true, point labels are shown. * @default true @@ -3043,15 +3054,10 @@ export type RadialLinearScaleOptions = CoreScaleOptions & { */ backdropColor: Scriptable; /** - * Horizontal padding of label backdrop. - * @default 2 - */ - backdropPaddingX: number; - /** - * Vertical padding of label backdrop. + * Padding of label backdrop. * @default 2 */ - backdropPaddingY: number; + backdropPadding: number | ChartArea; /** * The Intl.NumberFormat options used by the default label formatter