Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[charts] Add dataIndex to series valueFormatter#12745

Merged
JCQuintas merged 10 commits into
mui:masterfrom
JCQuintas:11321-charts-adding-index-in-return-for-valueformatter-in-charts-for-tooltips-and-more
Apr 15, 2024
Merged

[charts] Add dataIndex to series valueFormatter#12745
JCQuintas merged 10 commits into
mui:masterfrom
JCQuintas:11321-charts-adding-index-in-return-for-valueformatter-in-charts-for-tooltips-and-more

Conversation

@JCQuintas
Copy link
Copy Markdown
Member

@JCQuintas JCQuintas commented Apr 11, 2024

  • Add a context object SeriesValueFormatterContext to all series value formatters (Line/Bar charts, Pie charts and Scatter charts)
  • Add dataIndex to SeriesValueFormatterContext to allow users to access their own data add extra information to tooltips

resolves #11321

@JCQuintas JCQuintas added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Apr 11, 2024
@JCQuintas JCQuintas requested a review from alexfauquette April 11, 2024 12:06
@JCQuintas JCQuintas marked this pull request as ready for review April 11, 2024 12:06
@mui-bot
Copy link
Copy Markdown

mui-bot commented Apr 11, 2024 •
edited
Loading

Deploy preview: https://deploy-preview-12745--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 61a65b6

alexfauquette
alexfauquette reviewed Apr 11, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, I left a few feedback

Comment thread docs/data/charts/tooltip/tooltip.md Outdated
Comment thread docs/data/charts/tooltip/tooltip.md Outdated
Comment thread packages/x-charts/src/BarChart/formatter.ts Outdated
Comment on lines +90 to +93
// eslint-disable-next-line @typescript-eslint/no-unused-vars
series: defaultizeValueFormatter(completedSeries, (v, _) =>
v == null ? '' : v.toLocaleString(),
),
Copy link
Copy Markdown
Member

@alexfauquette alexfauquette Apr 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like an experiment that has not been reversed 😉

Or there is a reason to add _ and not use it?

Copy link
Copy Markdown
Member Author

@JCQuintas JCQuintas Apr 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I leave it out, typescript complains that the function signature is wrong. If I put it in but doesn't use it, eslint complains that it wasn't used. I left it cause I prefer having a unused error than a type error.

Copy link
Copy Markdown
Member

@alexfauquette alexfauquette Apr 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about doing

- IFormatter extends (v: any, context: any) => string,
+ IFormatter extends (v?: any, context?: any) => string,

defaultizeValueFormatter take as a second argument the default value formatter. But this function is not forced to use the two arguments

Copy link
Copy Markdown
Member Author

@JCQuintas JCQuintas Apr 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It still produces a type error

Copy link
Copy Markdown
Member Author

@JCQuintas JCQuintas Apr 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep in mind the type error is in the completedSeries check the last commit, I made the function types more permissive. 11bf5a0

Copy link
Copy Markdown
Member

@alexfauquette alexfauquette Apr 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another solution could be to define the type of the value formatter

--- a/packages/x-charts/src/models/seriesType/common.ts
+++ b/packages/x-charts/src/models/seriesType/common.ts
@@ -10,6 +10,11 @@ export type SeriesValueFormatterContext = {
   dataIndex: number;
 };
 
+export type SeriesValueFormatter<TValue> = (
+  value: TValue,
+  context: SeriesValueFormatterContext,
+) => string;
+
 export type CommonSeriesType<TValue> = {
   id?: SeriesId;
   color?: string;
@@ -19,7 +24,7 @@ export type CommonSeriesType<TValue> = {
    * @param {SeriesValueFormatterContext} context The rendering context of the value.
    * @returns {string} The string to display.
    */
-  valueFormatter?: <V extends TValue>(value: V, context: SeriesValueFormatterContext) => string;
+  valueFormatter?: SeriesValueFormatter<TValue>;
   highlightScope?: Partial<HighlightScope>;
 };

Then use it in the function

--- a/packages/x-charts/src/internals/defaultizeValueFormatter.ts
+++ b/packages/x-charts/src/internals/defaultizeValueFormatter.ts
@@ -1,17 +1,20 @@
-import { SeriesId } from '../models/seriesType/common';
+import { SeriesId, SeriesValueFormatter } from '../models/seriesType/common';
 
 function defaultizeValueFormatter<
-  IFormatter extends (v: any, context?: unknown) => string,
-  ISeries extends { valueFormatter?: Function },
+  TValue,
+  ISeries extends { valueFormatter?: SeriesValueFormatter<TValue> },
 >(
   series: Record<SeriesId, ISeries>,
-  defaultValueFormatter: IFormatter,
-): Record<SeriesId, ISeries & { valueFormatter: IFormatter }> {
-  const defaultizedSeries: Record<SeriesId, ISeries & { valueFormatter: IFormatter }> = {};
+  defaultValueFormatter: SeriesValueFormatter<TValue>,
+): Record<SeriesId, ISeries & { valueFormatter: SeriesValueFormatter<TValue> }> {
+  const defaultizedSeries: Record<
+    SeriesId,
+    ISeries & { valueFormatter: SeriesValueFormatter<TValue> }
+  > = {};
   Object.keys(series).forEach((seriesId) => {
     defaultizedSeries[seriesId] = {
       ...series[seriesId],
-      valueFormatter: (series[seriesId].valueFormatter as IFormatter) ?? defaultValueFormatter,
+      valueFormatter: series[seriesId].valueFormatter ?? defaultValueFormatter,
     };
   });

And we are getting a better TS because it fails the Formatting demo, noticing that we do not support the case where value is null

--- a/docs/data/charts/tooltip/Formatting.tsx
+++ b/docs/data/charts/tooltip/Formatting.tsx
@@ -89,7 +89,7 @@ export default function Formatting() {
       xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
       series={lineChartsParams.series.map((serie) => ({
         ...serie,
-        valueFormatter: currencyFormatter,
+        valueFormatter: (v) => (v === null ? '' : currencyFormatter(v)),
       }))}
     />
   );

Copy link
Copy Markdown
Member Author

@JCQuintas JCQuintas Apr 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

much better 😄

Comment thread packages/x-charts/src/LineChart/formatter.ts Outdated
seriesOrder,
stackingGroups,
series: defaultizeValueFormatter(completedSeries, (v) => (v == null ? '' : v.toLocaleString())),
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Copy link
Copy Markdown
Member

@alexfauquette alexfauquette Apr 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

Comment thread packages/x-charts/src/internals/defaultizeValueFormatter.ts Outdated
Comment thread packages/x-charts/src/models/axis.ts
@JCQuintas JCQuintas requested a review from alexfauquette April 12, 2024 14:29
@alexfauquette
Copy link
Copy Markdown
Member

alexfauquette commented Apr 15, 2024

This PR has been impacted by the merge of colorMap PR

- ownerState={{ color }}
+ ownerState={{ color: getColor(dataIndex) ?? color }}

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 15, 2024
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 15, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

JCQuintas and others added 10 commits April 15, 2024 10:54
@JCQuintas JCQuintas force-pushed the 11321-charts-adding-index-in-return-for-valueformatter-in-charts-for-tooltips-and-more branch from efc3523 to 61a65b6 Compare April 15, 2024 08:56
@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 15, 2024
@JCQuintas JCQuintas enabled auto-merge (squash) April 15, 2024 09:16
@JCQuintas JCQuintas merged commit 5c54c78 into mui:master Apr 15, 2024
@JCQuintas JCQuintas deleted the 11321-charts-adding-index-in-return-for-valueformatter-in-charts-for-tooltips-and-more branch May 6, 2024 12:54
DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024
@JCQuintas @alexfauquette @DungTiger
[charts] Add dataIndex to series valueFormatter (mui#12745)
4fc13c8 
Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Alexandre Fauquette <[email protected]>
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
@JCQuintas @alexfauquette @thomasmoon
[charts] Add dataIndex to series valueFormatter (mui#12745)
fd421c7 
Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Alexandre Fauquette <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexfauquette alexfauquette alexfauquette approved these changes

Assignees

No one assigned

Labels

scope: charts Changes related to the charts. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[charts] Adding index in return for valueFormatter in Charts for tooltips and more

3 participants

@JCQuintas @mui-bot @alexfauquette