Support vector graphic chart download #39

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

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')
+      }
     }
   }
 }

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 @@
         <png-icon />
       </icon-button>
 
+      <icon-button
+        :disabled="!importToSvgEnabled"
+        tooltip="Save as SVG"
+        tooltip-position="top-left"
+        @click="saveAsSvg"
+      >
+        <export-to-svg-icon />
+      </icon-button>
+
       <icon-button
         :loading="copyingImage"
         tooltip="Copy visualisation to clipboard"
@@ -71,6 +81,7 @@ import SideToolBar from '../SideToolBar'
 import IconButton from '@/components/IconButton'
 import ChartIcon from '@/components/svg/chart'
 import PivotIcon from '@/components/svg/pivot'
+import ExportToSvgIcon from '@/components/svg/exportToSvg'
 import PngIcon from '@/components/svg/png'
 import ClipboardIcon from '@/components/svg/clipboard'
 import cIo from '@/lib/utils/clipboardIo'
@@ -86,6 +97,7 @@ export default {
     IconButton,
     ChartIcon,
     PivotIcon,
+    ExportToSvgIcon,
     PngIcon,
     ClipboardIcon,
     loadingDialog
@@ -94,6 +106,7 @@ export default {
     return {
       mode: this.initMode || 'chart',
       importToPngEnabled: true,
+      importToSvgEnabled: true,
       loadingImage: false,
       copyingImage: false,
       preparingCopy: false,
@@ -151,6 +164,10 @@ export default {
     cancelCopy () {
       this.dataToCopy = null
       this.$modal.hide('prepareCopy')
+    },
+
+    saveAsSvg () {
+      this.$refs.viewComponent.saveAsSvg()
     }
   }
 }