chartjs#10836 - add public generateTickLabels()

cmcnulty · Oct 28, 2022 · c1b50a2 · c1b50a2
1 parent 0b54338
commit c1b50a2
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 17 deletions.
diff --git 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) {
+    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 = {};
@@ -1289,17 +1297,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,
+        }
       });
     }
 
@@ -1546,16 +1557,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
@@ -329,10 +329,17 @@ describe('Chart.DatasetController', function() {
 
           expect(meta.iScale.getLabels()).toEqual(['user1', 'user2'].concat(data1.map(n => n.x)));
 
+          let labelItems = meta.iScale.getLabelItems(chart.chartArea);
+          expect(labelItems.map(lab => lab.label)).toEqual(['user1', 'user2'].concat(data1.map(n => n.x)));
+
           chart.data.datasets[0].data = data2;
           chart.update();
 
           expect(meta.iScale.getLabels()).toEqual(['user1', 'user2'].concat(data2.map(n => n.x)));
+
+          labelItems = meta.iScale.getLabelItems(chart.chartArea);
+          expect(labelItems.map(lab => lab.label)).toEqual(['user1', 'user2'].concat(data1.map(n => n.x)));
+
         });
 
         it('should keep up with multiple datasets', function() {
@@ -355,11 +362,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
@@ -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<Color, ScriptableScaleContext>;
 }
 
 export function renderText(

diff --git 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<O extends CoreScaleOptions = CoreScaleOptions> 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: {