Merge branch 'release/1.2.0'

Author: Xeyos88

docs/.vitepress/theme/components/ConnectionsGanttDemo.vue

@@ -22,8 +22,8 @@ const rows = ref([
             }
           ]
         },
-        start: '2024-12-10 09:00',
-        end: '2024-12-10 14:00',
+        start: '2024-12-25 09:00',
+        end: '2024-12-25 14:00',
       },
       {
         ganttBarConfig: {
@@ -39,8 +39,8 @@ const rows = ref([
             }
           ]
         },
-        start: '2024-12-10 15:00',
-        end: '2024-12-11 12:00',
+        start: '2024-12-25 15:00',
+        end: '2024-12-26 12:00',
       },
     ],
   },
@@ -61,17 +61,17 @@ const rows = ref([
             }
           ]
         },
-        start: '2024-12-11 13:00',
-        end: '2024-12-12 12:00',
+        start: '2024-12-26 13:00',
+        end: '2024-12-26 12:00',
       },
       {
         ganttBarConfig: {
           id: 'dev2',
           label: 'Testing',
           style: { background: '#D4A5A5' },
         },
-        start: '2024-12-12 13:00',
-        end: '2024-12-12 17:00',
+        start: '2024-12-26 13:00',
+        end: '2024-12-26 17:00',
       },
     ],
   },
@@ -86,14 +86,15 @@ onMounted(() => {
   <ClientOnly>
     <div class="demo-container" v-if="isLibraryReady">
       <g-gantt-chart
-        chart-start="2024-12-10 08:00"
-        chart-end="2024-12-13 23:00"
+        chart-start="2024-12-25 08:00"
+        chart-end="2024-12-27 23:00"
         precision="hour"
         bar-start="start"
         bar-end="end"
         :enable-connections="true"
         :push-on-connect="true"
         color-scheme="dark"
+        :holidayHighlight="'US'"
       >
         <g-gantt-row
           v-for="row in rows"

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,8 @@ 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 |
+| holidayHighlight| `string` | `` | Country Cody of date-holidays |
 
 ### 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>
 ```