jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-03-24 06:26:17 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

add a total line to the tooltip of charts with multiple values #1280

Browse Source 
Co-authored-by: Titouan V <titouan.verhille@gmail.com>
This commit is contained in:
henrygd
2025-11-04 15:35:23 -05:00
parent d77ee5554f
commit 04b6067e64
5 changed files with 114 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
internal/site/src/components/charts/area-chart.tsx
View File

@@ -30,6 +30,7 @@ export default function AreaChartDefault({
domain,
legend,
itemSorter,
showTotal = false,
reverseStackOrder = false,
hideYAxis = false,
}: // logRender = false,
@@ -42,6 +43,7 @@ export default function AreaChartDefault({
dataPoints?: DataPoint[]
domain?: [number, number]
legend?: boolean
showTotal?: boolean
itemSorter?: (a: any, b: any) => number
reverseStackOrder?: boolean
hideYAxis?: boolean
@@ -65,18 +67,25 @@ export default function AreaChartDefault({
"ps-4": hideYAxis,
})}
>
<AreaChart reverseStackOrder={reverseStackOrder} accessibilityLayer data={chartData.systemStats} margin={hideYAxis ? { ...chartMargin, left: 5 } : chartMargin}>
<AreaChart
reverseStackOrder={reverseStackOrder}
accessibilityLayer
data={chartData.systemStats}
margin={hideYAxis ? { ...chartMargin, left: 5 } : chartMargin}
>
<CartesianGrid vertical={false} />
{!hideYAxis && <YAxis
direction="ltr"
orientation={chartData.orientation}
className="tracking-tighter"
width={yAxisWidth}
domain={domain ?? [0, max ?? "auto"]}
tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
tickLine={false}
axisLine={false}
/>}
{!hideYAxis && (
<YAxis
direction="ltr"
orientation={chartData.orientation}
className="tracking-tighter"
width={yAxisWidth}
domain={domain ?? [0, max ?? "auto"]}
tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
tickLine={false}
axisLine={false}
/>
)}
{xAxis(chartData)}
<ChartTooltip
animationEasing="ease-out"
@@ -87,6 +96,7 @@ export default function AreaChartDefault({
<ChartTooltipContent
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
contentFormatter={contentFormatter}
showTotal={showTotal}
/>
}
/>
@@ -114,5 +124,5 @@ export default function AreaChartDefault({
</ChartContainer>
</div>
)
}, [chartData.systemStats.at(-1), yAxisWidth, maxToggled])
}, [chartData.systemStats.at(-1), yAxisWidth, maxToggled, showTotal])
}