diff --git a/CHANGELOG.md b/CHANGELOG.md index 179a39a..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,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) +- Update echarts.volkovlabs.io to use visual editor and data sources (#248) ## 5.1.0 (2023-08-11) diff --git a/echarts.volkovlabs.io/bar.json b/echarts.volkovlabs.io/bar.json index 8acbca4..c9f35a3 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,19 +62,74 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "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": "" }, "map": "json", - "renderer": "canvas" - }, + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "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": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "id": "A", + "name": "Bar", + "type": "bar", + "uid": "f86dc46d-1364-4d2b-8d5f-834633903124" + } + ] + } + }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Category", + "type": "string", + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + }, + { + "config": {}, + "name": "Value", + "type": "number", + "values": [120, 200, 150, 80, 70, 110, 130] + } + ], + "meta": {}, + "name": "Bar" + }, + "refId": "A" + } + ], "title": "Bar with Background", "type": "volkovlabs-echarts-panel" }, @@ -109,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" }, @@ -119,6 +187,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -135,19 +204,74 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "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};", + "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" - }, + "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", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "id": "Bar", + "name": "Bar", + "type": "bar", + "uid": "4fb6e263-71e4-46ce-ae33-8dedb8dc077e" + } + ] + } + }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Category", + "type": "string", + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + }, + { + "config": {}, + "name": "Value", + "type": "number", + "values": [120, 52, 200, 334, 390, 330, 220] + } + ], + "meta": {}, + "name": "Bar" + }, + "refId": "A" + } + ], "title": "Axis Align with Tick", "type": "volkovlabs-echarts-panel" }, @@ -183,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" }, @@ -220,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" }, @@ -257,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" }, @@ -294,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" }, @@ -331,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" }, @@ -341,6 +525,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -357,7 +542,7 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" @@ -368,8 +553,66 @@ "key": "" }, "map": "json", - "renderer": "canvas" - }, + "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", + "source": "A" + }, + { + "name": "2011", + "source": "A" + }, + { + "name": "2012", + "source": "A" + } + ], + "series": [] + } + }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Name", + "type": "string", + "values": ["Brazil", "Indonezia", "USA", "India", "China", "World"] + }, + { + "config": {}, + "name": "2011", + "type": "number", + "values": [18203, 19325, 29034, 104970, 131744, 630230] + }, + { + "config": {}, + "name": "2012", + "type": "number", + "values": [23489, 23438, 31000, 121594, 134141, 681807] + } + ], + "meta": {}, + "name": "Bars" + }, + "refId": "A" + } + ], "title": "World Population", "type": "volkovlabs-echarts-panel" }, @@ -405,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" }, @@ -442,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" }, @@ -479,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" }, @@ -516,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" }, @@ -553,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" }, @@ -596,8 +899,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] diff --git a/echarts.volkovlabs.io/gauge.json b/echarts.volkovlabs.io/gauge.json index 11bbc09..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, @@ -220,8 +270,46 @@ "key": "" }, "map": "json", - "renderer": "canvas" - }, + "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": [] + } + }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "value", + "type": "number", + "values": [75] + } + ], + "meta": {}, + "name": "Speed" + }, + "refId": "A" + } + ], "title": "Stage Speed Gauge", "type": "volkovlabs-echarts-panel" }, @@ -257,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" }, @@ -294,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" }, @@ -331,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" }, @@ -368,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" }, @@ -405,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" }, @@ -485,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 57f0e66..ff9ce38 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, @@ -54,7 +55,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 +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}\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": [ { @@ -89,6 +90,7 @@ ] } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -116,7 +118,7 @@ "refId": "A" } ], - "title": "Getting Started using Data Source", + "title": "Getting Started", "type": "volkovlabs-echarts-panel" }, { @@ -124,6 +126,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -140,12 +143,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});\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": "" @@ -158,12 +161,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": "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": [], + "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" }, @@ -212,6 +257,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Calendar", "type": "volkovlabs-echarts-panel" }, @@ -260,6 +306,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Candlestick", "type": "volkovlabs-echarts-panel" }, @@ -268,6 +315,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -284,12 +332,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 +350,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": "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": [], + "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 +431,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Geo/Map", "type": "volkovlabs-echarts-panel" }, @@ -404,6 +480,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Graph", "type": "volkovlabs-echarts-panel" }, @@ -412,7 +489,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "description": "", + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -430,12 +507,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 +525,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": "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": [], + "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 +737,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 +750,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" }, @@ -510,6 +796,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 10, "w": 8, @@ -526,12 +813,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 +831,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": "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": [], + "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 +927,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Radar", "type": "volkovlabs-echarts-panel" }, @@ -646,6 +976,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Sankey", "type": "volkovlabs-echarts-panel" }, @@ -694,6 +1025,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Scatter", "type": "volkovlabs-echarts-panel" }, @@ -742,6 +1074,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Sunburst", "type": "volkovlabs-echarts-panel" }, @@ -790,6 +1123,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 38977d2..ff9433a 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -45,6 +45,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -61,19 +62,51 @@ "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": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "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": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "encode": { + "x": ["A:Category"], + "y": ["A:Value"] + }, + "id": "A", + "name": "Line", + "type": "line", + "uid": "5918873e-de00-4e8f-814d-f2ca62612b33" + } + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -91,8 +124,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": {}, @@ -101,7 +134,7 @@ "refId": "A" } ], - "title": "Basic Line Chart (Data Source)", + "title": "Basic Line Chart", "type": "volkovlabs-echarts-panel" }, { @@ -109,6 +142,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "", "gridPos": { "h": 12, "w": 12, @@ -136,8 +170,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" }, @@ -146,6 +192,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -162,19 +209,78 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "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 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": "" }, "map": "json", - "renderer": "canvas" + "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", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "encode": { + "x": ["A:Category"], + "y": ["A:Value"] + }, + "id": "A", + "name": "Line", + "type": "line", + "uid": "c49ee2de-463a-4854-a80c-f741eb316b07" + } + ] + } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Category", + "type": "string", + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + }, + { + "config": {}, + "name": "Value", + "type": "number", + "values": [820, 932, 901, 934, 1290, 1330, 1320] + } + ], + "meta": {}, + "name": "Line" + }, + "refId": "A" + } + ], "title": "Basic area chart", "type": "volkovlabs-echarts-panel" }, @@ -210,8 +316,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" }, @@ -220,7 +338,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "description": "", + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -238,19 +356,177 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "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};", + "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": { "callback": "gmapReady", "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "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": [ + { + "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": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + ], + "meta": {}, + "name": "Days" + }, + "refId": "A" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [120, 132, 101, 134, 90, 230, 210] + } + ], + "meta": {}, + "name": "Email" + }, + "hide": false, + "refId": "B" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [220, 182, 191, 234, 290, 330, 310] + } + ], + "meta": {}, + "name": "Union Ads" + }, + "hide": false, + "refId": "C" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "value", + "type": "number", + "values": [150, 232, 201, 154, 190, 330, 410] + } + ], + "meta": {}, + "name": "Video Ads" + }, + "hide": false, + "refId": "D" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [320, 332, 301, 334, 390, 330, 320] + } + ], + "meta": {}, + "name": "Direct" + }, + "hide": false, + "refId": "E" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "value", + "type": "number", + "values": [820, 932, 901, 934, 1290, 1330, 1320] + } + ], + "meta": {}, + "name": "Search Engine" + }, + "hide": false, + "refId": "F" + } + ], "title": "Stacked Area Chart", "type": "volkovlabs-echarts-panel" }, @@ -286,8 +562,141 @@ "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" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "string", + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + ], + "meta": {}, + "name": "Months" + }, + "refId": "A" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "string", + "values": ["120", "132", "101", "134", "90", "230", "210"] + } + ], + "meta": {}, + "name": "Email" + }, + "hide": false, + "refId": "B" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "string", + "values": ["220", "182", "191", "234", "290", "330", "310"] + } + ], + "meta": {}, + "name": "Union Ads" + }, + "hide": false, + "refId": "C" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "value", + "type": "string", + "values": ["150", "232", "201", "154", "190", "330", "410"] + } + ], + "meta": {}, + "name": "Video Ads" + }, + "hide": false, + "refId": "D" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "string", + "values": ["320", "332", "301", "334", "390", "330", "320"] + } + ], + "meta": {}, + "name": "Direct" + }, + "hide": false, + "refId": "E" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "value", + "type": "string", + "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + } + ], + "meta": {}, + "name": "Search Engine" + }, + "hide": false, + "refId": "F" + } + ], "title": "Gradient Stacked Area Chart", "type": "volkovlabs-echarts-panel" }, @@ -323,8 +732,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" }, @@ -360,8 +781,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" }, @@ -397,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" }, @@ -434,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": { @@ -1703,8 +2160,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] @@ -1719,6 +2176,6 @@ "timezone": "", "title": "Line", "uid": "tg6gWiKVk", - "version": 1, + "version": 3, "weekStart": "" } diff --git a/echarts.volkovlabs.io/pie.json b/echarts.volkovlabs.io/pie.json index 4cc4561..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,19 +62,68 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "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};", + "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" + "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", + "source": "A" + }, + { + "name": "value", + "source": "A" + } + ], + "series": [] + } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "name", + "type": "string", + "values": ["Search Engine", "Direct", "Email", "Union Ads", "Video Ads"] + }, + { + "config": {}, + "name": "value", + "type": "number", + "values": [1048, 735, 580, 484, 300] + } + ], + "meta": {}, + "name": "Pie" + }, + "hide": false, + "refId": "A" + } + ], "title": "Referer of a Website", "type": "volkovlabs-echarts-panel" }, @@ -109,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" }, @@ -146,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" }, @@ -183,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" }, @@ -220,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": { @@ -287,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" }, @@ -713,8 +823,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] 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