mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 22: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">
|
<script lang="ts">
|
||||||
import { viewStore } from '$lib/stores/view.svelte';
|
import { viewStore } from '$lib/stores/view.svelte';
|
||||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
|
||||||
import type { CalendarViewType } from '@calendar/shared';
|
import type { CalendarViewType } from '@calendar/shared';
|
||||||
import {
|
import {
|
||||||
PillToolbarButton,
|
PillToolbarButton,
|
||||||
|
|
@ -9,7 +8,6 @@
|
||||||
PillTimeRangeSelector,
|
PillTimeRangeSelector,
|
||||||
PillViewSwitcher,
|
PillViewSwitcher,
|
||||||
} from '@manacore/shared-ui';
|
} from '@manacore/shared-ui';
|
||||||
import { Flame } from 'lucide-svelte';
|
|
||||||
import PillCalendarSelector from './PillCalendarSelector.svelte';
|
import PillCalendarSelector from './PillCalendarSelector.svelte';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -86,15 +84,6 @@
|
||||||
Mo-Fr
|
Mo-Fr
|
||||||
</PillToolbarButton>
|
</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 -->
|
<!-- Hours filter with time range selector -->
|
||||||
<PillTimeRangeSelector
|
<PillTimeRangeSelector
|
||||||
startHour={settingsStore.dayStartHour}
|
startHour={settingsStore.dayStartHour}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@
|
||||||
import { todosStore, type Task } from '$lib/stores/todos.svelte';
|
import { todosStore, type Task } from '$lib/stores/todos.svelte';
|
||||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||||
import { birthdaysStore } from '$lib/stores/birthdays.svelte';
|
import { birthdaysStore } from '$lib/stores/birthdays.svelte';
|
||||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
|
||||||
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
||||||
import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
|
import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
|
||||||
import { toDate } from '$lib/utils/eventDateHelpers';
|
import { toDate } from '$lib/utils/eventDateHelpers';
|
||||||
|
|
@ -40,9 +39,6 @@
|
||||||
// Use provided date or fall back to viewStore
|
// Use provided date or fall back to viewStore
|
||||||
let effectiveDate = $derived(date ?? viewStore.currentDate);
|
let effectiveDate = $derived(date ?? viewStore.currentDate);
|
||||||
|
|
||||||
// Heatmap level for this day
|
|
||||||
let heatmapLevel = $derived(heatmapStore.enabled ? heatmapStore.getLevel(effectiveDate) : 0);
|
|
||||||
|
|
||||||
// Use shared constants
|
// Use shared constants
|
||||||
const HOUR_HEIGHT = HOUR_HEIGHT_PX;
|
const HOUR_HEIGHT = HOUR_HEIGHT_PX;
|
||||||
const SNAP_MINUTES = SNAP_INTERVAL_MINUTES;
|
const SNAP_MINUTES = SNAP_INTERVAL_MINUTES;
|
||||||
|
|
@ -767,11 +763,6 @@
|
||||||
class="day-column"
|
class="day-column"
|
||||||
class:today={isToday(effectiveDate)}
|
class:today={isToday(effectiveDate)}
|
||||||
class:drop-target={isSidebarDropTarget}
|
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}
|
bind:this={dayColumnRef}
|
||||||
ondragover={handleSidebarDragOver}
|
ondragover={handleSidebarDragOver}
|
||||||
ondragleave={handleSidebarDragLeave}
|
ondragleave={handleSidebarDragLeave}
|
||||||
|
|
@ -1027,47 +1018,6 @@
|
||||||
outline-offset: -2px;
|
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 */
|
||||||
.time-indicator {
|
.time-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@
|
||||||
import { todosStore } from '$lib/stores/todos.svelte';
|
import { todosStore } from '$lib/stores/todos.svelte';
|
||||||
import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
|
import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
|
||||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
|
||||||
import TodoDayCell from './TodoDayCell.svelte';
|
import TodoDayCell from './TodoDayCell.svelte';
|
||||||
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
||||||
import { useBirthdayPopover } from '$lib/composables';
|
import { useBirthdayPopover } from '$lib/composables';
|
||||||
|
|
@ -298,17 +297,11 @@
|
||||||
<div class="week-row">
|
<div class="week-row">
|
||||||
{#each week as day}
|
{#each week as day}
|
||||||
{@const isDropTarget = isDragging && dragTargetDay && isSameDay(day, dragTargetDay)}
|
{@const isDropTarget = isDragging && dragTargetDay && isSameDay(day, dragTargetDay)}
|
||||||
{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
|
|
||||||
<div
|
<div
|
||||||
class="day-cell"
|
class="day-cell"
|
||||||
class:other-month={!isSameMonth(day, effectiveDate)}
|
class:other-month={!isSameMonth(day, effectiveDate)}
|
||||||
class:today={isToday(day)}
|
class:today={isToday(day)}
|
||||||
class:drop-target={isDropTarget}
|
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}
|
use:bindDayCellRef={day}
|
||||||
onclick={(e) => handleDayClick(day, e)}
|
onclick={(e) => handleDayClick(day, e)}
|
||||||
onkeydown={(e) => e.key === 'Enter' && handleDayClick(day, e as unknown as MouseEvent)}
|
onkeydown={(e) => e.key === 'Enter' && handleDayClick(day, e as unknown as MouseEvent)}
|
||||||
|
|
@ -322,9 +315,6 @@
|
||||||
<span class="day-number" class:today={isToday(day)}>
|
<span class="day-number" class:today={isToday(day)}>
|
||||||
{format(day, 'd')}
|
{format(day, 'd')}
|
||||||
</span>
|
</span>
|
||||||
{#if heatmapStore.enabled && heatmapLevel > 0}
|
|
||||||
<span class="heatmap-count">{heatmapStore.getDisplayValue(day)}</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Todos for this day -->
|
<!-- Todos for this day -->
|
||||||
|
|
@ -508,48 +498,6 @@
|
||||||
color: hsl(var(--color-primary-foreground));
|
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 {
|
.day-events {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
import { searchStore } from '$lib/stores/search.svelte';
|
import { searchStore } from '$lib/stores/search.svelte';
|
||||||
import { todosStore, type Task } from '$lib/stores/todos.svelte';
|
import { todosStore, type Task } from '$lib/stores/todos.svelte';
|
||||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
|
||||||
import {
|
import {
|
||||||
useVisibleHours,
|
useVisibleHours,
|
||||||
useCurrentTimeIndicator,
|
useCurrentTimeIndicator,
|
||||||
|
|
@ -837,23 +836,11 @@
|
||||||
<div class="day-headers">
|
<div class="day-headers">
|
||||||
<div class="time-gutter"></div>
|
<div class="time-gutter"></div>
|
||||||
{#each days as day}
|
{#each days as day}
|
||||||
{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
|
<div class="day-header" class:today={isToday(day)}>
|
||||||
<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}
|
|
||||||
>
|
|
||||||
<span class="day-name"
|
<span class="day-name"
|
||||||
>{format(day, columnClass === 'very-compact' ? 'EEEEE' : 'EEE', { locale: de })}</span
|
>{format(day, columnClass === 'very-compact' ? 'EEEEE' : 'EEE', { locale: de })}</span
|
||||||
>
|
>
|
||||||
<span class="day-number" class:today={isToday(day)}>{format(day, 'd')}</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>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1222,40 +1209,6 @@
|
||||||
padding: 0.125rem;
|
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 {
|
.day-name {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: hsl(var(--color-muted-foreground));
|
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 { todosStore, type Task } from '$lib/stores/todos.svelte';
|
||||||
import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
|
import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
|
||||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
|
||||||
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
|
||||||
import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
|
import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
|
||||||
import { toDate } from '$lib/utils/eventDateHelpers';
|
import { toDate } from '$lib/utils/eventDateHelpers';
|
||||||
|
|
@ -887,21 +886,9 @@
|
||||||
<div class="day-headers">
|
<div class="day-headers">
|
||||||
<div class="time-gutter"></div>
|
<div class="time-gutter"></div>
|
||||||
{#each days as day}
|
{#each days as day}
|
||||||
{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
|
<div class="day-header" class:today={isToday(day)}>
|
||||||
<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}
|
|
||||||
>
|
|
||||||
<span class="day-name">{format(day, 'EEE', { locale: currentDateLocale })}</span>
|
<span class="day-name">{format(day, 'EEE', { locale: currentDateLocale })}</span>
|
||||||
<span class="day-number" class:today={isToday(day)}>{format(day, 'd')}</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>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1256,40 +1243,6 @@
|
||||||
transition: background-color 150ms ease;
|
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 {
|
.day-name {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: hsl(var(--color-muted-foreground));
|
color: hsl(var(--color-muted-foreground));
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
import { viewStore } from '$lib/stores/view.svelte';
|
import { viewStore } from '$lib/stores/view.svelte';
|
||||||
import { eventsStore } from '$lib/stores/events.svelte';
|
import { eventsStore } from '$lib/stores/events.svelte';
|
||||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||||
import { heatmapStore, type HeatmapLevel } from '$lib/stores/heatmap.svelte';
|
|
||||||
import {
|
import {
|
||||||
format,
|
format,
|
||||||
startOfMonth,
|
startOfMonth,
|
||||||
|
|
@ -95,12 +94,6 @@
|
||||||
return eventCountsByDay.get(key) || 0;
|
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
|
// Event handlers
|
||||||
function handleDayClick(day: Date, e: MouseEvent) {
|
function handleDayClick(day: Date, e: MouseEvent) {
|
||||||
if (onQuickCreate) {
|
if (onQuickCreate) {
|
||||||
|
|
@ -183,18 +176,12 @@
|
||||||
<div class="days-grid" role="grid" aria-label={format(month, 'MMMM', { locale: de })}>
|
<div class="days-grid" role="grid" aria-label={format(month, 'MMMM', { locale: de })}>
|
||||||
{#each getMonthDays(month) as day}
|
{#each getMonthDays(month) as day}
|
||||||
{@const eventCount = getEventCount(day)}
|
{@const eventCount = getEventCount(day)}
|
||||||
{@const heatmapLevel = getHeatmapLevel(day)}
|
|
||||||
<button
|
<button
|
||||||
class="day"
|
class="day"
|
||||||
class:other-month={!isSameMonth(day, month)}
|
class:other-month={!isSameMonth(day, month)}
|
||||||
class:today={isToday(day)}
|
class:today={isToday(day)}
|
||||||
class:has-events={eventCount > 0 && !heatmapStore.enabled}
|
class:has-events={eventCount > 0}
|
||||||
class:has-many-events={eventCount > 3 && !heatmapStore.enabled}
|
class:has-many-events={eventCount > 3}
|
||||||
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"
|
role="gridcell"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
aria-label="{format(day, 'd. MMMM', { locale: de })}{eventCount > 0
|
aria-label="{format(day, 'd. MMMM', { locale: de })}{eventCount > 0
|
||||||
|
|
@ -343,61 +330,6 @@
|
||||||
border-radius: 2px;
|
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 */
|
||||||
.context-menu {
|
.context-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
|
|
@ -32,12 +32,6 @@ const CALENDAR_SHORTCUTS: ShortcutCategory[] = [
|
||||||
{
|
{
|
||||||
keys: ['Cmd', '3'],
|
keys: ['Cmd', '3'],
|
||||||
altKeys: ['Ctrl', '3'],
|
altKeys: ['Ctrl', '3'],
|
||||||
description: 'Statistiken öffnen',
|
|
||||||
category: 'navigation',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
keys: ['Cmd', '4'],
|
|
||||||
altKeys: ['Ctrl', '4'],
|
|
||||||
description: 'Einstellungen öffnen',
|
description: 'Einstellungen öffnen',
|
||||||
category: 'navigation',
|
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 TagStrip from '$lib/components/calendar/TagStrip.svelte';
|
||||||
import EventContextMenu from '$lib/components/event/EventContextMenu.svelte';
|
import EventContextMenu from '$lib/components/event/EventContextMenu.svelte';
|
||||||
import ViewModePillContextMenu from '$lib/components/calendar/ViewModePillContextMenu.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 SettingsModal from '$lib/components/settings/SettingsModal.svelte';
|
||||||
import AuthGateModal from '$lib/components/AuthGateModal.svelte';
|
import AuthGateModal from '$lib/components/AuthGateModal.svelte';
|
||||||
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
|
||||||
import { sessionEventsStore } from '$lib/stores/session-events.svelte';
|
import { sessionEventsStore } from '$lib/stores/session-events.svelte';
|
||||||
import { GuestWelcomeModal, shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
|
import { GuestWelcomeModal, shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
|
||||||
import type { CalendarViewType } from '@calendar/shared';
|
import type { CalendarViewType } from '@calendar/shared';
|
||||||
|
|
@ -278,7 +276,6 @@
|
||||||
|
|
||||||
// Base navigation items for Calendar (without Kalender/Aufgaben - handled by tab group)
|
// Base navigation items for Calendar (without Kalender/Aufgaben - handled by tab group)
|
||||||
// Note: Tags uses onClick to toggle TagStrip visibility instead of navigating
|
// 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[]>([
|
let baseNavItems = $derived<PillNavItem[]>([
|
||||||
{
|
{
|
||||||
href: '/tags',
|
href: '/tags',
|
||||||
|
|
@ -287,13 +284,6 @@
|
||||||
onClick: handleTagsToggle,
|
onClick: handleTagsToggle,
|
||||||
active: isTagStripVisible,
|
active: isTagStripVisible,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
href: '/',
|
|
||||||
label: 'Statistiken',
|
|
||||||
icon: 'flame',
|
|
||||||
onClick: () => heatmapStore.toggle(),
|
|
||||||
active: heatmapStore.enabled,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
href: '/',
|
href: '/',
|
||||||
label: 'Einstellungen',
|
label: 'Einstellungen',
|
||||||
|
|
@ -831,9 +821,6 @@
|
||||||
<!-- InputBar Help Modal -->
|
<!-- InputBar Help Modal -->
|
||||||
<InputBarHelpModal open={helpModalOpen} onClose={handleCloseHelpModal} mode={helpModalMode} />
|
<InputBarHelpModal open={helpModalOpen} onClose={handleCloseHelpModal} mode={helpModalMode} />
|
||||||
|
|
||||||
<!-- Stats Overlay (shown when heatmap is enabled) -->
|
|
||||||
<StatsOverlay />
|
|
||||||
|
|
||||||
<!-- Settings Modal -->
|
<!-- Settings Modal -->
|
||||||
<SettingsModal
|
<SettingsModal
|
||||||
visible={showSettingsModal}
|
visible={showSettingsModal}
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,9 @@
|
||||||
import { calendarsStore } from '$lib/stores/calendars.svelte';
|
import { calendarsStore } from '$lib/stores/calendars.svelte';
|
||||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||||
import { viewModeStore } from '$lib/stores/view-mode.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 ViewCarousel from '$lib/components/calendar/ViewCarousel.svelte';
|
||||||
import NetworkView from '$lib/components/calendar/NetworkView.svelte';
|
import NetworkView from '$lib/components/calendar/NetworkView.svelte';
|
||||||
import TodoSidebarSection from '$lib/components/calendar/TodoSidebarSection.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 QuickEventOverlay from '$lib/components/event/QuickEventOverlay.svelte';
|
||||||
import { CalendarViewSkeleton } from '$lib/components/skeletons';
|
import { CalendarViewSkeleton } from '$lib/components/skeletons';
|
||||||
import type { CalendarEvent } from '@calendar/shared';
|
import type { CalendarEvent } from '@calendar/shared';
|
||||||
|
|
@ -130,11 +128,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{#if heatmapStore.enabled}
|
<TodoSidebarSection maxItems={5} />
|
||||||
<StatsSidebarSection />
|
|
||||||
{:else}
|
|
||||||
<TodoSidebarSection maxItems={5} />
|
|
||||||
{/if}
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Main Calendar Area -->
|
<!-- Main Calendar Area -->
|
||||||
|
|
@ -153,11 +147,7 @@
|
||||||
class="calendar-sidebar-mobile mobile-only"
|
class="calendar-sidebar-mobile mobile-only"
|
||||||
class:collapsed={settingsStore.sidebarCollapsed}
|
class:collapsed={settingsStore.sidebarCollapsed}
|
||||||
>
|
>
|
||||||
{#if heatmapStore.enabled}
|
<TodoSidebarSection maxItems={3} />
|
||||||
<StatsSidebarSection />
|
|
||||||
{:else}
|
|
||||||
<TodoSidebarSection maxItems={3} />
|
|
||||||
{/if}
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Quick Event Overlay (for both create and edit) -->
|
<!-- Quick Event Overlay (for both create and edit) -->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue