Show current consumption chart

central_frontend/src/widgets/StatCard.tsx

@@ -11,24 +11,25 @@ import { areaElementClasses } from "@mui/x-charts/LineChart";
 export type StatCardProps = {
   title: string;
   value: string;
-  interval: string;
-  trend: "up" | "down" | "neutral";
-  data: number[];
+  interval?: string;
+  trend?: "up" | "down" | "neutral";
+  data?: number[];
 };
 
-function getDaysInMonth(month: number, year: number) {
-  const date = new Date(year, month, 0);
-  const monthName = date.toLocaleDateString("en-US", {
-    month: "short",
-  });
-  const daysInMonth = date.getDate();
-  const days = [];
-  let i = 1;
-  while (days.length < daysInMonth) {
-    days.push(`${monthName} ${i}`);
-    i += 1;
+function last24Hours(): string[] {
+  let res: Array<string> = [];
+
+  for (let index = 0; index < 3600 * 24; index += 60 * 10) {
+    const date = new Date();
+    date.setTime(date.getTime() - index * 1000);
+    res.push(date.getHours() + "h" + date.getMinutes());
   }
-  return days;
+
+  res.reverse();
+
+  console.log(res);
+
+  return res;
 }
 
 function AreaGradient({ color, id }: { color: string; id: string }) {
@@ -50,7 +51,6 @@ export default function StatCard({
   data,
 }: StatCardProps) {
   const theme = useTheme();
-  const daysInWeek = getDaysInMonth(4, 2024);
 
   const trendColors = {
     up:
@@ -73,8 +73,8 @@ export default function StatCard({
     neutral: "default" as const,
   };
 
-  const color = labelColors[trend];
-  const chartColor = trendColors[trend];
+  const color = labelColors[trend ?? "neutral"];
+  const chartColor = trendColors[trend ?? "neutral"];
   const trendValues = { up: "+25%", down: "-25%", neutral: "+5%" };
 
   return (
@@ -95,31 +95,38 @@ export default function StatCard({
               <Typography variant="h4" component="p">
                 {value}
               </Typography>
-              <Chip size="small" color={color} label={trendValues[trend]} />
+              {trend && (
+                <Chip size="small" color={color} label={trendValues[trend]} />
+              )}
             </Stack>
             <Typography variant="caption" sx={{ color: "text.secondary" }}>
               {interval}
             </Typography>
           </Stack>
           <Box sx={{ width: "100%", height: 50 }}>
-            <SparkLineChart
-              colors={[chartColor]}
-              data={data}
-              area
-              showHighlight
-              showTooltip
-              xAxis={{
-                scaleType: "band",
-                data: daysInWeek, // Use the correct property 'data' for xAxis
-              }}
-              sx={{
-                [`& .${areaElementClasses.root}`]: {
-                  fill: `url(#area-gradient-${value})`,
-                },
-              }}
-            >
-              <AreaGradient color={chartColor} id={`area-gradient-${value}`} />
-            </SparkLineChart>
+            {data && interval && (
+              <SparkLineChart
+                colors={[chartColor]}
+                data={data}
+                area
+                showHighlight
+                showTooltip
+                xAxis={{
+                  scaleType: "band",
+                  data: last24Hours(),
+                }}
+                sx={{
+                  [`& .${areaElementClasses.root}`]: {
+                    fill: `url(#area-gradient-${value})`,
+                  },
+                }}
+              >
+                <AreaGradient
+                  color={chartColor}
+                  id={`area-gradient-${value}`}
+                />
+              </SparkLineChart>
+            )}
           </Box>
         </Stack>
       </CardContent>