@mbao01/common 0.0.44 → 0.0.46

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

@@ -0,0 +1,205 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const legendType: ArgTypes[0] = {
+  description: "The type of icon in legend. If set to 'none', no legend item will be rendered.",
+  table: {
+    type: {
+      summary:
+        "'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'",
+    },
+    defaultValue: {
+      summary: "'line'",
+    },
+    category: "Style",
+  },
+  control: "select",
+  options: [
+    "line",
+    "plainline",
+    "square",
+    "rect",
+    "circle",
+    "cross",
+    "diamond",
+    "square",
+    "star",
+    "triangle",
+    "wye",
+    "none",
+  ],
+};
+
+// 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 legendArgs: ArgTypes = {
+  width: {
+    description: "The width of legend.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  height: {
+    description: "The height of legend.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  layout: {
+    description: "The layout of legend items.",
+    table: {
+      type: {
+        summary: "'horizontal' | 'vertical'",
+      },
+      defaultValue: {
+        summary: "'horizontal'",
+      },
+      category: "General",
+    },
+    control: "inline-radio",
+    options: ["horizontal", "vertical"],
+  },
+  align: {
+    description: `Sets horizontal position of the Legend relative to the chart:
+
+- \`left\` shows the Legend to the left of the chart, and chart width reduces automatically to make space for it.
+- \`right\` shows the Legend to the right of the chart, and chart width reduces automatically.
+- \`center\` shows the Legend in the middle of chart, and chart width remains unchanged.
+
+The exact behavior changes depending on \`verticalAlign\` prop.`,
+    table: {
+      type: {
+        summary: "'left' | 'center' | 'right'",
+      },
+      defaultValue: {
+        summary: "'center'",
+      },
+      category: "General",
+    },
+    control: "radio",
+    options: ["left", "center", "right"],
+  },
+  verticalAlign: {
+    description: `Sets vertical position of the Legend relative to the chart:
+
+- \`bottom\` shows the Legend below chart, and chart height reduces automatically to make space for it.
+- \`top\` shows the Legend above chart, and chart height reduces automatically.
+- \`middle\` shows the Legend in the middle of chart, covering other content, and chart height remains unchanged.
+
+The exact behavior changes depending on \`align\` prop.`,
+    table: {
+      type: {
+        summary: "'top' | 'middle' | 'bottom'",
+      },
+      category: "General",
+    },
+    control: "radio",
+    options: ["top", "middle", "bottom"],
+  },
+  iconSize: {
+    description: "The size of icon in each legend item.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "14",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  iconType: {
+    description: "The type of icon in each legend item.",
+    table: {
+      type: {
+        summary:
+          "'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'",
+      },
+      defaultValue: {
+        summary: "line",
+      },
+      category: "General",
+    },
+    control: "select",
+    options: [
+      "line",
+      "plainline",
+      "square",
+      "rect",
+      "circle",
+      "cross",
+      "diamond",
+      "star",
+      "triangle",
+      "wye",
+    ],
+  },
+  content: {
+    description: `If set to a React element, the option will be used to render the legend.
+    If set to a function, the function will be called to render the legend's content.`,
+    table: {
+      type: {
+        summary: "ReactElement | Function",
+        detail: `<ChartLegend content={<CustomizedLegend external={external} />} />
+
+        const renderLegend = (props) => {
+          const { payload } = props;
+
+          return (
+            <ul>
+              {
+                payload.map((entry, index) => (
+                  <li key={'item'-index}>{entry.value}</li>
+                ))
+              }
+            </ul>
+          );
+        }
+        <Legend content={renderLegend} />`,
+      },
+      category: "General",
+    },
+  },
+  formatter: {
+    description: "The formatter function of each text in legend.",
+    table: {
+      type: {
+        summary: "Function",
+        detail: "(value, entry, index) => ()",
+      },
+      category: "General",
+    },
+  },
+  wrapperStyle: {
+    description: `The style of legend container which is a "position: absolute;" div element.
+    Because the position of legend is quite flexible, so you can change the position by the value of top, left, right, bottom in this option.
+    And the format of wrapperStyle is the same as React inline style.`,
+    table: {
+      type: {
+        summary: "Object",
+      },
+      category: "General",
+    },
+    control: "object",
+  },
+  portal: {
+    description: `If portal is defined, then Legend will use this element as a target
+    for rendering using React Portal: https://react.dev/reference/react-dom/createPortal.
+    If this is undefined then Legend renders inside the recharts-wrapper element with absolute positioning.`,
+    table: {
+      category: "Position",
+      type: {
+        summary: "HTMLElement | null",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,87 @@
+import { type Args } from "@storybook/react";
+import { dataKey } from "./chartArgs";
+import { generalStyleArgs, hide, labelDescription, labelSummary } from "./stylesArgs";
+
+export const lineArgs: Args = {
+  ...generalStyleArgs,
+  dataKey,
+  connectNulls: {
+    description: "Whether to connect a graph line across null points.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      category: "Style",
+      defaultValue: {
+        summary: "false",
+      },
+    },
+    control: "boolean",
+  },
+  dot: {
+    description: `If false set, dots will not be drawn. If true set, dots will be drawn which have the props
+      calculated internally. If object set, dots will be drawn which have the props merged by the internal
+      calculated props and the option. If ReactElement set, the option can be the custom dot element.If set
+      a function, the function will be called to render customized dot.`,
+    table: {
+      type: {
+        summary: "Boolean | Object | ReactElement | Function",
+        detail:
+          '<Line dataKey="value" dot={false} />\n' +
+          "<Line dataKey=\"value\" dot={{ stroke: 'red', strokeWidth: 2 }} />\n" +
+          '<Line dataKey="value" dot={<CustomizedDot />} />\n' +
+          '<Line dataKey="value" dot={renderDot} />',
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  hide,
+  label: {
+    description: labelDescription,
+    table: {
+      type: {
+        summary: labelSummary,
+        detail:
+          '<Line dataKey="value" label />\n' +
+          "<Line dataKey=\"value\" label={{ fill: 'red', fontSize: 20 }} />\n" +
+          '<Line dataKey="value" label={<CustomizedLabel />} />\n' +
+          '<Line dataKey="value" label={renderLabel} />',
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  type: {
+    description: `The interpolation type of line. It's the same as type in Area.
+      And customized interpolation function can be set to type. https://github.com/d3/d3-shape#curves`,
+    default: "linear",
+    table: {
+      category: "Style",
+    },
+    control: "select",
+    options: [
+      "basis",
+      "basisClosed",
+      "basisOpen",
+      "bumpX",
+      "bumpY",
+      "bump",
+      "linear",
+      "linearClosed",
+      "natural",
+      "monotoneX",
+      "monotoneY",
+      "monotone",
+      "step",
+      "stepBefore",
+      "stepAfter",
+    ],
+  },
+};

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

@@ -0,0 +1,17 @@
+import { type ArgTypes } from "@storybook/react";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const lineChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+  layout: {
+    description: "The layout of line 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/pieArgs.ts

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

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

@@ -0,0 +1,7 @@
+import { type ArgTypes } from "@storybook/react";
+import { chartSizeArgs, margin } from "./chartArgs";
+
+export const pieChartArgs: ArgTypes = {
+  ...chartSizeArgs,
+  margin,
+};

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

@@ -0,0 +1,86 @@
+import { type ArgTypes } from "@storybook/react";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const polarChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+  cx: {
+    description: "The x-coordinate of the center of the circle.",
+    table: {
+      type: {
+        summary: "number | string",
+      },
+      defaultValue: {
+        summary: "50%",
+      },
+      category: "Polar",
+    },
+    control: "text",
+  },
+  cy: {
+    description: "The y-coordinate of the center of the circle.",
+    table: {
+      type: {
+        summary: "number | string",
+      },
+      defaultValue: {
+        summary: "50%",
+      },
+      category: "Polar",
+    },
+    control: "text",
+  },
+  innerRadius: {
+    description: "The inner radius of polar chart.",
+
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+      category: "Polar",
+    },
+    control: "number",
+  },
+  outerRadius: {
+    description: "The outer radius of polar chart.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "80%",
+      },
+      category: "Polar",
+    },
+    control: "number",
+  },
+  startAngle: {
+    description: "The start angle of polar chart.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "90",
+      },
+      category: "Polar",
+    },
+    control: "number",
+  },
+  endAngle: {
+    description: "The end angle of polar chart.",
+    defaultValue: -270,
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "-270",
+      },
+      category: "Polar",
+    },
+    control: "number",
+  },
+};

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

@@ -0,0 +1,42 @@
+import { type ArgTypes } from "@storybook/react";
+import { dataKey } from "./cartesianSharedArgs";
+
+export const polarSharedArgs: ArgTypes = {
+  data: {
+    table: {
+      category: "Internal",
+    },
+  },
+  angleAxisId: {
+    description: "The id of angle axis which is corresponding to the data.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  stackId: {
+    description:
+      "The stack id of bar, when two bars have the same stackId, then two bars are stacked in order.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  radiusAxisId: {
+    description: "The id of radius axis which is corresponding to the data.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  dataKey,
+};

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

@@ -0,0 +1,26 @@
+import { type ArgTypes } from "@storybook/react";
+import { sharedAxisArgs } from "./sharedAxisArgs";
+
+export const radarArgs: ArgTypes = {
+  ...sharedAxisArgs,
+  cx: {
+    description: "The x-coordinate of the center of the circle.",
+    defaultValue: "50%",
+    table: {
+      type: {
+        summary: "number | string",
+      },
+      category: "Polar",
+    },
+  },
+  cy: {
+    description: "The y-coordinate of the center of the circle.",
+    defaultValue: "50%",
+    table: {
+      type: {
+        summary: "number | string",
+      },
+      category: "Polar",
+    },
+  },
+};

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

@@ -0,0 +1,26 @@
+import { type ArgTypes } from "@storybook/react";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const radarChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+  cx: {
+    description: "The x-coordinate of the center of the circle.",
+    defaultValue: "50%",
+    table: {
+      type: {
+        summary: "number | string",
+      },
+      category: "Polar",
+    },
+  },
+  cy: {
+    description: "The y-coordinate of the center of the circle.",
+    defaultValue: "50%",
+    table: {
+      type: {
+        summary: "number | string",
+      },
+      category: "Polar",
+    },
+  },
+};

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

@@ -0,0 +1,36 @@
+import { type ArgTypes } from "@storybook/react";
+import { animationArgs } from "./animationArgs";
+import { dataKey } from "./chartArgs";
+import { eventArgs } from "./events";
+import { legendType } from "./legendArgs";
+import { polarSharedArgs } from "./polarSharedArgs";
+import { radialBarStyleArgs } from "./stylesArgs";
+import { tooltipType } from "./tooltipArgs";
+
+export const radialBarArgs: ArgTypes = {
+  dataKey,
+  tooltipType,
+  ...eventArgs,
+  ...animationArgs,
+  legendType,
+  ...polarSharedArgs,
+  ...radialBarStyleArgs,
+  // Deprecated
+  dangerouslySetInnerHTML: {
+    table: {
+      category: "Deprecated",
+    },
+    hide: true,
+    disable: true,
+  },
+  startAngle: {
+    table: { category: "Deprecated" },
+    hide: true,
+    disable: true,
+  },
+  endAngle: {
+    table: { category: "Deprecated" },
+    hide: true,
+    disable: true,
+  },
+};

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

@@ -0,0 +1,16 @@
+import { type ArgTypes } from "@storybook/react";
+import { barChartArgs } from "./barChartArgs";
+import { polarChartArgs } from "./polarChartArgs";
+
+export const radialBarChartArgs: ArgTypes = {
+  ...barChartArgs,
+  ...polarChartArgs,
+  startAngle: {
+    ...polarChartArgs.startAngle,
+    defaultValue: 0,
+  },
+  endAngle: {
+    ...polarChartArgs.endAngle,
+    defaultValue: 360,
+  },
+};

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

@@ -0,0 +1,35 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const radius: ArgTypes[0] = {
+  description:
+    "If set a value, the option is the radius of all the rounderd corners. If set a array, the option" +
+    " are in turn the radiuses of top-left corner, top-right corner, bottom-right corner, bottom-left" +
+    " corner.",
+  table: {
+    type: {
+      summary: "number | number[]",
+    },
+    defaultValue: {
+      summary: "0",
+    },
+    category: "Style",
+  },
+  control: "object",
+};
+
+export const isUpdateAnimationActive: ArgTypes[0] = {
+  description: "If set false, animation of component updates will be disabled.",
+  table: {
+    category: "Animation",
+  },
+};
+
+/**
+ * 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 rectangleArgs: ArgTypes = {
+  radius,
+  isUpdateAnimationActive,
+};

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

@@ -0,0 +1,75 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const referenceStyleArgs: ArgTypes = {
+  ifOverflow: {
+    description: `Defines how to draw the reference component if it falls partly outside the canvas.
+    If set to 'discard', the reference component will not be drawn at all. If set to 'hidden', the
+    reference component will be clipped to the canvas. If set to 'visible', the reference component
+    will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be
+    extended such that the reference component fits into the canvas.`,
+    table: {
+      type: {
+        summary: "'discard' | 'hidden' | 'visible' | 'extendDomain'",
+      },
+      category: "Style",
+    },
+    defaultValue: "discard",
+  },
+};
+
+export const referenceGeneralArgs: ArgTypes = {
+  xAxisId: {
+    description: "The id of x-axis which is corresponding to the data.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  yAxisId: {
+    description: "The id of y-axis which is corresponding to the data.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+};
+
+export const referenceInternalArgs: ArgTypes = {
+  xAxis: {
+    description: "The configuration of the corresponding x-axis, usually calculated internally.",
+    table: {
+      type: {
+        summary: "Object",
+      },
+      category: "Internal",
+    },
+    control: "object",
+  },
+  yAxis: {
+    description: "The configuration of the corresponding y-axis, usually calculated internally.",
+    table: {
+      type: {
+        summary: "Object",
+      },
+      category: "Internal",
+    },
+    control: "object",
+  },
+  clipPathId: {
+    description: `Used as the id for the clip path which is used to clip the reference component if
+    'ifOverflow' is set to 'hidden'"`,
+    table: {
+      type: {
+        summary: "number | string",
+      },
+      category: "Internal",
+    },
+    control: "text",
+  },
+};