From 31f42f717fba991c94aa397ec8a2f76dad7ab5d3 Mon Sep 17 00:00:00 2001 From: Vitali Pinchuk Date: Wed, 7 Feb 2024 16:05:35 +0300 Subject: [PATCH 01/10] ft Migrate echarts for visual editor --- echarts.volkovlabs.io/bar.json | 159 ++++++++++++- echarts.volkovlabs.io/gauge.json | 32 +++ echarts.volkovlabs.io/line.json | 388 +++++++++++++++++++++++++++++-- echarts.volkovlabs.io/pie.json | 45 +++- 4 files changed, 608 insertions(+), 16 deletions(-) diff --git a/echarts.volkovlabs.io/bar.json b/echarts.volkovlabs.io/bar.json index 8acbca4..d7f7b7f 100644 --- a/echarts.volkovlabs.io/bar.json +++ b/echarts.volkovlabs.io/bar.json @@ -62,11 +62,38 @@ "height": 600 }, "editorMode": "code", + "visualEditor": { + "dataset": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "uid": "f86dc46d-1364-4d2b-8d5f-834633903124", + "id": "A", + "name": "Bar", + "type": "bar" + } + ], + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n // min: 'dataMin',\n },\n}\n", + "codeHeight": 600 + }, + "themeEditor": { + "name": "default", + "height": 400, + "config": "{}" + }, "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }\n ]\n};", + "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n xAxis: {\n type: 'category',\n data: categories\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: values,\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }\n ]\n};", "google": { "callback": "gmapReady", "key": "" @@ -74,6 +101,33 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Category", + "type": "string", + "config": {}, + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + }, + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["120", "200", "150", "80", "70", "110", "130"] + } + ], + "meta": {}, + "name": "Bar" + } + } + ], "title": "Bar with Background", "type": "volkovlabs-echarts-panel" }, @@ -140,7 +194,29 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n top: '4%',\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n axisTick: {\n alignWithLabel: true\n }\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Direct',\n type: 'bar',\n barWidth: '60%',\n data: [10, 52, 200, 334, 390, 330, 220]\n }\n ]\n};", + "visualEditor": { + "dataset": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "uid": "483a05db-596a-46d2-9566-6242ff0e30e4", + "id": "A", + "name": "Bar", + "type": "bar" + } + ], + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category'\n },\n yAxis: {\n type: 'value'\n },\n}\n", + "codeHeight": 600 + }, + "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n top: '4%',\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n }\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Direct',\n type: 'bar',\n barWidth: '60%',\n data: values\n }\n ]\n};", "google": { "callback": "gmapReady", "key": "" @@ -148,6 +224,33 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Category", + "type": "string", + "config": {}, + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + }, + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["10", "52", "200", "334", "390", "330", "220"] + } + ], + "meta": {}, + "name": "Bar" + } + } + ], "title": "Axis Align with Tick", "type": "volkovlabs-echarts-panel" }, @@ -357,6 +460,25 @@ "format": "auto", "height": 600 }, + "visualEditor": { + "dataset": [ + { + "name": "Name", + "source": "A" + }, + { + "name": "2011", + "source": "A" + }, + { + "name": "2012", + "source": "A" + } + ], + "series": [], + "code": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n legend: {},\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n dataset: {\n dimensions: ['Name', '2011', '2012'],\n source: context.editor.dataset.source\n },\n xAxis: { boundaryGap: [0, 0.01]},\n yAxis: { boundaryGap: [0, 0.01], type: 'category' },\n series: [{ type: 'bar' }, { type: 'bar' }]\n}\n", + "codeHeight": 600 + }, "editorMode": "code", "gaode": { "key": "", @@ -370,6 +492,39 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Name", + "type": "string", + "config": {}, + "values": ["Brazil", "Indonezia", "USA", "India", "China", "World"] + }, + { + "name": "2011", + "type": "string", + "config": {}, + "values": ["18203", "19325", "29034", "104970", "131744", "630230"] + }, + { + "name": "2012", + "type": "string", + "config": {}, + "values": ["23489", "23438", "31000", "121594", "134141", "681807"] + } + ], + "meta": {}, + "name": "Bars" + } + } + ], "title": "World Population", "type": "volkovlabs-echarts-panel" }, diff --git a/echarts.volkovlabs.io/gauge.json b/echarts.volkovlabs.io/gauge.json index 11bbc09..561890d 100644 --- a/echarts.volkovlabs.io/gauge.json +++ b/echarts.volkovlabs.io/gauge.json @@ -214,6 +214,17 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, + "visualEditor": { + "dataset": [ + { + "name": "value", + "source": "A" + } + ], + "series": [], + "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n }\n ]\n}\n", + "codeHeight": 600 + }, "getOption": "return {\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n data: [\n {\n value: 70\n }\n ]\n }\n ]\n};\n\nsetInterval(function () {\n echartsInstance.setOption({\n series: [\n {\n data: [\n {\n value: +(Math.random() * 100).toFixed(2)\n }\n ]\n }\n ]\n });\n}, 2000);", "google": { "callback": "gmapReady", @@ -222,6 +233,27 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["75"] + } + ], + "meta": {}, + "name": "Speed" + } + } + ], "title": "Stage Speed Gauge", "type": "volkovlabs-echarts-panel" }, diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json index 38977d2..f5876e3 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -71,6 +71,37 @@ "callback": "gmapReady", "key": "" }, + "themeEditor": { + "name": "default", + "height": 400, + "config": "{}" + }, + "visualEditor": { + "dataset": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "uid": "5918873e-de00-4e8f-814d-f2ca62612b33", + "id": "A", + "name": "Line", + "encode": { + "x": ["A:Category"], + "y": ["A:Value"] + }, + "type": "line" + } + ], + "code": "console.log(context);\n\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: 'value',\n },\n}\n\n", + "codeHeight": 600 + }, "map": "json", "renderer": "canvas" }, @@ -167,14 +198,67 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n series: [\n {\n areaStyle: {},\n data: [\n 820,\n 932,\n 901,\n 934,\n 1290,\n 1330,\n 1320\n ],\n type: \"line\"\n }\n ],\n xAxis: {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n },\n yAxis: {\n type: \"value\"\n }\n};", + "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n series: [\n {\n areaStyle: {},\n data: values,\n type: \"line\"\n }\n ],\n xAxis: {\n boundaryGap: false,\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: \"value\"\n }\n};", "google": { "callback": "gmapReady", "key": "" }, + "visualEditor": { + "dataset": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "uid": "c49ee2de-463a-4854-a80c-f741eb316b07", + "id": "A", + "name": "Line", + "encode": { + "x": ["A:Category"], + "y": ["A:Value"] + }, + "type": "line" + } + ], + "code": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n dataset: {\n source: context.editor.dataset.source\n },\n series: [{ type: 'line', areaStyle: {} }],\n xAxis: {\n boundaryGap: false,\n type: \"category\"\n },\n yAxis: {\n type: 'value'\n },\n}\n", + "codeHeight": 600 + }, "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Category", + "type": "string", + "config": {}, + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + }, + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + } + ], + "meta": {}, + "name": "Line" + } + } + ], "title": "Basic area chart", "type": "volkovlabs-echarts-panel" }, @@ -230,27 +314,184 @@ "id": 10, "links": [], "options": { - "baidu": { - "callback": "bmapReady", - "key": "" + "renderer": "canvas", + "map": "json", + "themeEditor": { + "name": "default", + "height": 400, + "config": "{}" }, - "editor": { - "format": "auto", - "height": 600 + "baidu": { + "key": "", + "callback": "bmapReady" }, - "editorMode": "code", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {\n data: [\n \"Email\",\n \"Union Ads\",\n \"Video Ads\",\n \"Direct\",\n \"Search Engine\"\n ]\n },\n series: [\n {\n areaStyle: {},\n data: [\n 120,\n 132,\n 101,\n 134,\n 90,\n 230,\n 210\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 220,\n 182,\n 191,\n 234,\n 290,\n 330,\n 310\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 150,\n 232,\n 201,\n 154,\n 190,\n 330,\n 410\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 320,\n 332,\n 301,\n 334,\n 390,\n 330,\n 320\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 820,\n 932,\n 901,\n 934,\n 1290,\n 1330,\n 1320\n ],\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ]\n};", "google": { - "callback": "gmapReady", - "key": "" + "key": "", + "callback": "gmapReady" }, - "map": "json", - "renderer": "canvas" + "editorMode": "code", + "visualEditor": { + "dataset": [ + { + "name": "Value", + "source": "A" + }, + { + "name": "Value", + "source": "B" + }, + { + "name": "Value", + "source": "C" + }, + { + "name": "value", + "source": "D" + }, + { + "name": "Value", + "source": "E" + }, + { + "name": "value", + "source": "F" + } + ], + "series": [], + "code": "console.log(context);\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n}\n", + "codeHeight": 600 + }, + "editor": { + "height": 600, + "format": "auto" + }, + "getOption": "console.log('console Data >> ', data)\n\nlet emails = data.series.find(s => s.name === 'Email').fields[0].values\nlet unionAds = data.series.find(s => s.name === 'Union Ads').fields[0].values\nlet videoAds = data.series.find(s => s.name === 'Video Ads').fields[0].values\nlet direct = data.series.find(s => s.name === 'Direct').fields[0].values\nlet searchEngine = data.series.find(s => s.name === 'Search Engine').fields[0].values\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n series: [\n {\n areaStyle: {},\n data: emails,\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: unionAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: videoAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: direct,\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: searchEngine,\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ]\n};" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + ], + "meta": {}, + "name": "Months" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "B", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["120", "132", "101", "134", "90", "230", "210"] + } + ], + "meta": {}, + "name": "Email" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "C", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["220", "182", "191", "234", "290", "330", "310"] + } + ], + "meta": {}, + "name": "Union Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "D", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["150", "232", "201", "154", "190", "330", "410"] + } + ], + "meta": {}, + "name": "Video Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "E", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["320", "332", "301", "334", "390", "330", "320"] + } + ], + "meta": {}, + "name": "Direct" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "F", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + } + ], + "meta": {}, + "name": "Search Engine" + } + } + ], "title": "Stacked Area Chart", "type": "volkovlabs-echarts-panel" }, @@ -288,6 +529,127 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + ], + "meta": {}, + "name": "Months" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "B", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["120", "132", "101", "134", "90", "230", "210"] + } + ], + "meta": {}, + "name": "Email" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "C", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["220", "182", "191", "234", "290", "330", "310"] + } + ], + "meta": {}, + "name": "Union Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "D", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["150", "232", "201", "154", "190", "330", "410"] + } + ], + "meta": {}, + "name": "Video Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "E", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["320", "332", "301", "334", "390", "330", "320"] + } + ], + "meta": {}, + "name": "Direct" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "F", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + } + ], + "meta": {}, + "name": "Search Engine" + } + } + ], "title": "Gradient Stacked Area Chart", "type": "volkovlabs-echarts-panel" }, diff --git a/echarts.volkovlabs.io/pie.json b/echarts.volkovlabs.io/pie.json index 4cc4561..8ca3fb0 100644 --- a/echarts.volkovlabs.io/pie.json +++ b/echarts.volkovlabs.io/pie.json @@ -66,7 +66,22 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "return {\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n data: [\n { value: 1048, name: 'Search Engine' },\n { value: 735, name: 'Direct' },\n { value: 580, name: 'Email' },\n { value: 484, name: 'Union Ads' },\n { value: 300, name: 'Video Ads' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};", + "visualEditor": { + "dataset": [ + { + "name": "name", + "source": "A" + }, + { + "name": "value", + "source": "A" + } + ], + "series": [], + "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n}\n", + "codeHeight": 600 + }, + "getOption": "let values = data.series[0].fields.find(field => field.name === 'value').values\nlet names = data.series[0].fields.find(field => field.name === 'name').values\nlet parts = values.map((value, index) => ({ name: names[index],value }));\nreturn {\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n data: parts,\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};", "google": { "callback": "gmapReady", "key": "" @@ -74,6 +89,34 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "A", + "hide": false, + "frame": { + "fields": [ + { + "name": "name", + "type": "string", + "config": {}, + "values": ["Search Engine", "Direct", "Email", "Union Ads", "Video Ads"] + }, + { + "name": "value", + "type": "string", + "config": {}, + "values": ["1048", "735", "580", "484", "300"] + } + ], + "meta": {}, + "name": "Pie" + } + } + ], "title": "Referer of a Website", "type": "volkovlabs-echarts-panel" }, From ded8959188d6251389f96596ebbc48d362851190 Mon Sep 17 00:00:00 2001 From: Vitali Pinchuk Date: Wed, 7 Feb 2024 16:32:35 +0300 Subject: [PATCH 02/10] fix: update values to numbers --- echarts.volkovlabs.io/bar.json | 16 ++++++++-------- echarts.volkovlabs.io/gauge.json | 4 ++-- echarts.volkovlabs.io/line.json | 28 ++++++++++++++-------------- echarts.volkovlabs.io/pie.json | 4 ++-- 4 files changed, 26 insertions(+), 26 deletions(-) diff --git a/echarts.volkovlabs.io/bar.json b/echarts.volkovlabs.io/bar.json index d7f7b7f..80b4962 100644 --- a/echarts.volkovlabs.io/bar.json +++ b/echarts.volkovlabs.io/bar.json @@ -118,9 +118,9 @@ }, { "name": "Value", - "type": "string", + "type": "number", "config": {}, - "values": ["120", "200", "150", "80", "70", "110", "130"] + "values": [120, 200, 150, 80, 70, 110, 130] } ], "meta": {}, @@ -241,9 +241,9 @@ }, { "name": "Value", - "type": "string", + "type": "number", "config": {}, - "values": ["10", "52", "200", "334", "390", "330", "220"] + "values": [120, 52, 200, 334, 390, 330, 220] } ], "meta": {}, @@ -509,15 +509,15 @@ }, { "name": "2011", - "type": "string", + "type": "number", "config": {}, - "values": ["18203", "19325", "29034", "104970", "131744", "630230"] + "values": [18203, 19325, 29034, 104970, 131744, 630230] }, { "name": "2012", - "type": "string", + "type": "number", "config": {}, - "values": ["23489", "23438", "31000", "121594", "134141", "681807"] + "values": [23489, 23438, 31000, 121594, 134141, 681807] } ], "meta": {}, diff --git a/echarts.volkovlabs.io/gauge.json b/echarts.volkovlabs.io/gauge.json index 561890d..0a09d0b 100644 --- a/echarts.volkovlabs.io/gauge.json +++ b/echarts.volkovlabs.io/gauge.json @@ -244,9 +244,9 @@ "fields": [ { "name": "value", - "type": "string", + "type": "number", "config": {}, - "values": ["75"] + "values": [75] } ], "meta": {}, diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json index f5876e3..aacff96 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -122,8 +122,8 @@ { "config": {}, "name": "Value", - "type": "string", - "values": ["150", "230", "224", "218", "135", "147", "260"] + "type": "number", + "values": [150, 230, 224, 218, 135, 147, 260] } ], "meta": {}, @@ -249,9 +249,9 @@ }, { "name": "Value", - "type": "string", + "type": "number", "config": {}, - "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + "values": [820, 932, 901, 934, 1290, 1330, 1320] } ], "meta": {}, @@ -402,9 +402,9 @@ "fields": [ { "name": "Value", - "type": "string", + "type": "number", "config": {}, - "values": ["120", "132", "101", "134", "90", "230", "210"] + "values": [120, 132, 101, 134, 90, 230, 210] } ], "meta": {}, @@ -422,9 +422,9 @@ "fields": [ { "name": "Value", - "type": "string", + "type": "number", "config": {}, - "values": ["220", "182", "191", "234", "290", "330", "310"] + "values": [220, 182, 191, 234, 290, 330, 310] } ], "meta": {}, @@ -442,9 +442,9 @@ "fields": [ { "name": "value", - "type": "string", + "type": "number", "config": {}, - "values": ["150", "232", "201", "154", "190", "330", "410"] + "values": [150, 232, 201, 154, 190, 330, 410] } ], "meta": {}, @@ -462,9 +462,9 @@ "fields": [ { "name": "Value", - "type": "string", + "type": "number", "config": {}, - "values": ["320", "332", "301", "334", "390", "330", "320"] + "values": [320, 332, 301, 334, 390, 330, 320] } ], "meta": {}, @@ -482,9 +482,9 @@ "fields": [ { "name": "value", - "type": "string", + "type": "number", "config": {}, - "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + "values": [820, 932, 901, 934, 1290, 1330, 1320] } ], "meta": {}, diff --git a/echarts.volkovlabs.io/pie.json b/echarts.volkovlabs.io/pie.json index 8ca3fb0..e29dff1 100644 --- a/echarts.volkovlabs.io/pie.json +++ b/echarts.volkovlabs.io/pie.json @@ -107,9 +107,9 @@ }, { "name": "value", - "type": "string", + "type": "number", "config": {}, - "values": ["1048", "735", "580", "484", "300"] + "values": [1048, 735, 580, 484, 300] } ], "meta": {}, From 5bfc681b11b35d89680b97e880a07a2085f30fa6 Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Wed, 7 Feb 2024 22:40:57 -0500 Subject: [PATCH 03/10] Update Static Data Source --- provisioning/datasources/datasources.yaml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/provisioning/datasources/datasources.yaml b/provisioning/datasources/datasources.yaml index 499af5c..f7f8e72 100644 --- a/provisioning/datasources/datasources.yaml +++ b/provisioning/datasources/datasources.yaml @@ -9,6 +9,8 @@ datasources: orgId: 1 version: 1 editable: true + jsonData: + codeEditorEnabled: true - name: Websocket type: golioth-websocket-datasource uid: LWj8ert4k From a88146d087dadb4fe43b8992ce1072304b7345f7 Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Thu, 8 Feb 2024 22:50:29 -0500 Subject: [PATCH 04/10] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 179a39a..55325d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - Add context parameter to non-visual mode (#245) - Add refresh function using Application Event Bus (#247) - Update to disallow to choose already selected fields (#251) +- Migrate echarts.volkovlabs.io to use visual editor and data sources (#248) ## 5.1.0 (2023-08-11) From af63b010317619854d8c2ead1aaecc7abd61b20a Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Thu, 8 Feb 2024 23:00:24 -0500 Subject: [PATCH 05/10] Update Bar dashboard --- echarts.volkovlabs.io/bar.json | 310 ++++++++++++++++++++++++--------- 1 file changed, 229 insertions(+), 81 deletions(-) diff --git a/echarts.volkovlabs.io/bar.json b/echarts.volkovlabs.io/bar.json index 80b4962..1a7f12f 100644 --- a/echarts.volkovlabs.io/bar.json +++ b/echarts.volkovlabs.io/bar.json @@ -45,6 +45,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -61,8 +62,26 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", + "gaode": { + "key": "", + "plugin": "AMap.Scale,AMap.ToolBar" + }, + "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n xAxis: {\n type: 'category',\n data: categories\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: values,\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }\n ]\n};", + "google": { + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n },\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n}\n", + "codeHeight": 600, "dataset": [ { "name": "Category", @@ -75,57 +94,40 @@ ], "series": [ { - "uid": "f86dc46d-1364-4d2b-8d5f-834633903124", "id": "A", "name": "Bar", - "type": "bar" + "type": "bar", + "uid": "f86dc46d-1364-4d2b-8d5f-834633903124" } - ], - "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n // min: 'dataMin',\n },\n}\n", - "codeHeight": 600 - }, - "themeEditor": { - "name": "default", - "height": 400, - "config": "{}" - }, - "gaode": { - "key": "", - "plugin": "AMap.Scale,AMap.ToolBar" - }, - "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n xAxis: {\n type: 'category',\n data: categories\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: values,\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }\n ]\n};", - "google": { - "callback": "gmapReady", - "key": "" - }, - "map": "json", - "renderer": "canvas" + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Category", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [120, 200, 150, 80, 70, 110, 130] } ], "meta": {}, "name": "Bar" - } + }, + "refId": "A" } ], "title": "Bar with Background", @@ -163,8 +165,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Basic Bar", "type": "volkovlabs-echarts-panel" }, @@ -173,6 +187,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -189,12 +204,26 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, + "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n top: '4%',\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n }\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Direct',\n type: 'bar',\n barWidth: '60%',\n data: values\n }\n ]\n};", + "google": { + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category'\n },\n yAxis: {\n type: 'value'\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n top: '4%',\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n}\n", + "codeHeight": 600, "dataset": [ { "name": "Category", @@ -207,48 +236,40 @@ ], "series": [ { - "uid": "483a05db-596a-46d2-9566-6242ff0e30e4", - "id": "A", + "id": "Bar", "name": "Bar", - "type": "bar" + "type": "bar", + "uid": "4fb6e263-71e4-46ce-ae33-8dedb8dc077e" } - ], - "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category'\n },\n yAxis: {\n type: 'value'\n },\n}\n", - "codeHeight": 600 - }, - "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n top: '4%',\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n }\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Direct',\n type: 'bar',\n barWidth: '60%',\n data: values\n }\n ]\n};", - "google": { - "callback": "gmapReady", - "key": "" - }, - "map": "json", - "renderer": "canvas" + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Category", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [120, 52, 200, 334, 390, 330, 220] } ], "meta": {}, "name": "Bar" - } + }, + "refId": "A" } ], "title": "Axis Align with Tick", @@ -286,8 +307,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Set Style of Single Bar", "type": "volkovlabs-echarts-panel" }, @@ -323,8 +356,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Waterfall Chart", "type": "volkovlabs-echarts-panel" }, @@ -360,8 +405,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Bar Chart with Negative Value", "type": "volkovlabs-echarts-panel" }, @@ -397,8 +454,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Radial Polar Bar Label Position (middle)", "type": "volkovlabs-echarts-panel" }, @@ -434,8 +503,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Tangential Polar Bar Label Position (middle)", "type": "volkovlabs-echarts-panel" }, @@ -444,6 +525,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -460,7 +542,26 @@ "format": "auto", "height": 600 }, + "editorMode": "visual", + "gaode": { + "key": "", + "plugin": "AMap.Scale,AMap.ToolBar" + }, + "getOption": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n legend: {},\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: {\n type: 'value',\n boundaryGap: [0, 0.01]\n },\n yAxis: {\n type: 'category',\n data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']\n },\n series: [\n {\n name: '2011',\n type: 'bar',\n data: [18203, 23489, 29034, 104970, 131744, 630230]\n },\n {\n name: '2012',\n type: 'bar',\n data: [19325, 23438, 31000, 121594, 134141, 681807]\n }\n ]\n};", + "google": { + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n legend: {},\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n dataset: {\n dimensions: ['Name', '2011', '2012'],\n source: context.editor.dataset.source\n },\n xAxis: { boundaryGap: [0, 0.01] },\n yAxis: { boundaryGap: [0, 0.01], type: 'category' },\n series: [{ type: 'bar' }, { type: 'bar' }]\n}\n", + "codeHeight": 600, "dataset": [ { "name": "Name", @@ -475,54 +576,41 @@ "source": "A" } ], - "series": [], - "code": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n legend: {},\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n dataset: {\n dimensions: ['Name', '2011', '2012'],\n source: context.editor.dataset.source\n },\n xAxis: { boundaryGap: [0, 0.01]},\n yAxis: { boundaryGap: [0, 0.01], type: 'category' },\n series: [{ type: 'bar' }, { type: 'bar' }]\n}\n", - "codeHeight": 600 - }, - "editorMode": "code", - "gaode": { - "key": "", - "plugin": "AMap.Scale,AMap.ToolBar" - }, - "getOption": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n legend: {},\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: {\n type: 'value',\n boundaryGap: [0, 0.01]\n },\n yAxis: {\n type: 'category',\n data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']\n },\n series: [\n {\n name: '2011',\n type: 'bar',\n data: [18203, 23489, 29034, 104970, 131744, 630230]\n },\n {\n name: '2012',\n type: 'bar',\n data: [19325, 23438, 31000, 121594, 134141, 681807]\n }\n ]\n};", - "google": { - "callback": "gmapReady", - "key": "" - }, - "map": "json", - "renderer": "canvas" + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Name", "type": "string", - "config": {}, "values": ["Brazil", "Indonezia", "USA", "India", "China", "World"] }, { + "config": {}, "name": "2011", "type": "number", - "config": {}, "values": [18203, 19325, 29034, 104970, 131744, 630230] }, { + "config": {}, "name": "2012", "type": "number", - "config": {}, "values": [23489, 23438, 31000, 121594, 134141, 681807] } ], "meta": {}, "name": "Bars" - } + }, + "refId": "A" } ], "title": "World Population", @@ -560,8 +648,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Clickable Column Chart with Gradient", "type": "volkovlabs-echarts-panel" }, @@ -597,8 +697,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Bar Label Rotation", "type": "volkovlabs-echarts-panel" }, @@ -634,8 +746,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Stacked Column Chart", "type": "volkovlabs-echarts-panel" }, @@ -671,8 +795,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Waterfall Chart", "type": "volkovlabs-echarts-panel" }, @@ -708,8 +844,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Stacked Horizontal Bar", "type": "volkovlabs-echarts-panel" }, @@ -751,8 +899,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] @@ -767,6 +915,6 @@ "timezone": "", "title": "Bar", "uid": "E9NLNnFVz", - "version": 1, + "version": 3, "weekStart": "" } From dfe02e461bb420b47925031168fd083d122103dd Mon Sep 17 00:00:00 2001 From: Vitali Pinchuk Date: Fri, 9 Feb 2024 13:55:43 +0300 Subject: [PATCH 06/10] ft - updated part panels --- echarts.volkovlabs.io/home.json | 323 ++++++++++++++++++++++++++++++-- echarts.volkovlabs.io/line.json | 313 +++++++++++++++++++------------ 2 files changed, 497 insertions(+), 139 deletions(-) diff --git a/echarts.volkovlabs.io/home.json b/echarts.volkovlabs.io/home.json index 57f0e66..24afd3a 100644 --- a/echarts.volkovlabs.io/home.json +++ b/echarts.volkovlabs.io/home.json @@ -54,7 +54,7 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "let names = [];\nlet amounts = [];\ndata.series.map((s) => {\n names = s.fields.find((f) => f.name === 'Name').values;\n amounts = s.fields.find((f) => f.name === 'Amount').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {},\n legend: {\n data: [replaceVariables('$var')]\n },\n xAxis: {\n data: names\n },\n yAxis: {},\n toolbox: { feature: { restore: {} } },\n series: [\n {\n name: replaceVariables('$var'),\n type: 'bar',\n data: amounts\n }\n ]\n};\n", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\n\nlet names = [];\nlet amounts = [];\ndata.series.map((s) => {\n names = s.fields.find((f) => f.name === 'Name').values;\n amounts = s.fields.find((f) => f.name === 'Amount').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {},\n legend: {\n data: [replaceVariables('$var')]\n },\n xAxis: {\n data: names\n },\n yAxis: {},\n toolbox: { feature: { restore: {} } },\n series: [\n {\n name: replaceVariables('$var'),\n type: 'bar',\n data: amounts\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};\n", "google": { "callback": "gmapReady", "key": "" @@ -67,7 +67,7 @@ "name": "default" }, "visualEditor": { - "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n min: 0,\n },\n}\n", + "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n min: 0,\n },\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, "dataset": [ { @@ -89,6 +89,7 @@ ] } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -164,6 +165,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Bar", "type": "volkovlabs-echarts-panel" }, @@ -212,6 +214,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Calendar", "type": "volkovlabs-echarts-panel" }, @@ -260,6 +263,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Candlestick", "type": "volkovlabs-echarts-panel" }, @@ -284,12 +288,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/PQeH9VFVk/gauge?orgId=1');\n});\n\nreturn {\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n },\n data: [\n {\n value: 0.7,\n name: 'Grade Rating'\n }\n ]\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/PQeH9VFVk/gauge?orgId=1');\n});\n\nlet value = data.series[0].fields[0].values[0]\n\nreturn {\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n },\n data: [\n {\n value: value,\n name: 'Grade Rating'\n },\n ]\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -302,12 +306,39 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n }\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + } + ], "series": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [0.6] + } + ], + "meta": {}, + "name": "Speed" + }, + "refId": "A" + } + ], "title": "Gauge", "type": "volkovlabs-echarts-panel" }, @@ -356,6 +387,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Geo/Map", "type": "volkovlabs-echarts-panel" }, @@ -404,6 +436,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Graph", "type": "volkovlabs-echarts-panel" }, @@ -430,12 +463,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/tg6gWiKVk/line?orgId=1');\n});\n\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\n },\n series: [\n {\n areaStyle: {},\n data: [\n 120,\n 132,\n 101,\n 134,\n 90,\n 230,\n 210\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 220,\n 182,\n 191,\n 234,\n 290,\n 330,\n 310\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 150,\n 232,\n 201,\n 154,\n 190,\n 330,\n 410\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 320,\n 332,\n 301,\n 334,\n 390,\n 330,\n 320\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 820,\n 932,\n 901,\n 934,\n 1290,\n 1330,\n 1320\n ],\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/tg6gWiKVk/line?orgId=1');\n});\n\nlet emails = data.series.find(s => s.name === 'Email').fields[0].values\nlet unionAds = data.series.find(s => s.name === 'Union Ads').fields[0].values\nlet videoAds = data.series.find(s => s.name === 'Video Ads').fields[0].values\nlet direct = data.series.find(s => s.name === 'Direct').fields[0].values\nlet searchEngine = data.series.find(s => s.name === 'Search Engine').fields[0].values\nlet days = data.series.find(s => s.name === 'Days').fields[0].values\n\n\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\n },\n series: [\n {\n areaStyle: {},\n data: emails,\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: unionAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: videoAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: direct,\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: searchEngine,\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: days,\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -448,12 +481,189 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "code": "console.log(context);\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + }, + { + "name": "Value", + "source": "B" + }, + { + "name": "Value", + "source": "C" + }, + { + "name": "Value", + "source": "D" + }, + { + "name": "Value", + "source": "E" + }, + { + "name": "Value", + "source": "F" + } + ], "series": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "string", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Days" + }, + "refId": "A" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 120,\n 132,\n 101,\n 134,\n 90,\n 230,\n 210\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Email" + }, + "hide": false, + "refId": "B" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 220,\n 182,\n 191,\n 234,\n 290,\n 330,\n 310\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Union Ads" + }, + "hide": false, + "refId": "C" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 150,\n 232,\n 201,\n 154,\n 190,\n 330,\n 410\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Video Ads" + }, + "hide": false, + "refId": "D" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 320,\n 332,\n 301,\n 334,\n 390,\n 330,\n 320\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Direct" + }, + "hide": false, + "refId": "E" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 820,\n 932,\n 901,\n 934,\n 1290,\n 1330,\n 1320\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Search Engine" + }, + "hide": false, + "refId": "F" + } + ], "title": "Line", "type": "volkovlabs-echarts-panel" }, @@ -483,7 +693,7 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/6zyVsZ54z/sankey?orgId=1');\n});\n\nreturn {\n series: [{\n type: 'liquidFill',\n data: [0.6, 0.55, 0.4, 0.25],\n radius: '90%',\n outline: {\n show: false\n },\n backgroundStyle: {\n borderColor: '#156ACF',\n borderWidth: 1,\n shadowColor: 'rgba(0, 0, 0, 0.4)',\n shadowBlur: 20\n },\n shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',\n label: {\n position: ['38%', '40%'],\n formatter: function () {\n return 'ECharts\\nLiquid Fill';\n },\n fontSize: 40,\n color: '#D94854'\n }\n }],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/6zyVsZ54z/sankey?orgId=1');\n});\nlet waves = data.series[0].fields[0].values\nreturn {\n series: [{\n type: 'liquidFill',\n data: waves,\n radius: '90%',\n outline: {\n show: false\n },\n backgroundStyle: {\n borderColor: '#156ACF',\n borderWidth: 1,\n shadowColor: 'rgba(0, 0, 0, 0.4)',\n shadowBlur: 20\n },\n shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',\n label: {\n position: ['38%', '40%'],\n formatter: function () {\n return 'ECharts\\nLiquid Fill';\n },\n fontSize: 40,\n color: '#D94854'\n }\n }],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -496,12 +706,44 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: [{\n type: 'liquidFill',\n // data: [0.6, 0.55, 0.4, 0.25],\n radius: '90%',\n outline: {\n show: false\n },\n backgroundStyle: {\n borderColor: '#156ACF',\n borderWidth: 1,\n shadowColor: 'rgba(0, 0, 0, 0.4)',\n shadowBlur: 20\n },\n shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',\n // label: {\n // position: ['38%', '40%'],\n // formatter: function () {\n // return 'ECharts\\nLiquid Fill';\n // },\n // fontSize: 40,\n // color: '#D94854'\n // }\n }],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + } + ], "series": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [0.6, 0.55, 0.4, 0.25]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Waves" + }, + "refId": "A" + } + ], "title": "Liquid Fill", "type": "volkovlabs-echarts-panel" }, @@ -526,12 +768,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/0b5-q7K4k/pie?orgId=1');\n});\n\nreturn {\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n data: [\n { value: 40, name: 'rose 1' },\n { value: 38, name: 'rose 2' },\n { value: 32, name: 'rose 3' },\n { value: 30, name: 'rose 4' },\n { value: 28, name: 'rose 5' },\n { value: 26, name: 'rose 6' },\n { value: 22, name: 'rose 7' },\n { value: 18, name: 'rose 8' }\n ]\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/0b5-q7K4k/pie?orgId=1');\n});\n\nlet values = data.series[0].fields.find(field => field.name === 'Value').values\nlet names = data.series[0].fields.find(field => field.name === 'Name').values\nlet parts = values.map((value, index) => ({ name: names[index], value }));\n\nreturn {\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n data: parts\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -544,12 +786,54 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "code": "return {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + }, + { + "name": "Name", + "source": "A" + } + ], "series": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + }, + { + "config": {}, + "name": "Name", + "type": "string", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => {\n if (field.name === 'Name') {\n return ({\n ...field,\n values: ['rose 1', 'rose 2', 'rose 3', 'rose 4', 'rose 5', 'rose 6', 'rose 7', 'rose 8']\n })\n }\n return ({\n ...field,\n values: [40, 38, 36, 32, 30, 28, 22, 18]\n })\n }\n )\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Pie" + }, + "refId": "A" + } + ], "title": "Pie", "type": "volkovlabs-echarts-panel" }, @@ -598,6 +882,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Radar", "type": "volkovlabs-echarts-panel" }, @@ -646,6 +931,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Sankey", "type": "volkovlabs-echarts-panel" }, @@ -694,6 +980,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Scatter", "type": "volkovlabs-echarts-panel" }, @@ -742,6 +1029,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Sunburst", "type": "volkovlabs-echarts-panel" }, @@ -790,6 +1078,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Treemap", "type": "volkovlabs-echarts-panel" } diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json index aacff96..9859038 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -24,6 +24,7 @@ "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, + "id": 24, "links": [ { "asDropdown": false, @@ -71,12 +72,16 @@ "callback": "gmapReady", "key": "" }, + "map": "json", + "renderer": "canvas", "themeEditor": { - "name": "default", + "config": "{}", "height": 400, - "config": "{}" + "name": "default" }, "visualEditor": { + "code": "console.log(context);\n\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: 'value',\n },\n}\n\n", + "codeHeight": 600, "dataset": [ { "name": "Category", @@ -89,22 +94,19 @@ ], "series": [ { - "uid": "5918873e-de00-4e8f-814d-f2ca62612b33", - "id": "A", - "name": "Line", "encode": { "x": ["A:Category"], "y": ["A:Value"] }, - "type": "line" + "id": "A", + "name": "Line", + "type": "line", + "uid": "5918873e-de00-4e8f-814d-f2ca62612b33" } - ], - "code": "console.log(context);\n\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: 'value',\n },\n}\n\n", - "codeHeight": 600 - }, - "map": "json", - "renderer": "canvas" + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -167,8 +169,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Smoothed Line Chart", "type": "volkovlabs-echarts-panel" }, @@ -203,7 +217,16 @@ "callback": "gmapReady", "key": "" }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n dataset: {\n source: context.editor.dataset.source\n },\n series: [{ type: 'line', areaStyle: {} }],\n xAxis: {\n boundaryGap: false,\n type: \"category\"\n },\n yAxis: {\n type: 'value'\n },\n}\n", + "codeHeight": 600, "dataset": [ { "name": "Category", @@ -216,47 +239,44 @@ ], "series": [ { - "uid": "c49ee2de-463a-4854-a80c-f741eb316b07", - "id": "A", - "name": "Line", "encode": { "x": ["A:Category"], "y": ["A:Value"] }, - "type": "line" + "id": "A", + "name": "Line", + "type": "line", + "uid": "c49ee2de-463a-4854-a80c-f741eb316b07" } - ], - "code": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n dataset: {\n source: context.editor.dataset.source\n },\n series: [{ type: 'line', areaStyle: {} }],\n xAxis: {\n boundaryGap: false,\n type: \"category\"\n },\n yAxis: {\n type: 'value'\n },\n}\n", - "codeHeight": 600 - }, - "map": "json", - "renderer": "canvas" + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Category", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [820, 932, 901, 934, 1290, 1330, 1320] } ], "meta": {}, "name": "Line" - } + }, + "refId": "A" } ], "title": "Basic area chart", @@ -294,8 +314,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Stacked Line Chart", "type": "volkovlabs-echarts-panel" }, @@ -314,27 +346,34 @@ "id": 10, "links": [], "options": { - "renderer": "canvas", - "map": "json", - "themeEditor": { - "name": "default", - "height": 400, - "config": "{}" - }, "baidu": { - "key": "", - "callback": "bmapReady" + "callback": "bmapReady", + "key": "" + }, + "editor": { + "format": "auto", + "height": 600 }, + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, + "getOption": "console.log('console Data >> ', data)\n\nlet emails = data.series.find(s => s.name === 'Email').fields[0].values\nlet unionAds = data.series.find(s => s.name === 'Union Ads').fields[0].values\nlet videoAds = data.series.find(s => s.name === 'Video Ads').fields[0].values\nlet direct = data.series.find(s => s.name === 'Direct').fields[0].values\nlet searchEngine = data.series.find(s => s.name === 'Search Engine').fields[0].values\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n series: [\n {\n areaStyle: {},\n data: emails,\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: unionAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: videoAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: direct,\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: searchEngine,\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ]\n};", "google": { - "key": "", - "callback": "gmapReady" + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" }, - "editorMode": "code", "visualEditor": { + "code": "console.log(context);\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n}\n", + "codeHeight": 600, "dataset": [ { "name": "Value", @@ -361,135 +400,129 @@ "source": "F" } ], - "series": [], - "code": "console.log(context);\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n}\n", - "codeHeight": 600 - }, - "editor": { - "height": 600, - "format": "auto" - }, - "getOption": "console.log('console Data >> ', data)\n\nlet emails = data.series.find(s => s.name === 'Email').fields[0].values\nlet unionAds = data.series.find(s => s.name === 'Union Ads').fields[0].values\nlet videoAds = data.series.find(s => s.name === 'Video Ads').fields[0].values\nlet direct = data.series.find(s => s.name === 'Direct').fields[0].values\nlet searchEngine = data.series.find(s => s.name === 'Search Engine').fields[0].values\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n series: [\n {\n areaStyle: {},\n data: emails,\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: unionAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: videoAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: direct,\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: searchEngine,\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ]\n};" + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } ], "meta": {}, - "name": "Months" - } + "name": "Days" + }, + "refId": "A" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "B", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [120, 132, 101, 134, 90, 230, 210] } ], "meta": {}, "name": "Email" - } + }, + "hide": false, + "refId": "B" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "C", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [220, 182, 191, 234, 290, 330, 310] } ], "meta": {}, "name": "Union Ads" - } + }, + "hide": false, + "refId": "C" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "D", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "number", - "config": {}, "values": [150, 232, 201, 154, 190, 330, 410] } ], "meta": {}, "name": "Video Ads" - } + }, + "hide": false, + "refId": "D" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "E", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [320, 332, 301, 334, 390, 330, 320] } ], "meta": {}, "name": "Direct" - } + }, + "hide": false, + "refId": "E" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "F", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "number", - "config": {}, "values": [820, 932, 901, 934, 1290, 1330, 1320] } ], "meta": {}, "name": "Search Engine" - } + }, + "hide": false, + "refId": "F" } ], "title": "Stacked Area Chart", @@ -527,127 +560,139 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } ], "meta": {}, "name": "Months" - } + }, + "refId": "A" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "B", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["120", "132", "101", "134", "90", "230", "210"] } ], "meta": {}, "name": "Email" - } + }, + "hide": false, + "refId": "B" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "C", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["220", "182", "191", "234", "290", "330", "310"] } ], "meta": {}, "name": "Union Ads" - } + }, + "hide": false, + "refId": "C" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "D", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "string", - "config": {}, "values": ["150", "232", "201", "154", "190", "330", "410"] } ], "meta": {}, "name": "Video Ads" - } + }, + "hide": false, + "refId": "D" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "E", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["320", "332", "301", "334", "390", "330", "320"] } ], "meta": {}, "name": "Direct" - } + }, + "hide": false, + "refId": "E" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "F", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "string", - "config": {}, "values": ["820", "932", "901", "934", "1290", "1330", "1320"] } ], "meta": {}, "name": "Search Engine" - } + }, + "hide": false, + "refId": "F" } ], "title": "Gradient Stacked Area Chart", @@ -685,8 +730,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Temperature Change in the Coming Week", "type": "volkovlabs-echarts-panel" }, @@ -722,8 +779,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Area Pieces", "type": "volkovlabs-echarts-panel" }, @@ -2065,8 +2134,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] @@ -2081,6 +2150,6 @@ "timezone": "", "title": "Line", "uid": "tg6gWiKVk", - "version": 1, + "version": 20, "weekStart": "" } From 88bec4e8137785041bd9cb0e5936302188ec7dec Mon Sep 17 00:00:00 2001 From: Vitali Pinchuk Date: Fri, 9 Feb 2024 15:28:20 +0300 Subject: [PATCH 07/10] fix - added panel --- echarts.volkovlabs.io/home.json | 49 ++++++++++++++++++++++++++++++--- 1 file changed, 45 insertions(+), 4 deletions(-) diff --git a/echarts.volkovlabs.io/home.json b/echarts.volkovlabs.io/home.json index 24afd3a..380311b 100644 --- a/echarts.volkovlabs.io/home.json +++ b/echarts.volkovlabs.io/home.json @@ -141,12 +141,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\n\nconst labelRight = {\n position: 'right'\n};\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n xAxis: {\n type: 'value',\n position: 'top',\n splitLine: {\n lineStyle: {\n type: 'dashed'\n }\n }\n },\n yAxis: {\n type: 'category',\n axisLine: { show: false },\n axisLabel: { show: false },\n axisTick: { show: false },\n splitLine: { show: false },\n data: [\n 'ten',\n 'nine',\n 'eight',\n 'seven',\n 'six',\n 'five',\n 'four',\n 'three',\n 'two',\n 'one'\n ]\n },\n series: [\n {\n name: 'Cost',\n type: 'bar',\n stack: 'Total',\n label: {\n show: true,\n formatter: '{b}'\n },\n data: [\n { value: -0.07, label: labelRight },\n { value: -0.09, label: labelRight },\n 0.2,\n 0.44,\n { value: -0.23, label: labelRight },\n 0.08,\n { value: -0.17, label: labelRight },\n 0.47,\n { value: -0.36, label: labelRight },\n 0.18\n ]\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\nlet values = data.series[0].fields.find(f => f.name === 'Value').values\nlet labels = data.series[0].fields.find(f => f.name === 'Label').values\n\nconst labelRight = {\n position: 'right'\n};\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n xAxis: {\n type: 'value',\n position: 'top',\n splitLine: {\n lineStyle: {\n type: 'dashed'\n }\n }\n },\n yAxis: {\n type: 'category',\n axisLine: { show: false },\n axisLabel: { show: false },\n axisTick: { show: false },\n splitLine: { show: false },\n data: labels\n },\n series: [\n {\n name: 'Cost',\n type: 'bar',\n stack: 'Total',\n label: {\n show: true,\n formatter: '{b}'\n },\n data: values\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -159,13 +159,54 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "code": "const labelRight = {\n position: 'right'\n};\n\nreturn {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n dataset: {\n source: context.editor.dataset.source\n },\n xAxis: {\n type: 'value',\n position: 'top',\n splitLine: {\n lineStyle: {\n type: 'dashed'\n }\n }\n },\n yAxis: {\n type: 'category',\n axisLine: { show: false },\n axisLabel: { show: false },\n axisTick: { show: false },\n splitLine: { show: false }\n },\n series: [\n {\n name: 'Cost',\n type: 'bar',\n stack: 'Total',\n label: {\n show: true,\n formatter: '{b}'\n },\n encode: {\n y: 'label',\n x: 'value'\n }\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + }, + { + "name": "Label", + "source": "A" + } + ], "series": [] } }, "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [0] + }, + { + "config": {}, + "name": "Label", + "type": "string", + "values": [""] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => {\n if (field.name === 'Value') {\n return ({\n ...field,\n values: [-0.07, -0.09, 0.2, 0.44, -0.23, 0.08, -0.17, 0.47, -0.36, 0.18]\n })\n }\n return ({\n ...field,\n values: ['ten', 'nine', 'eight', 'seeven', 'six', 'five', 'four', 'three', 'two', 'one']\n })\n }\n )\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Bars" + }, + "refId": "A" + } + ], "title": "Bar", "type": "volkovlabs-echarts-panel" }, From e56f12ee26c3ac78e6199594a8a8763c5454e56a Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Wed, 14 Feb 2024 23:18:03 -0500 Subject: [PATCH 08/10] Update dashboards --- echarts.volkovlabs.io/bar.json | 4 +- echarts.volkovlabs.io/gauge.json | 166 ++++++++++++++++++++++++++----- echarts.volkovlabs.io/home.json | 13 ++- 3 files changed, 151 insertions(+), 32 deletions(-) diff --git a/echarts.volkovlabs.io/bar.json b/echarts.volkovlabs.io/bar.json index 1a7f12f..c9f35a3 100644 --- a/echarts.volkovlabs.io/bar.json +++ b/echarts.volkovlabs.io/bar.json @@ -80,7 +80,7 @@ "name": "default" }, "visualEditor": { - "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n },\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n}\n", + "code": "return {\n dataset: context.editor.dataset,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n },\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n series: [\n {\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }\n ]\n}\n", "codeHeight": 600, "dataset": [ { @@ -915,6 +915,6 @@ "timezone": "", "title": "Bar", "uid": "E9NLNnFVz", - "version": 3, + "version": 1, "weekStart": "" } diff --git a/echarts.volkovlabs.io/gauge.json b/echarts.volkovlabs.io/gauge.json index 0a09d0b..4bdeac4 100644 --- a/echarts.volkovlabs.io/gauge.json +++ b/echarts.volkovlabs.io/gauge.json @@ -24,6 +24,7 @@ "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, + "id": 14, "links": [ { "asDropdown": false, @@ -72,8 +73,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Gauge Basic chart", "type": "volkovlabs-echarts-panel" }, @@ -109,8 +122,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Simple Gauge", "type": "volkovlabs-echarts-panel" }, @@ -146,8 +171,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Speed Gauge", "type": "volkovlabs-echarts-panel" }, @@ -183,8 +220,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Progress Gauge", "type": "volkovlabs-echarts-panel" }, @@ -193,6 +242,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -214,44 +264,50 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, + "getOption": "return {\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n data: [\n {\n value: 70\n }\n ]\n }\n ]\n};\n\nsetInterval(function () {\n echartsInstance.setOption({\n series: [\n {\n data: [\n {\n value: +(Math.random() * 100).toFixed(2)\n }\n ]\n }\n ]\n });\n}, 2000);", + "google": { + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n }\n ]\n}\n", + "codeHeight": 600, "dataset": [ { "name": "value", "source": "A" } ], - "series": [], - "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n }\n ]\n}\n", - "codeHeight": 600 - }, - "getOption": "return {\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n data: [\n {\n value: 70\n }\n ]\n }\n ]\n};\n\nsetInterval(function () {\n echartsInstance.setOption({\n series: [\n {\n data: [\n {\n value: +(Math.random() * 100).toFixed(2)\n }\n ]\n }\n ]\n });\n}, 2000);", - "google": { - "callback": "gmapReady", - "key": "" - }, - "map": "json", - "renderer": "canvas" + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "value", "type": "number", - "config": {}, "values": [75] } ], "meta": {}, "name": "Speed" - } + }, + "refId": "A" } ], "title": "Stage Speed Gauge", @@ -289,8 +345,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Grade Gauge", "type": "volkovlabs-echarts-panel" }, @@ -326,8 +394,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Multi Title Gauge", "type": "volkovlabs-echarts-panel" }, @@ -363,8 +443,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Temperature", "type": "volkovlabs-echarts-panel" }, @@ -400,8 +492,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Ring Gauge", "type": "volkovlabs-echarts-panel" }, @@ -437,8 +541,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Gauge Barometer", "type": "volkovlabs-echarts-panel" }, @@ -517,8 +633,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] diff --git a/echarts.volkovlabs.io/home.json b/echarts.volkovlabs.io/home.json index 380311b..77514fd 100644 --- a/echarts.volkovlabs.io/home.json +++ b/echarts.volkovlabs.io/home.json @@ -32,6 +32,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -67,7 +68,7 @@ "name": "default" }, "visualEditor": { - "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n min: 0,\n },\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", + "code": "context.panel.chart.on('click', (params) => {\n context.grafana.locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\n\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n min: 0,\n },\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, "dataset": [ { @@ -117,7 +118,7 @@ "refId": "A" } ], - "title": "Getting Started using Data Source", + "title": "Getting Started", "type": "volkovlabs-echarts-panel" }, { @@ -125,6 +126,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -146,7 +148,7 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\nlet values = data.series[0].fields.find(f => f.name === 'Value').values\nlet labels = data.series[0].fields.find(f => f.name === 'Label').values\n\nconst labelRight = {\n position: 'right'\n};\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n xAxis: {\n type: 'value',\n position: 'top',\n splitLine: {\n lineStyle: {\n type: 'dashed'\n }\n }\n },\n yAxis: {\n type: 'category',\n axisLine: { show: false },\n axisLabel: { show: false },\n axisTick: { show: false },\n splitLine: { show: false },\n data: labels\n },\n series: [\n {\n name: 'Cost',\n type: 'bar',\n stack: 'Total',\n label: {\n show: true,\n formatter: '{b}'\n },\n data: values\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\n\nlet values = data.series[0].fields.find(f => f.name === 'Value').values\nlet labels = data.series[0].fields.find(f => f.name === 'Label').values\n\nconst labelRight = {\n position: 'right'\n};\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n xAxis: {\n type: 'value',\n position: 'top',\n splitLine: {\n lineStyle: {\n type: 'dashed'\n }\n }\n },\n yAxis: {\n type: 'category',\n axisLine: { show: false },\n axisLabel: { show: false },\n axisTick: { show: false },\n splitLine: { show: false },\n data: labels\n },\n series: [\n {\n name: 'Cost',\n type: 'bar',\n stack: 'Total',\n label: {\n show: true,\n formatter: '{b}'\n },\n data: values\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -159,7 +161,7 @@ "name": "default" }, "visualEditor": { - "code": "const labelRight = {\n position: 'right'\n};\n\nreturn {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n dataset: {\n source: context.editor.dataset.source\n },\n xAxis: {\n type: 'value',\n position: 'top',\n splitLine: {\n lineStyle: {\n type: 'dashed'\n }\n }\n },\n yAxis: {\n type: 'category',\n axisLine: { show: false },\n axisLabel: { show: false },\n axisTick: { show: false },\n splitLine: { show: false }\n },\n series: [\n {\n name: 'Cost',\n type: 'bar',\n stack: 'Total',\n label: {\n show: true,\n formatter: '{b}'\n },\n encode: {\n y: 'label',\n x: 'value'\n }\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "code": "context.panel.chart.on('click', (params) => {\n context.grafana.locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\n\nconst labelRight = {\n position: 'right'\n};\n\nreturn {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n dataset: {\n source: context.editor.dataset.source\n },\n xAxis: {\n type: 'value',\n position: 'top',\n splitLine: {\n lineStyle: {\n type: 'dashed'\n }\n }\n },\n yAxis: {\n type: 'category',\n axisLine: { show: false },\n axisLabel: { show: false },\n axisTick: { show: false },\n splitLine: { show: false }\n },\n series: [\n {\n name: 'Cost',\n type: 'bar',\n stack: 'Total',\n label: {\n show: true,\n formatter: '{b}'\n },\n encode: {\n y: 'label',\n x: 'value'\n }\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "codeHeight": 600, "dataset": [ { @@ -313,6 +315,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -347,7 +350,7 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n }\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", + "code": "context.panel.chart.on('click', (params) => {\n context.grafana.locationService.replace('/d/PQeH9VFVk/gauge?orgId=1');\n});\n\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n }\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, "dataset": [ { From 6636e337ef1201f20a33082df07cb5b594226fc1 Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Wed, 14 Feb 2024 23:28:02 -0500 Subject: [PATCH 09/10] Update Dashboards --- echarts.volkovlabs.io/home.json | 7 ++++--- echarts.volkovlabs.io/line.json | 16 +++++++++------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/echarts.volkovlabs.io/home.json b/echarts.volkovlabs.io/home.json index 77514fd..ff9ce38 100644 --- a/echarts.volkovlabs.io/home.json +++ b/echarts.volkovlabs.io/home.json @@ -489,7 +489,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "description": "", + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -525,7 +525,7 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", + "code": "context.panel.chart.on('click', (params) => {\n context.grafana.locationService.replace('/d/tg6gWiKVk/line?orgId=1');\n});\n\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, "dataset": [ { @@ -796,6 +796,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -830,7 +831,7 @@ "name": "default" }, "visualEditor": { - "code": "return {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", + "code": "context.panel.chart.on('click', (params) => {\n context.grafana.locationService.replace('/d/0b5-q7K4k/pie?orgId=1');\n});\n\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, "dataset": [ { diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json index 9859038..bf3cf14 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -24,7 +24,6 @@ "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, - "id": 24, "links": [ { "asDropdown": false, @@ -46,6 +45,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -62,12 +62,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n toolbox: {\n left: 'center',\n feature: {\n dataZoom: {\n yAxisIndex: 'none'\n },\n restore: {}\n }\n },\n series: [\n {\n data: values,\n type: \"line\"\n }\n ],\n xAxis: {\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: \"value\"\n }\n};", + "getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n toolbox: {\n left: 'center',\n feature: {\n dataZoom: {\n yAxisIndex: 'none'\n },\n restore: {}\n }\n },\n series: [\n {\n data: values,\n type: \"line\"\n }\n ],\n xAxis: {\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: \"value\"\n }\n};", "google": { "callback": "gmapReady", "key": "" @@ -80,7 +80,7 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\n\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: 'value',\n },\n}\n\n", + "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n toolbox: {\n left: 'center',\n feature: {\n dataZoom: {\n yAxisIndex: 'none'\n },\n restore: {}\n }\n },\n xAxis: {\n type: \"category\"\n },\n yAxis: {\n type: 'value',\n },\n}\n\n", "codeHeight": 600, "dataset": [ { @@ -134,7 +134,7 @@ "refId": "A" } ], - "title": "Basic Line Chart (Data Source)", + "title": "Basic Line Chart", "type": "volkovlabs-echarts-panel" }, { @@ -142,6 +142,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "", "gridPos": { "h": 12, "w": 12, @@ -191,6 +192,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -207,7 +209,7 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" @@ -2150,6 +2152,6 @@ "timezone": "", "title": "Line", "uid": "tg6gWiKVk", - "version": 20, + "version": 2, "weekStart": "" } From 6e4b9247c715c309ebc9b4d5e9497625f99567a9 Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Wed, 14 Feb 2024 23:35:06 -0500 Subject: [PATCH 10/10] Updates --- CHANGELOG.md | 4 +- echarts.volkovlabs.io/line.json | 34 +++++++-- echarts.volkovlabs.io/pie.json | 119 +++++++++++++++++++++++++------- 3 files changed, 124 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 55325d3..541f57f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Change Log -## 5.2.0 (2024-02-08) +## 5.2.0 (2024-02-14) ### Features / Enhancements @@ -11,7 +11,7 @@ - Add context parameter to non-visual mode (#245) - Add refresh function using Application Event Bus (#247) - Update to disallow to choose already selected fields (#251) -- Migrate echarts.volkovlabs.io to use visual editor and data sources (#248) +- Update echarts.volkovlabs.io to use visual editor and data sources (#248) ## 5.1.0 (2023-08-11) diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json index bf3cf14..ff9433a 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -338,7 +338,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "description": "", + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -374,7 +374,7 @@ "name": "default" }, "visualEditor": { - "code": "console.log(context);\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n}\n", + "code": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n}\n", "codeHeight": 600, "dataset": [ { @@ -830,8 +830,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Data Transform Filter", "type": "volkovlabs-echarts-panel" }, @@ -867,8 +879,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -2152,6 +2176,6 @@ "timezone": "", "title": "Line", "uid": "tg6gWiKVk", - "version": 2, + "version": 3, "weekStart": "" } diff --git a/echarts.volkovlabs.io/pie.json b/echarts.volkovlabs.io/pie.json index e29dff1..aa105dd 100644 --- a/echarts.volkovlabs.io/pie.json +++ b/echarts.volkovlabs.io/pie.json @@ -45,6 +45,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -61,12 +62,26 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, + "getOption": "let values = data.series[0].fields.find(field => field.name === 'value').values\nlet names = data.series[0].fields.find(field => field.name === 'name').values\nlet parts = values.map((value, index) => ({ name: names[index],value }));\nreturn {\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n data: parts,\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};", + "google": { + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "return {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n}\n", + "codeHeight": 600, "dataset": [ { "name": "name", @@ -77,44 +92,36 @@ "source": "A" } ], - "series": [], - "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n}\n", - "codeHeight": 600 - }, - "getOption": "let values = data.series[0].fields.find(field => field.name === 'value').values\nlet names = data.series[0].fields.find(field => field.name === 'name').values\nlet parts = values.map((value, index) => ({ name: names[index],value }));\nreturn {\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n data: parts,\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};", - "google": { - "callback": "gmapReady", - "key": "" - }, - "map": "json", - "renderer": "canvas" + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "A", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "name", "type": "string", - "config": {}, "values": ["Search Engine", "Direct", "Email", "Union Ads", "Video Ads"] }, { + "config": {}, "name": "value", "type": "number", - "config": {}, "values": [1048, 735, 580, 484, 300] } ], "meta": {}, "name": "Pie" - } + }, + "hide": false, + "refId": "A" } ], "title": "Referer of a Website", @@ -152,8 +159,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Doughnut Chart with Rounded Corners", "type": "volkovlabs-echarts-panel" }, @@ -189,8 +208,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Doughnut Chart", "type": "volkovlabs-echarts-panel" }, @@ -226,8 +257,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Customized Pie", "type": "volkovlabs-echarts-panel" }, @@ -263,8 +306,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -330,8 +385,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Nightingale Chart", "type": "volkovlabs-echarts-panel" }, @@ -756,8 +823,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": []