Merge branch 'feature/milestone' into develop

Author: Xeyos88

docs/.vitepress/theme/components/OtherGanttDemo.vue

@@ -247,7 +247,6 @@ onMounted(() => {
         :enable-connections="true"
         grid
         label-column-title="Rows"
-
       >
         <g-gantt-row
           v-for="row in rows"

docs/api/types.md

@@ -54,6 +54,13 @@ interface BarConnection {
   animated?: boolean;
   animationSpeed?: ConnectionSpeed;
 }
+
+export interface GanttMilestone {
+  date: string
+  name: string
+  description?: string
+  color?: string
+}
 ```
 ## Label Data Types
 

docs/components/g-gantt-chart.md

@@ -64,7 +64,7 @@ Here's a minimal example of using the GGanttChart component:
 | currentTime | `boolean` | `false` | Show current time indicator |
 | currentTimeLabel | `string` | `''` | Label for current time indicator |
 | dateFormat | `string \| false` | `'YYYY-MM-DD HH:mm'` | Format for dates |
-
+| milestones | `GanttMilestone[]` | `[]` | List of milestone |
 
 ### Events
 

docs/examples/advanced.md

@@ -121,4 +121,85 @@ const rows = ref([
   color: #666;
 }
 </style>
+```
+
+## Multi Label Columns
+
+```vue
+<template>
+  <g-gantt-chart
+    v-bind="chartConfig"
+    :push-on-overlap="true"
+    :no-overlap="true"
+    label-column-title="Project Details"
+    :multi-column-label="multiColumnLabel"
+  >
+    <g-gantt-row
+      v-for="row in rows"
+      :key="row.label"
+      :label="row.label"
+      :bars="row.bars"
+    />
+  </g-gantt-chart>
+</template>
+
+<script setup lang="ts">
+const rows = ref([
+  {
+    label: 'Constrained Tasks',
+    bars: [
+      {
+        start: '2024-01-01',
+        end: '2024-01-15',
+        ganttBarConfig: {
+          id: '1',
+          label: 'Immobile Task',
+          immobile: true
+        }
+      },
+      {
+        start: '2024-01-16',
+        end: '2024-01-30',
+        ganttBarConfig: {
+          id: '2',
+          label: 'Movable Task',
+          pushOnOverlap: true
+        }
+      }
+    ]
+  }
+])
+
+const getN = (row: ChartRow) => {
+  return row.bars.length
+}
+
+const sortN = (a: ChartRow, b: ChartRow) => {
+  const aId = a.bars.length ?? 0
+  const bId = b.bars.length ?? 0
+  return aId < bId ? -1 : aId > bId ? 1 : 0
+}
+
+
+const multiColumnLabel = ref<LabelColumnConfig[]>([
+  {
+    field: 'Id',
+    sortable: false,
+  },
+  {
+    field: 'Label',
+  },
+  {
+    field: 'StartDate',
+  },
+  {
+    field: 'Duration',
+  },
+  {
+    field: 'Bars N°',
+    valueGetter: getN,
+    sortFn: sortN,
+  },
+])
+</script>
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hy-vue-gantt",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Evolution of vue-ganttastic package",
   "author": "Eugenio Topa (@Xeyos88)",
   "scripts": {

src/components/GGanttChart.vue

@@ -34,6 +34,7 @@ import GGanttBarTooltip from "./GGanttBarTooltip.vue"
 import GGanttCurrentTime from "./GGanttCurrentTime.vue"
 import GGanttConnector from "./GGanttConnector.vue"
 import GGanttRow from "./GGanttRow.vue"
+import GGanttMilestone from "./GGanttMilestone.vue"
 
 // Internal Imports - Composables
 import { useConnections } from "../composables/useConnections"
@@ -46,7 +47,12 @@ import { useRows } from "../composables/useRows"
 import { colorSchemes, type ColorScheme, type ColorSchemeKey } from "../color-schemes"
 import { DEFAULT_DATE_FORMAT } from "../composables/useDayjsHelper"
 import { BOOLEAN_KEY, CONFIG_KEY, EMIT_BAR_EVENT_KEY } from "../provider/symbols"
-import type { GanttBarObject, GGanttChartProps, SortDirection } from "../types"
+import type {
+  GanttBarObject,
+  GGanttChartProps,
+  SortDirection,
+  GGanttTimeaxisInstance
+} from "../types"
 import type { CSSProperties } from "vue"
 
 // Props & Emits Definition
@@ -65,7 +71,7 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   highlightedUnits: () => [],
   font: "inherit",
   labelColumnTitle: "",
-  labelColumnWidth: 150,
+  labelColumnWidth: 120,
   commands: true,
   enableMinutes: false,
   enableConnections: true,
@@ -79,7 +85,8 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   initialRows: () => [],
   multiColumnLabel: () => [],
   sortable: true,
-  labelResizable: true
+  labelResizable: true,
+  milestones: () => []
 })
 
 const id = ref(crypto.randomUUID())
@@ -144,14 +151,23 @@ const emit = defineEmits<{
 const chartStartDayjs = computed(() => dayjs(props.chartStart, props.dateFormat as string, true))
 const chartEndDayjs = computed(() => dayjs(props.chartEnd, props.dateFormat as string, true))
 
-const diffDays = computed(() => chartEndDayjs.value.diff(chartStartDayjs.value, "day") + 1)
+//const diffDays = computed(() => chartEndDayjs.value.diff(chartStartDayjs.value, "day") + 1)
 const diffHours = computed(() => chartEndDayjs.value.diff(chartStartDayjs.value, "hour"))
+const diffPrecision = computed(
+  () =>
+    chartEndDayjs.value.diff(
+      chartStartDayjs.value,
+      props.precision === "hour" ? "day" : props.precision
+    ) + 1
+)
 
 // Chart Elements Refs
 const ganttChart = ref<HTMLElement | null>(null)
 const chartSize = useElementSize(ganttChart)
 const ganttWrapper = ref<HTMLElement | null>(null)
-const timeaxisComponent = ref<InstanceType<typeof GGanttTimeaxis> | null>(null)
+const timeaxisComponent = ref<
+  (InstanceType<typeof GGanttTimeaxis> & GGanttTimeaxisInstance) | null
+>(null)
 const ganttContainer = ref<HTMLElement | null>(null)
 
 // Composables
@@ -181,7 +197,7 @@ const {
   isAtBottom
 } = useChartNavigation(
   {
-    diffDays: diffDays.value,
+    diffDays: diffPrecision.value,
     diffHours: diffHours.value,
     scrollRefs: {
       rowsContainer,
@@ -208,7 +224,7 @@ const navigationControls = {
 
 const { handleKeyDown } = useKeyboardNavigation(navigationControls, ganttWrapper, ganttContainer)
 
-// Derived State
+// Computed property per timeaxisUnits
 const widthNumber = computed(() => zoomFactor.value * 100)
 const customWidth = computed(() => `${widthNumber.value}%`)
 
@@ -426,6 +442,12 @@ provide("id", id)
               </template>
             </g-gantt-current-time>
 
+            <g-gantt-milestone
+              v-for="milestone in milestones"
+              :key="milestone.date.toString()"
+              :milestone="milestone"
+            />
+
             <!-- Rows Container -->
             <div
               class="g-gantt-rows-container"

src/components/GGanttLabelColumn.vue

@@ -158,7 +158,6 @@ const getRowValue = (row: ChartRow, column: LabelColumnConfig, index: number) =>
 const labelContainer = ref<HTMLElement | null>(null)
 
 const labelContainerStyle = computed<CSSProperties>(() => {
-  console.log(maxRows.value, rows.value.length)
   if (maxRows.value === 0) return {}
   const minRows = Math.min(maxRows.value, rows.value.length)
 

src/components/GGanttMilestone.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import useTimePositionMapping from "../composables/useTimePositionMapping"
+import provideConfig from "../provider/provideConfig"
+import dayjs from "dayjs"
+import type { GanttMilestone } from "../types"
+
+const props = defineProps<{
+  milestone: GanttMilestone
+}>()
+
+const { mapTimeToPosition } = useTimePositionMapping()
+const { colors } = provideConfig()
+
+const showTooltip = ref(false)
+const tooltipPosition = ref({ x: 0, y: 0 })
+
+const milestoneDate = computed(() => {
+  const date = dayjs(props.milestone.date)
+  if (!date.hour() && !date.minute()) {
+    return date.hour(12).minute(0).format("YYYY-MM-DD HH:mm")
+  }
+  return props.milestone.date
+})
+
+const xPosition = computed(() => {
+  return mapTimeToPosition(milestoneDate.value)
+})
+
+const handleMouseEnter = (event: MouseEvent) => {
+  const element = event.target as HTMLElement
+  const rect = element.getBoundingClientRect()
+  tooltipPosition.value = {
+    x: rect.left,
+    y: rect.top + 10
+  }
+  showTooltip.value = true
+}
+
+const handleMouseLeave = () => {
+  showTooltip.value = false
+}
+
+const styleConfig = computed(() => {
+  if (props.milestone.color) {
+    return {
+      label: {
+        background: props.milestone.color,
+        color: "#000",
+        border: `2px solid ${props.milestone.color}`
+      },
+      marker: {
+        borderLeft: `2px solid ${props.milestone.color}`
+      }
+    }
+  }
+
+  return {
+    label: {
+      background: colors.value.primary,
+      color: colors.value.text,
+      border: "none"
+    },
+    marker: {
+      borderLeft: `2px solid ${colors.value.markerCurrentTime}`
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    class="g-gantt-milestone"
+    :style="{
+      left: `${xPosition}px`
+    }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="g-gantt-milestone-label" :style="styleConfig.label">
+      {{ milestone.name }}
+    </div>
+
+    <div class="g-gantt-milestone-marker" :style="styleConfig.marker" />
+
+    <teleport to="body">
+      <div
+        v-if="showTooltip"
+        class="g-gantt-milestone-tooltip"
+        :style="{
+          top: `${tooltipPosition.y}px`,
+          left: `${tooltipPosition.x}px`,
+          background: colors.primary,
+          color: colors.text
+        }"
+      >
+        <div class="g-gantt-milestone-tooltip-title">{{ milestone.name }}</div>
+        <div class="g-gantt-milestone-tooltip-date">{{ milestone.date }}</div>
+        <div class="g-gantt-milestone-tooltip-description">{{ milestone.description }}</div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<style>
+.g-gantt-milestone {
+  position: absolute;
+  height: 100%;
+  display: flex;
+  z-index: 5;
+  pointer-events: auto;
+  flex-direction: column;
+  align-items: center;
+}
+
+.g-gantt-milestone-marker {
+  width: 0px;
+  height: calc(100% - 30px);
+  display: flex;
+  margin-top: 25px;
+}
+
+.g-gantt-milestone-label {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.8em;
+  white-space: nowrap;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: 4px;
+  transform: translateY(0);
+}
+
+.g-gantt-milestone-tooltip {
+  position: fixed;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 0.75em;
+  z-index: 1000;
+  min-width: 200px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(-100%);
+}
+
+.g-gantt-milestone-tooltip-title {
+  font-weight: bold;
+}
+
+.g-gantt-milestone-tooltip-date {
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+
+.g-gantt-milestone-tooltip-description {
+  font-size: 0.9em;
+  line-height: 1.4;
+}
+</style>

src/components/GGanttRow.vue

@@ -36,7 +36,7 @@ provide(BAR_CONTAINER_KEY, barContainer)
 const onDrop = (e: MouseEvent) => {
   const container = barContainer.value?.getBoundingClientRect()
   if (!container) {
-    console.error("Vue-Ganttastic: failed to find bar container element for row.")
+    console.error("Hyper Vue Gantt: failed to find bar container element for row.")
     return
   }
   const xPos = e.clientX - container.left