laif-ds/dist/agent-docs/components/GanttChart.md

Design System di Laif con componenti React basati su principi di Atomic Design

# GanttChart

## Overview

Composable Gantt chart with a tree, time scale, and draggable bars. Built as a root `Gantt` component with subcomponents `Gantt.Controls` and `Gantt.Chart`. Supports zoom dimensions, drag step sizes, programmatic callbacks, and custom left-render content for items.

---

## Components & Props

### Gantt (root)

| Prop                  | Type              | Default                    | Description                                 |
| --------------------- | ----------------- | -------------------------- | ------------------------------------------- |
| `children`            | `React.ReactNode` | —                          | Compose `Gantt.Controls` and `Gantt.Chart`. |
| `draggable`           | `boolean`         | `false`                    | Enable dragging/resizing of bars.           |
| `defaultDimension`    | `GanttDimensions` | `GanttDimensions.HOUR`     | Initial zoom (hour, day, etc.).             |
| `defaultDragStepSize` | `DragStepSizes`   | `DragStepSizes.THIRTY_MIN` | Initial drag step.                          |
| `treeTitle`           | `string`          | `"Attività"`               | Title of the left tree column.              |

See `enums` in `ui/gantt/enums/` for `GanttDimensions` and `DragStepSizes` values.

### Gantt.Chart

| Prop               | Type                     | Default      | Description                                      |
| ------------------ | ------------------------ | ------------ | ------------------------------------------------ |
| `data`             | `GanttDataType[]`        | **required** | Items to render (with optional nested children). |
| `className`        | `string`                 | `undefined`  | Wrapper classes.                                 |
| `onBarDoubleClick` | `(bar) => void`          | `undefined`  | Invoked on item double click.                    |
| `onBarChange`      | `(bar, newData) => void` | `undefined`  | Invoked after drag/resize changes.               |

### Gantt.Controls

| Prop        | Type     | Default     | Description              |
| ----------- | -------- | ----------- | ------------------------ |
| `className` | `string` | `undefined` | Toolbar wrapper classes. |

---

## Data Types

Minimal item structure (`ui/gantt/types/GanttData.tsx`):

```ts
type RawGanttDataType = {
  key: string;
  title: string;
  color?: string;
  data?: BarItemDataType; // Repeat or fixed datetime interval
  children?: GanttDataType[]; // Nested items
  leftRender?: React.ReactNode | ((bar) => React.ReactNode);
};

type NoRepeatDataType = { startDate: string; endDate: string };
type RepeatDataType = {
  repeatType: DataRepeatTypes;
  fromTime: number;
  toTime: number;
  fromDate?: string;
  toDate?: string;
  weekdays?: number[];
  monthdays?: number[];
};
```

---

## Examples

### Default

```tsx
import Gantt from "laif-ds/ui/gantt/components/Gantt/Gantt";

export function Basic() {
  return (
    <div className="h-[500px]">
      <Gantt>
        <Gantt.Controls />
        <Gantt.Chart data={sampleData} />
      </Gantt>
    </div>
  );
}
```

### Draggable + Defaults

```tsx
import { GanttDimensions, DragStepSizes } from "laif-ds/ui/gantt/enums";

export function Draggable() {
  return (
    <div className="h-[500px]">
      <Gantt
        draggable
        defaultDimension={GanttDimensions.DAY}
        defaultDragStepSize={DragStepSizes.ONE_DAY}
      >
        <Gantt.Controls />
        <Gantt.Chart data={sampleData} />
      </Gantt>
    </div>
  );
}
```

### Custom Tree Title

```tsx
<div className="h-[500px]">
  <Gantt draggable treeTitle="Progetti">
    <Gantt.Controls />
    <Gantt.Chart data={sampleData} />
  </Gantt>
</div>
```

---

## Notes

- **Virtualization**: Tree, bars, and scale use windowed lists for performance.
- **Current time**: Auto-updates while scrolling to keep the date indicator in sync.
- **Left render**: Use `leftRender` to inject icons/actions next to item titles.