diff --git a/package.json b/package.json index bd448218e5..326dd5594d 100644 --- a/package.json +++ b/package.json @@ -18,50 +18,50 @@ "release:beta": "pnpm publish --tag beta --no-git-checks -r --filter @ant-design/*" }, "devDependencies": { - "@babel/core": "^7.11.6", + "@babel/core": "^7.23.6", "@babel/polyfill": "^7.12.1", - "@babel/preset-env": "^7.13.9", - "@babel/preset-typescript": "^7.10.4", - "@changesets/cli": "^2.26.2", - "@swc/jest": "^0.2.23", - "@testing-library/jest-dom": "^5.5.0", + "@babel/preset-env": "^7.23.6", + "@babel/preset-typescript": "^7.23.3", + "@changesets/cli": "^2.27.1", + "@swc/jest": "^0.2.29", + "@testing-library/jest-dom": "^5.17.0", "@testing-library/react-hooks": "^7.0.2", - "@types/enzyme": "^3.10.5", - "@types/node": "^14.0.10", - "@types/webpack-env": "^1.14.1", - "@umijs/fabric": "^2.0.7", - "babel-loader": "^8.2.3", - "babel-plugin-named-asset-import": "^0.3.7", + "@types/enzyme": "^3.10.18", + "@types/node": "^14.18.63", + "@types/webpack-env": "^1.18.4", + "@umijs/fabric": "^2.14.1", + "babel-loader": "^8.3.0", + "babel-plugin-named-asset-import": "^0.3.8", "babel-polyfill": "^6.26.0", - "babel-preset-react-app": "^10.0.0", + "babel-preset-react-app": "^10.0.1", "babel-types": "^6.26.0", - "chalk": "^4.1.0", - "css-loader": "^6.4.0", - "ejs": "^3.0.2", + "chalk": "^4.1.2", + "css-loader": "^6.8.1", + "ejs": "^3.1.9", "enzyme": "^3.11.0", - "enzyme-to-json": "^3.4.4", + "enzyme-to-json": "^3.6.2", "eslint": "^7.32.0", "identity-obj-proxy": "^3.0.0", - "jest": "^26.0.1", - "jest-canvas-mock": "^2.4.0", + "jest": "^26.6.3", + "jest-canvas-mock": "^2.5.2", "jest-electron": "^0.1.12", - "jest-extended": "^1.2.0", + "jest-extended": "^1.2.1", "jest-less-loader": "^0.1.2", - "less": "^4.1.2", - "less-loader": "^10.1.0", - "np": "*", + "less": "^4.2.0", + "less-loader": "^10.2.0", + "np": "^9.2.0", "npm-run-all": "^4.1.5", - "prettier": "^2.8.7", - "pretty-quick": "^3.0.1", + "prettier": "^2.8.8", + "pretty-quick": "^3.1.3", "react-dev-utils": "^12.0.1", - "style-loader": "^3.3.0", - "typescript": "^4.0.3", - "vfile-reporter": "^7.0.2", - "webpack": "^5.58.2", - "webpack-bundle-analyzer": "^4.5.0", - "webpack-cli": "^4.9.0", - "webpack-dev-server": "^4.3.1", - "whatwg-fetch": "^3.0.0", + "style-loader": "^3.3.3", + "typescript": "^4.9.5", + "vfile-reporter": "^7.0.5", + "webpack": "^5.89.0", + "webpack-bundle-analyzer": "^4.10.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.15.1", + "whatwg-fetch": "^3.6.20", "yorkie": "^2.0.0" }, "pnpm": { @@ -79,9 +79,9 @@ "dependencies": { "less-plugin-npm-import": "^2.1.0", "remark-frontmatter": "^4.0.1", - "remark-parse": "^10.0.1", - "remark-stringify": "^10.0.2", - "to-vfile": "^7.2.3", + "remark-parse": "^10.0.2", + "remark-stringify": "^10.0.3", + "to-vfile": "^7.2.4", "unified": "^10.1.2" } } diff --git a/packages/plots/src/core/base/index.ts b/packages/plots/src/core/base/index.ts index 370e88a93b..a22f256224 100644 --- a/packages/plots/src/core/base/index.ts +++ b/packages/plots/src/core/base/index.ts @@ -93,6 +93,7 @@ export abstract class Plot extends EE { if (this.type !== 'base') { this.execAdaptor(); } + console.log(this.getSpecOptions()); // options 转换 this.chart.options(this.getSpecOptions()); // 渲染 diff --git a/packages/plots/src/core/plots/sankey/index.ts b/packages/plots/src/core/plots/sankey/index.ts index 300b908e07..3b54c63495 100644 --- a/packages/plots/src/core/plots/sankey/index.ts +++ b/packages/plots/src/core/plots/sankey/index.ts @@ -10,22 +10,33 @@ export class Sankey extends Plot { public type = 'sankey'; /** - * 获取 双轴图 默认配置项 + * 获取 桑基图 默认配置项 * 供外部使用 */ static getDefaultOptions(): Partial { - return { type: 'view', children: [{ type: 'sankey' }] }; + return { + type: 'view', + children: [{ type: 'sankey' }], + data: { + transform: [ + { + type: 'custom', + callback: (data) => ({ links: data }), + }, + ], + }, + }; } /** - * 获取 条形图 默认配置 + * 获取 桑基图 默认配置 */ protected getDefaultOptions() { return Sankey.getDefaultOptions(); } /** - * 条形图适配器 + * 桑基图适配器 */ protected getSchemaAdaptor(): (params: Adaptor) => void { return adaptor; diff --git a/site/examples/statistics/sankey/demo/alipay.js b/site/examples/statistics/sankey/demo/alipay.js new file mode 100644 index 0000000000..46148fde11 --- /dev/null +++ b/site/examples/statistics/sankey/demo/alipay.js @@ -0,0 +1,50 @@ +import { Sankey } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const colors = [ + '#5B8FF9', + '#61DDAA', + '#65789B', + '#F6BD16', + '#7262fd', + '#78D3F8', + '#9661BC', + '#F6903D', + '#008685', + '#F08BB4', +]; + +const DemoSankey = () => { + const config = { + data: { + value: [ + { source: '首次打开', target: '首页 UV', value: 160 }, + { source: '结果页', target: '首页 UV', value: 40 }, + { source: '验证页', target: '首页 UV', value: 10 }, + { source: '我的', target: '首页 UV', value: 10 }, + { source: '朋友', target: '首页 UV', value: 8 }, + { source: '其他来源', target: '首页 UV', value: 27 }, + { source: '首页 UV', target: '理财', value: 30 }, + { source: '首页 UV', target: '扫一扫', value: 40 }, + { source: '首页 UV', target: '服务', value: 35 }, + { source: '首页 UV', target: '蚂蚁森林', value: 25 }, + { source: '首页 UV', target: '跳失', value: 10 }, + { source: '首页 UV', target: '借呗', value: 30 }, + { source: '首页 UV', target: '花呗', value: 40 }, + { source: '首页 UV', target: '其他流向', value: 45 }, + ], + }, + scale: { color: { range: colors } }, + layout: { nodeWidth: 0.01 }, + linkColorField: (d) => d.source.key, + style: { + labelFontSize: 13, + linkFillOpacity: 0.4, + nodeStrokeWidth: 0, + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/sankey/demo/basic.js b/site/examples/statistics/sankey/demo/basic.js index d224939334..898854cc92 100644 --- a/site/examples/statistics/sankey/demo/basic.js +++ b/site/examples/statistics/sankey/demo/basic.js @@ -4,18 +4,9 @@ import ReactDOM from 'react-dom'; const DemoSankey = () => { const config = { - layout: { nodeAlign: 'center', nodePadding: 0.03 }, data: { type: 'fetch', value: 'https://assets.antv.antgroup.com/g2/energy.json', - transform: [ - { - type: 'custom', - callback: (data) => ({ - links: data, - }), - }, - ], }, scale: { color: { @@ -33,6 +24,7 @@ const DemoSankey = () => { ], }, }, + layout: { nodeAlign: 'center', nodePadding: 0.03 }, style: { labelSpacing: 3, labelFontWeight: 'bold', diff --git a/site/examples/statistics/sankey/demo/energy.js b/site/examples/statistics/sankey/demo/energy.js new file mode 100644 index 0000000000..5f3441ee30 --- /dev/null +++ b/site/examples/statistics/sankey/demo/energy.js @@ -0,0 +1,19 @@ +import { Sankey } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const DemoSankey = () => { + const config = { + data: { + type: 'fetch', + value: 'https://gw.alipayobjects.com/os/bmw-prod/fa3414cc-75ed-47b4-8306-f2ffe8c40127.json', + }, + scale: { color: { range: ['red', 'green', 'yellow'] } }, + layout: { nodeWidth: 0.01, nodePadding: 0.01 }, + linkColorField: (d) => d.source.key, + style: { linkFillOpacity: 0.4 }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/sankey/demo/meta.json b/site/examples/statistics/sankey/demo/meta.json index cf1ca51a71..ea33b3e699 100644 --- a/site/examples/statistics/sankey/demo/meta.json +++ b/site/examples/statistics/sankey/demo/meta.json @@ -11,6 +11,30 @@ "en": "Sankey" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dACBR7ANcfEAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "alipay.js", + "title": { + "zh": "支付宝流量桑基图", + "en": "Alipay sankey" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*fecqTpstXu0AAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "energy.js", + "title": { + "zh": "能量关系桑基图", + "en": "Energy sankey" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8o1RQJ2fqdsAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "node-sort-sankey.js", + "title": { + "zh": "节点排序前桑基图", + "en": "NodeSort sankey" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ubm3Q4E1qCAAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/site/examples/statistics/sankey/demo/node-sort-sankey.js b/site/examples/statistics/sankey/demo/node-sort-sankey.js new file mode 100644 index 0000000000..ef06eeac37 --- /dev/null +++ b/site/examples/statistics/sankey/demo/node-sort-sankey.js @@ -0,0 +1,53 @@ +import { Sankey } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const colors = [ + '#5B8FF9', + '#61DDAA', + '#65789B', + '#F6BD16', + '#7262fd', + '#78D3F8', + '#9661BC', + '#F6903D', + '#008685', + '#F08BB4', +]; + +const DemoSankey = () => { + const config = { + data: { + value: [ + { source: '首次打开', target: '首页 UV', value: 160 }, + { source: '结果页', target: '首页 UV', value: 40 }, + { source: '验证页', target: '首页 UV', value: 10 }, + { source: '我的', target: '首页 UV', value: 10 }, + { source: '朋友', target: '首页 UV', value: 8 }, + { source: '其他来源', target: '首页 UV', value: 27 }, + { source: '首页 UV', target: '理财', value: 30 }, + { source: '首页 UV', target: '扫一扫', value: 40 }, + { source: '首页 UV', target: '服务', value: 35 }, + { source: '首页 UV', target: '蚂蚁森林', value: 25 }, + { source: '首页 UV', target: '跳失', value: 10 }, + { source: '首页 UV', target: '借呗', value: 30 }, + { source: '首页 UV', target: '花呗', value: 40 }, + { source: '首页 UV', target: '其他流向', value: 45 }, + ], + }, + scale: { color: { range: colors } }, + layout: { + nodeWidth: 0.01, + nodeSort: (a, b) => b.value - a.value, + }, + linkColorField: (d) => d.source.key, + style: { + labelFontSize: 13, + linkFillOpacity: 0.4, + nodeStrokeWidth: 0, + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container'));