Improve dashboard charts for sparse data and mobile layouts

2026-04-11 19:53:06 +02:00
parent 291e98fb5a
commit 3e5cdfb717
2 changed files with 121 additions and 15 deletions
@@ -378,6 +378,7 @@ button {

 .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
 }

 .chart-card--calendar,
@@ -474,9 +475,12 @@ button {
    stroke-width: 1.1;
 }

-.line-chart,
+.line-chart {
+    min-height: 10.25rem;
+}
+
 .bar-chart {
-    min-height: 17rem;
+    min-height: 11rem;
 }

 .line-chart svg {
@@ -499,16 +503,35 @@ button {
    stroke-width: 1.5;
 }

+.line-point--solo {
+    stroke-width: 2;
+}
+
+.line-point-glow {
+    opacity: 0.16;
+}
+
 .chart-axis {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
 }

+.chart-guide {
+    opacity: 0.22;
+    stroke-width: 2;
+}
+
 .chart-label {
    fill: rgba(239, 247, 255, 0.65);
    font-size: 11px;
 }

+.chart-value {
+    fill: rgba(239, 247, 255, 0.9);
+    font-size: 15px;
+    font-weight: 700;
+}
+
 .bar-chart svg {
    width: 100%;
    height: auto;
@@ -987,6 +1010,14 @@ input[type="range"] {
        flex-direction: column;
        align-items: flex-start;
    }
+
+    .line-chart {
+        min-height: 9.5rem;
+    }
+
+    .bar-chart {
+        min-height: 10rem;
+    }
 }

@media (max-width: 640px) {
@@ -1011,4 +1042,16 @@ input[type="range"] {
    .hero-score {
        font-size: 2.8rem;
    }
+
+    .chart-card {
+        padding: 1rem;
+    }
+
+    .line-chart {
+        min-height: 8.75rem;
+    }
+
+    .bar-chart {
+        min-height: 9.5rem;
+    }
 }
@@ -1,5 +1,6 @@
 (function () {
    const textDecoder = new TextDecoder();
+    let dashboardResizeTimer = null;

    function decodePayload(raw) {
        if (!raw) {
@@ -282,11 +283,55 @@
            return;
        }

+        const seriesName = container.dataset.series || "";
+        const values = items.map(item => Number(item.value));
        const width = 760;
-        const height = 220;
-        const padding = { top: 18, right: 18, bottom: 38, left: 14 };
-        const maxValue = Math.max(...items.map(item => Number(item.value)), 10);
-        const minValue = 0;
+        const height = 196;
+        const padding = { top: 10, right: 18, bottom: 28, left: 14 };
+        let minValue = Math.min(...values);
+        let maxValue = Math.max(...values);
+
+        if (seriesName === "mood" || seriesName === "stress") {
+            minValue = Math.max(1, minValue - 1.5);
+            maxValue = Math.min(10, maxValue + 1.5);
+        } else {
+            minValue = Math.max(0, minValue - 1);
+            maxValue = maxValue + 1;
+        }
+
+        if ((maxValue - minValue) < 3) {
+            const center = (maxValue + minValue) / 2;
+            if (seriesName === "mood" || seriesName === "stress") {
+                minValue = Math.max(1, center - 1.5);
+                maxValue = Math.min(10, center + 1.5);
+            } else {
+                minValue = Math.max(0, center - 1.5);
+                maxValue = center + 1.5;
+            }
+        }
+
+        if (items.length === 1) {
+            const only = items[0];
+            const chartTop = padding.top;
+            const chartBottom = height - padding.bottom;
+            const ratio = (Number(only.value) - minValue) / Math.max(maxValue - minValue, 1);
+            const cx = width / 2;
+            const cy = chartTop + ((1 - ratio) * (chartBottom - chartTop));
+
+            container.innerHTML = `
+                <svg viewBox="0 0 ${width} ${height}" role="img" aria-label="Verlauf">
+                    <line class="chart-axis" x1="${width * 0.18}" y1="${chartBottom}" x2="${width * 0.82}" y2="${chartBottom}"></line>
+                    <line class="chart-guide" x1="${cx}" y1="${cy + 10}" x2="${cx}" y2="${chartBottom}" stroke="${color}"></line>
+                    <circle class="line-point line-point--solo" cx="${cx}" cy="${cy}" r="7" fill="${color}"></circle>
+                    <circle class="line-point-glow" cx="${cx}" cy="${cy}" r="18" fill="${color}"></circle>
+                    <text class="chart-value" x="${cx}" y="${Math.max(18, cy - 18)}" text-anchor="middle">${formatNumber(Number(only.value))}</text>
+                    <text class="chart-label" x="${cx}" y="${height - 10}" text-anchor="middle">${formatDateLabel(only.date)}</text>
+                    <title>${formatDateLabel(only.date)}: ${formatNumber(Number(only.value))}</title>
+                </svg>
+            `;
+            return;
+        }
+
        const step = items.length > 1 ? (width - padding.left - padding.right) / (items.length - 1) : 0;

        const points = items.map((item, index) => {
@@ -324,9 +369,9 @@
        const recent = items.slice(-18);
        const maxValue = Math.max(...recent.map(item => Number(item.value)), 1);
        const width = Math.max(recent.length * 34, 520);
-        const height = 220;
-        const chartHeight = 150;
-        const baseY = 176;
+        const height = 184;
+        const chartHeight = 118;
+        const baseY = 146;

        const bars = recent.map((item, index) => {
            const sport = Number(item.sport || 0);
@@ -349,7 +394,7 @@
                    <title>${formatDateLabel(item.date)} · Sport ${sport} min</title>
                </rect>
                <text class="bar-value" x="${x + 9}" y="${baseY - chartHeight - 10}">${Math.round(total)}</text>
-                <text class="bar-label" x="${x + 9}" y="202" text-anchor="middle">${formatDateLabel(item.date)}</text>
+                <text class="bar-label" x="${x + 9}" y="172" text-anchor="middle">${formatDateLabel(item.date)}</text>
            `;
        }).join("");

@@ -424,20 +469,27 @@

        const totalWeeks = Math.floor((days.length - 1) / 7) + 1;
        const cellSize = 12;
-        const cellGap = 5;
+        const baseCellGap = 5;
+        const verticalGap = 5;
        const xOffset = 34;
        const yOffset = 22;
-        const gridHeight = (7 * cellSize) + (6 * cellGap);
+        const gridHeight = (7 * cellSize) + (6 * verticalGap);
        const height = yOffset + gridHeight + 8;
-        const width = xOffset + ((totalWeeks - 1) * (cellSize + cellGap)) + cellSize + 12;
+        const rightPadding = 4;
+        const naturalWidth = xOffset + (totalWeeks * cellSize) + ((totalWeeks - 1) * baseCellGap) + rightPadding;
+        const availableWidth = Math.floor(container.clientWidth || 0);
+        const width = Math.max(naturalWidth, availableWidth);
+        const horizontalGap = totalWeeks > 1
+            ? (width - xOffset - rightPadding - (totalWeeks * cellSize)) / (totalWeeks - 1)
+            : 0;
        const monthLabels = [];
        let lastMonth = -1;

        const cells = days.map((item, index) => {
            const week = Math.floor(index / 7);
            const row = item.weekday === 0 ? 6 : item.weekday - 1;
-            const x = xOffset + (week * (cellSize + cellGap));
-            const y = yOffset + (row * (cellSize + cellGap));
+            const x = xOffset + (week * (cellSize + horizontalGap));
+            const y = yOffset + (row * (cellSize + verticalGap));
            const fill = calendarColor(item.entry);

            if (item.day <= 7 && item.month !== lastMonth && item.entry !== null) {
@@ -511,6 +563,17 @@
        });
    }

+    window.addEventListener("resize", () => {
+        if (!document.querySelector("#calendar-heatmap")) {
+            return;
+        }
+
+        window.clearTimeout(dashboardResizeTimer);
+        dashboardResizeTimer = window.setTimeout(() => {
+            initDashboardCharts();
+        }, 120);
+    });
+
    updateRangeOutputs();
    initHeaderDatePicker();
    initTrackPreview();