copy png to clipboard #50

src/lib/chartHelper.js

@@ -0,0 +1,40 @@
+import dereference from 'react-chart-editor/lib/lib/dereference'
+import plotly from 'plotly.js'
+
+export function getOptionsFromDataSources (dataSources) {
+  if (!dataSources) {
+    return []
+  }
+
+  return Object.keys(dataSources).map(name => ({
+    value: name,
+    label: name
+  }))
+}
+
+export function getOptionsForSave (state, dataSources) {
+  // we don't need to save the data, only settings
+  // so we modify state.data using dereference
+  const stateCopy = JSON.parse(JSON.stringify(state))
+  const emptySources = {}
+  for (const key in dataSources) {
+    emptySources[key] = []
+  }
+  dereference(stateCopy.data, emptySources)
+  return stateCopy
+}
+
+export async function getImageDataUrl (element, type) {
+  const chartElement = element.querySelector('.js-plotly-plot')
+  return await plotly.toImage(chartElement, {
+    format: type,
+    width: null,
+    height: null
+  })
+}
+
+export default {
+  getOptionsFromDataSources,
+  getOptionsForSave,
+  getImageDataUrl
+}

src/lib/utils/clipboardIo.js

@@ -1,8 +1,30 @@
 import Lib from 'plotly.js/src/lib'
+import dataUrlToBlob from 'dataurl-to-blob'
+
+async function _copyBlob(blob) {
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ])
+}
 
 export default {
   async copyCsv (str) {
     await navigator.clipboard.writeText(str)
     Lib.notifier('CSV copied to clipboard successfully', 'long')
+  },
+
+  async copyCanvas (canvas, type) {
+    canvas.toBlob(async (blob) => {
+      await _copyBlob(blob)
+      Lib.notifier('Image copied to clipboard successfully', 'long')
+    }, 'image/png', 1)
+  },
+
+  async copyFromDataUrl (url) {
+    const blob = dataUrlToBlob(url)
+    await _copyBlob(blob)
+    Lib.notifier('Image copied to clipboard successfully', 'long')
   }
 }