@mbao01/common 0.0.43 → 0.0.45

package/src/components/Chart/stories/args/tooltipArgs.ts

@@ -0,0 +1,41 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const tooltipType: ArgTypes[0] = {
+  description: `If set to be 'none', no series data is shown in tooltip.`,
+  table: {
+    category: "Tooltip",
+    type: {
+      summary: "'responsive' | 'none'",
+    },
+  },
+  control: "select",
+  options: ["responsive", "none"],
+};
+
+export const activeDot: ArgTypes[0] = {
+  description: `The active dot is shown when a user enters a line chart and this chart has tooltip.
+      If set to false, no active dot will be drawn. If set to true, active dot will be drawn with the
+      props calculated internally. If passed an object, active dot will be drawn, and the internally
+      calculated props will be merged with the key value pairs of the passed object. If passed a ReactElement,
+      the option can be the custom active dot element. If passed a function, the function will be called to
+      render a customized active dot.`,
+  table: {
+    type: {
+      summary: "Boolean | Object | ReactElement | Function",
+      detail: `'<Line dataKey="value" activeDot={false} />\n' +
+      '<Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2 }} />\n' +
+      '<Line dataKey="value" activeDot={<CustomizedDot />} />\n' +
+      '<Line dataKey="value" activeDot={renderDot} />'`,
+    },
+    defaultValue: {
+      summary: "true",
+    },
+    category: "Tooltip",
+  },
+  control: "boolean",
+};
+
+export const tooltipArgs: ArgTypes = {
+  activeDot,
+  tooltipType,
+};

package/src/components/Chart/stories/args/types.ts

@@ -0,0 +1,23 @@
+import { type SVGProps } from "react";
+
+type SVGKeys = Exclude<
+  keyof SVGProps<SVGElement>,
+  "type" | "fill" | "fillOpacity" | "stroke" | "strokeWidth" | "className"
+>;
+export type OmitSVGElement<T> = Omit<T, SVGKeys>;
+
+export type Flatten<T> = NonNullable<
+  {
+    [K in keyof T]: T[K] extends never
+      ? never
+      : {
+          [P in keyof T[K]]: T[K][P] extends never
+            ? {
+                [Q in `${Exclude<K, symbol>} ${Exclude<P, symbol>}`]: never;
+              } // Stop here, don't flatten further
+            : {
+                [Q in `${Exclude<K, symbol>} ${Exclude<P, symbol>}`]: T[K][P];
+              }; // Flatten key-value pair
+        }[keyof T[K]]; // Flatten first level key-value pair
+  }[keyof T]
+>;

package/src/components/Chart/stories/args/xAxisArgs.ts

@@ -0,0 +1,109 @@
+import { type ArgTypes } from "@storybook/react";
+import { sharedAxisArgs } from "./sharedAxisArgs";
+
+export const xAxisArgs: ArgTypes = {
+  ...sharedAxisArgs,
+  hide: {
+    description: "If set true, the axis do not display in the chart.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  includeHidden: {
+    description: "Consider hidden graphical elements when computing domain.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Domain",
+    },
+    control: "boolean",
+  },
+  dataKey: {
+    description: "The key of data displayed in the axis.",
+    table: {
+      type: {
+        summary: "string | number | Function",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  xAxisId: {
+    description: "The unique id of x-axis.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      defaultValue: {
+        summary: "'0'",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  height: {
+    description: "The height of axis element in pixels.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "30",
+      },
+      category: "Layout",
+    },
+    control: "number",
+  },
+  orientation: {
+    description: "The orientation of axis",
+    table: {
+      type: {
+        summary: "'bottom' , 'top'",
+      },
+      defaultValue: {
+        summary: "'bottom'",
+      },
+      category: "Layout",
+    },
+    control: "inline-radio",
+    options: ["top", "bottom"],
+  },
+  type: {
+    description: "The type of axis.",
+    table: {
+      type: {
+        summary: "'number' | 'category'",
+      },
+      defaultValue: {
+        summary: "'category'",
+      },
+      category: "General",
+    },
+    control: "inline-radio",
+    options: ["number", "category"],
+  },
+  padding: {
+    description: "Specify the padding of x-axis.",
+    table: {
+      type: {
+        summary: 'Object | "gap" | "no-gap"',
+      },
+      defaultValue: {
+        summary: "{ left: 0, right: 0 }",
+      },
+      category: "Ticks",
+    },
+    control: "object",
+  },
+};

package/src/components/Chart/stories/args/yAxisArgs.ts

@@ -0,0 +1,73 @@
+import { type ArgTypes } from "@storybook/react";
+import { sharedAxisArgs } from "./sharedAxisArgs";
+
+export const yAxisArgs: ArgTypes = {
+  ...sharedAxisArgs,
+  yAxisId: {
+    description: "The unique id of y-axis.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      defaultValue: {
+        summary: "'0'",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  width: {
+    description: "The width of axis element in pixels.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "60",
+      },
+      category: "Layout",
+    },
+    control: "number",
+  },
+  orientation: {
+    description: "The orientation of axis",
+    table: {
+      type: {
+        summary: "'left' , 'right'",
+      },
+      defaultValue: {
+        summary: "'left'",
+      },
+      category: "Layout",
+    },
+    control: "inline-radio",
+    options: ["left", "right"],
+  },
+  type: {
+    description: "The type of axis.",
+    table: {
+      type: {
+        summary: "'number' | 'category'",
+      },
+      defaultValue: {
+        summary: "'number'",
+      },
+      category: "General",
+    },
+    control: "inline-radio",
+    options: ["number", "category"],
+  },
+  padding: {
+    description: "Specify the padding of x-axis.",
+    table: {
+      type: {
+        summary: "{ top: number, bottom: number }",
+      },
+      defaultValue: {
+        summary: "{ top: 0, bottom: 0 }",
+      },
+      category: "Ticks",
+    },
+    control: "object",
+  },
+};

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

@@ -0,0 +1,156 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Chart } from "../../Chart";
+import {
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../components";
+import { type ChartConfig } from "../../types";
+import { type AreaChartProps } from "../args";
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig;
+
+/**
+ * ## Parent
+ *
+ * The AreaChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The AreaChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceArea />`,
+ * `<Brush />`, `<CartesianGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Area />`, `<Customized />` or valid svg elements.
+ */
+export const AreaChartExample = (props: Partial<AreaChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <AreaChart {...props.areaChart}>
+        <CartesianGrid vertical={false} />
+        <XAxis {...props.xAxis} />
+        <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
+        <Area dataKey="desktop" {...props.area} />
+      </AreaChart>
+    </Chart>
+  );
+};
+
+export const StackedAreaChartExample = (props: Partial<AreaChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <AreaChart {...props.areaChart}>
+        <CartesianGrid vertical={false} />
+        <XAxis {...props.xAxis} />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dot" />} />
+        <Area
+          dataKey="mobile"
+          fill="var(--color-mobile)"
+          stroke="var(--color-mobile)"
+          {...props.area}
+        />
+        <Area
+          dataKey="desktop"
+          fill="var(--color-desktop)"
+          stroke="var(--color-desktop)"
+          {...props.area}
+        />
+      </AreaChart>
+    </Chart>
+  );
+};
+
+export const StackedExpandedAreaChartExample = (props: Partial<AreaChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <AreaChart {...props.areaChart}>
+        <CartesianGrid vertical={false} />
+        <XAxis {...props.xAxis} />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+        <defs>
+          <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={0.8} />
+            <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.1} />
+          </linearGradient>
+          <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.8} />
+            <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0.1} />
+          </linearGradient>
+        </defs>
+        <Area
+          dataKey="other"
+          fill="var(--color-other)"
+          fillOpacity={0.1}
+          stroke="var(--color-other)"
+          {...props.area}
+        />
+        <Area
+          dataKey="mobile"
+          fill="url(#fillMobile)"
+          fillOpacity={0.4}
+          stroke="var(--color-mobile)"
+          {...props.area}
+        />
+        <Area
+          dataKey="desktop"
+          type="natural"
+          fill="url(#fillDesktop)"
+          fillOpacity={0.4}
+          stroke="var(--color-desktop)"
+          stackId="a"
+          {...props.area}
+        />
+      </AreaChart>
+    </Chart>
+  );
+};
+
+export const LabeledAreaChartExample = (props: Partial<AreaChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <AreaChart {...props.areaChart}>
+        <CartesianGrid vertical={false} />
+        <XAxis {...props.xAxis} />
+        <YAxis {...props.yAxis} />
+        <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
+        <Area dataKey="month" {...props.area} />
+      </AreaChart>
+    </Chart>
+  );
+};
+
+export const WithLegendAreaChartExample = (props: Partial<AreaChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <AreaChart {...props.areaChart}>
+        <CartesianGrid vertical={false} />
+        <XAxis {...props.xAxis} />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+        <Area
+          dataKey="mobile"
+          fill="var(--color-mobile)"
+          stroke="var(--color-mobile)"
+          {...props.area}
+        />
+        <Area
+          dataKey="desktop"
+          fill="var(--color-desktop)"
+          stroke="var(--color-desktop)"
+          {...props.area}
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+      </AreaChart>
+    </Chart>
+  );
+};