indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,265 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+import { getChartTheme, getTooltipConfig } from './theme.js';
+/**
+ * GanttChart - ECharts Gantt Chart component
+ *
+ * Displays project timelines with tasks, progress, and dependencies.
+ * Built on ECharts custom series for flexibility.
+ */
+export function GanttChart({ tasks, height = 400, showProgress = true, showToday = true, showGrid = true, dateFormat = 'short', className }) {
+    const theme = getChartTheme();
+    const tooltipConfig = 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 (_jsx("div", { className: cn('w-full', className), children: _jsx(ReactECharts, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}

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

@@ -0,0 +1,25 @@
+export interface GaugeSeriesItem {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface GaugeChartProps {
+    /** One or more series — concentric half-donut rings sharing one dial. Pass a single item for a one-ring gauge. */
+    series: GaugeSeriesItem[];
+    /** Maximum value */
+    max?: number;
+    /** Minimum value */
+    min?: number;
+    /** Chart height in pixels */
+    height?: number;
+    /** Unit suffix (%, $, etc.) */
+    unit?: string;
+    /** Class name for wrapper */
+    className?: string;
+}
+/**
+ * GaugeChart - Half-donut gauge with one or more concentric rings.
+ * The active ring (innermost by default, or hovered) is emphasised and its value
+ * shows in the center. Colors auto-resolve to red/amber/green by value unless set.
+ */
+export declare function GaugeChart({ series, max, min, height, unit, className }: GaugeChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,137 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * GaugeChart - Half-donut gauge with one or more concentric rings.
+ * The active ring (innermost by default, or hovered) is emphasised and its value
+ * shows in the center. Colors auto-resolve to red/amber/green by value unless set.
+ */
+export function GaugeChart({ series, max = 100, min = 0, height = 200, unit = '%', className }) {
+    // Which ring is emphasised (widest). Defaults to the innermost ring (the main metric); hover overrides.
+    const [activeIndex, setActiveIndex] = useState(series.length - 1);
+    // Traffic-light color from a value's position in [min, max]: red → amber → green.
+    const trafficColor = (v) => {
+        const pct = ((v - min) / (max - min)) * 100;
+        if (pct >= 75)
+            return '#22c55e';
+        if (pct >= 40)
+            return '#f59e0b';
+        return '#ef4444';
+    };
+    const seriesColor = (item) => item.color || trafficColor(item.value);
+    const getOption = () => {
+        const items = series;
+        const n = items.length;
+        const outerRadius = 150;
+        const active = Math.min(Math.max(activeIndex, 0), n - 1);
+        // Active ring is wider; the rest are slimmer so it stands out.
+        const baseWidth = Math.max(8, Math.min(Math.round(height * 0.07), Math.floor((outerRadius - 50) / (n + 0.6))));
+        const activeWidth = Math.round(baseWidth * 1.7);
+        const widthAt = (i) => (i === active ? activeWidth : baseWidth);
+        const ringGap = 2;
+        // Each ring's outer edge = running sum of all rings above it, plus a small gap.
+        const outerEdgeAt = (i) => {
+            let edge = outerRadius;
+            for (let k = 0; k < i; k++)
+                edge -= widthAt(k) + ringGap;
+            return edge;
+        };
+        const activeItem = items[active];
+        const activeColor = seriesColor(activeItem);
+        const titleFontSize = Math.max(11, Math.round(height * 0.06));
+        const valueFontSize = Math.max(20, Math.round(height * 0.16));
+        // Hidden pie supplies the in-canvas legend with named, colored items (gauges
+        // don't feed the native legend on their own).
+        const legendSeries = {
+            type: 'pie',
+            radius: [0, 0],
+            center: ['50%', '50%'],
+            silent: true,
+            label: { show: false },
+            labelLine: { show: false },
+            data: items.map((item) => ({ name: item.label, value: item.value, itemStyle: { color: seriesColor(item) } })),
+        };
+        return {
+            legend: items.length > 1 ? {
+                bottom: 0,
+                left: 'center',
+                itemWidth: 10,
+                itemHeight: 10,
+                icon: 'circle',
+                textStyle: { fontSize: 12, color: '#6c757d' },
+                formatter: (name) => {
+                    const it = items.find(x => x.label === name);
+                    return it ? `${name}  ${it.value}${unit}` : name;
+                },
+            } : undefined,
+            series: [legendSeries, ...items.flatMap((item, i) => {
+                    const w = widthAt(i);
+                    const radius = `${outerEdgeAt(i)}%`;
+                    const common = {
+                        type: 'gauge',
+                        startAngle: 180,
+                        endAngle: 0,
+                        min, max,
+                        radius,
+                        center: ['50%', n > 1 ? '80%' : '96%'],
+                        pointer: { show: false },
+                        splitLine: { show: false },
+                        axisTick: { show: false },
+                        axisLabel: { show: false },
+                        anchor: { show: false },
+                        z: i + 1,
+                        animationDurationUpdate: 300,
+                    };
+                    const isActive = i === active;
+                    return [
+                        {
+                            ...common,
+                            axisLine: { lineStyle: { width: w, color: [[1, 'rgba(0,0,0,0.05)']] } },
+                            detail: { show: false },
+                            title: { show: false },
+                            silent: true,
+                            data: [{ value: max }],
+                        },
+                        {
+                            ...common,
+                            axisLine: { show: false },
+                            progress: {
+                                show: true, roundCap: true, clip: false, width: w,
+                                itemStyle: { color: seriesColor(item), opacity: isActive ? 1 : 0.85 },
+                            },
+                            // Center value/label always reflects the active (hovered/default) ring.
+                            title: isActive ? { show: true, fontSize: titleFontSize, fontWeight: 500, color: '#64748b', offsetCenter: [0, '-8%'] } : { show: false },
+                            detail: isActive
+                                ? { valueAnimation: true, fontSize: valueFontSize, fontWeight: 700, color: activeColor, offsetCenter: [0, '-30%'], formatter: `{value}${unit}` }
+                                : { show: false },
+                            data: [{ value: item.value, name: isActive ? activeItem.label : '' }],
+                        },
+                    ];
+                })]
+        };
+    };
+    // Series layout: [0] hidden legend pie, then each ring = 2 series (track + progress).
+    // So ring index for a gauge series = floor((seriesIndex - 1) / 2).
+    const onEvents = {
+        mouseover: (p) => {
+            if (p.seriesType === 'gauge' && typeof p.seriesIndex === 'number') {
+                setActiveIndex(Math.floor((p.seriesIndex - 1) / 2));
+            }
+        },
+        legendselectchanged: (p) => {
+            const i = series.findIndex(s => s.label === p.name);
+            if (i >= 0)
+                setActiveIndex(i);
+        },
+        highlight: (p) => {
+            if (Array.isArray(p.batch) && p.batch[0]?.name) {
+                const i = series.findIndex(s => s.label === p.batch[0].name);
+                if (i >= 0)
+                    setActiveIndex(i);
+            }
+        },
+    };
+    return (_jsx("div", { className: cn('w-full', className), children: _jsx(ReactECharts, { option: getOption(), style: { height: Math.round(height * (series.length > 1 ? 0.92 : 0.82)), width: '100%' }, opts: { renderer: 'canvas' }, onEvents: onEvents, notMerge: true }) }));
+}

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

@@ -0,0 +1,38 @@
+export interface GeoMapDataItem {
+    /** Location name */
+    name: string;
+    /** Value for this location */
+    value: number;
+}
+export interface GeoMapMarker {
+    /** Marker name/label */
+    name: string;
+    /** Coordinates [longitude, latitude] */
+    coords: [number, number];
+    /** Optional value (affects size) */
+    value?: number;
+}
+export interface GeoMapProps {
+    /** Point markers on the map */
+    markers?: GeoMapMarker[];
+    height?: number;
+    /** Marker color */
+    markerColor?: string;
+    /** Marker size range [min, max] */
+    markerSizeRange?: [number, number];
+    /** Show ripple effect */
+    showRipple?: boolean;
+    /** Map background color */
+    mapColor?: string;
+    /** Map border color */
+    borderColor?: string;
+    /** Show state labels on hover */
+    showStateLabels?: boolean;
+    className?: string;
+}
+/**
+ * GeoMap - Geographic scatter/bubble map for India
+ * Shows location markers with optional size based on values
+ * Includes all Indian states and union territories
+ */
+export declare function GeoMap({ markers, height, markerColor, markerSizeRange, showRipple, mapColor, borderColor, showStateLabels, className }: GeoMapProps): import("react").JSX.Element;

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

@@ -0,0 +1,125 @@
+'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';
+/**
+ * GeoMap - Geographic scatter/bubble map for India
+ * Shows location markers with optional size based on values
+ * Includes all Indian states and union territories
+ */
+export function GeoMap({ markers = [], height = 400, markerColor = '#5470c6', markerSizeRange = [10, 35], showRipple = true, mapColor = '#e8f4f8', borderColor = '#b0c4de', showStateLabels = true, className }) {
+    const chartRef = useRef(null);
+    const [mapReady, setMapReady] = useState(false);
+    useEffect(() => {
+        // Register India map GeoJSON
+        try {
+            echarts.registerMap('India', INDIA_GEOJSON);
+            setMapReady(true);
+        }
+        catch (e) {
+            // Map might already be registered
+            setMapReady(true);
+        }
+    }, []);
+    // Calculate min/max for size scaling
+    const values = markers.map(m => m.value || 0).filter(v => v > 0);
+    const minVal = values.length > 0 ? Math.min(...values) : 0;
+    const maxVal = values.length > 0 ? Math.max(...values) : 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]);
+    };
+    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 option = {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            textStyle: { color: '#344767', fontSize: 12 },
+            formatter: (params) => {
+                if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
+                    const value = params.value?.[2];
+                    return `<strong>${params.name}</strong>${value ? `<br/>Production: ${value.toLocaleString()} units` : ''}`;
+                }
+                return `<strong>${params.name}</strong>`;
+            }
+        },
+        geo: {
+            map: 'India',
+            roam: true,
+            zoom: 1.15,
+            center: [82, 22],
+            aspectScale: 0.9,
+            selectedMode: false,
+            itemStyle: {
+                areaColor: mapColor,
+                borderColor: borderColor,
+                borderWidth: 1
+            },
+            emphasis: {
+                itemStyle: {
+                    areaColor: '#cce5ff',
+                    borderColor: '#5470c6',
+                    borderWidth: 2
+                },
+                label: {
+                    show: showStateLabels,
+                    color: '#344767',
+                    fontSize: 11,
+                    fontWeight: 500
+                }
+            },
+            label: {
+                show: false
+            }
+        },
+        series: markers.length > 0 ? [{
+                name: 'Locations',
+                type: showRipple ? 'effectScatter' : 'scatter',
+                coordinateSystem: 'geo',
+                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: {
+                    show: true,
+                    position: 'right',
+                    formatter: '{b}',
+                    fontSize: 12,
+                    color: '#344767',
+                    fontWeight: 600,
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                },
+                data: markers.map(m => ({
+                    name: m.name,
+                    value: [...m.coords, m.value || 0]
+                }))
+            }] : []
+    };
+    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/Heatmap.d.ts

@@ -0,0 +1,31 @@
+export interface HeatmapChartDataItem {
+    /** X-axis index or value */
+    x: number | string;
+    /** Y-axis index or value */
+    y: number | string;
+    /** Heat value */
+    value: number;
+}
+export interface HeatmapChartProps {
+    data: HeatmapChartDataItem[];
+    /** X-axis categories */
+    xCategories: string[];
+    /** Y-axis categories */
+    yCategories: string[];
+    height?: number;
+    /** Show value labels in cells */
+    showLabels?: boolean;
+    /** Color range [min, max] */
+    colorRange?: [string, string];
+    /** Min value for color scale */
+    minValue?: number;
+    /** Max value for color scale */
+    maxValue?: number;
+    /** Show visual map legend */
+    showVisualMap?: boolean;
+    className?: string;
+}
+/**
+ * HeatmapChart - ECharts Heatmap for time/category based data visualization
+ */
+export declare function HeatmapChart({ data, xCategories, yCategories, height, showLabels, colorRange, minValue, maxValue, showVisualMap, className }: HeatmapChartProps): import("react").JSX.Element;