sprintify-ui 0.2.10 → 0.2.12

package/src/services/gantt/timescale.ts

@@ -0,0 +1,243 @@
+import { DateTime, DateTimeUnit } from "luxon";
+import { Group, Scale, Tick } from "./types";
+
+export class Timescale {
+
+    private minWidth: number;
+    private width: number;
+    private min: DateTime;
+    private max: DateTime;
+    private scale!: Scale;
+    private millisecondToPixel!: number;
+
+    constructor(minWidth: number, min: DateTime, max: DateTime) {
+        this.minWidth = minWidth;
+        this.width = minWidth;
+        this.min = min;
+        this.max = max;
+    }
+
+    public handle() {
+
+
+        // Scale
+
+        this.scale = this.getScale();
+
+        // Round min and max
+
+        this.min = this.min.startOf(this.scale.tick.step);
+        this.max = this.max.endOf(this.scale.tick.step);
+
+        // Number of ticks
+
+        const numberOfTicks = Math.ceil(this.max.diff(this.min, this.scale.tick.step).as(this.scale.tick.step));
+
+        // Find actual width
+        // If the width is less than the min width, use the min width to stretch the chart
+
+        const minWidth = numberOfTicks * this.scale.tick.size;
+
+        if (minWidth > this.minWidth) {
+            this.width = minWidth;
+        }
+
+        // millisecondToPixel coefficient
+
+        this.millisecondToPixel = this.getMillisecondToPixel();
+
+        // Groups
+
+        const groups = this.getGroups();
+
+        // Ticks
+
+        const ticks = this.getTicks();
+
+        // Return
+
+        return {
+            groups,
+            ticks,
+            width: this.width,
+            millisecondToPixel: this.millisecondToPixel,
+            min: this.min,
+            max: this.max,
+        }
+    }
+
+
+    private getMillisecondToPixel(): number {
+        const duration = this.getDiffFromMin(this.max);
+
+        // Millisecond to pixel coefficient
+
+        const millisecondToPixel = this.width / duration;
+
+        return millisecondToPixel;
+    }
+
+    private getGroups(): Group[] {
+        let groups = [] as Group[];
+
+        let current = this.min.startOf(this.scale.group.step);
+        const max = this.max.endOf(this.scale.group.step);
+
+        while (current <= max) {
+
+            const x = this.getDiffFromMin(current) * this.millisecondToPixel;
+
+            const millisecondsWidth = this.diffInMilliseconds(current.endOf(this.scale.group.step), current.startOf(this.scale.group.step));
+            const width = millisecondsWidth * this.millisecondToPixel;
+
+            const label = current.toFormat(this.scale.group.format);
+
+            const labelX = x + (width / 2);
+            const labelTextAnchor = "middle";
+
+            const group = {
+                date: current,
+                x,
+                width,
+                label,
+                labelX,
+                labelTextAnchor,
+            } as Group;
+
+            groups.push(group);
+
+            current = current.plus({ [this.scale.group.step]: 1 });
+        }
+
+        groups = this.mutateGroupsToKeepOneVisible(groups);
+
+        return groups;
+    }
+
+    private getTicks(): Tick[] {
+        const ticks = [] as Tick[];
+
+        let current = this.min.startOf(this.scale.group.step).startOf(this.scale.tick.step);
+        const max = this.max.endOf(this.scale.group.step).endOf(this.scale.tick.step);
+
+        while (current < max) {
+
+            const x = this.getDiffFromMin(current) * this.millisecondToPixel;
+
+            const millisecondsWidth = this.diffInMilliseconds(current.endOf(this.scale.tick.step), current.startOf(this.scale.tick.step));
+            const width = millisecondsWidth * this.millisecondToPixel;
+
+            const label = current.toFormat(this.scale.tick.format);
+
+            const tick = {
+                date: current,
+                x,
+                width,
+                label,
+                align: this.scale.tick.align,
+            } as Tick;
+
+            ticks.push(tick);
+
+            current = current.plus({ [this.scale.tick.step]: 1 });
+        }
+
+        return ticks;
+    }
+
+
+    private getDiffFromMin(date: DateTime): number {
+        return this.diffInMilliseconds(date, this.min);
+    }
+
+    private diffInMilliseconds(date1: DateTime, date2: DateTime): number {
+        return date1.diff(date2, "milliseconds").milliseconds;
+    }
+
+    private mutateGroupsToKeepOneVisible(groups: Group[]): Group[] {
+
+        const groupLabelWidth = 100;
+
+        const lastGroup = groups[groups.length - 1] ?? null;
+
+        if (
+            lastGroup &&
+            lastGroup.labelX + groupLabelWidth > this.width && // Is not visible
+            lastGroup.x + groupLabelWidth < this.width  // Completely fits
+        ) {
+            lastGroup.labelX = this.width - 5;
+            lastGroup.labelTextAnchor = "end";
+        }
+
+        return groups;
+    }
+
+    private getScale(): Scale {
+
+        const scaleMonth = {
+            tick: {
+                format: "LLLL",
+                step: 'month' as DateTimeUnit,
+                size: 100,
+                align: "middle",
+            },
+            group: {
+                format: "yyyy",
+                step: "year" as DateTimeUnit,
+            }
+        }
+
+        const scaleWeek = {
+            tick: {
+                format: "dd",
+                step: 'week' as DateTimeUnit,
+                size: 60,
+                align: "start",
+            },
+            group: {
+                format: "LLLL yyyy",
+                step: "month" as DateTimeUnit,
+            }
+        }
+
+        const scaleDay = {
+            tick: {
+                format: "dd",
+                step: 'day' as DateTimeUnit,
+                size: 20,
+                align: "middle",
+            },
+            group: {
+                format: "LLLL yyyy",
+                step: "month" as DateTimeUnit,
+            }
+        }
+
+        const scaleHour = {
+            tick: {
+                format: "HH:mm",
+                step: 'hour' as DateTimeUnit,
+                size: 40,
+                align: "middle",
+            },
+            group: {
+                format: "yyyy-MM-dd",
+                step: "day" as DateTimeUnit,
+            }
+        }
+
+        if (this.max.diff(this.min, "months").months > 5) {
+            return scaleMonth;
+        }
+
+        if (this.max.diff(this.min, "months").months > 3) {
+            return scaleWeek;
+        }
+
+        if (this.max.diff(this.min, "days").days > 3) {
+            return scaleDay;
+        }
+
+        return scaleHour;
+    }
+}

package/src/services/gantt/types.ts

@@ -0,0 +1,75 @@
+import { DateTime, DateTimeUnit } from "luxon";
+
+export interface GanttItem {
+    id: number;
+    start: string;
+    end: string;
+    name: string;
+    meta?: Record<string, unknown>;
+    color: string;
+}
+
+export interface GanttRow {
+    id: number;
+    name: string;
+    meta?: Record<string, unknown>;
+    items: GanttItem[];
+}
+
+export interface GanttRowFormatted {
+    id: number;
+    name: string;
+    meta?: Record<string, unknown>;
+    items: GanttItemFormatted[];
+}
+
+export interface GanttItemFormatted {
+    id: number;
+    start: DateTime;
+    end: DateTime;
+    name: string;
+    meta?: Record<string, unknown>;
+    color: string;
+    milliseconds: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export interface FormatConfig {
+    rows: GanttRow[];
+    minWidth: number;
+    rowHeight: number;
+    rowPadding: number;
+}
+
+export interface Tick {
+    date: DateTime;
+    x: number;
+    width: number;
+    label: string;
+    align: "start" | "middle" | string;
+}
+
+export interface Group {
+    date: DateTime;
+    x: number;
+    width: number;
+    label: string;
+    labelX: number;
+    labelTextAnchor: "start" | "middle" | "end";
+}
+
+export interface Scale {
+    tick: {
+        step: DateTimeUnit;
+        format: string;
+        size: number;
+        align: "start" | "middle" | string;
+    };
+    group: {
+        step: DateTimeUnit;
+        format: string;
+    };
+}