Spaces:
Running
Running
File size: 1,477 Bytes
8fe4e41 342bc0e 8fe4e41 d1d859f 342bc0e d1d859f f369afc 8fe4e41 0ac2628 8fe4e41 d1d859f 0ac2628 d1d859f 0ac2628 d1d859f 3e1ec11 d1d859f 342bc0e d1d859f 342bc0e |
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 41 42 43 |
import React, { useEffect } from "react";
import LynxKiteNode from "./LynxKiteNode";
import { NodeWithParams } from "./NodeWithParams";
const echarts = await import("echarts");
function 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;
if (opts.tooltip?.formatter === "GET_THIRD_VALUE") {
// We can't pass a function from the backend, and can't get good tooltips otherwise.
opts.tooltip.formatter = (params: any) => params.value[2];
}
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]);
return (
<NodeWithParams collapsed {...props}>
<div style={{ flex: 1 }} ref={chartsRef} />
</NodeWithParams>
);
}
export default LynxKiteNode(NodeWithVisualization);
|