diff --git a/wwwroot/app.js b/wwwroot/app.js index a7638f0..ba1d187 100644 --- a/wwwroot/app.js +++ b/wwwroot/app.js @@ -4,8 +4,7 @@ const ZOOM_LEVELS = [ { name: '1 Monat', weeks: 4 }, { name: '2 Wochen', weeks: 2 }, { name: '1 Woche', weeks: 1 }, - { name: '1 Tag', days: 1 }, - { name: '12 Stunden', days: 0.5 }, + { name: '1 Tag', days: 1 } ]; const WEEKLY_BUDGET = 500; // $ pro Woche @@ -158,6 +157,7 @@ function renderBucketChart(buckets, bucketMinutes) { // Determine week boundaries for grouping let lastWeekId = null; + let lastDayId = null; for (let i = 0; i < BAR_COUNT; i++) { const b = bucketMap[i]; @@ -168,16 +168,24 @@ function renderBucketChart(buckets, bucketMinutes) { const bucketStart = new Date(viewFrom.getTime() + i * bucketMinutes * 60000); const bucketEnd = new Date(viewFrom.getTime() + (i + 1) * bucketMinutes * 60000); - // Check if this bucket crosses into a new week + // Check if this bucket crosses into a new week or day const weekAnchor = getLastAnchor(bucketStart); const weekId = weekAnchor.getTime(); - if (lastWeekId !== null && weekId !== lastWeekId) { + // Use local time for day boundary at anchor hour + const localDayStart = new Date(bucketStart); + localDayStart.setHours(localDayStart.getHours() - ANCHOR_HOUR); + const dayId = localDayStart.toLocaleDateString(); + const isNewWeek = lastWeekId !== null && weekId !== lastWeekId; + const showDaySep = ZOOM_LEVELS[zoomIndex].weeks === 1; + const isNewDay = showDaySep && lastDayId !== null && dayId !== lastDayId && !isNewWeek; + if (isNewWeek || isNewDay) { const spacer = document.createElement('div'); - spacer.className = 'bar-spacer'; + spacer.className = isNewWeek ? 'bar-spacer' : 'bar-spacer day-spacer'; chart.appendChild(spacer); labels.appendChild(Object.assign(document.createElement('div'), { className: 'chart-label bar-spacer' })); } lastWeekId = weekId; + lastDayId = dayId; const wrapper = document.createElement('div'); wrapper.className = 'bar-wrapper'; diff --git a/wwwroot/style.css b/wwwroot/style.css index bd14a35..e239f96 100644 --- a/wwwroot/style.css +++ b/wwwroot/style.css @@ -97,7 +97,7 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); } #chart { display: flex; align-items: flex-end; - gap: 1px; + gap: 2px; height: 140px; width: 100%; margin-top: 16px; @@ -133,6 +133,7 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); } width: 1px; background: var(--muted); } +.day-spacer { width: 6px; min-width: 6px; flex: 0 0 6px; } #chart-labels .bar-spacer { display: none; } .bar-spacer.chain-spacer::before { display: none; }