@mbao01/common 0.0.44 → 0.0.46

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"],
+};

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

@@ -0,0 +1,244 @@
+import { ArgTypes } from "@storybook/react";
+import { onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseUp } from "./events";
+
+export const data: ArgTypes[0] = {
+  description: "The source data, in which each element is an object.",
+  table: {
+    type: {
+      summary: "Array",
+    },
+    category: "General",
+  },
+  control: "object",
+};
+
+export const chartSizeArgs: ArgTypes = {
+  height: {
+    description: "The height of chart container.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  width: {
+    description: "The width of chart container.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+};
+
+export const margin: ArgTypes[0] = {
+  description: "The sizes of whitespace around the container.",
+  table: {
+    type: {
+      summary: "object",
+    },
+    defaultValue: {
+      summary: "{ top: 5, right: 5, bottom: 5, left: 5 }",
+    },
+    category: "General",
+  },
+  control: "object",
+};
+
+export const dataKey: ArgTypes[0] = {
+  description: "The key or getter of a group of data which should be unique in a chart.",
+  table: {
+    type: {
+      summary: "string | number | Function",
+    },
+    category: "General",
+  },
+  control: "text",
+};
+
+// These props are shared between the following charts:
+// - AreaChart
+// - BarChart
+// - ComposedChart
+// - LineChart
+// - PieChart
+// - RadarChart
+// - RadialBarChart
+// - ScatterChart
+// - FunnelChart
+export const categoricalChartArgs: ArgTypes = {
+  ...chartSizeArgs,
+  dataKey: {
+    description: `Can be used to mirror dataKey used on children components, using it as this level will force
+the chart to animate between two states even though the data array stays the same. Useful to animate when
+toggling between multiple dataKey.`,
+    table: {
+      type: {
+        summary: "string | number | Function | undefined",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  data,
+  margin,
+  accessibilityLayer: {
+    description: "Turn on accessibility support for keyboard-only and screen reader users.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  role: {
+    description:
+      "The ARIA role for the chart, which provides semantic information for screen reader users.",
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "text",
+  },
+  tabIndex: {
+    description: "If and where the chart should appear in the tab order",
+    table: {
+      type: {
+        summary: "number | undefined",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "number",
+  },
+  style: {
+    description: "The style of chart.",
+    table: {
+      type: {
+        summary: "object",
+      },
+      category: "General",
+    },
+    control: "object",
+  },
+  desc: {
+    description: "The description of chart.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  className: {
+    table: {
+      category: "Internal",
+    },
+    control: "text",
+  },
+  defaultShowTooltip: {
+    description: "If true set, the tooltip will be displayed when the chart is rendered.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  id: {
+    description: "The unique id of chart.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseUp,
+  reverseStackOrder: {
+    description: `If \`false\`, stacked items will be rendered left to right. If \`true\`, stacked items
+      will be rendered right to left. (Render direction affects SVG layering, not x position.)`,
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  syncId: {
+    description: `If any two categorical charts(LineChart, AreaChart, BarChart, ComposedChart) have the same syncId,
+      these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.`,
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  syncMethod: {
+    description: `When syncId is provided, allows customization of how the charts will synchronize tooltips and
+    brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array.
+    In cases where data does not have the same length, this might yield unexpected results. In that case use 'value'
+    which will try to match other charts values, or a fully custom function which will receive tick, data as argument
+    and should return an index.`,
+    table: {
+      type: {
+        summary: "'index' | 'value' | Function",
+      },
+      defaultValue: {
+        summary: "'index'",
+      },
+      category: "General",
+    },
+    control: "inline-radio",
+    options: ["index", "value"],
+  },
+  throttleDelay: {
+    description: `The delay of throttle for mouse events, which can be used to avoid
+      the performance problem when the chart is rendered in a heavy environment.`,
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  title: {
+    description: "The title of chart.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+};

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

@@ -0,0 +1,46 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const r: ArgTypes[0] = {
+  description: "The radius of the dot.",
+  table: {
+    type: {
+      summary: "number",
+    },
+    defaultValue: {
+      summary: "10",
+    },
+    category: "General",
+  },
+  control: "number",
+};
+
+export const cx: ArgTypes[0] = {
+  description: "The x-coordinate of the dots center.",
+  table: {
+    type: {
+      summary: "number",
+    },
+    category: "General",
+  },
+  control: "number",
+};
+
+export const cy: ArgTypes[0] = {
+  description: "The y-coordinate of the dots center.",
+  table: {
+    type: { summary: "number" },
+    category: "General",
+  },
+  control: "number",
+};
+
+/**
+ * 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 DotProps: ArgTypes = {
+  r,
+  cx,
+  cy,
+};