From 8669a6a9e571197d9ae53f250f3a1e25f9e61c91 Mon Sep 17 00:00:00 2001 From: lana-k Date: Tue, 21 Dec 2021 22:13:02 +0100 Subject: [PATCH] #89 export to html plolty charts and pivots --- src/components/svg/html.vue | 47 +++++++++++++++++++ src/lib/chartHelper.js | 20 +++++--- .../Tabs/Tab/DataView/Chart/index.vue | 7 +++ .../Tabs/Tab/DataView/Pivot/index.vue | 21 ++++++++- .../Tabs/Tab/DataView/Pivot/pivotHelper.js | 38 +++++++++++++++ .../Workspace/Tabs/Tab/DataView/index.vue | 12 +++++ 6 files changed, 138 insertions(+), 7 deletions(-) create mode 100644 src/components/svg/html.vue diff --git a/src/components/svg/html.vue b/src/components/svg/html.vue new file mode 100644 index 0000000..3046863 --- /dev/null +++ b/src/components/svg/html.vue @@ -0,0 +1,47 @@ + + + diff --git a/src/lib/chartHelper.js b/src/lib/chartHelper.js index fc99d18..eed67e0 100644 --- a/src/lib/chartHelper.js +++ b/src/lib/chartHelper.js @@ -34,8 +34,15 @@ export async function getImageDataUrl (element, type) { }) } -export function getHtml (element, options) { +export function getChartData (element) { const chartElement = element.querySelector('.js-plotly-plot') + return { + data: chartElement.data, + layout: chartElement.layout, + } +} + +export function getHtml (options) { const chartId = nanoid() return ` @@ -48,12 +55,12 @@ export function getHtml (element, options) { const el = document.getElementById("${chartId}") let timeout - function debounceResize() { + function debounceResize() { clearTimeout(timeout) timeout = setTimeout(() => { - var r = el.getBoundingClientRect() - Plotly.relayout(el, {width: r.width, height: r.height}) - }, 200) + var r = el.getBoundingClientRect() + Plotly.relayout(el, {width: r.width, height: r.height}) + }, 200) } const resizeObserver = new ResizeObserver(debounceResize) @@ -69,5 +76,6 @@ export default { getOptionsFromDataSources, getOptionsForSave, getImageDataUrl, - getHtml + getHtml, + getChartData } diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue index 50e3e67..27e1502 100644 --- a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue @@ -105,6 +105,13 @@ export default { fIo.downloadFromUrl(url, 'chart') }, + saveAsHtml () { + fIo.exportToFile( + chartHelper.getHtml(this.state), + 'chart.html', + 'text/html' + ) + }, async prepareCopy (type = 'png') { return await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type) } diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue index 760db8d..c5b3cad 100644 --- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue @@ -19,7 +19,7 @@ import $ from 'jquery' import 'pivottable' import 'pivottable/dist/pivot.css' import PivotUi from './PivotUi' -import { getPivotCanvas } from './pivotHelper' +import { getPivotCanvas, getPivotHtml } from './pivotHelper' import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart' import chartHelper from '@/lib/chartHelper' import Vue from 'vue' @@ -193,6 +193,25 @@ export default { const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'svg') fIo.downloadFromUrl(url, 'pivot') } + }, + + saveAsHtml () { + if (this.viewCustomChart) { + this.pivotOptions.rendererOptions.customChartComponent.saveAsHtml() + } else if (this.viewStandartChart) { + const chartState = chartHelper.getChartData(this.$refs.pivotOutput) + fIo.exportToFile( + chartHelper.getHtml(chartState), + 'chart.html', + 'text/html' + ) + } else { + fIo.exportToFile( + getPivotHtml(this.$refs.pivotOutput), + 'pivot.html', + 'text/html' + ) + } } } } diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js index 2aca633..e86d92c 100644 --- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js +++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js @@ -81,3 +81,41 @@ export async function getPivotCanvas (pivotOutput) { const tableElement = pivotOutput.querySelector('.pvtTable') return await html2canvas(tableElement, { logging: false }) } + +export function getPivotHtml (pivotOutput) { + return ` + + + + + + ${pivotOutput.outerHTML} + + ` +} + diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue index d71cc89..d94c29b 100644 --- a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue @@ -51,6 +51,13 @@ + + +