Fix Tooltip styling for charts (#11)

* fix: add a default gap for tooltip labels between label and value * fix: allow tooltip style overrides for SymbiosisAreaChart * chore: enhance stories to showcase tooltip style overrides
synopsisapp · Sep 12, 2024 · 35d8dfc · 35d8dfc
1 parent 63be826
commit 35d8dfc
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 1 deletion.
diff --git a/examples/storybook/src/stories/SymbiosisAreaChart.stories.tsx b/examples/storybook/src/stories/SymbiosisAreaChart.stories.tsx
@@ -1032,6 +1032,7 @@ export const CustomUI: Story = {
         {...args}
         className="bg-slate-400 [&_.recharts-cartesian-axis-tick_text]:fill-white [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-white"
         legendClassName="text-white"
+        tooltipClassName="rounded-none border-green-400 border-2"
       />
     );
   },

diff --git a/packages/ui/src/components/Charts/index.tsx b/packages/ui/src/components/Charts/index.tsx
@@ -182,7 +182,7 @@ const ChartTooltipContent = React.forwardRef<
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 justify-between leading-none text-inherit",
+                        "flex flex-1 justify-between leading-none text-inherit gap-2",
                         nestLabel ? "items-end" : "items-center",
                       )}
                     >

diff --git a/packages/ui/src/components/SymbiosisAreaChart/index.tsx b/packages/ui/src/components/SymbiosisAreaChart/index.tsx
@@ -12,6 +12,7 @@ const SymbiosisAreaChart = ({
   tooltipLabelFormatter,
   className,
   legendClassName,
+  tooltipClassName,
 }: SymbiosisAreaChartProps) => {
   const defaultTickFormatter = React.useCallback((value: string) => {
     const date = new Date(value);
@@ -48,6 +49,7 @@ const SymbiosisAreaChart = ({
             <Chart.TooltipContent
               labelFormatter={tooltipLabelFormatter ?? defaultTooltipLabelFormatter}
               indicator="dot"
+              className={tooltipClassName}
             />
           }
         />

diff --git a/packages/ui/src/components/SymbiosisAreaChart/types.tsx b/packages/ui/src/components/SymbiosisAreaChart/types.tsx
@@ -7,4 +7,5 @@ export type SymbiosisAreaChartProps = {
   tooltipLabelFormatter?: (value: string) => string;
   className?: string;
   legendClassName?: string;
+  tooltipClassName?: string;
 };