Skip to main content

rollups

PRO

The functionality is available in PRO Edition only

Description​

Optional. Shows or hides task rollups on summary tasks

Usage​

rollups?: boolean | { type: "all" | "closest" };

Parameters​

  • rollups - enables task rollup visualization on summary tasks. Accepts the following values:
    • false - rollups are disabled (default)
    • true or "closest" - tasks roll up to the closest parent summary task only
    • "all" - tasks roll up to all parent summary tasks in the hierarchy

Tasks can only roll up to summary tasks, not to any nearest parent that has subtasks.

Example​

<script setup>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const data = getData();

  const tasks = [
    {
      id: 1,
      start: new Date(2024, 3, 1),
      duration: 10,
      text: "Website Redesign",
      progress: 40,
      type: "summary",
      open: true,
    },
    {
      id: 2,
      start: new Date(2024, 3, 1),
      duration: 4,
      text: "Design mockups",
      progress: 80,
      parent: 1,
      type: "task",
      rollup: true,
    },
    {
      id: 3,
      start: new Date(2024, 3, 5),
      duration: 6,
      text: "Frontend development",
      progress: 20,
      parent: 1,
      type: "task",
      rollup: true,
    },
  ];
</script>

<template>
  <Gantt
      :rollups="true"
      :cellHeight="45"
      :tasks="tasks"
      :links="data.links"
      :scales="data.scales" />
</template>

Related sample: Rollups

Related articles: