{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/0bedc66f-b16b-4fa0-b289-d59dc96322ea/demo_scenecase_sankey/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/ad045564-9abb-4449-8138-009deaaa7746/demo_scenecase_sankey/dependencies/herbox/0d7b758fdc47c7af5db47deeda4d99d4.json","ETag":"0D7B758FDC47C7AF5DB47DEEDA4D99D4","type":"json"}],"sourceCode":{"app.js":"App({\n onLaunch(options) {\n // 第一次打开\n // options.query == {number:1}\n console.info('App onLaunch');\n },\n onShow(options) {\n // 从后台被 scheme 重新打开\n // options.query == {number:1}\n },\n});\n","app.json":"{\"window\":{\"defaultTitle\":\"F6移动端demo\",\"allowsBounceVertical\":\"NO\",\"canPullDown\":\"NO\"},\"pages\":[\"pages/SceneCase/sankey/index\"]}\n","mini.project.json":"{\n \"enableAppxNg\": true,\n \"component2\": true\n}","package.json":"{\n \"name\": \"f6demo\",\n \"version\": \"1.0.0\",\n \"description\": \"f6demo\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"@antv/f6\": \"^0.0.12\",\n \"@antv/f6-alipay\": \"^0.0.2\",\n \"@babel/runtime\": \"^7.14.0\"\n },\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n","pages/SceneCase/sankey/data.js":"const colorArr = [\n '#5B8FF9',\n '#5AD8A6',\n '#5D7092',\n '#F6BD16',\n '#6F5EF9',\n '#6DC8EC',\n '#D3EEF9',\n '#DECFEA',\n '#FFE0C7',\n '#1E9493',\n '#BBDEDE',\n '#FF99C3',\n '#FFE0ED',\n '#CDDDFD',\n '#CDF3E4',\n '#CED4DE',\n '#FCEBB9',\n '#D3CEFD',\n '#945FB9',\n '#FF9845',\n];\n\nconst rawData = [\n {\n label: 'A',\n id: 'A',\n to: [\n {\n target: 'C',\n value: 200,\n },\n ],\n },\n {\n label: 'B',\n id: 'B',\n to: [\n {\n target: 'C',\n value: 400,\n },\n ],\n },\n {\n label: 'C',\n id: 'C',\n to: [\n {\n target: 'D',\n value: 300,\n },\n {\n target: 'E',\n value: 300,\n },\n ],\n },\n {\n label: 'D',\n id: 'D',\n to: [\n {\n target: 'F',\n value: 100,\n },\n {\n target: 'G',\n value: 200,\n },\n ],\n },\n {\n label: 'E',\n id: 'E',\n to: [\n {\n target: 'F',\n value: 200,\n },\n {\n target: 'G',\n value: 100,\n },\n ],\n },\n {\n label: 'F',\n id: 'F',\n },\n {\n label: 'G',\n id: 'G',\n },\n];\n\nconst dataTransform = (data) => {\n const nodes = [];\n const edges = [];\n const nodeRecvMap = {};\n\n data.forEach((node, i) => {\n const { id, label, color = colorArr[i % colorArr.length], to = [] } = node;\n\n let index = 0;\n to.forEach((rel) => {\n edges.push({\n source: id,\n target: rel.target,\n value: rel.value,\n color,\n sourceIndex: index,\n targetIndex: nodeRecvMap[rel.target] || 0,\n });\n index += rel.value || 0;\n if (rel.value) {\n nodeRecvMap[rel.target] = (nodeRecvMap[rel.target] || 0) + rel.value;\n }\n });\n nodes.push({\n id,\n label,\n color,\n outSize: index,\n });\n });\n\n nodes.forEach((node) => {\n node.inSize = nodeRecvMap[node.id] || 0;\n node.size = [4, Math.max(4, node.inSize, node.outSize)];\n });\n\n return {\n nodes,\n edges,\n };\n};\nconst result = dataTransform(rawData);\nexport default result;\n","pages/SceneCase/sankey/index.acss":"/* required by usingComponents */","pages/SceneCase/sankey/index.axml":"<f6-canvas\n width=\"{{width}}\"\n height=\"{{height}}\"\n forceMini=\"{{forceMini}}\"\n pixelRatio=\"{{pixelRatio}}\"\n onTouchEvent=\"handleTouch\"\n onInit=\"handleInit\"\n></f6-canvas>\n","pages/SceneCase/sankey/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport result from './data';\nimport dagreLayout from '@antv/f6/dist/extends/layout/dagreLayout';\n\n/**\n * sankey\n */\n\nPage({\n canvas: null,\n ctx: null,\n renderer: '', // mini、mini-native等，F6需要，标记环境\n isCanvasInit: false, // canvas是否准备好了\n graph: null,\n\n data: {\n width: 375,\n height: 600,\n pixelRatio: 2,\n forceMini: false,\n },\n\n onLoad() {\n F6.registerLayout('dagre', dagreLayout);\n // 同步获取window的宽高\n const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();\n\n F6.registerNode(\n 'dice-sankey-node',\n {\n jsx: (cfg) => `\n <group>\n <rect style={{ width: ${cfg.size[0]}, height: ${cfg.size[1]}, fill: ${cfg.color} }} />\n <text style={{ marginLeft: 6, marginTop: 24, fill: #333, stroke: ${cfg.color}, lineWidth: 2, fontSize: 24 }}>${cfg.label} ${cfg.size[1]}</text>\n </group>\n `,\n getAnchorPoints() {\n return [[0, 0]];\n },\n },\n 'single-node',\n );\n\n F6.registerEdge('dice-sankey-edge', {\n draw(cfg, group) {\n const { startPoint, endPoint, color } = cfg;\n const deltaY1 = Number(cfg.sourceIndex);\n const deltaY2 = Number(cfg.sourceIndex) + Number(cfg.value);\n const deltaY3 = Number(cfg.targetIndex);\n const deltaY4 = Number(cfg.targetIndex) + Number(cfg.value);\n const quaterX = (Math.abs(endPoint.x - startPoint.x) / 5) * 3;\n return group.addShape('path', {\n attrs: {\n fill: color,\n opacity: 0.6,\n path: [\n ['M', startPoint.x, startPoint.y + deltaY1],\n [\n 'C',\n endPoint.x - quaterX,\n startPoint.y + deltaY1,\n startPoint.x + quaterX,\n endPoint.y + deltaY3,\n endPoint.x,\n endPoint.y + deltaY3,\n ],\n ['L', endPoint.x, endPoint.y + deltaY4],\n [\n 'C',\n startPoint.x + quaterX,\n endPoint.y + deltaY4,\n endPoint.x - quaterX,\n startPoint.y + deltaY2,\n startPoint.x,\n startPoint.y + deltaY2,\n ],\n ['L', startPoint.x, startPoint.y + deltaY1],\n ['Z'],\n ],\n },\n });\n },\n });\n\n this.setData({\n width: windowWidth,\n height: windowHeight,\n pixelRatio,\n });\n },\n\n /**\n * 初始化cnavas回调，缓存获得的context\n * @param {*} ctx 绘图context\n * @param {*} rect 宽高信息\n * @param {*} canvas canvas对象，在render为mini时为null\n * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native\n */\n handleInit(ctx, rect, canvas, renderer) {\n this.isCanvasInit = true;\n this.ctx = wrapContext(ctx);\n this.renderer = renderer;\n this.canvas = canvas;\n this.updateChart();\n },\n\n /**\n * canvas派发的事件，转派给graph实例\n */\n handleTouch(e) {\n this.graph && this.graph.emitEvent(e);\n },\n\n updateChart() {\n const { width, height, pixelRatio } = this.data;\n\n // 创建F6实例\n this.graph = new F6.Graph({\n context: this.ctx,\n renderer: this.renderer,\n width,\n height,\n pixelRatio,\n defaultNode: {\n type: 'dice-sankey-node',\n },\n defaultEdge: {\n type: 'dice-sankey-edge',\n },\n fitView: true,\n fitViewPadding: 60,\n layout: {\n type: 'dagre',\n rankdir: 'LR',\n nodesep: 10,\n ranksep: 130,\n align: 'ul',\n },\n });\n\n this.graph.data(result);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/SceneCase/sankey/index.json":"{\n \"defaultTitle\": \"sankey\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/SceneCase/sankey/index.less":"page {\n background-color: #f7f7f7;\n border: 1px solid rgba(0,0,0,0);\n box-sizing: border-box;\n}\n\n.page-section-demo {\n padding: 32rpx;\n}\n\n.f6-canvas {\n z-index: 10;\n}","utils/common.js":"function strLen(str = '') {\n let len = 0;\n for (let i = 0; i < str.length; i++) {\n if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {\n len += 1;\n } else {\n len += 2;\n }\n }\n\n return len;\n}\n\nfunction measureText(text, font) {\n let fontSize = 12;\n if (font) {\n fontSize = parseInt(font.split(' ')[3], 10);\n }\n fontSize /= 2;\n return {\n width: strLen(text) * fontSize,\n };\n}\n\nexport { measureText };\n","utils/context.js":"import { measureText } from './common';\n/**\n * 部分小程序context会缺少函数，补上\n */\nfunction wrapContext(ctx) {\n if (!ctx) return;\n if (!ctx.measureText) {\n ctx.measureText = measureText;\n }\n return ctx;\n}\n\nexport { wrapContext };\n"},"dist":[{"name":"d046007b8560a90db7dd8750e288b759.json","size":785773,"url":"https://gw.alipayobjects.com/os/f6/63038106-dcfa-4181-abaf-d6116f51607f/demo_scenecase_sankey/dist/herbox/d046007b8560a90db7dd8750e288b759.json","ETag":"D046007B8560A90DB7DD8750E288B759","type":"json"}],"name":"pages/SceneCase/sankey/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}