timeline-panel 1.0.0

package/README.md

@@ -0,0 +1,158 @@
+# Timeline Panel
+
+A flexible React component for displaying time-based tariff/schedule panels with dynamic grouping and legends.
+
+## 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
+
+```bash
+npm install timeline-panel
+```
+
+## Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import TimelinePanel, { TariffItem } from 'timeline-panel';
+
+const testData: TariffItem[] = [
+  {
+    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<TariffItem[]>([]);
+  
+  const customLegend = {
+    'work(A)': '#ff0000',
+    'sleep(B)': '#ffbf00',
+  };
+
+  const groupConfig = {
+    summer: {
+      title: 'summer',
+      filterFn: (item: TariffItem) => item.name === 'summer'
+    },
+    rain: {
+      title: 'rain',
+      filterFn: (item: TariffItem) => item.name === 'rain'
+    }
+  };
+
+  return (
+    <TimelinePanel
+      testData={testData}
+      setErrorMap={setErrorMap}
+      legendData={customLegend}
+      groupConfig={groupConfig}
+    />
+  );
+}
+```
+
+## API Reference
+
+### TimelinePanel Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `testData` | `TariffItem[]` | **Required** - Array of time data items |
+| `setErrorMap` | `React.Dispatch<React.SetStateAction<TariffItem[]>>` | **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 |
+
+### TariffItem Interface
+
+```typescript
+interface TariffItem {
+  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
+
+```typescript
+interface GroupConfig {
+  title: string;                                    // Display title
+  filterFn: (item: TariffItem) => boolean;  // Filter function
+}
+```
+
+## Advanced Features
+
+### Custom Grouping
+
+Group your data by any criteria:
+
+```tsx
+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:
+
+```tsx
+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`.
+
+## License
+
+MIT

package/dist/Legend.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+declare const Legend: FC<{
+    legend: Record<string, string>;
+}>;
+export default Legend;

package/dist/Legend.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LEGEND } from './utils';
+const Legend = ({ legend }) => {
+    const mergedLegend = Object.assign(Object.assign({}, LEGEND), legend);
+    return (_jsx("div", { style: { marginTop: '15px', width: '150px', textAlign: 'center' }, children: _jsx("div", { style: { border: '1px solid #000' }, children: Object.entries(mergedLegend).map(([label, color]) => (_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    border: '1px solid #000',
+                }, children: [_jsx("div", { style: {
+                            borderRight: '2px solid #000',
+                            width: '150px',
+                            padding: '2px',
+                        }, children: label }), _jsx("div", { style: { padding: '2px', width: '30px' }, children: _jsx("div", { style: {
+                                width: '100%',
+                                height: '10px',
+                                border: '1px solid #000',
+                                backgroundColor: color,
+                            } }) })] }, label))) }) }));
+};
+export default Legend;

package/dist/TimelinePanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimelinePanelProps } from './types';
+declare const _default: React.NamedExoticComponent<TimelinePanelProps>;
+export default _default;

package/dist/TimelinePanel.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+import { LEGEND, tou_descColor, splitTariffData, markOverlap, timeRangePercentage } from './utils';
+import Legend from './Legend';
+const TimelinePanel = ({ width = '100%', height = 'auto', mt, testData, setErrorMap, legendData, groupConfig }) => {
+    const [tariffGroups, setTariffGroups] = useState({});
+    useEffect(() => {
+        const groups = splitTariffData(testData, groupConfig);
+        const markedGroups = {};
+        const allErrorItems = [];
+        Object.entries(groups).forEach(([key, group]) => {
+            markedGroups[key] = {
+                title: group.title,
+                data: markOverlap(group.data)
+            };
+            const errorItems = markedGroups[key].data.filter((item) => item.tou_type === 'r' || item.tou_type === 'v');
+            allErrorItems.push(...errorItems);
+        });
+        setErrorMap(allErrorItems);
+        setTariffGroups(markedGroups);
+    }, [testData]);
+    return (_jsxs("div", { style: {
+            width,
+            height,
+            marginTop: mt,
+            padding: 16,
+            border: '1px solid #ddd',
+            borderRadius: 8,
+            display: 'flex',
+            flexDirection: 'row',
+        }, children: [_jsx("div", { style: { width: '90%' }, children: testData.length < 1 ? (_jsx("div", { style: { textAlign: 'center' }, children: "No Data" })) : (_jsx(_Fragment, { children: Object.values(tariffGroups).map((group) => {
+                        const { title, data } = group;
+                        if (!data.length)
+                            return null;
+                        return (_jsxs("div", { style: { display: 'flex', width: '90%', height: '60px', padding: '0 5%', marginBottom: '5px' }, children: [_jsx("h3", { style: { width: '20%', alignSelf: 'center' }, children: title }), data.map((item, index) => {
+                                    const isLast = index === data.length - 1;
+                                    const widthPercent = timeRangePercentage(item.start_time, item.end_time);
+                                    const bgColor = tou_descColor(item.tou_desc, legendData || LEGEND);
+                                    return (_jsxs("div", { style: {
+                                            width: `${widthPercent}%`,
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            position: 'relative',
+                                        }, children: [_jsx("div", { style: { height: '50px', background: 'black', width: '5px', position: 'absolute', left: 0 } }), _jsx("div", { style: {
+                                                    height: '10px',
+                                                    background: 'white',
+                                                    position: 'absolute',
+                                                    top: 0,
+                                                    left: '-18px',
+                                                    lineHeight: '10px',
+                                                }, title: item.start_time || '', children: item.start_time || '' }), _jsx("div", { style: { height: '10px', width: '100%', background: bgColor, cursor: 'pointer' }, title: item.tou_desc || '' }), isLast && (_jsxs(_Fragment, { children: [_jsx("div", { style: { height: '50px', background: 'black', width: '5px' } }), _jsx("div", { style: {
+                                                            height: '10px',
+                                                            background: 'white',
+                                                            position: 'absolute',
+                                                            top: 0,
+                                                            right: '-18px',
+                                                            lineHeight: '10px',
+                                                        }, children: "24:00" })] }))] }, `${index + (item.start_time || '') + (item.end_time || '')}`));
+                                })] }, title));
+                    }) })) }), _jsx(Legend, { legend: legendData || LEGEND })] }));
+};
+export default memo(TimelinePanel);

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TimelinePanel } from './TimelinePanel';
+export type { TariffItem, TimelinePanelProps, GroupConfig } from './types';
+export { LEGEND, tou_descColor, splitTariffData, markOverlap, timeRangePercentage } from './utils';
+export { default as Legend } from './Legend';

package/dist/index.js

@@ -0,0 +1,6 @@
+// Main component
+export { default as TimelinePanel } from './TimelinePanel';
+// Utilities
+export { LEGEND, tou_descColor, splitTariffData, markOverlap, timeRangePercentage } from './utils';
+// Sub-components
+export { default as Legend } from './Legend';

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+export interface TariffItem {
+    id?: number;
+    start_mn?: string;
+    end_mn?: string;
+    start_week?: number;
+    end_week?: number;
+    start_time?: string;
+    end_time?: string;
+    tou_desc?: string;
+    tou_type?: string;
+    [key: string]: any;
+}
+export type GroupConfig = {
+    title: string;
+    filterFn: (item: TariffItem) => boolean;
+};
+export type TimelinePanelProps = {
+    width?: string | number;
+    height?: string | number;
+    mt?: string | number;
+    testData: TariffItem[];
+    setErrorMap: React.Dispatch<React.SetStateAction<TariffItem[]>>;
+    legendData?: Record<string, string>;
+    groupConfig?: Record<string, GroupConfig>;
+    [key: string]: any;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,10 @@
+import { TariffItem, GroupConfig } from './types';
+export declare const LEGEND: Record<string, string>;
+export declare const toMinutes: (time: string) => number;
+export declare const timeRangePercentage: (start_time: string | undefined, end_time: string | undefined) => number;
+export declare const tou_descColor: (tou_desc: string | undefined, legend: Record<string, string>) => string;
+export declare const splitTariffData: (data: TariffItem[], groupConfig?: Record<string, GroupConfig>) => Record<string, {
+    title: string;
+    data: TariffItem[];
+}>;
+export declare const markOverlap: (tou_descs: TariffItem[]) => TariffItem[];

package/dist/utils.js

@@ -0,0 +1,93 @@
+// Built-in legend colors
+export const LEGEND = {
+    'empty(V)': '#BBB',
+    'overlap(R)': '#000',
+};
+// Time utilities
+export const toMinutes = (time) => {
+    const [h, m] = time.split(':').map(Number);
+    return h * 60 + m;
+};
+export const timeRangePercentage = (start_time, end_time) => {
+    if (!start_time || !end_time)
+        return 0;
+    const startMinutes = toMinutes(start_time);
+    let endMinutes = toMinutes(end_time);
+    if (endMinutes <= startMinutes)
+        endMinutes += 24 * 60;
+    return ((endMinutes - startMinutes) / (24 * 60)) * 100;
+};
+// Color utilities
+export const tou_descColor = (tou_desc, legend) => {
+    var _a, _b;
+    if (!tou_desc)
+        return 'gray';
+    return (_b = (_a = legend[tou_desc]) !== null && _a !== void 0 ? _a : LEGEND[tou_desc]) !== null && _b !== void 0 ? _b : 'gray';
+};
+// Data processing utilities
+export const splitTariffData = (data, groupConfig) => {
+    const result = {};
+    if (groupConfig) {
+        Object.entries(groupConfig).forEach(([groupKey, config]) => {
+            const filteredData = data.filter(config.filterFn);
+            if (filteredData.length > 0) {
+                result[groupKey] = {
+                    title: config.title,
+                    data: filteredData
+                };
+            }
+        });
+    }
+    else {
+        const groups = {};
+        data.forEach((d) => {
+            const groupName = d.tou_desc || 'default';
+            if (!groups[groupName]) {
+                groups[groupName] = [];
+            }
+            groups[groupName].push(d);
+        });
+        Object.entries(groups).forEach(([groupName, groupData]) => {
+            result[groupName] = {
+                title: groupName,
+                data: groupData
+            };
+        });
+    }
+    return result;
+};
+export const markOverlap = (tou_descs) => {
+    var _a, _b, _c, _d;
+    if (!tou_descs.length)
+        return [];
+    const timePoints = new Set();
+    tou_descs.forEach((p) => {
+        if (p.start_time)
+            timePoints.add(p.start_time);
+        if (p.end_time)
+            timePoints.add(p.end_time);
+    });
+    const sortedTimes = Array.from(timePoints).sort((a, b) => toMinutes(a) - toMinutes(b));
+    const result = [];
+    for (let i = 0; i < sortedTimes.length - 1; i++) {
+        const segStart = sortedTimes[i];
+        const segEnd = sortedTimes[i + 1];
+        const covering = tou_descs.filter((p) => p.start_time && p.end_time && p.start_time < segEnd && p.end_time > segStart);
+        if (covering.length === 0) {
+            result.push(Object.assign(Object.assign({}, tou_descs[0]), { start_time: segStart, end_time: segEnd, tou_desc: 'empty(V)', tou_type: 'v' }));
+        }
+        else if (covering.length === 1) {
+            result.push(Object.assign(Object.assign({}, covering[0]), { start_time: segStart, end_time: segEnd }));
+        }
+        else {
+            result.push(Object.assign(Object.assign({}, covering[0]), { start_time: segStart, end_time: segEnd, tou_desc: 'overlap(R)', tou_type: 'r' }));
+        }
+    }
+    if (((_a = result[0]) === null || _a === void 0 ? void 0 : _a.start_time) !== '00:00') {
+        result.unshift(Object.assign(Object.assign({}, tou_descs[0]), { start_time: '00:00', end_time: ((_b = result[0]) === null || _b === void 0 ? void 0 : _b.start_time) || '00:00', tou_desc: 'empty(V)', tou_type: 'v' }));
+    }
+    if (((_c = result[result.length - 1]) === null || _c === void 0 ? void 0 : _c.end_time) !== '24:00') {
+        result.push(Object.assign(Object.assign({}, tou_descs[0]), { start_time: ((_d = result[result.length - 1]) === null || _d === void 0 ? void 0 : _d.end_time) || '24:00', end_time: '24:00', tou_desc: 'empty(V)', tou_type: 'v' }));
+    }
+    return result;
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "timeline-panel",
+  "version": "1.0.0",
+  "description": "A flexible React component for displaying time-based tariff/schedule panels",
+  "main": "dist/TimelinePanel.js",
+  "types": "dist/TimelinePanel.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "timeline",
+    "schedule",
+    "ui-component"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.0.0"
+  }
+}