├── site ├── .eslintrc.js └── package.json ├── .babelrc ├── packages ├── console-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── rollup.config.js │ ├── src │ │ └── index.ts │ └── package.json ├── console-bar-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── demo │ │ ├── Basic.tsx │ │ ├── Horizontal.tsx │ │ ├── Stack.tsx │ │ ├── Color.tsx │ │ ├── index.stories.tsx │ │ ├── DodgeStack.tsx │ │ └── Facet.tsx │ ├── rollup.config.js │ ├── package.json │ └── README.md ├── console-dot-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── demo │ │ ├── index.stories.tsx │ │ ├── Basic.tsx │ │ ├── Multi.tsx │ │ ├── Size.tsx │ │ └── Disturbance.tsx │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ └── src │ │ └── index.ts ├── console-line-chart │ ├── tslint.json │ ├── demo │ │ ├── Basic.tsx │ │ ├── YAxisMin.tsx │ │ ├── OneDotToLine.tsx │ │ ├── GradualColor.tsx │ │ ├── Multi.tsx │ │ ├── XAxisAsync.tsx │ │ ├── Dot.tsx │ │ ├── index.stories.tsx │ │ ├── Unit.tsx │ │ ├── DoubleAxis.tsx │ │ ├── Stack.tsx │ │ ├── Smooth.tsx │ │ ├── XLabel.tsx │ │ ├── XAxisTickInterval.tsx │ │ └── LegendClick.tsx │ ├── rollup.config.js │ ├── package.json │ ├── tsconfig.json │ └── README.md ├── console-pie-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── demo │ │ ├── Basic.tsx │ │ ├── Label.tsx │ │ ├── SingleColors.tsx │ │ ├── Select.tsx │ │ ├── MultiColors.tsx │ │ ├── Circle.tsx │ │ ├── CircleSlice.tsx │ │ ├── Legend.tsx │ │ ├── LegendRight.tsx │ │ ├── CircleGuide.tsx │ │ ├── Tooltip.tsx │ │ ├── LegendTip.tsx │ │ ├── ComplexTooltip.tsx │ │ ├── index.stories.tsx │ │ └── SelectCircleGuide.tsx │ ├── rollup.config.js │ ├── package.json │ └── README.md ├── console-rose-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── demo │ │ ├── index.stories.tsx │ │ ├── Basic.tsx │ │ ├── SingleColor.tsx │ │ └── Axis.tsx │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ └── src │ │ └── index.ts ├── console-tree-graph │ ├── tslint.json │ ├── tsconfig.json │ ├── demo │ │ ├── index.stories.tsx │ │ └── Basic.tsx │ ├── rollup.config.js │ ├── package.json │ └── README.md ├── console-combo-chart │ ├── tslint.json │ ├── rollup.config.js │ ├── demo │ │ ├── index.stories.tsx │ │ ├── Basic.tsx │ │ ├── YAxisColor.tsx │ │ ├── SingleYAxis.tsx │ │ ├── Click.tsx │ │ ├── Stack.tsx │ │ ├── Smooth.tsx │ │ └── Color.tsx │ ├── package.json │ ├── tsconfig.json │ └── README.md ├── console-funnel-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── demo │ │ ├── Basic.tsx │ │ ├── Left.tsx │ │ ├── Horizontal.tsx │ │ ├── Pyramid.tsx │ │ ├── PyramidHor.tsx │ │ └── index.stories.tsx │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ └── src │ │ └── index.ts ├── console-miniline-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── demo │ │ ├── Basic.tsx │ │ ├── Area.tsx │ │ ├── AreaSmooth.tsx │ │ ├── Color.tsx │ │ ├── index.stories.tsx │ │ └── AreaStack.tsx │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ └── src │ │ └── index.ts ├── console-radar-chart │ ├── tsconfig.json │ ├── tslint.json │ ├── demo │ │ ├── index.stories.tsx │ │ ├── Basic.tsx │ │ ├── Multi.tsx │ │ ├── Axis.tsx │ │ └── Area.tsx │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ └── src │ │ └── index.ts ├── console-sankey-chart │ ├── tslint.json │ ├── tsconfig.json │ ├── src │ │ ├── types.ts │ │ └── transform.ts │ ├── rollup.config.js │ ├── demo │ │ ├── index.stories.tsx │ │ ├── NodeShape.tsx │ │ ├── Basic.tsx │ │ ├── Tooltip.tsx │ │ ├── Topology.tsx │ │ ├── Vertical.tsx │ │ ├── LinkStyle.tsx │ │ └── TopologyVertical.tsx │ ├── package.json │ └── README.md ├── console-shared-utils │ ├── tslint.json │ ├── tsconfig.json │ ├── README.md │ ├── src │ │ ├── config │ │ │ ├── yunzhi.ts │ │ │ ├── index.ts │ │ │ └── default.ts │ │ ├── g2Helper │ │ │ ├── style.ts │ │ │ ├── size.ts │ │ │ ├── updater.ts │ │ │ ├── tooltip.ts │ │ │ ├── axisX.ts │ │ │ ├── axisY.ts │ │ │ ├── legend.ts │ │ │ ├── guide.ts │ │ │ ├── label.ts │ │ │ ├── rectAutoTickCount.ts │ │ │ ├── drawLine.ts │ │ │ └── dataAdapter.ts │ │ ├── constants │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── types │ │ │ └── index.ts │ │ ├── theme │ │ │ └── index.ts │ │ └── common │ │ │ └── utils.ts │ ├── rollup.config.js │ └── package.json └── config-common-demo │ ├── demo │ ├── WidthHeight.tsx │ └── PaddingBasic.tsx │ └── README.md ├── .npmignore ├── .demoProjectTemplate ├── tsconfig.json ├── src │ └── index.tsx ├── projectTemplateConfig.js └── package.json ├── .editorconfig ├── .storybook ├── config.js └── webpack.config.js ├── docs ├── 8-config-y.md ├── 1-quick-start.md ├── 2-concepts.md ├── 13-config-style.md ├── 14-config-size.md ├── 6-config.md ├── 3-contributing.md ├── 11-config-label.md ├── 4-props.md └── 5-data.md ├── tslint.json ├── .gitignore ├── CHANGELOG.md ├── lerna.json ├── README.md ├── LICENSE ├── tsconfig.json ├── CONTRIBUTING.md ├── package.json └── rollup.config.js /site/.eslintrc.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-bar-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-dot-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-line-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-pie-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-rose-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-tree-graph/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-bar-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-combo-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-radar-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-radar-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-rose-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-shared-utils/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-tree-graph/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/console-shared-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .editorconfig 3 | .eslintignore 4 | .eslintrc 5 | .gitignore 6 | .demoProjectTemplate 7 | site/ 8 | lerna.json 9 | rollup.config.js 10 | -------------------------------------------------------------------------------- /packages/console-dot-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib" 5 | }, 6 | "include": ["./src/*"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/console-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib" 5 | }, 6 | "include": [ 7 | "./src/*" 8 | ] 9 | } -------------------------------------------------------------------------------- /packages/console-pie-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib" 5 | }, 6 | "include": [ 7 | "./src" 8 | ] 9 | } -------------------------------------------------------------------------------- /packages/console-shared-utils/README.md: -------------------------------------------------------------------------------- 1 | # `@alicloud/console-shared-utils` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | 9 | // TODO: DEMONSTRATE API 10 | ``` 11 | -------------------------------------------------------------------------------- /.demoProjectTemplate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src/**/*"], 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "moduleResolution": "node", 6 | "esModuleInterop": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.demoProjectTemplate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { render } from 'react-dom' 3 | import App from './demo/{{DEMO_ENTRY_NAME}}' 4 | 5 | const rootElement = document.getElementById('root') 6 | render(, rootElement) 7 | -------------------------------------------------------------------------------- /packages/console-tree-graph/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | 6 | storiesOf('ConsoleTreeGraph', module) 7 | .add('基本用法', () => ); 8 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | const req = require.context('../packages', true, /.stories.tsx$/); 4 | 5 | function loadStories() { 6 | req.keys().forEach(filename => req(filename)); 7 | } 8 | 9 | configure(loadStories, module); 10 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/config/yunzhi.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | ConsoleLineChart: {}, 3 | ConsoleBarChart: {}, 4 | ConsoleComboChart: {}, 5 | ConsolePieChart: {}, 6 | ConsoleMinilineChart: {}, 7 | ConsoleRadarChart: {}, 8 | ConsoleFunnelChart: {}, 9 | ConsoleDotChart: {}, 10 | ConsoleRoseChart: {}, 11 | }; 12 | -------------------------------------------------------------------------------- /docs/8-config-y.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: config-y 3 | zhName: 配置-y轴 4 | sort: 8 5 | --- 6 | 7 | # config-y轴 8 | 9 | `yAxis` 属性控制Y轴展示。 10 | 11 | ## 配置方式 12 | ```javascript 13 | // 单轴形态 14 | config = { 15 | yAxis: {}, 16 | }; 17 | 18 | // 双轴形态 19 | config = { 20 | yAxis: [{}, {}], 21 | }; 22 | ``` 23 | 24 | ## 属性列表 25 | 同 `config-xAxis` 配置 26 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/g2Helper/style.ts: -------------------------------------------------------------------------------- 1 | // 标准style函数 2 | // https://www.yuque.com/antv/g2-docs/api-geom#style 3 | 4 | export default function(gemo: any, config, styleConfig) { 5 | if (!styleConfig) { 6 | return; 7 | } 8 | const formatStyleConfig = Array.isArray(styleConfig) ? styleConfig : [styleConfig]; 9 | gemo.style(...formatStyleConfig); 10 | } 11 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-string-throw": true, 4 | "no-unused-expression": true, 5 | "no-duplicate-variable": true, 6 | "curly": true, 7 | "class-name": true, 8 | "semicolon": [true, "always"], 9 | "triple-equals": true 10 | }, 11 | "defaultSeverity": "warning", 12 | "linterOptions": { 13 | "exclude": ["node_modules"] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleFunnelChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['毛利润', 20], ['净利润', 15], ['成本', 5]], 8 | }, 9 | ]; 10 | 11 | const config = {}; 12 | 13 | export default () => ( 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '各类云产品占比', 7 | data: [['计算类', 45], ['资源类', 26], ['服务类', 12], ['工具类', 8]], 8 | }, 9 | ]; 10 | 11 | const config = {}; 12 | 13 | export default () => ( 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /packages/console-rose-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Axis from './Axis'; 6 | import SingleColor from './SingleColor'; 7 | 8 | storiesOf('ConsoleRoseChart', module) 9 | .add('基本玫瑰图', () => ) 10 | .add('带坐标轴', () => ) 11 | .add('单色玫瑰图', () => ); 12 | -------------------------------------------------------------------------------- /packages/console-bar-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleBarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '阿里云Nat网关价格/月', 7 | data: [ 8 | ['Small', 306], ['Middle', 586.5], ['Large', 1147.5], ['XLarge.1', 2040] 9 | ], 10 | }, 11 | ]; 12 | 13 | export default () => ( 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /packages/config-common-demo/demo/WidthHeight.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleMinilineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]], 8 | }, 9 | ]; 10 | 11 | export default () => ( 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]], 8 | }, 9 | ]; 10 | 11 | const config = {}; 12 | 13 | export default () => ( 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/Label.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '清华', 7 | data: [['Chinese', 20], ['English', 10], ['Math', 15]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | label: {}, 13 | }; 14 | 15 | export default () => ( 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/console-shared-utils/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs } = plugins; 4 | 5 | const pluginsCb = ({ fmt, ts, dest }) => { 6 | return [typescript(), resolve(), commonjs()]; 7 | }; 8 | 9 | export default generateRollupConfig({ 10 | formatArr: ['es', 'cjs'], 11 | input: 'src/index.ts', 12 | plugins: pluginsCb, 13 | }); 14 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleMinilineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]], 8 | }, 9 | ]; 10 | 11 | const config = {}; 12 | 13 | export default () => ( 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/SingleColors.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '各类云产品占比', 7 | data: [['计算类', 45], ['资源类', 26], ['服务类', 12], ['工具类', 8]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | colors: '#0093ee', 13 | }; 14 | 15 | export default () => ( 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/demo/Left.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleFunnelChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['毛利润', 20], ['净利润', 15], ['成本', 5]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | direction: 'vertical', 13 | align: 'left', 14 | }; 15 | 16 | export default () => ( 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/demo/Area.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleMinilineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | area: true, 13 | }; 14 | 15 | export default () => ( 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/console-radar-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Area from './Area'; 6 | import Multi from './Multi'; 7 | import Axis from './Axis'; 8 | 9 | storiesOf('ConsoleRadarChart', module) 10 | .add('基本用法', () => ) 11 | .add('面积图', () => ) 12 | .add('多组数据', () => ) 13 | .add('自定义坐标轴', () => ); 14 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/demo/Horizontal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleFunnelChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['毛利润', 20], ['净利润', 15], ['成本', 5]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | direction: 'horizontal', 13 | align: 'top', 14 | }; 15 | 16 | export default () => ( 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/Select.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '各类云产品占比', 7 | data: [['计算类', 45], ['资源类', 26], ['服务类', 12], ['工具类', 8]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | select: true, 13 | selectData: '计算类', 14 | }; 15 | 16 | export default () => ( 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /.demoProjectTemplate/projectTemplateConfig.js: -------------------------------------------------------------------------------- 1 | const { basename, extname } = require('path') 2 | 3 | const config = { 4 | baseDir: './src/demo', 5 | afterMerge: (mergedProjectFiles, entryPath) => { 6 | const entryFileName = basename(entryPath, extname(entryPath)) 7 | mergedProjectFiles['src/index.tsx'] = mergedProjectFiles[ 8 | 'src/index.tsx' 9 | ].replace('{{DEMO_ENTRY_NAME}}', entryFileName) 10 | }, 11 | } 12 | 13 | module.exports = config 14 | -------------------------------------------------------------------------------- /packages/console-dot-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Multi from './Multi'; 6 | import Size from './Size'; 7 | import Disturbance from './Disturbance'; 8 | 9 | storiesOf('ConsoleDotChart', module) 10 | .add('基本散点图', () => ) 11 | .add('多组数据', () => ) 12 | .add('自定义点大小', () => ) 13 | .add('扰动图', () => ); 14 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/MultiColors.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '各类云产品占比', 7 | data: [['计算类', 45], ['资源类', 26], ['服务类', 12], ['工具类', 8]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | colors: ['#EE6DD2', '#EE746D', '#B4C5EE', '#B3EE26'], 13 | }; 14 | 15 | export default () => ( 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/demo/Pyramid.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleFunnelChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['毛利润', 20], ['净利润', 15], ['成本', 5]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | direction: 'vertical', 13 | align: 'center', 14 | pyramid: true, 15 | }; 16 | 17 | export default () => ( 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/demo/PyramidHor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleFunnelChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['毛利润', 20], ['净利润', 15], ['成本', 5]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | direction: 'horizontal', 13 | align: 'center', 14 | pyramid: true, 15 | }; 16 | 17 | export default () => ( 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/demo/AreaSmooth.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleMinilineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '奇怪的数据量', 7 | data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | area: true, 13 | smooth: true, 14 | }; 15 | 16 | export default () => ( 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/demo/Color.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleMinilineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '奇怪的数据量', 7 | color: '#ff0000', 8 | data: [ 9 | ['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40] 10 | ], 11 | }, 12 | ]; 13 | 14 | const config = {}; 15 | 16 | export default () => ( 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/console-bar-chart/demo/Horizontal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleBarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '阿里云Nat网关价格/月', 7 | data: [ 8 | ['Small', 306], ['Middle', 586.5], ['Large', 1147.5], ['XLarge.1', 2040] 9 | ], 10 | }, 11 | ]; 12 | 13 | const config = { 14 | horizontal: true, 15 | }; 16 | 17 | export default () => ( 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/src/types.ts: -------------------------------------------------------------------------------- 1 | 2 | enum linkTypes { 3 | 'arc', 4 | 'line', 5 | } 6 | 7 | enum nodeAligns { 8 | 'start', 9 | 'end', 10 | 'center', 11 | 'justify', 12 | } 13 | 14 | enum directions { 15 | 'vertical', 16 | 'horizontal', 17 | } 18 | 19 | export default interface config { 20 | topology: boolean, 21 | direction?: directions, 22 | linkType?: linkTypes, 23 | linkColor?: string, 24 | linkOpacity?: number, 25 | nodeAlign?: nodeAligns, 26 | } 27 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/Circle.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '时长', 7 | data: [['1年', 45], ['2年', 26], ['3年', 12], ['4年', 8], ['5年', 10], ['6年以上', 27]], 8 | }, 9 | ]; 10 | 11 | let config = { 12 | cycle: true, 13 | legend: { 14 | position: 'bottom', 15 | }, 16 | }; 17 | 18 | export default () => ( 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/config-common-demo/demo/PaddingBasic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleBarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '阿里云Nat网关价格/月', 7 | data: [ 8 | ['Small', 306], ['Middle', 586.5], ['Large', 1147.5], ['XLarge.1', 2040] 9 | ], 10 | }, 11 | ]; 12 | 13 | const config = { 14 | padding: [50, 50, 100, 100], 15 | } 16 | 17 | export default () => ( 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/console-rose-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleRoseChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '年份数据', 7 | data: [ 8 | ['2013', 14], 9 | ['2014', 15], 10 | ['2015', 16], 11 | ['2016', 18], 12 | ['2017', 20], 13 | ['2018', 21], 14 | ['2019', 24.3], 15 | ['2020', 25], 16 | ], 17 | }, 18 | ]; 19 | 20 | export default () => ( 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/YAxisMin.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['2015', 4.3], ['2016', 3], ['2017', 2], ['2018', 0], ['2019', 1]], 8 | }, 9 | ]; 10 | 11 | const config = { 12 | yAxis: { 13 | min: 0, 14 | formatter: (num: number) => Math.round(num), 15 | } 16 | }; 17 | 18 | export default () => ( 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/CircleSlice.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '时长', 7 | data: [['1年', 45], ['2年', 26], ['3年', 12], ['4年', 8], ['5年', 10], ['6年以上', 27]], 8 | }, 9 | ]; 10 | 11 | let config = { 12 | cycle: true, 13 | legend: { 14 | position: 'bottom', 15 | }, 16 | sliceGap: 0.01, 17 | }; 18 | 19 | export default () => ( 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /packages/console-radar-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleRadarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'oss', 7 | data: [['specification', 29], ['feature', 28], ['doc', 31]], 8 | color: '#E288CE', 9 | } 10 | ]; 11 | 12 | const config = { 13 | xAxis: { 14 | label: { 15 | formatter: val => val + '~' 16 | } 17 | }, 18 | }; 19 | 20 | export default () => ( 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /packages/console-bar-chart/demo/Stack.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleBarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'Nat网关', 7 | data: [['规格', 3], ['动态数', 4], ['SDK支持语言', 4]], 8 | }, 9 | { 10 | name: 'Slb负载均衡', 11 | data: [['规格', 12], ['动态数', 11], ['SDK支持语言', 0]], 12 | }, 13 | ]; 14 | 15 | export default () => { 16 | const config = { 17 | stack: true, 18 | }; 19 | return ( 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /docs/1-quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: quick-start 3 | zhName: 快速开始 4 | sort: 1 5 | --- 6 | 7 | # 入门指南 8 | 9 | # 使用说明 10 | 11 | **Console Chart**  图表库采用`lerna`包管理工具开发，每种类型的图表单独放在一个包中，同时提供了一个图表库集合包`@alicloud/console-chart`，你可以使用以下方式使用图表。 12 | 13 | 14 | ## 安装 15 | 16 | ```bash 17 | npm install @alicloud/console-chart --save 18 | ``` 19 | 20 | ## 使用 21 | ```javascript 22 | import { ConsoleLineChart } from '@alicloud/console-chart'; 23 | const data = []; 24 | const config = {}; 25 | 26 | 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /packages/console-dot-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleDotChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '云产品数据', 7 | data: [ 8 | ['a', 1892], 9 | ['b', 7292], 10 | ['c', 5714], 11 | ['d', 5354], 12 | ['e', 2014], 13 | ['f', 22], 14 | ['g', 1123], 15 | ['h', 5218], 16 | ], 17 | }, 18 | ]; 19 | 20 | const config = {}; 21 | 22 | export default () => ( 23 | 24 | ); 25 | -------------------------------------------------------------------------------- /packages/console-pie-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs, autoExternal } = plugins; 4 | const pluginsCb = ({ fmt, ts, file }) => { 5 | if (fmt === 'umd') { 6 | return [typescript({}), resolve(), commonjs()]; 7 | } else { 8 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 9 | } 10 | }; 11 | export default generateRollupConfig({ 12 | formatArr: ['es', 'cjs', 'umd'], 13 | input: 'src/index.ts', 14 | plugins: pluginsCb, 15 | }); 16 | -------------------------------------------------------------------------------- /packages/console-bar-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, commonjs, resolve, autoExternal } = plugins; 4 | 5 | const pluginsCb = ({ fmt }) => { 6 | if (fmt === 'umd') { 7 | return [typescript({}), resolve(), commonjs()]; 8 | } else { 9 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 10 | } 11 | }; 12 | 13 | export default generateRollupConfig({ 14 | formatArr: ['es', 'cjs', 'umd'], 15 | input: 'src/index.ts', 16 | plugins: pluginsCb, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/console-combo-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs, autoExternal } = plugins; 4 | 5 | const pluginsCb = ({ fmt, ts }) => { 6 | if (fmt === 'umd') { 7 | return [typescript(), resolve(), commonjs()]; 8 | } else { 9 | return [typescript(), resolve(), commonjs(), autoExternal()]; 10 | } 11 | }; 12 | 13 | export default generateRollupConfig({ 14 | formatArr: ['es', 'cjs', 'umd'], 15 | input: 'src/index.ts', 16 | plugins: pluginsCb, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Left from './Left'; 6 | import Horizontal from './Horizontal'; 7 | import Pyramid from './Pyramid'; 8 | import PyramidHor from './PyramidHor'; 9 | 10 | storiesOf('ConsoleFunnelChart', module) 11 | .add('基本用法', () => ) 12 | .add('居左', () => ) 13 | .add('横向居中', () => ) 14 | .add('金字塔', () => ) 15 | .add('横向金字塔', () => ); 16 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Area from './Area'; 6 | import AreaSmooth from './AreaSmooth'; 7 | import AreaStack from './AreaStack'; 8 | import Color from './Color'; 9 | 10 | storiesOf('ConsoleMinilineChart', module) 11 | .add('基本用法', () => ) 12 | .add('面积图', () => ) 13 | .add('光滑面积图', () => ) 14 | .add('面积堆栈图', () => ) 15 | .add('自定义颜色', () => ); 16 | -------------------------------------------------------------------------------- /packages/console-radar-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs, autoExternal } = plugins; 4 | const pluginsCb = ({ fmt, ts, file }) => { 5 | if (fmt === 'umd') { 6 | return [typescript({}), resolve(), commonjs()]; 7 | } else { 8 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 9 | } 10 | }; 11 | export default generateRollupConfig({ 12 | formatArr: ['es', 'cjs', 'umd'], 13 | input: 'src/index.ts', 14 | plugins: pluginsCb, 15 | }); 16 | -------------------------------------------------------------------------------- /packages/console-tree-graph/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs, autoExternal } = plugins; 4 | const pluginsCb = ({ fmt, ts, file }) => { 5 | if (fmt === 'umd') { 6 | return [typescript({}), resolve(), commonjs()]; 7 | } else { 8 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 9 | } 10 | }; 11 | export default generateRollupConfig({ 12 | formatArr: ['es', 'cjs', 'umd'], 13 | input: 'src/index.tsx', 14 | plugins: pluginsCb, 15 | }); 16 | -------------------------------------------------------------------------------- /packages/console-bar-chart/demo/Color.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleBarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'Nat网关', 7 | data: [['规格', 3], ['动态数', 4], ['SDK支持语言', 4]], 8 | color: '#00D9EE', 9 | }, 10 | { 11 | name: 'Slb负载均衡', 12 | data: [['规格', 12], ['动态数', 11], ['SDK支持语言', 0]], 13 | color: '#007BEE', 14 | }, 15 | ]; 16 | 17 | export default () => { 18 | const config = {}; 19 | return ( 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /packages/console-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, commonjs, resolve, postcss, autoExternal } = plugins; 4 | 5 | const pluginsCb = ({ fmt, ts, file }) => { 6 | if (fmt === 'umd') { 7 | return [typescript({}), resolve(), commonjs()]; 8 | } else { 9 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 10 | } 11 | }; 12 | 13 | export default generateRollupConfig({ 14 | formatArr: ['es', 'cjs'], 15 | input: 'src/index.ts', 16 | plugins: pluginsCb, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/console-dot-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, postcss, commonjs, autoExternal } = plugins; 4 | const pluginsCb = ({ fmt, ts, file }) => { 5 | if (fmt === 'umd') { 6 | return [typescript({}), resolve(), commonjs()]; 7 | } else { 8 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 9 | } 10 | }; 11 | 12 | export default generateRollupConfig({ 13 | formatArr: ['es', 'cjs', 'umd'], 14 | input: 'src/index.ts', 15 | plugins: pluginsCb, 16 | }); 17 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, postcss, commonjs, autoExternal } = plugins; 4 | 5 | const pluginsCb = ({ fmt, ts }) => { 6 | if (fmt === 'umd') { 7 | return [typescript(), resolve(), commonjs()]; 8 | } else { 9 | return [typescript(), resolve(), commonjs(), autoExternal()]; 10 | } 11 | }; 12 | 13 | export default generateRollupConfig({ 14 | formatArr: ['es', 'cjs', 'umd'], 15 | input: 'src/index.ts', 16 | plugins: pluginsCb, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/console-rose-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs, autoExternal } = plugins; 4 | 5 | const pluginsArr = ({ fmt, ts, file }) => { 6 | if (fmt === 'umd') { 7 | return [typescript({}), resolve(), commonjs()]; 8 | } else { 9 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 10 | } 11 | }; 12 | 13 | export default generateRollupConfig({ 14 | formatArr: ['es', 'cjs', 'umd'], 15 | input: 'src/index.ts', 16 | plugins: pluginsArr, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const COLORS_24 = [ 2 | '#2196F3', 3 | '#2FC25B', 4 | '#13C2C2', 5 | '#66B5FF', 6 | '#41D9C7', 7 | '#6EDB8F', 8 | '#9AE65C', 9 | '#FACC14', 10 | '#E6965C', 11 | '#57AD71', 12 | '#F44336', 13 | '#738AE6', 14 | '#7564CC', 15 | '#8543E0', 16 | '#A877ED', 17 | '#5C8EE6', 18 | '#70E0E0', 19 | '#5CA3E6', 20 | '#3436C7', 21 | '#8082FF', 22 | '#DD81E6', 23 | '#F04864', 24 | '#FA7D92', 25 | '#D598D9', 26 | ]; 27 | 28 | export const PIE_DEFAULT_DRAW_PADDING = [48, 48, 48, 48]; 29 | -------------------------------------------------------------------------------- /packages/console-funnel-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, commonjs, resolve, postcss, autoExternal } = plugins; 4 | 5 | const pluginsCb = ({ fmt, ts, file }) => { 6 | if (fmt === 'umd') { 7 | return [typescript({}), resolve(), commonjs()]; 8 | } else { 9 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 10 | } 11 | }; 12 | export default generateRollupConfig({ 13 | formatArr: ['es', 'cjs', 'umd'], 14 | input: 'src/index.ts', 15 | plugins: pluginsCb, 16 | }); 17 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs, autoExternal } = plugins; 4 | 5 | const pluginsArr = ({ fmt, ts, file }) => { 6 | if (fmt === 'umd') { 7 | return [typescript({}), resolve(), commonjs()]; 8 | } else { 9 | return [typescript({}), resolve(), commonjs(), autoExternal()]; 10 | } 11 | }; 12 | 13 | export default generateRollupConfig({ 14 | formatArr: ['es', 'cjs', 'umd'], 15 | input: 'src/index.ts', 16 | plugins: pluginsArr, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/console-line-chart/rollup.config.js: -------------------------------------------------------------------------------- 1 | import generateRollupConfig, { plugins } from '../../rollup.config'; 2 | 3 | const { typescript, resolve, commonjs, autoExternal } = plugins; 4 | const pluginsArr = ({ fmt, ts, file }) => { 5 | if (fmt === 'umd') { 6 | return [typescript(), resolve(), commonjs()]; 7 | } else { 8 | return [typescript(), resolve(), commonjs(), autoExternal()]; 9 | } 10 | }; 11 | const a = generateRollupConfig({ 12 | formatArr: ['es', 'cjs', 'umd'], 13 | input: 'src/index.ts', 14 | plugins: pluginsArr, 15 | }); 16 | 17 | export default a; 18 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/demo/AreaStack.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleMinilineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '奇怪的数据量', 7 | data: [ 8 | ['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40], 9 | ['2015', 12], ['2016', 15], ['2017', 35], ['2018', 20], ['2019', 40] 10 | ], 11 | }, 12 | ]; 13 | 14 | const config = { 15 | area: true, 16 | stack: true, 17 | }; 18 | 19 | export default () => ( 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /packages/console-rose-chart/demo/SingleColor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleRoseChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '年份数据', 7 | data: [ 8 | ['2013', 14], 9 | ['2014', 15], 10 | ['2015', 16], 11 | ['2016', 18], 12 | ['2017', 20], 13 | ['2018', 21], 14 | ['2019', 24.3], 15 | ['2020', 25], 16 | ], 17 | }, 18 | ]; 19 | 20 | const config = { 21 | colors: '#0093ee', 22 | }; 23 | 24 | export default () => ( 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = ({ config }) => { 4 | config.module.rules.push({ 5 | test: /\.(ts|tsx)$/, 6 | use: [ 7 | { 8 | loader: require.resolve('awesome-typescript-loader'), 9 | }, 10 | // Optional 11 | { 12 | loader: require.resolve('react-docgen-typescript-loader'), 13 | }, 14 | ], 15 | }); 16 | config.resolve.extensions.push('.ts', '.tsx'); 17 | // config.resolve.alias = { 18 | // '@alicloud/console-chart': path.resolve(__dirname, '../packages/console-chart/es'), 19 | // }; 20 | return config; 21 | }; 22 | -------------------------------------------------------------------------------- /packages/console-bar-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Horizontal from './Horizontal'; 6 | import Stack from './Stack'; 7 | import Color from './Color'; 8 | import Facet from './Facet'; 9 | import DodgeStack from './DodgeStack'; 10 | 11 | storiesOf('ConsoleBarChart', module) 12 | .add('基本用法', () => ) 13 | .add('水平柱状图', () => ) 14 | .add('堆叠柱状图', () => ) 15 | .add('镜面柱状图', () => ) 16 | .add('分组柱状图', () => ) 17 | .add('自定义数据列颜色', () => ); 18 | -------------------------------------------------------------------------------- /packages/console-radar-chart/demo/Multi.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleRadarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'ecs', 7 | data: [['specification', 20], ['feature', 10], ['doc', 15]], 8 | color: '#0093EE', 9 | }, 10 | { 11 | name: 'oss', 12 | data: [['specification', 25], ['feature', 15], ['doc', 31]], 13 | color: '#E288CE', 14 | } 15 | ]; 16 | 17 | const config = { 18 | xAxis: { 19 | label: { 20 | formatter: val => val + '~' 21 | } 22 | }, 23 | }; 24 | 25 | export default () => ( 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /packages/console-rose-chart/demo/Axis.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleRoseChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '年份数据', 7 | data: [ 8 | ['2013', 14], 9 | ['2014', 15], 10 | ['2015', 16], 11 | ['2016', 18], 12 | ['2017', 20], 13 | ['2018', 21], 14 | ['2019', 24.3], 15 | ['2020', 25], 16 | ], 17 | }, 18 | ]; 19 | 20 | const config = { 21 | axis: true, 22 | label: false, 23 | padding: [50, 50, 50, 50], 24 | legend: false, 25 | }; 26 | 27 | export default () => ( 28 | 29 | ); 30 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/g2Helper/size.ts: -------------------------------------------------------------------------------- 1 | import { isNumber, isFunction } from '../common/utils'; 2 | 3 | export default function( 4 | geom, 5 | config, 6 | sizeConfig, 7 | yField = 'type', 8 | callbackYField = 'x*y*type*facet' 9 | ) { 10 | if (!sizeConfig) { 11 | return; 12 | } 13 | if (Array.isArray(sizeConfig)) { 14 | if (isNumber(sizeConfig[0] && isNumber(sizeConfig[1]))) { 15 | geom.size(yField, sizeConfig); 16 | } else { 17 | geom.size(...sizeConfig); 18 | } 19 | } else if (isFunction(sizeConfig)) { 20 | geom.size(callbackYField, sizeConfig); 21 | } else { 22 | geom.size(sizeConfig); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/console-combo-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import YAxisColor from './YAxisColor'; 6 | import SingleYAxis from './SingleYAxis'; 7 | import Smooth from './Smooth'; 8 | import Stack from './Stack'; 9 | import Color from './Color'; 10 | import Click from './Click'; 11 | 12 | storiesOf('ConsoleComboChart', module) 13 | .add('基础混合图', () => ) 14 | .add('纵坐标设置颜色', () => ) 15 | .add('单个纵坐标', () => ) 16 | .add('光滑曲线', () => ) 17 | .add('堆叠图', () => ) 18 | .add('自定义颜色', () => ) 19 | .add('点击事件', () => ); 20 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/Legend.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'Source', 7 | data: [ 8 | ['A', 4590], 9 | ['B', 2628], 10 | ['C', 1228], 11 | ['D', 825], 12 | ['E', 622], 13 | ['F', 1207], 14 | ], 15 | }, 16 | ]; 17 | 18 | const config = { 19 | padding: [60, 'auto', 0, 'auto'], 20 | legend: { 21 | position: 'top', 22 | offsetY: -10, 23 | itemFormatter: function(value) { 24 | return value + 'K'; 25 | }, 26 | }, 27 | }; 28 | 29 | export default () => ( 30 | 31 | ); 32 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/g2Helper/updater.ts: -------------------------------------------------------------------------------- 1 | import { shallowEqual } from '../common/utils'; 2 | 3 | const Updater = { 4 | needRebuildChart(unifiedProps, nextUnifiedProps) { 5 | if (unifiedProps == null || nextUnifiedProps == null) return false; 6 | 7 | if ( 8 | !shallowEqual(unifiedProps.padding, nextUnifiedProps.padding) || 9 | !shallowEqual(unifiedProps.background, nextUnifiedProps.background) || 10 | !shallowEqual(unifiedProps.plotBackground, nextUnifiedProps.plotBackground) || 11 | !shallowEqual(unifiedProps.pixelRatio, nextUnifiedProps.pixelRatio) 12 | ) { 13 | return true; 14 | } 15 | 16 | return false; 17 | }, 18 | }; 19 | 20 | export default Updater; 21 | -------------------------------------------------------------------------------- /packages/console-radar-chart/demo/Axis.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleRadarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'oss', 7 | data: [['specification', 29], ['feature', 28], ['doc', 31]], 8 | color: '#E288CE', 9 | } 10 | ]; 11 | 12 | const config = { 13 | xAxis: { 14 | label: { 15 | htmlTemplate: (val, item, index) => { 16 | return ` 17 |
18 |
${val}
19 |
${index}
20 |
21 | `; 22 | } 23 | } 24 | }, 25 | }; 26 | 27 | export default () => ( 28 | 29 | ); 30 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/LegendRight.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'Source', 7 | data: [ 8 | ['A', 4590], 9 | ['B', 2628], 10 | ['C', 1228], 11 | ['D', 825], 12 | ['E', 622], 13 | ['F', 1207], 14 | ], 15 | }, 16 | ]; 17 | 18 | const config = { 19 | padding: [0, 120 + 50, 0, 0], 20 | legend: { 21 | position: 'right-center', 22 | offsetY: 10, 23 | offsetX: 50, 24 | itemFormatter: function(value) { 25 | return `${value} 400 40%`; 26 | }, 27 | }, 28 | }; 29 | 30 | export default () => ( 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/CircleGuide.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '时长', 7 | data: [['1年', 45], ['2年', 26], ['3年', 12], ['4年', 8], ['5年', 10], ['6年以上', 27]], 8 | }, 9 | ]; 10 | 11 | let config = { 12 | cycle: true, 13 | guide: { 14 | html: { 15 | position: ['50%', '50%'], 16 | htmlContent: 17 | '
1年
45
', 18 | alignX: 'middle', 19 | alignY: 'middle', 20 | }, 21 | }, 22 | }; 23 | 24 | export default () => ( 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/OneDotToLine.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [ 8 | ['2015', 20] 9 | ], 10 | }, 11 | ]; 12 | 13 | const config: any = {}; 14 | 15 | export default () => { 16 | const dataLength = data[0].data.length; 17 | if (dataLength === 1) { 18 | config.guide = { 19 | line: { 20 | start: ['0%', '0'], 21 | end: ['100%', '0'], 22 | lineStyle: { 23 | stroke: '#2196F3', 24 | lineWidth: 2, 25 | lineDash: [ 0, 0 ] 26 | }, 27 | } 28 | }; 29 | } 30 | return ( 31 | 32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/Tooltip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '等级', 7 | data: [ 8 | ['11', 55.0], 9 | ['12', 26.8], 10 | ['13', 112.8], 11 | ['14', 81.5], 12 | ['15', 61.2], 13 | ['16', 7], 14 | ['17', 12], 15 | ], 16 | }, 17 | ]; 18 | 19 | const config = { 20 | tooltip: { 21 | itemTpl: '
  • ' + 22 | '' + 23 | 'v{name}: {value}%' + 24 | '
    • ', 25 | } 26 | }; 27 | 28 | export default () => ( 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /packages/console-combo-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleComboChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'ECS使用量', 7 | type: 'bar', 8 | yAxis: 0, 9 | data: [['2015', 5], ['2016', 10], ['2017', 15], ['2018', 30], ['2019', 36]], 10 | }, 11 | { 12 | name: 'ECS同比增长', 13 | type: 'line', 14 | yAxis: 1, 15 | data: [['2015', 0.3], ['2016', 0.1], ['2017', 0.5], ['2018', 1], ['2019', 0.2]], 16 | }, 17 | ]; 18 | 19 | const config = { 20 | yAxis: [ 21 | { 22 | formatter: val => val + '万', 23 | }, 24 | { 25 | formatter: val => val * 100 + '%', 26 | }, 27 | ], 28 | }; 29 | 30 | export default () => ( 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-console-doc-template", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "clean": "gatsby clean", 8 | "dev": "npm run clean && gatsby develop", 9 | "start": "npm run develop", 10 | "debug": "npm run clean && npx --node-arg=--inspect-brk gatsby develop", 11 | "build": "npm run clean && gatsby build --prefix-paths", 12 | "push-build": "npm run build && gh-pages -d public" 13 | }, 14 | "dependencies": {}, 15 | "devDependencies": { 16 | "@alicloud/gatsby-theme-console-doc": "^1.0.11", 17 | "gatsby": "^2.18.2", 18 | "react": "^16.12.0", 19 | "react-dom": "^16.12.0", 20 | "styled-components": "^4.4.1", 21 | "typescript": "^3.7.2", 22 | "gh-pages": "^2.1.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/LegendTip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'Source', 7 | data: [ 8 | ['A', 4590], 9 | ['B', 2628], 10 | ['C', 1228], 11 | ['D', 825], 12 | ['E', 622], 13 | ['F', 1207], 14 | ], 15 | }, 16 | ]; 17 | 18 | const config = { 19 | padding: [0, 120 + 50, 0, 0], 20 | legend: { 21 | position: 'right-center', 22 | offsetY: 10, 23 | offsetX: 50, 24 | itemFormatter: function(value: string) { 25 | return `${value} 400 40%`; 26 | }, 27 | tip: true, 28 | tipFormatter: (value: string) => value + 1, 29 | }, 30 | }; 31 | 32 | export default () => ( 33 | 34 | ); 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # common 2 | 3 | .* 4 | !.*ignore 5 | !.*rc 6 | !.gitattributes 7 | !.aoneci.yml 8 | !.editorconfig 9 | !.storybook 10 | !.demoProjectTemplate 11 | !site/.eslintrc.js 12 | 13 | site/public/ 14 | lerna-debug.json 15 | # Logs 16 | logs 17 | *.log* 18 | 19 | # Runtime data 20 | pids 21 | *.pid 22 | *.seed 23 | *.pid.lock 24 | 25 | # Directory for instrumented libs generated by jscoverage/JSCover 26 | lib-cov 27 | 28 | # Coverage directory used by tools like istanbul 29 | coverage 30 | 31 | # Dependency directories 32 | bower_components 33 | node_modules/ 34 | jspm_packages/ 35 | 36 | # Compiled binary addons (https://nodejs.org/api/addons.html) 37 | build/Release 38 | lib/ 39 | es/ 40 | dist/ 41 | 42 | # TypeScript v1 declaration files 43 | typings/ 44 | 45 | # Output of 'npm pack' 46 | *.tgz 47 | 48 | packages/*/lib/ 49 | packages/*/es/ 50 | packages/*/dist/ -------------------------------------------------------------------------------- /packages/console-funnel-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-funnel-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "build": "npm run clean && rollup -c", 15 | "prepare": "npm run build", 16 | "watch": "rollup -c -w" 17 | }, 18 | "publishConfig": { 19 | "access": "public" 20 | }, 21 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-funnel-chart", 22 | "license": "MIT", 23 | "dependencies": { 24 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 25 | "tslib": "^1.10.0" 26 | }, 27 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 28 | } 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.4.5(2020-02-09) 4 | ### Fixs 5 | - 修复Console-sankey-chart packages.json依赖版本不正确的问题 6 | 7 | ## 0.4.4(2020-02-06) 8 | ### Features 9 | - Console-shared-utils加入legend.tip属性支持 10 | 11 | ## 0.4.3(2020-01-03) 12 | ### Features 13 | - Console-sankey-chart加入拓扑图的支持 14 | 15 | ## 0.4.2(2020-01-03) 16 | ### Fixs 17 | - 修复Console-sankey-chart默认Tooltip展示无效信息的问题 18 | 19 | ## 0.4.1(2020-01-02) 20 | ### Fixs 21 | - 升级版本号修复部分包发包失败的错误版本号 22 | 23 | ## 0.4.0(2020-01-02) 24 | ### Features 25 | - 桑基图Console-sankey-chart支持 26 | 27 | ## 0.3.0(2019-12-30) 28 | ### Features 29 | - Console-pie-chart 加入`sliceGap`支持 30 | 31 | ## 0.2.0(2019-12-27) 32 | 33 | ### Fixs 34 | - 修复测试版本里众多问题 35 | 36 | ### Docs 37 | - 每个组件加入对应的示例 38 | 39 | ## 0.1.0-beta.1(2019-10-27) 40 | 41 | ### Features 42 | - 发布第一个测试可用版本 43 | 44 | ## 0.1.0(2019-12-05) 45 | 46 | ### Features 47 | - 发布第一个正式版本 -------------------------------------------------------------------------------- /.demoProjectTemplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wind-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.tsx", 7 | "dependencies": { 8 | "styled-components": "^4.2.0", 9 | "react": "16.8.4", 10 | "react-dom": "16.8.4", 11 | "react-scripts": "2.1.3", 12 | "@alicloud/console-chart": "^0.4.8" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "16.8.8", 16 | "@types/react-dom": "16.8.2", 17 | "@types/styled-components": "^4.1.8", 18 | "typescript": "3.3.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "useWorkspaces": true, 3 | "npmClient": "yarn", 4 | "publish": { 5 | "message": "Publish", 6 | "npmClient": "npm", 7 | "registry": "https://registry.npmjs.org/", 8 | "version": { 9 | "allowBranch": [ 10 | "master", 11 | "develop" 12 | ] 13 | } 14 | }, 15 | "packages": [ 16 | "packages/console-bar-chart", 17 | "packages/console-chart", 18 | "packages/console-combo-chart", 19 | "packages/console-dot-chart", 20 | "packages/console-funnel-chart", 21 | "packages/console-line-chart", 22 | "packages/console-miniline-chart", 23 | "packages/console-pie-chart", 24 | "packages/console-radar-chart", 25 | "packages/console-rose-chart", 26 | "packages/console-shared-utils", 27 | "packages/console-tree-graph", 28 | "packages/console-sankey-chart" 29 | ], 30 | "version": "0.4.10-alpha.0" 31 | } 32 | -------------------------------------------------------------------------------- /packages/console-bar-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-bar-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "lint": "tslint --project .", 14 | "clean": "rm -rf lib es dist", 15 | "build": "npm run clean && rollup -c", 16 | "prepare": "npm run build", 17 | "watch": "rollup -c -w" 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-combo-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "tslib": "^1.10.0" 27 | }, 28 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 29 | } 30 | -------------------------------------------------------------------------------- /packages/console-pie-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-pie-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "build": "npm run clean && rollup -c", 15 | "prepare": "npm run build", 16 | "watch": "rollup -c -w", 17 | "lint": "tslint --project ." 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-pie-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "tslib": "^1.10.0" 27 | }, 28 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 29 | } 30 | -------------------------------------------------------------------------------- /packages/console-radar-chart/demo/Area.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleRadarChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'oss', 7 | data: [['specification', 25], ['feature', 24], ['doc', 26]], 8 | color: '#E288CE', 9 | } 10 | ]; 11 | 12 | const config = { 13 | xAxis: { 14 | label: { 15 | formatter: val => val + '~' 16 | } 17 | }, 18 | guide: { 19 | line: [ 20 | { 21 | start: ['specification', 25.5], 22 | end: ['feature', 25.5], 23 | }, 24 | { 25 | start: ['specification', 25.5], 26 | end: ['doc', 25.5], 27 | }, 28 | { 29 | start: ['feature', 25.5], 30 | end: ['doc', 25.5], 31 | } 32 | ], 33 | }, 34 | area: true, 35 | }; 36 | 37 | export default () => ( 38 | 39 | ); 40 | -------------------------------------------------------------------------------- /packages/console-radar-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-radar-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "build": "npm run clean && rollup -c ", 15 | "prepare": "npm run build", 16 | "watch": "rollup -c -w", 17 | "lint": "tslint --project ." 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-radar-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "tslib": "^1.10.0" 27 | }, 28 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 29 | } 30 | -------------------------------------------------------------------------------- /packages/console-rose-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-rose-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "build": "npm run clean && rollup -c", 15 | "prepare": "npm run build", 16 | "watch": "rollup -c -w", 17 | "lint": "tslint --project ." 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-rose-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "tslib": "^1.10.0" 27 | }, 28 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 29 | } 30 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/config/index.ts: -------------------------------------------------------------------------------- 1 | import consoleDefaultConfig from './default'; 2 | import consoleYunzhiConfig from './yunzhi'; 3 | 4 | const consoleConfigMap = { 5 | default: consoleDefaultConfig, 6 | yunzhi: consoleYunzhiConfig, 7 | }; 8 | 9 | const CONSOLE_CONFIG_KEY = 'console_config_key'; 10 | const CONSOLE_DEFAULT_CONFIG_KEY = 'default'; 11 | 12 | export function setConsoleConfig(key: string) { 13 | if (!key) { 14 | return; 15 | } 16 | try { 17 | window.localStorage.setItem(CONSOLE_CONFIG_KEY, key); 18 | } catch (e) {} 19 | } 20 | 21 | export function getConsoleConfig(key?: string) { 22 | let consoleConfigKey = null; 23 | try { 24 | consoleConfigKey = window.localStorage.getItem(CONSOLE_CONFIG_KEY); 25 | } catch (e) {} 26 | key = key || consoleConfigKey; 27 | return Object.assign(consoleConfigMap[CONSOLE_DEFAULT_CONFIG_KEY], consoleConfigMap[key]); 28 | } 29 | -------------------------------------------------------------------------------- /packages/console-dot-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-dot-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean": "rm -rf es lib dist", 13 | "clean-rpt": "rm -rf .rpt2_cache", 14 | "build": "rm -rf ./lib && rollup -c", 15 | "prepare": "rm -rf ./lib && rollup -c", 16 | "watch": "rollup -c -w", 17 | "lint": "tslint --project ." 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-dot-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "tslib": "^1.10.0" 27 | }, 28 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 29 | } 30 | -------------------------------------------------------------------------------- /packages/console-shared-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-shared-utils", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es" 9 | ], 10 | "scripts": { 11 | "clean-rpt": "rm -rf .rpt2_cache", 12 | "clean": "rm -rf lib es", 13 | "build": "npm run clean && rollup -c", 14 | "prepare": "npm run build", 15 | "watch": "rollup -c -w" 16 | }, 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "peerDependencies": { 21 | "react": "^16.9.0" 22 | }, 23 | "devDependencies": { 24 | "@types/lodash": "^4.14.138", 25 | "@types/react": "^16.9.2", 26 | "rollup": "1.19.4" 27 | }, 28 | "dependencies": { 29 | "@antv/g2": "3.4.10", 30 | "lodash": "^4.17.15", 31 | "tslib": "^1.10.0" 32 | }, 33 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 34 | } 35 | -------------------------------------------------------------------------------- /packages/console-miniline-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-miniline-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "build": "npm run clean && rollup -c", 15 | "prepare": "npm run build", 16 | "watch": "rollup -c -w", 17 | "lint": "tslint --project ." 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-miniline-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "tslib": "^1.10.0" 27 | }, 28 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 29 | } 30 | -------------------------------------------------------------------------------- /docs/2-concepts.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: concepts 3 | zhName: 基本介绍 4 | sort: 2 5 | --- 6 | 7 | # 图表库简介 8 | 9 | # Console-Chart 10 | 11 | Console-Chart 是阿里云xconsole团队基于[G2](https://antv.alipay.com/zh-cn/index.html)封装的控制台图表组件库。 12 | 13 | 在介绍 Console-Chart 之前，先介绍下 G2。[G2](https://antv.alipay.com/zh-cn/index.html)是蚂蚁金服前端团队开发的底层图表库，这个图表库功能强大，配置丰富，使用会带来以下问题： 14 | 15 | - 上手成本较大 16 | - 重复的图表开发 17 | - 不一致的交互体验 18 | - 基于场景的图表能力无法沉淀 19 | 20 | 同时我们也有自己的业务诉求： 21 | 22 | - 保持控制台图表组件的视觉、交互统一 23 | - 沉淀有控制台特色的图表能力 24 | - 为我们的客户提供高效的图表开发能力 25 | 26 | 于是 Console-Chart 就诞生了。 27 | 28 | # 开源 29 | 为了帮助第三方云云产商提供统一的控制台解决方案，我们将控制台开发套件开源， **Console Chart** 是其中的一部分。 30 | 31 | 仓库地址： [alibaba-console-chart](https://github.com/aliyun/alibabacloud-console-chart)  32 | 33 | npm包地址：[@alicloud/console-chart](https://www.npmjs.com/package/@alicloud/console-chart) 34 | 35 | 有任何问题欢迎在github提供 [Issue](https://github.com/aliyun/alibabacloud-console-chart/issues) 36 | 37 | -------------------------------------------------------------------------------- /packages/console-combo-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-combo-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "compile": "rm -rf es && npx tsc --outDir es", 15 | "build": "npm run clean && rollup -c", 16 | "prepare": "npm run build", 17 | "watch": "rollup -c -w" 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-bar-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "tslib": "^1.10.0" 27 | }, 28 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 29 | } 30 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import MultiCol from './MultiCol'; 6 | import LinkStyle from './LinkStyle'; 7 | import Vertical from './Vertical'; 8 | import NodeAlign from './NodeAlign'; 9 | import Tooltip from './Tooltip'; 10 | import Topology from './Topology'; 11 | import TopologyVertical from './TopologyVertical'; 12 | // import NodeShape from './NodeShape'; 13 | 14 | storiesOf('ConsoleSankeyChart', module) 15 | .add('基本桑基图', () => ) 16 | .add('多列情况', () => ) 17 | .add('配置边的样式', () => ) 18 | .add('垂直布局', () => ) 19 | .add('节点排列方式', () => ) 20 | .add('自定义Tooltip', () => ) 21 | .add('拓扑图', () => ) 22 | .add('垂直拓扑图', () => ) 23 | // .add('自定义节点展示内容', () => ) 24 | -------------------------------------------------------------------------------- /packages/console-tree-graph/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-tree-graph", 3 | "version": "0.4.5", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "build": "npm run clean && rollup -c ", 15 | "prepare": "npm run build", 16 | "watch": "rollup -c -w", 17 | "lint": "tslint --project ." 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-tree-graph", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@antv/g6": "^3.2.4", 26 | "tslib": "^1.10.0" 27 | }, 28 | "peerDependencies": { 29 | "react": "^16.9.0" 30 | }, 31 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 32 | } 33 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/GradualColor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'A产品', 7 | data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]], 8 | color: ['#0072ff', 'l (90) 0:#0072ff 1:#E3F2FD'] 9 | }, 10 | ]; 11 | 12 | const config = { 13 | area: true, 14 | smooth: true, 15 | }; 16 | 17 | const onTooltipChange = evt => { 18 | let items = evt.items; // tooltip显示的项，不处理的话会有2项 19 | // 在这里 去掉你想去掉的item，这里选择只要纯色的（线的颜色） 20 | const newItems = items.filter(x => x.color === '#0072ff'); 21 | items.splice(0); // 将原来的Tooltip Items清空 22 | items.push(newItems[0]); // 只展示你筛选后的结果 23 | } 24 | 25 | export default () => ( 26 | 34 | ); 35 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-sankey-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib es dist", 14 | "build": "npm run clean && rollup -c", 15 | "prepare": "npm run build", 16 | "watch": "rollup -c -w", 17 | "lint": "tslint --project ." 18 | }, 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-sankey-chart", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 26 | "d3-sankey": "^0.12.3", 27 | "tslib": "^1.10.0" 28 | }, 29 | "gitHead": "76efc38b27cda1d046b06c2e1cf8ac83de63ced1" 30 | } 31 | -------------------------------------------------------------------------------- /packages/console-tree-graph/README.md: -------------------------------------------------------------------------------- 1 | 2 | # 树图API 3 | 4 | # 引入方式 5 | 6 | ```javascript 7 | import ConsoleTreeGraph from '@alicloud/console-tree-graph'; 8 | ``` 9 | 10 | 注意，目前为了减少打包之后的体积大小，暂不将Graph相关的加入`console-chart`包内，所以只能通过单包引入的方式使用。 11 | 12 | # 示例 Demo 13 | 14 | ## 基本使用 15 | 16 | [MDXInstruction:importDemo:Basic](./demo/Basic.tsx) 17 | 18 | # 配置 Config 19 | 20 | ## 数据列配置 21 | 22 | | 属性 | 说明 | 类型 | 默认值 | 可选值 | 23 | | --- | --- | --- | --- | --- | 24 | | name | 数据列名称 | String | - | - | 25 | | data | 数据 | Object | - | - | 26 | 27 | 注意：与普通图表不同的是，树图的数据结构为一个`JSON对象`，通过`children`属性来关联子级节点。 28 | 29 | 最简单的一个数据例子： 30 | ```json 31 | { 32 | id: '01', 33 | children: [ 34 | { 35 | id: '011', 36 | children: [] 37 | }, 38 | { 39 | id: '012', 40 | children: [ 41 | { 42 | id: '0121', 43 | } 44 | ] 45 | } 46 | ] 47 | } 48 | ``` 49 | 50 | ## 专属配置 51 | 52 | ### fitView: Boolean 53 | 是否自适应画布 54 | 55 | -------------------------------------------------------------------------------- /packages/console-rose-chart/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: console-rose-chart 3 | zhName: 玫瑰图 4 | --- 5 | 6 | # 玫瑰图API 7 | 8 | # 引入方式 9 | 10 | ```javascript 11 | import { ConsoleRoseChart } from '@alicloud/console-chart'; 12 | ``` 13 | 14 | # 示例 Demo 15 | 16 | ## 基本用法 17 | 18 | [MDXInstruction:importDemo:Basic](./demo/Basic.tsx) 19 | 20 | ## 带坐标轴 21 | 22 | [MDXInstruction:importDemo:Axis](./demo/Axis.tsx) 23 | 24 | ## 单色玫瑰图 25 | 26 | [MDXInstruction:importDemo:SingleColor](./demo/SingleColor.tsx) 27 | 28 | # 配置 Config 29 | 30 | # 数据列配置 31 | 32 | | 属性 | 说明 | 类型 | 默认值 | 可选值 | 33 | | --- | --- | --- | --- | --- | 34 | | name | 数据列名称 | String | - | - | 35 | | data | 数据 | Array | - | - | 36 | 37 | ## 通用配置 38 | 39 | | 属性 | 说明 | 40 | | --- | --- | 41 | | padding | 配置绘图内边距 | 42 | | xAxis | 配置x轴 | 43 | | yAxis | 配置y轴 | 44 | | legend | 配置图例 | 45 | | guide | 配置辅助元素 | 46 | | tooltip | 配置提示信息 | 47 | | label | 配置图形文本 | 48 | | size | 配置自定义大小 | 49 | | style | 配置自定义样式 | 50 | 51 | ## 专属配置 52 | -------------------------------------------------------------------------------- /packages/console-bar-chart/demo/DodgeStack.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleBarChart } from '@alicloud/console-chart'; 3 | 4 | let data = [ 5 | { 6 | name: 'ECS', 7 | dodge: '分组1', 8 | data: [], 9 | }, 10 | { 11 | name: 'OSS', 12 | dodge: 'OSS', 13 | data: [], 14 | }, 15 | { 16 | name: 'ACS', 17 | dodge: 'OSS', 18 | data: [], 19 | }, 20 | { 21 | name: 'RDS', 22 | dodge: 'OSS', 23 | data: [], 24 | }, 25 | ]; 26 | 27 | for (let i = 1; i < 11; i++) { 28 | const name = i + '月'; 29 | data[0].data.push([name, Math.random() * 100 + 300]); 30 | data[1].data.push([name, Math.random() * 100 + 100]); 31 | data[2].data.push([name, Math.random() * 100 + 100]); 32 | data[3].data.push([name, Math.random() * 100 + 100]); 33 | } 34 | 35 | export default () => { 36 | const config = { 37 | dodgeStack: true, 38 | }; 39 | return ( 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /docs/13-config-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: config-style 3 | zhName: 配置-样式 4 | sort: 13 5 | --- 6 | 7 | # config-自定义样式 8 | 9 | 用于配置几何标记显示的图形属性。 10 | 11 | 12 | # 配置方法 13 | 14 | ## 关闭 style 15 | Console-Chart 默认关闭所有图形自定义样式。 16 | 17 | 18 | ## 自定义 19 | 20 | ### 统一设置 21 | ```javascript 22 | config.style = { 23 | lineWidth: 2, 24 | }; 25 | ``` 26 | 27 | 28 | ### callback方式设置 29 | 使用回调函数设置属性 30 | 31 | ```javascript 32 | config.style = [ 33 | 'x*y', 34 | { 35 | lineWidth: (x, y) => {}, 36 | stroke: 'red', 37 | }, 38 | ]; 39 | ``` 40 | 41 | 42 | # 属性列表 43 | 44 | ## 通用属性 45 | 46 | - `fill` 设置用于填充绘画的颜色、渐变或模式；
    47 | - `stroke` 设置用于笔触的颜色、渐变或模式；
    48 | - `shadowColor` 设置用于阴影的颜色；
    49 | - `shadowBlur`  设置用于阴影的模糊级别；
    50 | - `shadowOffsetX` 设置阴影距形状的水平距离；
    51 | - `shadowOffsetY` 设置阴影距形状的垂直距离；
    52 | - `opacity` 设置绘图的当前 alpha 或透明值；
    53 | - `globalCompositeOperation` 设置新图像如何绘制到已有的图像上 54 | 55 | style 的更详细的配置项请参考：[绘图属性](https://www.yuque.com/antv/g2-docs/api-graphic) 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Console Chart 2 | 3 | Console Chart 是阿里云云管控解决方案开发套件的一部分，旨在为用户提供一款**开箱即用、统一视觉方案**的图表组件库。 4 | 5 |

    6 | 7 |

    8 | 9 | [![NPM version][npm-image]][npm-url] 10 | 11 | [npm-image]: https://img.shields.io/npm/v/@alicloud/console-chart.svg?style=flat-square 12 | [npm-url]: https://npmjs.org/package/@alicloud/console-chart 13 | 14 | 15 | ## Install 16 | 17 | ```bash 18 | npm install @alicloud/console-chart --save 19 | ``` 20 | 21 | ## Usage 22 | 23 | ```js 24 | // 引入组件 25 | import { ConsoleLineChart } from "@alicloud/console-chart"; 26 | 27 | ; 28 | ``` 29 | 30 | ## API 文档 31 | 32 | [API 文档](https://aliyun.github.io/alibabacloud-console-chart/guides/quick-start) 33 | 34 | ## CONTRIBUTING 35 | 36 | 代码贡献请参考 [CONTRIBUTING.md](CONTRIBUTING.md) 37 | 38 | ## CHANGELOG 39 | 40 | 版本日志请参考 [CHANGELOG.md](CHANGELOG.md) 41 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/g2Helper/tooltip.ts: -------------------------------------------------------------------------------- 1 | import { get, isFunction } from "../common/utils"; 2 | 3 | const sortFun = { 4 | // 升序 5 | asc(a: any, b: any) { 6 | return a.value - b.value; 7 | }, 8 | // 降序 9 | desc(a: any, b: any) { 10 | return b.value - a.value; 11 | } 12 | }; 13 | 14 | function tooltip(chart: any, config: any, configTooltip, specConfig = null) { 15 | if (configTooltip === false || get(configTooltip, "visible") === false) { 16 | chart.tooltip(false); 17 | return; 18 | } 19 | const finalConfigTooltip = Object.assign({}, configTooltip, specConfig); 20 | 21 | chart.tooltip(finalConfigTooltip); 22 | 23 | const sort = get(finalConfigTooltip, "sort"); 24 | if (sort) { 25 | chart.on("tooltip:change", (ev: any) => { 26 | // 如果设置了合法的排序关键字，则开始排序 27 | if (isFunction(sort)) { 28 | ev.items.sort(sort); 29 | } else if (sortFun[sort]) { 30 | ev.items.sort(sortFun[sort]); 31 | } 32 | }); 33 | } 34 | } 35 | 36 | export default tooltip; 37 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/config/default.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | ConsoleLineChart: {}, 3 | ConsoleBarChart: {}, 4 | ConsoleComboChart: {}, 5 | ConsolePieChart: {}, 6 | ConsoleMinilineChart: { 7 | padding: [0, 0, 0, 0], 8 | xAxis: {}, 9 | yAxis: {}, 10 | tooltip: false, 11 | area: false, 12 | smooth: false, 13 | symbol: false, 14 | label: false, 15 | }, 16 | ConsoleRadarChart: { 17 | xAxis: { 18 | label: {}, 19 | line: null, 20 | tickLine: null, 21 | grid: { 22 | lineStyle: { 23 | lineDash: null, 24 | }, 25 | }, 26 | }, 27 | yAxis: { 28 | label: { 29 | offset: 8, 30 | textStyle: { 31 | textAlign: 'right', 32 | }, 33 | }, 34 | line: null, 35 | tickLine: null, 36 | grid: { 37 | type: 'polygon', 38 | lineStyle: { 39 | lineDash: null, 40 | }, 41 | }, 42 | }, 43 | }, 44 | ConsoleFunnelChart: {}, 45 | ConsoleDotChart: {}, 46 | ConsoleRoseChart: {}, 47 | }; 48 | -------------------------------------------------------------------------------- /packages/console-line-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-line-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "lib", 8 | "es", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "clean-rpt": "rm -rf .rpt2_cache", 13 | "clean": "rm -rf lib dist es", 14 | "compile": "rm -rf es && npx tsc --outDir es", 15 | "compile:cjs": "rm -rf lib && npx tsc --outDir lib --module commonjs", 16 | "bundle": "rm -rf dist && rollup -c", 17 | "build": "npm run clean && rollup -c", 18 | "prepare": "npm run build", 19 | "watch": "rollup -c -w", 20 | "lint": "tslint --project ." 21 | }, 22 | "publishConfig": { 23 | "access": "public" 24 | }, 25 | "repository": "https://github.com/aliyun/alibabacloud-console-chart/tree/master/packages/console-line-chart", 26 | "license": "MIT", 27 | "dependencies": { 28 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0", 29 | "tslib": "^1.10.0" 30 | }, 31 | "gitHead": "c79b139c3484d9590cfe3e43b106c5e718bf2ff9" 32 | } 33 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './types/index'; 2 | 3 | import { G2 } from './common/utils'; 4 | import * as Utils from './common/utils'; 5 | import * as Constants from './constants/index'; 6 | export { G2, Utils, Constants }; 7 | 8 | export * from './g2Helper/common'; 9 | export { default as dataAdapter } from './g2Helper/dataAdapter'; 10 | 11 | export * from './g2Helper/rectAutoTickCount'; 12 | 13 | export { default as axisX } from './g2Helper/axisX'; 14 | export { default as axisY } from './g2Helper/axisY'; 15 | export { default as drawLine } from './g2Helper/drawLine'; 16 | 17 | export { default as g2Tooltip } from './g2Helper/tooltip'; 18 | export { default as g2Guide } from './g2Helper/guide'; 19 | export { default as g2Label } from './g2Helper/label'; 20 | export { default as g2Style } from './g2Helper/style'; 21 | export { default as g2Size } from './g2Helper/size'; 22 | export { default as g2Legend } from './g2Helper/legend'; 23 | export { default as g2Factory } from './g2Helper/g2Factory'; 24 | 25 | export * from './theme/index'; 26 | export * from './config/index'; 27 | -------------------------------------------------------------------------------- /packages/console-chart/src/index.ts: -------------------------------------------------------------------------------- 1 | import ConsoleBarChart from '@alicloud/console-bar-chart'; 2 | import ConsoleLineChart from '@alicloud/console-line-chart'; 3 | import ConsoleComboChart from '@alicloud/console-combo-chart'; 4 | import ConsoleFunnelChart from '@alicloud/console-funnel-chart'; 5 | import ConsoleMinilineChart from '@alicloud/console-miniline-chart'; 6 | import ConsolePieChart from '@alicloud/console-pie-chart'; 7 | import ConsoleDotChart from '@alicloud/console-dot-chart'; 8 | import ConsoleRadarChart from '@alicloud/console-radar-chart'; 9 | import ConsoleRoseChart from '@alicloud/console-rose-chart'; 10 | import ConsoleSankeyChart from '@alicloud/console-sankey-chart'; 11 | 12 | import { G2, setConsoleConfig, setConsoleTheme } from '@alicloud/console-shared-utils'; 13 | 14 | export { 15 | ConsoleBarChart, 16 | ConsoleLineChart, 17 | ConsoleComboChart, 18 | ConsoleFunnelChart, 19 | ConsoleMinilineChart, 20 | ConsolePieChart, 21 | ConsoleDotChart, 22 | ConsoleRadarChart, 23 | ConsoleRoseChart, 24 | ConsoleSankeyChart, 25 | setConsoleConfig, 26 | setConsoleTheme, 27 | G2, 28 | }; 29 | -------------------------------------------------------------------------------- /packages/console-dot-chart/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: console-dot-chart 3 | zhName: 散点图 4 | --- 5 | 6 | # 散点图API 7 | 8 | # 引入方式 9 | 10 | ```javascript 11 | import { ConsoleDotChart } from '@alicloud/console-chart'; 12 | ``` 13 | 14 | # 示例 Demo 15 | 16 | ## 基本散点图 17 | [MDXInstruction:importDemo:Basic](./demo/Basic.tsx) 18 | 19 | ## 多组数据 20 | [MDXInstruction:importDemo:Multi](./demo/Multi.tsx) 21 | 22 | ## 自定义点大小 23 | [MDXInstruction:importDemo:Size](./demo/Size.tsx) 24 | 25 | ## 扰动图 26 | [MDXInstruction:importDemo:Disturbance](./demo/Disturbance.tsx) 27 | 28 | # 配置 Config 29 | 30 | # 数据列配置 31 | | 属性 | 说明 | 类型 | 默认值 | 可选值 | 32 | | --- | --- | --- | --- | --- | 33 | | name | 数据列名称 | String | - | - | 34 | | data | 数据 | - | - | - | 35 | | color | 自定义当前数据列颜色 | String | 主题`color_24` | - | 36 | 37 | ## 通用配置 38 | 39 | | 属性 | 说明 | 40 | | --- | --- | 41 | | padding | 配置绘图内边距 | 42 | | xAxis | 配置x轴 | 43 | | yAxis | 配置y轴 | 44 | | legend | 配置图例 | 45 | | guide | 配置辅助元素 | 46 | | tooltip | 配置提示信息 | 47 | | label | 配置图形文本 | 48 | | size | 配置自定义大小 | 49 | | style | 配置自定义样式 | 50 | 51 | ## 专属配置 52 | 53 | ### jitter: Boolean 54 | 是否展示成扰动图 55 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/Multi.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'ECS', 7 | data: [ 8 | ['201804', 31], 9 | ['201805', 39], 10 | ['201806', 32], 11 | ['201807', 35], 12 | ['201808', 31], 13 | ['201809', 36], 14 | ['201810', 32], 15 | ['201811', 34], 16 | ], 17 | }, 18 | { 19 | name: 'OSS', 20 | data: [ 21 | ['201804', 12], 22 | ['201805', 12], 23 | ['201806', 12], 24 | ['201807', 11], 25 | ['201808', 10], 26 | ['201809', 14], 27 | ['201810', 12], 28 | ['201811', 11], 29 | ], 30 | }, 31 | { 32 | name: 'RDS', 33 | data: [ 34 | ['201804', 48], 35 | ['201805', 45], 36 | ['201806', 43], 37 | ['201807', 44], 38 | ['201808', 41], 39 | ['201809', 45], 40 | ['201810', 42], 41 | ['201811', 45], 42 | ], 43 | }, 44 | ]; 45 | 46 | const config = {}; 47 | 48 | export default () => ( 49 | 50 | ); 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Alibaba Cloud 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/14-config-size.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: config-size 3 | zhName: 配置-大小 4 | sort: 14 5 | --- 6 | 7 | # config-size自定义 8 | 9 | 10 | 11 | # 配置方式 12 | 13 | ## 关闭size自定义 14 | Console-Chart 默认关闭 所有图表size自定义功能。 15 | 16 | ```javascript 17 | config.size = null; 18 | ``` 19 | 20 | 21 | ## 开启size自定义 22 | 23 | ### 使用常量 24 | ```javascript 25 | config.size = 5; 26 | ``` 27 | 28 | 注意： 不同图形的 size 的含义有所差别： 29 | 30 | - point 图形的 size 影响点的半径大小； 31 | - line, area, path 中的 size 影响线的粗细； 32 | - interval 的 size 影响柱状图的宽度 33 | 34 | 35 | ### 使用Field 36 | 37 | 根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。
    我们使用 highcharts 的数据，所有的数据都会转换为`x*y*type*facet`的形式，所以请按照实际情况填入`field`字段。 38 | 39 | ```javascript 40 | config.size = 'y'; 41 | ``` 42 | 43 | 44 | ### 使用区间 45 | 根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。 46 | 47 | ```javascript 48 | config.size = [5, 10]; 49 | ``` 50 | 51 | 52 | ### 使用函数 53 | 如果传递的是一个普通的回调函数，我们默认的内部处理逻辑为： 54 | ```javascript 55 | config.size = type => {} 56 | ``` 57 | 58 | 59 | ### 指定字段+函数 60 | 61 | `field` 指定要设置 size 的字段， 可以是`x*y*type*facet` 的任意组合。 62 | 63 | `sizeConfig` 可以是`number`、 `array`、`function`形式。 64 | 65 | ```javascript 66 | config.size = ['x*y', (x, y) => {}]; 67 | ``` 68 | 69 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/XAxisAsync.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, Fragment } from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'NAT', 7 | data: [ 8 | [1522512000000, 302335], 9 | [1525104000000, 402335], 10 | [1527782400000, 202335], 11 | [1530374400000, 502335], 12 | [1533052800000, 102335], 13 | [1535731200000, 602335], 14 | [1538323200000, 202335], 15 | [1541001600000, 402335], 16 | ], 17 | }, 18 | ]; 19 | 20 | const configDefault = { 21 | xAxis: { 22 | type: 'time', 23 | mask: 'YYYY-MM-DD' 24 | }, 25 | }; 26 | 27 | const configInnner = { 28 | xAxis: { 29 | type: 'time', 30 | mask: 'YYYY-MM-DD HH:mm:ss' 31 | }, 32 | } 33 | 34 | export default () => { 35 | const [flag, setFlag] = useState(false); 36 | 37 | const onClick = () => { 38 | setFlag(!flag); 39 | } 40 | 41 | return ( 42 | 43 | 44 | 49 | 50 | ); 51 | } -------------------------------------------------------------------------------- /packages/console-sankey-chart/demo/NodeShape.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // import { ConsoleSankeyChart } from '@alicloud/console-chart'; 3 | import ConsoleSankeyChart from '../src'; 4 | 5 | const config = { 6 | topology: true, 7 | direction: 'vertical', 8 | } 9 | 10 | export default () => ( 11 | 18 | ); 19 | 20 | const data = [ 21 | { 22 | name: '节点数据', 23 | type: 'node', 24 | data: [ 25 | { 26 | "name": "ecs" 27 | }, 28 | { 29 | "name": "oss" 30 | }, 31 | { 32 | "name": "oos" 33 | }, 34 | { 35 | "name": "cdn" 36 | }, 37 | ] 38 | }, 39 | { 40 | name: '边数据', 41 | type: 'link', 42 | data: [ 43 | { 44 | "source": 3, 45 | "target": 0, 46 | "value": 5 47 | }, 48 | { 49 | "source": 2, 50 | "target": 0, 51 | "value": 5 52 | }, 53 | { 54 | "source": 1, 55 | "target": 0, 56 | "value": 5 57 | }, 58 | ] 59 | } 60 | ]; 61 | 62 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | // "module": "ES2015", 4 | // "moduleResolution": "node", 5 | "target": "es5", 6 | "module": "esnext", 7 | "outDir": "lib", 8 | "lib": ["es6", "dom", "es2017.string"], 9 | // "sourceMap": true, 10 | /* Strict Type-Checking Option */ 11 | "strict": false /* enable all strict type-checking options */, 12 | /* Additional Checks */ 13 | "jsx": "react", 14 | "importHelpers": true, 15 | "moduleResolution": "node", 16 | "declaration": true, 17 | "declarationMap": true, 18 | "skipLibCheck": true, 19 | "noUnusedLocals": true /* Report errors on unused locals. */, 20 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 21 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 22 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 23 | "checkJs": false, 24 | "resolveJsonModule": true, 25 | "noStrictGenericChecks": true, 26 | "noImplicitUseStrict": true, 27 | "allowSyntheticDefaultImports": true 28 | }, 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/Dot.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'ECS', 7 | data: [ 8 | ['201804', 31], 9 | ['201805', 39], 10 | ['201806', 32], 11 | ['201807', 35], 12 | ['201808', 31], 13 | ['201809', 36], 14 | ['201810', 32], 15 | ['201811', 34], 16 | ], 17 | }, 18 | { 19 | name: 'OSS', 20 | data: [ 21 | ['201804', 12], 22 | ['201805', 12], 23 | ['201806', 12], 24 | ['201807', 11], 25 | ['201808', 10], 26 | ['201809', 14], 27 | ['201810', 12], 28 | ['201811', 11], 29 | ], 30 | }, 31 | { 32 | name: 'RDS', 33 | data: [ 34 | ['201804', 48], 35 | ['201805', 45], 36 | ['201806', 43], 37 | ['201807', 44], 38 | ['201808', 41], 39 | ['201809', 45], 40 | ['201810', 42], 41 | ['201811', 45], 42 | ], 43 | }, 44 | ]; 45 | 46 | const config = { 47 | xAxis: { 48 | type: 'cat', 49 | }, 50 | symbol: true, 51 | }; 52 | 53 | export default () => ( 54 | 55 | ); 56 | -------------------------------------------------------------------------------- /packages/console-combo-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | // "module": "ES2015", 4 | // "moduleResolution": "node", 5 | "target": "es5", 6 | "module": "esnext", 7 | "outDir": "lib", 8 | "lib": ["es6", "dom", "es2017.string"], 9 | // "sourceMap": true, 10 | /* Strict Type-Checking Option */ 11 | "strict": false /* enable all strict type-checking options */, 12 | /* Additional Checks */ 13 | "jsx": "react", 14 | "importHelpers": true, 15 | "moduleResolution": "node", 16 | // "declaration": true, 17 | // "declarationMap": true, 18 | "skipLibCheck": true, 19 | "noUnusedLocals": true /* Report errors on unused locals. */, 20 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 21 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 22 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 23 | "checkJs": false, 24 | "resolveJsonModule": true, 25 | "noStrictGenericChecks": true, 26 | "noImplicitUseStrict": true, 27 | "downlevelIteration": true, 28 | }, 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /packages/console-line-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | // "module": "ES2015", 4 | // "moduleResolution": "node", 5 | "target": "es5", 6 | "module": "esnext", 7 | "outDir": "lib", 8 | "lib": ["es6", "dom", "es2017.string"], 9 | // "sourceMap": true, 10 | /* Strict Type-Checking Option */ 11 | "strict": false /* enable all strict type-checking options */, 12 | /* Additional Checks */ 13 | "jsx": "react", 14 | "importHelpers": true, 15 | "moduleResolution": "node", 16 | "declaration": true, 17 | "declarationMap": true, 18 | "skipLibCheck": true, 19 | "noUnusedLocals": true /* Report errors on unused locals. */, 20 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 21 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 22 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 23 | "checkJs": false, 24 | "resolveJsonModule": true, 25 | "noStrictGenericChecks": true, 26 | "noImplicitUseStrict": true, 27 | "allowSyntheticDefaultImports": true 28 | }, 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Multi from './Multi'; 6 | import XLabel from './XLabel'; 7 | import XAxisTickInterval from './XAxisTickInterval'; 8 | import DoubleAxis from './DoubleAxis'; 9 | import Unit from './Unit'; 10 | import Smooth from './Smooth'; 11 | import Dot from './Dot'; 12 | import Stack from './Stack'; 13 | import XAxisAsync from './XAxisAsync'; 14 | import YAxisMin from './YAxisMin'; 15 | import GradualColor from './GradualColor'; 16 | import LegendClick from './LegendClick'; 17 | import OneDotToLine from './OneDotToLine'; 18 | 19 | storiesOf('ConsoleLineChart', module) 20 | .add('基本折线图', () => ) 21 | .add('多组数据', () => ) 22 | .add('自定义X轴label', () => ) 23 | .add('自定义x轴时间刻度间距', () => ) 24 | .add('X轴动态变化', XAxisAsync) 25 | .add('Y轴最小值与正整数', YAxisMin) 26 | .add('设置双轴', () => ) 27 | .add('配置顶部单位', () => ) 28 | .add('设置光滑曲线', () => ) 29 | .add('线条带点', () => ) 30 | .add('面积堆栈图', () => ) 31 | .add('颜色渐变图', GradualColor) 32 | .add('图例点击控制', LegendClick) 33 | .add('只有一个点数据时展示线', OneDotToLine) 34 | -------------------------------------------------------------------------------- /packages/console-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alicloud/console-chart", 3 | "version": "0.4.10-alpha.0", 4 | "main": "lib/index.js", 5 | "module": "es/index.js", 6 | "files": [ 7 | "es", 8 | "lib" 9 | ], 10 | "scripts": { 11 | "clean-rpt": "rm -rf .rpt2_cache", 12 | "clean": "rm -rf lib es dist", 13 | "build": "npm run clean && rollup -c", 14 | "prepare": "npm run build", 15 | "watch": "rollup -c -w" 16 | }, 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "dependencies": { 21 | "@alicloud/console-bar-chart": "^0.4.10-alpha.0", 22 | "@alicloud/console-combo-chart": "^0.4.10-alpha.0", 23 | "@alicloud/console-dot-chart": "^0.4.10-alpha.0", 24 | "@alicloud/console-funnel-chart": "^0.4.10-alpha.0", 25 | "@alicloud/console-line-chart": "^0.4.10-alpha.0", 26 | "@alicloud/console-miniline-chart": "^0.4.10-alpha.0", 27 | "@alicloud/console-pie-chart": "^0.4.10-alpha.0", 28 | "@alicloud/console-radar-chart": "^0.4.10-alpha.0", 29 | "@alicloud/console-rose-chart": "^0.4.10-alpha.0", 30 | "@alicloud/console-sankey-chart": "^0.4.10-alpha.0", 31 | "@alicloud/console-shared-utils": "^0.4.10-alpha.0" 32 | }, 33 | "gitHead": "76efc38b27cda1d046b06c2e1cf8ac83de63ced1" 34 | } 35 | -------------------------------------------------------------------------------- /packages/console-dot-chart/demo/Multi.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleDotChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'ECS数据', 7 | data: [ 8 | ['2018-04-01', 1892], 9 | ['2018-04-02', 7292], 10 | ['2018-04-03', 5714], 11 | ['2018-04-04', 5354], 12 | ['2018-04-05', 2014], 13 | ['2018-04-06', 22], 14 | ['2018-04-07', 1023], 15 | ['2018-04-08', 5218], 16 | ['2018-04-09', 8759], 17 | ['2018-04-10', 5981], 18 | ['2018-04-11', 4533], 19 | ['2018-04-12', 1398], 20 | ], 21 | }, 22 | { 23 | name: 'OSS数据', 24 | data: [ 25 | ['2018-04-01', 2892], 26 | ['2018-04-02', 6292], 27 | ['2018-04-03', 3714], 28 | ['2018-04-04', 4354], 29 | ['2018-04-05', 8014], 30 | ['2018-04-06', 2200], 31 | ['2018-04-07', 1023], 32 | ['2018-04-08', 2218], 33 | ['2018-04-09', 6759], 34 | ['2018-04-10', 3981], 35 | ['2018-04-11', 2533], 36 | ['2018-04-12', 1398], 37 | ], 38 | }, 39 | ]; 40 | 41 | const config = { 42 | padding: [40, 24, 24, 44], 43 | xAxis: { 44 | type: 'cat', 45 | tickCount: 10, 46 | }, 47 | }; 48 | 49 | export default () => ( 50 | 51 | ); 52 | -------------------------------------------------------------------------------- /packages/console-line-chart/demo/Unit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleLineChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: 'ECS', 7 | data: [ 8 | ['201804', 31], 9 | ['201805', 39], 10 | ['201806', 32], 11 | ['201807', 35], 12 | ['201808', 31], 13 | ['201809', 36], 14 | ['201810', 32], 15 | ['201811', 34], 16 | ], 17 | }, 18 | { 19 | name: 'OSS', 20 | data: [ 21 | ['201804', 12], 22 | ['201805', 12], 23 | ['201806', 12], 24 | ['201807', 11], 25 | ['201808', 10], 26 | ['201809', 14], 27 | ['201810', 12], 28 | ['201811', 11], 29 | ], 30 | }, 31 | { 32 | name: 'RDS', 33 | data: [ 34 | ['201804', 48], 35 | ['201805', 45], 36 | ['201806', 43], 37 | ['201807', 44], 38 | ['201808', 41], 39 | ['201809', 45], 40 | ['201810', 42], 41 | ['201811', 45], 42 | ], 43 | }, 44 | ]; 45 | 46 | const config = { 47 | padding: [50, 50, 50, 60], 48 | xAxis: { 49 | type: 'time', 50 | mask: 'YYYY-MM-DD', 51 | }, 52 | guide: { 53 | topUnit: ['单位: 个', '单位: %'], 54 | }, 55 | }; 56 | 57 | export default () => ( 58 | 59 | ); 60 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/demo/Basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleSankeyChart } from '@alicloud/console-chart'; 3 | 4 | const config = {} 5 | 6 | export default () => ( 7 | 8 | ); 9 | 10 | const data = [ 11 | { 12 | name: '节点数据', 13 | type: 'node', 14 | data: [ 15 | { 16 | "name": "ecs" 17 | }, 18 | { 19 | "name": "oss" 20 | }, 21 | { 22 | "name": "oos" 23 | }, 24 | { 25 | "name": "cdn" 26 | }, 27 | { 28 | "name": "composer" 29 | }, 30 | { 31 | "name": "rds" 32 | }, 33 | ] 34 | }, 35 | { 36 | name: '边数据', 37 | type: 'link', 38 | data: [ 39 | { 40 | "source": 3, 41 | "target": 0, 42 | "value": 5 43 | }, 44 | { 45 | "source": 2, 46 | "target": 0, 47 | "value": 5 48 | }, 49 | { 50 | "source": 1, 51 | "target": 0, 52 | "value": 5 53 | }, 54 | { 55 | "source": 0, 56 | "target": 4, 57 | "value": 5 58 | }, 59 | { 60 | "source": 0, 61 | "target": 5, 62 | "value": 10 63 | }, 64 | ] 65 | } 66 | ]; 67 | 68 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/ComplexTooltip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsolePieChart } from '@alicloud/console-chart'; 3 | 4 | const data = [ 5 | { 6 | name: '等级', 7 | data: [ 8 | ['11', 55.0], 9 | ['12', 26.8], 10 | ['13', 112.8], 11 | ['14', 81.5], 12 | ['15', 61.2], 13 | ['16', 7], 14 | ['17', 12], 15 | ], 16 | }, 17 | ]; 18 | 19 | const config = {}; 20 | 21 | const onTooltipChange = evt => { 22 | console.log(evt); 23 | const items = evt.items; // tooltip显示的项 24 | const origin = items[0]; // 将一条数据改成多条数据 25 | const range = origin.point._origin; 26 | console.log(range); 27 | items.splice(0); // 清空 28 | items.push( 29 | Object.assign( 30 | {}, 31 | origin, 32 | { 33 | name: 'key', 34 | marker: true, 35 | value: range.x, 36 | }, 37 | ), 38 | ); 39 | items.push( 40 | Object.assign( 41 | {}, 42 | origin, 43 | { 44 | name: 'value', 45 | marker: true, 46 | value: range.y, 47 | }, 48 | ), 49 | ); 50 | } 51 | 52 | export default () => ( 53 | 61 | ); 62 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/demo/Tooltip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleSankeyChart } from '@alicloud/console-chart'; 3 | 4 | const config = { 5 | } 6 | 7 | export default () => ( 8 | 9 | ); 10 | 11 | const data = [ 12 | { 13 | name: '节点数据', 14 | type: 'node', 15 | data: [ 16 | { 17 | "name": "ecs" 18 | }, 19 | { 20 | "name": "oss" 21 | }, 22 | { 23 | "name": "oos" 24 | }, 25 | { 26 | "name": "cdn" 27 | }, 28 | { 29 | "name": "composer" 30 | }, 31 | { 32 | "name": "rds" 33 | }, 34 | ] 35 | }, 36 | { 37 | name: '边数据', 38 | type: 'link', 39 | data: [ 40 | { 41 | "source": 3, 42 | "target": 0, 43 | "value": 5 44 | }, 45 | { 46 | "source": 2, 47 | "target": 0, 48 | "value": 5 49 | }, 50 | { 51 | "source": 1, 52 | "target": 0, 53 | "value": 5 54 | }, 55 | { 56 | "source": 0, 57 | "target": 4, 58 | "value": 5 59 | }, 60 | { 61 | "source": 0, 62 | "target": 5, 63 | "value": 10 64 | }, 65 | ] 66 | } 67 | ]; 68 | 69 | -------------------------------------------------------------------------------- /packages/console-radar-chart/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: console-radar-chart 3 | zhName: 雷达图 4 | --- 5 | 6 | # 雷达图API 7 | 8 | # 引入方式 9 | 10 | ```javascript 11 | import { ConsoleRadarChart } from '@alicloud/console-chart'; 12 | ``` 13 | 14 | # 示例 Demo 15 | 16 | ## 基本使用 17 | 18 | [MDXInstruction:importDemo:Basic](./demo/Basic.tsx) 19 | 20 | ## 面积图 21 | 22 | [MDXInstruction:importDemo:Area](./demo/Area.tsx) 23 | 24 | ## 多组数据 25 | 26 | [MDXInstruction:importDemo:Multi](./demo/Multi.tsx) 27 | 28 | ## 自定义坐标轴 29 | 30 | [MDXInstruction:importDemo:Axis](./demo/Axis.tsx) 31 | 32 | # 配置 Config 33 | 34 | ## 通用配置 35 | | 属性 | 说明 | 36 | | --- | --- | 37 | | padding | 配置绘图内边距 | 38 | | xAxis | 配置x轴 | 39 | | yAxis | 配置y轴 | 40 | | legend | 配置图例 | 41 | | guide | 配置辅助元素 | 42 | | tooltip | 配置提示信息 | 43 | | label | 配置图形文本 | 44 | | size | 配置自定义大小 | 45 | | style | 配置自定义样式 | 46 | 47 | ## 专属配置 48 | 49 | ### symbol: Boolean 50 | 是否展示数据点 51 | 52 | ### smooth: Boolean 53 | 显示成光滑曲线 54 | 55 | ### area: Boolean 56 | 是否显示面积雷达图 57 | 58 | ### stack: Boolean 59 | 是否显示堆栈图, 仅在`area=true`时生效 60 | 61 | ### radius: Number 62 | 设置极坐标系的半径，可控制显示图形的大小 63 | 64 | ## 数据列配置 65 | 66 | | 属性 | 说明 | 类型 | 默认值 | 可选值 | 67 | | --- | --- | --- | --- | --- | 68 | | name | 数据列名称 | String | - | - | 69 | | data | 数据 | - | - | - | 70 | | color | 自定义当前数据列颜色 | String | 主题`color_24` | - | 71 | -------------------------------------------------------------------------------- /docs/6-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: config 3 | zhName: 通用配置 4 | sort: 6 5 | --- 6 | 7 | # config 配置 8 | 9 | 在接下来的文档中，你会看到很多 `config` 的配置项，但默认情况下，Console-Chart 是不需要配置的，你甚至不需要传入任何的 `config` 配置就能够得到你期望的图表。 10 | 11 | 一方面为了满足更多用户的业务诉求，另外也为了能够将控制台特色的图表能力释放出去，Console-Chart从逻辑上将 `config` 配置分成两种类型： 通用配置、组件专属配置。 12 | 13 | ## 常见配置样例 14 | 15 | ```javascript 16 | // 无需任何配置 17 | const config = {}; 18 | 19 | // 设置图表的内边距 20 | const config = { 21 | padding: [50, 50, 50, 50], 22 | }; 23 | 24 | // 格式化X轴的刻度值 25 | const config = { 26 | xAxis: { 27 | label: { 28 | formatter: val => val 29 | } 30 | }, 31 | yAxis: {}, 32 | }; 33 | 34 | // 设置图例的位置 35 | const config = { 36 | legend: { 37 | position: 'bottom', 38 | }, 39 | }; 40 | ``` 41 | 42 | ## 通用配置列表 43 | 所有组件均可配置，且配置方式相同，列表如下： 44 | 45 | | 属性 | 说明 | 相关文档 | 46 | | --- | --- | --- | 47 | | xAxis | 配置 X 轴 | - | 48 | | yAxis | 配置 Y 轴 | - | 49 | | legend | 配置图例 | - | 50 | | guide | 配置引导内容 | - | 51 | | tooltip | 配置鼠标提示框 (tooltip) | - | 52 | | label | 配置标签 | - | 53 | | size | 配置图形 size | - | 54 | | style | 配置图形 style | - | 55 | 56 | ## 专属配置 57 | 58 | 每个图表组件由于功能的差异，独享控制其能力的配置项，可参考相关组件的 API 文档。 59 | 60 | ```javascript 61 | // 线图专属配置项 62 | config = { 63 | smooth: true, // 可实现将折线转化为光滑曲线 64 | } 65 | 66 | // 柱状图专属配置 67 | config = { 68 | dodgeStack: true, // 可实现分组堆叠柱状图 69 | } 70 | ``` 71 | 72 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/demo/Topology.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleSankeyChart } from '@alicloud/console-chart'; 3 | 4 | const config = { 5 | topology: true, 6 | } 7 | 8 | export default () => ( 9 | 10 | ); 11 | 12 | const data = [ 13 | { 14 | name: '节点数据', 15 | type: 'node', 16 | data: [ 17 | { 18 | "name": "ecs" 19 | }, 20 | { 21 | "name": "oss" 22 | }, 23 | { 24 | "name": "oos" 25 | }, 26 | { 27 | "name": "cdn" 28 | }, 29 | { 30 | "name": "composer" 31 | }, 32 | { 33 | "name": "rds" 34 | }, 35 | ] 36 | }, 37 | { 38 | name: '边数据', 39 | type: 'link', 40 | data: [ 41 | { 42 | "source": 3, 43 | "target": 0, 44 | "value": 5 45 | }, 46 | { 47 | "source": 2, 48 | "target": 0, 49 | "value": 5 50 | }, 51 | { 52 | "source": 1, 53 | "target": 0, 54 | "value": 5 55 | }, 56 | { 57 | "source": 0, 58 | "target": 4, 59 | "value": 5 60 | }, 61 | { 62 | "source": 0, 63 | "target": 5, 64 | "value": 10 65 | }, 66 | ] 67 | } 68 | ]; 69 | 70 | -------------------------------------------------------------------------------- /packages/console-shared-utils/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface MetaDataItem { 2 | key: string; 3 | alias: string; 4 | axis: string; 5 | tickCount?: number; 6 | showMax?: boolean; 7 | } 8 | 9 | export interface IntervalChartConfig { 10 | type: any; 11 | transpose: boolean; 12 | } 13 | 14 | export interface LineChartConfig { 15 | shape: string; 16 | showPoint: boolean; 17 | } 18 | 19 | export interface AreaChartConfig { 20 | showLine: boolean; // 展示线条 21 | showPoint: boolean; // 展示点 22 | } 23 | 24 | export interface AreaStackChartConfig { 25 | showPoint: boolean; 26 | showLine: boolean; 27 | attachLast: boolean; // 图例跟随（一般在右侧显示） 28 | type: 'value' | 'percent'; // value || percent 29 | showCount: true; // 当type为value时，展示“总计” 30 | } 31 | 32 | export interface ConsoleChartProps { 33 | data: any[]; 34 | metaData?: MetaDataItem[]; 35 | chartConfig?: IntervalChartConfig | LineChartConfig | AreaChartConfig; 36 | } 37 | 38 | export interface IProps { 39 | width?: number; 40 | height?: number; 41 | config?: any; 42 | data?: any; 43 | event?: object; 44 | forceFit?: boolean; 45 | customChartProcess?: any; 46 | padding?: any; 47 | changeConfig?: any; 48 | onGetG2Instance?: Function; 49 | className?: any; 50 | style?: any; 51 | children?: any; 52 | animate?: boolean; 53 | forceUpdate?: boolean; 54 | } 55 | -------------------------------------------------------------------------------- /packages/console-sankey-chart/demo/Vertical.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ConsoleSankeyChart } from '@alicloud/console-chart'; 3 | 4 | const config = { 5 | direction: 'vertical', 6 | } 7 | 8 | export default () => ( 9 | 10 | ); 11 | 12 | const data = [ 13 | { 14 | name: '节点数据', 15 | type: 'node', 16 | data: [ 17 | { 18 | "name": "ecs" 19 | }, 20 | { 21 | "name": "oss" 22 | }, 23 | { 24 | "name": "oos" 25 | }, 26 | { 27 | "name": "cdn" 28 | }, 29 | { 30 | "name": "composer" 31 | }, 32 | { 33 | "name": "rds" 34 | }, 35 | ] 36 | }, 37 | { 38 | name: '边数据', 39 | type: 'link', 40 | data: [ 41 | { 42 | "source": 3, 43 | "target": 0, 44 | "value": 5 45 | }, 46 | { 47 | "source": 2, 48 | "target": 0, 49 | "value": 5 50 | }, 51 | { 52 | "source": 1, 53 | "target": 0, 54 | "value": 5 55 | }, 56 | { 57 | "source": 0, 58 | "target": 4, 59 | "value": 5 60 | }, 61 | { 62 | "source": 0, 63 | "target": 5, 64 | "value": 10 65 | }, 66 | ] 67 | } 68 | ]; 69 | 70 | -------------------------------------------------------------------------------- /packages/console-pie-chart/demo/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Basic from './Basic'; 5 | import Label from './Label'; 6 | import Tooltip from './Tooltip'; 7 | import Legend from './Legend'; 8 | import LegendRight from './LegendRight'; 9 | import LegendTip from './LegendTip'; 10 | import Circle from './Circle'; 11 | import CircleGuide from './CircleGuide'; 12 | import Select from './Select'; 13 | import SelectCircleGuide from './SelectCircleGuide'; 14 | import ComplexTooltip from './ComplexTooltip'; 15 | import SingleColors from './SingleColors'; 16 | import MultiColors from './MultiColors'; 17 | import CircleSlice from './CircleSlice'; 18 | 19 | storiesOf('ConsolePieChart', module) 20 | .add('基本用法', () => ) 21 | .add('带label指标', () =>