indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../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.
+ */
+export function DonutChart({ data, height = 300, showLegend = true, centerLabel, centerValue, innerRadius = '50%', outerRadius = '70%', className, onSegmentClick }) {
+    const chartRef = useRef(null);
+    const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
+    const buildGraphic = 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 (_jsx("div", { className: cn('w-full', className), children: _jsx(ReactECharts, { ref: chartRef, option: option, style: { height, width: '100%', cursor: onSegmentClick ? 'pointer' : 'default' }, opts: { renderer: 'canvas' }, onEvents: onEvents }) }));
+}

package/dist/components/dashboard/charts/FlowMap.d.ts

@@ -0,0 +1,38 @@
+export interface FlowMapMarker {
+    name: string;
+    coords: [number, number];
+    value?: number;
+}
+export interface FlowMapLine {
+    name?: string;
+    from: [number, number];
+    to: [number, number];
+    value?: number;
+    color?: string;
+}
+export interface FlowMapProps {
+    markers?: FlowMapMarker[];
+    lines?: FlowMapLine[];
+    height?: number;
+    markerColor?: string;
+    lineColor?: string;
+    markerSizeRange?: [number, number];
+    lineWidth?: number;
+    showRipple?: boolean;
+    showLineEffect?: boolean;
+    effectSymbol?: 'circle' | 'arrow' | 'plane' | 'pin';
+    mapColor?: string;
+    borderColor?: string;
+    showLabels?: boolean;
+    curveness?: number;
+    className?: string;
+}
+/**
+ * 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.
+ */
+export declare function FlowMap({ markers, lines, height, markerColor, lineColor, markerSizeRange, lineWidth, showRipple, showLineEffect, effectSymbol, mapColor, borderColor, showLabels, curveness, className }: FlowMapProps): import("react").JSX.Element;

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

@@ -0,0 +1,199 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts/core';
+import { cn } from '../../../lib/utils.js';
+import { INDIA_GEOJSON } from './india-map.js';
+import { getChartTheme } from './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.
+ */
+export 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 = useRef(null);
+    const [mapReady, setMapReady] = useState(false);
+    const theme = 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');
+    useEffect(() => {
+        try {
+            echarts.registerMap('India', 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 (_jsx("div", { className: cn('w-full flex items-center justify-center', className), style: { height }, children: _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 (_jsx("div", { className: cn('w-full', className), children: _jsx(ReactECharts, { ref: chartRef, option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}

package/dist/components/dashboard/charts/Funnel.d.ts

@@ -0,0 +1,30 @@
+export interface FunnelChartDataItem {
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface FunnelChartProps {
+    data: FunnelChartDataItem[];
+    height?: number;
+    /** Sort order of stages */
+    sort?: 'ascending' | 'descending' | 'none';
+    className?: string;
+    /** @deprecated kept for backward-compat; no longer affects rendering */
+    showLegend?: boolean;
+    /** @deprecated kept for backward-compat; no longer affects rendering */
+    showLabels?: boolean;
+    /** @deprecated kept for backward-compat; no longer affects rendering */
+    labelPosition?: 'left' | 'right' | 'inside' | 'center';
+    /** @deprecated kept for backward-compat; no longer affects rendering */
+    orient?: 'vertical' | 'horizontal';
+    /** @deprecated kept for backward-compat; no longer affects rendering */
+    gap?: number;
+    /** @deprecated kept for backward-compat; only the bar style is rendered now */
+    variant?: 'classic' | 'bars';
+}
+/**
+ * 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.
+ */
+export declare function FunnelChart({ data, height, sort, className }: FunnelChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../../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.
+ */
+export function FunnelChart({ data, height = 300, sort = 'descending', className }) {
+    const [hovered, setHovered] = 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 (_jsx("div", { className: 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 (_jsxs("div", { className: "flex items-center gap-3 py-1", onMouseEnter: () => setHovered(index), onMouseLeave: () => setHovered(null), children: [_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), "%"] }), _jsx("div", { className: "flex-1 min-w-0 flex justify-center", children: _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: [_jsx("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), _jsx("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: item.value.toLocaleString() })] }) })] }, item.name));
+        }) }));
+}

package/dist/components/dashboard/charts/Gantt.d.ts

@@ -0,0 +1,26 @@
+export interface GanttTask {
+    id: string;
+    name: string;
+    start: string | Date;
+    end: string | Date;
+    progress?: number;
+    color?: string;
+    category?: string;
+    dependencies?: string[];
+}
+export interface GanttChartProps {
+    tasks: GanttTask[];
+    height?: number;
+    showProgress?: boolean;
+    showToday?: boolean;
+    showGrid?: boolean;
+    dateFormat?: 'short' | 'medium' | 'long';
+    className?: string;
+}
+/**
+ * GanttChart - ECharts Gantt Chart component
+ *
+ * Displays project timelines with tasks, progress, and dependencies.
+ * Built on ECharts custom series for flexibility.
+ */
+export declare function GanttChart({ tasks, height, showProgress, showToday, showGrid, dateFormat, className }: GanttChartProps): import("react").JSX.Element;