fix: metric chart total count

apps/start/src/components/charts/chart-tooltip.tsx

@@ -2,6 +2,34 @@ import { createContext, useContext as useBaseContext } from 'react';
 
 import { Tooltip as RechartsTooltip, type TooltipProps } from 'recharts';
 
+export const ChartTooltipContainer = ({
+  children,
+}: { children: React.ReactNode }) => {
+  return (
+    <div className="min-w-[180px] col gap-2 rounded-xl border bg-background/80 p-3  shadow-xl backdrop-blur-sm">
+      {children}
+    </div>
+  );
+};
+
+export const ChartTooltipHeader = ({
+  children,
+}: { children: React.ReactNode }) => {
+  return <div className="flex justify-between gap-8">{children}</div>;
+};
+
+export const ChartTooltipItem = ({
+  children,
+  color,
+}: { children: React.ReactNode; color: string }) => {
+  return (
+    <div className="flex gap-2">
+      <div className="w-[3px] rounded-full" style={{ background: color }} />
+      <div className="col flex-1 gap-1">{children}</div>
+    </div>
+  );
+};
+
 export function createChartTooltip<
   PropsFromTooltip,
   PropsFromContext extends Record<string, unknown>,
@@ -31,9 +59,9 @@ export function createChartTooltip<
     }
 
     return (
-      <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-background/80 p-3  shadow-xl backdrop-blur-sm">
+      <ChartTooltipContainer>
         <Tooltip data={data} context={context} {...tooltip} />
-      </div>
+      </ChartTooltipContainer>
     );
   };