remove base bar char component

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>
  )
 }
 

lib/components/Charts/VBarChart/index.stories.tsx → 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

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)