fix: Add missing TypeScript props to ChartTooltipContent component

frontend/src/components/ui/chart.tsx

@@ -1,50 +1,45 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as RechartsPrimitive from "recharts"
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
+    label?: React.ReactNode;
-    icon?: React.ComponentType
+    icon?: React.ComponentType;
-  } & (
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
-    | { color?: string; theme?: never }
+};
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
 
 type ChartContextProps = {
-  config: ChartConfig
+  config: ChartConfig;
-}
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    config: ChartConfig
+    config: ChartConfig;
-    children: React.ComponentProps<
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
   }
 >(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
+  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -58,22 +53,18 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
+  );
-})
+});
-ChartContainer.displayName = "Chart"
+ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
-    ([, config]) => config.theme || config.color
-  )
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -85,10 +76,8 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color =
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+    return color ? `  --color-${key}: ${color};` : null;
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
   })
   .join("\n")}
 }
@@ -97,31 +86,36 @@ ${colorConfig
           .join("\n"),
       }}
     />
-  )
+  );
-}
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 type TooltipPayloadItem = {
-  value?: string | number
+  value?: string | number;
-  name?: string
+  name?: string;
-  dataKey?: string | number
+  dataKey?: string | number;
-  payload?: Record<string, unknown>
+  payload?: Record<string, unknown>;
-  color?: string
+  color?: string;
-  fill?: string
+  fill?: string;
-}
+};
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, "content"> &
     React.ComponentProps<"div"> & {
-      active?: boolean
+      active?: boolean;
-      payload?: TooltipPayloadItem[]
+      payload?: TooltipPayloadItem[];
-      hideLabel?: boolean
+      hideLabel?: boolean;
-      hideIndicator?: boolean
+      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed"
+      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string
+      nameKey?: string;
-      labelKey?: string
+      labelKey?: string;
+      label?: string;
+      labelFormatter?: (value: any, payload: TooltipPayloadItem[]) => React.ReactNode;
+      labelClassName?: string;
+      formatter?: (value: any, name: string, item: TooltipPayloadItem, index: number, payload: any) => React.ReactNode;
+      color?: string;
     }
 >(
   (
@@ -142,49 +136,37 @@ const ChartTooltipContent = React.forwardRef<
     },
     ref
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     const tooltipLabel = React.useMemo(() => {
       if (hideLabel || !payload?.length) {
-        return null
+        return null;
       }
 
-      const [item] = payload
+      const [item] = payload;
-      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"
           ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
+          : itemConfig?.label;
 
       if (labelFormatter) {
-        return (
+        return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
       }
 
       if (!value) {
-        return null
+        return null;
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ])
 
     if (!active || !payload?.length) {
-      return null
+      return null;
     }
 
-    const nestLabel = payload.length === 1 && indicator !== "dot"
+    const nestLabel = payload.length === 1 && indicator !== "dot";
 
     return (
       <div
@@ -199,9 +181,9 @@ const ChartTooltipContent = React.forwardRef<
           {payload
             .filter((item) => item.type !== "none")
             .map((item, index) => {
-              const key = `${nameKey || item.name || item.dataKey || "value"}`
+              const key = `${nameKey || item.name || item.dataKey || "value"}`;
-              const itemConfig = getPayloadConfigFromPayload(config, item, key)
+              const itemConfig = getPayloadConfigFromPayload(config, item, key);
-              const indicatorColor = color || item.payload.fill || item.color
+              const indicatorColor = color || item.payload.fill || item.color;
 
               return (
                 <div
@@ -220,16 +202,12 @@ const ChartTooltipContent = React.forwardRef<
                       ) : (
                         !hideIndicator && (
                           <div
-                            className={cn(
+                            className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-                              "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                              "h-2.5 w-2.5": indicator === "dot",
-                              {
+                              "w-1": indicator === "line",
-                                "h-2.5 w-2.5": indicator === "dot",
+                              "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                                "w-1": indicator === "line",
+                              "my-0.5": nestLabel && indicator === "dashed",
-                                "w-0 border-[1.5px] border-dashed bg-transparent":
+                            })}
-                                  indicator === "dashed",
-                                "my-0.5": nestLabel && indicator === "dashed",
-                              }
-                            )}
                             style={
                               {
                                 "--color-bg": indicatorColor,
@@ -247,9 +225,7 @@ const ChartTooltipContent = React.forwardRef<
                       >
                         <div className="grid gap-1.5">
                           {nestLabel ? tooltipLabel : null}
-                          <span className="text-muted-foreground">
+                          <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
-                            {itemConfig?.label || item.name}
-                          </span>
                         </div>
                         {item.value && (
                           <span className="font-mono font-medium tabular-nums text-foreground">
@@ -260,121 +236,90 @@ const ChartTooltipContent = React.forwardRef<
                     </>
                   )}
                 </div>
-              )
+              );
             })}
         </div>
       </div>
-    )
+    );
   }
-)
+);
-ChartTooltipContent.displayName = "ChartTooltip"
+ChartTooltipContent.displayName = "ChartTooltip";
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
+      hideIcon?: boolean;
-      nameKey?: string
+      nameKey?: string;
     }
->(
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
-  (
+  const { config } = useChart();
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
 
-    if (!payload?.length) {
+  if (!payload?.length) {
-      return null
+    return null;
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item) => {
-            const key = `${nameKey || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-            return (
-              <div
-                key={item.value}
-                className={cn(
-                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-                )}
-              >
-                {itemConfig?.icon && !hideIcon ? (
-                  <itemConfig.icon />
-                ) : (
-                  <div
-                    className="h-2 w-2 shrink-0 rounded-[2px]"
-                    style={{
-                      backgroundColor: item.color,
-                    }}
-                  />
-                )}
-                {itemConfig?.label}
-              </div>
-            )
-          })}
-      </div>
-    )
   }
-)
+
-ChartLegendContent.displayName = "ChartLegend"
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload &&
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
-    typeof payload.payload === "object" &&
-    payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
-  if (
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
-    key in payload &&
+    configLabelKey = payload[key as keyof typeof payload] as string;
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
   } else if (
     payloadPayload &&
     key in payloadPayload &&
     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
-    configLabelKey = payloadPayload[
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
-      key as keyof typeof payloadPayload
-    ] as string
   }
 
-  return configLabelKey in config
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
 }
 
-export {
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}