wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: chart multiple elective

Browse Source
This commit is contained in:
hamster1963 2024-12-02 10:52:47 +08:00
parent ef8b0ed7ad
commit a4bdf10c72
1 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/NetworkChart.tsx
View File

@ -111,13 +111,27 @@ export const NetworkChartClient = React.memo(function NetworkChart({
const defaultChart = "All"; const defaultChart = "All";
const [activeChart, setActiveChart] = React.useState(defaultChart); const [activeCharts, setActiveCharts] = React.useState<string[]>([defaultChart]);
const handleButtonClick = useCallback( const handleButtonClick = useCallback(
(chart: string) => { (chart: string) => {
setActiveChart((prev) => (prev === chart ? defaultChart : chart)); setActiveCharts((prev) => {
if (chart === defaultChart) {
return [defaultChart];
}
const newCharts = prev.filter(c => c !== defaultChart);
const chartIndex = newCharts.indexOf(chart);
if (chartIndex === -1) {
return newCharts.length === 0 ? [chart] : [...newCharts, chart];
} else {
const result = newCharts.filter(c => c !== chart);
return result.length === 0 ? [defaultChart] : result;
}
});
}, },
[defaultChart], [],
); );
const getColorByIndex = useCallback( const getColorByIndex = useCallback(
@ -133,7 +147,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
chartDataKey.map((key) => ( chartDataKey.map((key) => (
<button <button
key={key} key={key}
data-active={activeChart === key} data-active={activeCharts.includes(key)}
className={`relative z-30 flex cursor-pointer flex-1 flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`} className={`relative z-30 flex cursor-pointer flex-1 flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
onClick={() => handleButtonClick(key)} onClick={() => handleButtonClick(key)}
> >
@ -145,35 +159,38 @@ export const NetworkChartClient = React.memo(function NetworkChart({
</span> </span>
</button> </button>
)), )),
[chartDataKey, activeChart, chartData, handleButtonClick], [chartDataKey, activeCharts, chartData, handleButtonClick],
); );
const chartLines = useMemo(() => { const chartLines = useMemo(() => {
if (activeChart !== defaultChart) { if (activeCharts.includes(defaultChart)) {
return ( return chartDataKey.map((key) => (
<Line <Line
key={key}
isAnimationActive={false} isAnimationActive={false}
strokeWidth={1} strokeWidth={1}
type="linear" type="linear"
dot={false} dot={false}
dataKey="avg_delay" dataKey={key}
stroke={getColorByIndex(activeChart)} stroke={getColorByIndex(key)}
connectNulls={true}
/> />
); ));
} }
return chartDataKey.map((key) => (
return activeCharts.map((chart) => (
<Line <Line
key={key} key={chart}
isAnimationActive={false} isAnimationActive={false}
strokeWidth={1} strokeWidth={1}
type="linear" type="linear"
dot={false} dot={false}
dataKey={key} dataKey={chart}
stroke={getColorByIndex(key)} stroke={getColorByIndex(chart)}
connectNulls={true} connectNulls={true}
/> />
)); ));
}, [activeChart, defaultChart, chartDataKey, getColorByIndex]); }, [activeCharts, chartDataKey, getColorByIndex]);
return ( return (
<Card> <Card>
@ -196,9 +213,9 @@ export const NetworkChartClient = React.memo(function NetworkChart({
<LineChart <LineChart
accessibilityLayer accessibilityLayer
data={ data={
activeChart === defaultChart activeCharts.includes(defaultChart)
? formattedData ? formattedData
: chartData[activeChart] : chartData[activeCharts[0]]
} }
margin={{ left: 12, right: 12 }} margin={{ left: 12, right: 12 }}
> >
@ -231,7 +248,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
/> />
} }
/> />
{activeChart === defaultChart && ( {activeCharts.includes(defaultChart) && (
<ChartLegend content={<ChartLegendContent />} /> <ChartLegend content={<ChartLegendContent />} />
)} )}
{chartLines} {chartLines}