|
"getOption": "const series = context.panel.data.series.map((s) => {\n const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;\n const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;\n \n return {\n name: s.refId,\n type: 'line',\n showSymbol: false,\n areaStyle: {\n opacity: 0.1,\n },\n lineStyle: {\n width: 1,\n },\n data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),\n };\n});\n\n/**\n * Enable Data Zoom by default\n */\nsetTimeout(() => context.panel.chart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n dataZoomSelectActive: true,\n}), 500);\n\n/**\n * Update Time Range on Zoom\n */\ncontext.panel.chart.on('datazoom', function (params) {\n const startValue = params.batch[0]?.startValue;\n const endValue = params.batch[0]?.endValue;\n locationService.partial({ from: startValue, to: endValue });\n});\n\nreturn {\n backgroundColor: 'transparent',\n tooltip: {\n trigger: 'axis',\n },\n legend: {\n left: '0',\n bottom: '0',\n data: context.panel.data.series.map((s) => s.refId),\n textStyle: {\n color: 'rgba(128, 128, 128, .9)',\n },\n },\n toolbox: {\n feature: {\n dataZoom: {\n yAxisIndex: 'none',\n icon: {\n zoom: 'path://',\n back: 'path://',\n },\n },\n saveAsImage: {},\n }\n },\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n grid: {\n left: '2%',\n right: '2%',\n top: '2%',\n bottom: 24,\n containLabel: true,\n },\n series,\n};",
|
|
"code": "const data = context.panel.data;\nlet graph = {\n nodes: [],\n links: [],\n categories: []\n};\n\nif (data.series.length > 0) {\n data.series[0].fields.forEach((s) => {\n console.log(`Processing field: ${s.name}`, JSON.parse(s.values));\n if (s.name === 'links') graph.links = JSON.parse(s.values);\n else if (s.name === 'nodes') graph.nodes = JSON.parse(s.values);\n else if (s.name === 'categories') graph.categories = JSON.parse(s.values);\n });\n}\n\ngraph.nodes.forEach(node => {\n if (node.category == 0) node.category = 1;\n else if (node.category == 1) node.category = 0;\n else if (node.category == 3) node.category = 4;\n else if (node.category == 4) node.category = 3;\n});\n\ngraph.categories.forEach(categorie => {\n if (categorie.name === 'IP 1') {\n categorie.name = '設備ID-1';\n } else if (categorie.name === 'IP 2') {\n categorie.name = '設備ID-2';\n } else if (categorie.name === 'UDID 1') {\n categorie.name = '位址-1';\n } else if (categorie.name === 'UDID 2') {\n categorie.name = '位址-2';\n } else if (categorie.name === 'Account 1') {\n categorie.name = '帳號-1';\n } else if (categorie.name === 'Account 2') {\n categorie.name = '帳號-2';\n }\n});\n\nconst categoryColors = {\n 3: \"#81D4FA\", 4: \"#AED581\", 5: \"#FFB74D\",\n 0: \"#0288D1\", 1: \"#388E3C\", 2: \"#F57C00\"\n};\n\n// 畫布寬度\nconst canvasWidth = 640;\nconst colSpacing = canvasWidth / 3; // 每列的間距\n//const colSpacing = 10;\nconst rowSpacing = 18; // 調整節點垂直間距為 15px\n\nconst categoryXPositions = {};\n\n// 讓 6 種 category 均分 X 軸\nfor (let i = 0; i < 6; i++) {\n categoryXPositions[i] = -canvasWidth / 2 + i * colSpacing + colSpacing / 2;\n}\n\n// **讓節點從 `top: 15px` 開始**\nlet categoryYPositions = { 0: 15, 1: 15, 2: 15, 3: 15, 4: 15, 5: 15 };\n\n\n// 設定節點樣式 & 位置\ngraph.nodes.forEach((node) => {\n node.symbol = \"circle\"; // 設定為圓點\n node.symbolSize = 12; // 稍微放大圓點\n node.label = { show: true, position: \"inside\" };\n\n // **設定 X、Y 軸座標**\n node.x = categoryXPositions[node.category]; // 分成 6 列\n node.y = categoryYPositions[node.category]; // 從 `top 15px` 開始\n categoryYPositions[node.category] += rowSpacing; // 下個同類別的節點往下擺\n\n node.itemStyle = { color: categoryColors[node.category] || \"#cccccc\" };\n});\n\nreturn {\n tooltip: {},\n legend: [\n {\n icon: 'circle',\n data: graph.categories.map(a => a.name)\n }\n ],\n animationDurationUpdate: 1500,\n animationEasingUpdate: \"quinticInOut\",\n series: [\n {\n name: \"Graph\",\n type: \"graph\",\n layout: \"none\", // 固定座標\n data: graph.nodes.map((node) => ({\n ...node,\n draggable: true, // 允許拖曳\n itemStyle: { color: categoryColors[node.category] || \"#cccccc\" },\n symbol: 'circle',\n symbolSize: [12, 12],\n label: {\n show: true,\n position: \"right\",\n padding: [0, 0, 0, 5],\n formatter: params => params.name.substring(0, 16),\n },\n })),\n links: graph.links,\n categories: graph.categories.map((cat, index) => ({\n ...cat,\n itemStyle: { color: categoryColors[index] || \"#cccccc\" }\n })),\n roam: true, // 允許拖曳，但不會影響原始佈局\n focusNodeAdjacency: false,\n lineStyle: {\n color: \"source\",\n curveness: 0.3\n }\n }\n ],\n graphic: graph.nodes.length === 0 ? [\n {\n type: \"text\",\n left: \"center\",\n top: \"middle\",\n style: {\n text: \"查無資訊\",\n fill: \"#999\",\n font: \"bold 20px sans-serif\"\n }\n }\n ] : []\n};\n",
|