Fix: Expose show axis lines on line, bar, scatter

Upsolve-Labs · Jul 24, 2024 · aef1cbf · aef1cbf
1 parent b0d209c
commit aef1cbf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 11 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -60,6 +60,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     startEndOnly = false,
     showXAxis = true,
     showYAxis = true,
+    showXAxisLine = false,
+    showYAxisLine = false,
     yAxisWidth = 56,
     intervalType = "equidistantPreserveStart",
     showAnimation = false,
@@ -195,7 +197,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               )}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
               tickLine={false}
-              axisLine={false}
+              axisLine={showXAxis && showXAxisLine}
               minTickGap={tickGap}
               angle={rotateLabelX?.angle}
               dy={rotateLabelX?.verticalShift}
@@ -246,7 +248,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showYAxis && showYAxisLine}
                 tickLine={false}
                 type="number"
                 domain={yAxisDomain as AxisDomain}

diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -79,6 +79,8 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     showAnimation = false,
     showXAxis = true,
     showYAxis = true,
+    showXAxisLine = false,
+    showYAxisLine = false,
     yAxisWidth = 56,
     intervalType = "equidistantPreserveStart",
     showTooltip = true,
@@ -205,7 +207,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                   "dark:fill-dark-tremor-content",
                 )}
                 tickLine={false}
-                axisLine={false}
+                axisLine={showXAxis && showXAxisLine}
                 angle={rotateLabelX?.angle}
                 dy={rotateLabelX?.verticalShift}
                 height={rotateLabelX?.xAxisHeight}
@@ -238,7 +240,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                   "dark:fill-dark-tremor-content",
                 )}
                 tickLine={false}
-                axisLine={false}
+                axisLine={showXAxis && showXAxisLine}
                 tickFormatter={valueFormatter}
                 minTickGap={tickGap}
                 allowDecimals={allowDecimals}
@@ -261,7 +263,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showYAxis && showYAxisLine}
                 tickLine={false}
                 type="number"
                 domain={yAxisDomain as AxisDomain}
@@ -298,7 +300,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 width={yAxisWidth}
                 hide={!showYAxis}
                 dataKey={index}
-                axisLine={false}
+                axisLine={showYAxis && showYAxisLine}
                 tickLine={false}
                 ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
                 type="category"

diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -55,6 +55,8 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     startEndOnly = false,
     showXAxis = true,
     showYAxis = true,
+    showXAxisLine = false,
+    showYAxisLine = false,
     yAxisWidth = 56,
     intervalType = "equidistantPreserveStart",
     animationDuration = 900,
@@ -190,7 +192,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                 "dark:fill-dark-tremor-content",
               )}
               tickLine={false}
-              axisLine={false}
+              axisLine={showXAxis && showXAxisLine}
               minTickGap={tickGap}
               angle={rotateLabelX?.angle}
               dy={rotateLabelX?.verticalShift}
@@ -201,7 +203,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                 <YAxis
                   width={yAxisWidth}
                   hide={!showYAxis}
-                  axisLine={false}
+                  axisLine={showYAxis && showYAxisLine}
                   tickLine={false}
                   type="number"
                   domain={yAxisDomain as AxisDomain}
@@ -241,7 +243,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showYAxis && showYAxisLine}
                 tickLine={false}
                 type="number"
                 domain={yAxisDomain as AxisDomain}

diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
@@ -60,6 +60,8 @@ export interface ScatterChartProps
   startEndOnly?: boolean;
   showXAxis?: boolean;
   showYAxis?: boolean;
+  showXAxisLine?: boolean;
+  showYAxisLine?: boolean;
   yAxisWidth?: number;
   intervalType?: IntervalType;
   showTooltip?: boolean;
@@ -124,6 +126,8 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
     startEndOnly = false,
     showXAxis = true,
     showYAxis = true,
+    showXAxisLine = false,
+    showYAxisLine = false,
     yAxisWidth = 56,
     intervalType = "equidistantPreserveStart",
     animationDuration = 900,
@@ -252,7 +256,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
                 )}
                 tickLine={false}
                 tickFormatter={valueFormatter.x}
-                axisLine={false}
+                axisLine={showXAxis && showXAxisLine}
                 minTickGap={tickGap}
                 domain={xAxisDomain as AxisDomain}
                 allowDataOverflow={true}
@@ -275,7 +279,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showYAxis && showYAxisLine}
                 tickLine={false}
                 dataKey={y}
                 type="number"

diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -30,6 +30,8 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   startEndOnly?: boolean;
   showXAxis?: boolean;
   showYAxis?: boolean;
+  showXAxisLine?: boolean;
+  showYAxisLine?: boolean;
   yAxisWidth?: number;
   intervalType?: IntervalType;
   showTooltip?: boolean;