diff --git a/src/components/Dashboard/common/ModelHistoryDisplay.jsx b/src/components/Dashboard/common/ModelHistoryDisplay.jsx index 682cf311..7939b3ba 100644 --- a/src/components/Dashboard/common/ModelHistoryDisplay.jsx +++ b/src/components/Dashboard/common/ModelHistoryDisplay.jsx @@ -1,5 +1,14 @@ import { useEffect, useState, useContext, useMemo } from 'react' -import { Card, Segmented, Flex, Popover, DatePicker, Button, Space } from 'antd' +import { + Card, + Segmented, + Flex, + Popover, + DatePicker, + Button, + Space, + Switch +} from 'antd' import { ResponsiveContainer, BarChart, @@ -37,6 +46,7 @@ const ModelHistoryDisplay = ({ const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [timeRange, setTimeRange] = useState('4hrs') + const [historyMode, setHistoryMode] = useState('absolute') const [startCustomDate, setStartCustomDate] = useState(null) const [endCustomDate, setEndCustomDate] = useState(null) const { isDarkMode, getColors } = useThemeContext() @@ -287,7 +297,7 @@ const ModelHistoryDisplay = ({ return colors.default }) - const chartRows = Array.from( + const absoluteRows = Array.from( chartData .reduce((acc, item) => { const existing = acc.get(item.date) || { @@ -301,6 +311,22 @@ const ModelHistoryDisplay = ({ .values() ).sort((a, b) => new Date(a.date) - new Date(b.date)) + const chartRows = + historyMode === 'relative' && absoluteRows.length > 0 + ? absoluteRows.map((row) => { + const next = { + date: row.date, + dateFormatted: row.dateFormatted + } + for (const statDef of modelStats) { + const category = statDef.label || statDef.name + next[category] = + (row[category] || 0) - (absoluteRows[0][category] || 0) + } + return next + }) + : absoluteRows + const customTimeRangeContent = ( - {!startDate && !endDate && ( - - + + + {!startDate && !endDate && ( - + )} + + setHistoryMode(checked ? 'absolute' : 'relative') + } + /> + - + {!startDate && !endDate && ( + {loading == true && } - - )} + )} + {chartRows.length > 0 && (