durationUnit

Description

Defines duration unit for tasks

Usage

durationUnit:"hour"|"day";

Parameters

• hour - sets the task duration to the hour unit, which allows users to select date and time
• day (default) - the task duration will be measured in days

Example

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
  
  const data = getData();
  
  </script>

<Gantt {tasks} durationUnit="hour" />

::: info durationUnit change requires data reload. When dynamically changing the durationUnit (e.g., from "hour" to "day"), users must also recalculate and reload task data (start, end, and duration) to ensure correct rendering. :::

Example:

<script>
	import { getData } from "../data";
	import { Gantt } from "wx-svelte-gantt";
	import { RadioButtonGroup } from "wx-svelte-core";

	let { tasks, links } = $state(getData());

	const options = [
		{ id: "hour", label: "Hour" },
		{ id: "day", label: "Day" },
	];

	let durationUnit = $state("hour");

	let api = $state();

	function handleUnitChange({ value }) {
		// here we use api.serialize() to get serialized tasks
		const sTasks = api.serialize().map(task => {
			// and than we recalculate task duration
			if (task.start && task.end) {
				const ms = 1000 * 60 * 60 * (value === "day" ? 24 : 1);
				const duration = Math.floor((task.end - task.start) / ms);
				return { ...task, duration };
			}
			return task;
		});
		tasks = sTasks;
		durationUnit = value;
	}
</script>

<div>
	<RadioButtonGroup
		{options}
		value={durationUnit}
		type="inline"
		onchange={handleUnitChange}
	/>
	<Gantt
		bind:this={api}
		{tasks}
		{links}
		{durationUnit}
	/>
</div>