Reactive Data

Update timeline data without recreating the instance.

How It Works

The items, categories, bands, dependencies, and selection props are watched with Vue's watch(). When their values change, the component calls the corresponding setItems(), setCategories(), setBands(), setDependencies(), or setSelection() method on the existing core instance — no destroy/recreate cycle.

This makes the following patterns efficient:

• Streaming data — push new items into a reactive array.
• Filtering — swap the items array based on user input.
• Dynamic categories — toggle visibility by updating the categories list.

Example: Dynamic Filtering

<script setup lang="ts">
import { ref, computed } from 'vue'
import { TempisTimeline, type TempisTimelineItem } from '@tempis/vue'

const allItems: TempisTimelineItem[] = [
  { id: 1, label: 'Research', start: '2026-03-01', end: '2026-03-10', grouping: 'Phase 1', category: 'planning' },
  { id: 2, label: 'Design',   start: '2026-03-08', end: '2026-03-20', grouping: 'Phase 1', category: 'design' },
  { id: 3, label: 'Build',    start: '2026-03-18', end: '2026-04-05', grouping: 'Phase 2', category: 'dev' },
  { id: 4, label: 'Test',     start: '2026-04-01', end: '2026-04-12', grouping: 'Phase 2', category: 'qa' },
]

const activeCategory = ref<string | null>(null)

const filteredItems = computed(() => {
  if (!activeCategory.value) return allItems
  return allItems.filter(i => i.category === activeCategory.value)
})
</script>

<template>
  <div>
    <button @click="activeCategory = null">All</button>
    <button @click="activeCategory = 'planning'">Planning</button>
    <button @click="activeCategory = 'design'">Design</button>
    <button @click="activeCategory = 'dev'">Dev</button>
    <button @click="activeCategory = 'qa'">QA</button>
  </div>
  <TempisTimeline
    :items="filteredItems"
    :options="{ responsive: true, range: { position: 'bottom' } }"
    :height="350"
  />
</template>

Example: Streaming Data

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { TempisTimeline, type TempisTimelineItem } from '@tempis/vue'

const items = ref<TempisTimelineItem[]>([])
let nextId = 0
let interval: ReturnType<typeof setInterval>

onMounted(() => {
  interval = setInterval(() => {
    const now = new Date()
    const end = new Date(now.getTime() + 3600000) // +1 hour
    items.value = [
      ...items.value,
      { id: nextId++, label: `Event ${nextId}`, start: now.toISOString(), end: end.toISOString() }
    ]
  }, 2000)
})

onUnmounted(() => clearInterval(interval))
</script>

<template>
  <TempisTimeline :items="items" :options="{ responsive: true }" :height="300" />
</template>