Merge branch 'main' into cloudflare

README.md

@@ -32,6 +32,6 @@
 | 日语     | ja   | 是           |
 
 ![screen-shot-one](/.github/shot-1.png)
-![screen-shot-three](/.github/shot-3.png)
 ![screen-shot-two](/.github/shot-2.png)
+![screen-shot-three](/.github/shot-3.png)
 ![screen-shot-four](/.github/shot-4.png)

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}

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>
           );
         })}