Support vector graphic chart download #39

src/components/svg/exportToSvg.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="19"
+    height="18"
+    viewBox="0 0 19 18"
+    fill="none"
+  >
+    <path d="M4.28369 13.9966C4.28369 13.7711 4.20312 13.5953 4.04199 13.4693C3.88379 13.3433 3.604 13.213 3.20264 13.0782C2.80127 12.9434 2.47314 12.813 2.21826 12.6871C1.38916 12.2798 0.974609 11.7203 0.974609 11.0084C0.974609 10.6539 1.07715 10.3419 1.28223 10.0723C1.49023 9.79987 1.7832 9.58893 2.16113 9.43951C2.53906 9.28717 2.96387 9.211 3.43555 9.211C3.89551 9.211 4.30713 9.29303 4.67041 9.45709C5.03662 9.62115 5.3208 9.85553 5.52295 10.1602C5.7251 10.462 5.82617 10.8077 5.82617 11.1973H4.28809C4.28809 10.9366 4.20752 10.7344 4.04639 10.5909C3.88818 10.4473 3.67285 10.3755 3.40039 10.3755C3.125 10.3755 2.90674 10.4371 2.74561 10.5601C2.5874 10.6802 2.5083 10.834 2.5083 11.0215C2.5083 11.1856 2.59619 11.335 2.77197 11.4698C2.94775 11.6016 3.25684 11.7393 3.69922 11.8829C4.1416 12.0235 4.50488 12.1758 4.78906 12.3399C5.48047 12.7383 5.82617 13.2877 5.82617 13.9879C5.82617 14.5474 5.61523 14.9869 5.19336 15.3062C4.77148 15.6255 4.19287 15.7852 3.45752 15.7852C2.93896 15.7852 2.46875 15.6929 2.04688 15.5084C1.62793 15.3209 1.31152 15.066 1.09766 14.7437C0.886719 14.4185 0.78125 14.045 0.78125 13.6231H2.32812C2.32812 13.9659 2.41602 14.2193 2.5918 14.3834C2.77051 14.5445 3.05908 14.6251 3.45752 14.6251C3.7124 14.6251 3.91309 14.5709 4.05957 14.4625C4.20898 14.3511 4.28369 14.1959 4.28369 13.9966ZM9.1001 13.9571L10.3745 9.29889H12.0972L9.94385 15.6973H8.25635L6.12061 9.29889H7.83008L9.1001 13.9571ZM17.7441 14.9063C17.5068 15.17 17.1597 15.3824 16.7026 15.5435C16.2456 15.7047 15.7446 15.7852 15.1997 15.7852C14.3618 15.7852 13.6924 15.5289 13.1914 15.0162C12.6904 14.5035 12.4224 13.7901 12.3872 12.876L12.3828 12.3223C12.3828 11.6924 12.4941 11.1431 12.7168 10.6744C12.9395 10.2027 13.2573 9.84088 13.6704 9.58893C14.0864 9.33405 14.5669 9.2066 15.1118 9.2066C15.9087 9.2066 16.5269 9.38971 16.9663 9.75592C17.4087 10.1192 17.6665 10.6627 17.7397 11.3863H16.2544C16.2017 11.0289 16.0874 10.774 15.9116 10.6216C15.7358 10.4693 15.4868 10.3931 15.1646 10.3931C14.7778 10.3931 14.479 10.5572 14.2681 10.8853C14.0571 11.2134 13.9502 11.6822 13.9473 12.2916V12.6783C13.9473 13.317 14.0557 13.7974 14.2725 14.1197C14.4922 14.439 14.8364 14.5987 15.3052 14.5987C15.7065 14.5987 16.0054 14.5093 16.2017 14.3306V13.3375H15.1294V12.2784H17.7441V14.9063Z" fill="#A2B1C6"/>
+    <path d="M2.86768 0.991333H4.73292V2.49133H2.86768V7.93074H1.36768V2.49133C1.36768 1.66633 2.04268 0.991333 2.86768 0.991333Z" fill="#A2B1C6"/>
+    <path d="M15.7512 0.991333H13.886V2.49133H15.7512V7.93074H17.2512V2.49133C17.2512 1.66633 16.5762 0.991333 15.7512 0.991333Z" fill="#A2B1C6"/>
+    <path d="M9.36466 -1.76931e-05L13.0541 3.83972L10.8272 3.79527L10.7679 6.76452L7.79865 6.70526L7.85791 3.736L5.52492 3.68944L9.36466 -1.76931e-05Z" fill="#A2B1C6"/>
+  </svg>
+</template>
+
+<script>
+
+export default {
+  name: 'ExportToSvgIcon'
+}
+</script>

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