From ad0fb5e860e1be01aeadefa1a9b78580ca617714 Mon Sep 17 00:00:00 2001
From: Ernesto de la Haba Lacalle <ernestodelahabalacalle@ernesto.lacalle>
Date: Tue, 30 Jul 2024 12:00:26 +0200
Subject: [PATCH] remove base bar char component

---
 lib/components/Charts/BarChart/index.tsx      |  65 +++++++---
 lib/components/Charts/BaseBarChart/index.tsx  |  84 -------------
 lib/components/Charts/VBarChart/index.tsx     |  74 -----------
 .../index.stories.tsx                         |   6 +-
 .../Charts/VerticalBarChart/index.tsx         | 117 ++++++++++++++++++
 .../Charts/VBarChartInsight/index.stories.tsx |   8 +-
 .../Charts/VBarChartInsight/index.tsx         |   4 +-
 7 files changed, 174 insertions(+), 184 deletions(-)
 delete mode 100644 lib/components/Charts/BaseBarChart/index.tsx
 delete mode 100644 lib/components/Charts/VBarChart/index.tsx
 rename lib/components/Charts/{VBarChart => VerticalBarChart}/index.stories.tsx (83%)
 create mode 100644 lib/components/Charts/VerticalBarChart/index.tsx

diff --git a/lib/components/Charts/BarChart/index.tsx b/lib/components/Charts/BarChart/index.tsx
index 9c53dc41..f8713017 100644
--- a/lib/components/Charts/BarChart/index.tsx
+++ b/lib/components/Charts/BarChart/index.tsx
@@ -1,37 +1,68 @@
+import { ChartContainer } from "@/ui/chart"
 import { ForwardedRef } from "react"
-import { CartesianGrid, XAxis, YAxis } from "recharts"
 import {
+  Bar,
   BarChart as BarChartPrimitive,
-  BaseBarChartProps,
-} from "../BaseBarChart"
+  CartesianGrid,
+  LabelList,
+  XAxis,
+  YAxis,
+} from "recharts"
+
 import { xAxisProps, yAxisProps } from "../utils/elements"
 import { fixedForwardRef } from "../utils/forwardRef"
-import { ChartConfig, InferChartKeys } from "../utils/types"
+import { prepareData } from "../utils/muncher"
+import { ChartConfig, ChartPropsBase, InferChartKeys } from "../utils/types"
 
 export type BarChartProps<
   DataConfig extends ChartConfig = ChartConfig,
   Keys extends string = InferChartKeys<DataConfig>,
-> = BaseBarChartProps<DataConfig, Keys>
+> = ChartPropsBase<DataConfig, Keys> & { label: boolean }
 
 const _BarChart = <
   DataConfig extends ChartConfig,
   Keys extends string = string,
 >(
-  config: BarChartProps<DataConfig, Keys>,
+  { dataConfig, data, xAxis, yAxis, label }: BarChartProps<DataConfig, Keys>,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
+  const bars = Object.keys(dataConfig) as Array<keyof typeof dataConfig>
+
   return (
-    <BarChartPrimitive
-      gridComponent={<CartesianGrid vertical={false} />}
-      xAxisComponent={
-        <XAxis {...xAxisProps(config.xAxis)} hide={config.xAxis?.hide} />
-      }
-      yAxisComponent={
-        <YAxis {...yAxisProps(config.yAxis)} hide={config.yAxis?.hide} />
-      }
-      ref={ref}
-      {...config}
-    />
+    <ChartContainer config={dataConfig} ref={ref}>
+      <BarChartPrimitive
+        accessibilityLayer
+        data={prepareData(data)}
+        margin={{ left: 12, right: 12 }}
+      >
+        <CartesianGrid vertical={false} />
+        <YAxis {...yAxisProps(yAxis)} hide={yAxis?.hide} />
+        <XAxis {...xAxisProps(yAxis)} hide={xAxis?.hide} />
+
+        {bars.map((key) => {
+          return (
+            <>
+              <Bar
+                key={`bar-${key}`}
+                dataKey={key}
+                fill={dataConfig[key].color}
+                radius={4}
+              >
+                {label && (
+                  <LabelList
+                    key={`label-{${key}}`}
+                    position="top"
+                    offset={10}
+                    className="fill-foreground"
+                    fontSize={12}
+                  />
+                )}
+              </Bar>
+            </>
+          )
+        })}
+      </BarChartPrimitive>
+    </ChartContainer>
   )
 }
 
diff --git a/lib/components/Charts/BaseBarChart/index.tsx b/lib/components/Charts/BaseBarChart/index.tsx
deleted file mode 100644
index a6ff040e..00000000
--- a/lib/components/Charts/BaseBarChart/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ChartContainer } from "@/ui/chart"
-import { ForwardedRef } from "react"
-import { ChartConfig, ChartPropsBase, InferChartKeys } from "../utils/types"
-
-import React from "react"
-import { Bar, ComposedChart, LabelList } from "recharts"
-import { prepareData } from "../utils/bar"
-import { fixedForwardRef } from "../utils/forwardRef"
-
-type BaseBarChartConfigProps = {
-  layout?: "vertical" | "horizontal"
-  xAxisComponent?: React.ReactElement
-  yAxisComponent?: React.ReactElement
-  gridComponent?: React.ReactElement
-}
-
-export type BaseBarChartProps<
-  DataConfig extends ChartConfig = ChartConfig,
-  Keys extends string = InferChartKeys<DataConfig>,
-> = ChartPropsBase<DataConfig, Keys> & { label: boolean }
-
-export const _BaseBarChart = <
-  DataConfig extends ChartConfig,
-  Keys extends string = string,
->(
-  config: BaseBarChartProps<DataConfig, Keys> & BaseBarChartConfigProps,
-  ref: ForwardedRef<HTMLDivElement>
-) => {
-  const {
-    dataConfig,
-    data,
-    label,
-    xAxisComponent,
-    yAxisComponent,
-    layout,
-    gridComponent,
-  } = config
-  const bars = Object.keys(dataConfig) as Array<keyof typeof dataConfig>
-
-  return (
-    <ChartContainer config={dataConfig} ref={ref}>
-      <ComposedChart
-        layout={layout}
-        accessibilityLayer
-        data={prepareData(data)}
-        margin={{ left: 12, right: 12 }}
-      >
-        {gridComponent}
-        {xAxisComponent}
-        {yAxisComponent}
-
-        {bars.map((l, lt) => {
-          return (
-            <>
-              <Bar
-                layout={layout}
-                key={`line-${lt}-lt`}
-                dataKey={l}
-                fill={dataConfig[l].color}
-                radius={4}
-              >
-                {label && (
-                  <LabelList
-                    key={`label-{${lt}}`}
-                    position={layout == "vertical" ? "right" : "top"}
-                    offset={10}
-                    className="fill-foreground"
-                    fontSize={12}
-                  />
-                )}
-              </Bar>
-            </>
-          )
-        })}
-      </ComposedChart>
-    </ChartContainer>
-  )
-}
-
-_BaseBarChart.defaultProps = {
-  layout: "horizontal",
-}
-
-export const BarChart = fixedForwardRef(_BaseBarChart)
diff --git a/lib/components/Charts/VBarChart/index.tsx b/lib/components/Charts/VBarChart/index.tsx
deleted file mode 100644
index f555c64e..00000000
--- a/lib/components/Charts/VBarChart/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { cloneDeep } from "lodash"
-import { ForwardedRef } from "react"
-import { XAxis, XAxisProps, YAxis, YAxisProps } from "recharts"
-import {
-  BarChart as BarChartPrimitive,
-  BaseBarChartProps,
-} from "../BaseBarChart"
-import { prepareData } from "../utils/bar"
-import { xAxisProps, yAxisProps } from "../utils/elements"
-import { fixedForwardRef } from "../utils/forwardRef"
-import { ChartConfig, InferChartKeys } from "../utils/types"
-
-const getMaxValueByKey = (
-  data: ({ x: unknown } & Record<string, number>)[]
-): string => {
-  const clonedData = cloneDeep(data)
-
-  let label: string = ""
-  let max: number = 0
-
-  clonedData.forEach((datapoint) => {
-    delete datapoint.x
-
-    Object.entries(datapoint as Record<string, number>).forEach(
-      ([newLabel, value]) => {
-        if (max < value) {
-          max = value
-          label = newLabel
-        }
-      }
-    )
-  })
-
-  return label
-}
-
-export type VBarChartProps<
-  DataConfig extends ChartConfig = ChartConfig,
-  Keys extends string = InferChartKeys<DataConfig>,
-> = BaseBarChartProps<DataConfig, Keys>
-
-const _VBarChart = <
-  DataConfig extends ChartConfig,
-  Keys extends string = string,
->(
-  config: VBarChartProps<DataConfig, Keys>,
-  ref: ForwardedRef<HTMLDivElement>
-) => {
-  const munchedData = prepareData(config.data)
-
-  const xAxis: XAxisProps = {
-    ...xAxisProps(config.xAxis),
-    type: "number",
-    dataKey: getMaxValueByKey(munchedData),
-  }
-
-  const yAxis: YAxisProps = {
-    ...yAxisProps(config.yAxis),
-    type: "category",
-    dataKey: "x",
-  }
-
-  return (
-    <BarChartPrimitive
-      layout="vertical"
-      xAxisComponent={<XAxis {...xAxis} hide={config.xAxis?.hide} />}
-      yAxisComponent={<YAxis {...yAxis} hide={config.yAxis?.hide} />}
-      ref={ref}
-      {...config}
-    />
-  )
-}
-
-export const VBarChart = fixedForwardRef(_VBarChart)
diff --git a/lib/components/Charts/VBarChart/index.stories.tsx b/lib/components/Charts/VerticalBarChart/index.stories.tsx
similarity index 83%
rename from lib/components/Charts/VBarChart/index.stories.tsx
rename to lib/components/Charts/VerticalBarChart/index.stories.tsx
index 386d97c7..3e5ff3c7 100644
--- a/lib/components/Charts/VBarChart/index.stories.tsx
+++ b/lib/components/Charts/VerticalBarChart/index.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react"
-import { VBarChart, VBarChartProps } from "."
+import { VerticalBarChart, VerticalBarChartProps } from "."
 
 const dataConfig = {
   desktop: {
@@ -12,7 +12,7 @@ const dataConfig = {
   },
 }
 
-const Component = VBarChart<typeof dataConfig>
+const Component = VerticalBarChart<typeof dataConfig>
 
 const meta = {
   component: Component,
@@ -33,7 +33,7 @@ const meta = {
       { label: "April", values: { mobile: 1500, desktop: 8000 } },
       { label: "May", values: { mobile: 2000, desktop: 6000 } },
     ],
-  } satisfies VBarChartProps<typeof dataConfig>,
+  } satisfies VerticalBarChartProps<typeof dataConfig>,
 } satisfies Meta<typeof Component>
 
 export default meta
diff --git a/lib/components/Charts/VerticalBarChart/index.tsx b/lib/components/Charts/VerticalBarChart/index.tsx
new file mode 100644
index 00000000..e2b3926e
--- /dev/null
+++ b/lib/components/Charts/VerticalBarChart/index.tsx
@@ -0,0 +1,117 @@
+import { ChartContainer } from "@/ui/chart"
+import { cloneDeep } from "lodash"
+import { ForwardedRef } from "react"
+import {
+  Bar,
+  BarChart as BarChartPrimitive,
+  LabelList,
+  XAxis,
+  XAxisProps,
+  YAxis,
+  YAxisProps,
+} from "recharts"
+import { prepareData } from "../utils/bar"
+import {
+  xAxisProps as xAxisConfigureProps,
+  yAxisProps as yAxisConfigureProps,
+} from "../utils/elements"
+import { fixedForwardRef } from "../utils/forwardRef"
+import { ChartConfig, ChartPropsBase, InferChartKeys } from "../utils/types"
+
+const getMaxValueByKey = (
+  data: ({ x: unknown } & Record<string, number>)[]
+): string => {
+  const clonedData = cloneDeep(data)
+
+  let label: string = ""
+  let max: number = 0
+
+  clonedData.forEach((datapoint) => {
+    delete datapoint.x
+
+    Object.entries(datapoint as Record<string, number>).forEach(
+      ([newLabel, value]) => {
+        if (max < value) {
+          max = value
+          label = newLabel
+        }
+      }
+    )
+  })
+
+  return label
+}
+
+export type VerticalBarChartProps<
+  DataConfig extends ChartConfig = ChartConfig,
+  Keys extends string = InferChartKeys<DataConfig>,
+> = ChartPropsBase<DataConfig, Keys> & { label: boolean }
+
+const _VBarChart = <
+  DataConfig extends ChartConfig,
+  Keys extends string = string,
+>(
+  {
+    dataConfig,
+    data,
+    xAxis,
+    yAxis,
+    label,
+  }: VerticalBarChartProps<DataConfig, Keys>,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
+  const bars = Object.keys(dataConfig) as Array<keyof typeof dataConfig>
+  const munchedData = prepareData(data)
+
+  const xAxisProps: XAxisProps = {
+    ...xAxisConfigureProps(xAxis),
+    type: "number",
+    dataKey: getMaxValueByKey(munchedData),
+  }
+
+  const yAxisProps: YAxisProps = {
+    ...yAxisConfigureProps(yAxis),
+    type: "category",
+    dataKey: "x",
+  }
+
+  return (
+    <ChartContainer config={dataConfig} ref={ref}>
+      <BarChartPrimitive
+        layout="vertical"
+        accessibilityLayer
+        data={prepareData(data)}
+        margin={{ left: 12, right: 12 }}
+      >
+        <XAxis {...xAxisProps} hide={xAxis?.hide} />
+        <YAxis {...yAxisProps} hide={yAxis?.hide} />
+
+        {bars.map((key) => {
+          return (
+            <>
+              <Bar
+                layout="vertical"
+                key={`bar-${key}`}
+                dataKey={key}
+                fill={dataConfig[key].color}
+                radius={4}
+              >
+                {label && (
+                  <LabelList
+                    key={`label-{${key}}`}
+                    position="right"
+                    offset={10}
+                    className="fill-foreground"
+                    fontSize={12}
+                  />
+                )}
+              </Bar>
+            </>
+          )
+        })}
+      </BarChartPrimitive>
+    </ChartContainer>
+  )
+}
+
+export const VerticalBarChart = fixedForwardRef(_VBarChart)
diff --git a/lib/components/Insights/Charts/VBarChartInsight/index.stories.tsx b/lib/components/Insights/Charts/VBarChartInsight/index.stories.tsx
index 82723ed7..3e285b01 100644
--- a/lib/components/Insights/Charts/VBarChartInsight/index.stories.tsx
+++ b/lib/components/Insights/Charts/VBarChartInsight/index.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import BarChartStory from "@/components/Charts/VBarChart/index.stories"
-import { VBarChartInsight } from "."
+import BarChartStory from "@/components/Charts/VerticalBarChart/index.stories"
+import { VerticalBarChartInsight } from "."
 import { containerStoryArgs } from "../storybook-utils"
 
 const meta = {
-  component: VBarChartInsight,
+  component: VerticalBarChartInsight,
   parameters: {
     layout: "centered",
   },
@@ -18,7 +18,7 @@ const meta = {
     },
     chart: BarChartStory.args,
   },
-} satisfies Meta<typeof VBarChartInsight>
+} satisfies Meta<typeof VerticalBarChartInsight>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/lib/components/Insights/Charts/VBarChartInsight/index.tsx b/lib/components/Insights/Charts/VBarChartInsight/index.tsx
index b65184db..322bfa66 100644
--- a/lib/components/Insights/Charts/VBarChartInsight/index.tsx
+++ b/lib/components/Insights/Charts/VBarChartInsight/index.tsx
@@ -1,4 +1,4 @@
-import { VBarChart } from "@/components/Charts/VBarChart"
+import { VerticalBarChart } from "@/components/Charts/VerticalBarChart"
 import { wrap } from "../../InsightsContainer"
 
-export const VBarChartInsight = wrap(VBarChart, "chart")
+export const VerticalBarChartInsight = wrap(VerticalBarChart, "chart")