Provisioning for events updated (#289)

* provisioning for events updated * Update panel options --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · May 19, 2024 · 89d5aa7 · 89d5aa7
1 parent ccd4d53
commit 89d5aa7
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 64 deletions.
diff --git a/provisioning/dashboards/events.json b/provisioning/dashboards/events.json
@@ -18,12 +18,13 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 1,
+  "id": 22,
   "links": [],
   "liveNow": false,
   "panels": [
     {
       "datasource": {
-        "type": "grafana",
+        "type": "datasource",
         "uid": "grafana"
       },
       "fieldConfig": {
@@ -32,8 +33,10 @@
             "mode": "palette-classic"
           },
           "custom": {
+            "axisBorderShow": false,
             "axisCenteredZero": false,
             "axisColorMode": "text",
+            "axisGridShow": true,
             "axisLabel": "",
             "axisPlacement": "auto",
             "barAlignment": 0,
@@ -45,14 +48,15 @@
               "tooltip": false,
               "viz": false
             },
+            "insertNulls": false,
             "lineInterpolation": "linear",
             "lineWidth": 1,
-            "pointSize": 5,
+            "pointSize": 6,
             "scaleDistribution": {
               "type": "linear"
             },
             "showPoints": "auto",
-            "spanNulls": false,
+            "spanNulls": true,
             "stacking": {
               "group": "A",
               "mode": "none"
@@ -74,12 +78,14 @@
                 "value": 80
               }
             ]
-          }
+          },
+          "unit": "none",
+          "unitScale": true
         },
         "overrides": []
       },
       "gridPos": {
-        "h": 8,
+        "h": 10,
         "w": 12,
         "x": 0,
         "y": 0
@@ -93,12 +99,13 @@
           "showLegend": true
         },
         "tooltip": {
-          "mode": "single",
-          "sort": "none"
+          "mode": "multi",
+          "sort": "asc"
         }
       },
       "targets": [
         {
+          "channel": "plugin/testdata/random-2s-stream",
           "datasource": {
             "type": "datasource",
             "uid": "grafana"
@@ -121,6 +128,7 @@
             "mode": "palette-classic"
           },
           "custom": {
+            "axisBorderShow": false,
             "axisCenteredZero": false,
             "axisColorMode": "text",
             "axisLabel": "",
@@ -134,6 +142,7 @@
               "tooltip": false,
               "viz": false
             },
+            "insertNulls": false,
             "lineInterpolation": "linear",
             "lineWidth": 1,
             "pointSize": 5,
@@ -163,12 +172,13 @@
                 "value": 80
               }
             ]
-          }
+          },
+          "unitScale": true
         },
         "overrides": []
       },
       "gridPos": {
-        "h": 8,
+        "h": 10,
         "w": 12,
         "x": 12,
         "y": 0
@@ -182,7 +192,7 @@
           "showLegend": true
         },
         "tooltip": {
-          "mode": "single",
+          "mode": "multi",
           "sort": "none"
         }
       },
@@ -201,31 +211,76 @@
     },
     {
       "datasource": {
-        "type": "marcusolsson-static-datasource",
-        "uid": "4ytGZmF4k"
+        "type": "datasource",
+        "uid": "grafana"
       },
       "gridPos": {
-        "h": 8,
+        "h": 9,
         "w": 12,
         "x": 0,
-        "y": 8
+        "y": 10
+      },
+      "id": 4,
+      "options": {
+        "baidu": {
+          "callback": "bmapReady",
+          "key": ""
+        },
+        "editor": {
+          "format": "auto"
+        },
+        "editorMode": "code",
+        "gaode": {
+          "key": "",
+          "plugin": "AMap.Scale,AMap.ToolBar"
+        },
+        "getOption": "let series;\nlet data;\n\nconst subscription = context.grafana.eventBus.subscribe({ type: 'data-hover' }, (data) => {\n\n  if (data?.origin?.path[0] !== 'echarts-walk-1') {\n\n    const options = context.panel.chart.getOption()\n    const series = options.series\n    const newSeries = series.map(s => ({\n      ...s,\n      markLine: {\n        data: [\n          {\n            xAxis: data.payload?.point?.time || 0\n          }\n        ],\n        label: {\n          show: false\n        },\n        symbol: [\n          \"none\",\n          \"none\"\n        ]\n      }\n    }))\n\n    context.panel.chart.setOption({\n      ...options,\n      series: newSeries,\n      markLine: [{\n        animationEasing: \"linear\",\n        animation: false,\n        lineStyle: {\n          type: \"dashed\"\n        },\n        symbolOffset: 0,\n        label: {\n          show: false\n        },\n        symbol: [\n          \"none\",\n          \"none\"\n        ]\n      }]\n    })\n  }\n  if (data?.origin?.path[0] === 'echarts-walk-1') {\n\n    const options = context.panel.chart.getOption()\n    const series = options.series\n    const newSeries = series.map(s => ({\n      ...s,\n      markLine: {\n        data: [\n          {\n            xAxis: 0\n          }\n        ],\n        label: {\n          show: false\n        },\n        symbol: [\n          \"none\",\n          \"none\"\n        ]\n      }\n    }))\n\n    context.panel.chart.setOption({\n      ...options,\n      series: newSeries,\n      markLine: []\n    })\n\n  }\n})\n\n\nseries = context.panel.data.series.map((s) => {\n  const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;\n  const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;\n\n  return {\n    name: s.refId,\n    type: 'line',\n    showSymbol: false,\n    areaStyle: {\n      opacity: 0.1,\n    },\n    lineStyle: {\n      width: 1,\n    },\n    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),\n  };\n});\n\n\ndata = context.panel.data.series.map((s) => s.refId)\n\ncontext.panel.chart.on('mousemove', function (params) {\n\n  context.grafana.eventBus.publish({\n    type: 'data-hover', payload: {\n      point: {\n        time: params.value[0]\n      }\n    },\n    origin: {\n      path: ['echarts-walk-1']\n    }\n  })\n});\n\n\n\n\n\nreturn {\n  version: 2,\n  config: { notMerge: true },\n  option: {\n    backgroundColor: 'transparent',\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n        lineStyle: {\n          type: 'dashed',\n          width: 3\n        }\n      }\n    },\n    legend: {\n      left: '0',\n      bottom: '0',\n      data: data,\n      textStyle: {\n        color: 'rgba(128, 128, 128, .9)',\n      },\n    },\n    toolbox: {\n      feature: {\n        dataZoom: {\n          yAxisIndex: 'none',\n          icon: {\n            zoom: 'path://',\n            back: 'path://',\n          },\n        },\n        saveAsImage: {},\n      }\n    },\n    xAxis: {\n      type: 'time',\n      axisTick: {\n        inside: true\n      }\n    },\n    yAxis: {\n      type: 'value',\n      min: 'dataMin',\n      axisTick: {\n        inside: true\n      }\n    },\n    grid: {\n      left: '2%',\n      right: '2%',\n      top: '2%',\n      bottom: 24,\n      containLabel: true,\n    },\n    series,\n  },\n  unsubscribe: () => {\n    subscription.unsubscribe();\n    console.log('Unsubscribed');\n  }\n}\n",
+        "google": {
+          "callback": "gmapReady",
+          "key": ""
+        },
+        "map": "none",
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "return {\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",
+          "dataset": [],
+          "series": []
+        }
       },
-      "id": 2,
+      "pluginVersion": "6.1.0",
+      "title": "Random Walk 1",
+      "type": "volkovlabs-echarts-panel"
+    },
+    {
+      "datasource": {
+        "type": "datasource",
+        "uid": "grafana"
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 12,
+        "y": 10
+      },
+      "id": 5,
       "options": {
         "baidu": {
           "callback": "bmapReady",
           "key": ""
         },
         "editor": {
-          "format": "auto",
-          "height": 600
+          "format": "auto"
         },
         "editorMode": "code",
         "gaode": {
           "key": "",
           "plugin": "AMap.Scale,AMap.ToolBar"
         },
-        "getOption": "const subscription = context.grafana.eventBus.subscribe({ type: 'data-hover' }, (data) => {\n  console.log('React to Data Hover', data);\n})\n\nreturn {\n  version: 2,\n  unsubscribe: () => {\n    subscription.unsubscribe();\n    console.log('Unsubscribed');\n  }\n}\n",
+        "getOption": "let series;\nlet data;\n\nconst subscription = context.grafana.eventBus.subscribe({ type: 'data-hover' }, (data) => {\n\n\n  if (data?.origin?.path[0] !== 'echarts-walk-2') {\n\n    const options = context.panel.chart.getOption()\n    const series = options.series\n    const newSeries = series.map(s => ({\n      ...s,\n      markLine: {\n        data: [\n          {\n            xAxis: data.payload?.point?.time || 0\n          }\n        ],\n        label: {\n          show: false\n        },\n        symbol: [\n          \"none\",\n          \"none\"\n        ]\n      }\n    }))\n\n    context.panel.chart.setOption({\n      ...options,\n      series: newSeries,\n      markLine: [{\n        animationEasing: \"linear\",\n        animation: false,\n        lineStyle: {\n          type: \"dashed\"\n        },\n        symbolOffset: 0,\n        label: {\n          show: false\n        },\n        symbol: [\n          \"none\",\n          \"none\"\n        ]\n      }]\n    })\n  }\n  if (data?.origin?.path[0] === 'echarts-walk-2') {\n\n    const options = context.panel.chart.getOption()\n\n    const series = options.series\n    const newSeries = series.map(s => ({\n      ...s,\n      markLine: {\n        data: [\n          {\n            xAxis: 0\n          }\n        ],\n        label: {\n          show: false\n        },\n        symbol: [\n          \"none\",\n          \"none\"\n        ]\n      }\n    }))\n\n    context.panel.chart.setOption({\n      ...options,\n      series: newSeries,\n      markLine: []\n    })\n\n  }\n})\n\n\nseries = context.panel.data.series.map((s) => {\n  const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;\n  const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;\n\n  return {\n    name: s.refId,\n    type: 'line',\n    showSymbol: false,\n    areaStyle: {\n      opacity: 0.1,\n    },\n    lineStyle: {\n      width: 1,\n    },\n    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),\n  };\n});\n\n\ndata = context.panel.data.series.map((s) => s.refId)\n\ncontext.panel.chart.on('mousemove', function (params) {\n  context.grafana.eventBus.publish({\n    type: 'data-hover', payload: {\n      point: {\n        time: params.value[0]\n      }\n    },\n    origin: {\n      path: ['echarts-walk-2']\n    }\n  })\n});\n\n\nreturn {\n  version: 2,\n  config: { notMerge: true },\n  option: {\n    backgroundColor: 'transparent',\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n        lineStyle: {\n          type: 'dashed',\n          width: 3\n        }\n      }\n    },\n    legend: {\n      left: '0',\n      bottom: '0',\n      data: data,\n      textStyle: {\n        color: 'rgba(128, 128, 128, .9)',\n      },\n    },\n    toolbox: {\n      feature: {\n        dataZoom: {\n          yAxisIndex: 'none',\n          icon: {\n            zoom: 'path://',\n            back: 'path://',\n          },\n        },\n        saveAsImage: {},\n      }\n    },\n    xAxis: {\n      type: 'time',\n      axisTick: {\n        inside: true\n      }\n    },\n    yAxis: {\n      type: 'value',\n      min: 'dataMin',\n      axisTick: {\n        inside: true\n      }\n    },\n    grid: {\n      left: '2%',\n      right: '2%',\n      top: '2%',\n      bottom: 24,\n      containLabel: true,\n    },\n    series,\n  },\n  unsubscribe: () => {\n    subscription.unsubscribe();\n    console.log('Unsubscribed');\n  }\n}\n",
         "google": {
           "callback": "gmapReady",
           "key": ""
@@ -234,17 +289,21 @@
         "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: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "dataset": [],
+          "series": []
         }
       },
-      "title": "Data-Hover Subscribe",
+      "pluginVersion": "6.1.0",
+      "title": "Random Walk 2",
       "type": "volkovlabs-echarts-panel"
     }
   ],
   "refresh": "",
-  "schemaVersion": 38,
-  "style": "dark",
+  "schemaVersion": 39,
   "tags": [],
   "templating": {
     "list": []

diff --git a/src/components/EchartsEditor/EchartsEditor.test.tsx b/src/components/EchartsEditor/EchartsEditor.test.tsx
@@ -101,6 +101,7 @@ describe('Echarts Editor', () => {
         monacoOptions: {
           formatOnPaste: true,
           formatOnType: true,
+          scrollBeyondLastLine: false,
         },
       }),
       expect.anything()

diff --git a/src/components/EchartsEditor/EchartsEditor.tsx b/src/components/EchartsEditor/EchartsEditor.tsx
@@ -113,7 +113,7 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
         value={value}
         onBlur={onChange}
         onSave={onChange}
-        monacoOptions={monacoOptions}
+        monacoOptions={{ ...monacoOptions, scrollBeyondLastLine: false }}
         onEditorDidMount={onEditorMount}
         {...getItemSpecificEditorProps()}
       />

diff --git a/src/constants/echarts.ts b/src/constants/echarts.ts
@@ -18,14 +18,29 @@ export enum Theme {
  * Theme options
  */
 export const THEME_OPTIONS = [
-  { value: Theme.DEFAULT, label: 'Default', description: 'Default ECharts theme' },
-  { value: Theme.CUSTOM, label: 'Custom', description: 'Ability to use custom ECharts theme' },
+  { value: Theme.DEFAULT, label: 'Default', description: 'Default ECharts theme', icon: 'star' },
+  {
+    value: Theme.CUSTOM,
+    label: 'Custom',
+    description: 'Ability to use custom ECharts theme',
+    icon: 'presentation-play',
+  },
 ];
 
 /**
  * Renderer Options
  */
 export const RENDERER_OPTIONS = [
-  { value: Renderer.CANVAS, label: 'Canvas', description: 'More suitable for charts with a large number of elements.' },
-  { value: Renderer.SVG, label: 'SVG', description: 'Has less memory usage, no blur when using the browser zoom.' },
+  {
+    value: Renderer.CANVAS,
+    label: 'Canvas',
+    description: 'More suitable for charts with a large number of elements.',
+    icon: 'gf-landscape',
+  },
+  {
+    value: Renderer.SVG,
+    label: 'SVG',
+    description: 'Has less memory usage, no blur when using the browser zoom.',
+    icon: 'gf-grid',
+  },
 ];
diff --git a/src/constants/editor.ts b/src/constants/editor.ts
@@ -39,16 +39,16 @@ export enum EditorMode {
  * Editor Mode Options
  */
 export const EDITOR_MODE_OPTIONS = [
-  { value: EditorMode.CODE, label: 'Code' },
-  { value: EditorMode.VISUAL, label: 'Visual' },
+  { value: EditorMode.CODE, label: 'Code', icon: 'keyboard' },
+  { value: EditorMode.VISUAL, label: 'Visual', icon: 'chart-line' },
 ];
 
 /**
  * Format Options
  */
 export const FORMAT_OPTIONS = [
-  { value: Format.AUTO, label: 'Auto' },
-  { value: Format.NONE, label: 'Disabled' },
+  { value: Format.AUTO, label: 'Auto', icon: 'thumbs-up' },
+  { value: Format.NONE, label: 'Disabled', icon: 'toggle-off' },
 ];
 
 /**

diff --git a/src/constants/maps.ts b/src/constants/maps.ts
@@ -15,9 +15,9 @@ export enum Map {
 export const MAP_OPTIONS = [
   { value: Map.BMAP, label: 'Baidu', description: 'Requires Baidu Maps.' },
   { value: Map.AMAP, label: 'Gaode', description: 'Requires Gaode Maps.' },
-  { value: Map.GMAP, label: 'Google', description: 'Requires Google Maps.' },
-  { value: Map.JSON, label: 'JSON', description: 'Includes World and USA maps.' },
-  { value: Map.NONE, label: 'None' },
+  { value: Map.GMAP, label: 'Google', description: 'Requires Google Maps.', icon: 'google' },
+  { value: Map.JSON, label: 'JSON', description: 'Includes World and USA maps.', icon: 'map-marker' },
+  { value: Map.NONE, label: 'None', icon: 'minus-circle' },
 ];
 
 /**

diff --git a/src/module.ts b/src/module.ts
@@ -120,15 +120,25 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
     /**
      * Editor
      */
-    builder.addRadio({
-      path: 'editorMode',
-      name: 'Editor Mode',
-      defaultValue: EditorMode.VISUAL,
-      settings: {
-        options: EDITOR_MODE_OPTIONS,
-      },
-      category: ['Editor'],
-    });
+    builder
+      .addRadio({
+        path: 'editorMode',
+        name: 'Editor Mode',
+        defaultValue: EditorMode.VISUAL,
+        settings: {
+          options: EDITOR_MODE_OPTIONS,
+        },
+        category: ['Editor'],
+      })
+      .addRadio({
+        path: 'editor.format',
+        name: 'Formatting',
+        settings: {
+          options: FORMAT_OPTIONS,
+        },
+        defaultValue: DEFAULT_OPTIONS.editor.format,
+        category: ['Editor'],
+      });
 
     /**
      * Visual Editor
@@ -157,27 +167,16 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
     /**
      * Code Editor
      */
-    builder
-      .addRadio({
-        path: 'editor.format',
-        name: 'Formatting',
-        settings: {
-          options: FORMAT_OPTIONS,
-        },
-        defaultValue: DEFAULT_OPTIONS.editor.format,
-        category: ['Code'],
-        showIf: isCodeEditor,
-      })
-      .addCustomEditor({
-        id: Editor.CODE,
-        path: 'getOption',
-        name: 'Function',
-        description: 'Should return parameters and data for setOption() or an extended result object.',
-        defaultValue: DEFAULT_OPTIONS.getOption,
-        editor: EchartsEditor,
-        category: ['Code'],
-        showIf: isCodeEditor,
-      });
+    builder.addCustomEditor({
+      id: Editor.CODE,
+      path: 'getOption',
+      name: 'Function',
+      description: 'Should return parameters and data for setOption() or an extended result object.',
+      defaultValue: DEFAULT_OPTIONS.getOption,
+      editor: EchartsEditor,
+      category: ['Code'],
+      showIf: isCodeEditor,
+    });
 
     /**
      * Theme