From a07113a0bf2e54aba674cb4482e78b376bd10dc4 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 9 Oct 2024 23:16:38 +0800
Subject: [PATCH] feat: add ChartLegend

---
 app/[locale]/(main)/ClientComponents/NetworkChart.tsx | 5 +++++
 components/ui/chart.tsx                               | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
index 71e4de3..26d32fb 100644
--- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
+++ b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
@@ -13,6 +13,8 @@ import {
 import {
   ChartConfig,
   ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
@@ -228,6 +230,9 @@ export function NetworkChart({
                 />
               }
             />
+            {activeChart === defaultChart && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
             {activeChart !== defaultChart && (
               <Line
                 isAnimationActive={false}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index 2ef5ebf..eaa0bee 100644
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -280,7 +280,7 @@ const ChartLegendContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "flex items-center justify-center gap-4",
+          "flex flex-wrap items-center justify-center gap-4",
           verticalAlign === "top" ? "pb-3" : "pt-3",
           className,
         )}
@@ -306,7 +306,7 @@ const ChartLegendContent = React.forwardRef<
                   }}
                 />
               )}
-              {itemConfig?.label}
+              {key}
             </div>
           );
         })}