Skip to main content

ResourceLoad API

PRO

The functionality is available in PRO Edition only

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} {columns} {mode} {template} />

You can import the component from @svar-ui/svelte-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 Svelte 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​

<script>
  import { Gantt, ResourceLoad } from "@svar-ui/svelte-gantt";

  let api = $state();
</script>

<div class="gantt">
  <Gantt
    bind:this={api}
    {tasks}
    {links}
    {scales}
    {resources}
    {assignments}
  />
</div>
<div class="resource">
  <ResourceLoad {api} />
</div>

<style>
  .gantt {
    height: 60%;
    border-bottom: 2px solid var(--wx-gantt-border-color);
  }
  .resource {
    height: 40%;
  }
</style>

Related articles: