Updates

VolkovLabs · Feb 15, 2024 · 6e4b924 · 6e4b924
1 parent 6636e33
commit 6e4b924
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## 5.2.0 (2024-02-08)
+## 5.2.0 (2024-02-14)
 
 ### Features / Enhancements
 
@@ -11,7 +11,7 @@
 - Add context parameter to non-visual mode (#245)
 - Add refresh function using Application Event Bus (#247)
 - Update to disallow to choose already selected fields (#251)
-- Migrate echarts.volkovlabs.io to use visual editor and data sources (#248)
+- Update echarts.volkovlabs.io to use visual editor and data sources (#248)
 
 ## 5.1.0 (2023-08-11)
 

diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json
@@ -338,7 +338,7 @@
         "type": "marcusolsson-static-datasource",
         "uid": "4ytGZmF4k"
       },
-      "description": "",
+      "description": "Visual Editor with Data Source",
       "gridPos": {
         "h": 12,
         "w": 12,
@@ -374,7 +374,7 @@
           "name": "default"
         },
         "visualEditor": {
-          "code": "console.log(context);\nreturn {\n  grid: {\n    bottom: \"3%\",\n    containLabel: true,\n    left: \"3%\",\n  },\n  legend: {},\n  dataset: {\n    source: context.editor.dataset.source,\n  },\n  series: [\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Email\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Union Ads\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Video Ads\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Direct\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      label: {\n        position: \"top\",\n        show: true\n      },\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Search Engine\",\n      stack: \"Total\",\n    },\n  ],\n  toolbox: {\n    orient: 'vertical',\n    left: 'right',\n    top: 'center',\n    feature: {\n      saveAsImage: {}\n    }\n  },\n  tooltip: {\n    axisPointer: {\n      label: {\n        backgroundColor: \"#6a7985\"\n      },\n      type: \"cross\"\n    },\n    trigger: \"axis\"\n  },\n  xAxis: {\n    boundaryGap: false,\n    type: 'category'\n  },\n  yAxis: { type: 'value' },\n}\n",
+          "code": "return {\n  grid: {\n    bottom: \"3%\",\n    containLabel: true,\n    left: \"3%\",\n  },\n  legend: {},\n  dataset: {\n    source: context.editor.dataset.source,\n  },\n  series: [\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Email\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Union Ads\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Video Ads\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Direct\",\n      stack: \"Total\",\n    },\n    {\n      type: 'line',\n      areaStyle: {},\n      label: {\n        position: \"top\",\n        show: true\n      },\n      emphasis: {\n        focus: \"series\"\n      },\n      name: \"Search Engine\",\n      stack: \"Total\",\n    },\n  ],\n  toolbox: {\n    orient: 'vertical',\n    left: 'right',\n    top: 'center',\n    feature: {\n      saveAsImage: {}\n    }\n  },\n  tooltip: {\n    axisPointer: {\n      label: {\n        backgroundColor: \"#6a7985\"\n      },\n      type: \"cross\"\n    },\n    trigger: \"axis\"\n  },\n  xAxis: {\n    boundaryGap: false,\n    type: 'category'\n  },\n  yAxis: { type: 'value' },\n}\n",
           "codeHeight": 600,
           "dataset": [
             {
@@ -830,8 +830,20 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "codeHeight": 600,
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "title": "Data Transform Filter",
       "type": "volkovlabs-echarts-panel"
     },
@@ -867,8 +879,20 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "codeHeight": 600,
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "targets": [
         {
           "datasource": {
@@ -2152,6 +2176,6 @@
   "timezone": "",
   "title": "Line",
   "uid": "tg6gWiKVk",
-  "version": 2,
+  "version": 3,
   "weekStart": ""
 }
diff --git a/echarts.volkovlabs.io/pie.json b/echarts.volkovlabs.io/pie.json
@@ -45,6 +45,7 @@
         "type": "marcusolsson-static-datasource",
         "uid": "4ytGZmF4k"
       },
+      "description": "Visual Editor with Data Source",
       "gridPos": {
         "h": 12,
         "w": 12,
@@ -61,12 +62,26 @@
           "format": "auto",
           "height": 600
         },
-        "editorMode": "code",
+        "editorMode": "visual",
         "gaode": {
           "key": "",
           "plugin": "AMap.Scale,AMap.ToolBar"
         },
+        "getOption": "let values = data.series[0].fields.find(field => field.name === 'value').values\nlet names = data.series[0].fields.find(field => field.name === 'name').values\nlet parts = values.map((value, index) => ({ name: names[index],value }));\nreturn {\n  tooltip: {\n    trigger: 'item'\n  },\n  series: [\n    {\n      name: 'Access From',\n      type: 'pie',\n      radius: '80%',\n      data: parts,\n      emphasis: {\n        itemStyle: {\n          shadowBlur: 10,\n          shadowOffsetX: 0,\n          shadowColor: 'rgba(0, 0, 0, 0.5)'\n        }\n      }\n    }\n  ]\n};",
+        "google": {
+          "callback": "gmapReady",
+          "key": ""
+        },
+        "map": "json",
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
         "visualEditor": {
+          "code": "return {\n  dataset: {\n    source: context.editor.dataset.source,\n  },\n  tooltip: {\n    trigger: 'item'\n  },\n  series: [\n    {\n      name: 'Access From',\n      type: 'pie',\n      radius: '80%',\n      emphasis: {\n        itemStyle: {\n          shadowBlur: 10,\n          shadowOffsetX: 0,\n          shadowColor: 'rgba(0, 0, 0, 0.5)'\n        }\n      }\n    }\n  ]\n}\n",
+          "codeHeight": 600,
           "dataset": [
             {
               "name": "name",
@@ -77,44 +92,36 @@
               "source": "A"
             }
           ],
-          "series": [],
-          "code": "console.log(context);\nreturn {\n  dataset: {\n    source: context.editor.dataset.source,\n  },\n  tooltip: {\n    trigger: 'item'\n  },\n  series: [\n    {\n      name: 'Access From',\n      type: 'pie',\n      radius: '80%',\n      emphasis: {\n        itemStyle: {\n          shadowBlur: 10,\n          shadowOffsetX: 0,\n          shadowColor: 'rgba(0, 0, 0, 0.5)'\n        }\n      }\n    }\n  ]\n}\n",
-          "codeHeight": 600
-        },
-        "getOption": "let values = data.series[0].fields.find(field => field.name === 'value').values\nlet names = data.series[0].fields.find(field => field.name === 'name').values\nlet parts = values.map((value, index) => ({ name: names[index],value }));\nreturn {\n  tooltip: {\n    trigger: 'item'\n  },\n  series: [\n    {\n      name: 'Access From',\n      type: 'pie',\n      radius: '80%',\n      data: parts,\n      emphasis: {\n        itemStyle: {\n          shadowBlur: 10,\n          shadowOffsetX: 0,\n          shadowColor: 'rgba(0, 0, 0, 0.5)'\n        }\n      }\n    }\n  ]\n};",
-        "google": {
-          "callback": "gmapReady",
-          "key": ""
-        },
-        "map": "json",
-        "renderer": "canvas"
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "targets": [
         {
           "datasource": {
-            "uid": "4ytGZmF4k",
-            "type": "marcusolsson-static-datasource"
+            "type": "marcusolsson-static-datasource",
+            "uid": "4ytGZmF4k"
           },
-          "refId": "A",
-          "hide": false,
           "frame": {
             "fields": [
               {
+                "config": {},
                 "name": "name",
                 "type": "string",
-                "config": {},
                 "values": ["Search Engine", "Direct", "Email", "Union Ads", "Video Ads"]
               },
               {
+                "config": {},
                 "name": "value",
                 "type": "number",
-                "config": {},
                 "values": [1048, 735, 580, 484, 300]
               }
             ],
             "meta": {},
             "name": "Pie"
-          }
+          },
+          "hide": false,
+          "refId": "A"
         }
       ],
       "title": "Referer of a Website",
@@ -152,8 +159,20 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "codeHeight": 600,
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "title": "Doughnut Chart with Rounded Corners",
       "type": "volkovlabs-echarts-panel"
     },
@@ -189,8 +208,20 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "codeHeight": 600,
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "title": "Doughnut Chart",
       "type": "volkovlabs-echarts-panel"
     },
@@ -226,8 +257,20 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "codeHeight": 600,
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "title": "Customized Pie",
       "type": "volkovlabs-echarts-panel"
     },
@@ -263,8 +306,20 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "codeHeight": 600,
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "targets": [
         {
           "datasource": {
@@ -330,8 +385,20 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "height": 400,
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "codeHeight": 600,
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "5.2.0",
       "title": "Nightingale Chart",
       "type": "volkovlabs-echarts-panel"
     },
@@ -756,8 +823,8 @@
       "type": "volkovlabs-echarts-panel"
     }
   ],
-  "schemaVersion": 37,
-  "style": "dark",
+  "refresh": "",
+  "schemaVersion": 39,
   "tags": ["echarts"],
   "templating": {
     "list": []