mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 13:29:39 +02:00
feat(calendar): integrate network view into homepage with heatmap stats
- Add network view as "N" option in view switcher (like contacts app pattern) - Create view-mode store to switch between calendar/network modes - Move NetworkView from /network route to embedded component - Add heatmap mode with StatsOverlay for event density visualization - Extend network service to create connections by: - Shared tags (highest priority, variable strength) - Same calendar (strength 50%) - Same date (strength 40%) - Same location (strength 60%) - Fix network controller route prefix (was /api/v1/api/v1/network) - Remove separate /network and /statistics pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
484efccb45
commit
31f187b816
16 changed files with 950 additions and 401 deletions
|
|
@ -2,7 +2,7 @@ import { Controller, Get, UseGuards, Headers } from '@nestjs/common';
|
|||
import { JwtAuthGuard, CurrentUser, CurrentUserData } from '@manacore/shared-nestjs-auth';
|
||||
import { NetworkService } from './network.service';
|
||||
|
||||
@Controller('api/v1/network')
|
||||
@Controller('network')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
export class NetworkController {
|
||||
constructor(private readonly networkService: NetworkService) {}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export interface NetworkNode {
|
|||
export interface NetworkLink {
|
||||
source: string;
|
||||
target: string;
|
||||
type: 'tag';
|
||||
type: 'tag' | 'calendar' | 'date' | 'location';
|
||||
strength: number;
|
||||
sharedTags: string[];
|
||||
}
|
||||
|
|
@ -114,14 +114,8 @@ export class NetworkService {
|
|||
eventTagsMap.set(event.id, tags);
|
||||
}
|
||||
|
||||
// 5. Filter events that have at least one tag
|
||||
const eventsWithTagsList = eventsData.filter((e) => {
|
||||
const tags = eventTagsMap.get(e.event.id) || [];
|
||||
return tags.length > 0;
|
||||
});
|
||||
|
||||
// 6. Build nodes
|
||||
const nodes: NetworkNode[] = eventsWithTagsList.map(({ event }) => {
|
||||
// 5. Build nodes from ALL events (not just those with tags)
|
||||
const nodes: NetworkNode[] = eventsData.map(({ event }) => {
|
||||
const tags = eventTagsMap.get(event.id) || [];
|
||||
return {
|
||||
id: event.id,
|
||||
|
|
@ -134,41 +128,88 @@ export class NetworkService {
|
|||
};
|
||||
});
|
||||
|
||||
// 7. Build links based on shared tags
|
||||
// 6. Build links based on multiple criteria
|
||||
const links: NetworkLink[] = [];
|
||||
const connectionCounts = new Map<string, number>();
|
||||
const linkSet = new Set<string>(); // Track unique links to avoid duplicates
|
||||
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
for (let i = 0; i < eventsData.length; i++) {
|
||||
for (let j = i + 1; j < eventsData.length; j++) {
|
||||
const event1 = eventsData[i].event;
|
||||
const event2 = eventsData[j].event;
|
||||
const node1 = nodes[i];
|
||||
const node2 = nodes[j];
|
||||
const linkKey = `${event1.id}-${event2.id}`;
|
||||
|
||||
// Find shared tags
|
||||
const sharedTags = node1.tags
|
||||
.filter((t1) => node2.tags.some((t2) => t2.id === t1.id))
|
||||
.map((t) => t.name);
|
||||
// Skip if link already exists
|
||||
if (linkSet.has(linkKey)) continue;
|
||||
|
||||
if (sharedTags.length > 0) {
|
||||
// Calculate strength based on number of shared tags
|
||||
const maxTags = Math.max(node1.tags.length, node2.tags.length);
|
||||
const strength = Math.round((sharedTags.length / maxTags) * 100);
|
||||
let linked = false;
|
||||
let linkType: 'tag' | 'calendar' | 'date' | 'location' = 'tag';
|
||||
let strength = 0;
|
||||
const sharedTags: string[] = [];
|
||||
|
||||
// 6a. Check for shared tags (highest priority)
|
||||
const tags1 = eventTagsMap.get(event1.id) || [];
|
||||
const tags2 = eventTagsMap.get(event2.id) || [];
|
||||
const commonTags = tags1.filter((t1) => tags2.some((t2) => t2.id === t1.id));
|
||||
|
||||
if (commonTags.length > 0) {
|
||||
linked = true;
|
||||
linkType = 'tag';
|
||||
const maxTags = Math.max(tags1.length, tags2.length);
|
||||
strength = Math.round((commonTags.length / maxTags) * 100);
|
||||
sharedTags.push(...commonTags.map((t) => t.name));
|
||||
}
|
||||
|
||||
// 6b. Check for same calendar (if not already linked)
|
||||
if (!linked && event1.calendarId === event2.calendarId) {
|
||||
linked = true;
|
||||
linkType = 'calendar';
|
||||
strength = 50;
|
||||
}
|
||||
|
||||
// 6c. Check for same date (if not already linked)
|
||||
if (!linked) {
|
||||
const date1 = new Date(event1.startTime).toDateString();
|
||||
const date2 = new Date(event2.startTime).toDateString();
|
||||
if (date1 === date2) {
|
||||
linked = true;
|
||||
linkType = 'date';
|
||||
strength = 40;
|
||||
}
|
||||
}
|
||||
|
||||
// 6d. Check for same location (if not already linked and both have location)
|
||||
if (
|
||||
!linked &&
|
||||
event1.location &&
|
||||
event2.location &&
|
||||
event1.location.toLowerCase() === event2.location.toLowerCase()
|
||||
) {
|
||||
linked = true;
|
||||
linkType = 'location';
|
||||
strength = 60;
|
||||
}
|
||||
|
||||
if (linked) {
|
||||
links.push({
|
||||
source: node1.id,
|
||||
target: node2.id,
|
||||
type: 'tag',
|
||||
source: event1.id,
|
||||
target: event2.id,
|
||||
type: linkType,
|
||||
strength,
|
||||
sharedTags,
|
||||
});
|
||||
linkSet.add(linkKey);
|
||||
|
||||
// Update connection counts
|
||||
connectionCounts.set(node1.id, (connectionCounts.get(node1.id) || 0) + 1);
|
||||
connectionCounts.set(node2.id, (connectionCounts.get(node2.id) || 0) + 1);
|
||||
connectionCounts.set(event1.id, (connectionCounts.get(event1.id) || 0) + 1);
|
||||
connectionCounts.set(event2.id, (connectionCounts.get(event2.id) || 0) + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 8. Update connection counts in nodes
|
||||
// 7. Update connection counts in nodes
|
||||
for (const node of nodes) {
|
||||
node.connectionCount = connectionCounts.get(node.id) || 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export interface NetworkNode {
|
|||
export interface NetworkLink {
|
||||
source: string;
|
||||
target: string;
|
||||
type: 'tag';
|
||||
type: 'tag' | 'calendar' | 'date' | 'location';
|
||||
strength: number;
|
||||
sharedTags: string[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<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,
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
PillTimeRangeSelector,
|
||||
PillViewSwitcher,
|
||||
} from '@manacore/shared-ui';
|
||||
import { Flame } from 'lucide-svelte';
|
||||
import PillCalendarSelector from './PillCalendarSelector.svelte';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -78,6 +80,15 @@
|
|||
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,6 +7,7 @@
|
|||
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';
|
||||
|
|
@ -39,6 +40,9 @@
|
|||
// 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;
|
||||
|
|
@ -763,6 +767,11 @@
|
|||
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}
|
||||
|
|
@ -1018,6 +1027,47 @@
|
|||
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,6 +7,7 @@
|
|||
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';
|
||||
|
|
@ -297,11 +298,17 @@
|
|||
<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)}
|
||||
|
|
@ -311,9 +318,14 @@
|
|||
values: { date: format(day, 'EEEE, d. MMMM', { locale: de }) },
|
||||
})}
|
||||
>
|
||||
<span class="day-number" class:today={isToday(day)}>
|
||||
{format(day, 'd')}
|
||||
</span>
|
||||
<div class="day-header">
|
||||
<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 -->
|
||||
{#if todosStore.serviceAvailable}
|
||||
|
|
@ -473,6 +485,13 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.day-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -482,7 +501,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.day-number.today {
|
||||
|
|
@ -490,6 +508,48 @@
|
|||
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,6 +6,7 @@
|
|||
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,
|
||||
|
|
@ -836,11 +837,23 @@
|
|||
<div class="day-headers">
|
||||
<div class="time-gutter"></div>
|
||||
{#each days as day}
|
||||
<div class="day-header" class:today={isToday(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}
|
||||
>
|
||||
<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>
|
||||
|
|
@ -1198,6 +1211,7 @@
|
|||
padding: 0.5rem;
|
||||
border-left: 1px solid hsl(var(--color-border));
|
||||
min-width: 0;
|
||||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
.compact .day-header {
|
||||
|
|
@ -1208,6 +1222,40 @@
|
|||
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));
|
||||
|
|
|
|||
|
|
@ -10,12 +10,10 @@
|
|||
let graphContainer: HTMLDivElement;
|
||||
|
||||
function handleNodeClick(node: SimulationNode) {
|
||||
// Select node (highlight connections)
|
||||
networkStore.selectNode(node.id);
|
||||
}
|
||||
|
||||
function handleNodeDoubleClick(node: SimulationNode) {
|
||||
// Navigate to event detail page
|
||||
goto(`/event/${node.id}`);
|
||||
}
|
||||
|
||||
|
|
@ -95,11 +93,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Netzwerk - Kalender</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="network-page">
|
||||
<div class="network-view">
|
||||
<!-- Controls (floating) -->
|
||||
<div class="controls-wrapper">
|
||||
<NetworkControls
|
||||
|
|
@ -175,7 +169,7 @@
|
|||
<button
|
||||
class="close-btn"
|
||||
onclick={() => networkStore.selectNode(null)}
|
||||
aria-label="Schließen"
|
||||
aria-label="Schlie\u00dfen"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
|
|
@ -213,17 +207,21 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.network-page {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
.network-view {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: hsl(var(--color-background));
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Floating Controls */
|
||||
.controls-wrapper {
|
||||
position: absolute;
|
||||
top: 5rem; /* Below the nav */
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 10;
|
||||
max-width: calc(100% - 2rem);
|
||||
|
|
@ -232,7 +230,7 @@
|
|||
/* Error Banner */
|
||||
.error-banner {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
top: 1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
|
|
@ -247,7 +245,7 @@
|
|||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Graph Container - Full screen */
|
||||
/* Graph Container - Full size within parent */
|
||||
.graph-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
|
@ -284,8 +282,8 @@
|
|||
|
||||
/* Info Panel */
|
||||
.info-panel {
|
||||
position: fixed;
|
||||
top: 5rem;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
width: 320px;
|
||||
|
|
@ -392,7 +390,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
max-height: 50vh;
|
||||
max-height: 50%;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
animation: slideInUp 0.2s ease-out;
|
||||
}
|
||||
|
|
@ -411,8 +409,7 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
.controls-wrapper {
|
||||
top: 6rem;
|
||||
width: calc(100% - 1rem);
|
||||
width: calc(100% - 2rem);
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<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 -->
|
||||
{#if heatmapStore.enabled}
|
||||
<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>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
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';
|
||||
|
|
@ -886,9 +887,21 @@
|
|||
<div class="day-headers">
|
||||
<div class="time-gutter"></div>
|
||||
{#each days as day}
|
||||
<div class="day-header" class:today={isToday(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}
|
||||
>
|
||||
<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>
|
||||
|
|
@ -1240,6 +1253,41 @@
|
|||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-left: 1px solid hsl(var(--color-border));
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
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,
|
||||
|
|
@ -94,6 +95,12 @@
|
|||
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) {
|
||||
|
|
|
|||
190
apps/calendar/apps/web/src/lib/stores/heatmap.svelte.ts
Normal file
190
apps/calendar/apps/web/src/lib/stores/heatmap.svelte.ts
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
/**
|
||||
* 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`;
|
||||
}
|
||||
},
|
||||
};
|
||||
76
apps/calendar/apps/web/src/lib/stores/view-mode.svelte.ts
Normal file
76
apps/calendar/apps/web/src/lib/stores/view-mode.svelte.ts
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* View Mode Store - Manages app view mode (calendar vs network)
|
||||
* Similar pattern to Contacts app view-mode store
|
||||
*/
|
||||
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
export type AppViewMode = 'calendar' | 'network';
|
||||
|
||||
const STORAGE_KEY = 'calendar-app-view-mode';
|
||||
|
||||
// Valid view modes
|
||||
const VALID_MODES: AppViewMode[] = ['calendar', 'network'];
|
||||
|
||||
function isValidMode(mode: string | null): mode is AppViewMode {
|
||||
return mode !== null && VALID_MODES.includes(mode as AppViewMode);
|
||||
}
|
||||
|
||||
// Get initial mode from sessionStorage or default to 'calendar'
|
||||
function getInitialMode(): AppViewMode {
|
||||
if (!browser) return 'calendar';
|
||||
|
||||
const sessionMode = sessionStorage.getItem(STORAGE_KEY);
|
||||
if (isValidMode(sessionMode)) {
|
||||
return sessionMode;
|
||||
}
|
||||
|
||||
return 'calendar';
|
||||
}
|
||||
|
||||
let mode = $state<AppViewMode>(getInitialMode());
|
||||
|
||||
export const viewModeStore = {
|
||||
get mode() {
|
||||
return mode;
|
||||
},
|
||||
|
||||
setMode(newMode: AppViewMode) {
|
||||
mode = newMode;
|
||||
if (browser) {
|
||||
sessionStorage.setItem(STORAGE_KEY, newMode);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle between calendar and network mode
|
||||
*/
|
||||
toggle() {
|
||||
const newMode = mode === 'calendar' ? 'network' : 'calendar';
|
||||
this.setMode(newMode);
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset to default view (calendar)
|
||||
*/
|
||||
resetToDefault() {
|
||||
mode = 'calendar';
|
||||
if (browser) {
|
||||
sessionStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize mode from sessionStorage (call on app load)
|
||||
*/
|
||||
initialize() {
|
||||
if (!browser) return;
|
||||
|
||||
const sessionMode = sessionStorage.getItem(STORAGE_KEY);
|
||||
if (isValidMode(sessionMode)) {
|
||||
mode = sessionMode;
|
||||
} else {
|
||||
mode = 'calendar';
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -44,6 +44,7 @@
|
|||
isNavCollapsed as collapsedStore,
|
||||
isToolbarCollapsed as toolbarCollapsedStore,
|
||||
} from '$lib/stores/navigation';
|
||||
import { viewModeStore } from '$lib/stores/view-mode.svelte';
|
||||
import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
|
||||
import { getPillAppItems } from '@manacore/shared-branding';
|
||||
import { setLocale, supportedLocales } from '$lib/i18n';
|
||||
|
|
@ -63,7 +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 { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
|
||||
import { heatmapStore } from '$lib/stores/heatmap.svelte';
|
||||
import type { CalendarViewType } from '@calendar/shared';
|
||||
|
||||
// App switcher items
|
||||
|
|
@ -268,6 +271,7 @@
|
|||
|
||||
// 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',
|
||||
|
|
@ -276,8 +280,13 @@
|
|||
onClick: handleTagsToggle,
|
||||
active: isTagStripVisible,
|
||||
},
|
||||
{ href: '/statistics', label: 'Statistiken', icon: 'bar-chart-3' },
|
||||
{ href: '/network', label: 'Netzwerk', icon: 'share-2' },
|
||||
{
|
||||
href: '/',
|
||||
label: 'Statistiken',
|
||||
icon: 'flame',
|
||||
onClick: () => heatmapStore.toggle(),
|
||||
active: heatmapStore.enabled,
|
||||
},
|
||||
{ href: '/settings', label: 'Einstellungen', icon: 'settings' },
|
||||
{ href: '/feedback', label: 'Feedback', icon: 'chat' },
|
||||
]);
|
||||
|
|
@ -355,16 +364,37 @@
|
|||
return viewLabels[view];
|
||||
}
|
||||
|
||||
// Handle view/mode change - switches between calendar views and network mode
|
||||
function handleViewModeChange(id: string) {
|
||||
if (id === 'network') {
|
||||
viewModeStore.setMode('network');
|
||||
} else {
|
||||
// Switch to calendar mode and set the view type
|
||||
viewModeStore.setMode('calendar');
|
||||
viewStore.setViewType(id as CalendarViewType);
|
||||
}
|
||||
}
|
||||
|
||||
// Current view value - shows 'network' when in network mode, otherwise the calendar view type
|
||||
let currentViewValue = $derived(
|
||||
viewModeStore.mode === 'network' ? 'network' : viewStore.viewType
|
||||
);
|
||||
|
||||
// View switcher tab group (only shown on calendar main page)
|
||||
// Includes calendar views + network option
|
||||
let viewSwitcherTabGroup = $derived<PillTabGroupConfig>({
|
||||
type: 'tabs',
|
||||
options: enabledViews.map((view) => ({
|
||||
id: view,
|
||||
label: getViewLabel(view),
|
||||
title: view === 'custom' ? `${settingsStore.customDayCount}-Tage-Ansicht` : viewTitles[view],
|
||||
})),
|
||||
value: viewStore.viewType,
|
||||
onChange: (id) => viewStore.setViewType(id as CalendarViewType),
|
||||
options: [
|
||||
...enabledViews.map((view) => ({
|
||||
id: view,
|
||||
label: getViewLabel(view),
|
||||
title:
|
||||
view === 'custom' ? `${settingsStore.customDayCount}-Tage-Ansicht` : viewTitles[view],
|
||||
})),
|
||||
{ id: 'network', label: 'N', title: 'Netzwerk-Ansicht' },
|
||||
],
|
||||
value: currentViewValue,
|
||||
onChange: handleViewModeChange,
|
||||
onContextMenu: handleViewContextMenu,
|
||||
});
|
||||
|
||||
|
|
@ -726,6 +756,9 @@
|
|||
<!-- InputBar Help Modal -->
|
||||
<InputBarHelpModal open={helpModalOpen} onClose={handleCloseHelpModal} mode={helpModalMode} />
|
||||
|
||||
<!-- Stats Overlay (shown when heatmap is enabled) -->
|
||||
<StatsOverlay />
|
||||
|
||||
<style>
|
||||
.layout-container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
import { calendarsStore } from '$lib/stores/calendars.svelte';
|
||||
import { authStore } from '$lib/stores/auth.svelte';
|
||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||
import { viewModeStore } from '$lib/stores/view-mode.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 QuickEventOverlay from '$lib/components/event/QuickEventOverlay.svelte';
|
||||
import { CalendarViewSkeleton } from '$lib/components/skeletons';
|
||||
|
|
@ -97,63 +99,79 @@
|
|||
<title>{$_('app.name')}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="calendar-layout">
|
||||
<!-- Desktop: Left Sidebar -->
|
||||
<aside class="calendar-sidebar desktop-only" class:collapsed={settingsStore.sidebarCollapsed}>
|
||||
<!-- Collapse button at top -->
|
||||
<button
|
||||
class="sidebar-collapse-btn"
|
||||
onclick={() => settingsStore.toggleSidebar()}
|
||||
title={$_('calendar.hideSidebar')}
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<TodoSidebarSection maxItems={5} />
|
||||
</aside>
|
||||
|
||||
<!-- Main Calendar Area -->
|
||||
<div class="calendar-main" class:expanded={settingsStore.sidebarCollapsed}>
|
||||
<div class="calendar-content">
|
||||
{#if !initialized}
|
||||
<CalendarViewSkeleton />
|
||||
{:else}
|
||||
<ViewCarousel onQuickCreate={handleQuickCreate} onEventClick={handleEventClick} />
|
||||
{/if}
|
||||
</div>
|
||||
{#if viewModeStore.mode === 'network'}
|
||||
<!-- Network View Mode -->
|
||||
<div class="network-layout">
|
||||
<NetworkView />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Calendar View Mode -->
|
||||
<div class="calendar-layout">
|
||||
<!-- Desktop: Left Sidebar -->
|
||||
<aside class="calendar-sidebar desktop-only" class:collapsed={settingsStore.sidebarCollapsed}>
|
||||
<!-- Collapse button at top -->
|
||||
<button
|
||||
class="sidebar-collapse-btn"
|
||||
onclick={() => settingsStore.toggleSidebar()}
|
||||
title={$_('calendar.hideSidebar')}
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Mobile: Bottom Todo Section -->
|
||||
<aside
|
||||
class="calendar-sidebar-mobile mobile-only"
|
||||
class:collapsed={settingsStore.sidebarCollapsed}
|
||||
>
|
||||
<TodoSidebarSection maxItems={3} />
|
||||
</aside>
|
||||
<TodoSidebarSection maxItems={5} />
|
||||
</aside>
|
||||
|
||||
<!-- Quick Event Overlay (for both create and edit) -->
|
||||
{#if showQuickOverlay}
|
||||
{#key overlayKey}
|
||||
<QuickEventOverlay
|
||||
startTime={editingEvent ? undefined : quickCreateDate}
|
||||
event={editingEvent ?? undefined}
|
||||
onClose={handleQuickOverlayClose}
|
||||
onCreated={handleEventCreated}
|
||||
onUpdated={handleEventUpdated}
|
||||
onDeleted={handleEventDeleted}
|
||||
/>
|
||||
{/key}
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Main Calendar Area -->
|
||||
<div class="calendar-main" class:expanded={settingsStore.sidebarCollapsed}>
|
||||
<div class="calendar-content">
|
||||
{#if !initialized}
|
||||
<CalendarViewSkeleton />
|
||||
{:else}
|
||||
<ViewCarousel onQuickCreate={handleQuickCreate} onEventClick={handleEventClick} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: Bottom Todo Section -->
|
||||
<aside
|
||||
class="calendar-sidebar-mobile mobile-only"
|
||||
class:collapsed={settingsStore.sidebarCollapsed}
|
||||
>
|
||||
<TodoSidebarSection maxItems={3} />
|
||||
</aside>
|
||||
|
||||
<!-- Quick Event Overlay (for both create and edit) -->
|
||||
{#if showQuickOverlay}
|
||||
{#key overlayKey}
|
||||
<QuickEventOverlay
|
||||
startTime={editingEvent ? undefined : quickCreateDate}
|
||||
event={editingEvent ?? undefined}
|
||||
onClose={handleQuickOverlayClose}
|
||||
onCreated={handleEventCreated}
|
||||
onUpdated={handleEventUpdated}
|
||||
onDeleted={handleEventDeleted}
|
||||
/>
|
||||
{/key}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* Network Layout - Full height without sidebar */
|
||||
.network-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.calendar-layout {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -1,287 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { eventsStore } from '$lib/stores/events.svelte';
|
||||
import { calendarsStore } from '$lib/stores/calendars.svelte';
|
||||
import { calendarStatisticsStore } from '$lib/stores/statistics.svelte';
|
||||
import {
|
||||
StatsGrid,
|
||||
ActivityHeatmap,
|
||||
TrendLineChart,
|
||||
DonutChart,
|
||||
ProgressBars,
|
||||
StatisticsSkeleton,
|
||||
type StatItem,
|
||||
} from '@manacore/shared-ui';
|
||||
import {
|
||||
BarChart3,
|
||||
CalendarDays,
|
||||
Calendar,
|
||||
Clock,
|
||||
CalendarCheck,
|
||||
Hourglass,
|
||||
} from 'lucide-svelte';
|
||||
import { subDays, addDays } from 'date-fns';
|
||||
|
||||
let loading = $state(true);
|
||||
|
||||
// Update statistics when events change
|
||||
$effect(() => {
|
||||
calendarStatisticsStore.setEvents(eventsStore.events);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
calendarStatisticsStore.setCalendars(calendarsStore.calendars);
|
||||
});
|
||||
|
||||
// Build stats items for StatsGrid
|
||||
let statsItems = $derived<StatItem[]>([
|
||||
{
|
||||
id: 'eventsToday',
|
||||
label: 'Heute',
|
||||
value: calendarStatisticsStore.eventsToday,
|
||||
icon: CalendarDays,
|
||||
variant: 'success',
|
||||
},
|
||||
{
|
||||
id: 'eventsThisWeek',
|
||||
label: 'Diese Woche',
|
||||
value: calendarStatisticsStore.eventsThisWeek,
|
||||
icon: Calendar,
|
||||
variant: 'primary',
|
||||
},
|
||||
{
|
||||
id: 'upcoming',
|
||||
label: 'Anstehend (7 Tage)',
|
||||
value: calendarStatisticsStore.upcomingEvents,
|
||||
icon: CalendarCheck,
|
||||
variant: 'info',
|
||||
},
|
||||
{
|
||||
id: 'busyHours',
|
||||
label: 'Stunden/Woche',
|
||||
value: `${calendarStatisticsStore.busyHoursThisWeek}h`,
|
||||
icon: Clock,
|
||||
variant: 'neutral',
|
||||
},
|
||||
{
|
||||
id: 'calendars',
|
||||
label: 'Kalender',
|
||||
value: calendarStatisticsStore.totalCalendars,
|
||||
icon: Calendar,
|
||||
variant: 'accent',
|
||||
},
|
||||
{
|
||||
id: 'avgDuration',
|
||||
label: 'Ø Dauer (Min)',
|
||||
value: calendarStatisticsStore.averageEventDuration,
|
||||
icon: Hourglass,
|
||||
variant: 'info',
|
||||
},
|
||||
]);
|
||||
|
||||
onMount(async () => {
|
||||
// Fetch events for the last 6 months + next month for statistics
|
||||
const startDate = subDays(new Date(), 180);
|
||||
const endDate = addDays(new Date(), 30);
|
||||
|
||||
await Promise.all([
|
||||
eventsStore.fetchEvents(startDate, endDate),
|
||||
calendarsStore.fetchCalendars(),
|
||||
]);
|
||||
|
||||
loading = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Statistiken - Kalender</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="statistics-page">
|
||||
<header class="page-header">
|
||||
<div class="header-icon">
|
||||
<BarChart3 size={28} />
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<h1>Statistiken</h1>
|
||||
<p class="header-subtitle">Dein Kalender im Überblick</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<StatisticsSkeleton statCards={6} legendItems={3} />
|
||||
{:else}
|
||||
<!-- Quick Stats -->
|
||||
<section class="stats-section">
|
||||
<StatsGrid items={statsItems} columns={6} />
|
||||
</section>
|
||||
|
||||
<!-- Charts Grid -->
|
||||
<div class="charts-grid">
|
||||
<!-- Activity Heatmap -->
|
||||
<section class="chart-section heatmap-section">
|
||||
<ActivityHeatmap
|
||||
data={calendarStatisticsStore.activityHeatmap}
|
||||
itemName="Event"
|
||||
itemNamePlural="Events"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<!-- Weekly Trend + Status Donut -->
|
||||
<div class="charts-row">
|
||||
<section class="chart-section trend-section">
|
||||
<TrendLineChart
|
||||
data={calendarStatisticsStore.weeklyTrend}
|
||||
itemName="Event"
|
||||
itemNamePlural="Events"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="chart-section donut-section">
|
||||
<DonutChart
|
||||
data={calendarStatisticsStore.statusBreakdown}
|
||||
title="Status"
|
||||
centerLabel="Events"
|
||||
centerValue={calendarStatisticsStore.totalEvents}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Calendar Activity -->
|
||||
<section class="chart-section calendars-section">
|
||||
<ProgressBars
|
||||
data={calendarStatisticsStore.calendarActivity}
|
||||
title="Kalender-Aktivität"
|
||||
emptyMessage="Keine Kalender mit Events"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Additional Stats -->
|
||||
<div class="additional-stats">
|
||||
<div class="stat-card-small">
|
||||
<span class="stat-label">Ganztägige Events</span>
|
||||
<span class="stat-value">
|
||||
{calendarStatisticsStore.allDayRatio.allDay}
|
||||
<span class="stat-percentage"
|
||||
>({calendarStatisticsStore.allDayRatio.allDayPercentage}%)</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-card-small">
|
||||
<span class="stat-label">Wiederkehrende Events</span>
|
||||
<span class="stat-value">{calendarStatisticsStore.recurringEventsCount}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-card-small">
|
||||
<span class="stat-label">Events gesamt</span>
|
||||
<span class="stat-value">{calendarStatisticsStore.totalEvents}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.statistics-page {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: hsl(var(--primary) / 0.15);
|
||||
color: hsl(var(--primary));
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
margin: 0.25rem 0 0 0;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.charts-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.charts-row {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.additional-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card-small {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
:global(.dark) .stat-card-small {
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.stat-card-small .stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.stat-card-small .stat-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.stat-percentage {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue