dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-29 13:23:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

export chart to HTML

Browse Source
This commit is contained in:
Jan Prochazka
2021-11-11 13:16:46 +01:00
parent 423bd3f223
commit 0fd4084fac
6 changed files with 121 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/api/src/controllers/files.js
View File

@@ -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;
},
};

38
packages/api/src/utility/getChartExport.js Normal file
View File

@@ -0,0 +1,38 @@
const getChartExport = (title, config) => {
return `<html>
<meta charset='utf-8'>
<head>
${title ? `<title>${title}</title>` : ''}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js" integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js" integrity="sha512-oh5t+CdSBsaVVAvxcZKy3XJdP7ZbYUBSRCXDTVn0ODewMDDNnELsrG9eDm8rVZAQg7RsDD/8K3MjPAFB13o6eA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const config = ${JSON.stringify(config)};
function showChart() {
document.getElementById('myImage').style.display = "none";
const myChart = new Chart(
document.getElementById('myChart'),
config
);
}
</script>
</head>
</html>
<body onload="showChart()">
<img src="img1.png" id="myImage" />
<div>
<canvas id="myChart"></canvas>
</div>
</body>
</html>`;
};
module.exports = getChartExport;

54
packages/web/src/charts/ChartCore.svelte
View File

@@ -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} />

4
packages/web/src/charts/ChartEditor.svelte
View File

@@ -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>

7
packages/web/src/charts/DataChart.svelte
View File

@@ -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}

34
packages/web/src/tabs/ChartTab.svelte
View File

@@ -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}