feat: Charts allowDecimals

Author: mitrotasios

src/components/chart-elements/AreaChart/AreaChart.tsx

@@ -49,6 +49,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     minValue,
     maxValue,
     connectNulls = false,
+    allowDecimals = true,
     className,
     ...other
   } = props;
@@ -93,6 +94,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               fontFamily: "Inter; Helvetica",
             }}
             tickFormatter={valueFormatter}
+            allowDecimals={allowDecimals}
           />
           {showTooltip ? (
             <Tooltip

src/components/chart-elements/BarChart/BarChart.tsx

@@ -48,6 +48,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     autoMinValue = false,
     minValue,
     maxValue,
+    allowDecimals = true,
     className,
     ...other
   } = props;
@@ -102,6 +103,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
               tickFormatter={valueFormatter}
               padding={{ left: 10, right: 10 }}
               minTickGap={5}
+              allowDecimals={allowDecimals}
             />
           )}
           {layout !== "vertical" ? (
@@ -120,6 +122,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
               tickFormatter={
                 relative ? (value: number) => `${(value * 100).toString()} %` : valueFormatter
               }
+              allowDecimals={allowDecimals}
             />
           ) : (
             <YAxis

src/components/chart-elements/LineChart/LineChart.tsx

@@ -46,6 +46,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     minValue,
     maxValue,
     connectNulls = false,
+    allowDecimals = true,
     className,
     ...other
   } = props;
@@ -89,6 +90,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               fontFamily: "Inter; Helvetica",
             }}
             tickFormatter={valueFormatter}
+            allowDecimals={allowDecimals}
           />
           {showTooltip ? (
             <Tooltip

src/components/chart-elements/common/BaseChartProps.tsx

@@ -18,6 +18,7 @@ interface BaseChartProps extends React.HTMLAttributes<HTMLDivElement> {
   autoMinValue?: boolean;
   minValue?: number;
   maxValue?: number;
+  allowDecimals?: boolean;
 }
 
 export default BaseChartProps;

src/stories/chart-elements/AreaChart.stories.tsx

@@ -37,7 +37,20 @@ const DefaultTemplate: ComponentStory<typeof AreaChart> = ({ ...args }) => (
 export const DefaultResponsive = ResponsiveTemplate.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 DefaultResponsive.args = {
-  data: data,
+  data: [
+    {
+      month: "Jan 21'",
+      Sales: 3,
+    },
+    {
+      month: "Feb 21'",
+      Sales: 1,
+    },
+    {
+      month: "Mar 21'",
+      Sales: 2,
+    },
+  ],
   categories: ["Sales", "Successful Payments"],
   index: "month",
 };