Merge pull request #961 from eetu/mobile-tempbox

Redesign temperature and solis cards for mobile

Author: eetu

frontend/src/components/SolisBox.tsx

@@ -3,6 +3,7 @@ import { memo } from "react";
 import useSWR from "swr";
 
 import { api, HttpError, jsonFetcher } from "../api";
+import { mq } from "../mq";
 import { SolisData } from "../types/solis";
 import Box, { DrawerRow } from "./Box";
 import Icon from "./Icon";
@@ -99,53 +100,90 @@ const SolisBox: React.FC<SolisBoxProps> = ({ className }) => {
     >
       <div
         css={{
+          position: "relative",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "space-between",
           flex: 1,
+          [mq[0]]: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: 16,
+          },
         }}
       >
         <div
           css={{
             display: "flex",
+            flexDirection: "column",
             alignItems: "center",
-            gap: "0.3em",
-            ...theme.typography.label,
-            color: theme.colors.text.muted,
-            letterSpacing: "0.04em",
+            [mq[0]]: { alignItems: "flex-start", gap: 4 },
           }}
         >
-          <Icon
-            size={18}
+          <div
             css={{
-              color: isAlarm ? theme.colors.error : "inherit",
-              opacity: 0.7,
+              display: "flex",
+              alignItems: "center",
+              gap: "0.3em",
+              ...theme.typography.label,
+              color: theme.colors.text.muted,
+              letterSpacing: "0.04em",
             }}
           >
-            {isAlarm ? "warning" : "solar_power"}
-          </Icon>
-          {data.power_unit}
-        </div>
-        <div
-          css={{
-            marginTop: "5px",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
+            <Icon
+              size={18}
+              css={{
+                color: isAlarm ? theme.colors.error : "inherit",
+                opacity: 0.7,
+              }}
+            >
+              {isAlarm ? "warning" : "solar_power"}
+            </Icon>
+            {data.power_unit}
+          </div>
           <div
             css={{
+              marginTop: "5px",
+              display: "flex",
               fontWeight: 400,
               fontSize: 50,
               lineHeight: 1,
               fontVariantNumeric: "tabular-nums",
+              [mq[0]]: { marginTop: 0, fontSize: 64 },
             }}
           >
             {displayPower}
           </div>
         </div>
+
+        <div
+          css={{
+            display: "none",
+            [mq[0]]: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+              justifyContent: "center",
+              gap: 6,
+              ...theme.typography.caption,
+              color: theme.colors.text.muted,
+            },
+          }}
+        >
+          <span css={{ fontVariantNumeric: "tabular-nums" }}>
+            {`${data.today_energy} ${data.today_energy_unit} tänään`}
+          </span>
+          {data.battery_soc !== null && (
+            <span css={{ fontVariantNumeric: "tabular-nums" }}>
+              {`akku ${Math.round(data.battery_soc)} %`}
+            </span>
+          )}
+          {batteryLabel && batteryLabel !== "lepotila" && (
+            <span>{batteryLabel}</span>
+          )}
+        </div>
       </div>
     </Box>
   );

frontend/src/components/Sparkline.tsx

@@ -0,0 +1,58 @@
+import { FC } from "react";
+
+type SparklineProps = {
+  points: number[];
+  color: string;
+  height?: number;
+  className?: string;
+};
+
+const Sparkline: FC<SparklineProps> = ({
+  points,
+  color,
+  height = 50,
+  className,
+}) => {
+  if (points.length < 2) return null;
+
+  const minY = Math.min(...points);
+  const maxY = Math.max(...points);
+  const range = maxY - minY || 1;
+  const width = 200;
+  const stepX = width / (points.length - 1);
+  const padY = 2;
+
+  const coords = points.map(
+    (y, i) =>
+      [
+        i * stepX,
+        height - padY - ((y - minY) / range) * (height - 2 * padY),
+      ] as const,
+  );
+  const linePath = coords
+    .map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`)
+    .join(" ");
+  const fillPath = `${linePath} L${width},${height} L0,${height} Z`;
+
+  return (
+    <svg
+      className={className}
+      width="100%"
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+      aria-hidden
+    >
+      <path d={fillPath} fill={color} opacity={0.18} />
+      <path
+        d={linePath}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+};
+
+export default Sparkline;