mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:01:09 +02:00
🔥 refactor(calendar): remove statistics and heatmap feature
Remove unused statistics/heatmap functionality to reduce complexity: - Delete statistics.svelte.ts and heatmap.svelte.ts stores - Delete StatsSidebarSection.svelte and StatsOverlay.svelte components - Remove heatmap toggle button from toolbar - Remove "Statistiken" nav item and Cmd+3 shortcut - Clean up heatmap CSS from all calendar views
This commit is contained in:
Till-JS
parent
8eac78599d
commit
2f3473b73f
13 changed files with 6 additions and 1461 deletions
|
|
@ -1,7 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { viewStore } from '$lib/stores/view.svelte';
|
||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import type { CalendarViewType } from '@calendar/shared';
|
||||
import {
|
||||
PillToolbarButton,
|
||||
|
|
@ -9,7 +8,6 @@
|
|||
PillTimeRangeSelector,
|
||||
PillViewSwitcher,
|
||||
} from '@manacore/shared-ui';
|
||||
import { Flame } from 'lucide-svelte';
|
||||
import PillCalendarSelector from './PillCalendarSelector.svelte';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -86,15 +84,6 @@
|
|||
Mo-Fr
|
||||
</PillToolbarButton>
|
||||
|
||||
<!-- Heatmap toggle -->
|
||||
<PillToolbarButton
|
||||
onclick={() => heatmapStore.toggle()}
|
||||
active={heatmapStore.enabled}
|
||||
title="Heatmap ein/aus - zeigt Event-Dichte"
|
||||
>
|
||||
<Flame size={16} />
|
||||
</PillToolbarButton>
|
||||
|
||||
<!-- Hours filter with time range selector -->
|
||||
<PillTimeRangeSelector
|
||||
startHour={settingsStore.dayStartHour}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
import { todosStore, type Task } from '$lib/stores/todos.svelte';
|
||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||
import { birthdaysStore } from '$lib/stores/birthdays.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
||||
import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
|
||||
import { toDate } from '$lib/utils/eventDateHelpers';
|
||||
|
|
@ -40,9 +39,6 @@
|
|||
// Use provided date or fall back to viewStore
|
||||
let effectiveDate = $derived(date ?? viewStore.currentDate);
|
||||
|
||||
// Heatmap level for this day
|
||||
let heatmapLevel = $derived(heatmapStore.enabled ? heatmapStore.getLevel(effectiveDate) : 0);
|
||||
|
||||
// Use shared constants
|
||||
const HOUR_HEIGHT = HOUR_HEIGHT_PX;
|
||||
const SNAP_MINUTES = SNAP_INTERVAL_MINUTES;
|
||||
|
|
@ -767,11 +763,6 @@
|
|||
class="day-column"
|
||||
class:today={isToday(effectiveDate)}
|
||||
class:drop-target={isSidebarDropTarget}
|
||||
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}
|
||||
bind:this={dayColumnRef}
|
||||
ondragover={handleSidebarDragOver}
|
||||
ondragleave={handleSidebarDragLeave}
|
||||
|
|
@ -1027,47 +1018,6 @@
|
|||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Heatmap levels - subtle background tint */
|
||||
.day-column.heatmap-1 {
|
||||
background: hsl(var(--color-primary) / 0.08);
|
||||
}
|
||||
.day-column.heatmap-2 {
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
}
|
||||
.day-column.heatmap-3 {
|
||||
background: hsl(var(--color-primary) / 0.22);
|
||||
}
|
||||
.day-column.heatmap-4 {
|
||||
background: hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
.day-column.heatmap-5 {
|
||||
background: hsl(var(--color-primary) / 0.4);
|
||||
}
|
||||
|
||||
/* Override today background when heatmap is active */
|
||||
.day-column.today.heatmap-1,
|
||||
.day-column.today.heatmap-2,
|
||||
.day-column.today.heatmap-3,
|
||||
.day-column.today.heatmap-4,
|
||||
.day-column.today.heatmap-5 {
|
||||
background: hsl(var(--color-primary) / var(--heatmap-opacity, 0.1));
|
||||
}
|
||||
.day-column.today.heatmap-1 {
|
||||
--heatmap-opacity: 0.12;
|
||||
}
|
||||
.day-column.today.heatmap-2 {
|
||||
--heatmap-opacity: 0.2;
|
||||
}
|
||||
.day-column.today.heatmap-3 {
|
||||
--heatmap-opacity: 0.28;
|
||||
}
|
||||
.day-column.today.heatmap-4 {
|
||||
--heatmap-opacity: 0.36;
|
||||
}
|
||||
.day-column.today.heatmap-5 {
|
||||
--heatmap-opacity: 0.45;
|
||||
}
|
||||
|
||||
/* Time indicator */
|
||||
.time-indicator {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
import { todosStore } from '$lib/stores/todos.svelte';
|
||||
import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
|
||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import TodoDayCell from './TodoDayCell.svelte';
|
||||
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
||||
import { useBirthdayPopover } from '$lib/composables';
|
||||
|
|
@ -298,17 +297,11 @@
|
|||
<div class="week-row">
|
||||
{#each week as day}
|
||||
{@const isDropTarget = isDragging && dragTargetDay && isSameDay(day, dragTargetDay)}
|
||||
{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
|
||||
<div
|
||||
class="day-cell"
|
||||
class:other-month={!isSameMonth(day, effectiveDate)}
|
||||
class:today={isToday(day)}
|
||||
class:drop-target={isDropTarget}
|
||||
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}
|
||||
use:bindDayCellRef={day}
|
||||
onclick={(e) => handleDayClick(day, e)}
|
||||
onkeydown={(e) => e.key === 'Enter' && handleDayClick(day, e as unknown as MouseEvent)}
|
||||
|
|
@ -322,9 +315,6 @@
|
|||
<span class="day-number" class:today={isToday(day)}>
|
||||
{format(day, 'd')}
|
||||
</span>
|
||||
{#if heatmapStore.enabled && heatmapLevel > 0}
|
||||
<span class="heatmap-count">{heatmapStore.getDisplayValue(day)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Todos for this day -->
|
||||
|
|
@ -508,48 +498,6 @@
|
|||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
|
||||
.heatmap-count {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 2px 6px;
|
||||
background: hsl(var(--color-muted) / 0.5);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Heatmap level colors */
|
||||
.day-cell.heatmap-1 {
|
||||
background-color: hsl(var(--color-primary) / 0.1);
|
||||
}
|
||||
.day-cell.heatmap-2 {
|
||||
background-color: hsl(var(--color-primary) / 0.2);
|
||||
}
|
||||
.day-cell.heatmap-3 {
|
||||
background-color: hsl(var(--color-primary) / 0.35);
|
||||
}
|
||||
.day-cell.heatmap-4 {
|
||||
background-color: hsl(var(--color-primary) / 0.5);
|
||||
}
|
||||
.day-cell.heatmap-5 {
|
||||
background-color: hsl(var(--color-primary) / 0.65);
|
||||
}
|
||||
|
||||
/* Heatmap hover states - slightly lighter on hover */
|
||||
.day-cell.heatmap-1:hover,
|
||||
.day-cell.heatmap-2:hover,
|
||||
.day-cell.heatmap-3:hover,
|
||||
.day-cell.heatmap-4:hover,
|
||||
.day-cell.heatmap-5:hover {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
/* Heatmap count styling for higher levels (better contrast) */
|
||||
.day-cell.heatmap-4 .heatmap-count,
|
||||
.day-cell.heatmap-5 .heatmap-count {
|
||||
background: hsl(var(--color-background) / 0.8);
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.day-events {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
import { searchStore } from '$lib/stores/search.svelte';
|
||||
import { todosStore, type Task } from '$lib/stores/todos.svelte';
|
||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import {
|
||||
useVisibleHours,
|
||||
useCurrentTimeIndicator,
|
||||
|
|
@ -837,23 +836,11 @@
|
|||
<div class="day-headers">
|
||||
<div class="time-gutter"></div>
|
||||
{#each days as day}
|
||||
{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
|
||||
<div
|
||||
class="day-header"
|
||||
class:today={isToday(day)}
|
||||
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}
|
||||
>
|
||||
<div class="day-header" class:today={isToday(day)}>
|
||||
<span class="day-name"
|
||||
>{format(day, columnClass === 'very-compact' ? 'EEEEE' : 'EEE', { locale: de })}</span
|
||||
>
|
||||
<span class="day-number" class:today={isToday(day)}>{format(day, 'd')}</span>
|
||||
{#if heatmapStore.enabled && heatmapLevel > 0 && columnClass !== 'ultra-compact'}
|
||||
<span class="heatmap-badge">{heatmapStore.getDisplayValue(day)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -1222,40 +1209,6 @@
|
|||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
/* Heatmap level colors for day headers */
|
||||
.day-header.heatmap-1 {
|
||||
background-color: hsl(var(--color-primary) / 0.1);
|
||||
}
|
||||
.day-header.heatmap-2 {
|
||||
background-color: hsl(var(--color-primary) / 0.2);
|
||||
}
|
||||
.day-header.heatmap-3 {
|
||||
background-color: hsl(var(--color-primary) / 0.35);
|
||||
}
|
||||
.day-header.heatmap-4 {
|
||||
background-color: hsl(var(--color-primary) / 0.5);
|
||||
}
|
||||
.day-header.heatmap-5 {
|
||||
background-color: hsl(var(--color-primary) / 0.65);
|
||||
}
|
||||
|
||||
.heatmap-badge {
|
||||
font-size: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 1px 4px;
|
||||
background: hsl(var(--color-muted) / 0.5);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* Better contrast for higher heatmap levels */
|
||||
.day-header.heatmap-4 .heatmap-badge,
|
||||
.day-header.heatmap-5 .heatmap-badge {
|
||||
background: hsl(var(--color-background) / 0.8);
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
|
|
|
|||
|
|
@ -1,257 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { calendarStatisticsStore } from '$lib/stores/statistics.svelte';
|
||||
import { viewStore } from '$lib/stores/view.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||
import { format } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import { BarChart3, Calendar, Clock, TrendingUp, X, ChevronDown, ChevronUp } from 'lucide-svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
// Collapsed state (persisted in localStorage)
|
||||
let collapsed = $state(false);
|
||||
|
||||
// Load collapsed state from localStorage
|
||||
if (browser) {
|
||||
const saved = localStorage.getItem('calendar-stats-overlay-collapsed');
|
||||
if (saved === 'true') {
|
||||
collapsed = true;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCollapsed() {
|
||||
collapsed = !collapsed;
|
||||
if (browser) {
|
||||
localStorage.setItem('calendar-stats-overlay-collapsed', String(collapsed));
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
// Multi-day views
|
||||
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,
|
||||
busyHours: calendarStatisticsStore.busyHoursThisWeek,
|
||||
totalEvents: calendarStatisticsStore.totalEvents,
|
||||
avgDuration: calendarStatisticsStore.averageEventDuration,
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- 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 -->
|
||||
<button class="stats-fab" onclick={toggleCollapsed} title="Statistiken anzeigen">
|
||||
<BarChart3 size={18} />
|
||||
</button>
|
||||
{:else}
|
||||
<!-- Expanded: Full panel -->
|
||||
<div class="stats-panel">
|
||||
<header class="panel-header">
|
||||
<div class="header-title">
|
||||
<BarChart3 size={16} />
|
||||
<span>{periodLabel}</span>
|
||||
</div>
|
||||
<button class="collapse-btn" onclick={toggleCollapsed} title="Minimieren">
|
||||
<ChevronUp size={16} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="stats-content">
|
||||
<div class="stat-row">
|
||||
<Calendar size={14} />
|
||||
<span class="stat-label">Heute</span>
|
||||
<span class="stat-value">{stats.eventsToday}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<TrendingUp size={14} />
|
||||
<span class="stat-label">Diese Woche</span>
|
||||
<span class="stat-value">{stats.eventsThisWeek}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<Clock size={14} />
|
||||
<span class="stat-label">Stunden/Woche</span>
|
||||
<span class="stat-value">{stats.busyHours}h</span>
|
||||
</div>
|
||||
|
||||
{#if stats.avgDuration > 0}
|
||||
<div class="stat-row muted">
|
||||
<span class="stat-label">Ø Dauer</span>
|
||||
<span class="stat-value">{stats.avgDuration}min</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="panel-footer">
|
||||
<span class="total-label">{stats.totalEvents} Events geladen</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.stats-overlay {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 50;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Move down when in floating mode (DateStrip visible) */
|
||||
@media (min-width: 768px) {
|
||||
.stats-overlay {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-fab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-full);
|
||||
background: hsl(var(--color-surface));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-foreground));
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.stats-fab:hover {
|
||||
background: hsl(var(--color-muted));
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
background: hsl(var(--color-surface));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
min-width: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-muted) / 0.3);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.stat-row.muted {
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding-top: 0.25rem;
|
||||
border-top: 1px solid hsl(var(--color-border) / 0.5);
|
||||
}
|
||||
|
||||
.stat-row :global(svg) {
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-muted) / 0.2);
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 0.625rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
/* Mobile: Position at bottom right, above PillNav */
|
||||
@media (max-width: 640px) {
|
||||
.stats-overlay {
|
||||
top: auto;
|
||||
bottom: calc(160px + env(safe-area-inset-bottom));
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,434 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
import { todosStore, type Task } from '$lib/stores/todos.svelte';
|
||||
import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
|
||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
||||
import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
|
||||
import { toDate } from '$lib/utils/eventDateHelpers';
|
||||
|
|
@ -887,21 +886,9 @@
|
|||
<div class="day-headers">
|
||||
<div class="time-gutter"></div>
|
||||
{#each days as day}
|
||||
{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
|
||||
<div
|
||||
class="day-header"
|
||||
class:today={isToday(day)}
|
||||
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}
|
||||
>
|
||||
<div class="day-header" class:today={isToday(day)}>
|
||||
<span class="day-name">{format(day, 'EEE', { locale: currentDateLocale })}</span>
|
||||
<span class="day-number" class:today={isToday(day)}>{format(day, 'd')}</span>
|
||||
{#if heatmapStore.enabled && heatmapLevel > 0}
|
||||
<span class="heatmap-badge">{heatmapStore.getDisplayValue(day)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -1256,40 +1243,6 @@
|
|||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
/* Heatmap level colors for day headers */
|
||||
.day-header.heatmap-1 {
|
||||
background-color: hsl(var(--color-primary) / 0.1);
|
||||
}
|
||||
.day-header.heatmap-2 {
|
||||
background-color: hsl(var(--color-primary) / 0.2);
|
||||
}
|
||||
.day-header.heatmap-3 {
|
||||
background-color: hsl(var(--color-primary) / 0.35);
|
||||
}
|
||||
.day-header.heatmap-4 {
|
||||
background-color: hsl(var(--color-primary) / 0.5);
|
||||
}
|
||||
.day-header.heatmap-5 {
|
||||
background-color: hsl(var(--color-primary) / 0.65);
|
||||
}
|
||||
|
||||
.heatmap-badge {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 1px 6px;
|
||||
background: hsl(var(--color-muted) / 0.5);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Better contrast for higher heatmap levels */
|
||||
.day-header.heatmap-4 .heatmap-badge,
|
||||
.day-header.heatmap-5 .heatmap-badge {
|
||||
background: hsl(var(--color-background) / 0.8);
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { viewStore } from '$lib/stores/view.svelte';
|
||||
import { eventsStore } from '$lib/stores/events.svelte';
|
||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||
import { heatmapStore, type HeatmapLevel } from '$lib/stores/heatmap.svelte';
|
||||
import {
|
||||
format,
|
||||
startOfMonth,
|
||||
|
|
@ -95,12 +94,6 @@
|
|||
return eventCountsByDay.get(key) || 0;
|
||||
}
|
||||
|
||||
// Get heatmap level for a day (when heatmap is enabled)
|
||||
function getHeatmapLevel(day: Date): HeatmapLevel {
|
||||
if (!heatmapStore.enabled) return 0;
|
||||
return heatmapStore.getLevel(day);
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
function handleDayClick(day: Date, e: MouseEvent) {
|
||||
if (onQuickCreate) {
|
||||
|
|
@ -183,18 +176,12 @@
|
|||
<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 && !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}
|
||||
class:has-events={eventCount > 0}
|
||||
class:has-many-events={eventCount > 3}
|
||||
role="gridcell"
|
||||
tabindex="0"
|
||||
aria-label="{format(day, 'd. MMMM', { locale: de })}{eventCount > 0
|
||||
|
|
@ -343,61 +330,6 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -32,12 +32,6 @@ const CALENDAR_SHORTCUTS: ShortcutCategory[] = [
|
|||
{
|
||||
keys: ['Cmd', '3'],
|
||||
altKeys: ['Ctrl', '3'],
|
||||
description: 'Statistiken öffnen',
|
||||
category: 'navigation',
|
||||
},
|
||||
{
|
||||
keys: ['Cmd', '4'],
|
||||
altKeys: ['Ctrl', '4'],
|
||||
description: 'Einstellungen öffnen',
|
||||
category: 'navigation',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,190 +0,0 @@
|
|||
/**
|
||||
* Heatmap Store - Manages heatmap visualization state for calendar views
|
||||
*/
|
||||
|
||||
import { eventsStore } from './events.svelte';
|
||||
import { viewStore } from './view.svelte';
|
||||
import { format, eachDayOfInterval, differenceInMinutes } from 'date-fns';
|
||||
import { toDate } from '$lib/utils/eventDateHelpers';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
// Heatmap metric type
|
||||
export type HeatmapMetric = 'events' | 'hours';
|
||||
|
||||
// Heatmap level (0-5)
|
||||
export type HeatmapLevel = 0 | 1 | 2 | 3 | 4 | 5;
|
||||
|
||||
// State
|
||||
let enabled = $state(false);
|
||||
let metric = $state<HeatmapMetric>('events');
|
||||
|
||||
// Load from localStorage
|
||||
if (browser) {
|
||||
const savedEnabled = localStorage.getItem('calendar-heatmap-enabled');
|
||||
if (savedEnabled === 'true') {
|
||||
enabled = true;
|
||||
}
|
||||
const savedMetric = localStorage.getItem('calendar-heatmap-metric');
|
||||
if (savedMetric === 'events' || savedMetric === 'hours') {
|
||||
metric = savedMetric;
|
||||
}
|
||||
}
|
||||
|
||||
// Daily counts cache - computed based on events and view range
|
||||
let dailyEventCounts = $derived.by(() => {
|
||||
const counts = new Map<string, number>();
|
||||
const range = viewStore.viewRange;
|
||||
|
||||
if (!range) return counts;
|
||||
|
||||
// Get all days in the current view range (plus some buffer for carousel)
|
||||
try {
|
||||
const days = eachDayOfInterval({ start: range.start, end: range.end });
|
||||
|
||||
for (const day of days) {
|
||||
const dayKey = format(day, 'yyyy-MM-dd');
|
||||
const dayEvents = eventsStore.getEventsForDay(day, false); // Don't include draft
|
||||
counts.set(dayKey, dayEvents.length);
|
||||
}
|
||||
} catch {
|
||||
// Invalid interval, return empty
|
||||
}
|
||||
|
||||
return counts;
|
||||
});
|
||||
|
||||
// Daily busy hours cache
|
||||
let dailyBusyHours = $derived.by(() => {
|
||||
const hours = new Map<string, number>();
|
||||
const range = viewStore.viewRange;
|
||||
|
||||
if (!range) return hours;
|
||||
|
||||
try {
|
||||
const days = eachDayOfInterval({ start: range.start, end: range.end });
|
||||
|
||||
for (const day of days) {
|
||||
const dayKey = format(day, 'yyyy-MM-dd');
|
||||
const dayEvents = eventsStore.getEventsForDay(day, false);
|
||||
|
||||
let totalMinutes = 0;
|
||||
for (const event of dayEvents) {
|
||||
if (!event.isAllDay) {
|
||||
const start = toDate(event.startTime);
|
||||
const end = toDate(event.endTime);
|
||||
totalMinutes += differenceInMinutes(end, start);
|
||||
}
|
||||
}
|
||||
|
||||
hours.set(dayKey, totalMinutes / 60);
|
||||
}
|
||||
} catch {
|
||||
// Invalid interval, return empty
|
||||
}
|
||||
|
||||
return hours;
|
||||
});
|
||||
|
||||
export const heatmapStore = {
|
||||
// Getters
|
||||
get enabled() {
|
||||
return enabled;
|
||||
},
|
||||
get metric() {
|
||||
return metric;
|
||||
},
|
||||
|
||||
// Toggle heatmap on/off
|
||||
toggle() {
|
||||
enabled = !enabled;
|
||||
if (browser) {
|
||||
localStorage.setItem('calendar-heatmap-enabled', String(enabled));
|
||||
}
|
||||
},
|
||||
|
||||
// Enable heatmap
|
||||
enable() {
|
||||
enabled = true;
|
||||
if (browser) {
|
||||
localStorage.setItem('calendar-heatmap-enabled', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
// Disable heatmap
|
||||
disable() {
|
||||
enabled = false;
|
||||
if (browser) {
|
||||
localStorage.setItem('calendar-heatmap-enabled', 'false');
|
||||
}
|
||||
},
|
||||
|
||||
// Set metric type
|
||||
setMetric(newMetric: HeatmapMetric) {
|
||||
metric = newMetric;
|
||||
if (browser) {
|
||||
localStorage.setItem('calendar-heatmap-metric', newMetric);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get event count for a specific date
|
||||
*/
|
||||
getEventCount(date: Date): number {
|
||||
const dayKey = format(date, 'yyyy-MM-dd');
|
||||
return dailyEventCounts.get(dayKey) ?? 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get busy hours for a specific date
|
||||
*/
|
||||
getBusyHours(date: Date): number {
|
||||
const dayKey = format(date, 'yyyy-MM-dd');
|
||||
return dailyBusyHours.get(dayKey) ?? 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get heatmap level (0-5) for a specific date based on current metric
|
||||
*/
|
||||
getLevel(date: Date): HeatmapLevel {
|
||||
if (metric === 'events') {
|
||||
const count = this.getEventCount(date);
|
||||
if (count === 0) return 0;
|
||||
if (count <= 2) return 1;
|
||||
if (count <= 4) return 2;
|
||||
if (count <= 6) return 3;
|
||||
if (count <= 9) return 4;
|
||||
return 5;
|
||||
} else {
|
||||
// Hours metric
|
||||
const hours = this.getBusyHours(date);
|
||||
if (hours === 0) return 0;
|
||||
if (hours <= 1) return 1;
|
||||
if (hours <= 2) return 2;
|
||||
if (hours <= 4) return 3;
|
||||
if (hours <= 6) return 4;
|
||||
return 5;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get CSS class for heatmap level
|
||||
*/
|
||||
getLevelClass(date: Date): string {
|
||||
const level = this.getLevel(date);
|
||||
return level === 0 ? '' : `heatmap-${level}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get display value for a date (count or hours depending on metric)
|
||||
*/
|
||||
getDisplayValue(date: Date): string {
|
||||
if (metric === 'events') {
|
||||
const count = this.getEventCount(date);
|
||||
return count > 0 ? String(count) : '';
|
||||
} else {
|
||||
const hours = this.getBusyHours(date);
|
||||
if (hours === 0) return '';
|
||||
return hours < 1 ? `${Math.round(hours * 60)}m` : `${hours.toFixed(1)}h`;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -1,270 +0,0 @@
|
|||
/**
|
||||
* Calendar Statistics Store - Calculates calendar statistics using Svelte 5 runes
|
||||
*/
|
||||
|
||||
import type { CalendarEvent, Calendar } from '@calendar/shared';
|
||||
import {
|
||||
startOfDay,
|
||||
startOfWeek,
|
||||
endOfWeek,
|
||||
subDays,
|
||||
format,
|
||||
differenceInMinutes,
|
||||
isToday,
|
||||
isSameWeek,
|
||||
parseISO,
|
||||
eachDayOfInterval,
|
||||
addDays,
|
||||
} from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import type {
|
||||
HeatmapDataPoint,
|
||||
TrendDataPoint,
|
||||
DonutSegment,
|
||||
ProgressItem,
|
||||
} from '@manacore/shared-ui';
|
||||
|
||||
// Types
|
||||
export interface EventStatusBreakdown {
|
||||
status: 'confirmed' | 'tentative' | 'cancelled';
|
||||
count: number;
|
||||
percentage: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
confirmed: '#10B981', // green
|
||||
tentative: '#F59E0B', // orange
|
||||
cancelled: '#EF4444', // red
|
||||
};
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
confirmed: 'Bestätigt',
|
||||
tentative: 'Vorläufig',
|
||||
cancelled: 'Abgesagt',
|
||||
};
|
||||
|
||||
// State
|
||||
let events = $state<CalendarEvent[]>([]);
|
||||
let calendars = $state<Calendar[]>([]);
|
||||
|
||||
export const calendarStatisticsStore = {
|
||||
// Setters
|
||||
setEvents(newEvents: CalendarEvent[]) {
|
||||
events = newEvents;
|
||||
},
|
||||
|
||||
setCalendars(newCalendars: Calendar[]) {
|
||||
calendars = newCalendars;
|
||||
},
|
||||
|
||||
// Quick Stats
|
||||
get totalEvents() {
|
||||
return events.length;
|
||||
},
|
||||
|
||||
get eventsToday() {
|
||||
return events.filter((e) => {
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
return isToday(startTime);
|
||||
}).length;
|
||||
},
|
||||
|
||||
get eventsThisWeek() {
|
||||
const now = new Date();
|
||||
return events.filter((e) => {
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
return isSameWeek(startTime, now, { weekStartsOn: 1 });
|
||||
}).length;
|
||||
},
|
||||
|
||||
get upcomingEvents() {
|
||||
const now = new Date();
|
||||
const nextWeek = addDays(now, 7);
|
||||
return events.filter((e) => {
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
return startTime > now && startTime <= nextWeek;
|
||||
}).length;
|
||||
},
|
||||
|
||||
get busyHoursThisWeek() {
|
||||
const weekStart = startOfWeek(new Date(), { weekStartsOn: 1 });
|
||||
const weekEnd = endOfWeek(new Date(), { weekStartsOn: 1 });
|
||||
|
||||
let totalMinutes = 0;
|
||||
|
||||
events.forEach((e) => {
|
||||
if (e.isAllDay) return; // Skip all-day events
|
||||
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
const endTime = typeof e.endTime === 'string' ? parseISO(e.endTime) : e.endTime;
|
||||
|
||||
if (startTime >= weekStart && startTime <= weekEnd) {
|
||||
totalMinutes += differenceInMinutes(endTime, startTime);
|
||||
}
|
||||
});
|
||||
|
||||
return Math.round((totalMinutes / 60) * 10) / 10; // Round to 1 decimal
|
||||
},
|
||||
|
||||
get totalCalendars() {
|
||||
return calendars.length;
|
||||
},
|
||||
|
||||
get averageEventDuration() {
|
||||
const timedEvents = events.filter((e) => !e.isAllDay);
|
||||
if (timedEvents.length === 0) return 0;
|
||||
|
||||
const totalMinutes = timedEvents.reduce((sum, e) => {
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
const endTime = typeof e.endTime === 'string' ? parseISO(e.endTime) : e.endTime;
|
||||
return sum + differenceInMinutes(endTime, startTime);
|
||||
}, 0);
|
||||
|
||||
return Math.round(totalMinutes / timedEvents.length);
|
||||
},
|
||||
|
||||
// Activity Heatmap (last 6 months) - based on event creation
|
||||
get activityHeatmap(): HeatmapDataPoint[] {
|
||||
const endDate = new Date();
|
||||
const startDate = subDays(endDate, 180);
|
||||
|
||||
// Count events per day based on start time
|
||||
const eventMap = new Map<string, number>();
|
||||
|
||||
events.forEach((e) => {
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
const dateKey = format(startTime, 'yyyy-MM-dd');
|
||||
eventMap.set(dateKey, (eventMap.get(dateKey) || 0) + 1);
|
||||
});
|
||||
|
||||
// Generate all days
|
||||
const days = eachDayOfInterval({ start: startDate, end: endDate });
|
||||
|
||||
return days.map((day) => {
|
||||
const dateKey = format(day, 'yyyy-MM-dd');
|
||||
return {
|
||||
date: dateKey,
|
||||
count: eventMap.get(dateKey) || 0,
|
||||
dayOfWeek: day.getDay(),
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// Weekly Trend (last 4 weeks)
|
||||
get weeklyTrend(): TrendDataPoint[] {
|
||||
const endDate = new Date();
|
||||
const startDate = subDays(endDate, 27);
|
||||
|
||||
const eventMap = new Map<string, number>();
|
||||
|
||||
events.forEach((e) => {
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
if (startTime >= startDate && startTime <= endDate) {
|
||||
const dateKey = format(startTime, 'yyyy-MM-dd');
|
||||
eventMap.set(dateKey, (eventMap.get(dateKey) || 0) + 1);
|
||||
}
|
||||
});
|
||||
|
||||
const days = eachDayOfInterval({ start: startDate, end: endDate });
|
||||
|
||||
return days.map((day) => {
|
||||
const dateKey = format(day, 'yyyy-MM-dd');
|
||||
return {
|
||||
date: dateKey,
|
||||
count: eventMap.get(dateKey) || 0,
|
||||
label: format(day, 'EEE', { locale: de }),
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// Status Breakdown (Donut Chart)
|
||||
get statusBreakdown(): DonutSegment[] {
|
||||
const total = events.length;
|
||||
if (total === 0) return [];
|
||||
|
||||
const counts: Record<string, number> = {
|
||||
confirmed: 0,
|
||||
tentative: 0,
|
||||
cancelled: 0,
|
||||
};
|
||||
|
||||
events.forEach((e) => {
|
||||
const status = e.status || 'confirmed';
|
||||
if (counts[status] !== undefined) {
|
||||
counts[status]++;
|
||||
}
|
||||
});
|
||||
|
||||
return (['confirmed', 'tentative', 'cancelled'] as const).map((status) => ({
|
||||
id: status,
|
||||
label: STATUS_LABELS[status],
|
||||
count: counts[status],
|
||||
percentage: total > 0 ? Math.round((counts[status] / total) * 100) : 0,
|
||||
color: STATUS_COLORS[status],
|
||||
}));
|
||||
},
|
||||
|
||||
// Calendar Activity (Progress Bars)
|
||||
get calendarActivity(): ProgressItem[] {
|
||||
const calendarMap = new Map<string, { total: number; thisWeek: number }>();
|
||||
|
||||
// Initialize with all calendars
|
||||
calendars.forEach((c) => {
|
||||
calendarMap.set(c.id, { total: 0, thisWeek: 0 });
|
||||
});
|
||||
|
||||
const now = new Date();
|
||||
|
||||
// Count events per calendar
|
||||
events.forEach((e) => {
|
||||
const calendarId = e.calendarId;
|
||||
const data = calendarMap.get(calendarId) || { total: 0, thisWeek: 0 };
|
||||
data.total++;
|
||||
|
||||
const startTime = typeof e.startTime === 'string' ? parseISO(e.startTime) : e.startTime;
|
||||
if (isSameWeek(startTime, now, { weekStartsOn: 1 })) {
|
||||
data.thisWeek++;
|
||||
}
|
||||
|
||||
calendarMap.set(calendarId, data);
|
||||
});
|
||||
|
||||
// Convert to array
|
||||
const result: ProgressItem[] = [];
|
||||
|
||||
calendarMap.forEach((data, calendarId) => {
|
||||
if (data.total === 0) return;
|
||||
|
||||
const calendar = calendars.find((c) => c.id === calendarId);
|
||||
|
||||
result.push({
|
||||
id: calendarId,
|
||||
name: calendar?.name || 'Unbekannt',
|
||||
color: calendar?.color || '#6B7280',
|
||||
total: data.total,
|
||||
completed: data.thisWeek,
|
||||
percentage: data.total > 0 ? Math.round((data.thisWeek / data.total) * 100) : 0,
|
||||
});
|
||||
});
|
||||
|
||||
// Sort by total events descending
|
||||
return result.sort((a, b) => b.total - a.total);
|
||||
},
|
||||
|
||||
// All-day vs Timed events ratio
|
||||
get allDayRatio() {
|
||||
const allDay = events.filter((e) => e.isAllDay).length;
|
||||
const timed = events.filter((e) => !e.isAllDay).length;
|
||||
return {
|
||||
allDay,
|
||||
timed,
|
||||
allDayPercentage: events.length > 0 ? Math.round((allDay / events.length) * 100) : 0,
|
||||
};
|
||||
},
|
||||
|
||||
// Recurring events count
|
||||
get recurringEventsCount() {
|
||||
return events.filter((e) => e.recurrenceRule).length;
|
||||
},
|
||||
};
|
||||
|
|
@ -64,11 +64,9 @@
|
|||
import TagStrip from '$lib/components/calendar/TagStrip.svelte';
|
||||
import EventContextMenu from '$lib/components/event/EventContextMenu.svelte';
|
||||
import ViewModePillContextMenu from '$lib/components/calendar/ViewModePillContextMenu.svelte';
|
||||
import StatsOverlay from '$lib/components/calendar/StatsOverlay.svelte';
|
||||
import SettingsModal from '$lib/components/settings/SettingsModal.svelte';
|
||||
import AuthGateModal from '$lib/components/AuthGateModal.svelte';
|
||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import { sessionEventsStore } from '$lib/stores/session-events.svelte';
|
||||
import { GuestWelcomeModal, shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
|
||||
import type { CalendarViewType } from '@calendar/shared';
|
||||
|
|
@ -278,7 +276,6 @@
|
|||
|
||||
// Base navigation items for Calendar (without Kalender/Aufgaben - handled by tab group)
|
||||
// Note: Tags uses onClick to toggle TagStrip visibility instead of navigating
|
||||
// Note: Statistiken uses onClick to toggle heatmap mode (shows stats overlay + event density)
|
||||
let baseNavItems = $derived<PillNavItem[]>([
|
||||
{
|
||||
href: '/tags',
|
||||
|
|
@ -287,13 +284,6 @@
|
|||
onClick: handleTagsToggle,
|
||||
active: isTagStripVisible,
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Statistiken',
|
||||
icon: 'flame',
|
||||
onClick: () => heatmapStore.toggle(),
|
||||
active: heatmapStore.enabled,
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Einstellungen',
|
||||
|
|
@ -831,9 +821,6 @@
|
|||
<!-- InputBar Help Modal -->
|
||||
<InputBarHelpModal open={helpModalOpen} onClose={handleCloseHelpModal} mode={helpModalMode} />
|
||||
|
||||
<!-- Stats Overlay (shown when heatmap is enabled) -->
|
||||
<StatsOverlay />
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<SettingsModal
|
||||
visible={showSettingsModal}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,9 @@
|
|||
import { calendarsStore } from '$lib/stores/calendars.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';
|
||||
|
|
@ -130,11 +128,7 @@
|
|||
</svg>
|
||||
</button>
|
||||
|
||||
{#if heatmapStore.enabled}
|
||||
<StatsSidebarSection />
|
||||
{:else}
|
||||
<TodoSidebarSection maxItems={5} />
|
||||
{/if}
|
||||
<TodoSidebarSection maxItems={5} />
|
||||
</aside>
|
||||
|
||||
<!-- Main Calendar Area -->
|
||||
|
|
@ -153,11 +147,7 @@
|
|||
class="calendar-sidebar-mobile mobile-only"
|
||||
class:collapsed={settingsStore.sidebarCollapsed}
|
||||
>
|
||||
{#if heatmapStore.enabled}
|
||||
<StatsSidebarSection />
|
||||
{:else}
|
||||
<TodoSidebarSection maxItems={3} />
|
||||
{/if}
|
||||
<TodoSidebarSection maxItems={3} />
|
||||
</aside>
|
||||
|
||||
<!-- Quick Event Overlay (for both create and edit) -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue