getHtml for chart #89

2025-12-06 10:08:52 +08:00 · 2021-12-20 22:31:08 +01:00
parent 9c55e76a41
commit c1cc5bb95e
1 changed files with 34 additions and 1 deletions
--- a/src/lib/chartHelper.js
+++ b/src/lib/chartHelper.js
@@ -1,5 +1,6 @@
 import dereference from 'react-chart-editor/lib/lib/dereference'
 import plotly from 'plotly.js'
+import { nanoid } from 'nanoid'

 export function getOptionsFromDataSources (dataSources) {
  if (!dataSources) {
@@ -33,8 +34,40 @@ export async function getImageDataUrl (element, type) {
  })
 }

+export function getHtml (element, options) {
+  const chartElement = element.querySelector('.js-plotly-plot')
+  const chartId = nanoid()
+  return `
+    <head>
+      <meta charset="UTF-8">
+      <script src="https://cdn.plot.ly/plotly-latest.js"></script>
+    </head>
+    <body>
+      <div id="${chartId}"></div>
+      <script>
+        const el = document.getElementById("${chartId}")
+        
+        let timeout
+		    function debounceResize() {
+          clearTimeout(timeout)
+          timeout = setTimeout(() => {
+		        var r = el.getBoundingClientRect()
+		        Plotly.relayout(el, {width: r.width, height: r.height})
+		      }, 200)
+        }
+        
+        const resizeObserver = new ResizeObserver(debounceResize)
+        resizeObserver.observe(el)
+      
+        Plotly.newPlot(el, ${JSON.stringify(options.data)}, ${JSON.stringify(options.layout)})
+      </script>
+    </body>
+  `
+}
+
 export default {
  getOptionsFromDataSources,
  getOptionsForSave,
-  getImageDataUrl
+  getImageDataUrl,
+  getHtml
 }