@mbao01/common 0.0.44 → 0.0.45

package/src/components/Chart/stories/examples/RadialChart.tsx

@@ -0,0 +1,239 @@
+import { Label, LabelList, PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";
+import { Chart } from "../../Chart";
+import { ChartTooltip, ChartTooltipContent } from "../../components";
+import { type ChartConfig } from "../../types";
+import { RadialBarChartProps } from "../args";
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig;
+
+/**
+ * ## Parent
+ *
+ * The RadialBarChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The RadialBarChart can be used with the following child components: `<PolarAngleAxis />`, `<PolarRadiusAxis />`,
+ * `<PolarGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<RadialBar />`, `<Customized />`
+ */
+export const RadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const LabeledRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar}>
+          <LabelList
+            position="insideStart"
+            dataKey="browser"
+            className="fill-white capitalize mix-blend-luminosity"
+            fontSize={11}
+          />
+        </RadialBar>
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const GridRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <PolarGrid gridType="circle" />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const TextRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  const chartData = [{ browser: "safari", visitors: 200, fill: "var(--color-safari)" }];
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+    },
+    safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className="first:fill-base-200 last:fill-base-100"
+          polarRadius={[86, 74]}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-foreground text-4xl font-bold"
+                    >
+                      {chartData[0].visitors.toLocaleString()}
+                    </tspan>
+                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
+                      Visitors
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const ShapeRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  const chartData = [{ browser: "safari", visitors: 1260, fill: "var(--color-safari)" }];
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+    },
+    safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className="first:fill-base-200 last:fill-base-100"
+          polarRadius={[86, 74]}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-base-content text-4xl font-bold"
+                    >
+                      {chartData[0].visitors.toLocaleString()}
+                    </tspan>
+                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
+                      Visitors
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const StackedRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  const chartData = [{ month: "january", desktop: 1260, mobile: 570 }];
+  const chartConfig = {
+    desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  const totalVisitors = chartData[0].desktop + chartData[0].mobile;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                    <tspan
+                      x={viewBox.cx}
+                      y={(viewBox.cy || 0) - 16}
+                      className="fill-foreground text-2xl font-bold"
+                    >
+                      {totalVisitors.toLocaleString()}
+                    </tspan>
+                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 4} className="fill-base-content">
+                      Visitors
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+        <RadialBar dataKey="desktop" fill="var(--color-desktop)" {...props.radialBar} />
+        <RadialBar dataKey="mobile" fill="var(--color-mobile)" {...props.radialBar} />
+      </RadialBarChart>
+    </Chart>
+  );
+};

package/src/components/Chart/stories/examples/Tooltip.tsx

@@ -0,0 +1,68 @@
+import { Bar, BarChart, XAxis } from "recharts";
+import type { ChartConfig } from "../../types";
+import { Chart } from "../../Chart";
+import { ChartTooltip, ChartTooltipContent } from "../../components";
+import { type ChartTooltipContentProps } from "../../types";
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+];
+export const tooltipChartConfig = {
+  activities: {
+    label: "Activities",
+  },
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-3))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig;
+
+export const BarChartExample = (props: ChartTooltipContentProps) => {
+  return (
+    <Chart config={tooltipChartConfig} className="h-[250px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value: string) => {
+            return new Date(value).toLocaleDateString("en-US", {
+              weekday: "short",
+            });
+          }}
+        />
+        <Bar
+          isAnimationActive={false}
+          dataKey="running"
+          stackId="a"
+          fill="var(--color-running)"
+          radius={[0, 0, 4, 4]}
+        />
+        <Bar
+          isAnimationActive={false}
+          dataKey="swimming"
+          stackId="a"
+          fill="var(--color-swimming)"
+          radius={[4, 4, 0, 0]}
+        />
+
+        <ChartTooltip
+          content={<ChartTooltipContent {...props} />}
+          isAnimationActive={false}
+          cursor={false}
+          defaultIndex={1}
+        />
+      </BarChart>
+    </Chart>
+  );
+};

package/src/components/Chart/stories/helpers/index.tsx

@@ -0,0 +1,75 @@
+import type { ArgTypes, StoryContext, StoryFn } from "@storybook/react";
+import type { ComponentProps, ElementType } from "react";
+
+export const categorizeArgs = (args: ArgTypes, category: string) => {
+  return Object.entries(args).reduce((acc, [name, arg]) => {
+    const categoryName = `${category} ${name}`;
+    acc[categoryName] = {
+      ...arg,
+      name,
+      table: {
+        ...arg.table,
+        category,
+      },
+    };
+    return acc;
+  }, {} as ArgTypes);
+};
+
+const getCategorizedArgs = <T,>(args: ArgTypes<T>) => {
+  return Object.entries(args).reduce((acc, [categoryName, value]) => {
+    const [category, name] = categoryName.split(" ");
+    acc[category] = {
+      ...acc[category],
+      [name]: value,
+    };
+    return acc;
+  }, {} as ArgTypes);
+};
+
+export const withArgs = <T extends object>(Component: StoryFn, context: StoryContext<T>) => {
+  context.args = getCategorizedArgs(context.args) as T;
+
+  return <Component />;
+};
+
+const convertStringToJSON = (str: string) => {
+  let newStr = str.replace(/'/g, '"');
+  newStr = newStr.replace(/(\w+)\s*:/g, '"$1":');
+
+  try {
+    return JSON.parse(newStr) as Record<string, unknown>;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    return str;
+  }
+};
+
+// A helper function to generate Args for a story based on ArgsTypes objects
+export const getArgsFromArgTypes = <T extends ArgTypes>(argsTypes: T) => {
+  const args = (Object.keys(argsTypes) as (keyof T)[]).reduce(
+    (acc, key) => {
+      const defaultValue =
+        (argsTypes[key].defaultValue as string) ?? argsTypes[key].table?.defaultValue?.summary;
+      if (defaultValue) {
+        try {
+          acc[key] = convertStringToJSON(String(defaultValue));
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_e) {
+          acc[key] = defaultValue;
+        }
+      }
+      return acc;
+    },
+    {} as Record<keyof T, unknown>
+  );
+
+  return args;
+};
+
+export const renderer = <T extends ElementType>(Component: T) => {
+  const component = <G,>(props: G) => <Component {...(props as ComponentProps<T>)} />;
+  component.displayName =
+    (Component as React.FC<unknown>).displayName || (Component as React.FC<unknown>).name;
+  return component;
+};

package/src/components/Chart/types.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps, ComponentType, ReactNode } from "react";
+import { LegendProps, ResponsiveContainer, Tooltip } from "recharts";
+import { type Theme } from "../../utilities";
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: ReactNode;
+    icon?: ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<Theme, string> });
+};
+
+export type ChartContextProps = {
+  config: ChartConfig;
+};
+
+export type ChartProps = ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: ComponentProps<typeof ResponsiveContainer>["children"];
+};
+
+export type ChartStyleProps = {
+  id: string;
+  config: ChartConfig;
+};
+
+export type ChartTooltipContentProps = ComponentProps<typeof Tooltip> &
+  ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  };
+
+export type ChartLegendContentProps = ComponentProps<"div"> &
+  Pick<LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  };