From e6bef139f1aa6e4fbb7cd24381b5cd11f0b17fca Mon Sep 17 00:00:00 2001 From: lana-k Date: Sat, 21 Aug 2021 22:51:17 +0200 Subject: [PATCH] Support vector graphic chart download #39 --- src/components/svg/exportToSvg.vue | 20 +++++++++++ .../Tabs/Tab/DataView/Chart/index.vue | 12 +++++-- .../Tabs/Tab/DataView/Pivot/index.vue | 34 ++++++++++++++----- .../Workspace/Tabs/Tab/DataView/index.vue | 17 ++++++++++ 4 files changed, 72 insertions(+), 11 deletions(-) create mode 100644 src/components/svg/exportToSvg.vue diff --git a/src/components/svg/exportToSvg.vue b/src/components/svg/exportToSvg.vue new file mode 100644 index 0000000..064abd8 --- /dev/null +++ b/src/components/svg/exportToSvg.vue @@ -0,0 +1,20 @@ + + + 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 f6110dc..9ba8e8c 100644 --- a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue @@ -34,7 +34,7 @@ import fIo from '@/lib/utils/fileIo' export default { name: 'Chart', - props: ['dataSources', 'initOptions', 'importToPngEnabled'], + props: ['dataSources', 'initOptions', 'importToPngEnabled', 'importToSvgEnabled'], components: { PlotlyEditor }, @@ -93,8 +93,14 @@ export default { this.$emit('loadingImageCompleted') fIo.downloadFromUrl(url, 'chart') }, - async prepareCopy () { - return await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, 'png') + + async saveAsSvg () { + const url = await this.prepareCopy('svg') + fIo.downloadFromUrl(url, 'chart') + }, + + 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 f935e0a..1a5a9a4 100644 --- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue @@ -27,7 +27,7 @@ const ChartClass = Vue.extend(Chart) export default { name: 'pivot', - props: ['dataSources', 'initOptions', 'importToPngEnabled'], + props: ['dataSources', 'initOptions', 'importToPngEnabled', 'importToSvgEnabled'], components: { PivotUi }, @@ -68,6 +68,14 @@ export default { computed: { columns () { return Object.keys(this.dataSources || {}) + }, + + viewStandartChart () { + return this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers + }, + + viewCustomChart () { + return this.pivotOptions.rendererName === 'Custom chart' } }, watch: { @@ -78,6 +86,7 @@ export default { immediate: true, handler () { this.$emit('update:importToPngEnabled', this.pivotOptions.rendererName !== 'TSV Export') + this.$emit('update:importToSvgEnabled', this.viewStandartChart || this.viewCustomChart) } }, pivotOptions () { @@ -98,14 +107,14 @@ export default { handleResize () { // hack: plotly changes size only on window.resize event, // so, we trigger it when container resizes (e.g. when move splitter) - if (this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers) { + if (this.viewStandartChart) { window.dispatchEvent(new Event('resize')) } }, show () { const options = { ...this.pivotOptions } - if (this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers) { + if (this.viewStandartChart) { options.rendererOptions = { plotly: { autosize: true, @@ -135,7 +144,7 @@ export default { ) // fix for Firefox: fit plotly renderers just after choosing it in pivotUi - if (this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers) { + if (this.viewStandartChart) { window.dispatchEvent(new Event('resize')) } }, @@ -153,9 +162,9 @@ export default { }, async saveAsPng () { - if (this.pivotOptions.rendererName === 'Custom chart') { + if (this.viewCustomChart) { this.pivotOptions.rendererOptions.customChartComponent.saveAsPng() - } else if (this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers) { + } else if (this.viewStandartChart) { const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png') this.$emit('loadingImageCompleted') fIo.downloadFromUrl(url, 'pivot') @@ -167,13 +176,22 @@ export default { }, async prepareCopy () { - if (this.pivotOptions.rendererName === 'Custom chart') { + if (this.viewCustomChart) { return await this.pivotOptions.rendererOptions.customChartComponent.prepareCopy() - } else if (this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers) { + } else if (this.viewStandartChart) { return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png') } else { return await getPivotCanvas(this.$refs.pivotOutput) } + }, + + async saveAsSvg () { + if (this.viewCustomChart) { + this.pivotOptions.rendererOptions.customChartComponent.saveAsSvg() + } else if (this.viewStandartChart) { + const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'svg') + fIo.downloadFromUrl(url, 'pivot') + } } } } diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue index 98e5205..811cd73 100644 --- a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue @@ -6,6 +6,7 @@ :init-options="mode === initMode ? initOptions : undefined" :data-sources="dataSource" :import-to-png-enabled.sync="importToPngEnabled" + :import-to-svg-enabled.sync="importToSvgEnabled" @loadingImageCompleted="loadingImage = false" ref="viewComponent" @update="$emit('update')" @@ -41,6 +42,15 @@ + + + +