Spaces:
Running
Running
File size: 1,318 Bytes
8fe4e41 d1d859f 8fe4e41 0ac2628 8fe4e41 d1d859f 0ac2628 d1d859f 0ac2628 d1d859f 0ac2628 d1d859f 0ac2628 d1d859f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import React, { useEffect } from "react";
import NodeWithParams from "./NodeWithParams";
const echarts = await import("echarts");
const NodeWithVisualization = (props: any) => {
const chartsRef = React.useRef<HTMLDivElement>(null);
const chartsInstanceRef = React.useRef<echarts.ECharts>();
useEffect(() => {
const opts = props.data?.display?.value;
if (!opts || !chartsRef.current) return;
chartsInstanceRef.current = echarts.init(chartsRef.current, null, {
renderer: "canvas",
width: "auto",
height: "auto",
});
chartsInstanceRef.current.setOption(opts);
const resizeObserver = new ResizeObserver(() => {
const e = chartsRef.current!;
e.style.padding = "1px";
chartsInstanceRef.current?.resize();
e.style.padding = "0";
});
const observed = chartsRef.current;
resizeObserver.observe(observed);
return () => {
resizeObserver.unobserve(observed);
chartsInstanceRef.current?.dispose();
};
}, [props.data?.display?.value]);
const nodeStyle = { display: "flex", flexDirection: "column" };
const vizStyle = { flex: 1 };
return (
<NodeWithParams nodeStyle={nodeStyle} collapsed {...props}>
<div style={vizStyle} ref={chartsRef} />
</NodeWithParams>
);
};
export default NodeWithVisualization;
|