zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

getHtml for chart #89

Browse Source
This commit is contained in:
lana-k
2021-12-20 22:31:08 +01:00
parent 9c55e76a41
commit c1cc5bb95e
1 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/chartHelper.js
View File

@@ -1,5 +1,6 @@
import dereference from 'react-chart-editor/lib/lib/dereference' import dereference from 'react-chart-editor/lib/lib/dereference'
import plotly from 'plotly.js' import plotly from 'plotly.js'
import { nanoid } from 'nanoid'
export function getOptionsFromDataSources (dataSources) { export function getOptionsFromDataSources (dataSources) {
if (!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 { export default {
getOptionsFromDataSources, getOptionsFromDataSources,
getOptionsForSave, getOptionsForSave,
getImageDataUrl getImageDataUrl,
getHtml
} }