root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(usage): keep the grouped-trend legend off the x-axis labels

Browse Source 
The legend renders at the chart bottom (bottom: 0); with the default grid
(bottom: 8) it overlapped the date labels once a group-by split the trend
into multiple series. Reserve grid bottom space (matching the Tokens trend)
whenever a legend is shown.
This commit is contained in:
michelia
2026-06-09 11:54:28 +08:00
committed by michela feng
parent 68a7e3f66a
commit 878bdaa5a7
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/components/metric-chart-card.tsx
+3 -1
View File
@@ -133,12 +133,14 @@ const MetricChartCard: React.FC<MetricChartCardProps> = ({
xAxisData={xAxisData} xAxisData={xAxisData}
height={280} height={280}
labelFormatter={labelFormatter} labelFormatter={labelFormatter}
// Auto-show a legend once the trend is split into multiple series. // Auto-show a legend once the trend is split into multiple series, and
// reserve room below the x-axis so it doesn't overlap the date labels.
legendData={ legendData={
seriesData.length > 1 seriesData.length > 1
? seriesData.map((s) => ({ name: s.name })) ? seriesData.map((s) => ({ name: s.name }))
: undefined : undefined
} }
grid={seriesData.length > 1 ? { bottom: 28 } : undefined}
/> />
</CardWrapper> </CardWrapper>
); );