Feat/allow toggling axisline (#2)

* allow toggling axisline for all chart types * fix styling + add tests
tremorlabs · Jun 8, 2024 · a641abb · a641abb
1 parent d77d755
commit a641abb
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 10 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -65,6 +65,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     showGradient = true,
     autoMinValue = false,
     curveType = "linear",
@@ -188,10 +189,16 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((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}
-              axisLine={false}
+              axisLine={showAxisLine}
               minTickGap={tickGap}
               angle={rotateLabelX?.angle}
               dy={rotateLabelX?.verticalShift}
@@ -210,7 +217,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
             <YAxis
               width={yAxisWidth}
               hide={!showYAxis}
-              axisLine={false}
+              axisLine={showAxisLine}
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
@@ -224,6 +231,12 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((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
@@ -84,6 +84,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     autoMinValue = false,
     minValue,
     maxValue,
@@ -202,9 +203,15 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((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={false}
+                axisLine={showAxisLine}
                 angle={rotateLabelX?.angle}
                 dy={rotateLabelX?.verticalShift}
                 height={rotateLabelX?.xAxisHeight}
@@ -235,9 +242,15 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((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={false}
+                axisLine={showAxisLine}
                 tickFormatter={valueFormatter}
                 minTickGap={tickGap}
                 allowDecimals={allowDecimals}
@@ -260,7 +273,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showAxisLine}
                 tickLine={false}
                 type="number"
                 domain={yAxisDomain as AxisDomain}
@@ -274,6 +287,12 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((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
@@ -297,7 +316,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 width={yAxisWidth}
                 hide={!showYAxis}
                 dataKey={index}
-                axisLine={false}
+                axisLine={showAxisLine}
                 tickLine={false}
                 ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
                 type="category"
@@ -312,6 +331,12 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((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
@@ -61,6 +61,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     autoMinValue = false,
     curveType = "linear",
     minValue,
@@ -185,9 +186,15 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((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={false}
+              axisLine={showAxisLine}
               minTickGap={tickGap}
               angle={rotateLabelX?.angle}
               dy={rotateLabelX?.verticalShift}
@@ -206,7 +213,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
             <YAxis
               width={yAxisWidth}
               hide={!showYAxis}
-              axisLine={false}
+              axisLine={showAxisLine}
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
@@ -220,6 +227,12 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((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
@@ -64,6 +64,7 @@ export interface ScatterChartProps
   showTooltip?: boolean;
   showLegend?: boolean;
   showGridLines?: boolean;
+  showAxisLine?: boolean;
   autoMinXValue?: boolean;
   minXValue?: number;
   maxXValue?: number;
@@ -129,6 +130,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     autoMinXValue = false,
     minXValue,
     maxXValue,
@@ -246,10 +248,16 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((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}
-                axisLine={false}
+                axisLine={showAxisLine}
                 minTickGap={tickGap}
                 domain={xAxisDomain as AxisDomain}
                 allowDataOverflow={true}
@@ -272,7 +280,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showAxisLine}
                 tickLine={false}
                 dataKey={y}
                 type="number"
@@ -289,6 +297,12 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((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/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -27,6 +27,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   showTooltip?: boolean;
   showLegend?: boolean;
   showGridLines?: boolean;
+  showAxisLine?: boolean;
   autoMinValue?: boolean;
   minValue?: number;
   maxValue?: number;

diff --git 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
@@ -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
@@ -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
@@ -197,3 +197,9 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const ShowAxisLine: Story = {
+  args: {
+    showAxisLine: true,
+  },
+};