Merge branch 'feature/compact_lib' into develop

Author: Xeyos88

docs/api/props.md

@@ -50,6 +50,7 @@ interface VisualProps {
   markConnection?: MarkConnection;           // Type of marker in connections
   showLabel?: boolean;                       // Show bar labels
   showProgress?: boolean;                    // Show progress indicators
+  showPlannedBars?: boolean;                 // Show planned bars alongside actual bars
   showEventsAxis?: boolean;                  // Show events axis
   eventsAxisHeight?: number;                 // Height of events axis
   timeaxisEvents?: TimeaxisEvent[];          // Events to display on time axis

docs/api/types.md

@@ -38,11 +38,14 @@ interface GanttBarConfig {
   progress?: number;
   progressResizable?: boolean;
   progressStyle?: CSSProperties;
+  plannedStyle?: CSSProperties;        // Styling for planned bars
 }
 
 interface GanttBarObject {
   [key: string]: any;
   ganttBarConfig: GanttBarConfig;
+  start_planned?: string | Date;       // Planned start date
+  end_planned?: string | Date;         // Planned end date
 }
 
 interface GanttBarConnection {
@@ -70,6 +73,62 @@ interface GanttBarObjectWithoutStyles extends Omit<GanttBarObject, "ganttBarConf
 }
 ```
 
+## Planned Bars Types
+
+The planned bars feature introduces additional properties for displaying planned/expected dates alongside actual dates:
+
+```typescript
+// Planned Bars Configuration
+interface PlannedBarConfig {
+  start_planned?: string | Date;       // Planned start date
+  end_planned?: string | Date;         // Planned end date
+  plannedStyle?: CSSProperties;        // Custom styling for planned bars
+}
+
+// Extended Bar Object with Planned Dates
+interface GanttBarObjectWithPlanned extends GanttBarObject {
+  start_planned?: string | Date;
+  end_planned?: string | Date;
+}
+
+// Tooltip Data with Planned Information  
+interface BarTooltipData {
+  bar: GanttBarObject;
+  barStart: string | Date;
+  barEnd: string | Date;
+  barStartPlanned?: string | Date;     // Available when showPlannedBars is true
+  barEndPlanned?: string | Date;       // Available when showPlannedBars is true
+}
+```
+
+### Planned Bars Usage Example
+
+```typescript
+const barsWithPlanning: GanttBarObject[] = [
+  {
+    start: '2024-02-15',           // Actual start
+    end: '2024-02-28',             // Actual end  
+    start_planned: '2024-02-01',   // Planned start
+    end_planned: '2024-02-20',     // Planned end
+    ganttBarConfig: {
+      id: 'task-1',
+      label: 'Development Task',
+      // Styling for the actual bar
+      style: {
+        backgroundColor: '#2196f3',
+        color: 'white'
+      },
+      // Styling for the planned bar (shown as overlay/underlay)
+      plannedStyle: {
+        backgroundColor: '#e3f2fd',
+        border: '2px dashed #1976d2',
+        opacity: 0.7
+      }
+    }
+  }
+]
+```
+
 ## Connection Label Styling
 
 ```typescript

docs/components/g-gantt-chart.md

@@ -79,6 +79,7 @@ Here's a minimal example of using the GGanttChart component:
 | markerConnection| `MarkerConnection` | `forward` | Choose the type of marker in connection |
 | showLabel| `boolean` | `true` | Enable the visualization of bar label |
 | showProgress| `boolean` | `true` | Enable the visualization of percentage bar progress |
+| showPlannedBars| `boolean` | `false` | Enable the visualization of planned bars alongside actual bars |
 | defaultProgressResizable | `boolean` | `true` | Enable progress adjustment through dragging |
 | enableConnectionCreation | `boolean` | `false` | Enable the possibility to draw connections |
 | enableConnectionDelete | `boolean` | `false` | Enable the possibility to delete connections |

docs/examples/advanced.md

@@ -123,6 +123,275 @@ const rows = ref([
 </style>
 ```
 
+## Planned vs Actual Timeline Tracking
+
+The planned bars feature allows you to visualize both planned and actual timelines for project tracking and variance analysis:
+
+```vue
+<template>
+  <g-gantt-chart
+    v-bind="chartConfig"
+    :show-planned-bars="true"
+  >
+    <g-gantt-row
+      v-for="row in projectRows"
+      :key="row.label"
+      :label="row.label"
+      :bars="row.bars"
+    />
+  </g-gantt-chart>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const chartConfig = ref({
+  chartStart: '2024-01-01',
+  chartEnd: '2024-03-31',
+  precision: 'day',
+  barStart: 'start',
+  barEnd: 'end'
+})
+
+const projectRows = ref([
+  {
+    label: 'Planning Phase',
+    bars: [{
+      start: '2024-01-03',           // Actual started 2 days late
+      end: '2024-01-18',             // Finished 3 days late
+      start_planned: '2024-01-01',   // Originally planned start
+      end_planned: '2024-01-15',     // Originally planned end
+      ganttBarConfig: {
+        id: 'planning',
+        label: 'Requirements & Design',
+        style: {
+          backgroundColor: '#4caf50',
+          color: 'white'
+        },
+        plannedStyle: {
+          backgroundColor: '#e8f5e8',
+          border: '2px dashed #4caf50',
+          opacity: 0.6
+        }
+      }
+    }]
+  },
+  {
+    label: 'Development',
+    bars: [{
+      start: '2024-01-20',           // Started on time
+      end: '2024-02-25',             // Running 5 days over
+      start_planned: '2024-01-20',   // Planned start
+      end_planned: '2024-02-20',     // Planned end
+      ganttBarConfig: {
+        id: 'development',
+        label: 'Core Implementation',
+        style: {
+          backgroundColor: '#2196f3',
+          color: 'white'
+        },
+        plannedStyle: {
+          backgroundColor: '#e3f2fd',
+          border: '2px dashed #2196f3',
+          opacity: 0.6
+        }
+      }
+    }]
+  },
+  {
+    label: 'Testing',
+    bars: [{
+      start: '2024-03-01',           // Delayed start due to dev overrun
+      end: '2024-03-20',             // Compressed timeline
+      start_planned: '2024-02-25',   // Originally planned earlier
+      end_planned: '2024-03-15',     // Originally shorter duration
+      ganttBarConfig: {
+        id: 'testing',
+        label: 'QA & Bug Fixes',
+        style: {
+          backgroundColor: '#ff9800',
+          color: 'white'
+        },
+        plannedStyle: {
+          backgroundColor: '#fff3e0',
+          border: '2px dashed #ff9800',
+          opacity: 0.6
+        }
+      }
+    }]
+  }
+])
+</script>
+```
+
+### Project Variance Analysis Example
+
+```vue
+<template>
+  <div class="project-dashboard">
+    <h3>Project Dashboard with Variance Tracking</h3>
+    
+    <!-- Summary Stats -->
+    <div class="variance-summary">
+      <div class="stat-card">
+        <strong>Total Delay:</strong> {{ calculateTotalDelay() }} days
+      </div>
+      <div class="stat-card">
+        <strong>Tasks Over Budget:</strong> {{ tasksOverBudget() }}
+      </div>
+    </div>
+
+    <g-gantt-chart
+      v-bind="chartConfig"
+      :show-planned-bars="true"
+      @click-bar="handleBarClick"
+    >
+      <g-gantt-row
+        v-for="row in varianceRows"
+        :key="row.label"
+        :label="row.label"
+        :bars="row.bars"
+      >
+        <template #bar-tooltip="{ bar, barStart, barEnd }">
+          <div class="variance-tooltip">
+            <h4>{{ bar.ganttBarConfig.label }}</h4>
+            <div><strong>Actual:</strong> {{ barStart }} → {{ barEnd }}</div>
+            <div v-if="bar.start_planned">
+              <strong>Planned:</strong> {{ bar.start_planned }} → {{ bar.end_planned }}
+            </div>
+            <div class="variance-info">
+              <strong>Variance:</strong> 
+              <span :class="getVarianceClass(bar)">
+                {{ calculateVariance(bar) }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </g-gantt-row>
+    </g-gantt-chart>
+  </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+
+const varianceRows = ref([
+  {
+    label: 'Frontend Development',
+    bars: [{
+      start: '2024-01-10',
+      end: '2024-02-15',
+      start_planned: '2024-01-05',
+      end_planned: '2024-02-05',
+      ganttBarConfig: {
+        id: 'frontend',
+        label: 'React Components',
+        plannedStyle: {
+          backgroundColor: '#ffebee',
+          border: '2px dashed #f44336',
+          opacity: 0.7
+        }
+      }
+    }]
+  },
+  {
+    label: 'Backend API',
+    bars: [{
+      start: '2024-01-08',
+      end: '2024-01-28',
+      start_planned: '2024-01-10',
+      end_planned: '2024-02-10',
+      ganttBarConfig: {
+        id: 'backend',
+        label: 'REST API Development',
+        plannedStyle: {
+          backgroundColor: '#e8f5e8',
+          border: '2px dashed #4caf50',
+          opacity: 0.7
+        }
+      }
+    }]
+  }
+])
+
+function calculateVariance(bar) {
+  if (!bar.start_planned || !bar.end_planned) return 'N/A'
+  
+  const actualDuration = dayjs(bar.end).diff(dayjs(bar.start), 'days')
+  const plannedDuration = dayjs(bar.end_planned).diff(dayjs(bar.start_planned), 'days')
+  const variance = actualDuration - plannedDuration
+  
+  return variance > 0 ? `+${variance} days` : `${variance} days`
+}
+
+function getVarianceClass(bar) {
+  if (!bar.start_planned) return ''
+  const variance = dayjs(bar.end).diff(dayjs(bar.end_planned), 'days')
+  return variance > 0 ? 'over-budget' : variance < 0 ? 'under-budget' : 'on-time'
+}
+
+function calculateTotalDelay() {
+  return varianceRows.value.reduce((total, row) => {
+    return total + row.bars.reduce((rowTotal, bar) => {
+      const delay = bar.start_planned 
+        ? Math.max(0, dayjs(bar.end).diff(dayjs(bar.end_planned), 'days'))
+        : 0
+      return rowTotal + delay
+    }, 0)
+  }, 0)
+}
+
+function tasksOverBudget() {
+  return varianceRows.value.reduce((count, row) => {
+    return count + row.bars.filter(bar => 
+      bar.start_planned && dayjs(bar.end).isAfter(dayjs(bar.end_planned))
+    ).length
+  }, 0)
+}
+
+function handleBarClick({ bar }) {
+  console.log('Bar clicked:', bar.ganttBarConfig.label)
+  // Handle bar interaction
+}
+</script>
+
+<style scoped>
+.project-dashboard {
+  padding: 20px;
+}
+
+.variance-summary {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  padding: 12px;
+  background: #f5f5f5;
+  border-radius: 6px;
+  border-left: 4px solid #2196f3;
+}
+
+.variance-tooltip {
+  padding: 10px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.variance-info {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #eee;
+}
+
+.over-budget { color: #f44336; font-weight: bold; }
+.under-budget { color: #4caf50; font-weight: bold; }
+.on-time { color: #2196f3; font-weight: bold; }
+</style>
+```
+
 ## Multi Label Columns
 
 ```vue