#10836 add getLabelItems public method #10837

cmcnulty · 2022-10-27T16:26:06Z

Proposed solution to #10836. This makes the dimensions of the axis labels public by way of a scale method: getLabelItems() - It solves the problem of customizing labels or creating interactions from them - For a use-case see the following demo, which is based off of this PR branch:

https://codepen.io/cmcnulty/pen/JjZPxmJ

Additionally, there have been several discussions here (and also some in stackoverflow) that attempt to use the private _labelItems in order to solve related problems:

https://github.com/chartjs/Chart.js/discussions?discussions_q=_labelItems

src/core/core.scale.js

types/helpers/helpers.canvas.d.ts

src/core/core.scale.js

cmcnulty · 2022-11-11T21:17:00Z

@etimberg can you take a look at this? It evolved out of #10759 - now that that bug is fixed, there's a lot more that we could do with the axis labels if we had API access to the label dimensions.

etimberg · 2022-11-11T21:36:56Z

@kurkle @LeeLenaleee @dangreen any opinions on what we do with this? I think I'd want to put it in 4.1.0 at a minimum since 4.0.0 is so close

kurkle

No big objections from me.

kurkle · 2022-11-12T19:35:21Z

src/core/core.scale.js

-        textBaseline,
-        translation: [x, y],
-        backdrop,
+        renderTextOptions: {


The seems badly named as its referring to some method used to render the text and thus exposes (and freezes) internal logic.
I think plain options would work. Also the textOffset should go in there too.

IMO we should make the ticks and labels to be (animated) elements in future releases, that is why I suggest plain options. We could just return the elements as labelItems then.

I don't disagree - obviously the renderTextOptions name came about because it stores a RenderTextOpts typed object. Why textOffset and, for that matter, font are passed separately into renderText() rather than in the options collection is also a mystery that I didn't dive into. I certainly agree that it seems to make sense to fold font and textOffset into the RenderTextOpts object, which simplifies the renderText signature.

@kurkle, renamed to just options, didn't make any changes to textOffset because I didn't want this change to break any implementations that relied on renderText(). However, now lint tests are failing (passing locally) - seems like perhaps an intermittent issue? Can checks be retriggered?

kurkle · 2022-11-16T19:39:43Z

I think it needs something like import { CanvasFontSpec } from '../src/helpers/helpers.options';

cmcnulty · 2022-11-16T20:19:54Z

I think it needs something like import { CanvasFontSpec } from '../src/helpers/helpers.options';

I'll try it - weird that this passed a week or so ago without a problem:

import { RenderTextOpts } from './helpers/helpers.canvas';
import { CanvasFontSpec } from './helpers';

cmcnulty · 2022-11-16T20:29:09Z

I think it needs something like import { CanvasFontSpec } from '../src/helpers/helpers.options';

local linter didn't like that - I've reverted to the known lint-passing from this run:
https://github.com/chartjs/Chart.js/pull/10837/checks?check_run_id=9254407423
using this code:
8499920

cmcnulty · 2022-11-16T20:42:31Z

I don't know - I'm going around in circles. There's no reason commit 58cb9e6 should have broken the types imports. There seems to just be something finicky going on with the linter and I can't reproduce it locally.

… public-get-labels

dangreen · 2022-12-09T11:31:51Z

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 {import('../types').LabelItem[]}


Suggested change

* @return {import('../types').LabelItem[]}

* @return {import('../types.js').LabelItem[]}

#10879

dangreen · 2022-12-09T11:32:14Z

types/helpers/helpers.canvas.d.ts

+import { Color } from '../color';
+import { ChartArea, RoundedRect } from '../geometric';
+import { CanvasFontSpec } from '../../src/helpers/helpers.options';


please add js extension

dangreen · 2022-12-09T11:32:29Z

types/index.d.ts

+import { DeepPartial, DistributiveArray, UnionToIntersection } from './utils';
+
+import { TimeUnit } from '../src/core/core.adapters';
+import PointElement from '../src/elements/element.point';
+import { EasingFunction } from '../src/helpers/helpers.easing';
+import { AnimationEvent } from './animation';
+import { AnyObject, EmptyObject } from './basic';
+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 '../src/helpers/helpers.options';
+
+export { EasingFunction } from '../src/helpers/helpers.easing';
+export { default as ArcElement, ArcProps } from '../src/elements/element.arc';
+export { default as PointElement, PointProps } from '../src/elements/element.point';
+export { Animation, Animations, Animator, AnimationEvent } from './animation';
+export { Color } from './color';
+export { ChartArea, Point } from './geometric';
+export { LayoutItem, LayoutPosition } from './layout';


LeeLenaleee reviewed Oct 27, 2022

View reviewed changes

src/core/core.scale.js Outdated Show resolved Hide resolved

LeeLenaleee reviewed Oct 27, 2022

View reviewed changes

types/helpers/helpers.canvas.d.ts Outdated Show resolved Hide resolved

cmcnulty force-pushed the feature-10836-expose-label-items branch from 9b618fb to c1b50a2 Compare October 28, 2022 16:36

cmcnulty changed the title ~~init checkin, work remains on radialLinear~~ #10836 add getLabelItems public method Oct 28, 2022

LeeLenaleee reviewed Oct 28, 2022

View reviewed changes

src/core/core.scale.js Outdated Show resolved Hide resolved

LeeLenaleee added the type: enhancement label Oct 28, 2022

LeeLenaleee reviewed Oct 28, 2022

View reviewed changes

src/core/core.scale.js Outdated Show resolved Hide resolved

dangreen suggested changes Oct 31, 2022

View reviewed changes

src/core/core.scale.js Outdated Show resolved Hide resolved

cmcnulty force-pushed the feature-10836-expose-label-items branch 2 times, most recently from 43c1160 to eaa0f75 Compare November 2, 2022 16:08

fix chartjs#10836 - add publc getLabelItems()

8499920

cmcnulty force-pushed the feature-10836-expose-label-items branch from 38c329a to 8499920 Compare November 2, 2022 16:34

cmcnulty requested review from LeeLenaleee and dangreen and removed request for LeeLenaleee and dangreen November 2, 2022 18:16

textOffset not a render option

421ff52

cmcnulty requested review from dangreen and removed request for LeeLenaleee November 3, 2022 21:45

etimberg requested a review from kurkle November 11, 2022 21:36

kurkle added this to the Version 4.1 milestone Nov 12, 2022

kurkle reviewed Nov 12, 2022

View reviewed changes

LeeLenaleee modified the milestones: Version 4.1, Version 4.2 Nov 14, 2022

cmcnulty added 3 commits November 16, 2022 10:17

rename renderTextOptions to options

58cb9e6

fix import

67d9a93

condense imports

3dd774a

revert to known-passing imports

71be6c3

try again - passing locally

b2e06de

LeeLenaleee added 3 commits November 23, 2022 00:48

Merge branch 'master' of https://github.com/LeeLenaleee/Chart.js into…

87c99f2

… public-get-labels

merge conflict, update path to canvas font spec

159435c

Merge branch 'master' into feature-10836-expose-label-items

7f16c70

dangreen suggested changes Dec 9, 2022

View reviewed changes

dangreen mentioned this pull request Dec 13, 2022

add getLabelItems public method #10966

Merged

LeeLenaleee closed this in #10966 Dec 16, 2022

cmcnulty deleted the feature-10836-expose-label-items branch November 3, 2023 20:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#10836 add getLabelItems public method #10837

#10836 add getLabelItems public method #10837

cmcnulty commented Oct 27, 2022 •

edited

cmcnulty commented Nov 11, 2022

etimberg commented Nov 11, 2022

kurkle left a comment

kurkle Nov 12, 2022

cmcnulty Nov 13, 2022

cmcnulty Nov 16, 2022

kurkle commented Nov 16, 2022

cmcnulty commented Nov 16, 2022 •

edited

cmcnulty commented Nov 16, 2022

cmcnulty commented Nov 16, 2022

dangreen Dec 9, 2022

dangreen Dec 9, 2022

dangreen Dec 9, 2022

	* @return {import('../types').LabelItem[]}
	* @return {import('../types.js').LabelItem[]}

#10836 add getLabelItems public method #10837

#10836 add getLabelItems public method #10837

Conversation

cmcnulty commented Oct 27, 2022 • edited

cmcnulty commented Nov 11, 2022

etimberg commented Nov 11, 2022

kurkle left a comment

Choose a reason for hiding this comment

kurkle Nov 12, 2022

Choose a reason for hiding this comment

cmcnulty Nov 13, 2022

Choose a reason for hiding this comment

cmcnulty Nov 16, 2022

Choose a reason for hiding this comment

kurkle commented Nov 16, 2022

cmcnulty commented Nov 16, 2022 • edited

cmcnulty commented Nov 16, 2022

cmcnulty commented Nov 16, 2022

dangreen Dec 9, 2022

Choose a reason for hiding this comment

dangreen Dec 9, 2022

Choose a reason for hiding this comment

dangreen Dec 9, 2022

Choose a reason for hiding this comment

cmcnulty commented Oct 27, 2022 •

edited

cmcnulty commented Nov 16, 2022 •

edited