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`,
};