mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 17:41:09 +02:00
feat(calendar): add stats sidebar section and heatmap support in year view
- Add StatsSidebarSection component with event statistics, weekly trend chart, and calendar activity - Show stats sidebar when heatmap mode is enabled instead of todo section - Add heatmap level classes (1-5) to YearView with GitHub-style coloring - Only show StatsOverlay when sidebar is collapsed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
ea856214fe
commit
6035994972
4 changed files with 511 additions and 6 deletions
|
|
@ -57,8 +57,8 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<!-- Only show when heatmap is enabled -->
|
||||
{#if heatmapStore.enabled}
|
||||
<!-- Only show when heatmap is enabled AND sidebar is collapsed (stats shown in sidebar otherwise) -->
|
||||
{#if heatmapStore.enabled && settingsStore.sidebarCollapsed}
|
||||
<div class="stats-overlay" class:collapsed>
|
||||
{#if collapsed}
|
||||
<!-- Collapsed: Just a small FAB -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,434 @@
|
|||
<script lang="ts">
|
||||
import { calendarStatisticsStore } from '$lib/stores/statistics.svelte';
|
||||
import { eventsStore } from '$lib/stores/events.svelte';
|
||||
import { calendarsStore } from '$lib/stores/calendars.svelte';
|
||||
import { viewStore } from '$lib/stores/view.svelte';
|
||||
import { format } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import {
|
||||
CalendarDays,
|
||||
Calendar,
|
||||
Clock,
|
||||
CalendarCheck,
|
||||
Hourglass,
|
||||
TrendingUp,
|
||||
BarChart3,
|
||||
Repeat,
|
||||
Sun,
|
||||
} from 'lucide-svelte';
|
||||
|
||||
// Update statistics when events/calendars change
|
||||
$effect(() => {
|
||||
calendarStatisticsStore.setEvents(eventsStore.events);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
calendarStatisticsStore.setCalendars(calendarsStore.calendars);
|
||||
});
|
||||
|
||||
// Period label based on current view
|
||||
let periodLabel = $derived.by(() => {
|
||||
const range = viewStore.viewRange;
|
||||
if (!range) return 'Statistiken';
|
||||
|
||||
const viewType = viewStore.viewType;
|
||||
|
||||
if (viewType === 'day') {
|
||||
return format(range.start, 'd. MMMM', { locale: de });
|
||||
} else if (viewType === 'week' || viewType === '5day' || viewType === '3day') {
|
||||
return `KW ${format(range.start, 'w', { locale: de })}`;
|
||||
} else if (viewType === 'month') {
|
||||
return format(range.start, 'MMMM yyyy', { locale: de });
|
||||
} else if (viewType === 'year') {
|
||||
return format(range.start, 'yyyy', { locale: de });
|
||||
} else {
|
||||
return `${format(range.start, 'd. MMM', { locale: de })} - ${format(range.end, 'd. MMM', { locale: de })}`;
|
||||
}
|
||||
});
|
||||
|
||||
// Stats derived from store
|
||||
let stats = $derived({
|
||||
eventsToday: calendarStatisticsStore.eventsToday,
|
||||
eventsThisWeek: calendarStatisticsStore.eventsThisWeek,
|
||||
upcomingEvents: calendarStatisticsStore.upcomingEvents,
|
||||
busyHours: calendarStatisticsStore.busyHoursThisWeek,
|
||||
totalEvents: calendarStatisticsStore.totalEvents,
|
||||
avgDuration: calendarStatisticsStore.averageEventDuration,
|
||||
totalCalendars: calendarStatisticsStore.totalCalendars,
|
||||
recurringEvents: calendarStatisticsStore.recurringEventsCount,
|
||||
allDayRatio: calendarStatisticsStore.allDayRatio,
|
||||
calendarActivity: calendarStatisticsStore.calendarActivity,
|
||||
weeklyTrend: calendarStatisticsStore.weeklyTrend,
|
||||
});
|
||||
|
||||
// Get the last 7 days of trend data for mini chart
|
||||
let miniTrend = $derived(stats.weeklyTrend.slice(-7));
|
||||
let maxTrendValue = $derived(Math.max(...miniTrend.map((d) => d.count), 1));
|
||||
</script>
|
||||
|
||||
<div class="stats-sidebar">
|
||||
<header class="sidebar-header">
|
||||
<div class="header-content">
|
||||
<BarChart3 size={18} />
|
||||
<span class="header-title">Statistiken</span>
|
||||
</div>
|
||||
<span class="period-label">{periodLabel}</span>
|
||||
</header>
|
||||
|
||||
<!-- Quick Stats Grid -->
|
||||
<section class="stats-grid">
|
||||
<div class="stat-card primary">
|
||||
<div class="stat-icon">
|
||||
<CalendarDays size={16} />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-value">{stats.eventsToday}</span>
|
||||
<span class="stat-label">Heute</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<Calendar size={16} />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-value">{stats.eventsThisWeek}</span>
|
||||
<span class="stat-label">Diese Woche</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<CalendarCheck size={16} />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-value">{stats.upcomingEvents}</span>
|
||||
<span class="stat-label">Anstehend</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<Clock size={16} />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-value">{stats.busyHours}h</span>
|
||||
<span class="stat-label">Stunden/Woche</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mini Weekly Trend -->
|
||||
<section class="trend-section">
|
||||
<h3 class="section-title">
|
||||
<TrendingUp size={14} />
|
||||
Letzte 7 Tage
|
||||
</h3>
|
||||
<div class="mini-trend">
|
||||
{#each miniTrend as day}
|
||||
<div class="trend-bar-container" title="{day.label}: {day.count} Events">
|
||||
<div
|
||||
class="trend-bar"
|
||||
style="height: {(day.count / maxTrendValue) * 100}%"
|
||||
class:has-events={day.count > 0}
|
||||
></div>
|
||||
<span class="trend-label">{day.label.charAt(0)}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Calendar Activity -->
|
||||
{#if stats.calendarActivity.length > 0}
|
||||
<section class="activity-section">
|
||||
<h3 class="section-title">
|
||||
<Calendar size={14} />
|
||||
Kalender-Aktivität
|
||||
</h3>
|
||||
<div class="calendar-list">
|
||||
{#each stats.calendarActivity.slice(0, 5) as cal}
|
||||
<div class="calendar-item">
|
||||
<div class="calendar-color" style="background-color: {cal.color}"></div>
|
||||
<span class="calendar-name">{cal.name}</span>
|
||||
<span class="calendar-count">{cal.total}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Additional Stats -->
|
||||
<section class="additional-stats">
|
||||
<div class="additional-stat">
|
||||
<Hourglass size={12} />
|
||||
<span>Ø {stats.avgDuration} Min</span>
|
||||
</div>
|
||||
<div class="additional-stat">
|
||||
<Repeat size={12} />
|
||||
<span>{stats.recurringEvents} wiederkehrend</span>
|
||||
</div>
|
||||
<div class="additional-stat">
|
||||
<Sun size={12} />
|
||||
<span>{stats.allDayRatio.allDay} ganztägig</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="sidebar-footer">
|
||||
<span>{stats.totalEvents} Events geladen</span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stats-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: hsl(var(--color-surface));
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 0.875rem 1rem;
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-muted) / 0.3);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.period-label {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
margin-top: 0.25rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem;
|
||||
background: hsl(var(--color-muted) / 0.3);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid hsl(var(--color-border) / 0.5);
|
||||
}
|
||||
|
||||
.stat-card.primary {
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
border-color: hsl(var(--color-primary) / 0.2);
|
||||
}
|
||||
|
||||
.stat-card.primary .stat-icon {
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.stat-card.primary .stat-value {
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: hsl(var(--color-foreground));
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.625rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Trend Section */
|
||||
.trend-section {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid hsl(var(--color-border) / 0.5);
|
||||
}
|
||||
|
||||
.mini-trend {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.375rem;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.trend-bar-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.trend-bar {
|
||||
width: 100%;
|
||||
min-height: 2px;
|
||||
background: hsl(var(--color-muted));
|
||||
border-radius: 2px 2px 0 0;
|
||||
transition: height 200ms ease;
|
||||
}
|
||||
|
||||
.trend-bar.has-events {
|
||||
background: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.trend-label {
|
||||
font-size: 0.5625rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Activity Section */
|
||||
.activity-section {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid hsl(var(--color-border) / 0.5);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.calendar-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.calendar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0;
|
||||
}
|
||||
|
||||
.calendar-color {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: var(--radius-full);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.calendar-name {
|
||||
flex: 1;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.calendar-count {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Additional Stats */
|
||||
.additional-stats {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-top: 1px solid hsl(var(--color-border) / 0.5);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.additional-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.sidebar-footer {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-muted) / 0.2);
|
||||
font-size: 0.625rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Mobile: Horizontal layout */
|
||||
@media (max-width: 768px) {
|
||||
.stats-sidebar {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.trend-section,
|
||||
.activity-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.additional-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -183,12 +183,18 @@
|
|||
<div class="days-grid" role="grid" aria-label={format(month, 'MMMM', { locale: de })}>
|
||||
{#each getMonthDays(month) as day}
|
||||
{@const eventCount = getEventCount(day)}
|
||||
{@const heatmapLevel = getHeatmapLevel(day)}
|
||||
<button
|
||||
class="day"
|
||||
class:other-month={!isSameMonth(day, month)}
|
||||
class:today={isToday(day)}
|
||||
class:has-events={eventCount > 0}
|
||||
class:has-many-events={eventCount > 3}
|
||||
class:has-events={eventCount > 0 && !heatmapStore.enabled}
|
||||
class:has-many-events={eventCount > 3 && !heatmapStore.enabled}
|
||||
class:heatmap-1={heatmapLevel === 1}
|
||||
class:heatmap-2={heatmapLevel === 2}
|
||||
class:heatmap-3={heatmapLevel === 3}
|
||||
class:heatmap-4={heatmapLevel === 4}
|
||||
class:heatmap-5={heatmapLevel === 5}
|
||||
role="gridcell"
|
||||
tabindex="0"
|
||||
aria-label="{format(day, 'd. MMMM', { locale: de })}{eventCount > 0
|
||||
|
|
@ -337,6 +343,61 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Heatmap levels - GitHub contribution graph style */
|
||||
.day.heatmap-1 {
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
}
|
||||
.day.heatmap-2 {
|
||||
background: hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
.day.heatmap-3 {
|
||||
background: hsl(var(--color-primary) / 0.5);
|
||||
}
|
||||
.day.heatmap-4 {
|
||||
background: hsl(var(--color-primary) / 0.7);
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
.day.heatmap-5 {
|
||||
background: hsl(var(--color-primary) / 0.9);
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
|
||||
/* Heatmap hover states */
|
||||
.day.heatmap-1:hover {
|
||||
background: hsl(var(--color-primary) / 0.25);
|
||||
}
|
||||
.day.heatmap-2:hover {
|
||||
background: hsl(var(--color-primary) / 0.4);
|
||||
}
|
||||
.day.heatmap-3:hover {
|
||||
background: hsl(var(--color-primary) / 0.6);
|
||||
}
|
||||
.day.heatmap-4:hover {
|
||||
background: hsl(var(--color-primary) / 0.8);
|
||||
}
|
||||
.day.heatmap-5:hover {
|
||||
background: hsl(var(--color-primary) / 0.95);
|
||||
}
|
||||
|
||||
/* Today with heatmap - add ring to distinguish */
|
||||
.day.today.heatmap-1,
|
||||
.day.today.heatmap-2,
|
||||
.day.today.heatmap-3,
|
||||
.day.today.heatmap-4,
|
||||
.day.today.heatmap-5 {
|
||||
outline: 2px solid hsl(var(--color-primary));
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Other month days with heatmap - more muted */
|
||||
.day.other-month.heatmap-1,
|
||||
.day.other-month.heatmap-2,
|
||||
.day.other-month.heatmap-3,
|
||||
.day.other-month.heatmap-4,
|
||||
.day.other-month.heatmap-5 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Context Menu */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@
|
|||
import { authStore } from '$lib/stores/auth.svelte';
|
||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||
import { viewModeStore } from '$lib/stores/view-mode.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import ViewCarousel from '$lib/components/calendar/ViewCarousel.svelte';
|
||||
import NetworkView from '$lib/components/calendar/NetworkView.svelte';
|
||||
import TodoSidebarSection from '$lib/components/calendar/TodoSidebarSection.svelte';
|
||||
import StatsSidebarSection from '$lib/components/calendar/StatsSidebarSection.svelte';
|
||||
import QuickEventOverlay from '$lib/components/event/QuickEventOverlay.svelte';
|
||||
import { CalendarViewSkeleton } from '$lib/components/skeletons';
|
||||
import type { CalendarEvent } from '@calendar/shared';
|
||||
|
|
@ -125,7 +127,11 @@
|
|||
</svg>
|
||||
</button>
|
||||
|
||||
<TodoSidebarSection maxItems={5} />
|
||||
{#if heatmapStore.enabled}
|
||||
<StatsSidebarSection />
|
||||
{:else}
|
||||
<TodoSidebarSection maxItems={5} />
|
||||
{/if}
|
||||
</aside>
|
||||
|
||||
<!-- Main Calendar Area -->
|
||||
|
|
@ -144,7 +150,11 @@
|
|||
class="calendar-sidebar-mobile mobile-only"
|
||||
class:collapsed={settingsStore.sidebarCollapsed}
|
||||
>
|
||||
<TodoSidebarSection maxItems={3} />
|
||||
{#if heatmapStore.enabled}
|
||||
<StatsSidebarSection />
|
||||
{:else}
|
||||
<TodoSidebarSection maxItems={3} />
|
||||
{/if}
|
||||
</aside>
|
||||
|
||||
<!-- Quick Event Overlay (for both create and edit) -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue