@mbao01/common 0.0.44 → 0.0.45

package/src/components/Chart/constants.ts

@@ -0,0 +1,78 @@
+import type { Theme } from "../../utilities";
+import { cva } from "../../libs";
+
+export const THEMES = {
+  light: "",
+  dark: ".dark",
+} satisfies Record<Theme, string>;
+
+export const getChartClasses = cva(
+  "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-base-content [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-base-content/20 [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-radial-bar-background-sector]:fill-base-200 [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-base-200 [&_.recharts-reference-line_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none"
+);
+
+export const getChartLegendContainerClasses = cva("flex items-center justify-center gap-4", {
+  variants: {
+    verticalAlign: {
+      top: "pb-3",
+      bottom: "pt-3",
+      middle: "",
+    },
+  },
+});
+
+export const getChartLegendItemClasses = cva("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3");
+
+export const getChartLegendMarkerClasses = cva("h-2 w-2 shrink-0 rounded-[2px]");
+
+export const getChartTooltipContainerClasses = cva(
+  "grid min-w-[8rem] items-start gap-1.5 rounded-md border border-border/50 bg-base-100 px-2.5 py-1.5 text-xs shadow-xl"
+);
+
+export const getChartTooltipItemClasses = cva(
+  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-base-content",
+  {
+    variants: {
+      indicator: {
+        dot: "items-center",
+        line: "",
+        dashed: "",
+      },
+    },
+  }
+);
+
+export const getChartTooltipItemLabelClasses = cva(
+  "flex flex-1 justify-between leading-none items-center",
+  {
+    variants: {
+      nestLabel: {
+        true: "items-end",
+      },
+    },
+  }
+);
+
+export const getChartTooltipItemValueClasses = cva("font-mono font-medium tabular-nums");
+
+export const getChartTooltipItemIndicatorClasses = cva(
+  "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+  {
+    variants: {
+      indicator: {
+        dot: "h-2.5 w-2.5",
+        line: "w-1",
+        dashed: "w-0 border-[1.5px] border-dashed bg-transparent",
+      },
+      nestLabel: {
+        true: "",
+      },
+    },
+    compoundVariants: [
+      {
+        indicator: "dashed",
+        nestLabel: true,
+        className: "my-0.5",
+      },
+    ],
+  }
+);

package/src/components/Chart/helpers.ts

@@ -0,0 +1,27 @@
+import { type ChartConfig } from "./types";
+
+// Helper to extract item config from a payload.
+export const getPayloadConfigFromPayload = (config: ChartConfig, payload: unknown, key: string) => {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+};

package/src/components/Chart/hooks/index.ts

@@ -0,0 +1 @@
+export { useChart } from "./useChart";

package/src/components/Chart/hooks/useChart/index.ts

@@ -0,0 +1 @@
+export { useChart } from "./useChart";

package/src/components/Chart/hooks/useChart/useChart.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ChartContext } from "../../ChartContext";
+
+export const useChart = () => {
+  const context = useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <Chart />");
+  }
+
+  return context;
+};

package/src/components/Chart/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from "./Chart";
+export * from "./components";

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

@@ -0,0 +1,34 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const activeShapeArgs: ArgTypes = {
+  activeIndex: {
+    description:
+      "The index of the individual shapes of the graph element to be marked as active, and render props.activeShape",
+    table: {
+      category: "General",
+    },
+    control: "number",
+  },
+  shape: {
+    description: "The customized shape to be rendered.",
+    table: {
+      type: {
+        summary: "Function | boolean | ReactElement | object",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "object",
+  },
+  activeShape: {
+    description: "The customized shape to be rendered if activeIndex or activeTooltipIndex match",
+    table: {
+      type: {
+        summary: "Function | boolean | ReactElement | object",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "object",
+  },
+};

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

@@ -0,0 +1,67 @@
+/*
+ * This file both exports the documentation of shared props separately, to be reused in places where only single props
+ * are documented, as well as grouped in case a whole group is needed.
+ */
+
+import { type ArgTypes } from "@storybook/react";
+
+export const animateNewValues: ArgTypes[0] = { table: { category: "Animation" } };
+export const animationBegin: ArgTypes[0] = {
+  description: "Specifies when the animation should begin, the unit of this option is ms.",
+  type: { name: "number" },
+  table: {
+    defaultValue: {
+      summary: "0",
+    },
+    category: "Animation",
+  },
+  control: "number",
+};
+export const animationDuration: ArgTypes[0] = {
+  description: "Specifies the duration of animation, the unit of this option is ms.",
+  table: {
+    type: {
+      summary: "number",
+    },
+    category: "Animation",
+  },
+  control: "number",
+};
+export const animationEasing: ArgTypes[0] = {
+  description: "The type of easing function.",
+  table: {
+    type: {
+      summary: "'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'",
+    },
+    category: "Animation",
+  },
+  control: "select",
+  options: ["ease", "ease-in", "ease-out", "ease-in-out", "linear"],
+};
+
+export const isAnimationActive: ArgTypes[0] = {
+  description:
+    "If set false, animation of component will be disabled. This is `true` in CSR, and `false` in SSR",
+  table: {
+    type: {
+      summary: "boolean",
+    },
+    defaultValue: {
+      detail: "true in CSR, and false in SSR",
+    },
+    category: "Animation",
+  },
+  control: "boolean",
+};
+
+/**
+ * Caveat: If any prop is added here, it would falsely be add to the documentation of the component where this group
+ * is used. If the group is to be extended, then only single props should be imported by each component that does not
+ * use all of them.
+ * */
+export const animationArgs: ArgTypes = {
+  animationBegin,
+  animationEasing,
+  animationDuration,
+  isAnimationActive,
+};

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

@@ -0,0 +1,16 @@
+import { type Args } from "@storybook/react";
+import { lineArgs } from "./lineArgs";
+
+export const areaArgs: Args = {
+  ...lineArgs,
+  fillOpacity: {
+    description: "The opacity of the fill.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+};

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

@@ -0,0 +1,19 @@
+import { type ArgTypes } from "@storybook/react";
+import { cartesianChartArgs } from "./cartesianChartArgs";
+
+export const areaChartArgs: ArgTypes = {
+  ...cartesianChartArgs,
+  baseValue: {
+    description: "The base value of area.",
+    table: {
+      type: {
+        summary: "number | 'dataMin' | 'dataMax' | 'auto'",
+      },
+      defaultValue: {
+        summary: "'auto'",
+      },
+      category: "Area",
+    },
+    control: "text",
+  },
+};

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

@@ -0,0 +1,123 @@
+import { ArgTypes } from "@storybook/react";
+import { animationArgs } from "./animationArgs";
+import { cartesianSharedArgs, data } from "./cartesianSharedArgs";
+import { legendType } from "./legendArgs";
+
+/**
+ * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}
+ */
+export const barArgs: ArgTypes = {
+  ...cartesianSharedArgs,
+  ...animationArgs,
+  data,
+  legendType,
+  layout: {
+    description: "The layout of bar in the chart, usually inherited from parent.",
+    table: {
+      type: {
+        summary: "'horizontal' | 'vertical'",
+      },
+      category: "Bar",
+    },
+    control: "radio",
+    options: ["horizontal", "vertical"],
+  },
+  label: {
+    description:
+      "If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If object set, labels will be drawn which have the props mergered by the internal calculated props and the option. If ReactElement set, the option can be the custom label element. If set a function, the function will be called to render customized label.",
+    table: {
+      type: {
+        summary: "boolean | Object | ReactElement | Function",
+      },
+      category: "Bar",
+    },
+    control: "object",
+  },
+  barSize: {
+    description:
+      "The width or height of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.",
+    table: {
+      type: {
+        summary: "number | Percentage",
+      },
+      category: "Bar",
+    },
+    control: "text",
+  },
+  maxBarSize: {
+    description:
+      "The maximum width of bar in a horizontal BarChart, or maximum height in a vertical BarChart.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Bar",
+    },
+    control: "number",
+  },
+  minPointSize: {
+    description:
+      "The minimal height of a bar in a horizontal BarChart, or the minimal width of a bar in a vertical BarChart.\n            By default, 0 values are not shown. To visualize a 0 (or close to zero) point, set the minimal point size to a pixel\n            value like 3. In stacked bar charts, minPointSize might not be respected for tightly packed values. So we strongly recommend not using this props in stacked BarChart. You may provide a function to conditionally change this prop based on Bar value.",
+    table: {
+      type: {
+        summary: "number | Function",
+      },
+      category: "Bar",
+    },
+    control: "number",
+  },
+  background: {
+    description:
+      "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If object set, background of bars will be drawn which have the props mergered by the internal calculated props and the option. If ReactElement set, the option can be the custom background element. If set a function, the function will be called to render customized background.",
+    table: {
+      type: {
+        summary: "boolean | Object | ReactElement | Function",
+      },
+      category: "Bar",
+    },
+    control: "object",
+  },
+  shape: {
+    description:
+      "If set a ReactElement, the shape of bar can be customized. If set a function, the function will be called to render customized shape.",
+    table: {
+      type: {
+        summary: "ReactElement | Function",
+      },
+      category: "Bar",
+    },
+  },
+  activeBar: {
+    description:
+      "The active bar is shown when a user enters a bar chart and this chart has tooltip. If set to false, no active bar will be drawn. If set to true, active bar will be drawn with the props calculated internally. If passed an object, active bar 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 bar element. If passed a function, the function will be called to render a customized active bar.",
+    table: {
+      type: {
+        summary: "boolean | Object | ReactElement | Function",
+      },
+      category: "Bar",
+    },
+    control: "object",
+  },
+  stackId: {
+    description:
+      "The stack id of bar, when two bars have the same value axis and same stackId, then the two bars are stacked in order.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "Bar",
+    },
+    control: "text",
+  },
+  name: {
+    description:
+      "The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "Bar",
+    },
+    control: "text",
+  },
+};

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

@@ -0,0 +1,65 @@
+import { type ArgTypes } from "@storybook/react";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const barChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+  barCategoryGap: {
+    description:
+      "The gap between two bar categories, which can be a percent value or a fixed value.",
+    table: {
+      type: {
+        summary: "Percentage | number",
+      },
+      defaultValue: {
+        summary: "'10%'",
+      },
+      category: "Bar",
+    },
+    control: "text",
+  },
+  barGap: {
+    description: "The gap between two bars in the same category.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "4",
+      },
+      category: "Bar",
+    },
+    control: "number",
+  },
+  barSize: {
+    description: `The width or height of each bar. If the barSize is not specified, the size of the bar
+      will be calculated by the barCategoryGap, barGap and the quantity of bar groups.`,
+    table: {
+      type: {
+        summary: "number | Percentage",
+      },
+      category: "Bar",
+    },
+    control: "text",
+  },
+  maxBarSize: {
+    description: "The maximum size of bar.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Bar",
+    },
+    control: "number",
+  },
+  layout: {
+    description: "The layout of bar in the chart, usually inherited from parent.",
+    table: {
+      type: {
+        summary: "'horizontal' | 'vertical'",
+      },
+      category: "Bar",
+    },
+    control: "radio",
+    options: ["horizontal", "vertical"],
+  },
+};

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

@@ -0,0 +1,42 @@
+import { type ArgTypes } from "@storybook/react";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const cartesianChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+  layout: {
+    description: "The layout of areas, bars, lines in the chart.",
+    table: {
+      type: {
+        summary: "'horizontal' | 'vertical'",
+      },
+      defaultValue: {
+        summary: "'horizontal'",
+      },
+      category: "General",
+    },
+    control: "radio",
+    options: ["horizontal", "vertical"],
+  },
+  stackOffset: {
+    description: `Determines how values are stacked:
+
+- \`none\` is the default, it adds values on top of each other. No smarts. Negative values will overlap.
+- \`expand\` make it so that the values always add up to 1 - so the chart will look like a rectangle.
+- \`wiggle\` and \`silhouette\` tries to keep the chart centered.
+- \`sign\` stacks positive values above zero and negative values below zero. Similar to \`none\` but handles negatives.
+- \`positive\` ignores all negative values, and then behaves like \`none\`.
+
+Also see https://d3js.org/d3-shape/stack#stack-offsets
+(note that the \`diverging\` offset in d3 is named \`sign\` in recharts)
+`,
+    table: {
+      type: {
+        summary: "'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign' | 'positive'",
+      },
+      defaultValue: { summary: "'none'" },
+      category: "General",
+    },
+    control: "radio",
+    options: ["sign", "expand", "none", "wiggle", "silhouette", "positive"],
+  },
+};

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

@@ -0,0 +1,136 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const dataKey: ArgTypes[0] = {
+  description: `The key or getter of a group of data.
+      It could be an accessor function such as (row)=>value`,
+  table: {
+    type: { summary: "string | number | Function" },
+    category: "General",
+  },
+  control: "text",
+};
+
+export const nameKey: ArgTypes[0] = {
+  description: "The key of each sector's name.",
+  table: {
+    type: { summary: "string" },
+    category: "General",
+  },
+  control: "text",
+};
+
+export const activeShape: ArgTypes[0] = {
+  description: "",
+  table: {
+    type: {
+      summary: "Object | ReactElement | Function | boolean",
+    },
+    category: "General",
+  },
+  control: "object",
+};
+
+export const trapezoids: ArgTypes[0] = {
+  description: "The coordinates of all trapezoids in the chart, usually calculated internally",
+  table: {
+    type: {
+      summary: "Array",
+      detail: "[{x: 12, y: 12, upperWidth: 240, lowerWidth: 22, height: 80}]",
+    },
+  },
+  control: "object",
+};
+
+export const xAxisId: ArgTypes[0] = {
+  description: "The id of x-axis which is corresponding to the data.",
+  table: {
+    type: {
+      summary: "string | number",
+    },
+    category: "General",
+  },
+  control: "text",
+};
+export const yAxisId: ArgTypes[0] = {
+  description: "The id of y-axis which is corresponding to the data.",
+  table: {
+    type: {
+      summary: "string | number",
+    },
+    category: "General",
+  },
+  control: "text",
+};
+export const zAxisId: ArgTypes[0] = {
+  description: "The id of z-axis which is corresponding to the data.",
+  table: {
+    type: {
+      summary: "string | number",
+    },
+    category: "General",
+  },
+  control: "text",
+};
+
+export const cartesianSharedArgs: ArgTypes = {
+  dataKey,
+  id: {
+    description: `The unique id of this component, which will be used to generate unique clip path id internally.
+      This props is suggested to be set in SSR.`,
+    type: {
+      name: "string",
+    },
+    table: {
+      category: "General",
+    },
+    control: "text",
+  },
+  name: {
+    description: `The name of data. This option will be used in tooltip and legend to represent a line.
+    If no value was set to this option, the value of dataKey will be used alternatively.`,
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  unit: {
+    description: "The unit of data. This option will be used in tooltip.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  xAxisId,
+  yAxisId,
+};
+
+export const data: ArgTypes[0] = {
+  description: `The source data, in which each element is an object.
+    This can be defined either on the chart element (ScatterChart, LineChart, etc) or on the graphical item (Scatter, Line).
+    The object shape is flexible, with no pre-defined properties;
+    The dataKey props then define which properties from this object render where.`,
+  table: {
+    category: "General",
+    type: {
+      summary: "array of objects",
+    },
+  },
+};
+
+export const layout: ArgTypes[0] = {
+  description: "The layout of line, usually inherited from parent.",
+  table: {
+    type: {
+      summary: "'horizontal' | 'vertical'",
+    },
+    category: "Internal",
+  },
+  control: "radio",
+  options: ["horizontal", "vertical"],
+};