import dynamic from "next/dynamic"; import { useState, useEffect } from "react"; import { useTranslation } from "next-i18next"; import useWidgetAPI from "utils/proxy/use-widget-api"; const ChartDual = dynamic(() => import("./chart_dual"), { ssr: false }); const pointsLimit = 15; export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; const [, interfaceName] = widget.metric.split(':'); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); const { data, error } = useWidgetAPI(widget, 'network', { refreshInterval: 1000, }); useEffect(() => { if (data) { const interfaceData = data.find((item) => item[item.key] === interfaceName); if (interfaceData) { setDataPoints((prevDataPoints) => { const newDataPoints = [...prevDataPoints, { a: interfaceData.tx, b: interfaceData.rx }]; if (newDataPoints.length > pointsLimit) { newDataPoints.shift(); } return newDataPoints; }); } } }, [data, interfaceName]); if (error) { return