@mbao01/common 0.0.44 → 0.0.46

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

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

@@ -0,0 +1,332 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const sharedAxisArgs: ArgTypes = {
+  hide: {
+    description: "If set true, the axis do not display in the chart.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  includeHidden: {
+    description: "Consider hidden graphical elements when computing domain.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Domain",
+    },
+    control: "boolean",
+  },
+  dataKey: {
+    description: "The key of data displayed in the axis.",
+    table: {
+      type: {
+        summary: "string | number | Function",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  allowDecimals: {
+    description: "Allow the ticks to be decimals or not.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "Ticks",
+    },
+    control: "boolean",
+  },
+  allowDataOverflow: {
+    description: `When domain of the axis is specified and the type of the axis is 'number',
+      if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value
+      of data is smaller than domain[0] or the maximum value of data is greater than domain[1]
+      so that the axis displays all data values. If set to true, graphic elements (line, area, bars)
+      will be clipped to conform to the specified domain.`,
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Domain",
+    },
+    control: "boolean",
+  },
+  allowDuplicatedCategory: {
+    description:
+      'Allow the axis has duplicated categories or not when the type of axis is "category".',
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "Domain",
+    },
+    control: "boolean",
+  },
+  angle: {
+    description: "The angle of axis ticks.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+      category: "Ticks",
+    },
+    control: "number",
+  },
+  tickCount: {
+    description: "The count of axis ticks. Not used if 'type' is 'category'.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "5",
+      },
+      category: "Ticks",
+    },
+    control: "number",
+  },
+  domain: {
+    description: `Specify the domain of axis when the axis is a number axis. The length of domain should be 2,
+      and we will validate the values in domain. And each element in the array can be a number,
+      'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function
+      that accepts a single argument and returns a number. If any element of domain is set to be
+      'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated
+      by the ticks. If a function, receives '[dataMin, dataMax]', and must return a computed domain
+      as '[min, max]'.`,
+    table: {
+      type: {
+        summary: "Array | Function",
+      },
+      defaultValue: {
+        summary: "[0, 'auto']",
+      },
+      category: "Domain",
+    },
+    control: "object",
+  },
+  interval: {
+    description: `If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd",
+      the ticks which is to be shown or hidden will be calculated automatically.`,
+    table: {
+      type: {
+        summary: '"preserveStart" | "preserveEnd" | "preserveStartEnd" | number',
+      },
+      defaultValue: {
+        summary: "'preserveEnd'",
+      },
+      category: "Ticks",
+    },
+    control: "radio",
+    options: ["preserveStart", "preserveEnd", "preserveStartEnd"],
+  },
+  minTickGap: {
+    description: "The minimum gap between two adjacent labels.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "5",
+      },
+      category: "Ticks",
+    },
+    control: "number",
+  },
+  axisLine: {
+    description:
+      "If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.",
+    table: {
+      type: {
+        summary: "boolean | object",
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  tickLine: {
+    description:
+      "If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.",
+    table: {
+      type: {
+        summary: "boolean | object",
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "Ticks",
+    },
+    control: "boolean",
+  },
+  tickSize: {
+    description: "The length of tick line.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "6",
+      },
+      category: "Ticks",
+    },
+    control: "number",
+  },
+  tickFormatter: {
+    description: "The formatter function of tick.",
+    table: {
+      type: {
+        summary: "Function",
+      },
+      category: "Ticks",
+    },
+    control: "object",
+  },
+  ticks: {
+    description: "Set the values of axis ticks manually.",
+    table: {
+      type: {
+        summary: "Array",
+      },
+      category: "Ticks",
+    },
+    control: "object",
+  },
+  tick: {
+    description: `If set false, no ticks will be drawn. If set a object, the option is the configuration of ticks.
+      If set a React element, the option is the custom react element of drawing ticks.`,
+    table: {
+      type: {
+        summary: "boolean | object | ReactElement",
+      },
+      category: "Ticks",
+    },
+    control: "object",
+  },
+  mirror: {
+    description:
+      "If set true, flips ticks around the horizontal axis line, displaying the labels inside the chart instead of outside.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  reversed: {
+    description: "Reverses ticks left-to-right.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  label: {
+    description: `If set a string or a number, default label will be drawn, and the option is content.
+      If set a React element, the option is the custom react element of drawing label.
+      If an object, the option is the props of a new Label instance.`,
+    table: {
+      type: {
+        summary: "string | number | ReactElement | object",
+      },
+      category: "General",
+    },
+    control: "object",
+  },
+  scale: {
+    description: `If set to 'auto', the scale function is decided by the type of chart, and the props type.
+      \nWhen set to 'time', make sure to also set type to 'number' and to include a domain.`,
+    table: {
+      type: {
+        summary: `'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' |
+          'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function`,
+      },
+      defaultValue: {
+        summary: "'auto'",
+      },
+      category: "General",
+    },
+    control: "select",
+    options: [
+      "auto",
+      "linear",
+      "pow",
+      "sqrt",
+      "log",
+      "identity",
+      "time",
+      "band",
+      "point",
+      "ordinal",
+      "quantile",
+      "quantize",
+      "utc",
+      "sequential",
+      "threshold",
+    ],
+  },
+  unit: {
+    description:
+      "The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  name: {
+    description:
+      "The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  tickMargin: {
+    description: "The margin between tick line and tick.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+};

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

@@ -0,0 +1,258 @@
+import type { Args, ArgTypes } from "@storybook/react";
+
+export const hide: ArgTypes[0] = {
+  description: "Hides the component when true, useful when toggling visibility state via legend",
+  type: {
+    name: "boolean",
+  },
+  table: {
+    category: "Style",
+    defaultValue: {
+      summary: "false",
+    },
+  },
+  control: "boolean",
+};
+
+export const generalStyleArgs: ArgTypes = {
+  fill: {
+    table: {
+      category: "Style",
+    },
+    control: "color",
+  },
+  stroke: {
+    table: {
+      category: "Style",
+    },
+    control: "color",
+  },
+  strokeDasharray: {
+    description: `The pattern of dashes and gaps used to paint the line.
+      https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray`,
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "Style",
+    },
+    control: "text",
+  },
+  strokeWidth: {
+    description: "The width of the stroke.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      defaultValue: {
+        summary: "1",
+      },
+      category: "Style",
+    },
+    control: "text",
+  },
+  strokeOpacity: {
+    description: "The opacity of the stroke.",
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      defaultValue: {
+        summary: "1",
+      },
+      category: "Style",
+    },
+    control: "text",
+  },
+};
+
+// These label props are use by radial bar as as well as line and area.
+export const labelDescription = `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 merged
+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.`;
+
+export const labelSummary = "boolean | Object | ReactElement | Function";
+
+// Currently these props are exclusive to radial bar.
+export const radialBarStyleArgs: Args = {
+  minPointSize: {
+    description: "The minimum angle of the radial bar.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+  label: {
+    description: labelDescription,
+    table: {
+      type: {
+        summary: labelSummary,
+        detail:
+          '<Bar dataKey="value" label />\n' +
+          "<Bar dataKey=\"value\" label={{ fill: '#333', fontSize: 15, position: 'insideStart' }} />\n" +
+          '<Bar dataKey="value" label={<CustomizedLabel />} />\n' +
+          '<Bar dataKey="value" label={renderLabel} />',
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+  // Object example is not included as the only props which seem to be supported
+  // are cx and cy which not seem to provide much value.
+  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 merged 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",
+        detail:
+          '<Bar dataKey="value" background />\n' +
+          '<Bar dataKey="value" background={<CustomizedBackground />} />\n' +
+          '<Bar dataKey="value" background={renderBackground} />',
+      },
+      defaultValue: false,
+      category: "Style",
+    },
+    control: "object",
+  },
+  cornerRadius: {
+    description: "The radius of the corner of the bar.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "0",
+      },
+      category: "Style",
+    },
+    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",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  cornerIsExternal: {
+    description: `If true the rounded corner will lie outside the RadialBar, by default the rounded
+        corner inside the length of the RadialBar`,
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  shape: {
+    description: "Custom shape for the bar.",
+    table: {
+      type: {
+        summary: "ReactElement | Function",
+        detail:
+          '<Bar dataKey="value" shape={<CustomizedShape />} />\n<Bar dataKey="value" shape={renderShape} />',
+      },
+      category: "Style",
+    },
+  },
+  hide,
+  activeShape: {
+    description: "The custom active shape.",
+    table: {
+      type: {
+        summary: "ReactElement | Function",
+        detail:
+          '<Bar dataKey="value" activeShape={<CustomizedActiveShape />} />\n' +
+          '<Bar dataKey="value" activeShape={renderActiveShape} />',
+      },
+      category: "Style",
+    },
+  },
+  activeIndex: {
+    description: "The index of the active bar, this option can be changed in mouse event handlers.",
+    table: {
+      type: {
+        summary: "number | number[]",
+        detail:
+          '<Bar dataKey="value" activeIndex={0} />\n<Bar dataKey="value" activeIndex={[0, 1]} />',
+      },
+      category: "Style",
+      control: "object",
+    },
+  },
+  maxBarSize: {
+    description: "The maximum width of the bar.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+  stroke: {
+    description: "The color of the stroke.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "Style",
+    },
+    control: "color",
+  },
+  strokeWidth: {
+    description: "The width of the stroke.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+  strokeOpacity: {
+    description: "The opacity of the stroke.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+  fillOpacity: {
+    description: "The opacity of the fill.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+};