zoom

Description

Enables zooming in Gantt

Usage

zoom?: boolean | 
{
    level: number,
    levels?: [{
        minCellWidth: number,
        maxCellWidth: number,
        scales: [{
            unit: string,
            step: number,
            format: string,
            }]
        }];
    };

Parameters

• zoom - enables/disables zooming: true (default) enables default zoom settings and false disables zooming

It can also be an object with the next parameters:

• level - (required) initial zoom level (from 0 to 5 by default); the number of levels depends on the number of the levels objects in the levels array below
• levels - (required) an array of objects with the zoom data:
  • minCellWidth - (optional) minimum cell width; if not set, the minCellWidth value from the initial level is applied
  • maxCellWidth - (optional) maximum cell width; if not set, the maxCellWidth value from the initial level is applied
  • scales - (required) an array of objects with the scales data:
    • unit - (required) the scale unit ("hour" | "day" | "week" | "month" | "quarter" | "year")
    • step - (required) number of units per cell
    • format - (required) defines the format for each scale unit; it can be defined as a string of the format supported by date-fns and as a function for custom formatting. The function receives two parameters: the unit start and end dates. It should return the string with the formatted date.

Example

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@wx/svelte-gantt";
  
  const data = getData();

  const zoomConfig = {
    level: 3,
    levels: [
        {
            minCellWidth: 200,
            maxCellWidth: 400,
            scales: [{ unit: "year", step: 1, format: "yyyy" }],
        },
        {
            minCellWidth: 150,
            maxCellWidth: 400,
            scales: [
                { unit: "year", step: 1, format: "yyyy" },
                { unit: "quarter", step: 1, format: "QQQQ" },
            ],
        },
        {
            minCellWidth: 250,
            maxCellWidth: 350,
            scales: [
                { unit: "quarter", step: 1, format: "QQQQ" },
                { unit: "month", step: 1, format: "MMMM yyy" },
            ],
        },
        {
            minCellWidth: 100,
            scales: [
                { unit: "month", step: 1, format: "MMMM yyy" },
                { unit: "week", step: 1, format: "'week' w" },
            ],
        },
        {
            maxCellWidth: 200,
            scales: [
                { unit: "month", step: 1, format: "MMMM yyy" },
                { unit: "day", step: 1, format: "d", css: dayStyle },
            ],
        },
        {
            minCellWidth: 25,
            maxCellWidth: 100,
            scales: [
                { unit: "day", step: 1, format: "MMM d", css: dayStyle },
                { unit: "hour", step: 6, format: hoursTemplate },
            ],
        },
        {
            maxCellWidth: 120,
            scales: [
                { unit: "day", step: 1, format: "MMM d", css: dayStyle },
                { unit: "hour", step: 1, format: "HH:mm" },
            ],
        },
    ],
};  

  

</script>

<Gantt
 zoom={zoomConfig}
 tasks={data.tasks} />