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": [ {