|
|
@@ -171,81 +171,80 @@ function ChartTooltipContent({
|
|
|
{payload
|
|
|
.filter((item: { type?: string }) => item.type !== "none")
|
|
|
.map((item, index: number) => {
|
|
|
- const dataKeyStr = String(item.dataKey);
|
|
|
- const key = `${nameKey || item.name || dataKeyStr || "value"}`;
|
|
|
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
|
- const indicatorColor = color || item.payload?.fill || item.color;
|
|
|
-
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={dataKeyStr}
|
|
|
- className={cn(
|
|
|
- "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
|
|
- indicator === "dot" && "items-center"
|
|
|
- )}
|
|
|
- >
|
|
|
- {formatter && item?.value !== undefined && item.name ? (
|
|
|
- formatter(
|
|
|
- (Array.isArray(item.value)
|
|
|
- ? item.value.join(", ")
|
|
|
- : item.value) as string | number,
|
|
|
- String(item.name),
|
|
|
- item as Parameters<typeof formatter>[2],
|
|
|
- index,
|
|
|
- payload
|
|
|
- )
|
|
|
- ) : (
|
|
|
- <>
|
|
|
- {itemConfig?.icon ? (
|
|
|
- <itemConfig.icon />
|
|
|
- ) : (
|
|
|
- !hideIndicator && (
|
|
|
- <div
|
|
|
- className={cn(
|
|
|
- "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
|
|
- {
|
|
|
- "h-2.5 w-2.5": indicator === "dot",
|
|
|
- "w-1": indicator === "line",
|
|
|
- "w-0 border-[1.5px] border-dashed bg-transparent":
|
|
|
- indicator === "dashed",
|
|
|
- "my-0.5": nestLabel && indicator === "dashed",
|
|
|
- }
|
|
|
- )}
|
|
|
- style={
|
|
|
- {
|
|
|
- "--color-bg": indicatorColor,
|
|
|
- "--color-border": indicatorColor,
|
|
|
- } as React.CSSProperties
|
|
|
+ const dataKeyStr = String(item.dataKey);
|
|
|
+ const key = `${nameKey || item.name || dataKeyStr || "value"}`;
|
|
|
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
|
+ const indicatorColor = color || item.payload?.fill || item.color;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={dataKeyStr}
|
|
|
+ className={cn(
|
|
|
+ "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
|
|
+ indicator === "dot" && "items-center"
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ {formatter && item?.value !== undefined && item.name ? (
|
|
|
+ formatter(
|
|
|
+ (Array.isArray(item.value) ? item.value.join(", ") : item.value) as
|
|
|
+ | string
|
|
|
+ | number,
|
|
|
+ String(item.name),
|
|
|
+ item as Parameters<typeof formatter>[2],
|
|
|
+ index,
|
|
|
+ payload
|
|
|
+ )
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ {itemConfig?.icon ? (
|
|
|
+ <itemConfig.icon />
|
|
|
+ ) : (
|
|
|
+ !hideIndicator && (
|
|
|
+ <div
|
|
|
+ className={cn(
|
|
|
+ "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
|
|
+ {
|
|
|
+ "h-2.5 w-2.5": indicator === "dot",
|
|
|
+ "w-1": indicator === "line",
|
|
|
+ "w-0 border-[1.5px] border-dashed bg-transparent":
|
|
|
+ indicator === "dashed",
|
|
|
+ "my-0.5": nestLabel && indicator === "dashed",
|
|
|
}
|
|
|
- />
|
|
|
- )
|
|
|
+ )}
|
|
|
+ style={
|
|
|
+ {
|
|
|
+ "--color-bg": indicatorColor,
|
|
|
+ "--color-border": indicatorColor,
|
|
|
+ } as React.CSSProperties
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ <div
|
|
|
+ className={cn(
|
|
|
+ "flex flex-1 justify-between leading-none",
|
|
|
+ nestLabel ? "items-end" : "items-center"
|
|
|
)}
|
|
|
- <div
|
|
|
- className={cn(
|
|
|
- "flex flex-1 justify-between leading-none",
|
|
|
- nestLabel ? "items-end" : "items-center"
|
|
|
- )}
|
|
|
- >
|
|
|
- <div className="grid gap-1.5">
|
|
|
- {nestLabel ? tooltipLabel : null}
|
|
|
- <span className="text-muted-foreground">
|
|
|
- {itemConfig?.label || item.name}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- {item.value && (
|
|
|
- <span className="text-foreground font-mono font-medium tabular-nums">
|
|
|
- {typeof item.value === "number"
|
|
|
- ? item.value.toLocaleString()
|
|
|
- : String(item.value)}
|
|
|
- </span>
|
|
|
- )}
|
|
|
+ >
|
|
|
+ <div className="grid gap-1.5">
|
|
|
+ {nestLabel ? tooltipLabel : null}
|
|
|
+ <span className="text-muted-foreground">
|
|
|
+ {itemConfig?.label || item.name}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- </>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- )}
|
|
|
+ {item.value && (
|
|
|
+ <span className="text-foreground font-mono font-medium tabular-nums">
|
|
|
+ {typeof item.value === "number"
|
|
|
+ ? item.value.toLocaleString()
|
|
|
+ : String(item.value)}
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|