@redvars/peacock 3.5.1 → 3.6.1

package/src/calendar/event-manager.ts

@@ -0,0 +1,117 @@
+import { CalendarEvent } from './calendar-event.js';
+
+export class ColumnEvent extends CalendarEvent {
+  width: number = 1;
+
+  constructor(event: CalendarEvent) {
+    super(event.start, event.end, event.title, event.color, event.data);
+  }
+}
+
+export class EventManager {
+  #events: ColumnEvent[] = [];
+  columns: ColumnEvent[][] = [];
+
+  addEvents(events: CalendarEvent[]): void {
+    events.forEach(event => {
+      this.#events.push(new ColumnEvent(event));
+    });
+  }
+
+  process(): void {
+    this.columns = [];
+    let events = this.#events.sort((a, b) => {
+      return a.start.valueOf() - b.start.valueOf() || b.length() - a.length();
+    });
+
+    let oldLength: number | null = null;
+    /* Bucketing: group non-overlapping events into columns */
+    while (events.length) {
+      if (oldLength === events.length) {
+        throw new Error(
+          'Events not processed in previous run, breaking infinite loop',
+        );
+      }
+      oldLength = events.length;
+
+      const column: ColumnEvent[] = [];
+      for (let i = 0; i < events.length; i++) {
+        if (i === 0) {
+          column.push(events[i]);
+        } else if (events[i].start.valueOf() >= column[column.length - 1].end.valueOf()) {
+          column.push(events[i]);
+        }
+      }
+      this.columns.push(column);
+      events = events.filter(e => !column.find(ce => ce.gid === e.gid));
+    }
+
+    /* Calculate widths for events that span multiple columns */
+    for (let i = 0; i < this.columns.length - 1; i++) {
+      this.columns[i].forEach(event => {
+        for (let j = i + 1; j < this.columns.length; j++) {
+          if (this.columns[j].find(colEvent => event.isOverlapping(colEvent))) {
+            break;
+          }
+          event.width++;
+        }
+      });
+    }
+  }
+}
+
+export class MonthEventManager {
+  #events: ColumnEvent[] = [];
+  columns: ColumnEvent[][] = [];
+
+  addEvents(events: CalendarEvent[]): void {
+    events.forEach(event => {
+      this.#events.push(new ColumnEvent(event));
+    });
+  }
+
+  process(): void {
+    this.columns = [];
+    let events = this.#events.sort((a, b) => {
+      return a.start.valueOf() - b.start.valueOf() || b.length() - a.length();
+    });
+
+    let oldLength: number | null = null;
+    while (events.length) {
+      if (oldLength === events.length) {
+        throw new Error(
+          'Events not processed in previous run, breaking infinite loop',
+        );
+      }
+      oldLength = events.length;
+
+      const column: ColumnEvent[] = [];
+      for (let i = 0; i < events.length; i++) {
+        if (i === 0) {
+          column.push(events[i]);
+        } else {
+          const lastEnd = new Date(column[column.length - 1].end);
+          lastEnd.setHours(23, 59, 59, 999);
+          const nextStart = new Date(events[i].start);
+          nextStart.setHours(0, 0, 0, 0);
+          if (nextStart.valueOf() > lastEnd.valueOf()) {
+            column.push(events[i]);
+          }
+        }
+      }
+      this.columns.push(column);
+      events = events.filter(e => !column.find(ce => ce.gid === e.gid));
+    }
+
+    for (let i = 0; i < this.columns.length - 1; i++) {
+      this.columns[i].forEach(event => {
+        for (let j = i + 1; j < this.columns.length; j++) {
+          if (this.columns[j].find(colEvent => event.isOverlapping(colEvent))) {
+            break;
+          }
+          event.width++;
+        }
+      });
+    }
+  }
+}

package/src/calendar/index.ts

@@ -0,0 +1,4 @@
+export { Calendar } from './calendar.js';
+export { CalendarColumnView } from './calendar-column-view.js';
+export { CalendarMonthView } from './calendar-month-view.js';
+export type { CalendarViewType, EventType } from './types.js';

package/src/calendar/types.ts

@@ -0,0 +1,14 @@
+export type CalendarViewType = {
+  label: string;
+  value: string;
+  type: 'column' | 'month';
+  days?: number;
+};
+
+export type EventType = {
+  start: Date;
+  end: Date;
+  title: string;
+  color?: string;
+  [key: string]: any;
+};

package/src/calendar/utils.ts

@@ -0,0 +1,180 @@
+/**
+ * Pure date utility functions (no external dependencies).
+ */
+
+export function startOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+export function endOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(23, 59, 59, 999);
+  return d;
+}
+
+export function addDays(date: Date, days: number): Date {
+  const d = new Date(date);
+  d.setDate(d.getDate() + days);
+  return d;
+}
+
+export function addMonths(date: Date, months: number): Date {
+  const d = new Date(date);
+  d.setMonth(d.getMonth() + months);
+  return d;
+}
+
+export function addHours(date: Date, hours: number): Date {
+  const d = new Date(date);
+  d.setHours(d.getHours() + hours);
+  return d;
+}
+
+export function differenceInDays(dateA: Date, dateB: Date): number {
+  const a = startOfDay(dateA);
+  const b = startOfDay(dateB);
+  return Math.round((a.valueOf() - b.valueOf()) / 86400000);
+}
+
+export function startOfWeek(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+): Date {
+  const d = startOfDay(date);
+  const day = d.getDay();
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+  d.setDate(d.getDate() - diff);
+  return d;
+}
+
+export function endOfWeek(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+): Date {
+  const d = startOfWeek(date, weekStartsOn);
+  d.setDate(d.getDate() + 6);
+  return endOfDay(d);
+}
+
+export function startOfMonth(date: Date): Date {
+  const d = new Date(date);
+  d.setDate(1);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+export function endOfMonth(date: Date): Date {
+  const d = new Date(date);
+  d.setMonth(d.getMonth() + 1, 0);
+  d.setHours(23, 59, 59, 999);
+  return d;
+}
+
+export function calculateMonthRange(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+) {
+  const sd = startOfWeek(startOfMonth(date), weekStartsOn);
+  const ed = endOfWeek(endOfMonth(date), weekStartsOn);
+  return { startDate: sd, endDate: ed, totalDays: 42 };
+}
+
+export function calculateWeekRange(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+) {
+  const sd = startOfWeek(date, weekStartsOn);
+  const ed = endOfWeek(date, weekStartsOn);
+  return { startDate: sd, endDate: ed, totalDays: 7 };
+}
+
+export function calculateDateRange(
+  view: string,
+  contextDate: Date,
+  days: number,
+) {
+  if (view === 'week') {
+    return calculateWeekRange(contextDate, 1);
+  }
+  return {
+    startDate: startOfDay(contextDate),
+    endDate: endOfDay(addDays(contextDate, days - 1)),
+    totalDays: days,
+  };
+}
+
+export const LONG_EVENT_PADDING = 0.25;
+
+const DAY_NAMES_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const DAY_NAMES_LONG = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export function formatDate(date: Date, pattern: string): string {
+  const day = date.getDate();
+  const dayOfWeek = date.getDay();
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  switch (pattern) {
+    case 'MMMM d, yyyy':
+      return `${MONTH_NAMES[month]} ${day}, ${year}`;
+    case 'EEEE':
+      return DAY_NAMES_LONG[dayOfWeek];
+    case 'E':
+      return DAY_NAMES_SHORT[dayOfWeek];
+    case 'd':
+      return `${day}`;
+    case 'dd':
+      return day < 10 ? `0${day}` : `${day}`;
+    case 'hh a': {
+      const h = hours % 12 || 12;
+      const ampm = hours < 12 ? 'AM' : 'PM';
+      return `${h < 10 ? '0' : ''}${h} ${ampm}`;
+    }
+    case 'hh:mm a': {
+      const h = hours % 12 || 12;
+      const ampm = hours < 12 ? 'AM' : 'PM';
+      return `${h < 10 ? '0' : ''}${h}:${minutes < 10 ? '0' : ''}${minutes} ${ampm}`;
+    }
+    case 'dd-MM-yyyy':
+      return `${day < 10 ? '0' : ''}${day}-${month + 1 < 10 ? '0' : ''}${month + 1}-${year}`;
+    default:
+      return date.toLocaleDateString();
+  }
+}
+
+export function getTimePercent(date: Date, forDay?: Date): number {
+  const day = forDay || date;
+  const sd = startOfDay(day);
+  const ed = endOfDay(day);
+  const percent =
+    ((date.valueOf() - sd.valueOf()) / (ed.valueOf() - sd.valueOf())) * 100;
+  if (percent < 0) return 0;
+  if (percent > 100) return 100;
+  return percent;
+}

package/src/canvas/canvas.scss

@@ -0,0 +1,60 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  --canvas-background: var(--color-surface-container-low);
+  --canvas-dot-color: var(--color-outline-variant);
+  --canvas-line-color: var(--color-on-surface);
+  --canvas-hover-color: var(--color-primary);
+  --canvas-arrow-color: var(--color-on-surface);
+}
+
+.canvas-wrapper {
+  background: var(--canvas-background);
+  border-radius: var(--shape-corner-medium);
+}
+
+#canvas-background circle {
+  fill: var(--canvas-dot-color);
+}
+
+#endarrow polyline {
+  fill: none;
+  stroke: var(--canvas-arrow-color);
+  vector-effect: non-scaling-stroke;
+  stroke-width: 2;
+}
+
+.line {
+  &.no-color {
+    stroke: var(--canvas-line-color);
+  }
+
+  &.variant-dashed {
+    stroke-dasharray: 6 6;
+  }
+
+  &.variant-animated-dashed {
+    animation: canvas-dash-flow 600ms linear infinite;
+  }
+}
+
+.clickable {
+  cursor: pointer;
+
+  &:hover .line {
+    stroke: var(--canvas-hover-color);
+  }
+}
+
+.line.clickable:hover {
+  stroke: var(--canvas-hover-color);
+}
+
+@keyframes canvas-dash-flow {
+  to {
+    stroke-dashoffset: -12;
+  }
+}