@d3-timeline/vue

A Vue 3 component wrapper for the D3-based Timeline visualization component. It handles the integration between Vue's reactivity and the vanilla D3 timeline core engine.

Installation

npm install @d3-timeline/vue @d3-timeline/core

Basic Usage

Import the Timeline component and pass your array of event objects as well as a configuration object. Use the default scoped slot to render custom HTML for each event.

<template>
  <div style="height: 400px;">
    <Timeline 
      :data="events" 
      :config="timelineConfig" 
      @selected="onEventSelected"
    >
      <template #default="{ item }">
        <div class="custom-event-card">
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
          <small>{{ item.date.toDateString() }}</small>
        </div>
      </template>
    </Timeline>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Timeline from '@d3-timeline/vue';
import '@d3-timeline/vue/dist/style.css'; // Don't forget to import the CSS!

const events = ref([
  { id: "1", date: new Date("2023-01-15"), title: "Project Kickoff", description: "Initial team meeting." },
  { id: "2", date: new Date("2023-05-10"), title: "Alpha Release", description: "First working version." }
]);

const timelineConfig = {
  orientation: 'horizontal' // 'horizontal' or 'vertical'
};

const onEventSelected = (item) => {
  console.log('Selected Event:', item);
};
</script>

Props

• data: An array of data objects. Each object must contain a valid date property (JavaScript Date object).
• config: A configuration object passed down to the core engine. You can configure orientation, custom collisionPriority, etc.

Events

• @selected: Triggered when an event item is clicked. The payload is the selected event object.

Custom Item Templates

The Vue wrapper uses a default scoped slot containing the item data and the index. You can completely customize how each event box is styled and presented by passing HTML into this scoped slot.