Time Segment Timeline

A flexible React component for displaying time-based tariff/schedule panels with dynamic grouping and legends.

Screenshots

Basic Timeline View

Grouped Timeline

Custom Legend Support

Features

• 🕐 Flexible Time Display - Display time ranges with visual timeline
• 🎨 Customizable Legends - Support custom color schemes with fallback to built-in defaults
• 📊 Dynamic Grouping - Group data by any criteria using custom filter functions
• 🔧 Dynamic Properties - Support for arbitrary additional properties in data items
• ⚡ Performance Optimized - Uses React.memo for efficient re-rendering
• 🎯 TypeScript Support - Full TypeScript support with type safety

Installation

npm install time-segment-timeline

Basic Usage

import React, { useState } from 'react';
import TimelinePanel from 'time-segment-timeline';
import { Timeitem } from 'time-segment-timeline/dist/types';

const testData: Timeitem[] = [
  {
    start_time: '00:00',
    end_time: '09:00',
    name: 'summer',
    tou_desc: 'work(A)'
  },
  {
    start_time: '08:00',
    end_time: '18:00',
    name: 'rain',
    tou_desc: 'sleep(B)'
  }
];

function App() {
  const [errorMap, setErrorMap] = useState<Timeitem[]>([]);
  
  const customLegend = {
    'work(A)': '#ff0000',
    'sleep(B)': '#ffbf00',
  };

  const groupConfig = {
    summer: {
      title: 'summer',
      filterFn: (item: Timeitem) => item.name === 'summer'
    },
    rain: {
      title: 'rain',
      filterFn: (item: Timeitem) => item.name === 'rain'
    }
  };

  return (
    <TimelinePanel
      testData={testData}
      setErrorMap={setErrorMap}
      legendData={customLegend}
      groupConfig={groupConfig}
    />
  );
}

API Reference

TimelinePanel Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | testData | Timeitem[] | Required - Array of time data items | | setErrorMap | React.Dispatch<React.SetStateAction<Timeitem[]>> | Required - State setter for error items | | width | string \| number | '100%' | Component width | | height | string \| number | 'auto' | Component height | | mt | string \| number | undefined | Margin top | | legendData | Record<string, string> | undefined | Custom legend colors | | groupConfig | Record<string, GroupConfig> | undefined | Grouping configuration |

Timeitem Interface

interface Timeitem {
  id?: number;
  start_mn?: string;        // "MM-DD"
  end_mn?: string;          // "MM-DD"
  start_week?: number;       // 1=Mon ... 7=Sun
  end_week?: number;         // 1=Mon ... 7=Sun
  start_time?: string;       // "HH:mm"
  end_time?: string;         // "HH:mm"
  tou_desc?: string;         // Time period description
  tou_type?: string;         // Short code
  [key: string]: any;       // Additional properties
}

GroupConfig Interface

interface GroupConfig {
  title: string;                                    // Display title
  filterFn: (item: Timeitem) => boolean;  // Filter function
}

Visual Examples

Timeline with Overlap Detection

Multiple Time Groups

Custom Styling

Advanced Features

Custom Grouping

Group your data by any criteria:

const groupConfig = {
  workingHours: {
    title: 'Working Hours',
    filterFn: (item) => item.start_time >= '09:00' && item.end_time <= '17:00'
  },
  weekends: {
    title: 'Weekends',
    filterFn: (item) => item.start_week >= 6
  }
};

Dynamic Properties

Add any custom properties to your data:

const testData = [
  {
    start_time: '09:00',
    end_time: '17:00',
    tou_desc: 'Work',
    priority: 'high',        // Custom property
    department: 'IT',         // Custom property
    cost: 150.75              // Custom property
  }
];

Built-in Legend Support

The component includes built-in legend items for common scenarios:

• '空缺(V)' - Empty slots (gray)
• '重複(R)' - Overlapping slots (black)

These will automatically display even if not provided in legendData.