Commit 8f4609d7 authored by Yuri Mikhin's avatar Yuri Mikhin

Remove charts flickering.

parent 59e839fe
import _debounce from 'lodash/debounce';
import React from 'react';
import React, { useCallback } from 'react';
import type { ChartMargin, ChartOffset } from 'ui/shared/chart/types';
export default function useChartSize(svgEl: SVGSVGElement | null, margin?: ChartMargin, offsets?: ChartOffset) {
const [ rect, setRect ] = React.useState<{ width: number; height: number}>({ width: 0, height: 0 });
const calculateRect = React.useCallback(() => {
const rect = svgEl?.getBoundingClientRect();
const calculateRect = useCallback((element: SVGSVGElement) => {
const rect = element?.getBoundingClientRect();
return { width: rect?.width || 0, height: rect?.height || 0 };
}, [ svgEl ]);
React.useEffect(() => {
setRect(calculateRect());
}, [ calculateRect ]);
}, []);
React.useEffect(() => {
const content = window.document.querySelector('main');
......@@ -23,9 +19,10 @@ export default function useChartSize(svgEl: SVGSVGElement | null, margin?: Chart
let timeoutId: number;
const resizeHandler = _debounce(() => {
setRect({ width: 0, height: 0 });
timeoutId = window.setTimeout(() => {
setRect(calculateRect());
if (svgEl) {
setRect(calculateRect(svgEl));
}
}, 100);
}, 100);
......@@ -38,7 +35,7 @@ export default function useChartSize(svgEl: SVGSVGElement | null, margin?: Chart
resizeObserver.unobserve(window.document.body);
window.clearTimeout(timeoutId);
};
}, [ calculateRect ]);
}, [ calculateRect, svgEl ]);
return React.useMemo(() => {
return {
......
import React, { useEffect } from 'react';
import React, { useEffect, useMemo } from 'react';
import type { StatsIntervalIds } from 'types/client/stats';
......@@ -33,9 +33,9 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
},
});
const items = data?.chart?.map((item) => {
const items = useMemo(() => data?.chart?.map((item) => {
return { date: new Date(item.date), value: Number(item.value) };
});
}), [ data ]);
useEffect(() => {
if (isError) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment