From c084a21f305b23572a82f4338da35ef146c46fe0 Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Fri, 28 Oct 2022 11:35:57 -0500 Subject: [PATCH] fix #10836 - add publc getLabelItems() --- src/core/core.scale.js | 40 +++++++++++++--------- test/specs/core.datasetController.tests.js | 9 +++++ types/helpers/helpers.canvas.d.ts | 34 +++++++++++++++++- types/index.d.ts | 9 +++++ 4 files changed, 75 insertions(+), 17 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index cae728b4a6f..77e7badd174 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -359,6 +359,14 @@ export default class Scale extends Element { return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels || []; } + /** + * @return LabelItem[] + */ + getLabelItems(chartArea = this.chart.chartArea) { + const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea)); + return items; + } + // When a new layout is created, reset the data limits cache beforeLayout() { this._cache = {}; @@ -1292,17 +1300,20 @@ export default class Scale extends Element { } items.push({ - rotation, label, font, - color, - strokeColor, - strokeWidth, textOffset, - textAlign: tickTextAlign, - textBaseline, - translation: [x, y], - backdrop, + renderTextOptions: { + rotation, + color, + strokeColor, + strokeWidth, + textOffset, + textAlign: tickTextAlign, + textBaseline, + translation: [x, y], + backdrop, + } }); } @@ -1549,16 +1560,13 @@ export default class Scale extends Element { clipArea(ctx, area); } - const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea)); - let i, ilen; - - for (i = 0, ilen = items.length; i < ilen; ++i) { - const item = items[i]; + const items = this.getLabelItems(chartArea); + for (const item of items) { + const renderTextOptions = item.renderTextOptions; const tickFont = item.font; const label = item.label; - - let y = item.textOffset; - renderText(ctx, label, 0, y, tickFont, item); + const y = item.textOffset; + renderText(ctx, label, 0, y, tickFont, renderTextOptions); } if (area) { diff --git a/test/specs/core.datasetController.tests.js b/test/specs/core.datasetController.tests.js index c3835bcafe0..013390cb8b2 100644 --- a/test/specs/core.datasetController.tests.js +++ b/test/specs/core.datasetController.tests.js @@ -333,6 +333,7 @@ describe('Chart.DatasetController', function() { chart.update(); expect(meta.iScale.getLabels()).toEqual(['user1', 'user2'].concat(data2.map(n => n.x))); + }); it('should keep up with multiple datasets', function() { @@ -355,11 +356,19 @@ describe('Chart.DatasetController', function() { expect(scale.getLabels()).toEqual(['One', 'Three', 'Two', 'Four', 'Five']); + let labelItems = scale.getLabelItems(chart.chartArea); + expect(labelItems.map(lab => lab.label)).toEqual(['One', 'Three', 'Two', 'Four', 'Five']); + + chart.data.datasets[0].data = data2; chart.data.datasets[1].data = data1; chart.update(); expect(scale.getLabels()).toEqual(['One', 'Three', 'Four', 'Five', 'Two']); + + labelItems = scale.getLabelItems(chart.chartArea); + expect(labelItems.map(lab => lab.label)).toEqual(['One', 'Three', 'Four', 'Five', 'Two']); + }); }); diff --git a/types/helpers/helpers.canvas.d.ts b/types/helpers/helpers.canvas.d.ts index 4adb7ee63f2..c1747dbd1b1 100644 --- a/types/helpers/helpers.canvas.d.ts +++ b/types/helpers/helpers.canvas.d.ts @@ -1,4 +1,4 @@ -import { PointStyle } from '..'; +import { PointStyle, Scriptable, ScriptableScaleContext } from '..'; import { Color } from '../color'; import { ChartArea, RoundedRect } from '../geometric'; import { CanvasFontSpec } from './helpers.options'; @@ -89,6 +89,38 @@ export interface RenderTextOpts { * Underline the text */ underline?: boolean; + + /** + * Dimensions for drawing the label backdrop + */ + backdrop?: BackdropOptions; +} + +export interface BackdropOptions { + /** + * Left position of backdrop as pixel + */ + left: number; + + /** + * Top position of backdrop as pixel + */ + top: number; + + /** + * Width of backdrop in pixels + */ + width: number; + + /** + * Height of backdrop in pixels + */ + height: number; + + /** + * Color of label backdrops. + */ + color: Scriptable; } export function renderText( diff --git a/types/index.d.ts b/types/index.d.ts index 3c55cf0104d..624769a31c9 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -10,6 +10,8 @@ import { Color } from './color'; import Element from '../src/core/core.element'; import { ChartArea, Padding, Point } from './geometric'; import { LayoutItem, LayoutPosition } from './layout'; +import { RenderTextOpts } from './helpers/helpers.canvas'; +import { CanvasFontSpec } from './helpers'; export { EasingFunction } from '../src/helpers/helpers.easing'; export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; @@ -1312,6 +1314,7 @@ export interface Scale extends El getMinMax(canStack: boolean): { min: number; max: number }; getTicks(): Tick[]; getLabels(): string[]; + getLabelItems(chartArea?: ChartArea): LabelItem[]; beforeUpdate(): void; configure(): void; afterUpdate(): void; @@ -1355,6 +1358,12 @@ export interface ScriptableScalePointLabelContext { type: string; } +export interface LabelItem { + label: string | string[]; + font: CanvasFontSpec; + textOffset: number; + renderTextOptions: RenderTextOpts; +} export declare const Ticks: { formatters: {