@datalayer/core
Version:
**Datalayer Core**
54 lines (53 loc) • 1.78 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { useEffect, useRef, useState } from 'react';
import { init } from 'echarts';
export const EChartsReact = ({ options, style, settings, loading, theme }) => {
const chartRef = useRef(null);
const [chart, setChart] = useState();
useEffect(() => {
const chart = chartRef.current ? init(chartRef.current, theme) : undefined;
// Add chart resize listener
// ResizeObserver is leading to a bit janky UX
const resizeChart = () => {
if (chart && !chart.isDisposed()) {
chart.resize();
}
};
if (chart) {
window.addEventListener('resize', resizeChart);
}
setChart(chart);
// Return cleanup function.
return () => {
if (chart) {
if (!chart.isDisposed()) {
chart.dispose();
}
window.removeEventListener('resize', resizeChart);
setChart(undefined);
}
};
}, [chartRef.current, theme]);
useEffect(() => {
// Update chart.
if (chart && !chart.isDisposed()) {
chart.setOption(options, settings);
}
}, [chart, options, settings]);
useEffect(() => {
if (chart && !chart.isDisposed()) {
if (loading === true) {
chart.showLoading();
}
else {
chart.hideLoading();
}
}
}, [chart, loading]);
return (_jsx("div", { ref: chartRef, style: { width: '100%', height: '100px', ...style } }));
};
export default EChartsReact;