export chart to HTML

packages/web/src/charts/ChartCore.svelte

@@ -1,18 +1,39 @@
 <script lang="ts" context="module">
   import Chart from 'chart.js/auto';
   import 'chartjs-adapter-moment';
+
+  const getCurrentEditor = () => getActiveComponent('ChartCore');
+
+  registerCommand({
+    id: 'chart.export',
+    category: 'Chart',
+    toolbarName: 'Export',
+    name: 'Export chart',
+    icon: 'icon report',
+    toolbar: true,
+    isRelatedToTab: true,
+    onClick: () => getCurrentEditor().exportChart(),
+    testEnabled: () => getCurrentEditor() != null,
+  });
 </script>
 
 <script lang="ts">
   import { onMount, afterUpdate, onDestroy } from 'svelte';
+  import registerCommand from '../commands/registerCommand';
+  import axiosInstance from '../utility/axiosInstance';
 
-  import contextMenu from '../utility/contextMenu';
+  import contextMenu, { getContextMenu, registerMenu } from '../utility/contextMenu';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import resolveApi from '../utility/resolveApi';
 
   export let data;
+  export let title;
   export let type = 'line';
   export let options = {};
-  export let plugins = {};
-  export let menu;
+  // export let plugins = {};
+  // export let menu;
+
+  export const activator = createActivator('ChartCore', true);
 
   let chart = null;
   let domChart;
@@ -21,10 +42,7 @@
     chart = new Chart(domChart, {
       type,
       data,
-      options: {
-        ...options,
-        plugins,
-      },
+      options,
     });
   });
 
@@ -32,10 +50,7 @@
     if (!chart) return;
     chart.data = data;
     chart.type = type;
-    chart.options = {
-      ...options,
-      plugins,
-    };
+    chart.options = options;
     // chart.plugins = plugins;
     chart.update();
   });
@@ -43,6 +58,23 @@
   onDestroy(() => {
     chart = null;
   });
+
+  export async function exportChart() {
+    const resp = await axiosInstance.post('files/export-chart', {
+      title,
+      config: {
+        type,
+        data,
+        options,
+      },
+    });
+
+    window.open(`${resolveApi()}/uploads/get?file=${resp.data}`, '_blank');
+  }
+
+  registerMenu({ command: 'chart.export', tag: 'export' });
+
+  const menu = getContextMenu();
 </script>
 
 <canvas bind:this={domChart} {...$$restProps} use:contextMenu={menu} />

packages/web/src/charts/ChartEditor.svelte

@@ -25,7 +25,7 @@
   export let conid;
   export let database;
   export let sql;
-  export let menu;
+  // export let menu;
 
   let availableColumnNames = [];
   let error = null;
@@ -151,7 +151,7 @@
     </div>
 
     <svelte:fragment slot="2">
-      <DataChart data={data || loadedData} {menu} />
+      <DataChart data={data || loadedData} />
     </svelte:fragment>
   </HorizontalSplitter>
 </FormProviderCore>

packages/web/src/charts/DataChart.svelte

@@ -130,7 +130,7 @@
   import { currentThemeDefinition } from '../stores';
 
   export let data;
-  export let menu;
+  // export let menu;
 
   const { values } = getFormContext();
 
@@ -163,9 +163,8 @@
         height={clientHeight}
         data={chartData[0]}
         type={$values.chartType}
-        options={chartData[1]}
-        plugins={chartData[2]}
-        {menu}
+        title={$values.chartTitle}
+        options={{ ...chartData[1], plugins: chartData[2] }}
       />
     {/key}
   {/if}

packages/web/src/tabs/ChartTab.svelte

@@ -11,6 +11,18 @@
 
     undoRedo: true,
   });
+
+  registerCommand({
+    id: 'chart.export',
+    category: 'Chart',
+    toolbarName: 'Export',
+    name: 'Export chart',
+    icon: 'icon report',
+    toolbar: true,
+    isRelatedToTab: true,
+    onClick: () => getCurrentEditor().exportChart(),
+    testEnabled: () => getCurrentEditor() != null,
+  });
 </script>
 
 <script lang="ts">
@@ -18,6 +30,7 @@
   import { derived } from 'svelte/store';
   import ChartEditor from '../charts/ChartEditor.svelte';
   import invalidateCommands from '../commands/invalidateCommands';
+  import registerCommand from '../commands/registerCommand';
   import { registerFileCommands } from '../commands/stdCommands';
 
   import ErrorInfo from '../elements/ErrorInfo.svelte';
@@ -25,8 +38,11 @@
   import LoadingInfo from '../elements/LoadingInfo.svelte';
 
   import useEditorData from '../query/useEditorData';
+  import axiosInstance from '../utility/axiosInstance';
+  import { getContextMenu, registerMenu } from '../utility/contextMenu';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import createUndoReducer from '../utility/createUndoReducer';
+  import resolveApi from '../utility/resolveApi';
 
   export let tabid;
   export let conid;
@@ -90,15 +106,14 @@
     dispatchModel({ type: 'redo' });
   }
 
-  function createMenu() {
-    return [
-      { command: 'chart.save' },
-      { command: 'chart.saveAs' },
-      { divider: true },
-      { command: 'chart.undo' },
-      { command: 'chart.redo' },
-    ];
-  }
+  registerMenu(
+    { command: 'chart.save' },
+    { command: 'chart.saveAs' },
+    { placeTag: 'export' },
+    { divider: true },
+    { command: 'chart.undo' },
+    { command: 'chart.redo' }
+  );
 </script>
 
 {#if $editorState.isLoading}
@@ -112,6 +127,5 @@
     sql={$modelState.value && $modelState.value.sql}
     {conid}
     {database}
-    menu={createMenu}
   />
 {/if}