sprintify-ui 0.6.8 → 0.6.9

package/dist/types/src/components/BaseGantt.vue.d.ts

@@ -16,6 +16,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
+    includeToday: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "item:click": (...args: any[]) => void;
     "row:click": (...args: any[]) => void;
@@ -36,6 +40,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
+    includeToday: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     "onItem:click"?: ((...args: any[]) => any) | undefined;
     "onRow:click"?: ((...args: any[]) => any) | undefined;
@@ -43,6 +51,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     maxHeight: number;
     rowHeight: number;
     rowPadding: number;
+    includeToday: boolean;
 }, {}>, {
     sidebarItem?(_: {
         row: {

package/dist/types/src/services/gantt/format.d.ts

@@ -1,5 +1,5 @@
 import { DateTime } from "luxon";
-import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted } from "./types";
+import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted, NowLine } from "./types";
 export declare class Format {
     private rows;
     private config;
@@ -13,6 +13,7 @@ export declare class Format {
         width: number;
         groups: import("./types").Group[];
         ticks: import("./types").Tick[];
+        nowLine: NowLine | null;
     };
     formatGanttRows(): GanttRowFormatted[];
     formatGanttRow(row: GanttRow): GanttRowFormatted;

package/dist/types/src/services/gantt/timescale.d.ts

@@ -1,5 +1,5 @@
 import { DateTime } from "luxon";
-import { Group, Tick } from "./types";
+import { Group, Scale, Tick } from "./types";
 export declare class Timescale {
     private minWidth;
     private width;
@@ -9,6 +9,7 @@ export declare class Timescale {
     private millisecondToPixel;
     constructor(minWidth: number, min: DateTime, max: DateTime);
     handle(): {
+        scale: Scale;
         groups: Group[];
         ticks: Tick[];
         width: number;

package/dist/types/src/services/gantt/types.d.ts

@@ -37,6 +37,7 @@ export interface FormatConfig {
     minWidth: number;
     rowHeight: number;
     rowPadding: number;
+    includeToday: boolean;
 }
 export interface Tick {
     date: DateTime;
@@ -65,3 +66,6 @@ export interface Scale {
         format: string;
     };
 }
+export interface NowLine {
+    x: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseGantt.stories.js

@@ -7,14 +7,14 @@ import { random } from 'lodash';
 
 const rows = [];
 
-for (let i = 0; i < 2; i++) {
+for (let i = 0; i < 10; i++) {
 
   const items = [];
 
   for (let j = 0; j < 1; j++) {
 
-    const start = DateTime.now().plus({ days: i * 1 });
-    const end = start.plus({ days: 0.5 });
+    const start = DateTime.now().minus({ days: 50 }).plus({ days: i * 2 });
+    const end = start.plus({ days: 50 });
 
     const colors = ['blue', 'green', 'red', 'yellow', 'indigo', 'pink', 'purple', 'gray'];
 
@@ -114,7 +114,12 @@ const SlotSidebarItemTemplate = (args) => ({
     Icon,
   },
   setup() {
-    return { args };
+
+    function onItemClick(item) {
+      alert(`Item "${item.name}" clicked`);
+    }
+
+    return { args, onItemClick };
   },
   template: `
   <BaseCard clipped>

package/src/components/BaseGantt.vue

@@ -54,7 +54,7 @@
 
     <div
       ref="contentRef"
-      class="grow flex flex-col relative overflow-hidden"
+      class="grow flex flex-col items-stretch relative overflow-hidden"
     >
       <!-- Time Scale Header -->
      
@@ -138,7 +138,7 @@
 
       <ul
         ref="itemsRef"
-        class="relative overflow-scroll grow"
+        class="relative w-full overflow-scroll grow"
       >
         <li
           v-for="row in rowsInternal"
@@ -228,6 +228,35 @@
           </g>
         </svg>
       </div>
+
+      <!-- Now line -->
+
+      <div
+        v-if="nowLine"
+        class="absolute left-0 pointer-events-none"
+        :style="{
+          top: `${HEADER_HEIGHT}px`,
+          width: `${width}px`,
+          height: height + 'px',
+          transform: `translateX(${scrollX}px)`,
+        }"
+      >
+        <svg
+          :view-box="`${width} ${height}`"
+          :width="width"
+          :height="height"
+        >
+          <line
+            :x1="nowLine.x"
+            :x2="nowLine.x"
+            y1="0"
+            :y2="height"
+            stroke="red"
+            stroke-width="2"
+            style="filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.1));"
+          ></line>
+        </svg>
+      </div>
     </div>
   </div>
 </template>
@@ -235,7 +264,7 @@
 <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 { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick, NowLine } from '@/services/gantt/types';
 import { debounce } from 'lodash';
 import { slate } from 'tailwindcss/colors';
 
@@ -244,10 +273,12 @@ const props = withDefaults(defineProps<{
   rowHeight?: number,
   rowPadding?: number,
   maxHeight?: number,
+  includeToday?: boolean,
 }>(), {
   rowHeight: 40,
   rowPadding: 4,
   maxHeight: undefined,
+  includeToday: true,
 });
 
 defineEmits([
@@ -264,6 +295,7 @@ const HEADER_HEIGHT = 40;
 
 const contentRef = ref<HTMLDivElement | null>(null);
 const contentSize = useElementSize(contentRef);
+const itemsRef = ref<HTMLUListElement | null>(null);
 
 const width = ref(800);
 const height = ref(100);
@@ -271,6 +303,7 @@ const height = ref(100);
 const rowsInternal = ref<GanttRowFormatted[]>([]);
 const groups = ref<Group[]>([]);
 const ticks = ref<Tick[]>([]);
+const nowLine = ref<NowLine | null>(null);
 
 const config = computed<FormatConfig>(() => {
   return {
@@ -278,11 +311,11 @@ const config = computed<FormatConfig>(() => {
     minWidth: contentSize.width.value,
     rowHeight: props.rowHeight,
     rowPadding: props.rowPadding,
+    includeToday: props.includeToday,
   };
 });
 
 function init() {
-
   const format = (new Format(config.value)).handle();
 
   width.value = format.width;
@@ -292,18 +325,33 @@ function init() {
 
   groups.value = format.groups;
   ticks.value = format.ticks;
+
+  nowLine.value = format.nowLine;
+
+  // Scroll to now line
+
+  nextTick(() => {
+    if (nowLine.value && itemsRef.value) {
+      const scrollLeft = nowLine.value.x + contentSize.width.value / 2;
+      itemsRef.value.scrollLeft = scrollLeft;
+    }
+  });
 }
 
 // Init triggers
 
 const initDebounced = debounce(init, 200);
 
-watch(() => config.value, initDebounced, { deep: true });
+onMounted(() => {
+  // Wait for the contentSize to be available
+  setTimeout(() => {
+    init();
+    watch(() => config.value, initDebounced, { deep: true });
+  }, 1);
+});
 
 // Scroll
 
-const itemsRef = ref<HTMLUListElement | null>(null);
-
 const scrollX = ref(0);
 const scrollY = ref(0);
 

package/src/services/gantt/format.ts

@@ -1,6 +1,5 @@
 import { DateTime } from "luxon";
-import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted } from "./types";
-import { minBy } from "lodash";
+import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted, NowLine } from "./types";
 import { Timescale } from "./timescale";
 
 export class Format {
@@ -47,6 +46,16 @@ export class Format {
             });
         });
 
+        const today = DateTime.local().startOf(timescale.scale.tick.step);
+
+        let nowLine = null;
+
+        if (today >= min && today <= max) {
+            nowLine = {
+                x: (today.toMillis() - min.toMillis()) * millisecondToPixel,
+            } as NowLine;
+        }
+
         return {
             rows: rowsFormatted,
             min,
@@ -56,6 +65,7 @@ export class Format {
             width: timescale.width,
             groups: timescale.groups,
             ticks: timescale.ticks,
+            nowLine: nowLine,
         };
     }
 
@@ -102,8 +112,18 @@ export class Format {
         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 flatMillis = flatDateTimes.map((dateTime) => dateTime.toMillis());
+
+        if (this.config.includeToday) {
+            const today = DateTime.local().startOf("day");
+
+            flatMillis.push(today.plus({ days: 1 }).toMillis());
+            flatMillis.push(today.minus({ days: 1 }).toMillis());
+        }
+
+        const min = Math.min(...flatMillis);
+        const max = Math.max(...flatMillis);
 
         const minDateTime = DateTime.fromMillis(min);
         const maxDateTime = DateTime.fromMillis(max);

package/src/services/gantt/timescale.ts

@@ -57,6 +57,7 @@ export class Timescale {
         // Return
 
         return {
+            scale: this.scale,
             groups,
             ticks,
             width: this.width,

package/src/services/gantt/types.ts

@@ -42,6 +42,7 @@ export interface FormatConfig {
     minWidth: number;
     rowHeight: number;
     rowPadding: number;
+    includeToday: boolean;
 }
 
 export interface Tick {
@@ -72,4 +73,8 @@ export interface Scale {
         step: DateTimeUnit;
         format: string;
     };
-}
+}
+
+export interface NowLine {
+    x: number;
+}