├── .eslintignore ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .npmignore ├── .prettierrc.js ├── .storybook ├── main.js ├── preview.js └── storybooks.scss ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── abc.json ├── build.after.js ├── build.before.js ├── build.json ├── font ├── SF-Pro-Medium │ ├── SF-Pro-Medium-embed.css │ ├── SF-Pro-Medium.css │ ├── SF-Pro-Medium.eot │ ├── SF-Pro-Medium.svg │ ├── SF-Pro-Medium.ttf │ └── SF-Pro-Medium.woff ├── SF-Pro-Regular │ ├── SF-Pro-Regular-embed.css │ ├── SF-Pro-Regular.css │ ├── SF-Pro-Regular.eot │ ├── SF-Pro-Regular.svg │ ├── SF-Pro-Regular.ttf │ └── SF-Pro-Regular.woff ├── dinmedium │ ├── dinmedium-embed.css │ ├── dinmedium.css │ ├── dinmedium.eot │ ├── dinmedium.svg │ ├── dinmedium.ttf │ └── dinmedium.woff ├── txddinmedium │ ├── txddinmedium-embed.css │ ├── txddinmedium.css │ ├── txddinmedium.eot │ ├── txddinmedium.svg │ ├── txddinmedium.ttf │ └── txddinmedium.woff └── txddinregular │ ├── txddinregular-embed.css │ ├── txddinregular.css │ ├── txddinregular.eot │ ├── txddinregular.svg │ ├── txddinregular.ttf │ └── txddinregular.woff ├── loader └── teamix-debugger-loader.js ├── package-lock.json ├── package.json ├── sass-extract-js ├── plugin.js └── transformVars.js ├── src ├── ChartProvider │ └── index.tsx ├── Util.ts ├── Wbar │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wbox │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wcandlestick │ └── index.tsx ├── Wcapacity │ ├── index.tsx │ ├── interface.ts │ └── percentBar │ │ ├── index.scss │ │ └── index.tsx ├── Wcircle │ ├── index.scss │ ├── index.tsx │ └── scss │ │ ├── function.scss │ │ ├── mixin.scss │ │ └── variable.scss ├── Wcontainer │ ├── index.scss │ ├── index.tsx │ ├── scss │ │ ├── function.scss │ │ ├── mixin.scss │ │ └── variable.scss │ └── views │ │ └── divider.tsx ├── Wcount │ ├── dep │ │ └── CountUp.ts │ ├── index.scss │ ├── index.tsx │ └── scss │ │ ├── mixin.scss │ │ └── variable.scss ├── Wdashboard │ ├── dashboard.jsx │ ├── index.jsx │ ├── index.scss │ └── scss │ │ ├── mixin.scss │ │ └── variable.scss ├── Wfunnel │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wgauge │ ├── index.scss │ └── index.tsx ├── Wheatmap │ ├── index.scss │ └── index.tsx ├── Whexagonal │ └── index.tsx ├── Whierarchy │ ├── index.scss │ └── index.tsx ├── Whistogram │ └── index.tsx ├── Wicon │ ├── cdn.scss │ ├── cdn.tsx │ ├── font_180585_2frjb4evzia.eot │ ├── font_180585_2frjb4evzia.svg │ ├── font_180585_2frjb4evzia.ttf │ ├── font_180585_2frjb4evzia.woff │ ├── font_180585_2frjb4evzia.woff2 │ ├── index.scss │ ├── index.tsx │ └── scss │ │ ├── function.scss │ │ ├── mixin.scss │ │ └── variable.scss ├── Wline │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wlinebar │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wlinebox │ └── index.tsx ├── Wlinescatter │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wlistcontainer │ ├── index.scss │ └── index.tsx ├── Wmap │ ├── child.tsx │ ├── index.scss │ ├── index.tsx │ └── mapData │ │ ├── chinaGeo.json │ │ ├── chinaGeoInfo.ts │ │ └── southChinaSea.jsx ├── Wminicontainer │ ├── index.scss │ ├── index.tsx │ └── scss │ │ ├── function.scss │ │ ├── mixin.scss │ │ └── variable.scss ├── Wminiline │ ├── index.scss │ └── index.tsx ├── Wmulticircle │ ├── index.scss │ └── index.tsx ├── Wnightingale │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wnumber │ ├── index.scss │ ├── index.tsx │ └── scss │ │ ├── function.scss │ │ ├── mixin.scss │ │ └── variable.scss ├── Wnumbercard │ ├── index.scss │ └── index.tsx ├── Wpie │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wplaceholder │ ├── index.scss │ ├── index.tsx │ └── scss │ │ ├── function.scss │ │ ├── mixin.scss │ │ └── variable.scss ├── Wradar │ ├── gui.schema.json │ ├── index.scss │ └── index.tsx ├── Wrectangle │ ├── index.scss │ └── index.tsx ├── Wsankey │ ├── index.scss │ └── index.tsx ├── Wscatter │ ├── index.scss │ └── index.tsx ├── Wshoot │ ├── index.scss │ ├── index.tsx │ └── shoot.ts ├── Wsunburst │ ├── index.scss │ └── index.tsx ├── Wtreemap │ ├── index.scss │ └── index.tsx ├── aop │ ├── component │ │ ├── FoldableLegend │ │ │ ├── index.scss │ │ │ └── index.tsx │ │ ├── FreeTooltip │ │ │ ├── index.scss │ │ │ └── index.tsx │ │ ├── GradientLegend │ │ │ ├── index.scss │ │ │ └── index.tsx │ │ ├── TableLegend │ │ │ ├── index.scss │ │ │ └── index.tsx │ │ └── reactLegend.tsx │ └── controller │ │ ├── index.ts │ │ ├── legend.ts │ │ └── tooltip.tsx ├── cdn.scss ├── cdn.ts ├── common │ ├── Base.tsx │ ├── LegendMarker.tsx │ ├── Tooltip │ │ ├── index.scss │ │ └── index.tsx │ ├── arrow │ │ ├── index.scss │ │ ├── index.tsx │ │ └── scss │ │ │ └── variable.scss │ ├── autoTimeScale.ts │ ├── autoTimeTicksMethod.ts │ ├── bigDataType.ts │ ├── chartQuality.ts │ ├── chartRefs.ts │ ├── checkFunctions.ts │ ├── circleAnnoation.ts │ ├── colorMap.ts │ ├── common.ts │ ├── dataAdapter.ts │ ├── drawLine.ts │ ├── ellipsisLabel.ts │ ├── emptyDataType.ts │ ├── errorWrap.tsx │ ├── eventBus.ts │ ├── g2Connect.ts │ ├── g2ConnectFilter.ts │ ├── geomSize.ts │ ├── geomStyle.ts │ ├── globalResizeObserver.ts │ ├── guide.ts │ ├── index.scss │ ├── interaction │ │ ├── actions │ │ │ ├── brush-filter.ts │ │ │ ├── drill-down.ts │ │ │ ├── list-checked.ts │ │ │ └── list-reverse-checked.ts │ │ ├── drill-down.ts │ │ ├── ellipsis-text.ts │ │ ├── index.ts │ │ ├── legend-custom-filter.ts │ │ └── types │ │ │ └── drill-down.ts │ ├── label.ts │ ├── legendFilter.ts │ ├── log.ts │ ├── platform.ts │ ├── polarLegendLayout.ts │ ├── postMessage.ts │ ├── rectLegend.ts │ ├── rectScrollbar.ts │ ├── rectSlider.ts │ ├── rectTooltip.ts │ ├── rectXAxis.ts │ ├── rectYAxis.ts │ ├── rectZoom.ts │ ├── tickMethod.ts │ ├── tween.ts │ ├── types.ts │ ├── updateChildrenPosition.ts │ └── utils │ │ └── transformTreeNodeData.ts ├── constants.ts ├── global.ts ├── index.scss ├── index.ts ├── locales │ ├── en-us.ts │ ├── index.ts │ ├── zh-cn.ts │ └── zh-tw.ts ├── plugins.ts ├── plugins │ └── worldmap │ │ ├── data │ │ └── world-without-antarctic.json │ │ └── index.tsx ├── rule │ ├── bigData.tsx │ ├── classification.ts │ ├── configRules.ts │ ├── data.ts │ ├── dataRules.ts │ ├── emptyData.ts │ ├── extremeData.ts │ ├── index.ts │ └── runRule.ts ├── themes │ ├── base.scss │ ├── dark.scss │ ├── dark.style.ts │ ├── index.scss │ ├── index.ts │ ├── normal.scss │ ├── normal.style.ts │ └── themeTools.ts └── track.ts ├── stories ├── chart.bar.stories.js ├── chart.box.stories.js ├── chart.candlestick.stories.js ├── chart.capacity.stories.js ├── chart.container.stories.js ├── chart.funnel.stories.js ├── chart.gauge.stories.js ├── chart.heatMap.stories.js ├── chart.hexagonal.stories.js ├── chart.hierarchy.stories.js ├── chart.histogram.stories.js ├── chart.line.stories.js ├── chart.lineBar.stories.js ├── chart.lineBox.stories.js ├── chart.lineScatter.stories.js ├── chart.map.stories.js ├── chart.multicircle.stories.js ├── chart.multipie.stories.js ├── chart.nightingale.stories.js ├── chart.numbercard.stories.jsx ├── chart.pie.stories.js ├── chart.radar.stories.js ├── chart.rectangle.stories.js ├── chart.sankey.stories.js ├── chart.scatter.stories.js ├── chart.treemap.stories.js ├── chart.util.stories.js ├── data │ ├── adcode.json │ ├── flare.json │ └── mobile.json ├── feat.autoTickCount.stories.js ├── feat.axis.stories.js ├── feat.bigdata.stories.js ├── feat.connect.stories.js ├── feat.emptydata.stories.js ├── feat.errorWrap.stories.js ├── feat.guide.stories.js ├── feat.legend.stories.js ├── feat.locale.stories.js ├── feat.monitor.stories.js ├── feat.ref.stories.js ├── feat.theme.stories.js ├── feat.tooltip.stories.js ├── fix.linebugs.stories.js └── plugin.worldmap.stories.js └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | # 忽略目录 2 | build/ 3 | _site/ 4 | config/ 5 | demo/ 6 | docs/ 7 | font/ 8 | guide/ 9 | lib/ 10 | site/ 11 | spec/ 12 | _bak/ 13 | stories/ 14 | 15 | # node 覆盖率文件 16 | coverage/ 17 | node_modules/ 18 | 19 | # 忽略文件 20 | **/*.min.js 21 | **/*-min.js 22 | 23 | # 工程构建脚本 24 | fie.config.js 25 | gulpfile.js 26 | webpack.config.js 27 | postcss.config.js 28 | 29 | # 第三方库 30 | components/common/merge.js 31 | components/wcount/lib/ 32 | 33 | # 地图数据 34 | components/wmap/mapData/ 35 | 36 | template/ 37 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-ali", 3 | "parser": "babel-eslint", 4 | "rules": { 5 | // // 低版本 nodejs 需要在 strict 模式下支持 es6 语法 6 | // "strict": "off", 7 | "no-console": "off", 8 | "max-len": ["warn", 120] 9 | // "import/no-dynamic-require": "off", 10 | // // 除文件顶部外也可在其他位置 require, 有些地方需要动态获取路径才引入 11 | // "global-require": "off", 12 | // "require-yield": "off" 13 | }, 14 | "globals": { 15 | "__VERSION__": true, 16 | "__THEME__": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | node_modules/ 3 | tmp/ 4 | temp/ 5 | *.log 6 | .DS_Store 7 | .idea 8 | coverage 9 | .vs 10 | 11 | build 12 | buildDev/ 13 | es 14 | lib 15 | demo/*.js 16 | .history/ 17 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | ############################ 2 | # NPM files 3 | ############################ 4 | **/node_modules 5 | **/bower_components 6 | node_modules 7 | bower_components 8 | npm-debug.log 9 | 10 | 11 | ############################ 12 | # Temp files 13 | ############################ 14 | temp 15 | tmp 16 | .tmp 17 | *.swo 18 | *.swp 19 | *.swn 20 | *.swm 21 | *.diff 22 | *.log 23 | *.patch 24 | *.bak 25 | *.log 26 | *.iml 27 | *.ipr 28 | *.iws 29 | *.out 30 | *.gz 31 | *# 32 | *~ 33 | ~* 34 | 35 | 36 | ############################ 37 | # Editor & OS files 38 | ############################ 39 | .idea 40 | .DS_STORE 41 | .Trashes 42 | .project 43 | .rebooted 44 | .*proj 45 | Thumbs.db 46 | ehthumbs.db 47 | Icon? 48 | nbproject 49 | 50 | 51 | ############################ 52 | # Report files 53 | ############################ 54 | coverages 55 | coverage 56 | reports 57 | report 58 | lib-cov 59 | html-report 60 | nohup.out 61 | out 62 | logs 63 | log 64 | 65 | 66 | ############################ 67 | # Other 68 | ############################ 69 | .node_history 70 | .svn 71 | **/tms 72 | .nodejs-cache 73 | .node-diamond-client-cache 74 | node_hsf_config_snapshots 75 | run 76 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 100, 3 | tabWidth: 2, 4 | semi: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const packageInfo = require('../package'); 4 | const srcPath = path.resolve(__dirname, '../src'); 5 | 6 | module.exports = { 7 | "stories": [ 8 | '../stories/*.stories.@(js|jsx|ts|tsx)' 9 | // "../src/**/*.stories.mdx", 10 | // "../src/**/*.stories.@(js|jsx|ts|tsx)" 11 | ], 12 | "addons": [ 13 | "@storybook/addon-essentials" 14 | ], 15 | "framework": "@storybook/react", 16 | // babel: async (options) => { 17 | // // ...options, 18 | // console.log('babel', options); 19 | // // any extra options you want to set 20 | // return options; 21 | // }, 22 | webpackFinal: (config) => { 23 | config.plugins.push( 24 | new webpack.DefinePlugin({ 25 | __VERSION__: JSON.stringify(packageInfo.version), 26 | __THEME__: JSON.stringify('index') 27 | }), 28 | ); 29 | 30 | config.module.rules.push( 31 | { 32 | test: /\.scss$/, 33 | use: ['style-loader', 'css-loader', 'sass-loader'], 34 | include: path.resolve(__dirname, '../'), 35 | }, 36 | { 37 | test: /\.(woff|woff2|eot|ttf|otf|svg)((\?|#).*)?$/, 38 | use: [{ 39 | loader: 'file-loader', 40 | options: { 41 | name: '[name].[ext]', 42 | publicPath: './', 43 | }, 44 | }], 45 | }, 46 | ); 47 | 48 | if (config.resolve.alias) { 49 | config.resolve.alias['@alicloud/cloud-charts'] = srcPath; 50 | } else { 51 | config.resolve.alias = { 52 | '@alicloud/cloud-charts': srcPath, 53 | }; 54 | } 55 | 56 | return config; 57 | }, 58 | } 59 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import './storybooks.scss'; 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: "^on[A-Z].*" }, 5 | controls: { 6 | matchers: { 7 | color: /(background|color)$/i, 8 | date: /Date$/, 9 | }, 10 | }, 11 | } -------------------------------------------------------------------------------- /.storybook/storybooks.scss: -------------------------------------------------------------------------------- 1 | div { 2 | // 由于默认值为content-box,这里增加全局样式用于解决实际业务组件容器的盒子模型都是border-box的问题 3 | box-sizing: border-box; 4 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # 代码贡献 2 | 3 | 有任何疑问,欢迎提交 [Issues](https://github.com/alibaba/cloud-charts/issues) ,或者直接提交 [PR](https://github.com/alibaba/cloud-charts/pulls) ! 4 | 5 | ## 提交 issue 6 | 7 | 1. 请确定 issue 的类型。 8 | 9 | 2. 请避免提交重复的 issue,在提交之前搜索现有的 issue。 10 | 11 | 3.在标签(分类参考标签分类), 标题 或者内容中体现明确的意图。 12 | 13 | 随后负责人会确认 issue 意图,更新合适的标签,关联 milestone,指派开发者。 14 | 15 | ## 提交代码 16 | 17 | 推荐通过 Pull Request 方式提交代码。我们会 review 代码并合并到发布分支。 18 | 19 | 为了后期回溯历史的方便,请在提交 PR 时确保提供了以下信息。 20 | 21 | - 需求点(一般关联 issue 或者注释都算) 22 | - 升级原因(不同于 issue,可以简要描述下为什么要修改) 23 | - 关注点(针对用户而言,可以没有,一般是不兼容更新等,需要额外提示) 24 | 25 | 26 | ### 本地开发 27 | 28 | ```bash 29 | # 安装依赖 30 | $ npm install 31 | 32 | # 使用 storybook 调试开发 33 | npm run storybook 34 | ``` 35 | 36 | ### 代码风格 37 | 38 | 你的代码风格必须通过 eslint,你可以运行 `$ npm run lint` 本地测试。 39 | 40 | ### commit 规范 41 | 42 | 根据 [Angular规范](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format) 提交 commit, 这样 history 看起来更加清晰,还可以自动生成 changelog。 43 | 44 | ```xml 45 | (): 46 | 47 | 48 | 49 |