indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/dashboard/charts/Donut.js

@@ -0,0 +1,130 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DonutChart = DonutChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const utils_1 = require("../../../lib/utils.js");
+/**
+ * DonutChart - ECharts Donut/Pie Chart component
+ * On hover: shows slice name + value in the center of the donut.
+ * On mouseout: restores the default centerLabel / centerValue.
+ */
+function DonutChart({ data, height = 300, showLegend = true, centerLabel, centerValue, innerRadius = '50%', outerRadius = '70%', className, onSegmentClick }) {
+    const chartRef = (0, react_1.useRef)(null);
+    const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
+    const buildGraphic = (0, react_1.useCallback)((topText, bottomText) => [
+        {
+            type: 'group',
+            left: 'center',
+            top: 'center',
+            children: [
+                {
+                    type: 'text',
+                    style: {
+                        text: topText,
+                        fontSize: 16,
+                        fontWeight: 600,
+                        fill: '#344767',
+                        textAlign: 'center'
+                    },
+                    top: -10
+                },
+                {
+                    type: 'text',
+                    style: {
+                        text: bottomText,
+                        fontSize: 11,
+                        fill: '#6c757d',
+                        textAlign: 'center'
+                    },
+                    top: 12
+                }
+            ]
+        }
+    ], []);
+    const defaultGraphic = (centerLabel || centerValue)
+        ? buildGraphic(centerValue ?? '', centerLabel ?? '')
+        : undefined;
+    const option = {
+        tooltip: { show: false },
+        legend: showLegend ? {
+            bottom: 0,
+            left: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                fontSize: 12,
+                color: '#6c757d'
+            }
+        } : undefined,
+        graphic: defaultGraphic,
+        series: [
+            {
+                type: 'pie',
+                radius: [innerRadius, outerRadius],
+                center: ['50%', showLegend ? '45%' : '50%'],
+                avoidLabelOverlap: true,
+                itemStyle: {
+                    borderRadius: 4,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    scale: true,
+                    scaleSize: 5,
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.2)'
+                    }
+                },
+                data: data.map((item, index) => ({
+                    name: item.name,
+                    value: item.value,
+                    itemStyle: {
+                        color: item.color || colors[index % colors.length]
+                    }
+                }))
+            }
+        ]
+    };
+    const onEvents = {
+        mouseover: (params) => {
+            if (params.componentType !== 'series')
+                return;
+            const chart = chartRef.current?.getEchartsInstance?.();
+            if (!chart)
+                return;
+            const total = data.reduce((s, d) => s + d.value, 0);
+            const pct = total > 0 ? ((params.value / total) * 100).toFixed(1) + '%' : '';
+            const valStr = typeof params.value === 'number'
+                ? params.value.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                : String(params.value);
+            chart.setOption({
+                graphic: buildGraphic(valStr, `${params.name}  ${pct}`)
+            });
+        },
+        mouseout: () => {
+            const chart = chartRef.current?.getEchartsInstance?.();
+            if (!chart)
+                return;
+            chart.setOption({
+                graphic: defaultGraphic ?? []
+            });
+        },
+        click: (params) => {
+            if (params.componentType !== 'series' || !onSegmentClick)
+                return;
+            onSegmentClick({ name: params.name, value: params.value });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { ref: chartRef, option: option, style: { height, width: '100%', cursor: onSegmentClick ? 'pointer' : 'default' }, opts: { renderer: 'canvas' }, onEvents: onEvents }) }));
+}

package/dist/cjs/components/dashboard/charts/FlowMap.js

@@ -0,0 +1,238 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowMap = FlowMap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const echarts = __importStar(require("echarts/core"));
+const utils_1 = require("../../../lib/utils.js");
+const india_map_1 = require("./india-map.js");
+const theme_1 = require("./theme.js");
+/**
+ * FlowMap - Geographic flow/route visualization
+ *
+ * Combines scatter markers with animated flow lines between locations.
+ * Perfect for logistics, shipping routes, migration, trade flows.
+ *
+ * Uses ECharts Lines series for flow visualization.
+ */
+function FlowMap({ markers = [], lines = [], height = 400, markerColor = '#5470c6', lineColor = '#fac858', markerSizeRange = [8, 30], lineWidth = 2, showRipple = true, showLineEffect = true, effectSymbol = 'arrow', mapColor, borderColor, showLabels = true, curveness = 0.2, className }) {
+    const chartRef = (0, react_1.useRef)(null);
+    const [mapReady, setMapReady] = (0, react_1.useState)(false);
+    const theme = (0, theme_1.getChartTheme)();
+    // Use theme colors if not provided
+    const finalMapColor = mapColor || (theme.backgroundColor === 'rgb(30, 30, 35)' ? '#2d3748' : '#e8f4f8');
+    const finalBorderColor = borderColor || (theme.backgroundColor === 'rgb(30, 30, 35)' ? '#4a5568' : '#b0c4de');
+    (0, react_1.useEffect)(() => {
+        try {
+            echarts.registerMap('India', india_map_1.INDIA_GEOJSON);
+            setMapReady(true);
+        }
+        catch {
+            setMapReady(true);
+        }
+    }, []);
+    // Calculate size scaling for markers
+    const markerValues = markers.map(m => m.value || 0).filter(v => v > 0);
+    const minVal = markerValues.length > 0 ? Math.min(...markerValues) : 0;
+    const maxVal = markerValues.length > 0 ? Math.max(...markerValues) : 1;
+    const getMarkerSize = (value) => {
+        if (!value || maxVal === minVal)
+            return markerSizeRange[0];
+        const normalized = (value - minVal) / (maxVal - minVal);
+        return markerSizeRange[0] + normalized * (markerSizeRange[1] - markerSizeRange[0]);
+    };
+    // Effect symbols
+    const effectSymbols = {
+        circle: 'circle',
+        arrow: 'arrow',
+        plane: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
+        pin: 'pin'
+    };
+    if (!mapReady) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full flex items-center justify-center', className), style: { height }, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-[rgb(var(--fg-muted))]", children: "Loading map..." }) }));
+    }
+    const series = [];
+    // Lines series (flow routes)
+    if (lines.length > 0) {
+        // Static lines
+        series.push({
+            name: 'Routes',
+            type: 'lines',
+            coordinateSystem: 'geo',
+            zlevel: 1,
+            effect: showLineEffect ? {
+                show: true,
+                period: 6,
+                trailLength: 0.7,
+                color: '#fff',
+                symbolSize: 3
+            } : undefined,
+            lineStyle: {
+                color: lineColor,
+                width: lineWidth,
+                opacity: 0.6,
+                curveness: curveness
+            },
+            data: lines.map(line => ({
+                name: line.name || '',
+                coords: [line.from, line.to],
+                lineStyle: line.color ? { color: line.color } : undefined
+            }))
+        });
+        // Animated effect on lines
+        if (showLineEffect) {
+            series.push({
+                name: 'Route Effects',
+                type: 'lines',
+                coordinateSystem: 'geo',
+                zlevel: 2,
+                symbol: ['none', effectSymbols[effectSymbol] || 'arrow'],
+                symbolSize: effectSymbol === 'plane' ? 15 : 10,
+                effect: {
+                    show: true,
+                    period: 4,
+                    trailLength: 0,
+                    symbol: effectSymbols[effectSymbol] || 'arrow',
+                    symbolSize: effectSymbol === 'plane' ? 15 : 10,
+                    color: '#fff'
+                },
+                lineStyle: {
+                    width: 0,
+                    curveness: curveness
+                },
+                data: lines.map(line => ({
+                    coords: [line.from, line.to]
+                }))
+            });
+        }
+    }
+    // Scatter markers
+    if (markers.length > 0) {
+        series.push({
+            name: 'Locations',
+            type: showRipple ? 'effectScatter' : 'scatter',
+            coordinateSystem: 'geo',
+            zlevel: 3,
+            symbol: 'circle',
+            symbolSize: (val) => getMarkerSize(val?.[2]),
+            showEffectOn: 'render',
+            rippleEffect: showRipple ? {
+                brushType: 'stroke',
+                scale: 2.5,
+                period: 4
+            } : undefined,
+            itemStyle: {
+                color: markerColor,
+                shadowBlur: 10,
+                shadowColor: markerColor + '80'
+            },
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 20,
+                    borderColor: '#fff',
+                    borderWidth: 3
+                }
+            },
+            label: showLabels ? {
+                show: true,
+                position: 'right',
+                formatter: '{b}',
+                fontSize: 11,
+                color: theme.textColorStrong,
+                fontWeight: 600,
+                textBorderColor: theme.backgroundColor,
+                textBorderWidth: 2
+            } : { show: false },
+            data: markers.map(m => ({
+                name: m.name,
+                value: [...m.coords, m.value || 0]
+            }))
+        });
+    }
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: theme.tooltip.backgroundColor,
+            borderColor: theme.tooltip.borderColor,
+            borderWidth: 1,
+            textStyle: { color: theme.tooltip.textColor, fontSize: 12 },
+            formatter: (params) => {
+                if (params.seriesType === 'lines') {
+                    return params.name ? `<strong>${params.name}</strong>` : '';
+                }
+                if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
+                    const value = params.value?.[2];
+                    return `<strong>${params.name}</strong>${value ? `<br/>Value: ${value.toLocaleString()}` : ''}`;
+                }
+                return `<strong>${params.name}</strong>`;
+            }
+        },
+        geo: {
+            map: 'India',
+            roam: true,
+            zoom: 1.15,
+            center: [82, 22],
+            aspectScale: 0.9,
+            selectedMode: false,
+            itemStyle: {
+                areaColor: finalMapColor,
+                borderColor: finalBorderColor,
+                borderWidth: 1
+            },
+            emphasis: {
+                itemStyle: {
+                    areaColor: theme.backgroundColor === 'rgb(30, 30, 35)' ? '#4a5568' : '#cce5ff',
+                    borderColor: '#5470c6',
+                    borderWidth: 2
+                },
+                label: {
+                    show: true,
+                    color: theme.textColorStrong,
+                    fontSize: 11,
+                    fontWeight: 500
+                }
+            },
+            label: { show: false }
+        },
+        series
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { ref: chartRef, option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}

package/dist/cjs/components/dashboard/charts/Funnel.js

@@ -0,0 +1,38 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FunnelChart = FunnelChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../../lib/utils.js");
+const FUNNEL_COLORS = ['#5470c6', '#3ba272', '#fac858', '#ee6666', '#73c0de', '#9a60b4', '#fc8452', '#91cc75'];
+/**
+ * FunnelChart — centered, tapering stage-bar funnel for conversion/process flows.
+ * Each stage shows a % badge, a width-proportional centered bar (truthful to value) with
+ * name + value, and the stage-to-stage drop-off. Bars lift on hover.
+ */
+function FunnelChart({ data, height = 300, sort = 'descending', className }) {
+    const [hovered, setHovered] = (0, react_1.useState)(null);
+    const rows = sort === 'ascending'
+        ? [...data].sort((a, b) => a.value - b.value)
+        : sort === 'descending'
+            ? [...data].sort((a, b) => b.value - a.value)
+            : data;
+    const top = rows[0]?.value || 1;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full flex flex-col justify-center', className), style: { minHeight: height }, children: rows.map((item, index) => {
+            const pct = (item.value / top) * 100;
+            const color = item.color || FUNNEL_COLORS[index % FUNNEL_COLORS.length];
+            const barWidth = Math.max(pct, 16);
+            const isHover = hovered === index;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 py-1", onMouseEnter: () => setHovered(index), onMouseLeave: () => setHovered(null), children: [(0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-[0.7rem] font-semibold tabular-nums transition-transform", style: {
+                            backgroundColor: `${color}1f`,
+                            color,
+                            transform: isHover ? 'scale(1.08)' : 'scale(1)',
+                        }, children: [pct.toFixed(0), "%"] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-0 flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "rounded-md px-3 py-2.5 flex items-baseline justify-between gap-2 transition-all duration-300", style: {
+                                width: `${barWidth}%`,
+                                background: `linear-gradient(90deg, ${color}, ${color}cc)`,
+                                transform: isHover ? 'translateY(-1px)' : 'none',
+                                boxShadow: isHover ? `0 4px 14px ${color}55` : `0 1px 2px rgba(0,0,0,0.06)`,
+                            }, title: `${item.name}: ${item.value.toLocaleString()} (${pct.toFixed(1)}%)`, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: item.value.toLocaleString() })] }) })] }, item.name));
+        }) }));
+}

package/dist/cjs/components/dashboard/charts/Gantt.js

@@ -0,0 +1,271 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GanttChart = GanttChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const utils_1 = require("../../../lib/utils.js");
+const theme_1 = require("./theme.js");
+/**
+ * GanttChart - ECharts Gantt Chart component
+ *
+ * Displays project timelines with tasks, progress, and dependencies.
+ * Built on ECharts custom series for flexibility.
+ */
+function GanttChart({ tasks, height = 400, showProgress = true, showToday = true, showGrid = true, dateFormat = 'short', className }) {
+    const theme = (0, theme_1.getChartTheme)();
+    const tooltipConfig = (0, theme_1.getTooltipConfig)();
+    // Default colors for tasks
+    const defaultColors = theme.colors;
+    // Parse dates and calculate min/max
+    const parsedTasks = tasks.map((task, index) => {
+        const start = typeof task.start === 'string' ? new Date(task.start) : task.start;
+        const end = typeof task.end === 'string' ? new Date(task.end) : task.end;
+        return {
+            ...task,
+            startDate: start,
+            endDate: end,
+            color: task.color || defaultColors[index % defaultColors.length]
+        };
+    });
+    // Find date range
+    const allDates = parsedTasks.flatMap(t => [t.startDate, t.endDate]);
+    const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
+    const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
+    // Add padding to date range (5% on each side)
+    const dateRange = maxDate.getTime() - minDate.getTime();
+    const paddedMinDate = new Date(minDate.getTime() - dateRange * 0.05);
+    const paddedMaxDate = new Date(maxDate.getTime() + dateRange * 0.05);
+    // Today's date for marker
+    const today = new Date();
+    // Format date based on preference
+    const formatDate = (date) => {
+        if (dateFormat === 'short') {
+            return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        }
+        else if (dateFormat === 'medium') {
+            return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: '2-digit' });
+        }
+        else {
+            return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+        }
+    };
+    // Calculate duration in days
+    const getDuration = (start, end) => {
+        return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+    };
+    // Task names for Y-axis
+    const taskNames = parsedTasks.map(t => t.name);
+    // Build series data - bar representing each task
+    const barData = parsedTasks.map((task, index) => ({
+        name: task.name,
+        value: [
+            index,
+            task.startDate.getTime(),
+            task.endDate.getTime(),
+            getDuration(task.startDate, task.endDate)
+        ],
+        itemStyle: {
+            color: task.color,
+            borderRadius: 4
+        },
+        task: task // Store full task for tooltip
+    }));
+    // Progress overlay data
+    const progressData = showProgress ? parsedTasks.map((task, index) => {
+        const progress = task.progress ?? 0;
+        const duration = task.endDate.getTime() - task.startDate.getTime();
+        const progressEnd = task.startDate.getTime() + (duration * progress / 100);
+        return {
+            name: task.name,
+            value: [
+                index,
+                task.startDate.getTime(),
+                progressEnd,
+                progress
+            ],
+            itemStyle: {
+                color: 'rgba(255, 255, 255, 0.3)',
+                borderRadius: 4
+            }
+        };
+    }) : [];
+    const option = {
+        tooltip: {
+            ...tooltipConfig,
+            trigger: 'item',
+            formatter: (params) => {
+                const task = params.data.task;
+                if (!task)
+                    return '';
+                const duration = getDuration(task.startDate, task.endDate);
+                const progress = task.progress ?? 0;
+                return `
+          <div style="padding: 8px; min-width: 180px;">
+            <div style="font-weight: 600; margin-bottom: 6px; color: ${theme.textColorStrong};">${task.name}</div>
+            <div style="display: grid; gap: 4px; font-size: 12px;">
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Start:</span>
+                <span style="font-weight: 500;">${formatDate(task.startDate)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">End:</span>
+                <span style="font-weight: 500;">${formatDate(task.endDate)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Duration:</span>
+                <span style="font-weight: 500;">${duration} day${duration !== 1 ? 's' : ''}</span>
+              </div>
+              ${showProgress ? `
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Progress:</span>
+                <span style="font-weight: 500; color: ${progress >= 100 ? theme.success : progress >= 50 ? theme.warning : theme.info};">${progress}%</span>
+              </div>
+              ` : ''}
+              ${task.category ? `
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Category:</span>
+                <span style="font-weight: 500;">${task.category}</span>
+              </div>
+              ` : ''}
+            </div>
+          </div>
+        `;
+            }
+        },
+        grid: {
+            top: 30,
+            right: 30,
+            bottom: 30,
+            left: 20,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'time',
+            min: paddedMinDate.getTime(),
+            max: paddedMaxDate.getTime(),
+            position: 'top',
+            axisLine: { lineStyle: { color: theme.axisLine } },
+            axisLabel: {
+                color: theme.textColor,
+                fontSize: 11,
+                formatter: (value) => formatDate(new Date(value))
+            },
+            axisTick: { show: false },
+            splitLine: showGrid ? {
+                lineStyle: { color: theme.splitLine, type: 'dashed' }
+            } : { show: false }
+        },
+        yAxis: {
+            type: 'category',
+            data: taskNames,
+            inverse: true, // First task at top
+            axisLine: { show: false },
+            axisLabel: {
+                color: theme.textColor,
+                fontSize: 12,
+                width: 120,
+                overflow: 'truncate'
+            },
+            axisTick: { show: false },
+            splitLine: showGrid ? {
+                lineStyle: { color: theme.splitLine, type: 'dashed' }
+            } : { show: false }
+        },
+        series: [
+            // Main task bars
+            {
+                type: 'custom',
+                renderItem: (params, api) => {
+                    const categoryIndex = api.value(0);
+                    const start = api.coord([api.value(1), categoryIndex]);
+                    const end = api.coord([api.value(2), categoryIndex]);
+                    const height = api.size([0, 1])[1] * 0.6;
+                    const rectShape = {
+                        x: start[0],
+                        y: start[1] - height / 2,
+                        width: end[0] - start[0],
+                        height: height
+                    };
+                    return {
+                        type: 'rect',
+                        shape: rectShape,
+                        style: {
+                            ...api.style(),
+                            fill: api.style().fill || defaultColors[categoryIndex % defaultColors.length]
+                        },
+                        emphasis: {
+                            style: {
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(0, 0, 0, 0.3)'
+                            }
+                        }
+                    };
+                },
+                encode: {
+                    x: [1, 2],
+                    y: 0
+                },
+                data: barData
+            },
+            // Progress overlay
+            ...(showProgress ? [{
+                    type: 'custom',
+                    renderItem: (params, api) => {
+                        const categoryIndex = api.value(0);
+                        const start = api.coord([api.value(1), categoryIndex]);
+                        const end = api.coord([api.value(2), categoryIndex]);
+                        const height = api.size([0, 1])[1] * 0.6;
+                        // Only render if there's progress
+                        if (api.value(3) <= 0)
+                            return null;
+                        const rectShape = {
+                            x: start[0],
+                            y: start[1] - height / 2,
+                            width: Math.max(0, end[0] - start[0]),
+                            height: height
+                        };
+                        return {
+                            type: 'rect',
+                            shape: rectShape,
+                            style: {
+                                fill: 'rgba(255, 255, 255, 0.35)'
+                            },
+                            silent: true
+                        };
+                    },
+                    encode: {
+                        x: [1, 2],
+                        y: 0
+                    },
+                    data: progressData,
+                    z: 2
+                }] : []),
+            // Today marker
+            ...(showToday && today >= paddedMinDate && today <= paddedMaxDate ? [{
+                    type: 'line',
+                    markLine: {
+                        silent: true,
+                        symbol: 'none',
+                        lineStyle: {
+                            color: theme.error,
+                            width: 2,
+                            type: 'solid'
+                        },
+                        label: {
+                            show: true,
+                            position: 'start',
+                            formatter: 'Today',
+                            fontSize: 10,
+                            color: theme.error
+                        },
+                        data: [{ xAxis: today.getTime() }]
+                    }
+                }] : [])
+        ]
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}