From b1429ffa18d6a1c571156f394040700a93c04412 Mon Sep 17 00:00:00 2001
From: Alexandre Balon-Perin <alexbp13@gmail.com>
Date: Sat, 8 Jun 2024 22:51:45 +0900
Subject: [PATCH 1/2] feat: x-axis padding prop

---
 src/components/chart-elements/AreaChart/AreaChart.tsx   | 4 +++-
 src/components/chart-elements/BarChart/BarChart.tsx     | 3 ++-
 src/components/chart-elements/LineChart/LineChart.tsx   | 3 ++-
 src/components/chart-elements/common/BaseChartProps.tsx | 1 +
 src/stories/chart-elements/AreaChart.stories.tsx        | 6 ++++++
 src/stories/chart-elements/BarChart.stories.tsx         | 6 ++++++
 src/stories/chart-elements/LineChart.stories.tsx        | 6 ++++++
 7 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 57426b02..20e9644c 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -80,11 +80,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     rotateLabelX,
     tickGap = 5,
     xAxisLabel,
+    xAxisPadding,
     yAxisLabel,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20;
+  const paddingValue =
+    xAxisPadding ?? ((!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20);
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
index c87df34b..b7234d25 100644
--- a/src/components/chart-elements/BarChart/BarChart.tsx
+++ b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -96,12 +96,13 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     barCategoryGap,
     tickGap = 5,
     xAxisLabel,
+    xAxisPadding,
     yAxisLabel,
     className,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  const paddingValue = xAxisPadding ?? (!showXAxis && !showYAxis ? 0 : 20);
   const [legendHeight, setLegendHeight] = useState(60);
   const categoryColors = constructCategoryColors(categories, colors);
   const [activeBar, setActiveBar] = React.useState<any | undefined>(undefined);
diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
index ded14f8d..b0a21b35 100644
--- a/src/components/chart-elements/LineChart/LineChart.tsx
+++ b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -76,10 +76,11 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     tickGap = 5,
     xAxisLabel,
     yAxisLabel,
+    xAxisPadding,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  const paddingValue = xAxisPadding ?? (!showXAxis && !showYAxis ? 0 : 20);
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
index a08969f5..a03e7888 100644
--- a/src/components/chart-elements/common/BaseChartProps.tsx
+++ b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -42,6 +42,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   };
   tickGap?: number;
   xAxisLabel?: string;
+  xAxisPadding?: number;
   yAxisLabel?: string;
 }
 
diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
index db57ce06..a13df87d 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 xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: 0,
+  },
+};
diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 664925dc..0b4b11ae 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 xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: 0,
+  },
+};
diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx
index 11cea258..fb69b3c1 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 xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: 0,
+  },
+};

From f1380feca81dae83d2d6f82bbb72dfc0f009db93 Mon Sep 17 00:00:00 2001
From: Alexandre Balon-Perin <alexbp13@gmail.com>
Date: Sun, 9 Jun 2024 12:02:18 +0900
Subject: [PATCH 2/2] allow setting padding left and right independently

---
 src/components/chart-elements/AreaChart/AreaChart.tsx | 11 ++++++++---
 src/components/chart-elements/BarChart/BarChart.tsx   |  8 ++++++--
 src/components/chart-elements/LineChart/LineChart.tsx |  8 ++++++--
 .../chart-elements/common/BaseChartProps.tsx          |  2 +-
 src/stories/chart-elements/AreaChart.stories.tsx      |  8 +++++++-
 src/stories/chart-elements/BarChart.stories.tsx       |  8 +++++++-
 src/stories/chart-elements/LineChart.stories.tsx      |  8 +++++++-
 7 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 20e9644c..b863106d 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -85,8 +85,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue =
-    xAxisPadding ?? ((!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20);
+
+  const defaultPadding: number =
+    (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20;
+  const paddingValue: Required<typeof xAxisPadding> = {
+    left: xAxisPadding?.left ?? defaultPadding,
+    right: xAxisPadding?.right ?? defaultPadding,
+  };
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
@@ -176,7 +181,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               />
             ) : null}
             <XAxis
-              padding={{ left: paddingValue, right: paddingValue }}
+              padding={paddingValue}
               hide={!showXAxis}
               dataKey={index}
               tick={{ transform: "translate(0, 6)" }}
diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
index b7234d25..25eab00e 100644
--- a/src/components/chart-elements/BarChart/BarChart.tsx
+++ b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -102,7 +102,11 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = xAxisPadding ?? (!showXAxis && !showYAxis ? 0 : 20);
+  const defaultPadding: number = !showXAxis && !showYAxis ? 0 : 20;
+  const paddingValue: Required<typeof xAxisPadding> = {
+    left: xAxisPadding?.left ?? defaultPadding,
+    right: xAxisPadding?.right ?? defaultPadding,
+  };
   const [legendHeight, setLegendHeight] = useState(60);
   const categoryColors = constructCategoryColors(categories, colors);
   const [activeBar, setActiveBar] = React.useState<any | undefined>(undefined);
@@ -188,7 +192,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
 
             {layout !== "vertical" ? (
               <XAxis
-                padding={{ left: paddingValue, right: paddingValue }}
+                padding={paddingValue}
                 hide={!showXAxis}
                 dataKey={index}
                 interval={startEndOnly ? "preserveStartEnd" : intervalType}
diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
index b0a21b35..5b63bc91 100644
--- a/src/components/chart-elements/LineChart/LineChart.tsx
+++ b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -80,7 +80,11 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = xAxisPadding ?? (!showXAxis && !showYAxis ? 0 : 20);
+  const defaultPadding: number = !showXAxis && !showYAxis ? 0 : 20;
+  const paddingValue: Required<typeof xAxisPadding> = {
+    left: xAxisPadding?.left ?? defaultPadding,
+    right: xAxisPadding?.right ?? defaultPadding,
+  };
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
@@ -171,7 +175,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               />
             ) : null}
             <XAxis
-              padding={{ left: paddingValue, right: paddingValue }}
+              padding={paddingValue}
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
index a03e7888..eb0cea4e 100644
--- a/src/components/chart-elements/common/BaseChartProps.tsx
+++ b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -42,7 +42,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   };
   tickGap?: number;
   xAxisLabel?: string;
-  xAxisPadding?: number;
+  xAxisPadding?: { left?: number; right?: number };
   yAxisLabel?: string;
 }
 
diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
index a13df87d..7427a114 100644
--- a/src/stories/chart-elements/AreaChart.stories.tsx
+++ b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -367,6 +367,12 @@ export const AxisLabels: Story = {
 
 export const xAxisNoPadding: Story = {
   args: {
-    xAxisPadding: 0,
+    xAxisPadding: { left: 0, right: 0 },
+  },
+};
+
+export const xAxisNoLeftPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0 },
   },
 };
diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 0b4b11ae..41005d2e 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -390,6 +390,12 @@ export const AxisLabels: Story = {
 
 export const xAxisNoPadding: Story = {
   args: {
-    xAxisPadding: 0,
+    xAxisPadding: { left: 0, right: 0 },
+  },
+};
+
+export const xAxisNoLeftPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0 },
   },
 };
diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx
index fb69b3c1..c854a5ef 100644
--- a/src/stories/chart-elements/LineChart.stories.tsx
+++ b/src/stories/chart-elements/LineChart.stories.tsx
@@ -327,6 +327,12 @@ export const AxisLabels: Story = {
 
 export const xAxisNoPadding: Story = {
   args: {
-    xAxisPadding: 0,
+    xAxisPadding: { left: 0, right: 0 },
+  },
+};
+
+export const xAxisNoLeftPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0 },
   },
 };