@mbao01/common 0.0.44 → 0.0.46

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

@@ -0,0 +1,343 @@
+/*
+ * 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 onAbort = { table: { category: "EventHandlers" } };
+export const onAbortCapture = { table: { category: "EventHandlers" } };
+export const onAnimationEnd = {
+  table: {
+    category: "EventHandlers",
+    description: "The customized event handler of animation end",
+  },
+};
+export const onAnimationEndCapture = { table: { category: "EventHandlers" } };
+export const onAnimationIteration = { table: { category: "EventHandlers" } };
+export const onAnimationIterationCapture = { table: { category: "EventHandlers" } };
+export const onAnimationStart = {
+  table: {
+    description: "The customized event handler of animation start",
+    category: "EventHandlers",
+  },
+};
+export const onAnimationStartCapture = { table: { category: "EventHandlers" } };
+export const onAuxClick = { table: { category: "EventHandlers" } };
+export const onAuxClickCapture = { table: { category: "EventHandlers" } };
+export const onBeforeInput = { table: { category: "EventHandlers" } };
+export const onBeforeInputCapture = { table: { category: "EventHandlers" } };
+export const onBlur = { table: { category: "EventHandlers" } };
+export const onBlurCapture = { table: { category: "EventHandlers" } };
+export const onCanPlay = { table: { category: "EventHandlers" } };
+export const onCanPlayCapture = { table: { category: "EventHandlers" } };
+export const onCanPlayThrough = { table: { category: "EventHandlers" } };
+export const onCanPlayThroughCapture = { table: { category: "EventHandlers" } };
+export const onChange = { table: { category: "EventHandlers" } };
+export const onChangeCapture = { table: { category: "EventHandlers" } };
+export const onClick = { table: { category: "EventHandlers" } };
+export const onClickCapture = { table: { category: "EventHandlers" } };
+export const onCompositionEnd = { table: { category: "EventHandlers" } };
+export const onCompositionEndCapture = { table: { category: "EventHandlers" } };
+export const onCompositionStart = { table: { category: "EventHandlers" } };
+export const onCompositionStartCapture = { table: { category: "EventHandlers" } };
+export const onCompositionUpdate = { table: { category: "EventHandlers" } };
+export const onCompositionUpdateCapture = { table: { category: "EventHandlers" } };
+export const onContextMenu = { table: { category: "EventHandlers" } };
+export const onContextMenuCapture = { table: { category: "EventHandlers" } };
+export const onCopy = { table: { category: "EventHandlers" } };
+export const onCopyCapture = { table: { category: "EventHandlers" } };
+export const onCut = { table: { category: "EventHandlers" } };
+export const onCutCapture = { table: { category: "EventHandlers" } };
+export const onDoubleClick = { table: { category: "EventHandlers" } };
+export const onDoubleClickCapture = { table: { category: "EventHandlers" } };
+export const onDrag = { table: { category: "EventHandlers" } };
+export const onDragCapture = { table: { category: "EventHandlers" } };
+export const onDragEnd = { table: { category: "EventHandlers" } };
+export const onDragEndCapture = { table: { category: "EventHandlers" } };
+export const onDragEnter = { table: { category: "EventHandlers" } };
+export const onDragEnterCapture = { table: { category: "EventHandlers" } };
+export const onDragExit = { table: { category: "EventHandlers" } };
+export const onDragExitCapture = { table: { category: "EventHandlers" } };
+export const onDragLeave = { table: { category: "EventHandlers" } };
+export const onDragLeaveCapture = { table: { category: "EventHandlers" } };
+export const onDragOver = { table: { category: "EventHandlers" } };
+export const onDragOverCapture = { table: { category: "EventHandlers" } };
+export const onDragStart = { table: { category: "EventHandlers" } };
+export const onDragStartCapture = { table: { category: "EventHandlers" } };
+export const onDrop = { table: { category: "EventHandlers" } };
+export const onDropCapture = { table: { category: "EventHandlers" } };
+export const onDurationChange = { table: { category: "EventHandlers" } };
+export const onDurationChangeCapture = { table: { category: "EventHandlers" } };
+export const onEmptied = { table: { category: "EventHandlers" } };
+export const onEmptiedCapture = { table: { category: "EventHandlers" } };
+export const onEncrypted = { table: { category: "EventHandlers" } };
+export const onEncryptedCapture = { table: { category: "EventHandlers" } };
+export const onEnded = { table: { category: "EventHandlers" } };
+export const onEndedCapture = { table: { category: "EventHandlers" } };
+export const onError = { table: { category: "EventHandlers" } };
+export const onErrorCapture = { table: { category: "EventHandlers" } };
+export const onFocus = { table: { category: "EventHandlers" } };
+export const onFocusCapture = { table: { category: "EventHandlers" } };
+export const onGotPointerCapture = { table: { category: "EventHandlers" } };
+export const onGotPointerCaptureCapture = { table: { category: "EventHandlers" } };
+export const onInput = { table: { category: "EventHandlers" } };
+export const onInputCapture = { table: { category: "EventHandlers" } };
+export const onInvalid = { table: { category: "EventHandlers" } };
+export const onInvalidCapture = { table: { category: "EventHandlers" } };
+export const onKeyDown = { table: { category: "EventHandlers" } };
+export const onKeyDownCapture = { table: { category: "EventHandlers" } };
+export const onKeyPress = { table: { category: "EventHandlers" } };
+export const onKeyPressCapture = { table: { category: "EventHandlers" } };
+export const onKeyUp = { table: { category: "EventHandlers" } };
+export const onKeyUpCapture = { table: { category: "EventHandlers" } };
+export const onLoad = { table: { category: "EventHandlers" } };
+export const onLoadCapture = { table: { category: "EventHandlers" } };
+export const onLoadStart = { table: { category: "EventHandlers" } };
+export const onLoadStartCapture = { table: { category: "EventHandlers" } };
+export const onLoadedData = { table: { category: "EventHandlers" } };
+export const onLoadedDataCapture = { table: { category: "EventHandlers" } };
+export const onLoadedMetadata = { table: { category: "EventHandlers" } };
+export const onLoadedMetadataCapture = { table: { category: "EventHandlers" } };
+export const onLostPointerCapture = { table: { category: "EventHandlers" } };
+export const onLostPointerCaptureCapture = { table: { category: "EventHandlers" } };
+export const onMouseDown = { table: { category: "EventHandlers" } };
+export const onMouseDownCapture = { table: { category: "EventHandlers" } };
+export const onMouseEnter = { table: { category: "EventHandlers" } };
+export const onMouseLeave = { table: { category: "EventHandlers" } };
+export const onMouseMove = { table: { category: "EventHandlers" } };
+export const onMouseMoveCapture = { table: { category: "EventHandlers" } };
+export const onMouseOut = { table: { category: "EventHandlers" } };
+export const onMouseOutCapture = { table: { category: "EventHandlers" } };
+export const onMouseOver = { table: { category: "EventHandlers" } };
+export const onMouseOverCapture = { table: { category: "EventHandlers" } };
+export const onMouseUp = { table: { category: "EventHandlers" } };
+export const onMouseUpCapture = { table: { category: "EventHandlers" } };
+export const onPaste = { table: { category: "EventHandlers" } };
+export const onPasteCapture = { table: { category: "EventHandlers" } };
+export const onPause = { table: { category: "EventHandlers" } };
+export const onPauseCapture = { table: { category: "EventHandlers" } };
+export const onPlay = { table: { category: "EventHandlers" } };
+export const onPlayCapture = { table: { category: "EventHandlers" } };
+export const onPlaying = { table: { category: "EventHandlers" } };
+export const onPlayingCapture = { table: { category: "EventHandlers" } };
+export const onPointerCancel = { table: { category: "EventHandlers" } };
+export const onPointerCancelCapture = { table: { category: "EventHandlers" } };
+export const onPointerDown = { table: { category: "EventHandlers" } };
+export const onPointerDownCapture = { table: { category: "EventHandlers" } };
+export const onPointerEnter = { table: { category: "EventHandlers" } };
+export const onPointerEnterCapture = { table: { category: "EventHandlers" } };
+export const onPointerLeave = { table: { category: "EventHandlers" } };
+export const onPointerLeaveCapture = { table: { category: "EventHandlers" } };
+export const onPointerMove = { table: { category: "EventHandlers" } };
+export const onPointerMoveCapture = { table: { category: "EventHandlers" } };
+export const onPointerOut = { table: { category: "EventHandlers" } };
+export const onPointerOutCapture = { table: { category: "EventHandlers" } };
+export const onPointerOver = { table: { category: "EventHandlers" } };
+export const onPointerOverCapture = { table: { category: "EventHandlers" } };
+export const onPointerUp = { table: { category: "EventHandlers" } };
+export const onPointerUpCapture = { table: { category: "EventHandlers" } };
+export const onProgress = { table: { category: "EventHandlers" } };
+export const onProgressCapture = { table: { category: "EventHandlers" } };
+export const onRateChange = { table: { category: "EventHandlers" } };
+export const onRateChangeCapture = { table: { category: "EventHandlers" } };
+export const onReset = { table: { category: "EventHandlers" } };
+export const onResetCapture = { table: { category: "EventHandlers" } };
+export const onScroll = { table: { category: "EventHandlers" } };
+export const onScrollCapture = { table: { category: "EventHandlers" } };
+export const onSeeked = { table: { category: "EventHandlers" } };
+export const onSeekedCapture = { table: { category: "EventHandlers" } };
+export const onSeeking = { table: { category: "EventHandlers" } };
+export const onSeekingCapture = { table: { category: "EventHandlers" } };
+export const onSelect = { table: { category: "EventHandlers" } };
+export const onSelectCapture = { table: { category: "EventHandlers" } };
+export const onStalled = { table: { category: "EventHandlers" } };
+export const onStalledCapture = { table: { category: "EventHandlers" } };
+export const onSubmit = { table: { category: "EventHandlers" } };
+export const onSubmitCapture = { table: { category: "EventHandlers" } };
+export const onSuspend = { table: { category: "EventHandlers" } };
+export const onSuspendCapture = { table: { category: "EventHandlers" } };
+export const onTimeUpdate = { table: { category: "EventHandlers" } };
+export const onTimeUpdateCapture = { table: { category: "EventHandlers" } };
+export const onTouchCancel = { table: { category: "EventHandlers" } };
+export const onTouchCancelCapture = { table: { category: "EventHandlers" } };
+export const onTouchEnd = { table: { category: "EventHandlers" } };
+export const onTouchEndCapture = { table: { category: "EventHandlers" } };
+export const onTouchMove = { table: { category: "EventHandlers" } };
+export const onTouchMoveCapture = { table: { category: "EventHandlers" } };
+export const onTouchStart = { table: { category: "EventHandlers" } };
+export const onTouchStartCapture = { table: { category: "EventHandlers" } };
+export const onTransitionEnd = { table: { category: "EventHandlers" } };
+export const onTransitionEndCapture = { table: { category: "EventHandlers" } };
+export const onVolumeChange = { table: { category: "EventHandlers" } };
+export const onVolumeChangeCapture = { table: { category: "EventHandlers" } };
+export const onWaiting = { table: { category: "EventHandlers" } };
+export const onWaitingCapture = { table: { category: "EventHandlers" } };
+export const onWheel = { table: { category: "EventHandlers" } };
+export const onWheelCapture = { table: { category: "EventHandlers" } };
+
+// 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 eventArgs: ArgTypes = {
+  onAbort,
+  onAbortCapture,
+  onAnimationEnd,
+  onAnimationEndCapture,
+  onAnimationIteration,
+  onAnimationIterationCapture,
+  onAnimationStart,
+  onAnimationStartCapture,
+  onAuxClick,
+  onAuxClickCapture,
+  onBeforeInput,
+  onBeforeInputCapture,
+  onBlur,
+  onBlurCapture,
+  onCanPlay,
+  onCanPlayCapture,
+  onCanPlayThrough,
+  onCanPlayThroughCapture,
+  onChange,
+  onChangeCapture,
+  onClick,
+  onClickCapture,
+  onCompositionEnd,
+  onCompositionEndCapture,
+  onCompositionStart,
+  onCompositionStartCapture,
+  onCompositionUpdate,
+  onCompositionUpdateCapture,
+  onContextMenu,
+  onContextMenuCapture,
+  onCopy,
+  onCopyCapture,
+  onCut,
+  onCutCapture,
+  onDoubleClick,
+  onDoubleClickCapture,
+  onDrag,
+  onDragCapture,
+  onDragEnd,
+  onDragEndCapture,
+  onDragEnter,
+  onDragEnterCapture,
+  onDragExit,
+  onDragExitCapture,
+  onDragLeave,
+  onDragLeaveCapture,
+  onDragOver,
+  onDragOverCapture,
+  onDragStart,
+  onDragStartCapture,
+  onDrop,
+  onDropCapture,
+  onDurationChange,
+  onDurationChangeCapture,
+  onEmptied,
+  onEmptiedCapture,
+  onEncrypted,
+  onEncryptedCapture,
+  onEnded,
+  onEndedCapture,
+  onError,
+  onErrorCapture,
+  onFocus,
+  onFocusCapture,
+  onGotPointerCapture,
+  onGotPointerCaptureCapture,
+  onInput,
+  onInputCapture,
+  onInvalid,
+  onInvalidCapture,
+  onKeyDown,
+  onKeyDownCapture,
+  onKeyPress,
+  onKeyPressCapture,
+  onKeyUp,
+  onKeyUpCapture,
+  onLoad,
+  onLoadCapture,
+  onLoadStart,
+  onLoadStartCapture,
+  onLoadedData,
+  onLoadedDataCapture,
+  onLoadedMetadata,
+  onLoadedMetadataCapture,
+  onLostPointerCapture,
+  onLostPointerCaptureCapture,
+  onMouseDown,
+  onMouseDownCapture,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseMoveCapture,
+  onMouseOut,
+  onMouseOutCapture,
+  onMouseOver,
+  onMouseOverCapture,
+  onMouseUp,
+  onMouseUpCapture,
+  onPaste,
+  onPasteCapture,
+  onPause,
+  onPauseCapture,
+  onPlay,
+  onPlayCapture,
+  onPlaying,
+  onPlayingCapture,
+  onPointerCancel,
+  onPointerCancelCapture,
+  onPointerDown,
+  onPointerDownCapture,
+  onPointerEnter,
+  onPointerEnterCapture,
+  onPointerLeave,
+  onPointerLeaveCapture,
+  onPointerMove,
+  onPointerMoveCapture,
+  onPointerOut,
+  onPointerOutCapture,
+  onPointerOver,
+  onPointerOverCapture,
+  onPointerUp,
+  onPointerUpCapture,
+  onProgress,
+  onProgressCapture,
+  onRateChange,
+  onRateChangeCapture,
+  onReset,
+  onResetCapture,
+  onScroll,
+  onScrollCapture,
+  onSeeked,
+  onSeekedCapture,
+  onSeeking,
+  onSeekingCapture,
+  onSelect,
+  onSelectCapture,
+  onStalled,
+  onStalledCapture,
+  onSubmit,
+  onSubmitCapture,
+  onSuspend,
+  onSuspendCapture,
+  onTimeUpdate,
+  onTimeUpdateCapture,
+  onTouchCancel,
+  onTouchCancelCapture,
+  onTouchEnd,
+  onTouchEndCapture,
+  onTouchMove,
+  onTouchMoveCapture,
+  onTouchStart,
+  onTouchStartCapture,
+  onTransitionEnd,
+  onTransitionEndCapture,
+  onVolumeChange,
+  onVolumeChangeCapture,
+  onWaiting,
+  onWaitingCapture,
+  onWheel,
+  onWheelCapture,
+};

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

@@ -0,0 +1,178 @@
+import type {
+  AreaProps,
+  BarProps,
+  LineProps,
+  PieProps,
+  RadarProps,
+  RadialBarProps,
+  XAxisProps,
+  YAxisProps,
+} from "recharts";
+import { type ArgTypes } from "@storybook/react";
+import { type CategoricalChartProps } from "recharts/types/chart/generateCategoricalChart";
+import type { Flatten } from "./types";
+import { categorizeArgs } from "../helpers";
+import { areaArgs } from "./areaArgs";
+import { areaChartArgs as areaChartComponentArgs } from "./areaChartArgs";
+import { barArgs } from "./barArgs";
+import { barChartArgs as barChartComponentArgs } from "./barChartArgs";
+import { lineArgs } from "./lineArgs";
+import { lineChartArgs as lineChartComponentArgs } from "./lineChartArgs";
+import { pieArgs } from "./pieArgs";
+import { pieChartArgs as pieChartComponentArgs } from "./pieChartArgs";
+import { radarArgs } from "./radarArgs";
+import { radarChartArgs as radarChartComponentArgs } from "./radarChartArgs";
+import { radialBarArgs } from "./radialBarArgs";
+import { radialBarChartArgs as radialBarChartComponentArgs } from "./radialBarChartArgs";
+import { OmitSVGElement } from "./types";
+import { xAxisArgs } from "./xAxisArgs";
+import { yAxisArgs } from "./yAxisArgs";
+
+type AxisProps = {
+  xAxis: OmitSVGElement<XAxisProps>;
+  yAxis: OmitSVGElement<YAxisProps>;
+};
+
+/**
+ * Bar chart
+ */
+type BarArgKey = "bar" | "barChart" | "xAxis" | "yAxis";
+
+export type BarChartProps = {
+  bar: OmitSVGElement<BarProps>;
+  barChart: CategoricalChartProps;
+} & AxisProps;
+
+export type BarChartArgs = Partial<Flatten<BarChartProps>> & {};
+
+const barArgKey = {
+  bar: "bar",
+  barChart: "barChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, BarArgKey>;
+
+export const barChartArgs = {
+  ...categorizeArgs(barChartComponentArgs, barArgKey.barChart),
+  ...categorizeArgs(xAxisArgs, barArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, barArgKey.yAxis),
+  ...categorizeArgs(barArgs, barArgKey.bar),
+} satisfies ArgTypes;
+
+/**
+ * Line chart
+ */
+type LineArgKey = "line" | "lineChart" | "xAxis" | "yAxis";
+
+export type LineChartProps = {
+  line: OmitSVGElement<LineProps>;
+  lineChart: CategoricalChartProps;
+} & AxisProps;
+
+export type LineChartArgs = Partial<Flatten<LineChartProps>> & {};
+
+const lineArgKey = {
+  line: "line",
+  lineChart: "lineChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, LineArgKey>;
+
+export const lineChartArgs = {
+  ...categorizeArgs(lineChartComponentArgs, lineArgKey.lineChart),
+  ...categorizeArgs(xAxisArgs, lineArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, lineArgKey.yAxis),
+  ...categorizeArgs(lineArgs, lineArgKey.line),
+} satisfies ArgTypes;
+
+/**
+ * Area chart
+ */
+type AreaArgKey = "area" | "areaChart" | "xAxis" | "yAxis";
+
+export type AreaChartProps = {
+  area: OmitSVGElement<AreaProps>;
+  areaChart: CategoricalChartProps;
+} & AxisProps;
+
+export type AreaChartArgs = Partial<Flatten<AreaChartProps>> & {};
+
+export const areaArgKey = {
+  area: "area",
+  areaChart: "areaChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, AreaArgKey>;
+
+export const areaChartArgs = {
+  ...categorizeArgs(areaChartComponentArgs, areaArgKey.areaChart),
+  ...categorizeArgs(xAxisArgs, areaArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, areaArgKey.yAxis),
+  ...categorizeArgs(areaArgs, areaArgKey.area),
+} satisfies ArgTypes;
+
+/**
+ * Pie chart
+ */
+type PieArgKey = "pie" | "pieChart";
+
+export type PieChartProps = {
+  pie: OmitSVGElement<PieProps>;
+  pieChart: CategoricalChartProps;
+};
+
+export type PieChartArgs = Partial<Flatten<PieChartProps>> & {};
+
+export const pieArgKey = {
+  pie: "pie",
+  pieChart: "pieChart",
+} satisfies Record<string, PieArgKey>;
+
+export const pieChartArgs = {
+  ...categorizeArgs(pieChartComponentArgs, pieArgKey.pieChart),
+  ...categorizeArgs(pieArgs, pieArgKey.pie),
+} satisfies ArgTypes;
+
+/**
+ * RadialBar chart
+ */
+type RadialBarArgKey = "radialBar" | "radialBarChart";
+
+export type RadialBarChartProps = {
+  radialBar: OmitSVGElement<RadialBarProps>;
+  radialBarChart: CategoricalChartProps;
+};
+
+export type RadialBarChartArgs = Partial<Flatten<RadialBarChartProps>> & {};
+
+export const radialBarArgKey = {
+  radialBar: "radialBar",
+  radialBarChart: "radialBarChart",
+} satisfies Record<string, RadialBarArgKey>;
+
+export const radialBarChartArgs = {
+  ...categorizeArgs(radialBarChartComponentArgs, radialBarArgKey.radialBarChart),
+  ...categorizeArgs(radialBarArgs, radialBarArgKey.radialBar),
+} satisfies ArgTypes;
+
+/**
+ * Radar chart
+ */
+type RadarArgKey = "radar" | "radarChart";
+
+export type RadarChartProps = {
+  radar: OmitSVGElement<RadarProps>;
+  radarChart: CategoricalChartProps;
+};
+
+export type RadarChartArgs = Partial<Flatten<RadarChartProps>> & {};
+
+export const radarArgKey = {
+  radar: "radar",
+  radarChart: "radarChart",
+} satisfies Record<string, RadarArgKey>;
+
+export const radarChartArgs = {
+  ...categorizeArgs(radarChartComponentArgs, radarArgKey.radarChart),
+  ...categorizeArgs(radarArgs, radarArgKey.radar),
+} satisfies ArgTypes;

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

@@ -0,0 +1,124 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const labelListArgs: ArgTypes = {
+  dataKey: {
+    description: "The key of a group of label values in data.",
+    table: {
+      type: {
+        summary: "String | Number | Function",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  valueAccessor: {
+    description: "The accessor function to get the value of each label.",
+    table: {
+      category: "General",
+    },
+  },
+  content: {
+    description:
+      "If set a React element, the option is the customized react element of rendering each label. " +
+      "If set a function, the function will be called to render each label content.",
+    defaultValue: null,
+    table: {
+      category: "General",
+      type: {
+        summary: "ReactElement | Function",
+        detail:
+          "<Label content={<CustomizedLabel external={external} />} />\n<Label content={renderLabel} />",
+      },
+    },
+  },
+  position: {
+    description: "The position of each label relative to it view box.",
+    table: {
+      type: {
+        summary: `'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside' | 'insideLeft' |
+          'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' |
+          'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight' |
+          'insideStart' | 'insideEnd' | 'end' | 'center' | 'centerTop' | 'centerBottom' | 'middle'`,
+      },
+      category: "General",
+    },
+    control: "select",
+    options: [
+      "top",
+      "left",
+      "right",
+      "bottom",
+      "inside",
+      "outside",
+      "insideLeft",
+      "insideRight",
+      "insideTop",
+      "insideBottom",
+      "insideTopLeft",
+      "insideBottomLeft",
+      "insideTopRight",
+      "insideBottomRight",
+      "insideStart",
+      "insideEnd",
+      "end",
+      "center",
+      "centerTop",
+      "centerBottom",
+      "middle",
+    ],
+  },
+  offset: {
+    description: 'The offset to the specified "position"',
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "5",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  formatter: {
+    description:
+      "The formatter function of label value which has only one parameter - the value of label.",
+    table: {
+      type: {
+        summary: "Function",
+      },
+      category: "General",
+    },
+  },
+  data: {
+    description: "The data input to the charts.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "5",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  clockWise: {
+    description: "The parameter to calculate the view box of label in radial charts.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  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.",
+    table: {
+      category: "General",
+    },
+  },
+};