etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add tooltip text color for dark theme in all charts

Browse Source 
Added color and itemStyle to Recharts Tooltip so text is visible on dark backgrounds.
This commit is contained in:
Fringg
2026-03-18 17:59:12 +03:00
parent c5f621b399
commit d640cc1a04
6 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/sales-stats/DonutChart.tsx
View File

@@ -57,8 +57,10 @@ export function DonutChart({
border: `1px solid ${colors.tooltipBorder}`, border: `1px solid ${colors.tooltipBorder}`,
borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS, borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
fontSize: SALES_STATS.TOOLTIP.FONT_SIZE, fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
color: colors.label,
}} }}
labelStyle={{ color: colors.label }} labelStyle={{ color: colors.label }}
itemStyle={{ color: colors.label }}
/> />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>

2
src/components/sales-stats/DualAreaChart.tsx
View File

@@ -114,8 +114,10 @@ export function DualAreaChart({
border: `1px solid ${colors.tooltipBorder}`, border: `1px solid ${colors.tooltipBorder}`,
borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS, borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
fontSize: SALES_STATS.TOOLTIP.FONT_SIZE, fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
color: colors.label,
}} }}
labelStyle={{ color: colors.label }} labelStyle={{ color: colors.label }}
itemStyle={{ color: colors.label }}
formatter={(value: number | undefined, name: string | undefined) => { formatter={(value: number | undefined, name: string | undefined) => {
const displayValue = value ?? 0; const displayValue = value ?? 0;
if (name === 'series1') return [displayValue, series1Label]; if (name === 'series1') return [displayValue, series1Label];

2
src/components/sales-stats/MultiSeriesAreaChart.tsx
View File

@@ -128,8 +128,10 @@ export function MultiSeriesAreaChart({
border: `1px solid ${colors.tooltipBorder}`, border: `1px solid ${colors.tooltipBorder}`,
borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS, borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
fontSize: SALES_STATS.TOOLTIP.FONT_SIZE, fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
color: colors.label,
}} }}
labelStyle={{ color: colors.label }} labelStyle={{ color: colors.label }}
itemStyle={{ color: colors.label }}
formatter={(value: number | undefined, name: string | undefined) => [ formatter={(value: number | undefined, name: string | undefined) => [
valueFormatter ? valueFormatter(value ?? 0) : (value ?? 0), valueFormatter ? valueFormatter(value ?? 0) : (value ?? 0),
name || valueLabel || '', name || valueLabel || '',

2
src/components/sales-stats/SimpleAreaChart.tsx
View File

@@ -96,8 +96,10 @@ export function SimpleAreaChart({
border: `1px solid ${colors.tooltipBorder}`, border: `1px solid ${colors.tooltipBorder}`,
borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS, borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
fontSize: SALES_STATS.TOOLTIP.FONT_SIZE, fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
color: colors.label,
}} }}
labelStyle={{ color: colors.label }} labelStyle={{ color: colors.label }}
itemStyle={{ color: colors.label }}
formatter={(value: number | undefined) => [value ?? 0, valueLabel || '']} formatter={(value: number | undefined) => [value ?? 0, valueLabel || '']}
/> />
<Area <Area

2
src/components/sales-stats/SimpleBarChart.tsx
View File

@@ -77,8 +77,10 @@ export function SimpleBarChart({
border: `1px solid ${colors.tooltipBorder}`, border: `1px solid ${colors.tooltipBorder}`,
borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS, borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
fontSize: SALES_STATS.TOOLTIP.FONT_SIZE, fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
color: colors.label,
}} }}
labelStyle={{ color: colors.label }} labelStyle={{ color: colors.label }}
itemStyle={{ color: colors.label }}
formatter={(value: number | undefined) => [ formatter={(value: number | undefined) => [
valueFormatter ? valueFormatter(value ?? 0) : (value ?? 0), valueFormatter ? valueFormatter(value ?? 0) : (value ?? 0),
]} ]}

2
src/components/stats/DailyChart.tsx
View File

@@ -111,8 +111,10 @@ export function DailyChart({ data, chartId, title, earningsLabel, countLabel }:
border: `1px solid ${colors.tooltipBorder}`, border: `1px solid ${colors.tooltipBorder}`,
borderRadius: PARTNER_STATS.TOOLTIP.BORDER_RADIUS, borderRadius: PARTNER_STATS.TOOLTIP.BORDER_RADIUS,
fontSize: PARTNER_STATS.TOOLTIP.FONT_SIZE, fontSize: PARTNER_STATS.TOOLTIP.FONT_SIZE,
color: colors.label,
}} }}
labelStyle={{ color: colors.label }} labelStyle={{ color: colors.label }}
itemStyle={{ color: colors.label }}
formatter={(value: number | undefined, name: string | undefined) => { formatter={(value: number | undefined, name: string | undefined) => {
const displayValue = value ?? 0; const displayValue = value ?? 0;
if (name === 'earnings_display') { if (name === 'earnings_display') {