Hyper Vue Gantt

https://github.com/xeyos88/hyvuegantt
Admin
A powerful and flexible Gantt chart component for Vue 3 applications with advanced time management,...
Tokens:61,480
Snippets:313
Trust Score:4.3
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Setup HyVueGantt Development Environment

Source: https://github.com/xeyos88/hyvuegantt/blob/main/README.md

This snippet outlines the steps to clone the HyVueGantt repository, install dependencies, start the development server, run tests, and build the library. It's essential for setting up a local development environment.

```bash
git clone https://github.com/Xeyos88/HyVueGantt.git
cd HyVueGantt

npm install

npm run dev

npm run test

npm run build
```

--------------------------------

### Set up Development Environment

Source: https://github.com/xeyos88/hyvuegantt/blob/main/CONTRIBUTING.md

Commands to clone the repository, install dependencies, create a feature branch, and start the development server.

```bash
git clone https://github.com/Xeyos88/HyVueGantt.git
cd hy-vue-gantt
npm install
git checkout -b feature/your-feature-name
npm run dev
```

--------------------------------

### Android Project Setup Configuration

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/grouping.md

Configuration for the Android project setup. It details the 'Android Setup' task, including its schedule, styling, and a connection to the subsequent task.

```javascript
{
                id: 'android-1',
                label: 'Android Setup',
                style: { background: '#8E44AD' },
                connections: [{ targetId: 'android-2', type: 'bezier', animated: true, color: '#8E44AD' }]
              }
```

--------------------------------

### iOS Project Setup Configuration

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/grouping.md

Configuration for the iOS project setup phase. It includes the 'iOS Setup' task, its schedule, styling, and a connection to the next task.

```javascript
{
                id: 'ios-1',
                label: 'iOS Setup',
                style: { background: '#E74C3C' },
                connections: [{ targetId: 'ios-2', type: 'straight', animated: true, color: '#E74C3C' }]
              }
```

--------------------------------

### Install HyVueGantt Package

Source: https://github.com/xeyos88/hyvuegantt/blob/main/README.md

Commands to install the library using common package managers like npm, yarn, or pnpm.

```bash
npm install hy-vue-gantt
yarn add hy-vue-gantt
pnpm add hy-vue-gantt
```

--------------------------------

### Backend Database Setup Configuration

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/grouping.md

Configuration for the Database Setup task in the backend. It defines the 'Database Configuration' task with its schedule and styling.

```javascript
{
                id: 'be-3',
                label: 'Database Configuration',
                style: { background: '#F1C40F' }
              }
```

--------------------------------

### GET /gantt-chart-config

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/others.md

Configuration parameters for initializing the g-gantt-chart component.

```APIDOC
## GET /gantt-chart-config

### Description
Defines the configuration properties for the g-gantt-chart component, including time ranges, precision, and interaction settings.

### Method
GET

### Endpoint
/gantt-chart-config

### Parameters
#### Query Parameters
- **chart-start** (string) - Required - Start date of the chart view.
- **chart-end** (string) - Required - End date of the chart view.
- **precision** (string) - Optional - Time granularity (e.g., 'hour').
- **max-rows** (number) - Optional - Maximum number of rows to display.
- **enable-connections** (boolean) - Optional - Toggle for showing dependencies between bars.

### Request Example
{
  "chart-start": "2024-12-10 08:00",
  "chart-end": "2025-01-01 18:00",
  "precision": "hour"
}

### Response
#### Success Response (200)
- **status** (string) - Configuration applied successfully.
```

--------------------------------

### Basic Gantt Chart Implementation

Source: https://context7.com/xeyos88/hyvuegantt/llms.txt

Demonstrates a minimal setup of a Gantt chart using rows and bars. It defines the chart timeframe, precision, and data structure for tasks.

```vue
<template>
  <g-gantt-chart
    :chart-start="chartStart"
    :chart-end="chartEnd"
    :precision="precision"
    :bar-start="barStart"
    :bar-end="barEnd"
    :date-format="dateFormat"
  >
    <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">
import { ref } from 'vue'
import type { ChartRow } from 'hy-vue-gantt'

const chartStart = ref('2024-01-01')
const chartEnd = ref('2024-12-31')
const precision = ref('day')
const barStart = ref('start')
const barEnd = ref('end')
const dateFormat = "YYYY-MM-DD"

const rows = ref<ChartRow[]>([
  {
    id: 1,
    label: 'Project Planning',
    bars: [
      {
        start: '2024-01-01',
        end: '2024-01-15',
        ganttBarConfig: {
          id: '1',
          label: 'Initial Planning',
          style: { background: '#42b883' }
        }
      }
    ]
  },
  {
    id: 2,
    label: 'Development',
    bars: [
      {
        start: '2024-01-16',
        end: '2024-02-28',
        ganttBarConfig: {
          id: '2',
          label: 'Core Development',
          hasHandles: true,
          style: { background: '#35495e' }
        }
      }
    ]
  }
])
</script>
```

--------------------------------

### Install HyVue Gantt using yarn

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/installation.md

Installs the HyVue Gantt package and its dependencies using the yarn package manager.

```bash
yarn add hy-vue-gantt
```

--------------------------------

### Initialize Basic Gantt Chart Component

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/quick-start.md

Demonstrates the fundamental setup of a g-gantt-chart component, including defining the time range, precision, and binding project data rows with specific task bars.

```vue
<template>
  <g-gantt-chart
    :chart-start="chartStart"
    :chart-end="chartEnd"
    :precision="precision"
    :bar-start="barStart"
    :bar-end="barEnd"
    :row-height="40"
    grid
  >
    <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">
import { ref } from 'vue'
import type { ChartRow } from 'hy-vue-gantt'

const chartStart = ref('2024-01-01')
const chartEnd = ref('2024-03-31')
const precision = ref('day')
const barStart = ref('start')
const barEnd = ref('end')

const rows = ref<ChartRow[]>([
  {
    label: 'Design Phase',
    bars: [
      {
        start: '2024-01-05',
        end: '2024-01-20',
        ganttBarConfig: {
          id: '1',
          label: 'UI Design',
          style: { background: '#42b883' }
        }
      }
    ]
  }
])
</script>
```

--------------------------------

### HyVue Gantt Connection Relation Example

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/connections.md

Illustrates how to specify the relationship between connected bars using the 'relation' property. This example shows a 'Finish to Start' (FS) relationship with a 'bezier' connection type, defining how one task's completion affects another's start.

```typescript
const connection = {
  targetId: '2',
  relation: 'FS', // Finish to Start relationship
  type: 'bezier'
};
```

--------------------------------

### Install HyVue Gantt using npm

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/installation.md

Installs the HyVue Gantt package and its dependencies using the npm package manager.

```bash
npm install hy-vue-gantt
```

--------------------------------

### Time Management Properties

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/components/g-gantt-chart.md

This example shows how to configure the time management properties of the GGanttChart component, including chart start and end dates, precision, and date formatting.

```APIDOC
## Time Management

### Description
Configure the time range and precision for the Gantt chart.

### Method
Component Properties

### Endpoint
N/A (Component Properties)

### Parameters
#### Component Properties
- **chart-start** (string) - Required - The start date of the chart (e.g., 'YYYY-MM-DD').
- **chart-end** (string) - Required - The end date of the chart (e.g., 'YYYY-MM-DD').
- **precision** (string) - Optional - The time precision ('day', 'week', 'month', 'year'). Defaults to 'day'.
- **enable-minutes** (boolean) - Optional - Whether to enable minute-level precision. Defaults to false.
- **date-format** (string) - Optional - The format for displaying dates (e.g., 'YYYY-MM-DD HH:mm').

### Request Example
```vue
<template>
  <g-gantt-chart
    chart-start="2024-01-01"
    chart-end="2024-12-31"
    precision="day"
    :enable-minutes="true"
    date-format="YYYY-MM-DD HH:mm"
  />
</template>
```

### Response
N/A (Component Properties)
```

--------------------------------

### Initialize Basic Gantt Chart

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/examples/basic.md

Demonstrates the minimal setup required to render a Gantt chart using the g-gantt-chart and g-gantt-row components. It defines the chart timeline, precision, and initial row data.

```vue
<template>
  <g-gantt-chart
    :chart-start="chartStart"
    :chart-end="chartEnd"
    :precision="precision"
    :bar-start="barStart"
    :bar-end="barEnd"
    :date-format="dateFormat"
  >
    <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">
import { ref } from 'vue'

const chartStart = ref('2024-01-01')
const chartEnd = ref('2024-12-31')
const precision = ref('day')
const barStart = ref('start')
const barEnd = ref('end')
const dateFormat = "YYYY-MM-DD"

const rows = ref([
  {
    label: 'Project Planning',
    bars: [
      {
        start: '2024-01-01',
        end: '2024-01-15',
        ganttBarConfig: {
          id: '1',
          label: 'Initial Planning'
        }
      }
    ]
  }
])
</script>
```

--------------------------------

### Configure Task Dependencies

Source: https://github.com/xeyos88/hyvuegantt/blob/main/README.md

Example of defining task dependencies using the connections array within the ganttBarConfig object.

```typescript
const projectData = ref([
  {
    id: "design",
    label: "Design Phase",
    bars: [
      {
        start: "2024-01-01",
        end: "2024-01-15",
        ganttBarConfig: {
          id: "design-1",
          label: "UI Design",
          connections: [
            {
              targetId: "dev-1",
              type: "bezier",
              animated: true,
              relation: "FS",
              label: "Prerequisite",
              color: "#42b883"
            }
          ]
        }
      }
    ]
  },
  {
    id: "development",
    label: "Development Phase",
    bars: [
      {
        start: "2024-01-16",
        end: "2024-02-15",
        ganttBarConfig: {
          id: "dev-1",
          label: "Frontend Development",
          progress: 75,
          progressResizable: true
        }
      }
    ]
  }
])
```

--------------------------------

### Basic Connection Setup in HyVue Gantt

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/connections.md

Demonstrates how to define a basic connection between two Gantt bars by specifying the target bar's ID and connection properties like type, color, and pattern. This is the foundational step for establishing task dependencies.

```typescript
const bars = [
  {
    ganttBarConfig: {
      id: '1',
      connections: [
        {
          targetId: '2',
          type: 'straight',
          color: '#ff0000',
          pattern: 'solid'
        }
      ]
    }
  }
];
```

--------------------------------

### Basic GGanttChart Implementation

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/components/g-gantt-chart.md

This snippet demonstrates the minimal setup required to initialize a GGanttChart. It binds essential time properties and iterates over rows to render individual Gantt bars.

```vue
<template>
  <g-gantt-chart
    :chart-start="chartStart"
    :chart-end="chartEnd"
    :precision="precision"
    :bar-start="barStart"
    :bar-end="barEnd"
  >
    <g-gantt-row
      v-for="row in rows"
      :key="row.label"
      :label="row.label"
      :bars="row.bars"
    />
  </g-gantt-chart>
</template>
```

--------------------------------

### Different Time Precisions

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/examples/time.md

This example shows how to set different time precisions (hour, day, week, month) for the Gantt chart using the `precision` prop.

```APIDOC
## Different Time Precisions

### Description
This example demonstrates how to dynamically change the time precision of the Gantt chart. Users can select from 'hour', 'day', 'week', or 'month' to adjust the granularity of the displayed timeline.

### Method
N/A (Component Configuration)

### Endpoint
N/A (Component Configuration)

### Parameters
#### Component Props
- **precision** (string) - Required - The time precision for the chart. Accepts 'hour', 'day', 'week', 'month'.
- **currentPrecision** (ref) - Required - A reactive reference holding the currently selected precision.
- **precisions** (array) - Required - An array of available precision options.

### Request Example
```vue
<template>
  <div class="precision-demo">
    <select v-model="currentPrecision">
      <option v-for="p in precisions" :key="p" :value="p">
        {{ p }}
      </option>
    </select>

    <g-gantt-chart
      v-bind="chartConfig"
      :precision="currentPrecision"
    >
      <g-gantt-row
        v-for="row in rows"
        :key="row.label"
        :label="row.label"
        :bars="row.bars"
      />
    </g-gantt-chart>
  </div>
</template>

<script setup lang="ts">
const precisions = ['hour', 'day', 'week', 'month']
const currentPrecision = ref('day')
</script>
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

--------------------------------

### Basic Gantt Chart Demo

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/base.md

This snippet demonstrates how to use the GGanttChart and GGanttRow components to create a basic Gantt chart. It includes sample data for tasks, their labels, start and end times, and styling.

```APIDOC
## Basic Gantt Chart Demo

### Description
This section provides a Vue.js code example for implementing a basic Gantt chart using the `hy-vue-gantt` library. It showcases the setup of chart configurations and row data.

### Method
N/A (Client-side rendering)

### Endpoint
N/A (Client-side rendering)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

### Code Example
```vue
<script setup lang="ts">
import { ref } from 'vue'
import { GGanttChart, GGanttRow } from 'hy-vue-gantt'

const rows = ref([
  {
    label: 'Frontend Team',
    bars: [
      {
        ganttBarConfig: {
          id: 'task1',
          label: 'Project Setup',
          immobile: true,
          style: { background: '#FF6B6B' },
        },
        start: '2024-12-10 09:00',
        end: '2024-12-10 12:00',
      },
      {
        ganttBarConfig: {
          id: 'task2',
          label: 'Router Configuration',
          style: { background: '#4ECDC4' },
        },
        start: '2024-12-10 13:00',
        end: '2024-12-10 17:00',
      },
      {
        ganttBarConfig: {
          id: 'task3',
          label: 'Store Implementation',
          style: { background: '#96CEB4' },
        },
        start: '2024-12-11 09:00',
        end: '2024-12-11 16:00',
      },
    ],
  },
  {
    label: 'Backend Team',
    bars: [
      {
        ganttBarConfig: {
          id: 'task4',
          label: 'Setup Database',
          immobile: true,
          style: { background: '#D4A5A5' },
        },
        start: '2024-12-10 09:00',
        end: '2024-12-10 15:00',
      },
      {
        ganttBarConfig: {
          id: 'task5',
          label: 'API Development',
          style: { background: '#9FA8DA' },
        },
        start: '2024-12-10 15:30',
        end: '2024-12-11 12:00',
      },
      {
        ganttBarConfig: {
          id: 'task6',
          label: 'Testing APIs',
          style: { background: '#B39DDB' },
        },
        start: '2024-12-11 13:00',
        end: '2024-12-11 17:00',
      },
    ],
  },
])
</script>

<template>
  <div class="demo-container">
    <g-gantt-chart
      chart-start="2024-12-10 08:00"
      chart-end="2024-12-13 23:00"
      precision="hour"
      bar-start="start"
      bar-end="end"
    >
      <g-gantt-row
        v-for="row in rows"
        :key="row.label"
        :label="row.label"
        :bars="row.bars"
        highlightOnHover
      />
    </g-gantt-chart>
  </div>
</template>
```
```

--------------------------------

### Customizing Command Section

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/components/g-gantt-chart.md

This example demonstrates how to customize the command section of the GGanttChart component using Vue.js slots, allowing for flexible control interface design.

```APIDOC
## Customizing Command Section

### Description
This section shows how to use the `commands` slot to create a custom control interface for the Gantt chart. It includes examples for zoom controls, navigation, history management, and export functionality.

### Method
Slot-based customization

### Endpoint
N/A (Component Slot)

### Parameters
#### Slot Props
- **zoomIn** (function) - Function to zoom in.
- **zoomOut** (function) - Function to zoom out.
- **scrollRowUp** (function) - Function to scroll rows up.
- **scrollRowDown** (function) - Function to scroll rows down.
- **expandAllGroups** (function) - Function to expand all groups.
- **collapseAllGroups** (function) - Function to collapse all groups.
- **handleToStart** (function) - Function to navigate to the start of the timeline.
- **handleBack** (function) - Function to navigate backward in the timeline.
- **handleForward** (function) - Function to navigate forward in the timeline.
- **handleToEnd** (function) - Function to navigate to the end of the timeline.
- **undo** (function) - Function to undo the last action.
- **redo** (function) - Function to redo the last undone action.
- **canUndo** (boolean) - Indicates if undo is possible.
- **canRedo** (boolean) - Indicates if redo is possible.
- **isAtTop** (boolean) - Indicates if the view is at the top.
- **isAtBottom** (boolean) - Indicates if the view is at the bottom.
- **zoomLevel** (number) - The current zoom level.
- **canZoomIn** (boolean) - Indicates if zooming in is possible.
- **canZoomOut** (boolean) - Indicates if zooming out is possible.
- **export** (function) - Function to export the chart.

### Request Example
```vue
<template>
  <g-gantt-chart>
    <template #commands="{ zoomIn, zoomOut, canZoomIn, canZoomOut, undo, redo, canUndo, canRedo, export }">
      <div class="custom-commands">
        <div class="zoom-controls">
          <button @click="zoomOut" :disabled="!canZoomOut">-</button>
          <span>Zoom: {{ zoomLevel }}x</span>
          <button @click="zoomIn" :disabled="!canZoomIn">+</button>
        </div>
        <div class="history">
          <button @click="undo" :disabled="!canUndo">Undo</button>
          <button @click="redo" :disabled="!canRedo">Redo</button>
        </div>
        <div class="export">
          <button @click="export">Export</button>
        </div>
      </div>
    </template>
  </g-gantt-chart>
</template>
```

### Response
N/A (Component Slot)
```

--------------------------------

### Vue: Implement Complex Project Gantt Chart with Connections

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/examples/advanced.md

This example demonstrates a complex project timeline visualization using Hyvue Gantt. It includes features like custom headers, custom bar labels with progress display, and task dependencies visualized with connections.

```vue
<template>
  <g-gantt-chart
    v-bind="chartConfig"
    :enable-connections="true"
    :push-on-overlap="true"
    :push-on-connect="true"
  >
    <template #label-column-title>
      <div class="custom-header">
        Project Timeline
      </div>
    </template>

    <g-gantt-row
      v-for="row in rows"
      :key="row.label"
      :label="row.label"
      :bars="row.bars"
    >
      <template #bar-label="{ bar }">
        <div class="custom-bar-label">
          <div>{{ bar.ganttBarConfig.label }}</div>
          <div class="progress">
            {{ bar.progress }}%
          </div>
        </div>
      </template>
    </g-gantt-row>
  </g-gantt-chart>
</template>

<script setup lang="ts">
// Complex project data with dependencies and progress tracking
const rows = ref([
  {
    label: 'Planning',
    bars: [{
      start: '2024-01-01',
      end: '2024-01-15',
      progress: 100,
      ganttBarConfig: {
        id: '1',
        label: 'Requirements',
        connections: [{
          targetId: '2',
          type: 'bezier',
          animated: true
        }]
      }
    }]
  },
  // ... additional complex rows
])
</script>

<style scoped>
.custom-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 8px;
}

.progress {
  font-size: 0.8em;
  color: #666;
}
</style>
```

--------------------------------

### Implement Advanced Gantt Chart Connections (Vue)

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/examples/connections.md

This example demonstrates advanced Gantt chart connections, including different types like 'bezier' and 'squared', custom patterns ('dash', 'dot'), animations, and color options. It also shows the 'push-on-connect' feature.

```vue
<template>
  <g-gantt-chart
    v-bind="chartConfig"
    :enable-connections="true"
    :push-on-connect="true"
  >
    <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 connections = [
  {
    targetId: '2',
    type: 'bezier',
    pattern: 'dash',
    animated: true,
    animationSpeed: 'normal'
  },
  {
    targetId: '3',
    type: 'squared',
    pattern: 'dot',
    color: '#42b883'
  }
]

const rows = ref([
  {
    label: 'Connected Tasks',
    bars: [{
      start: '2024-01-01',
      end: '2024-01-15',
      ganttBarConfig: {
        id: '1',
        label: 'Root Task',
        connections
      }
    }]
  }
])
</script>
```

--------------------------------

### Implement Basic Gantt Chart in Vue 3

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/introduction.md

This snippet demonstrates how to initialize a basic Gantt chart using the g-gantt-chart and g-gantt-row components. It includes the necessary setup for chart boundaries, data rows, and bar configuration.

```vue
<template>
  <g-gantt-chart
    :chart-start="chartStart"
    :chart-end="chartEnd"
    :rows="rows"
    :precision="precision"
    :bar-start="barStart"
    :bar-end="barEnd"
    :date-format="dateFormat"
  >
    <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 chartStart = "2024-01-01"
const chartEnd = "2024-12-31"
const precision = "day"
const barStart = "start"
const barEnd = "end"
const dateFormat = "YYYY-MM-DD"

const rows = [
  {
    label: "Task 1",
    bars: [
      {
        start: "2024-01-01",
        end: "2024-01-15",
        ganttBarConfig: {
          id: "1",
          label: "Task 1",
          style: { background: "#42b883" }
        }
      }
    ]
  }
]
</script>
```

--------------------------------

### Vue: Track Planned vs. Actual Timelines in Gantt Chart

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/examples/advanced.md

This example demonstrates how to visualize both planned and actual timelines for project tracking using Hyvue Gantt's `show-planned-bars` feature. It allows for variance analysis by displaying planned bars with distinct styling.

```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>
```

--------------------------------

### Implement Gantt Chart Connections with Vue

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/connection.md

This example shows how to define task bars with connections in a Vue component. It utilizes the GGanttChart and GGanttRow components to visualize dependencies between tasks using different connection types like bezier, squared, and straight lines.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { GGanttChart, GGanttRow } from 'hy-vue-gantt'

const rows = ref([
  {
    label: 'Design Phase',
    bars: [
      {
        ganttBarConfig: {
          id: 'design1',
          label: 'Wireframes',
          style: { background: '#FF6B6B' },
          connections: [
            { 
              targetId: 'design2',
              type: 'bezier',
              animated: true,
              color: '#FF6B6B' 
            }
          ]
        },
        start: '2024-12-25 09:00',
        end: '2024-12-25 14:00',
      },
      {
        ganttBarConfig: {
          id: 'design2',
          label: 'UI Design',
          style: { background: '#4ECDC4' },
          connections: [
            { 
              targetId: 'dev1',
              type: 'squared',
              pattern: 'dash',
              color: '#4ECDC4' 
            }
          ]
        },
        start: '2024-12-25 15:00',
        end: '2024-12-26 12:00',
      },
    ],
  },
  {
    label: 'Development',
    bars: [
      {
        ganttBarConfig: {
          id: 'dev1',
          label: 'Frontend Implementation',
          style: { background: '#96CEB4' },
          connections: [
            { 
              targetId: 'dev2',
              type: 'straight',
              animated: true,
              color: '#96CEB4' 
            }
          ]
        },
        start: '2024-12-26 13:00',
        end: '2024-12-26 14:00',
      },
      {
        ganttBarConfig: {
          id: 'dev2',
          label: 'Testing',
          style: { background: '#D4A5A5' },
        },
        start: '2024-12-26 13:00',
        end: '2024-12-26 17:00',
      },
    ],
  },
])
</script>

<template>
  <div class="demo-container" v-if="isLibraryReady">
    <g-gantt-chart
      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"
        :key="row.label"
        :label="row.label"
        :bars="row.bars"
        highlightOnHover
      />
    </g-gantt-chart>
  </div>
</template>
```

--------------------------------

### Implement Planned Bars and Tooltip Data

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/api/types.md

Structures for managing planned versus actual dates in Gantt bars. Includes an example of how to instantiate a bar object with planned date properties and custom styling.

```typescript
interface PlannedBarConfig {
  start_planned?: string | Date;
  end_planned?: string | Date;
  plannedStyle?: CSSProperties;
}
const barsWithPlanning: GanttBarObject[] = [
  {
    start: '2024-02-15',
    end: '2024-02-28',
    start_planned: '2024-02-01',
    end_planned: '2024-02-20',
    ganttBarConfig: {
      id: 'task-1',
      label: 'Development Task',
      style: { backgroundColor: '#2196f3', color: 'white' },
      plannedStyle: { backgroundColor: '#e3f2fd', border: '2px dashed #1976d2', opacity: 0.7 }
    }
  }
]
```

--------------------------------

### Vue.js Gantt Chart Component Configuration

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/others.md

Demonstrates the setup of the GGanttChart component in a Vue.js template. It includes binding data for rows and milestones, and configuring various chart properties like start/end dates, precision, and interaction behaviors.

```Vue.js
<template>
  <div class="demo-container">
    <g-gantt-chart
      chart-start="2024-12-10 08:00"
      chart-end="2025-01-01 18:00"
      precision="hour"
      bar-start="start"
      bar-end="end"
      :max-rows="5"
      :push-on-connect="true"
      :push-on-overlap="true"
      :enable-connections="true"
      grid
      label-column-title="Rows"
      :dayOptionLabel="['day','name','doy']"
      :milestones="milestones"
    >
      <g-gantt-row
        v-for="row in rows"
        :key="row.label"
        :label="row.label"
        :bars="row.bars"
        highlightOnHover
      />
    </g-gantt-chart>
  </div>
</template>
```

--------------------------------

### Initialize GGanttChart Component

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/chart-configuration.md

Demonstrates the basic configuration properties required to initialize the GGanttChart component, including time ranges, precision, and layout settings.

```typescript
<g-gantt-chart
  :chart-start="'2024-01-01'"
  :chart-end="'2024-12-31'"
  :precision="'day'"
  :bar-start="'start'"
  :bar-end="'end'"
  :row-height="40"
  :color-scheme="'default'"
  :grid="true"
  :push-on-overlap="true"
  :no-overlap="false"
  :commands="true"
  :auto-scroll-to-today="true"
/>
```

--------------------------------

### GET /milestones

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/others.md

Defines the structure and data requirements for project milestones displayed within the Gantt chart.

```APIDOC
## GET /milestones

### Description
Retrieves or defines the list of critical project milestones to be rendered on the Gantt timeline.

### Method
GET

### Endpoint
/milestones

### Parameters
#### Request Body
- **id** (string) - Required - Unique identifier for the milestone.
- **date** (string) - Required - ISO 8601 formatted date string (e.g., '2024-12-10 20:00').
- **name** (string) - Required - Display name of the milestone.
- **description** (string) - Optional - Detailed information about the milestone.

### Request Example
{
  "id": "1111",
  "date": "2024-12-10 20:00",
  "name": "Project Launch",
  "description": "Official launch of the new platform"
}

### Response
#### Success Response (200)
- **milestones** (array) - List of milestone objects.

#### Response Example
[
  {
    "id": "1111",
    "date": "2024-12-10 20:00",
    "name": "Project Launch",
    "description": "Official launch of the new platform"
  }
]
```

--------------------------------

### Update Gantt Data Reactively

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/quick-start.md

Demonstrates how to update task start and end dates programmatically while maintaining Vue's reactivity system.

```typescript
const updateTask = (barId: string, newStart: string, newEnd: string) => {
  const row = rows.value.find(row => 
    row.bars.some(bar => bar.ganttBarConfig.id === barId)
  )
  if (row) {
    const bar = row.bars.find(bar => bar.ganttBarConfig.id === barId)
    if (bar) {
      bar.start = newStart
      bar.end = newEnd
    }
  }
}
```

--------------------------------

### Current Time Indicator

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/examples/time.md

This example shows how to enable and customize the current time indicator on the Gantt chart using the `current-time` and `current-time-label` props.

```APIDOC
## Current Time Indicator

### Description
This example demonstrates how to display a visual indicator for the current time on the Gantt chart. This helps users quickly see where the present moment falls within the timeline.

### Method
N/A (Component Configuration)

### Endpoint
N/A (Component Configuration)

### Parameters
#### Component Props
- **current-time** (boolean) - Optional - If true, displays the current time indicator.
- **current-time-label** (string) - Optional - Custom label for the current time indicator. Defaults to 'Now'.

### Request Example
```vue
<template>
  <g-gantt-chart
    v-bind="chartConfig"
    :current-time="true"
    current-time-label="Now"
  >
    <g-gantt-row
      v-for="row in rows"
      :key="row.label"
      :label="row.label"
      :bars="row.bars"
    />
  </g-gantt-chart>
</template>
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

--------------------------------

### Contributing to HyVueGantt

Source: https://github.com/xeyos88/hyvuegantt/blob/main/README.md

Follow these steps to contribute to the HyVueGantt project. This includes forking the repository, creating a feature branch, committing changes, and opening a Pull Request. Refer to the CONTRIBUTING.md for more details.

```git
git checkout -b feature/amazing-feature
git commit -m 'Add amazing feature'
git push origin feature/amazing-feature
```

--------------------------------

### Listen to HyVue Gantt Component Events

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/api/events.md

Examples of event listeners for bar, row, connection, and chart interactions within the Vue template.

```typescript
@click-bar="(event: GanttBarEvent) => void"
@dragend-bar="(event: GanttBarDragEvent) => void"
@row-drop="(event: RowDragEvent) => void"
@connection-complete="(event: ConnectionCompleteEvent) => void"
@import-data="(result: ImportResult) => void"
@range-selection="(event: RangeSelectionEvent) => void"
```

--------------------------------

### Configure Chart Import Functionality

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/api/props.md

Defines the interface for importing data into the Gantt chart. It specifies allowed formats and field mapping for bar start and end dates.

```typescript
interface ImportProps {
  showImporter?: boolean;
  importerTitle?: string;
  importerDefaultFormat?: ImportFormat;
  importerAllowedFormats?: ImportFormat[];
  importerBarStartField?: string;
  importerBarEndField?: string;
}

type ImportFormat = "jira" | "csv" | "excel";
```

--------------------------------

### Performance Optimization Tips

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/chart-configuration.md

Provides recommendations for optimizing the performance of the Gantt chart, especially when dealing with large datasets.

```APIDOC
## Performance Optimization

### Description
Follow these guidelines to ensure the GGanttChart component performs optimally, particularly with extensive data.

### Recommendations
1.  **Appropriate Precision**: Select a `precision` setting that matches your data granularity (e.g., 'day' instead of 'hour' if not needed).
2.  **Limit Visible Range**: Keep `chart-start` and `chart-end` focused on the most relevant period to reduce rendering load.
3.  **Pagination**: For very large datasets, implement pagination to load and display data in manageable chunks.
4.  **`maxRows` Property**: Utilize the `maxRows` configuration option to limit the number of rows rendered at once, preventing performance degradation.
```

--------------------------------

### Backend Authentication Configuration

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/live/grouping.md

Configuration for the Authentication service within the backend. It defines the task 'Auth Service' with a start and end date, and specifies connection details to subsequent tasks.

```javascript
{
              id: 'be-2',
              label: 'Auth Service',
              style: { background: '#2ECC71' },
              connections: [{ targetId: 'be-3', type: 'bezier', pattern: 'dash', color: '#2ECC71' }]
            }
```

--------------------------------

### Default Color Scheme Object

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/api/color-schemes.md

Provides the specific color values for the default color scheme in HyVue Gantt. This object can be used as a reference or starting point for creating custom schemes.

```typescript
{
  primary: '#eeeeee',
  secondary: '#E0E0E0',
  ternary: '#F5F5F5',
  quartenary: '#ededed',
  hoverHighlight: 'rgba(204, 216, 219, 0.5)',
  markerCurrentTime: '#000',
  text: '#404040',
  background: 'white',
  commands: '#eeeeee',
  rangeHighlight: '#000',
  holidayHighlight: 'rgba(240, 120, 96, 0.8)',
  barContainer: 'rgba(0, 0, 0, 0.7)',
  rowContainer: 'rgba(255, 255, 255, 1)'
}
```

--------------------------------

### Configure Gantt Bar Connections

Source: https://context7.com/xeyos88/hyvuegantt/llms.txt

Shows how to enable and customize connections between gantt bars to visualize task dependencies. Includes configuration for connection types, animation, and relation logic like Finish-to-Start.

```vue
<template>
  <g-gantt-chart
    :enable-connections="true"
    :push-on-connect="true"
    default-connection-type="bezier"
    @connection-complete="handleConnectionComplete"
  >
    <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">
import { ref } from 'vue'
import type { GanttBarConnection } from 'hy-vue-gantt'

const rows = ref([
  {
    label: 'Design Phase',
    bars: [{
      start: '2024-01-01',
      end: '2024-01-15',
      ganttBarConfig: {
        id: 'design',
        connections: [{
          targetId: 'dev',
          type: 'bezier',
          relation: 'FS'
        }]
      }
    }]
  }
])
</script>
```

--------------------------------

### Run Project Quality Checks

Source: https://github.com/xeyos88/hyvuegantt/blob/main/CONTRIBUTING.md

Commands to execute the test suite using Vitest and run linting to ensure code quality before submitting a pull request.

```bash
npm run test
npm run lint
```

--------------------------------

### Basic Chart Configuration

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/guide/chart-configuration.md

Demonstrates the fundamental properties for configuring the GGanttChart component, such as chart date range, time precision, and visual elements.

```APIDOC
## Basic Chart Configuration

### Description
This section details the essential properties for initializing and configuring the GGanttChart component.

### Properties
- `chart-start` (string | Date) - Required - Defines the start date of the visible chart range.
- `chart-end` (string | Date) - Required - Defines the end date of the visible chart range.
- `precision` (string) - Optional - Sets the time unit for the chart. Allowed values: 'hour', 'day', 'week', 'month'. Defaults to 'day'.
- `bar-start` (string) - Optional - Specifies the data property name for the start date of a bar. Defaults to 'start'.
- `bar-end` (string) - Optional - Specifies the data property name for the end date of a bar. Defaults to 'end'.
- `row-height` (number) - Optional - Sets the height of each row in pixels. Defaults to 30.
- `color-scheme` (string) - Optional - Applies a predefined color scheme to the chart. Defaults to 'default'.
- `grid` (boolean) - Optional - Toggles the display of the grid lines. Defaults to true.
- `push-on-overlap` (boolean) - Optional - Enables pushing bars to avoid overlap. Defaults to true.
- `no-overlap` (boolean) - Optional - Enforces no overlap between bars within the same row. Defaults to false.
- `commands` (boolean) - Optional - Enables interactive commands on bars. Defaults to true.
- `auto-scroll-to-today` (boolean) - Optional - Automatically scrolls the chart to the current date on load. Defaults to false.

### Request Example
```html
<g-gantt-chart
  :chart-start="'2024-01-01'"
  :chart-end="'2024-12-31'"
  :precision="'day'"
  :bar-start="'start'"
  :bar-end="'end'"
  :row-height="40"
  :color-scheme="'default'"
  :grid="true"
  :push-on-overlap="true"
  :no-overlap="false"
  :commands="true"
  :auto-scroll-to-today="true"
/>
```
```

--------------------------------

### Configure Gantt Chart Time Representation

Source: https://github.com/xeyos88/hyvuegantt/blob/main/docs/components/g-gantt-chart.md

Define the start and end dates, precision level, and date formatting for the Gantt chart. This ensures the timeline accurately reflects the project schedule requirements.

```vue
<template>
  <g-gantt-chart
    chart-start="2024-01-01"
    chart-end="2024-12-31"
    precision="day"
    :enable-minutes="true"
    date-format="YYYY-MM-DD HH:mm"
  />
</template>
```
Tokens:
Raw