Skip to main content

ResourceLoad API

The functionality is available in PRO Edition only

PRO

Description​

ResourceLoad component for visualizing resource workload over time

Displays workload per resource for each time period defined by the Gantt scale, with color-coded overload indication.

Usage​

<ResourceLoad api={api} columns={columns} mode={mode} template={template} />

You can import the component from @svar-ui/react-gantt.

api: IApi,
columns?: {
    id: string,
    header?: string,
    width?: number,
    flexgrow?: number,
    align?: "left" | "right" | "center",
    resize?: boolean,
    sort?: boolean | TSortFunction,
    getter?: (row: IComputedResource) => any,
    template?: (value: any) => string,
    cell?: any,
}[],
mode?: "grid",
template?: (load: IResourceLoad) => string,

Parameters​

  • api - (required) the Gantt API object; pass the same reference used by the Gantt component
  • columns - (optional) array of column definitions for the fixed left panel; defaults to name and total columns (see getResourceColumns); each column is IResourceColumn object:
    • id - resource field to display; built-in values: "name", "total"; any key from IResource is allowed
    • header - column header text
    • width - fixed column width in pixels
    • flexgrow - grow factor (like CSS flex-grow)
    • align - cell alignment: "left" | "center" | "right"
    • resize - allows column resize;
    • sort - enables sorting; accepts boolean (true by default) or a custom comparator function;
    • getter - (row) => value — custom value extractor; defaults to row[id]
    • template - (value) => string — custom value formatter
    • cell - accepts a React component; for the "name" column, renders inside the tree-indent + avatar shell, not in place of it
  • mode - (optional) display mode (currently only "grid" is supported); renders numbers in cells (e.g., 8h, 150%);
  • template - (optional) (load) => string — cell renderer for load values; the load object has hours (allocated hours) and percent (allocation percentage, 100 = fully loaded); Default: load => `${load.hours}h`

Example​

import { useRef } from "react";
import { Gantt, ResourceLoad } from "@svar-ui/react-gantt";

function App() {
  const api = useRef(null);

  return (
    <>
      <div className="gantt">
        <Gantt
          ref={api}
          tasks={tasks}
          links={links}
          scales={scales}
          resources={resources}
          assignments={assignments}
        />
      </div>
      <div className="resource">
        <ResourceLoad api={api.current} />
      </div>
    </>
  );
}

export default App;
.gantt {
  height: 60%;
  border-bottom: 2px solid var(--wx-gantt-border-color);
}
.resource {
  height: 40%;
}

Related articles: