From 9772f09737bf5408d76b67a222d2a583720fcc1f Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Jul 2020 10:45:33 -0500 Subject: [PATCH 1/3] feat(axis): formatting different for label vs tooltip and legend --- ...rmatting-visually-looks-correct-1-snap.png | Bin 0 -> 20079 bytes package.json | 1 + .../renderer/canvas/axes/tick_label.ts | 4 +- src/chart_types/xy_chart/utils/axis_utils.ts | 2 +- src/chart_types/xy_chart/utils/specs.ts | 10 ++- stories/axes/13_label_formatting.tsx | 76 ++++++++++++++++++ stories/axes/axes.stories.tsx | 1 + 7 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png create mode 100644 stories/axes/13_label_formatting.tsx diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..fe5673134bd01f5914234d567ee45cc0b5c1eac2 GIT binary patch literal 20079 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 { + const tickFormatBottom = text('tickFormat bottom', '0.0000'); + const labelFormatBottom = text('labelFormat bottom', '0.0'); + const tickFormatLeft = text('tickFormat left', '$ 0,0[.]00'); + const labelFormatLeft = text('labelFormat left', '$ 0,0'); + const start = KIBANA_METRICS.metrics.kibana_os_load[0].data[0][0]; + const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 20).map((d) => [(d[0] - start) / 30000, d[1]]); + + return ( + + numeral(d).format(tickFormatBottom)} + labelFormat={(d) => numeral(d).format(labelFormatBottom)} + /> + numeral(d).format(tickFormatLeft)} + labelFormat={(d) => numeral(d).format(labelFormatLeft)} + /> + + + + ); +}; + +Example.story = { + parameters: { + options: { selectedPanel: SB_SOURCE_PANEL }, + info: { + text: `You can apply different formatter between tick values in the tooltip and legend by using + different values for \`tickFormat\` and \`labelFormat\`. + +Use a [numeraljs](http://numeraljs.com/) format with the knobs to see the difference`, + }, + }, +}; diff --git a/stories/axes/axes.stories.tsx b/stories/axes/axes.stories.tsx index c5fa0c2eb0..1831805150 100644 --- a/stories/axes/axes.stories.tsx +++ b/stories/axes/axes.stories.tsx @@ -38,3 +38,4 @@ export { Example as customMixed } from './9_custom_mixed_domain'; export { Example as oneDomainBound } from './10_one_domain_bound'; export { Example as fitDomain } from './11_fit_domain_extent'; export { Example as duplicateTicks } from './12_duplicate_ticks'; +export { Example as labelFormatting } from './13_label_formatting'; From b7e0607492a1db1a469f33cdbb91a4aea5116f1e Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Jul 2020 18:09:39 -0500 Subject: [PATCH 2/3] docs: update api with latest changes --- api/charts.api.md | 1 + 1 file changed, 1 insertion(+) diff --git a/api/charts.api.md b/api/charts.api.md index 62af02c8cb..020256230e 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -147,6 +147,7 @@ export interface AxisSpec extends Spec { hide: boolean; id: AxisId; integersOnly?: boolean; + labelFormat?: TickFormatter; position: Position; showDuplicatedTicks?: boolean; showGridLines?: boolean; From a881be974626faf58dd9004a891df2c99482837e Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 14 Jul 2020 09:12:25 -0500 Subject: [PATCH 3/3] docs: remove override tag --- src/chart_types/xy_chart/utils/specs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts index 7db3735edc..02d2e749bf 100644 --- a/src/chart_types/xy_chart/utils/specs.ts +++ b/src/chart_types/xy_chart/utils/specs.ts @@ -609,7 +609,7 @@ export interface AxisSpec extends Spec { /** * A function called to format every single label (excludes tooltip) * - * @overrides tickFormat for axis labels + * overrides tickFormat for axis labels */ labelFormat?: TickFormatter; /** The degrees of rotation of the tick labels */