From 728fa7ae68849badc82e55a5dec2aa2c398f00b4 Mon Sep 17 00:00:00 2001 From: Terrence Keane Date: Mon, 4 Nov 2024 16:18:26 -0500 Subject: [PATCH] LG-4659: Replace axes `unit` prop with `formatter` (#2536) * Replace `unit` with `formatter` * Update README * Changeset * Add formatting to time in storybook * Remove documented support for non-callback formatter types * Update README example --- .changeset/silly-jars-cheat.md | 5 ++++ charts/core/README.md | 22 ++++++++--------- charts/core/src/XAxis/XAxis.tsx | 17 ++++++------- charts/core/src/XAxis/XAxis.types.ts | 9 +++++-- charts/core/src/YAxis/YAxis.tsx | 17 ++++++------- charts/core/src/YAxis/YAxis.types.ts | 12 +++++++-- charts/core/src/core.stories.tsx | 37 +++++++++++++--------------- 7 files changed, 64 insertions(+), 55 deletions(-) create mode 100644 .changeset/silly-jars-cheat.md diff --git a/.changeset/silly-jars-cheat.md b/.changeset/silly-jars-cheat.md new file mode 100644 index 0000000000..2497228a49 --- /dev/null +++ b/.changeset/silly-jars-cheat.md @@ -0,0 +1,5 @@ +--- +'@lg-charts/core': minor +--- + +Replaces `unit` prop of `XAxis` and `YAxis` with `formatter` prop diff --git a/charts/core/README.md b/charts/core/README.md index b518e0d4ec..21cf81e217 100644 --- a/charts/core/README.md +++ b/charts/core/README.md @@ -26,7 +26,7 @@ import { Chart, Line, Grid, XAxis, YAxis } from '@lg-charts/core'; - + `${value}GB`} /> string | | ### `YAxis` @@ -104,8 +104,8 @@ Renders a y-axis. #### Props -| Name | Description | Type | Default | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------- | -| `type` | Type of axis. | 'category' \| 'value' \| 'time' \| 'log' | | -| `label` _(optional)_ | Label name to be rendered on the axis. | string | | -| `unit` _(optional)_ | String that will be appended to the values of the axis. Only applies if `type` of `value`. _Note: this unit will not impact the data. E.g. if data is given in MB and the units are set to "GB", the component won’t convert these values. Conversion of data is up to the consumer._ | string | | +| Name | Description | Type | Default | +| ------------------------ | --------------------------------------------- | ---------------------------------------- | ------- | +| `type` | Type of axis. | 'category' \| 'value' \| 'time' \| 'log' | | +| `label` _(optional)_ | Label name to be rendered on the axis. | string | | +| `formatter` _(optional)_ | Callback function for formatting tick values. | (value: string, index: number) => string | | diff --git a/charts/core/src/XAxis/XAxis.tsx b/charts/core/src/XAxis/XAxis.tsx index 1ff98d044e..8c3f586e20 100644 --- a/charts/core/src/XAxis/XAxis.tsx +++ b/charts/core/src/XAxis/XAxis.tsx @@ -14,13 +14,13 @@ import { import { ChartOptions } from '../Chart/Chart.types'; import { useChartContext } from '../ChartContext'; -import { XAxisProps, XAxisType } from './XAxis.types'; +import { XAxisProps } from './XAxis.types'; const getOptions = ({ theme, type, label, - unit, + formatter, }: XAxisProps & { theme: Theme }): Partial => { const options: Partial = { xAxis: { @@ -42,10 +42,7 @@ const getOptions = ({ color: color[theme].text[Variant.Secondary][InteractionState.Default], align: 'center', margin: spacing[400], - formatter: - unit && type === XAxisType.Value - ? (value: string) => `${value}${unit}` - : undefined, + formatter, }, axisTick: { show: false, @@ -96,16 +93,16 @@ const unsetAxisOptions = { * * */ -export function XAxis({ type, label, unit }: XAxisProps) { +export function XAxis({ type, label, formatter }: XAxisProps) { const { updateChartOptions } = useChartContext(); const { theme } = useDarkMode(); useEffect(() => { - updateChartOptions(getOptions({ type, label, unit, theme })); + updateChartOptions(getOptions({ type, label, formatter, theme })); return () => { /** @@ -115,7 +112,7 @@ export function XAxis({ type, label, unit }: XAxisProps) { xAxis: unsetAxisOptions, }); }; - }, [type, label, unit, theme, updateChartOptions]); + }, [type, label, formatter, theme, updateChartOptions]); return null; } diff --git a/charts/core/src/XAxis/XAxis.types.ts b/charts/core/src/XAxis/XAxis.types.ts index 3bd1efae59..838223ff1a 100644 --- a/charts/core/src/XAxis/XAxis.types.ts +++ b/charts/core/src/XAxis/XAxis.types.ts @@ -18,7 +18,12 @@ export interface XAxisProps { label?: string; /** - * Unit of the axis to be rendered with value. + * + * Formatter of axis label, which supports string template and callback function. + * + * ```ts + * formatter: (value, index) => `${value}GB` + * ``` */ - unit?: string; + formatter?: (value: string, index: number) => string; } diff --git a/charts/core/src/YAxis/YAxis.tsx b/charts/core/src/YAxis/YAxis.tsx index a4e7d629e4..e94334ec89 100644 --- a/charts/core/src/YAxis/YAxis.tsx +++ b/charts/core/src/YAxis/YAxis.tsx @@ -14,13 +14,13 @@ import { import { ChartOptions } from '../Chart/Chart.types'; import { useChartContext } from '../ChartContext'; -import { YAxisProps, YAxisType } from './YAxis.types'; +import { YAxisProps } from './YAxis.types'; const getOptions = ({ theme, type, label, - unit, + formatter, }: YAxisProps & { theme: Theme }): Partial => { const options: Partial = { yAxis: { @@ -42,10 +42,7 @@ const getOptions = ({ color: color[theme].text[Variant.Secondary][InteractionState.Default], align: 'right', margin: spacing[200], - formatter: - unit && type === YAxisType.Value - ? (value: string) => `${value}${unit}` - : undefined, + formatter, }, axisTick: { show: false, @@ -95,16 +92,16 @@ const unsetAxisOptions = { * * */ -export function YAxis({ type, label, unit }: YAxisProps) { +export function YAxis({ type, label, formatter }: YAxisProps) { const { updateChartOptions } = useChartContext(); const { theme } = useDarkMode(); useEffect(() => { - updateChartOptions(getOptions({ type, label, unit, theme })); + updateChartOptions(getOptions({ type, label, formatter, theme })); return () => { /** @@ -114,7 +111,7 @@ export function YAxis({ type, label, unit }: YAxisProps) { yAxis: unsetAxisOptions, }); }; - }, [type, label, unit, theme, updateChartOptions]); + }, [type, label, formatter, theme, updateChartOptions]); return null; } diff --git a/charts/core/src/YAxis/YAxis.types.ts b/charts/core/src/YAxis/YAxis.types.ts index f69ce02e2d..fe2a844ed1 100644 --- a/charts/core/src/YAxis/YAxis.types.ts +++ b/charts/core/src/YAxis/YAxis.types.ts @@ -19,7 +19,15 @@ export interface YAxisProps { label?: string; /** - * Unit of the axis to be rendered with value. Only applies if `type` of `value`. + * + * Formatter of axis label, which supports string template and callback function. + * + * ```ts + * // Use callback. + * formatter: function (value, index) { + * return value + 'kg'; + *} + * ``` */ - unit?: string; + formatter?: (value: string, index: number) => string; } diff --git a/charts/core/src/core.stories.tsx b/charts/core/src/core.stories.tsx index 38b96e85b2..cc45192327 100644 --- a/charts/core/src/core.stories.tsx +++ b/charts/core/src/core.stories.tsx @@ -43,12 +43,11 @@ export default { category: 'XAxis', }, }, - xAxisUnit: { - control: 'text', - description: 'X-axis units', - name: 'Unit', + xAxisFormatter: { + description: 'X-axis formatter', + name: 'Formatter', table: { - category: 'XAxis', + disable: true, }, }, xAxisLabel: { @@ -68,12 +67,11 @@ export default { category: 'YAxis', }, }, - yAxisUnit: { - control: 'text', - description: 'Y-axis units', - name: 'Unit', + yAxisFormatter: { + description: 'Y-axis formatter', + name: 'Formatter', table: { - category: 'YAxis', + disable: true, }, }, yAxisLabel: { @@ -103,10 +101,10 @@ interface StoryChartProps { horizontalGridLines: boolean; xAxisType: XAxisProps['type']; yAxisType: YAxisProps['type']; - xAxisUnit: string; - yAxisUnit: string; - xAxisLabel: string; - yAxisLabel: string; + xAxisFormatter: XAxisProps['formatter']; + yAxisFormatter: XAxisProps['formatter']; + xAxisLabel: XAxisProps['label']; + yAxisLabel: YAxisProps['label']; } const Template: React.FC = props => { @@ -115,9 +113,9 @@ const Template: React.FC = props => { verticalGridLines, horizontalGridLines, xAxisType, - xAxisUnit, + xAxisFormatter, yAxisType, - yAxisUnit, + yAxisFormatter, xAxisLabel, yAxisLabel, } = props; @@ -125,8 +123,8 @@ const Template: React.FC = props => { return ( - - + + {data.map(({ name, data }) => ( ))} @@ -141,6 +139,5 @@ LiveExample.args = { verticalGridLines: false, xAxisType: 'time', yAxisType: 'value', - xAxisUnit: '', - yAxisUnit: 'GB', + yAxisFormatter: value => `${value}GB`, };