@mbao01/common 0.0.44 → 0.0.46

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

@@ -0,0 +1,238 @@
+import { type SVGProps } from "react";
+import { LabelList, Pie, PieChart, Sector } from "recharts";
+import { type PieSectorDataItem } from "recharts/types/polar/Pie";
+import { Chart } from "../../Chart";
+import {
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../components";
+import { type ChartConfig } from "../../types";
+import { type PieChartProps } 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 PieChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The PieChart can be used with the following child components: `<PolarAngleAxis />`, `<PolarRadiusAxis />`,
+ * `<PolarGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Pie />`, `<Customized />`
+ */
+export const PieChartExample = (props: Partial<PieChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <PieChart {...props.pieChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Pie dataKey="visitors" {...props.pie} />
+      </PieChart>
+    </Chart>
+  );
+};
+
+export const LabeledPieChartExample = (props: Partial<PieChartProps>) => {
+  return (
+    <Chart
+      config={chartConfig}
+      className="mx-auto aspect-square h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-base-content"
+    >
+      <PieChart {...props.pieChart}>
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+        <Pie dataKey="visitors" {...props.pie} />
+      </PieChart>
+    </Chart>
+  );
+};
+
+export const CustomLabeledPieChartExample = (props: Partial<PieChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <PieChart {...props.pieChart}>
+        <ChartTooltip content={<ChartTooltipContent nameKey="visitors" hideLabel />} />
+        <Pie
+          dataKey="visitors"
+          {...props.pie}
+          label={({
+            payload,
+            ...props
+          }: SVGProps<SVGTextElement> & { payload: Record<string, string> }) => {
+            return (
+              <text
+                cx={props.cx}
+                cy={props.cy}
+                x={props.x}
+                y={props.y}
+                textAnchor={props.textAnchor}
+                dominantBaseline={props.dominantBaseline}
+                className="fill-base-content"
+              >
+                {`${
+                  chartConfig[payload.browser as keyof typeof chartConfig]?.label
+                } (${payload.visitors})`}
+              </text>
+            );
+          }}
+        />
+      </PieChart>
+    </Chart>
+  );
+};
+
+export const LabelListPieChartExample = (props: Partial<PieChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <PieChart {...props.pieChart}>
+        <ChartTooltip content={<ChartTooltipContent nameKey="visitors" hideLabel />} />
+        <Pie dataKey="visitors" {...props.pie}>
+          <LabelList
+            dataKey="browser"
+            className="fill-base-100"
+            stroke="none"
+            fontSize={12}
+            formatter={(value: keyof typeof chartConfig) => chartConfig[value]?.label}
+            {...props}
+          />
+        </Pie>
+      </PieChart>
+    </Chart>
+  );
+};
+
+export const WithLegendPieChartExample = (props: Partial<PieChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <PieChart {...props.pieChart}>
+        <Pie dataKey="visitors" {...props.pie} />
+        <ChartLegend
+          content={<ChartLegendContent nameKey="browser" />}
+          className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+        />
+      </PieChart>
+    </Chart>
+  );
+};
+
+export const DonutPieChartExample = (props: Partial<PieChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <PieChart {...props.pieChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Pie dataKey="visitors" {...props.pie} />
+      </PieChart>
+    </Chart>
+  );
+};
+
+export const ActiveDonutPieChartExample = (props: Partial<PieChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <PieChart {...props.pieChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Pie
+          dataKey="visitors"
+          {...props.pie}
+          activeShape={({ outerRadius = 0, ...props }: PieSectorDataItem) => (
+            <Sector {...props} outerRadius={outerRadius + 10} />
+          )}
+        />
+      </PieChart>
+    </Chart>
+  );
+};
+
+export const StackedPieChartExample = (props: Partial<PieChartProps>) => {
+  const desktopData = [
+    { month: "january", desktop: 186, fill: "var(--color-january)" },
+    { month: "february", desktop: 305, fill: "var(--color-february)" },
+    { month: "march", desktop: 237, fill: "var(--color-march)" },
+    { month: "april", desktop: 173, fill: "var(--color-april)" },
+    { month: "may", desktop: 209, fill: "var(--color-may)" },
+  ];
+  const mobileData = [
+    { month: "january", mobile: 80, fill: "var(--color-january)" },
+    { month: "february", mobile: 200, fill: "var(--color-february)" },
+    { month: "march", mobile: 120, fill: "var(--color-march)" },
+    { month: "april", mobile: 190, fill: "var(--color-april)" },
+    { month: "may", mobile: 130, fill: "var(--color-may)" },
+  ];
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+    },
+    desktop: {
+      label: "Desktop",
+    },
+    mobile: {
+      label: "Mobile",
+    },
+    january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+    },
+    february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+    },
+    march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+    },
+    april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+    },
+    may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <PieChart {...props.pieChart}>
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              labelKey="visitors"
+              nameKey="month"
+              indicator="line"
+              labelFormatter={(_, payload) => {
+                return chartConfig[payload?.[0].dataKey as keyof typeof chartConfig].label;
+              }}
+            />
+          }
+        />
+        <Pie {...props.pie} data={desktopData} dataKey="desktop" outerRadius={60} />
+        <Pie {...props.pie} data={mobileData} dataKey="mobile" innerRadius={70} outerRadius={90} />
+      </PieChart>
+    </Chart>
+  );
+};

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

@@ -0,0 +1,261 @@
+import { type SVGProps } from "react";
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "recharts";
+import { Chart } from "../../Chart";
+import {
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../components";
+import { type ChartConfig } from "../../types";
+import { type RadarChartProps } from "../args";
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig;
+
+/**
+ * ## Parent
+ *
+ * The RadarChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The RadarChart can be used with the following child components: `<PolarAngleAxis />`, `<PolarRadiusAxis />`,
+ * `<PolarGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Radar />`, `<Customized />`
+ */
+export const RadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarAngleAxis dataKey="month" />
+        <PolarGrid />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const DotRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarAngleAxis dataKey="month" />
+        <PolarGrid />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const MultipleRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+        <PolarAngleAxis dataKey="month" />
+        <PolarGrid />
+        <Radar {...props.radar} dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} />
+        <Radar {...props.radar} dataKey="mobile" fill="var(--color-mobile)" />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const LinesRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+        <PolarAngleAxis dataKey="month" />
+        <PolarGrid radialLines={false} />
+        <Radar
+          {...props.radar}
+          dataKey="desktop"
+          fill="var(--color-desktop)"
+          stroke="var(--color-desktop)"
+        />
+        <Radar
+          {...props.radar}
+          dataKey="mobile"
+          fill="var(--color-mobile)"
+          stroke="var(--color-mobile)"
+        />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const CustomLabeledRadarChartExample = (props: Partial<RadarChartProps>) => {
+  const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 73, mobile: 190 },
+    { month: "May", desktop: 209, mobile: 130 },
+    { month: "June", desktop: 214, mobile: 140 },
+  ];
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart data={chartData}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+        <PolarAngleAxis
+          dataKey="month"
+          tick={({
+            x,
+            y,
+            textAnchor,
+            index,
+            ...props
+          }: SVGProps<SVGTextElement> & { index: number }) => {
+            const data = chartData[index];
+            return (
+              <text
+                x={x}
+                y={index === 0 ? Number(y) - 10 : y}
+                textAnchor={textAnchor}
+                fontSize={13}
+                fontWeight={500}
+                {...props}
+              >
+                <tspan>{data.desktop}</tspan>
+                <tspan className="fill-base-content">/</tspan>
+                <tspan>{data.mobile}</tspan>
+                <tspan x={x} dy={"1rem"} fontSize={12} className="fill-base-content">
+                  {data.month}
+                </tspan>
+              </text>
+            );
+          }}
+        />
+        <PolarGrid />
+        <Radar {...props.radar} dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} />
+        <Radar {...props.radar} dataKey="mobile" fill="var(--color-mobile)" />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const RadiusAxisRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent indicator="line" labelKey="month" />}
+        />
+        <PolarGrid />
+        <Radar {...props.radar} dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} />
+        <Radar {...props.radar} dataKey="mobile" fill="var(--color-mobile)" />
+        <PolarRadiusAxis
+          angle={60}
+          stroke="hsla(var(--foreground))"
+          orientation="middle"
+          axisLine={false}
+        />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const GridCustomRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
+        <PolarAngleAxis dataKey="month" />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const GridFilledRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <PolarGrid className="fill-[--color-desktop] opacity-20" />
+        <PolarAngleAxis dataKey="month" />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const NoGridRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <PolarAngleAxis dataKey="month" />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const GridCircleRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <PolarGrid gridType="circle" />
+        <PolarAngleAxis dataKey="month" />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const NoLinesGridCircleRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <PolarGrid gridType="circle" radialLines={false} />
+        <PolarAngleAxis dataKey="month" />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const GridCircleFilledRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarGrid className="fill-[--color-desktop] opacity-20" gridType="circle" />
+        <PolarAngleAxis dataKey="month" />
+        <Radar dataKey="desktop" {...props.radar} />
+      </RadarChart>
+    </Chart>
+  );
+};
+
+export const LegendRadarChartExample = (props: Partial<RadarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadarChart {...props.radarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+        <PolarAngleAxis dataKey="month" />
+        <PolarGrid />
+        <Radar {...props.radar} dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} />
+        <Radar {...props.radar} dataKey="mobile" fill="var(--color-mobile)" />
+        <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+      </RadarChart>
+    </Chart>
+  );
+};