jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: resize chart on window

Browse source
This commit is contained in:
nick-delirium 2025-01-07 10:43:46 +01:00
parent 05d5aadbd2
commit e4e77b4cfd
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
3 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Charts/BarChart.tsx
View file

@ -22,6 +22,9 @@ function ORBarChart(props: BarChartProps) {
React.useEffect(() => {
if (!chartRef.current) return;
const chart = echarts.init(chartRef.current);
const obs = new ResizeObserver(() => chart.resize())
obs.observe(chartRef.current);
const categories = buildCategories(props.data);
const { datasets, series } = buildBarDatasetsAndSeries(props, props.horizontal ?? false);
@ -72,6 +75,7 @@ function ORBarChart(props: BarChartProps) {
return () => {
chart.dispose();
obs.disconnect();
delete (window as any).__seriesValueMap[chartUuid.current];
delete (window as any).__seriesColorMap[chartUuid.current];
delete (window as any).__categoryMap[chartUuid.current];

3
frontend/app/components/Charts/LineChart.tsx
View file

@ -21,6 +21,8 @@ function ORLineChart(props: Props) {
React.useEffect(() => {
if (!chartRef.current) return;
const chart = echarts.init(chartRef.current);
const obs = new ResizeObserver(() => chart.resize())
obs.observe(chartRef.current);
const categories = buildCategories(props.data);
const { datasets, series } = buildDatasetsAndSeries(props);
@ -85,6 +87,7 @@ function ORLineChart(props: Props) {
return () => {
chart.dispose();
obs.disconnect();
delete (window as any).__seriesValueMap[chartUuid.current];
delete (window as any).__seriesColorMap[chartUuid.current];
delete (window as any).__categoryMap[chartUuid.current];

3
frontend/app/components/Charts/PieChart.tsx
View file

@ -101,6 +101,8 @@ function PieChart(props: PieChartProps) {
};
chartInstance.setOption(option);
const obs = new ResizeObserver(() => chartInstance.resize())
obs.observe(chartRef.current);
chartInstance.on('click', function (params) {
onClick([{ name: params.name, value: params.value }]);
@ -108,6 +110,7 @@ function PieChart(props: PieChartProps) {
return () => {
chartInstance.dispose();
obs.disconnect();
};
}, [data, label, onClick, inGrid]);