125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import { useCallback, useRef } from 'react';
|
|
import type { NetworkMetrics } from '@/types/metrics';
|
|
import { formatTimestamp, formatBytes } from '@/lib/formatters';
|
|
|
|
const ReactECharts = dynamic(() => import('echarts-for-react').then(mod => mod), { ssr: false, loading: () => <div style={{height: 300}} /> });
|
|
|
|
interface NetworkChartProps {
|
|
title?: string;
|
|
data: NetworkMetrics;
|
|
height?: number;
|
|
}
|
|
|
|
export default function NetworkChart({ title = 'Network Traffic', data, height = 300 }: NetworkChartProps) {
|
|
const chartRef = useRef<any>(null);
|
|
const soloIndex = useRef<number | null>(null);
|
|
|
|
if (!data.receive.length && !data.transmit.length) {
|
|
return (
|
|
<div className="bg-gray-50 border rounded-lg p-4 text-center text-gray-400 text-sm" style={{ height }}>
|
|
{title} - 데이터 없음
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const rxSeries = data.receive.map((inst) => ({
|
|
name: `RX ${inst.instance || 'total'}`,
|
|
type: 'line' as const,
|
|
smooth: true,
|
|
symbol: 'none',
|
|
emphasis: { focus: 'series' as const },
|
|
areaStyle: { opacity: 0.3 },
|
|
data: inst.dataPoints.map((d) => [d.timestamp * 1000, d.value]),
|
|
}));
|
|
|
|
const txSeries = data.transmit.map((inst) => ({
|
|
name: `TX ${inst.instance || 'total'}`,
|
|
type: 'line' as const,
|
|
smooth: true,
|
|
symbol: 'none',
|
|
emphasis: { focus: 'series' as const },
|
|
lineStyle: { type: 'dashed' as const },
|
|
data: inst.dataPoints.map((d) => [d.timestamp * 1000, -d.value]),
|
|
}));
|
|
|
|
const allSeries = [...rxSeries, ...txSeries];
|
|
const seriesNames = allSeries.map((s) => s.name);
|
|
|
|
const option = {
|
|
title: { text: title, left: 'center', textStyle: { fontSize: 14 } },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'cross' },
|
|
formatter: (params: any) => {
|
|
if (!Array.isArray(params)) params = [params];
|
|
if (params.length === 0) return '';
|
|
const time = formatTimestamp(params[0].data[0] / 1000);
|
|
const lines = params.map(
|
|
(p: any) => `${p.marker} ${p.seriesName}: ${formatBytes(Math.abs(p.data[1]))}/s`
|
|
);
|
|
return `<b>${time}</b><br/>${lines.join('<br/>')}`;
|
|
},
|
|
},
|
|
legend: {
|
|
bottom: 0,
|
|
type: 'scroll',
|
|
selectedMode: 'multiple',
|
|
},
|
|
grid: { left: '3%', right: '3%', bottom: '15%', top: '15%', containLabel: true },
|
|
xAxis: {
|
|
type: 'time',
|
|
axisLabel: {
|
|
formatter: (val: number) => {
|
|
const d = new Date(val);
|
|
return `${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getDate().toString().padStart(2, '0')}\n${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: (val: number) => `${formatBytes(Math.abs(val))}/s`,
|
|
},
|
|
},
|
|
dataZoom: [
|
|
{ type: 'inside', start: 0, end: 100 },
|
|
{ type: 'slider', start: 0, end: 100, height: 20, bottom: 30 },
|
|
],
|
|
series: allSeries,
|
|
};
|
|
|
|
const onEvents = useCallback(() => ({
|
|
click: (params: any) => {
|
|
const chart = chartRef.current?.getEchartsInstance();
|
|
if (!chart) return;
|
|
|
|
if (soloIndex.current === params.seriesIndex) {
|
|
const selected: Record<string, boolean> = {};
|
|
seriesNames.forEach((name) => { selected[name] = true; });
|
|
chart.setOption({ legend: { selected } });
|
|
soloIndex.current = null;
|
|
} else {
|
|
const selected: Record<string, boolean> = {};
|
|
seriesNames.forEach((name) => { selected[name] = false; });
|
|
selected[params.seriesName] = true;
|
|
chart.setOption({ legend: { selected } });
|
|
soloIndex.current = params.seriesIndex;
|
|
}
|
|
},
|
|
}), [seriesNames]);
|
|
|
|
return (
|
|
<ReactECharts
|
|
ref={chartRef}
|
|
option={option}
|
|
style={{ height }}
|
|
notMerge
|
|
lazyUpdate
|
|
onEvents={onEvents()}
|
|
/>
|
|
);
|
|
}
|