Improve PV bar label placement and hide partial-day forecasts

- Flip anchor/align when the rotated label doesn't fit inside its bar:
  fits → centered inside (white), overflows → drawn fully above the bar
  top (amber). The previous behavior left small-bar labels split across
  the bar boundary, which was visually noisy.
- Drop chart entries for days with fewer than 20 hourly forecast points.
  The 66h FMI window almost always begins or ends mid-day, which used
  to render as a misleading 0-ish kWh bar at the edge of the chart.

Author: eetu

frontend/src/components/FmiWeatherBox.tsx

@@ -77,18 +77,27 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
     return null;
   }
 
-  const pvByDate = new Map<string, number>();
+  // Aggregate hourly PV forecast points to per-day kWh + hour count.
+  // Days with partial coverage (e.g. first/last day of the 66h window) are
+  // dropped from the chart to avoid showing misleading near-zero totals.
+  const FULL_DAY_HOURS = 20;
+  const pvByDate = new Map<string, { kwh: number; hours: number }>();
   for (const p of pvForecast?.points ?? []) {
     const key = p.time.slice(0, 10);
-    pvByDate.set(key, (pvByDate.get(key) ?? 0) + p.outputW / 1000);
+    const cur = pvByDate.get(key) ?? { kwh: 0, hours: 0 };
+    pvByDate.set(key, {
+      kwh: cur.kwh + p.outputW / 1000,
+      hours: cur.hours + 1,
+    });
   }
 
   const chartData = daily.map((d) => {
     const key = d.date.slice(0, 10);
+    const pv = pvByDate.get(key);
     return {
       temp: d.temperatureMax,
       rain: d.precipitation,
-      pvKwh: pvByDate.has(key) ? pvByDate.get(key)! : null,
+      pvKwh: pv && pv.hours >= FULL_DAY_HOURS ? pv.kwh : null,
       label: `${format(new Date(d.date), "EEEEEE", {
         locale: fi,
       })}`,

frontend/src/components/WeatherChart.tsx

@@ -38,6 +38,18 @@ type WeatherChartProps = {
   days?: number;
 };
 
+const fitsInsideBar = (ctx: Context, charPx: number): boolean => {
+  const value = ctx.dataset.data[ctx.dataIndex] as number | null;
+  if (value == null) return true;
+  const scale = ctx.chart.scales.yPv;
+  if (!scale) return true;
+  const barHeight = Math.abs(
+    scale.getPixelForValue(value) - scale.getPixelForValue(0),
+  );
+  const text = `${value.toFixed(0)} kWh`;
+  return barHeight >= text.length * charPx + 4;
+};
+
 const WeatherChart: React.FC<WeatherChartProps> = ({
   data: unfilteredData,
   days,
@@ -85,26 +97,21 @@ const WeatherChart: React.FC<WeatherChartProps> = ({
       categoryPercentage: 0.7,
       datalabels: {
         display: true,
-        anchor: "center",
-        align: "center",
         rotation: -90,
         clip: false,
         font: { size: labelFontSize, weight: "bold" },
         formatter: (v: number | null) =>
           v == null ? "" : `${v.toFixed(0)} kWh`,
-        color: (ctx: Context) => {
-          const value = ctx.dataset.data[ctx.dataIndex] as number | null;
-          if (value == null) return "#ffffff";
-          const scale = ctx.chart.scales.yPv;
-          if (!scale) return "#ffffff";
-          const barHeight = Math.abs(
-            scale.getPixelForValue(value) - scale.getPixelForValue(0),
-          );
-          const text = `${value.toFixed(0)} kWh`;
-          const labelPx = text.length * labelCharPx + 4;
-          if (barHeight >= labelPx) return "#ffffff";
-          return theme.mode === "dark" ? "#f5a524" : "#a35a00";
-        },
+        anchor: (ctx: Context) =>
+          fitsInsideBar(ctx, labelCharPx) ? "center" : "end",
+        align: (ctx: Context) =>
+          fitsInsideBar(ctx, labelCharPx) ? "center" : "top",
+        color: (ctx: Context) =>
+          fitsInsideBar(ctx, labelCharPx)
+            ? "#ffffff"
+            : theme.mode === "dark"
+              ? "#f5a524"
+              : "#a35a00",
       },
     });
   }