From d640cc1a04825b687d59b3a7b2d7fa814e189819 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 18 Mar 2026 17:59:12 +0300
Subject: [PATCH] fix: add tooltip text color for dark theme in all charts

Added color and itemStyle to Recharts Tooltip so text is visible on dark backgrounds.
---
 src/components/sales-stats/DonutChart.tsx           | 2 ++
 src/components/sales-stats/DualAreaChart.tsx        | 2 ++
 src/components/sales-stats/MultiSeriesAreaChart.tsx | 2 ++
 src/components/sales-stats/SimpleAreaChart.tsx      | 2 ++
 src/components/sales-stats/SimpleBarChart.tsx       | 2 ++
 src/components/stats/DailyChart.tsx                 | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/src/components/sales-stats/DonutChart.tsx b/src/components/sales-stats/DonutChart.tsx
index 10114dc..68de1eb 100644
--- a/src/components/sales-stats/DonutChart.tsx
+++ b/src/components/sales-stats/DonutChart.tsx
@@ -57,8 +57,10 @@ export function DonutChart({
               border: `1px solid ${colors.tooltipBorder}`,
               borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
               fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
+              color: colors.label,
             }}
             labelStyle={{ color: colors.label }}
+            itemStyle={{ color: colors.label }}
           />
         </PieChart>
       </ResponsiveContainer>
diff --git a/src/components/sales-stats/DualAreaChart.tsx b/src/components/sales-stats/DualAreaChart.tsx
index 8ccf100..bbc9db7 100644
--- a/src/components/sales-stats/DualAreaChart.tsx
+++ b/src/components/sales-stats/DualAreaChart.tsx
@@ -114,8 +114,10 @@ export function DualAreaChart({
               border: `1px solid ${colors.tooltipBorder}`,
               borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
               fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
+              color: colors.label,
             }}
             labelStyle={{ color: colors.label }}
+            itemStyle={{ color: colors.label }}
             formatter={(value: number | undefined, name: string | undefined) => {
               const displayValue = value ?? 0;
               if (name === 'series1') return [displayValue, series1Label];
diff --git a/src/components/sales-stats/MultiSeriesAreaChart.tsx b/src/components/sales-stats/MultiSeriesAreaChart.tsx
index 8bc54eb..6d55501 100644
--- a/src/components/sales-stats/MultiSeriesAreaChart.tsx
+++ b/src/components/sales-stats/MultiSeriesAreaChart.tsx
@@ -128,8 +128,10 @@ export function MultiSeriesAreaChart({
               border: `1px solid ${colors.tooltipBorder}`,
               borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
               fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
+              color: colors.label,
             }}
             labelStyle={{ color: colors.label }}
+            itemStyle={{ color: colors.label }}
             formatter={(value: number | undefined, name: string | undefined) => [
               valueFormatter ? valueFormatter(value ?? 0) : (value ?? 0),
               name || valueLabel || '',
diff --git a/src/components/sales-stats/SimpleAreaChart.tsx b/src/components/sales-stats/SimpleAreaChart.tsx
index 3064617..ce4237f 100644
--- a/src/components/sales-stats/SimpleAreaChart.tsx
+++ b/src/components/sales-stats/SimpleAreaChart.tsx
@@ -96,8 +96,10 @@ export function SimpleAreaChart({
               border: `1px solid ${colors.tooltipBorder}`,
               borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
               fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
+              color: colors.label,
             }}
             labelStyle={{ color: colors.label }}
+            itemStyle={{ color: colors.label }}
             formatter={(value: number | undefined) => [value ?? 0, valueLabel || '']}
           />
           <Area
diff --git a/src/components/sales-stats/SimpleBarChart.tsx b/src/components/sales-stats/SimpleBarChart.tsx
index dc144a8..7cab340 100644
--- a/src/components/sales-stats/SimpleBarChart.tsx
+++ b/src/components/sales-stats/SimpleBarChart.tsx
@@ -77,8 +77,10 @@ export function SimpleBarChart({
               border: `1px solid ${colors.tooltipBorder}`,
               borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
               fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
+              color: colors.label,
             }}
             labelStyle={{ color: colors.label }}
+            itemStyle={{ color: colors.label }}
             formatter={(value: number | undefined) => [
               valueFormatter ? valueFormatter(value ?? 0) : (value ?? 0),
             ]}
diff --git a/src/components/stats/DailyChart.tsx b/src/components/stats/DailyChart.tsx
index d1d06c0..94b4b69 100644
--- a/src/components/stats/DailyChart.tsx
+++ b/src/components/stats/DailyChart.tsx
@@ -111,8 +111,10 @@ export function DailyChart({ data, chartId, title, earningsLabel, countLabel }:
               border: `1px solid ${colors.tooltipBorder}`,
               borderRadius: PARTNER_STATS.TOOLTIP.BORDER_RADIUS,
               fontSize: PARTNER_STATS.TOOLTIP.FONT_SIZE,
+              color: colors.label,
             }}
             labelStyle={{ color: colors.label }}
+            itemStyle={{ color: colors.label }}
             formatter={(value: number | undefined, name: string | undefined) => {
               const displayValue = value ?? 0;
               if (name === 'earnings_display') {