docs(storybook): XAxis (#3348)

storybook/stories/API/cartesian/ReferenceArea.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Line, LineChart, ReferenceArea, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from '../../../../src';
-import { simpleUvPvData } from '../../data';
+import { pageData } from '../../data';
 
 export default {
   component: ReferenceArea,
@@ -41,14 +41,14 @@ export const Simple = {
     );
   },
   args: {
-    data: simpleUvPvData,
+    data: pageData,
   },
 };
 
 export const IfOverflow = {
   ...Simple,
   args: {
-    data: simpleUvPvData,
+    data: pageData,
     y1: 1890,
     y2: -1000,
   },

storybook/stories/API/cartesian/XAxis.stories.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from '../../../../src';
+import { coordinateWithValueData, dateWithValueData, pageData, timeData } from '../../data';
+
+export default {
+  component: XAxis,
+  argTypes: {
+    stroke: {
+      control: { type: 'color' },
+    },
+  },
+};
+
+export const Simple = {
+  render: (args: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width={500} height={500}>
+        <LineChart width={600} height={300} data={args.data}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          {args.secondLine}
+          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
+        </LineChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    data: pageData,
+  },
+};
+
+export const DoubleLine = {
+  ...Simple,
+  args: {
+    data: pageData,
+    secondLine: <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />,
+  },
+};
+
+const SingleLineChart = {
+  render: (args: Record<string, any>) => {
+    const { data, lineDataKey = 'uv', ...xAxisArgs } = args;
+
+    return (
+      <ResponsiveContainer width={500} height={500}>
+        <LineChart width={600} height={300} data={data}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" {...xAxisArgs} />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Line type="monotone" dataKey={lineDataKey} stroke="#82ca9d" />
+        </LineChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    data: pageData,
+  },
+};
+
+export const StringTypeData = {
+  ...SingleLineChart,
+  args: {
+    data: pageData,
+  },
+};
+
+export const NumberTypeData = {
+  ...SingleLineChart,
+  args: {
+    data: coordinateWithValueData,
+    dataKey: 'x',
+    type: 'number',
+    lineDataKey: 'y',
+  },
+};
+
+export const TimestampTypeData = {
+  ...SingleLineChart,
+  args: {
+    data: dateWithValueData,
+    dataKey: 'time',
+    domain: ['auto', 'auto'],
+    type: 'number',
+    lineDataKey: 'value',
+  },
+};
+
+export const DateTypeData = {
+  ...SingleLineChart,
+  args: {
+    data: timeData,
+    dataKey: 'x',
+    lineDataKey: 'y',
+  },
+};
+
+export const TickFormatterWithTimestamp = {
+  ...SingleLineChart,
+  args: {
+    data: dateWithValueData,
+    dataKey: 'time',
+    domain: ['auto', 'auto'],
+    scale: 'time',
+    type: 'number',
+    lineDataKey: 'value',
+    tickFormatter: (value: number) =>
+      new Date(value).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+      }),
+  },
+};
+
+export const TickFormatterWithRotation = {
+  ...SingleLineChart,
+  args: {
+    data: pageData,
+    tickMargin: 20,
+    angle: 45,
+  },
+  parameters: {
+    controls: {
+      include: ['data', 'angle', 'tickMargin'],
+    },
+  },
+};
+
+export const TimestampTypeDataScaleTime = {
+  ...SingleLineChart,
+  args: {
+    data: dateWithValueData,
+    dataKey: 'time',
+    domain: ['auto', 'auto'],
+    scale: 'time',
+    type: 'number',
+    lineDataKey: 'value',
+  },
+};
+
+export const NumberTypeDataWithCustomDomain = {
+  ...SingleLineChart,
+  args: {
+    data: coordinateWithValueData,
+    dataKey: 'x',
+    domain: [100, 500],
+    type: 'number',
+    lineDataKey: 'y',
+    allowDataOverflow: true,
+  },
+  parameters: {
+    controls: {
+      include: ['data', 'domain'],
+    },
+  },
+};
+
+export const NumberTypeDataAllowDataOverflow = {
+  ...SingleLineChart,
+  args: {
+    data: coordinateWithValueData,
+    dataKey: 'x',
+    domain: [100, 500],
+    type: 'number',
+    lineDataKey: 'y',
+    allowDataOverflow: true,
+  },
+  parameters: {
+    controls: {
+      include: ['data', 'allowDataOverflow'],
+    },
+  },
+};
+
+const customizedAxisTick = (props: { x: number; y: number; payload: { value: string } }) => {
+  const { x, y, payload } = props;
+
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">
+        {payload.value}
+      </text>
+    </g>
+  );
+};
+
+export const CustomizedTicks = {
+  ...SingleLineChart,
+  args: {
+    data: pageData,
+    tick: customizedAxisTick,
+  },
+  parameters: {
+    controls: {
+      include: ['data'],
+    },
+  },
+};
+
+export const CustomizedTickLabel = {
+  ...SingleLineChart,
+  args: {
+    data: pageData,
+    label: { value: 'Pages', position: 'insideBottomRight', offset: 0 },
+  },
+};

storybook/stories/API/chart/Customized.stories.tsx

@@ -12,7 +12,7 @@ import {
   Rectangle,
   Cross,
 } from '../../../../src';
-import { simpleUvPvData } from '../../data';
+import { pageData } from '../../data';
 
 export default {
   component: Customized,
@@ -49,7 +49,7 @@ const SimpleCustomized = {
     );
   },
   args: {
-    data: simpleUvPvData,
+    data: pageData,
     customizedComponent: <div>CustomizedComponent</div>,
   },
 };
@@ -87,7 +87,7 @@ const CustomizedRectangleComponent = (props: any) => {
 export const CustomizedRectangle = {
   ...SimpleCustomized,
   args: {
-    data: simpleUvPvData,
+    data: pageData,
     customizedComponent: <Customized component={CustomizedRectangleComponent} />,
   },
 };
@@ -118,7 +118,7 @@ const CustomizedCrossComponent = (props: any) => {
 export const CustomizedCross = {
   ...SimpleCustomized,
   args: {
-    data: simpleUvPvData,
+    data: pageData,
     customizedComponent: <Customized component={CustomizedCrossComponent} />,
   },
 };

storybook/stories/data/Coordinate.ts

@@ -29,4 +29,12 @@ const coordinateData = [
   },
 ];
 
-export { coordinateData };
+const coordinateWithValueData = [
+  { x: 10, y: 50, value: 100 },
+  { x: 150, y: 150, value: 100 },
+  { x: 290, y: 70, value: 100 },
+  { x: 430, y: 60, value: 100 },
+  { x: 570, y: 30, value: 100 },
+];
+
+export { coordinateData, coordinateWithValueData };

storybook/stories/data/Time.ts

@@ -62,57 +62,20 @@ const timeData = [
   },
 ];
 
-const simpleUvPvData = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  },
-  {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  },
-  {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  },
-  {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-];
-
-const coordinateWithValueData = [
-  { x: 10, y: 50, value: 100 },
-  { x: 150, y: 150, value: 100 },
-  { x: 290, y: 70, value: 100 },
-  { x: 430, y: 60, value: 100 },
-  { x: 570, y: 30, value: 100 },
+const dateWithValueData = [
+  { time: 1483142400000, value: 10 },
+  { time: 1483146000000, value: 20 },
+  { time: 1483147800000, value: 20 },
+  { time: 1483149600000, value: 30 },
+  { time: 1483153200000, value: 10 },
+  { time: 1483155000000, value: 40 },
+  { time: 1483156800000, value: 40 },
+  { time: 1483160400000, value: 20 },
+  { time: 1483164000000, value: 30 },
+  { time: 1483167600000, value: 10 },
+  { time: 1483171200000, value: 60 },
+  { time: 1483173000000, value: 60 },
+  { time: 1483178400000, value: 60 },
 ];
 
-export { dateData, timeData, simpleUvPvData, coordinateWithValueData };
+export { dateData, timeData, dateWithValueData };