sprintify-ui 0.2.9 → 0.2.11

package/src/components/BaseGantt.vue

@@ -0,0 +1,333 @@
+<template>
+  <div
+    class="flex"
+    :style="{
+      maxHeight: `${maxHeight}px`,
+    }"
+  >
+    <!-- Sidebar -->
+    <div
+      class="border-r border-slate-300 relative shrink-0"
+      :style="{ minWidth: `${SIDEBAR_WIDTH}px` }"
+    >
+      <!-- Top-left Corner-->
+      <div
+        :style="{
+          height: `${HEADER_HEIGHT}px`,
+          zIndex: 1
+        }"
+        class="border-b relative border-slate-300 bg-white"
+      />
+
+      <!-- Sidebar Items-->
+
+      <ul
+        class=""
+        :style="{
+          transform: `translateY(${scrollY}px)`,
+        }"
+      >
+        <li
+          v-for="row in rowsInternal"
+          :key="row.id"
+          class="border-b border-slate-300 flex last:border-none"
+          :style="{
+            height: `${props.rowHeight}px`,
+          }"
+        >
+          <slot
+            name="sidebarItem"
+            :row="row"
+          >
+            <div class="px-2 flex items-center">
+              <p class="font-semibold text-sm">
+                {{ row.name }}
+              </p>
+            </div>
+          </slot>
+        </li>
+      </ul>
+    </div> 
+    
+    <!-- Content -->
+
+    <div
+      ref="contentRef"
+      class="grow flex flex-col relative overflow-hidden"
+    >
+      <!-- Time Scale Header -->
+     
+      <div
+        class="bg-white border-b shrink-0 border-slate-300 w-full"
+        :style="{
+          zIndex: 1,
+          height: HEADER_HEIGHT + 'px',
+          width: `${width}px`,
+          transform: `translateX(${scrollX}px)`,
+        }"
+      >
+        <svg
+          :view-box="`${width} ${HEADER_HEIGHT}`"
+          :width="width"
+          :height="HEADER_HEIGHT"
+        >
+          <g
+            v-for="group in groups"
+            :key="group.x"
+          >
+            <text
+              :x="group.labelX"
+              :y="15"
+              class="text-[12px] font-semibold text-slate-900"
+              fill="currentColor"
+              :text-anchor="group.labelTextAnchor"
+            >
+              {{ group.label }}
+            </text>
+            <line
+              :x1="group.x + group.width"
+              :x2="group.x + group.width"
+              :y1="0"
+              :y2="HEADER_HEIGHT"
+              :stroke="slate[300]"
+            ></line>
+          </g>
+
+          <g
+            v-for="tick in ticks"
+            :key="tick.x"
+            :transform="`translate(${tick.x}, 0)`"
+          >
+            <text
+              :x="tick.align == 'middle' ? tick.width / 2 : 0"
+              :y="33"
+              class="text-[11px] font-normal text-slate-600"
+              fill="currentColor"
+              text-anchor="middle"
+            >
+              {{ tick.label }}
+            </text>
+
+            <line
+              v-if="tick.align == 'middle'"
+              :x1="tick.width"
+              :x2="tick.width"
+              :y1="24"
+              :y2="HEADER_HEIGHT"
+              :stroke="slate[300]"
+            ></line>
+          </g>
+        </svg>
+      </div>
+
+      <div
+        v-if="currentGroup"
+        class="absolute top-0 left-0 inline-flex"
+        :style="{
+          zIndex: 1,
+        }"
+      >
+        <div class="text-xs font-semibold pt-[3px] bg-white px-2">
+          {{ currentGroup.label }}
+        </div>
+        <div class="bg-gradient-to-r from-white to-transparent w-20" />
+      </div>  
+
+      <!-- Gantt Items -->
+
+      <ul
+        ref="itemsRef"
+        class="relative overflow-scroll grow"
+      >
+        <li
+          v-for="row in rowsInternal"
+          :key="row.id"
+          class="border-b relative border-slate-300 last:border-none"
+          :style="{
+            height: `${props.rowHeight}px`,
+            width: `${width}px`,
+          }"
+        >
+          <button
+            v-for="item in row.items"
+            :key="item.id"
+            type="button"
+            class="absolute flex"
+            :style="{
+              transform: `translate(${item.x}px, ${item.y}px)`,
+              height: item.height + 'px',
+              width: item.width + 'px',
+            }"
+            :title="`${item.name} - ${item.start.toFormat('yyyy-MM-dd HH:mm:ss')} - ${item.end.toFormat('yyyy-MM-dd HH:mm:ss')}`"
+            @click="$emit('item:click', item)"
+          >
+            <slot
+              name="item"
+              :item="item"
+            >
+              <div
+                :style="{
+                  backgroundColor: item.color,
+                }"
+                class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
+              >
+                <p
+                  class="text-white text-xs font-medium px-2 py-1 truncate"
+                  style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
+                >
+                  {{ item.name }}
+                </p>
+              </div>
+            </slot>
+          </button>
+        </li>
+      </ul>
+
+      <!-- Vertical lines -->
+
+      <div
+        class="absolute top-0 left-0 pointer-events-none"
+        :style="{
+          width: `${width}px`,
+          height: height + 'px',
+          transform: `translateX(${scrollX}px)`,
+        }"
+      >
+        <svg
+          :view-box="`${width} ${HEADER_HEIGHT}`"
+          :width="width"
+          :height="height"
+        >
+          <g
+            v-for="group in groups"
+            :key="group.x"
+          >
+            <line
+              :x1="group.x"
+              :x2="group.x"
+              y1="0"
+              :y2="height"
+              stroke="black"
+              :opacity="0.2"
+            ></line>
+          </g>
+          <g
+            v-for="tick in ticks"
+            :key="tick.x"
+          >
+            <line
+              :x1="tick.x"
+              :x2="tick.x"
+              :y1="0"
+              :y2="height"
+              stroke="black"
+              :opacity="0.1"
+            ></line>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useElementSize, useScroll } from '@vueuse/core';
+import { Format } from '@/services/gantt/format';
+import { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick } from '@/services/gantt/types';
+import { debounce } from 'lodash';
+import { slate } from 'tailwindcss/colors';
+
+const props = withDefaults(defineProps<{
+  rows: GanttRow[],
+  rowHeight?: number,
+  rowPadding?: number,
+  maxHeight?: number,
+}>(), {
+  rowHeight: 40,
+  rowPadding: 4,
+  maxHeight: undefined,
+});
+
+defineEmits([
+  'item:click',
+]);
+
+// Config
+
+const SIDEBAR_WIDTH = 120;
+const HEADER_HEIGHT = 40;
+
+// Init
+
+const contentRef = ref<HTMLDivElement | null>(null);
+const contentSize = useElementSize(contentRef);
+
+const width = ref(800);
+const height = ref(100);
+
+const rowsInternal = ref<GanttRowFormatted[]>([]);
+const groups = ref<Group[]>([]);
+const ticks = ref<Tick[]>([]);
+
+const config = computed<FormatConfig>(() => {
+  return {
+    rows: props.rows,
+    minWidth: contentSize.width.value,
+    rowHeight: props.rowHeight,
+    rowPadding: props.rowPadding,
+  };
+});
+
+function init() {
+
+  const format = (new Format(config.value)).handle();
+
+  width.value = format.width;
+  height.value = format.height;
+
+  rowsInternal.value = format.rows;
+
+  groups.value = format.groups;
+  ticks.value = format.ticks;
+}
+
+// Init triggers
+
+const initDebounced = debounce(init, 200);
+
+watch(() => config.value, initDebounced, { deep: true });
+
+// Scroll
+
+const itemsRef = ref<HTMLUListElement | null>(null);
+
+const scrollX = ref(0);
+const scrollY = ref(0);
+
+useScroll(itemsRef, {
+  onScroll: (e: any) => {
+    if (!e.target) return;
+
+    scrollX.value = -e.target.scrollLeft;
+    scrollY.value = -e.target.scrollTop;
+  },
+});
+
+// Current Group
+
+const currentGroup = computed<Group | undefined>(() => {
+
+  const offsetLeft = -scrollX.value;
+
+  return groups.value
+    // Sort by x descending
+    .sort((a, b) => {
+      return b.x - a.x;
+    })
+    .find((group) => {
+      // - 1 to avoid flashing when scrolling
+      return group.x <= offsetLeft && group.x + group.width >= offsetLeft - 1;
+    });
+});
+
+</script>

package/src/components/BaseTextareaAutoresize.vue

@@ -143,8 +143,8 @@ const textareaClasses = computed(() => {
     [
       BASE_TEXTAREA_CLASSES,
       hasErrorInternal.value ? 'border-red-500' : 'border-slate-300',
-    ]
-    //props.twTextarea
+    ],
+    props.twTextarea
   );
 });
 </script>

package/src/services/gantt/format.ts

@@ -0,0 +1,113 @@
+import { DateTime } from "luxon";
+import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted } from "./types";
+import { minBy } from "lodash";
+import { Timescale } from "./timescale";
+
+export class Format {
+
+    private rows: GanttRow[];
+    private config: FormatConfig;
+
+    constructor(config: FormatConfig) {
+        this.rows = config.rows;
+        this.config = config;
+    }
+
+    public handle() {
+
+        // Format rows
+        const rowsFormatted = this.formatGanttRows();
+
+        // Get min and max
+        let { min, max } = this.getMinMax(rowsFormatted);
+
+        // Get timescale
+        const timescale = (new Timescale(this.config.minWidth, min, max)).handle();
+
+        // Padded min and max
+        min = timescale.min;
+        max = timescale.max;
+
+        const millisecondToPixel = timescale.millisecondToPixel;
+
+        // Set x, y, width and height
+
+        rowsFormatted.forEach((row) => {
+            row.items.forEach((item) => {
+
+                const x = (item.start.toMillis() - min.toMillis()) * millisecondToPixel;
+                const y = this.config.rowPadding;
+                const width = item.milliseconds * millisecondToPixel;
+                const height = this.config.rowHeight - (this.config.rowPadding * 2);
+
+                item.x = x;
+                item.y = y;
+                item.width = width;
+                item.height = height;
+            });
+        });
+
+        return {
+            rows: rowsFormatted,
+            min,
+            max,
+            millisecondToPixel,
+            height: this.config.rowHeight * this.rows.length,
+            width: timescale.width,
+            groups: timescale.groups,
+            ticks: timescale.ticks,
+        };
+    }
+
+    formatGanttRows(): GanttRowFormatted[] {
+        return this.rows.map((row) => {
+            return this.formatGanttRow(row);
+        }) as GanttRowFormatted[];
+    }
+
+    formatGanttRow(row: GanttRow): GanttRowFormatted {
+        const itemsFormatted = row.items.map((item) => {
+            return this.formatGanttItem(item);
+        });
+
+        return {
+            id: row.id,
+            name: row.name,
+            meta: row.meta,
+            items: itemsFormatted,
+        };
+    }
+
+    formatGanttItem(item: GanttItem): GanttItemFormatted {
+        const start = DateTime.fromISO(item.start);
+        const end = DateTime.fromISO(item.end);
+        const milliseconds = end.diff(start, "milliseconds").milliseconds;
+
+        return {
+            id: item.id,
+            name: item.name,
+            meta: item.meta,
+            color: item.color,
+            start,
+            end,
+            milliseconds,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+        } as GanttItemFormatted;
+    }
+
+    getMinMax(rowsFormatted: GanttRowFormatted[]) {
+        const flatItems = rowsFormatted.flatMap((row) => row.items);
+        const flatDateTimes = flatItems.flatMap((item) => [item.start, item.end]);
+
+        const min = minBy(flatDateTimes, (dateTime) => dateTime.toMillis())?.toMillis() || 0;
+        const max = Math.max(...flatDateTimes.map((dateTime) => dateTime.toMillis()));
+
+        const minDateTime = DateTime.fromMillis(min);
+        const maxDateTime = DateTime.fromMillis(max);
+
+        return { min: minDateTime, max: maxDateTime };
+    }
+}

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;
+    }
+}