@mbao01/common 0.0.43 → 0.0.45

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

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

@@ -0,0 +1,106 @@
+import { type ArgTypes } from "@storybook/react";
+
+/**
+ * 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 sectorArgs: ArgTypes = {
+  cx: {
+    description: "The x-coordinate of center.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+    },
+    control: "number",
+  },
+  cy: {
+    description: "The y-coordinate of center.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+    },
+    control: "number",
+  },
+  innerRadius: {
+    description: "The inner radius of the sector.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+    },
+    control: "number",
+  },
+  outerRadius: {
+    description: "The outer radius of the sector.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+    },
+    control: "number",
+  },
+  startAngle: {
+    description: "The start angle of the sector.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+    },
+    control: "number",
+  },
+  endAngle: {
+    description: "The end angle of the sector.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+    },
+    control: "number",
+  },
+  cornerRadius: {
+    description: "The radius of corners.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+    },
+    control: "number",
+  },
+  forceCornerRadius: {
+    description:
+      "Whether or not force to render round corner when the angle of sector is very small",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+    },
+    control: "boolean",
+  },
+};