Merge branch 'release/3.4.0'

Author: Xeyos88

CHANGELOG.md

@@ -4,11 +4,9 @@ All notable changes to this project will be documented in this file.
 
 ---
 
-## [v3.2.0](https://github.com/Xeyos88/HyVueGantt/tree/v3.2.0) (2025-02-26)
-
-[Full Changelog](https://github.com/Xeyos88/HyVueGantt/compare/v3.1.2...v3.2.0)
-
+## [v3.3.0](https://github.com/Xeyos88/HyVueGantt/tree/v3.3.0) (2025-02-26)
 
+[Full Changelog](https://github.com/Xeyos88/HyVueGantt/compare/v3.1.2...v3.3.0)
 
 **✨ New Features:**
 

docs/.vitepress/theme/components/AdvancedGanttDemo.vue

@@ -26,6 +26,7 @@ const dateFormat = ref('YYYY-MM-DD HH:mm')
 const enableMinutes = ref(false)
 const currentTime = ref(true)
 const currentTimeLabel = ref('Now')
+const pointerMarker = ref(true)
 const locale = ref('en')
 const utc = ref(false)
 
@@ -43,6 +44,8 @@ const width = ref('100%')
 const showLabel = ref(true)
 const barLabelEditable = ref(true)
 const showProgress = ref(true)
+const showEventsAxis = ref(true)
+const eventsAxisHeight = ref(30)
 
 
 // Time Highlight Configuration
@@ -100,6 +103,7 @@ const customSlots = ref({
   barLabel: false,
   barTooltip: false,
   currentTimeLabel: false,
+  pointerMarkerTooltips: false,
   upperTimeunit: false
 })
 
@@ -343,6 +347,23 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
   }
 ])
 
+const events = ref([
+  {
+    id: 'visibility-1',
+    label: 'First develop period',
+    startDate: `${year}-${month}-02 15:00`,
+    endDate: `${year}-${month}-03 17:00`,
+    description: 'First custom event period'
+  },
+  {
+    id: 'visibility-2',
+    label: 'Second develop period',
+    startDate: `${year}-${month}-05 05:00`,
+    endDate: `${year}-${month}-08 12:00`,
+    description: 'Second custom event period'
+  }
+]);
+
 const milestones = ref([
   {
     id: 'milestone1',
@@ -543,6 +564,12 @@ const formattedEventLog = computed(() => {
                 <input type="checkbox" v-model="customSlots.currentTimeLabel">
               </label>
             </div>
+            <div class="setting-item">
+              <label>
+                Custom Pointer Marker Tooltips:
+                <input type="checkbox" v-model="customSlots.pointerMarkerTooltips">
+              </label>
+            </div>
             <div class="setting-item">
               <label>
                 Custom Time Unit:
@@ -597,6 +624,12 @@ const formattedEventLog = computed(() => {
                 <input type="checkbox" v-model="showProgress">
               </label>
             </div>
+            <div class="setting-item">
+              <label>
+                Show Event Axis:
+                <input type="checkbox" v-model="showEventsAxis">
+              </label>
+            </div>
             <div class="setting-item">
               <label>
                 Hide Timeline:
@@ -615,6 +648,12 @@ const formattedEventLog = computed(() => {
                 <input type="number" v-model="rowHeight">
               </label>
             </div>
+            <div class="setting-item">
+              <label>
+                Event Axis Height:
+                <input type="number" v-model="eventsAxisHeight">
+              </label>
+            </div>
             <div class="setting-item">
               <label>
                 Max Rows:
@@ -647,6 +686,12 @@ const formattedEventLog = computed(() => {
                 <input type="checkbox" v-model="currentTime">
               </label>
             </div>
+            <div class="setting-item">
+              <label>
+                Show Pointer Marker:
+                <input type="checkbox" v-model="pointerMarker">
+              </label>
+            </div>
             <div class="setting-item">
               <label>
                 Push on Overlap:
@@ -739,6 +784,7 @@ const formattedEventLog = computed(() => {
         :max-rows="maxRows"
         :current-time="currentTime"
         :current-time-label="currentTimeLabel"
+        :pointer-marker="pointerMarker"
         :date-format="dateFormat"
         :highlighted-hours="highlightedHours"
         :highlighted-days-in-week="highlightedDaysInWeek"
@@ -761,6 +807,9 @@ const formattedEventLog = computed(() => {
         :enableConnectionCreation="enableConnectionCreation"
         :enableConnectionDeletion="enableConnectionDeletion"
         :utc="utc"
+        :timeaxis-events="events"
+        :showEventsAxis="showEventsAxis"
+        :eventsAxisHeight="eventsAxisHeight"
         @click-bar="handleEvent($event, 'Bar Click')"
         @drag-bar="handleEvent($event, 'Bar Drag')"
         @sort="handleEvent($event, 'Sort Change')"
@@ -866,6 +915,20 @@ const formattedEventLog = computed(() => {
           </div>
         </template>
 
+        <!-- Custom Pointer Marker Tooltips Slot -->
+        <template v-if="customSlots.pointerMarkerTooltips" #pointer-marker-tooltips="{ hitBars, datetime }">
+          <div style="background: crimson;">
+            <div>{{ datetime }}</div>
+            <div>
+              <ul>
+                <li v-for="bar in hitBars" :key="bar.ganttBarConfig.id">
+                  {{ bar.ganttBarConfig.label ?? bar.ganttBarConfig.id }}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </template>
+
         <!-- Custom Upper Time Unit Slot -->
         <template v-if="customSlots.upperTimeunit" #upper-timeunit="{ label, value, date }">
           <div class="custom-timeunit">

docs/api/types.md

@@ -71,6 +71,16 @@ interface GanttMilestone {
   description?: string
   color?: string
 }
+
+interface TimeaxisEvent {
+  id: string;              
+  label: string;          
+  startDate: string | Date; 
+  endDate: string | Date;   
+  color?: string;          
+  backgroundColor?: string; 
+  description?: string;    
+}
 ```
 
 ## Label Data Types

docs/components/g-gantt-chart.md

@@ -106,7 +106,9 @@ Here's a minimal example of using the GGanttChart component:
 | connection-cancel | `{ sourceBar: GanttBarObject, connectionPoint: ConnectionPoint, e: MouseEvent }` | Cancels the creation of a connection |
 | connection-delete | `{ sourceBar: GanttBarObject, targetBar: GanttBarObject, e: MouseEvent }` | Delete a connection |
 | label-edit | `{ sourceBar: GanttBarObject, e: MouseEvent, oldValue: string, newValue: string }` | Edit bar label |
-
+| timeaxisEvents | `TimeaxisEvent[]` | `[]` | Array of events to display on the time axis |
+| showEventsAxis | `boolean` | `true` | Controls the visibility of the events axis |
+| eventsAxisHeight | `number` | `25` | Sets the height of the events axis in pixels |
 
 ### Slots
 
@@ -120,6 +122,7 @@ Here's a minimal example of using the GGanttChart component:
 | milestone | `{ bar: GanttBarObject }` | Custom milestones content |
 | milestone-`{milestoneId}` | `{ bar: GanttBarObject }` | Custom specific milestone content |
 | commands | `CommandSlotProps` | Customization of the command section |
+| timeaxis-event | `{ event: TimeaxisEvent }` | Custom template for timeline events displayed on the events axis |
 
 ## Command Slot Usage
 

docs/guide/time-axis.md

@@ -43,4 +43,33 @@ You can customize the time scale appearance:
   :holiday-highlight="'US'"
   :locale="'en'"
 />
-```
+```
+
+## Events Axis
+
+The Gantt chart supports a third axis specifically for displaying timeline events such as releases, milestones, or any time-bound occurrences. This events axis appears below the regular time units and provides visual cues for important dates or periods.
+
+### Configuring Events
+
+Events are defined using the `timeaxisEvents` property, which accepts an array of `TimeaxisEvent` objects:
+
+```typescript
+const events = [
+  {
+    id: '1',
+    label: 'Release v1.0',
+    startDate: '2024-01-15',
+    endDate: '2024-01-15',
+    backgroundColor: '#42b883',
+    color: '#ffffff',
+    description: 'Product release v1.0'
+  },
+  {
+    id: '2',
+    label: 'Maintenance',
+    startDate: '2024-02-10',
+    endDate: '2024-02-12',
+    backgroundColor: '#e67e22',
+    description: 'Scheduled maintenance'
+  }
+]

package.json

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

src/color-schemes.ts

@@ -8,6 +8,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#ededed",
     hoverHighlight: "rgba(204, 216, 219, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "#404040",
     background: "white",
     commands: "#eeeeee",
@@ -25,6 +26,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#f7ece6",
     hoverHighlight: "rgba(230, 221, 202, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "#542d05",
     background: "white",
     commands: "white",
@@ -42,6 +44,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#ce5f64",
     hoverHighlight: "rgba(196, 141, 141, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "black",
     background: "white",
     commands: "white",
@@ -59,6 +62,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#383838",
     hoverHighlight: "rgba(159, 160, 161, 0.5)",
     markerCurrentTime: "#fff",
+    markerPointer: '#fff',
     text: "white",
     background: "#525252",
     toast: "#1f1f1f",
@@ -77,6 +81,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#665648",
     hoverHighlight: "rgba(196, 141, 141, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "white",
     background: "white",
     rangeHighlight: "#000",
@@ -93,6 +98,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#f2799f",
     hoverHighlight: "rgba(196, 141, 141, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "white",
     background: "white",
     commands: "white",
@@ -110,6 +116,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#65a577",
     hoverHighlight: "rgba(160, 219, 171, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "white",
     background: "white",
     commands: "white",
@@ -127,6 +134,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#409fed",
     hoverHighlight: "rgba(110, 165, 196, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "white",
     background: "white",
     commands: "white",
@@ -144,6 +152,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#d0edf4",
     hoverHighlight: "rgba(193, 202, 214, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "#022c47",
     background: "white",
     commands: "white",
@@ -161,6 +170,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#2c3044",
     hoverHighlight: "rgba(179, 162, 127, 0.5)",
     markerCurrentTime: "#fff",
+    markerPointer: '#fff',
     text: "#ffe0b3",
     background: "#38383b",
     toast: "#1f1f1f",
@@ -179,6 +189,7 @@ export const colorSchemes: Record<string, ColorScheme> = {
     quartenary: "#2a3d51",
     hoverHighlight: "rgba(160, 219, 171, 0.5)",
     markerCurrentTime: "#000",
+    markerPointer: '#000',
     text: "white",
     background: "white",
     commands: "white",

src/components/GGanttChart.vue

@@ -47,6 +47,7 @@ import GGanttCurrentTime from "./GGanttCurrentTime.vue"
 import GGanttConnector from "./GGanttConnector.vue"
 import GGanttMilestone from "./GGanttMilestone.vue"
 import GGanttRow from "./GGanttRow.vue"
+import GGanttPointerMarker from './GGanttPointerMarker.vue'
 
 // Composables
 import { useConnections } from "../composables/useConnections"
@@ -63,7 +64,7 @@ import useBarSelector from "../composables/useBarSelector"
 // Types and Constants
 import { colorSchemes, type ColorSchemeKey } from "../color-schemes"
 import { DEFAULT_DATE_FORMAT } from "../composables/useDayjsHelper"
-import { BOOLEAN_KEY, CONFIG_KEY, EMIT_BAR_EVENT_KEY, GANTT_ID_KEY } from "../provider/symbols"
+import { BOOLEAN_KEY, CONFIG_KEY, EMIT_BAR_EVENT_KEY, GANTT_ID_KEY, CHART_AREA_KEY, CHART_WRAPPER_KEY } from "../provider/symbols"
 import type {
   GanttBarObject,
   GGanttChartProps,
@@ -77,6 +78,7 @@ import type {
 // Props
 const props = withDefaults(defineProps<GGanttChartProps>(), {
   currentTimeLabel: "",
+  pointerMarkerLabel: "",
   dateFormat: DEFAULT_DATE_FORMAT,
   precision: "day",
   width: "100%",
@@ -108,6 +110,9 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   sortable: true,
   labelResizable: true,
   milestones: () => [],
+  timeaxisEvents: () => [],
+  showEventsAxis: true,
+  eventsAxisHeight: 25,
   holidayHighlight: "",
   rowClass: () => "",
   rowLabelClass: () => "",
@@ -764,6 +769,8 @@ provide(CONFIG_KEY, {
 provide(EMIT_BAR_EVENT_KEY, emitBarEvent)
 provide(BOOLEAN_KEY, { ...props })
 provide(GANTT_ID_KEY, id.value)
+provide(CHART_AREA_KEY, ganttChart)
+provide(CHART_WRAPPER_KEY, ganttWrapper)
 </script>
 
 <template>
@@ -855,6 +862,12 @@ provide(GANTT_ID_KEY, id.value)
               </template>
             </g-gantt-current-time>
 
+            <g-gantt-pointer-marker v-if="pointerMarker">
+              <template #pointer-marker-tooltips="{ hitBars, datetime }">
+                <slot name="pointer-marker-tooltips" v-bind="{ hitBars, datetime }" />
+              </template>
+            </g-gantt-pointer-marker>
+
             <g-gantt-milestone
               v-for="milestone in milestones"
               :key="milestone.date.toString()"