diff --git a/packages/api/src/controllers/files.js b/packages/api/src/controllers/files.js index f23875df8..e78d2d432 100644 --- a/packages/api/src/controllers/files.js +++ b/packages/api/src/controllers/files.js @@ -1,6 +1,8 @@ +const uuidv1 = require('uuid/v1'); const fs = require('fs-extra'); const path = require('path'); -const { filesdir, archivedir, resolveArchiveFolder } = require('../utility/directories'); +const { filesdir, archivedir, resolveArchiveFolder, uploadsdir } = require('../utility/directories'); +const getChartExport = require('../utility/getChartExport'); const hasPermission = require('../utility/hasPermission'); const socket = require('../utility/socket'); const scheduler = require('./scheduler'); @@ -114,4 +116,12 @@ module.exports = { } return res; }, + + exportChart_meta: 'post', + async exportChart({ title, config }) { + const html = getChartExport(title, config); + const fileName = `${uuidv1()}.html`; + await fs.writeFile(path.join(uploadsdir(), fileName), html); + return fileName; + }, }; diff --git a/packages/api/src/utility/getChartExport.js b/packages/api/src/utility/getChartExport.js new file mode 100644 index 000000000..6ca69ae4b --- /dev/null +++ b/packages/api/src/utility/getChartExport.js @@ -0,0 +1,38 @@ +const getChartExport = (title, config) => { + return ` + + + + ${title ? `${title}` : ''} + + + + + + + + + + + + +
+ +
+ + +`; +}; + +module.exports = getChartExport; diff --git a/packages/web/src/charts/ChartCore.svelte b/packages/web/src/charts/ChartCore.svelte index db9e46065..cbe37919a 100644 --- a/packages/web/src/charts/ChartCore.svelte +++ b/packages/web/src/charts/ChartCore.svelte @@ -1,18 +1,39 @@ diff --git a/packages/web/src/charts/ChartEditor.svelte b/packages/web/src/charts/ChartEditor.svelte index da0814336..ed0c92c3f 100644 --- a/packages/web/src/charts/ChartEditor.svelte +++ b/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 @@ - + diff --git a/packages/web/src/charts/DataChart.svelte b/packages/web/src/charts/DataChart.svelte index edbb763b5..b3cfa3aee 100644 --- a/packages/web/src/charts/DataChart.svelte +++ b/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} diff --git a/packages/web/src/tabs/ChartTab.svelte b/packages/web/src/tabs/ChartTab.svelte index 94a50ce80..af9a16be9 100644 --- a/packages/web/src/tabs/ChartTab.svelte +++ b/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, + }); {#if $editorState.isLoading} @@ -112,6 +127,5 @@ sql={$modelState.value && $modelState.value.sql} {conid} {database} - menu={createMenu} /> {/if}