diff --git a/src/app/page.tsx b/src/app/page.tsx index ff2e54c..5244c35 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -74,12 +74,13 @@ export default function Home() { . import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import FunctionsIcon from '@mui/icons-material/Functions'; +import NavigationIcon from '@mui/icons-material/Navigation'; +import NavigationOutlinedIcon from '@mui/icons-material/NavigationOutlined'; import { Box, CardMedia, Chip, Stack, useTheme } from '@mui/material'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; @@ -30,19 +32,26 @@ import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; import { NumberFormatOptions, useFormatter, useTranslations } from 'next-intl'; import IconLabel from './IconLabel'; +type MetricKind = 'number' | 'wind'; + interface MetricCardProps { cardTitle: string; sparkLineData: Array>; sparkLinePlotType: 'line' | 'bar'; sparkLineMinValue?: number; sparkLineMaxValue?: number; - currentValue: number | string; - minValue?: number | string; + currentValue: number; + formattedCurrentValue?: string; + minValue?: number; + formattedMinValue?: string; minTimestamp?: number | string; - maxValue?: number | string; + maxValue?: number; + formattedMaxValue?: string; maxTimestamp?: number | string; - sumValue?: number | string; + sumValue?: number; + formattedSumValue?: string; metricUnit: string; + metricKind: MetricKind; } export default function MetricCard({ @@ -52,12 +61,17 @@ export default function MetricCard({ sparkLineMinValue, sparkLineMaxValue, currentValue, + formattedCurrentValue, minValue, + formattedMinValue, minTimestamp, maxValue, + formattedMaxValue, maxTimestamp, sumValue, - metricUnit + formattedSumValue, + metricUnit, + metricKind }: MetricCardProps) { const theme = useTheme(); const format = useFormatter(); @@ -79,16 +93,16 @@ export default function MetricCard({ : timestamp; } - const formattedCurrentValue = formatNumber(currentValue, { + formattedCurrentValue ??= formatNumber(currentValue, { minimumFractionDigits: 1, maximumFractionDigits: 1 }); - const formattedMinValue = formatNumber(minValue); + formattedMinValue ??= formatNumber(minValue); const formattedMinTimestamp = formatTimestamp(minTimestamp); - const formattedMaxValue = formatNumber(maxValue); + formattedMaxValue ??= formatNumber(maxValue); const formattedMaxTimestamp = formatTimestamp(maxTimestamp); - const formattedSumValue = formatNumber(sumValue); + formattedSumValue ??= formatNumber(sumValue); return ( @@ -101,9 +115,21 @@ export default function MetricCard({ {/* Current value + min/max/sum */} {/* Current value */} - - {formattedCurrentValue} - + {metricKind === 'number' && ( + + {formattedCurrentValue} + + )} + {metricKind === 'wind' && ( + <> + + + + + {formattedCurrentValue} + + + )} {/* Spacer */} @@ -141,7 +167,7 @@ export default function MetricCard({ - {!isGraphEmpty && ( + {!isGraphEmpty && metricKind === 'number' && ( )} + + {!isGraphEmpty && metricKind === 'wind' && ( + + {sparkLineData.map(([timestamp, value]) => ( + + + + ))} + + )} + {isGraphEmpty && (