Merge pull request #23 from aliyun/fix/docs

文档新增示例&data.color支持传入数组分别指定线和面积的颜色

Author: seekhow

README.md

@@ -1,6 +1,16 @@
 # Console Chart
 
-> Console Chart 是阿里云云管控解决方案开发套件的一部分。旨在为用户提供一款**开箱即用、统一视觉方案**的图表组件库。
+Console Chart 是阿里云云管控解决方案开发套件的一部分，旨在为用户提供一款**开箱即用、统一视觉方案**的图表组件库。
+
+<p align="center">
+<a href=" https://www.alibabacloud.com"><img src="https://aliyunsdk-pages.alicdn.com/icons/AlibabaCloud.svg"></a>
+</p>
+
+[![NPM version][npm-image]][npm-url]
+
+[npm-image]: https://img.shields.io/npm/v/@alicloud/console-chart.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/@alicloud/console-chart
+
 
 ## Install
 

packages/console-line-chart/README.md

@@ -31,6 +31,15 @@ import { ConsoleLineChart } from '@alicloud/console-chart';
 
 [MDXInstruction:importDemo:XAxisTickInterval](./demo/XAxisTickInterval.tsx)
 
+## 动态显示X轴
+
+[MDXInstruction:importDemo:XAxisAsync](./demo/XAxisAsync.tsx)
+
+## y轴最小值与正整数
+通过设置`yAxis.min`来设置坐标轴显示的最小值，通过`yAxis.formatter`来控制不显示浮点数。
+
+[MDXInstruction:importDemo:YAxisMin](./demo/YAxisMin.tsx)
+
 ## 设置双轴
 
 [MDXInstruction:importDemo:DoubleAxis](./demo/DoubleAxis.tsx)
@@ -51,6 +60,14 @@ import { ConsoleLineChart } from '@alicloud/console-chart';
 
 [MDXInstruction:importDemo:Stack](./demo/Stack.tsx)
 
+## 颜色渐变图
+
+通过数据列里的`color`属性来进行指定，如果传入的值为字符串，则将该颜色应用到该数据列的`线图`和`面积图`上，也可以传入一个数组，第一个值指定`线图`的颜色，第二个值指定`面积图`的颜色
+
+颜色色值支持传入渐变，渐变规则请看[G2渐变色原始文档](https://g2-v3.antv.vision/zh/docs/api/graphics#%E6%B8%90%E5%8F%98%E8%89%B2)
+
+[MDXInstruction:importDemo:GradualColor](./demo/GradualColor.tsx)
+
 # Config 配置
 
 # 数据列配置

packages/console-line-chart/demo/GradualColor.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ConsoleLineChart } from '@alicloud/console-chart';
+
+const data = [
+  {
+    name: 'A产品',
+    data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]],
+    color: ['#0072ff', 'l (90) 0:#0072ff 1:#E3F2FD']
+  },
+];
+
+const config = {
+  area: true,
+  smooth: true,
+};
+
+export default () => (
+  <ConsoleLineChart data={data} config={config} height={300} />
+);

packages/console-line-chart/demo/XAxisAsync.tsx

@@ -0,0 +1,51 @@
+import React, { useState, Fragment } from 'react';
+import { ConsoleLineChart } from '@alicloud/console-chart';
+
+const data = [
+  {
+    name: 'NAT',
+    data: [
+      [1522512000000, 302335],
+      [1525104000000, 402335],
+      [1527782400000, 202335],
+      [1530374400000, 502335],
+      [1533052800000, 102335],
+      [1535731200000, 602335],
+      [1538323200000, 202335],
+      [1541001600000, 402335],
+    ],
+  },
+];
+
+const configDefault = {
+  xAxis: {
+    type: 'time',
+    mask: 'YYYY-MM-DD'
+  },
+};
+
+const configInnner = {
+  xAxis: {
+    type: 'time',
+    mask: 'YYYY-MM-DD HH:mm:ss'
+  },
+}
+
+export default () => {
+  const [flag, setFlag] = useState(false);
+
+  const onClick = () => {
+    setFlag(!flag);
+  }
+
+  return (
+    <Fragment>
+      <button onClick={onClick}>点击事件</button>
+      <ConsoleLineChart
+        data={data}
+        config={flag ? configDefault : configInnner}
+        height={300}
+      />
+    </Fragment>
+  );
+}

packages/console-line-chart/demo/YAxisMin.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ConsoleLineChart } from '@alicloud/console-chart';
+
+const data = [
+  {
+    name: 'A产品',
+    data: [['2015', 4.3], ['2016', 3], ['2017', 2], ['2018', 0], ['2019', 1]],
+  },
+];
+
+const config = {
+  yAxis: {
+    min: 0,
+    formatter: (num: number) => Math.round(num),
+  }
+};
+
+export default () => (
+  <ConsoleLineChart data={data} config={config} height={300} />
+);

packages/console-line-chart/demo/index.stories.tsx

@@ -10,14 +10,20 @@ import Unit from './Unit';
 import Smooth from './Smooth';
 import Dot from './Dot';
 import Stack from './Stack';
+import XAxisAsync from './XAxisAsync';
+import YAxisMin from './YAxisMin';
+import GradualColor from './GradualColor';
 
 storiesOf('ConsoleLineChart', module)
   .add('基本折线图', () => <Basic />)
   .add('多组数据', () => <Multi />)
   .add('自定义X轴label', () => <XLabel />)
   .add('自定义x轴时间刻度间距', () => <XAxisTickInterval />)
+  .add('X轴动态变化', XAxisAsync)
+  .add('Y轴最小值与正整数', YAxisMin)
   .add('设置双轴', () => <DoubleAxis />)
   .add('配置顶部单位', () => <Unit />)
   .add('设置光滑曲线', () => <Smooth />)
   .add('线条带点', () => <Dot />)
-  .add('面积堆栈图', () => <Stack />);
+  .add('面积堆栈图', () => <Stack />)
+  .add('颜色渐变图', GradualColor)

packages/console-line-chart/tsconfig.json

@@ -23,7 +23,8 @@
     "checkJs": false,
     "resolveJsonModule": true,
     "noStrictGenericChecks": true,
-    "noImplicitUseStrict": true
+    "noImplicitUseStrict": true,
+    "allowSyntheticDefaultImports": true
   },
   "exclude": ["node_modules"]
 }

packages/console-shared-utils/src/g2Helper/drawLine.ts

@@ -8,37 +8,50 @@ function drawLine(chart: any, config: any, yAxisKey = 'y') {
   const lineShape = config.smooth ? 'smooth' : 'line';
   const areaShape = config.smooth ? 'smooth' : 'area';
 
+  let clrsOne = [];
+  let clrsTwo = [];
+  (config.colors || []).forEach((x: string | [string, string]) => {
+    if (Array.isArray(x)) {
+      clrsOne.push(x[0]);
+      clrsTwo.push(x[1]);
+    } else if (typeof x === 'string') {
+      clrsOne.push(x);
+      clrsTwo.push(x);
+    }
+  });
+
   if (config.area && config.stack) {
     chart
       .areaStack()
       .position(['x', yAxisKey])
-      .color('type', config.colors)
+      .color('type', clrsTwo)
       .shape(areaShape)
       .active(false);
     lineGeom = chart
       .lineStack()
       .position(['x', yAxisKey])
-      .color('type', config.colors)
+      .color('type', clrsOne)
       .shape(lineShape)
       .active(false);
   } else if (config.area && !config.stack) {
+    console.log(config);
     chart
       .area()
       .position(['x', yAxisKey])
-      .color('type', config.colors)
+      .color('type', clrsTwo)
       .shape(areaShape)
       .active(false);
     lineGeom = chart
       .line()
       .position(['x', yAxisKey])
-      .color('type', config.colors)
+      .color('type', clrsOne)
       .shape(lineShape)
       .active(false);
   } else {
     lineGeom = chart
       .line()
       .position(['x', yAxisKey])
-      .color('type', config.colors)
+      .color('type', clrsOne)
       .shape(lineShape)
       .active(false);
   }