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" :template="template" />

You can import the component from @svar-ui/vue-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 Vue component (SFC); 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 setup>
  import { Gantt, ResourceLoad } from "@svar-ui/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 articles: