From f8bda6f069665cfb85eb32832e436ca60af7228a Mon Sep 17 00:00:00 2001 From: Alexandre Balon-Perin Date: Fri, 24 May 2024 22:25:33 +0900 Subject: [PATCH] fix styling + add tests --- .../chart-elements/AreaChart/AreaChart.tsx | 12 ++++++++++ .../chart-elements/BarChart/BarChart.tsx | 24 +++++++++++++++++++ .../chart-elements/LineChart/LineChart.tsx | 12 ++++++++++ .../ScatterChart/ScatterChart.tsx | 12 ++++++++++ .../chart-elements/AreaChart.stories.tsx | 6 +++++ .../chart-elements/BarChart.stories.tsx | 6 +++++ .../chart-elements/LineChart.stories.tsx | 6 +++++ .../chart-elements/ScatterChart.stories.tsx | 6 +++++ 8 files changed, 84 insertions(+) diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 36723fd6..2bf62894 100644 --- a/src/components/chart-elements/AreaChart/AreaChart.tsx +++ b/src/components/chart-elements/AreaChart/AreaChart.tsx @@ -189,6 +189,12 @@ const AreaChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} interval={startEndOnly ? "preserveStartEnd" : intervalType} tickLine={false} @@ -225,6 +231,12 @@ const AreaChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={valueFormatter} allowDecimals={allowDecimals} diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx index 6b5bf4df..997346bd 100644 --- a/src/components/chart-elements/BarChart/BarChart.tsx +++ b/src/components/chart-elements/BarChart/BarChart.tsx @@ -203,6 +203,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} axisLine={showAxisLine} @@ -236,6 +242,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} axisLine={showAxisLine} @@ -275,6 +287,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={ relative ? (value: number) => `${(value * 100).toString()} %` : valueFormatter @@ -313,6 +331,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} > {yAxisLabel && ( diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx index e155cc3a..4513f6af 100644 --- a/src/components/chart-elements/LineChart/LineChart.tsx +++ b/src/components/chart-elements/LineChart/LineChart.tsx @@ -186,6 +186,12 @@ const LineChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} axisLine={showAxisLine} @@ -221,6 +227,12 @@ const LineChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={valueFormatter} allowDecimals={allowDecimals} diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx index 6e7eb02b..5388e4e0 100644 --- a/src/components/chart-elements/ScatterChart/ScatterChart.tsx +++ b/src/components/chart-elements/ScatterChart/ScatterChart.tsx @@ -248,6 +248,12 @@ const ScatterChart = React.forwardRef((props, "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} tickFormatter={valueFormatter.x} @@ -291,6 +297,12 @@ const ScatterChart = React.forwardRef((props, "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} allowDecimals={allowDecimals} allowDataOverflow={true} diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx index db57ce06..9a7f0957 100644 --- a/src/stories/chart-elements/AreaChart.stories.tsx +++ b/src/stories/chart-elements/AreaChart.stories.tsx @@ -364,3 +364,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx index 664925dc..1f559c43 100644 --- a/src/stories/chart-elements/BarChart.stories.tsx +++ b/src/stories/chart-elements/BarChart.stories.tsx @@ -387,3 +387,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx index 11cea258..111b933b 100644 --- a/src/stories/chart-elements/LineChart.stories.tsx +++ b/src/stories/chart-elements/LineChart.stories.tsx @@ -324,3 +324,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/ScatterChart.stories.tsx b/src/stories/chart-elements/ScatterChart.stories.tsx index d12402b0..b14fbc54 100644 --- a/src/stories/chart-elements/ScatterChart.stories.tsx +++ b/src/stories/chart-elements/ScatterChart.stories.tsx @@ -197,3 +197,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +};