feat(goal): add valueFormatter for tooltip #1529
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rshen91
added
:goal/gauge (old)
markov00
reviewed
Dec 27, 2021
| @@ -47,7 +47,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( | |||
| key: spec.id, | |||
| }, | |||
| value, | |||
| formattedValue: `${value}`, | |||
| formattedValue: valueFormatter ? valueFormatter(value) : `${value}`, | |||
There was a problem hiding this comment.
From your typings valueFormatter is always available, no need to check for its existence.
Suggested change
| formattedValue: valueFormatter ? valueFormatter(value) : `${value}`, | |
| formattedValue: spec.valueFormatter(value), |
There was a problem hiding this comment.
ok that makes sense - d41cb16 for changes thanks
| @@ -80,6 +82,7 @@ export const defaultGoalSpec = { | |||
| bandLabels: [], | |||
| angleStart: Math.PI + Math.PI / 4, | |||
| angleEnd: -Math.PI / 4, | |||
| valueFormatter: (value: any) => value, | |||
There was a problem hiding this comment.
please avoid the usage of any. ValueFormatter actually is a function with well known type as argument
There was a problem hiding this comment.
Smart - d41cb16 for changes
| @@ -74,6 +76,7 @@ export const Example = () => { | |||
| centralMinor="" | |||
| angleStart={angleStart} | |||
| angleEnd={angleEnd} | |||
| valueFormatter={useValueFormatter ? (d: any) => `Testing ${d}` : undefined} | |||
There was a problem hiding this comment.
You can probably just issue a nice valueFormatter that reflects the chart context like
valueFormatter={(d) => `${d}k USD`}
and avoid the knob
There was a problem hiding this comment.
Thank you d41cb16 for changes
nickofthyme
requested changes
Jan 4, 2022
packages/charts/src/components/__snapshots__/chart.test.tsx.snap
Outdated
Show resolved
Hide resolved
nickofthyme
reviewed
Jan 5, 2022
nickofthyme
approved these changes
Jan 5, 2022
nickofthyme
pushed a commit
that referenced
this pull request
Jan 5, 2022
# [42.0.0](v41.0.1...v42.0.0) (2022-01-05) ### Bug Fixes * **flamegraph:** solve animation regression occurring with 6db2677 ([#1541](#1541)) ([5ec6037](5ec6037)), closes [#1540](#1540) * **heatmap:** render empty state ([#1532](#1532)) ([59002df](59002df)) * **waffle:** fix strange 0 text in legend item extra when label is 0 ([#1538](#1538)) ([72224b9](72224b9)) ### Features * **goal:** add valueFormatter for tooltip ([#1529](#1529)) ([8139973](8139973)) * **heatmap:** add axis titles ([#1503](#1503)) ([a87325d](a87325d)) * **types:** improve generic types in specs, and spec prop types ([#1421](#1421)) ([562929e](562929e)) ### BREAKING CHANGES * **types:** The `xAccessor` and `yAccessor` are now required on all xy chart specs. Stronger typing on `data` prop that may cause type errors when using untyped array (i.e. `const arr: never[] = []`). Other minor type changes related to spec types. * **heatmap:** The heatmap yAxisLabel.padding style type is changed from Pixel | Partial<Padding> to Pixels | Padding. The heatmap axis labels are now correctly subjected to padding calculations and it will result in a slightly different position of labels. Co-authored-by: Marco Vettorello <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
The tooltip for the goal charts will now accept a
valueFormatterprop for the tooltip.Details
Issues
Closes #1521
Checklist
:xy,:partition):interactions,:axis)closes #123,fixes #123)packages/charts/src/index.ts