Vue Kite Tree Chart

A lightweight and flexible tree graph component for Vue 3 that combines HTML nodes with SVG connectors. Perfect for organizational charts, hierarchy visualizations, and tree structures.

✨ Features

• 🚀 Lightweight - Minimal bundle size with zero external dependencies (only Vue 3)
• 🎨 Customizable - Flexible styling with TailwindCSS support
• 📱 Responsive - Adapts to different screen sizes
• ⚡ Performant - Optimized rendering with SVG path caching
• 🔧 Flexible - Custom node templates via slots
• 🌳 Smart Layout - Automatic tree positioning with rounded SVG connectors
• 🔍 Zoom & Pan - Cursor-anchored zoom and smooth pan navigation
• 🎯 Interactive - Mouse wheel zoom and drag-to-pan viewport
• � Standalone - No Pinia or external state management required

📦 Installation

npm install vue-kite-tree

🚀 Quick Start

Method 1: With CSS Import (Recommended)

<template>
  <KiteTree :data="orgData" />
</template>

<script setup>
import { KiteTree } from 'vue-kite-tree'
import 'vue-kite-tree/style.css'

const orgData = {
  id: 1,
  label: 'CEO',
  children: [
    {
      id: 2,
      label: 'CTO',
      children: [
        { id: 4, label: 'Frontend', children: [] },
        { id: 5, label: 'Backend', children: [] }
      ]
    },
    {
      id: 3,
      label: 'CFO',
      children: []
    }
  ]
}
</script>

Method 2: Manual CSS Setup

If you prefer to use your own TailwindCSS setup:

<template>
  <KiteTree :data="orgData" />
</template>

<script setup>
import { KiteTree } from 'vue-kite-tree'

const orgData = {
  // ... same data structure
}
</script>

Note: Make sure you have TailwindCSS configured in your project for proper styling.

📖 API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | Object | Required | Tree data structure with id, label, and children | | lineColor | String | '#9ca3af' | Color of connecting lines | | lineWidth | Number | 1.5 | Width of connecting lines | | radius | Number | 8 | Corner radius for curved connections | | onNodeUpdate | Function | () => {} | Callback when tree data changes (optional) |

Data Structure

{
  id: Number,           // Unique identifier
  label: String,        // Display text
  children: Array       // Child nodes (recursive)
}

🎨 Customization

Custom Node Styling

<template>
  <KiteTree :data="data">
    <template #node="{ node }">
      <div class="custom-node">
        <div class="node-icon">👤</div>
        <div class="node-label">{{ node.label }}</div>
        <div class="node-meta">{{ node.children.length }} reports</div>
      </div>
    </template>
  </KiteTree>
</template>

<style>
.custom-node {
  @apply bg-blue-500 text-white rounded-lg p-3 shadow-lg;
}
</style>

Custom Line Styling

<template>
  <KiteTree 
    :data="data" 
    line-color="#3b82f6"
    :line-width="2"
    :radius="12"
  />
</template>

🔧 Advanced Usage

Interactive Zoom & Pan

The component includes built-in zoom and pan functionality:

• Mouse Wheel - Zoom in/out at cursor position
• Drag - Pan the viewport by dragging empty space
• Buttons - Use + / - / Reset buttons for control

<template>
  <div class="w-full h-screen">
    <KiteTree :data="treeData" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { KiteTree } from 'vue-kite-tree'
import 'vue-kite-tree/style.css'

const treeData = ref({
  id: 1,
  label: 'CEO',
  children: [
    {
      id: 2,
      label: 'CTO',
      children: [
        { id: 4, label: 'Frontend', children: [] },
        { id: 5, label: 'Backend', children: [] }
      ]
    },
    {
      id: 3,
      label: 'CFO',
      children: [
        { id: 6, label: 'Marketing', children: [] }
      ]
    }
  ]
})
</script>

Dynamic Data Updates

<template>
  <div class="w-full h-screen">
    <KiteTree :data="treeData" />
    <button @click="addNode" class="absolute bottom-4 right-4 px-4 py-2 bg-blue-500 text-white rounded">
      Add Node
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { KiteTree } from 'vue-kite-tree'
import 'vue-kite-tree/style.css'

const treeData = ref({
  id: 1,
  label: 'Root',
  children: []
})

function addNode() {
  const newId = Date.now()
  treeData.value.children.push({
    id: newId,
    label: `Node ${newId}`,
    children: []
  })
}
</script>

Integration with External State

<template>
  <KiteTree :data="orgStore.hierarchy" />
</template>

<script setup>
import { useOrgStore } from '@/stores/org'
import { KiteTree } from 'vue-kite-tree'
import 'vue-kite-tree/style.css'

const orgStore = useOrgStore()
</script>

🎯 Use Cases

• Organizational Charts - Company hierarchies and team structures
• Decision Trees - Flow diagrams and decision paths
• File Systems - Directory and file explorers
• Category Trees - Product categories and taxonomies
• Family Trees - Genealogy visualizations
• Mind Maps - Idea and concept relationships

🎯 Interactive Features

Zoom & Navigation

• Cursor-Anchored Zoom - Zoom centers on mouse cursor position (like Google Maps)
• Mouse Wheel - Smooth zoom in/out with configurable step
• Click Controls - Zoom in/out buttons with reset option
• Pan Navigation - Drag empty space to move viewport
• Scale Limits - Min 0.4x, Max 2.5x zoom levels

Component State

• Local State - Each KiteTree component has its own isolated state
• Reactive UI - All components respond to state changes
• No External Dependencies - Pure Vue 3 Composition API, no Pinia required