Skip to main content

zoom

Description

Enables zooming in Gantt

Usage

zoom?: boolean | 
{
level: number,
minCellWidth?: number,
maxCellWidth?: 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
  • minCellWidth - (optional) minimum cell width that will be applied to all levels where the custom minCellWidth for a level is not set; if not set, the value of 50px is applied
  • maxCellWidth - (optional) maximum cell width that will be applied to all levels where the custom maxCellWidth for a level is not set; if not set, the value of 300px is applied
  • levels - (required) an array of objects with the zoom data:
    • minCellWidth - (optional) minimum cell width for a level; if not set, the value from minCellWidth parameter for a default level is taken
    • maxCellWidth - (optional) maximum cell width for a level; if not set, maxCellWidth value for a default 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

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

const zoomConfig = {
maxCellWidth: 400,
level: 3,
levels: [
{
minCellWidth: 200,
scales: [{ unit: "year", step: 1, format: "yyyy" }],
},
{
minCellWidth: 150,
scales: [
{ unit: "year", step: 1, format: "yyyy" },
{ unit: "quarter", step: 1, format: "QQQQ" },
],
},
{
minCellWidth: 250,
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,
scales: [
{ unit: "day", step: 1, format: "MMM d", css: dayStyle },
{ unit: "hour", step: 6, format: hoursTemplate },
],
},
{
scales: [
{ unit: "day", step: 1, format: "MMM d", css: dayStyle },
{ unit: "hour", step: 1, format: "HH:mm" },
],
},
],
};

function App() {
return (
<Gantt zoom={zoomConfig} tasks={data.tasks} />
);
}

export default App;