Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 fix(charts): improve dark mode chart readability

Browse Source 
Ensure VChart labels and grid lines use theme-aware colors, and remove oversized rounded corners from ranking bar charts.
This commit is contained in:
CaIon
2026-05-26 12:30:13 +08:00
parent 9e283ab10b
commit f223db9330
3 changed files with 68 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/pricing/components/model-details-charts.tsx
Vendored
+38 -13
View File
@@ -47,6 +47,19 @@ function formatDayLabel(date: string): string {
})
}
function getChartThemeTokens(resolvedTheme: string) {
return {
textColor:
resolvedTheme === 'dark'
? 'rgba(255, 255, 255, 0.68)'
: 'rgba(15, 23, 42, 0.58)',
gridColor:
resolvedTheme === 'dark'
? 'rgba(255, 255, 255, 0.12)'
: 'rgba(15, 23, 42, 0.12)',
}
}
// ---------------------------------------------------------------------------
// Latency trend chart (24h, multi-group point-line chart)
// ---------------------------------------------------------------------------
@@ -57,6 +70,7 @@ export function LatencyTrendChart(props: {
}) {
const { t } = useTranslation()
const { resolvedTheme, themeReady } = useChartTheme()
const { textColor, gridColor } = getChartThemeTokens(resolvedTheme)
const spec = useMemo(() => {
if (props.series.length === 0) return null
@@ -95,7 +109,7 @@ export function LatencyTrendChart(props: {
{
orient: 'bottom',
label: {
style: { fill: 'currentColor', fontSize: 10 },
style: { fill: textColor, fontSize: 10 },
},
tick: { visible: false },
},
@@ -103,13 +117,16 @@ export function LatencyTrendChart(props: {
orient: 'left',
label: {
formatMethod: (val: number | string) => `${val} ms`,
style: { fill: 'currentColor', fontSize: 10 },
style: { fill: textColor, fontSize: 10 },
},
grid: {
visible: true,
style: { lineDash: [3, 3], stroke: gridColor },
},
grid: { visible: true, style: { lineDash: [3, 3] } },
},
],
}
}, [props.series, t])
}, [gridColor, props.series, t, textColor])
if (props.series.length === 0) {
return (
@@ -151,6 +168,7 @@ export function UptimeTrendChart(props: {
}) {
const { t } = useTranslation()
const { resolvedTheme, themeReady } = useChartTheme()
const { textColor, gridColor } = getChartThemeTokens(resolvedTheme)
const spec = useMemo(() => {
if (props.series.length === 0) return null
@@ -207,7 +225,7 @@ export function UptimeTrendChart(props: {
{
orient: 'bottom',
label: {
style: { fill: 'currentColor', fontSize: 10 },
style: { fill: textColor, fontSize: 10 },
autoLimit: true,
},
tick: { visible: false },
@@ -218,13 +236,16 @@ export function UptimeTrendChart(props: {
max: 100,
label: {
formatMethod: (val: number | string) => `${val}%`,
style: { fill: 'currentColor', fontSize: 10 },
style: { fill: textColor, fontSize: 10 },
},
grid: {
visible: true,
style: { lineDash: [3, 3], stroke: gridColor },
},
grid: { visible: true, style: { lineDash: [3, 3] } },
},
],
}
}, [props.series, t])
}, [gridColor, props.series, t, textColor])
if (props.series.length === 0) {
return (
@@ -266,6 +287,7 @@ export function ThroughputBarChart(props: {
}) {
const { t } = useTranslation()
const { resolvedTheme, themeReady } = useChartTheme()
const { textColor, gridColor } = getChartThemeTokens(resolvedTheme)
const { customization } = useThemeCustomization()
const barRadius = useThemeRadiusPx(
'--radius-sm',
@@ -294,19 +316,22 @@ export function ThroughputBarChart(props: {
label: {
visible: true,
position: 'right',
style: { fontSize: 11, fill: 'currentColor' },
style: { fontSize: 11, fill: textColor },
formatMethod: (text: string) => `${text} t/s`,
},
axes: [
{
orient: 'left',
label: { style: { fill: 'currentColor', fontSize: 10 } },
label: { style: { fill: textColor, fontSize: 10 } },
tick: { visible: false },
},
{
orient: 'bottom',
label: { style: { fill: 'currentColor', fontSize: 10 } },
grid: { visible: true, style: { lineDash: [3, 3] } },
label: { style: { fill: textColor, fontSize: 10 } },
grid: {
visible: true,
style: { lineDash: [3, 3], stroke: gridColor },
},
},
],
tooltip: {
@@ -322,7 +347,7 @@ export function ThroughputBarChart(props: {
},
},
}
}, [barRadius, filtered, t])
}, [barRadius, filtered, gridColor, t, textColor])
if (filtered.length === 0) {
return null