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="api" :columns="columns" :mode="mode" :histogram="histogram" :template="template" :draggableRows="draggableRows" />

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

api: IApi,
columns?: false | {
    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?: "utilization" | "histogram",
histogram?: {
    overloadHeadroom?: number,
    capacityLine?: boolean,
},
template?: (load: IResourceLoad) => string,
draggableRows?: boolean | ((row: IResource) => boolean),

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, or false to hide the panel; defaults to name, total, and capacity columns (see getResourceColumns); each column is IResourceColumn object:
    • id - resource field to display; built-in values: "name", "total", "capacity"; 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 Vue component (SFC); for the "name" column, renders inside the tree-indent + avatar shell, not in place of it
  • mode - (optional) display mode; "utilization" renders numbers in cells (e.g., 8h, 150%), color-coded by load; "histogram" renders a bar per cell with a capacity line instead of numbers; Default: "utilization"
  • histogram - (optional) settings for "histogram" mode:
    • overloadHeadroom - multiplier applied to the cell's nominal capacity (working hours per day × days in the cell) to set the upper bound of the bar scale, i.e. the point at which an overloaded bar is clipped; if the nominal capacity is 0, the upper bound falls back to the capacity line value instead; Default: 1.25
    • capacityLine - shows the capacity line on histogram bars; set to false to hide it; Default: true
  • template - (optional) (load) => string — cell renderer for load values in "utilization" mode; the load object has hours (allocated hours) and percent (allocation percentage, 100 = fully loaded); Default: load => `${load.hours}h`
  • draggableRows - (optional) enables native HTML5 drag-and-drop for resource rows, allowing them to be dragged out of the grid. You should handle the drag events yourself via locateTask. Default: false
    • boolean - enables or disables dragging for all rows
    • (row) => boolean - enables dragging conditionally, per row

Example​

<script setup>
  import { Gantt, ResourceLoad } from "@svar/vue-gantt";
  import { ref } from "vue";

  const api = ref(null);
</script>

<template>
  <div class="gantt">
    <Gantt
      ref="api"
      :tasks="tasks"
      :links="links"
      :scales="scales"
      :resources="resources"
      :assignments="assignments"
    />
  </div>
  <div class="resource">
    <ResourceLoad :api="api" />
  </div>
</template>

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

Related samples:

Related articles: