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 [, diskName] = widget.metric.split(':'); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit)); const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit)); const { data, error } = useWidgetAPI(service.widget, 'diskio', { refreshInterval: 1000, }); const calculateRates = (d) => d.map(item => ({ a: item.read_bytes / item.time_since_update, b: item.write_bytes / item.time_since_update })); useEffect(() => { if (data) { const diskData = data.find((item) => item.disk_name === diskName); setDataPoints((prevDataPoints) => { const newDataPoints = [...prevDataPoints, diskData]; if (newDataPoints.length > pointsLimit) { newDataPoints.shift(); } return newDataPoints; }); } }, [data, diskName]); useEffect(() => { setRatePoints(calculateRates(dataPoints)); }, [dataPoints]); if (error) { return