indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,122 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * ScatterChart - ECharts Scatter/Bubble Chart for correlation data
+ */
+export function ScatterChart({ series, height = 300, showLegend = true, showGrid = true, xAxisName, yAxisName, bubbleMode = false, sizeRange = [10, 40], className }) {
+    const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
+    // Calculate size range for bubble mode
+    const allSizes = bubbleMode
+        ? series.flatMap(s => s.data.map(d => d.size || 0)).filter(s => s > 0)
+        : [];
+    const minSize = allSizes.length ? Math.min(...allSizes) : 1;
+    const maxSize = allSizes.length ? Math.max(...allSizes) : 1;
+    const getSymbolSize = (dataItem, defaultSize) => {
+        if (!bubbleMode || !dataItem.size)
+            return defaultSize;
+        // Scale size to range
+        const normalized = (dataItem.size - minSize) / (maxSize - minSize || 1);
+        return sizeRange[0] + normalized * (sizeRange[1] - sizeRange[0]);
+    };
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            textStyle: {
+                color: '#344767',
+                fontSize: 12
+            },
+            formatter: (params) => {
+                const data = params.data;
+                let tip = `${params.seriesName}<br/>`;
+                if (data.label)
+                    tip += `${data.label}<br/>`;
+                tip += `X: ${data.x}<br/>Y: ${data.y}`;
+                if (bubbleMode && data.size)
+                    tip += `<br/>Size: ${data.size}`;
+                return tip;
+            }
+        },
+        legend: showLegend ? {
+            top: 0,
+            left: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                fontSize: 12,
+                color: '#6c757d'
+            }
+        } : undefined,
+        grid: {
+            top: showLegend ? 36 : 20,
+            right: 16,
+            bottom: 8,
+            left: 8,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            name: xAxisName,
+            nameLocation: 'center',
+            nameGap: 25,
+            nameTextStyle: {
+                color: '#6c757d',
+                fontSize: 11
+            },
+            axisLine: { lineStyle: { color: '#dee2e6' } },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            splitLine: {
+                show: showGrid,
+                lineStyle: { color: '#f0f0f0', type: 'dashed' }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: yAxisName,
+            nameLocation: 'center',
+            nameGap: 35,
+            nameTextStyle: {
+                color: '#6c757d',
+                fontSize: 11
+            },
+            axisLine: { show: false },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            splitLine: {
+                show: showGrid,
+                lineStyle: { color: '#f0f0f0', type: 'dashed' }
+            }
+        },
+        series: series.map((s, index) => {
+            const color = s.color || colors[index % colors.length];
+            const defaultSize = s.symbolSize || 12;
+            return {
+                name: s.name,
+                type: 'scatter',
+                symbol: s.symbol || 'circle',
+                symbolSize: (data) => getSymbolSize(data, defaultSize),
+                itemStyle: {
+                    color: color,
+                    opacity: bubbleMode ? 0.7 : 0.9
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowColor: 'rgba(0, 0, 0, 0.3)'
+                    }
+                },
+                data: s.data.map(d => ({
+                    value: [d.x, d.y],
+                    x: d.x,
+                    y: d.y,
+                    size: d.size,
+                    label: d.label
+                }))
+            };
+        })
+    };
+    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/Sparkline.d.ts

@@ -0,0 +1,37 @@
+export interface SparklineProps {
+    /** Data points */
+    data: number[];
+    /** Chart type */
+    type?: 'line' | 'area' | 'bar';
+    /** Height in pixels */
+    height?: number;
+    /** Width (can be percentage or pixels) */
+    width?: number | string;
+    /** Line/bar color */
+    color?: string;
+    /** Area fill color (for area type) */
+    fillColor?: string;
+    /** Show end dot */
+    showEndDot?: boolean;
+    /** Show min/max markers */
+    showMinMax?: boolean;
+    /** Smooth line */
+    smooth?: boolean;
+    /** Reference line value */
+    referenceLine?: number;
+    /** Optional x-axis category labels (e.g. months) — used in the hover tooltip; rendered on the axis only when showAxis is true */
+    labels?: string[];
+    /** Render the x-axis labels below the trend */
+    showAxis?: boolean;
+    /** Show hover tooltip with the value (and label) at each point */
+    showTooltip?: boolean;
+    /** Optional value prefix/suffix for the tooltip (e.g. '₹', '%') */
+    valuePrefix?: string;
+    valueSuffix?: string;
+    className?: string;
+}
+/**
+ * Sparkline - Compact inline trend visualization
+ * Great for: KPI cards, table cells, compact trend indicators
+ */
+export declare function Sparkline({ data, type, height, width, color, fillColor, showEndDot, showMinMax, smooth, referenceLine, labels, showAxis, showTooltip, valuePrefix, valueSuffix, className }: SparklineProps): import("react").JSX.Element;

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

@@ -0,0 +1,128 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+// Convert any color (hex, rgb(), rgba(), space-separated rgb()) to rgba() with given alpha (0–1).
+// Hex+alpha-suffix concat (e.g. color + '40') breaks for non-hex inputs and crashes canvas gradients.
+function withAlpha(color, alpha) {
+    if (!color)
+        return 'rgba(0,0,0,' + alpha + ')';
+    const trimmed = color.trim();
+    if (trimmed.startsWith('#')) {
+        let hex = trimmed.slice(1);
+        if (hex.length === 3)
+            hex = hex.split('').map(c => c + c).join('');
+        if (hex.length === 6) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
+        }
+    }
+    const m = trimmed.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (m) {
+        return 'rgba(' + m[1] + ',' + m[2] + ',' + m[3] + ',' + alpha + ')';
+    }
+    return trimmed;
+}
+/**
+ * Sparkline - Compact inline trend visualization
+ * Great for: KPI cards, table cells, compact trend indicators
+ */
+export function Sparkline({ data, type = 'line', height = 40, width = '100%', color = '#5470c6', fillColor, showEndDot = true, showMinMax = false, smooth = true, referenceLine, labels, showAxis = false, showTooltip = false, valuePrefix = '', valueSuffix = '', className }) {
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const lastValue = data[data.length - 1];
+    // Determine trend for color coding
+    const firstValue = data[0];
+    const isUpward = lastValue > firstValue;
+    const trendColor = isUpward ? '#52c41a' : lastValue < firstValue ? '#f5222d' : color;
+    const markPointData = [];
+    if (showMinMax) {
+        const minIndex = data.indexOf(min);
+        const maxIndex = data.indexOf(max);
+        markPointData.push({ coord: [minIndex, min], symbol: 'circle', symbolSize: 6, itemStyle: { color: '#ee6666' } }, { coord: [maxIndex, max], symbol: 'circle', symbolSize: 6, itemStyle: { color: '#91cc75' } });
+    }
+    if (showEndDot) {
+        markPointData.push({
+            coord: [data.length - 1, lastValue],
+            symbol: 'circle',
+            symbolSize: 6,
+            itemStyle: { color: trendColor }
+        });
+    }
+    const series = {
+        type: type === 'bar' ? 'bar' : 'line',
+        data: data,
+        symbol: 'none',
+        smooth: smooth,
+        lineStyle: type !== 'bar' ? { color: color, width: 1.5 } : undefined,
+        itemStyle: { color: color },
+        areaStyle: type === 'area' ? {
+            color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                    { offset: 0, color: fillColor ? withAlpha(fillColor, 1) : withAlpha(color, 0.25) },
+                    { offset: 1, color: fillColor ? withAlpha(fillColor, 0.06) : 'transparent' }
+                ]
+            }
+        } : undefined,
+        markPoint: markPointData.length > 0 ? {
+            data: markPointData,
+            animation: false
+        } : undefined,
+        markLine: referenceLine !== undefined ? {
+            silent: true,
+            symbol: 'none',
+            lineStyle: { color: '#adb5bd', type: 'dashed', width: 1 },
+            data: [{ yAxis: referenceLine }],
+            label: { show: false }
+        } : undefined,
+        barWidth: type === 'bar' ? '60%' : undefined
+    };
+    const hasLabels = !!labels && labels.length > 0;
+    const showAxisLabels = hasLabels && showAxis;
+    const option = {
+        tooltip: showTooltip ? {
+            trigger: 'axis',
+            backgroundColor: 'rgba(255, 255, 255, 0.98)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            borderRadius: 8,
+            padding: [6, 10],
+            extraCssText: 'box-shadow: 0 4px 16px rgba(0,0,0,0.12);',
+            textStyle: { color: '#344767', fontSize: 12 },
+            axisPointer: { type: 'line', lineStyle: { color: '#cbd5e1', width: 1 } },
+            formatter: (params) => {
+                const p = Array.isArray(params) ? params[0] : params;
+                const cat = hasLabels && p.axisValue ? `${p.axisValue}<br/>` : '';
+                return `${cat}<strong>${valuePrefix}${Number(p.value).toLocaleString()}${valueSuffix}</strong>`;
+            }
+        } : undefined,
+        grid: {
+            top: showMinMax ? 8 : 4,
+            right: showEndDot ? 8 : 4,
+            bottom: showAxisLabels ? 20 : 4,
+            left: 4,
+            containLabel: showAxisLabels
+        },
+        xAxis: {
+            type: 'category',
+            data: hasLabels ? labels : undefined,
+            show: showAxisLabels,
+            boundaryGap: type === 'bar',
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: showAxisLabels ? { color: '#94a3b8', fontSize: 10, margin: 6, interval: 0, hideOverlap: true } : { show: false }
+        },
+        yAxis: {
+            type: 'value',
+            show: false,
+            min: min - (max - min) * 0.1,
+            max: max + (max - min) * 0.1
+        },
+        series: [series]
+    };
+    return (_jsx("div", { className: cn('inline-block', className), style: { width, height }, children: _jsx(ReactECharts, { option: option, style: { height: '100%', width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}

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

@@ -0,0 +1,30 @@
+export interface TreemapDataItem {
+    /** Node name */
+    name: string;
+    /** Node value (determines size) */
+    value: number;
+    /** Optional children for hierarchical data */
+    children?: TreemapDataItem[];
+    /** Optional custom color */
+    color?: string;
+}
+export interface TreemapChartProps {
+    data: TreemapDataItem[];
+    height?: number;
+    /** Show breadcrumb navigation */
+    showBreadcrumb?: boolean;
+    /** Color palette */
+    colors?: string[];
+    /** Show labels on leaves */
+    showLabels?: boolean;
+    /** Label position */
+    labelPosition?: 'inside' | 'insideTopLeft' | 'insideBottomLeft';
+    /** Enable drill-down on click */
+    drillDown?: boolean;
+    className?: string;
+}
+/**
+ * TreemapChart - Hierarchical data visualization
+ * Great for: Cost breakdown, category distribution, budget allocation
+ */
+export declare function TreemapChart({ data, height, showBreadcrumb, colors, showLabels, labelPosition, drillDown, className }: TreemapChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * TreemapChart - Hierarchical data visualization
+ * Great for: Cost breakdown, category distribution, budget allocation
+ */
+export function TreemapChart({ data, height = 300, showBreadcrumb = false, colors = ['#6366f1', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'], showLabels = true, labelPosition = 'insideTopLeft', drillDown = true, className }) {
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(255, 255, 255, 0.98)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            borderRadius: 8,
+            padding: [8, 12],
+            extraCssText: 'box-shadow: 0 4px 16px rgba(0,0,0,0.12);',
+            textStyle: { color: '#344767', fontSize: 12 },
+            formatter: (params) => {
+                const path = params.treePathInfo
+                    .map((node) => node.name)
+                    .filter((name) => name)
+                    .join(' → ');
+                return `<strong>${path || params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+            }
+        },
+        series: [{
+                type: 'treemap',
+                data: data,
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: showBreadcrumb ? 22 : 0,
+                roam: false,
+                nodeClick: drillDown ? 'zoomToNode' : false,
+                breadcrumb: showBreadcrumb ? {
+                    show: true,
+                    bottom: 0,
+                    left: 'center',
+                    height: 18,
+                    itemStyle: {
+                        color: '#f5f5f5',
+                        borderColor: '#dee2e6',
+                        textStyle: { color: '#344767', fontSize: 11 }
+                    },
+                    emphasis: {
+                        itemStyle: { color: '#e8e8e8' }
+                    }
+                } : { show: false },
+                label: {
+                    show: showLabels,
+                    position: labelPosition,
+                    formatter: '{b}',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: '#fff',
+                    textShadowColor: 'rgba(0,0,0,0.35)',
+                    textShadowBlur: 3
+                },
+                upperLabel: {
+                    show: true,
+                    height: 20,
+                    color: '#fff',
+                    fontSize: 11,
+                    textShadowColor: 'rgba(0,0,0,0.3)',
+                    textShadowBlur: 2
+                },
+                itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 3,
+                    gapWidth: 3,
+                    borderRadius: 4
+                },
+                levels: [
+                    {
+                        itemStyle: {
+                            borderColor: '#fff',
+                            borderWidth: 4,
+                            gapWidth: 4,
+                            borderRadius: 6
+                        }
+                    },
+                    {
+                        colorSaturation: [0.45, 0.7],
+                        itemStyle: {
+                            borderColorSaturation: 0.6,
+                            gapWidth: 2,
+                            borderWidth: 2,
+                            borderRadius: 3
+                        }
+                    }
+                ],
+                color: colors
+            }]
+    };
+    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/index.d.ts

@@ -0,0 +1,38 @@
+export { AreaChart } from './Area.js';
+export type { AreaChartProps, AreaChartDataItem, AreaChartSeries } from './Area.js';
+export { BarChart } from './Bar.js';
+export type { BarChartProps, BarChartDataItem, BarChartSeries } from './Bar.js';
+export { DonutChart } from './Donut.js';
+export type { DonutChartProps, DonutChartDataItem } from './Donut.js';
+export { GaugeChart } from './Gauge.js';
+export type { GaugeChartProps, GaugeSeriesItem } from './Gauge.js';
+export { LineChart } from './Line.js';
+export type { LineChartProps, LineChartDataItem, LineChartSeries } from './Line.js';
+export { RadarChart } from './Radar.js';
+export type { RadarChartProps, RadarChartIndicator, RadarChartSeries } from './Radar.js';
+export { FunnelChart } from './Funnel.js';
+export type { FunnelChartProps, FunnelChartDataItem } from './Funnel.js';
+export { HeatmapChart } from './Heatmap.js';
+export type { HeatmapChartProps, HeatmapChartDataItem } from './Heatmap.js';
+export { ScatterChart } from './Scatter.js';
+export type { ScatterChartProps, ScatterChartDataItem, ScatterChartSeries } from './Scatter.js';
+export { ParetoChart } from './Pareto.js';
+export type { ParetoChartProps, ParetoChartDataItem } from './Pareto.js';
+export { BubbleChart } from './Bubble.js';
+export type { BubbleChartProps, BubbleChartDataItem, BubbleChartSeries } from './Bubble.js';
+export { BoxPlotChart } from './BoxPlot.js';
+export type { BoxPlotChartProps, BoxPlotChartDataItem } from './BoxPlot.js';
+export { GeoMap } from './GeoMap.js';
+export type { GeoMapProps, GeoMapDataItem, GeoMapMarker } from './GeoMap.js';
+export { TreemapChart } from './Treemap.js';
+export type { TreemapChartProps, TreemapDataItem } from './Treemap.js';
+export { SankeyChart } from './Sankey.js';
+export type { SankeyChartProps, SankeyNode, SankeyLink } from './Sankey.js';
+export { Sparkline } from './Sparkline.js';
+export type { SparklineProps } from './Sparkline.js';
+export { GanttChart } from './Gantt.js';
+export type { GanttChartProps, GanttTask } from './Gantt.js';
+export { FlowMap } from './FlowMap.js';
+export type { FlowMapProps, FlowMapLine, FlowMapMarker } from './FlowMap.js';
+export { ChartCard } from './DashboardCard.js';
+export type { ChartCardProps } from './DashboardCard.js';

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

@@ -0,0 +1,23 @@
+'use client';
+// ECharts Components
+export { AreaChart } from './Area.js';
+export { BarChart } from './Bar.js';
+export { DonutChart } from './Donut.js';
+export { GaugeChart } from './Gauge.js';
+export { LineChart } from './Line.js';
+export { RadarChart } from './Radar.js';
+export { FunnelChart } from './Funnel.js';
+export { HeatmapChart } from './Heatmap.js';
+export { ScatterChart } from './Scatter.js';
+export { ParetoChart } from './Pareto.js';
+export { BubbleChart } from './Bubble.js';
+export { BoxPlotChart } from './BoxPlot.js';
+export { GeoMap } from './GeoMap.js';
+// New Charts
+export { TreemapChart } from './Treemap.js';
+export { SankeyChart } from './Sankey.js';
+export { Sparkline } from './Sparkline.js';
+export { GanttChart } from './Gantt.js';
+export { FlowMap } from './FlowMap.js';
+// Chart Wrapper
+export { ChartCard } from './DashboardCard.js';

package/dist/components/dashboard/charts/india-map.d.ts

@@ -0,0 +1,22 @@
+export declare const INDIA_GEOJSON: {
+    type: string;
+    features: ({
+        type: string;
+        properties: {
+            name: string;
+        };
+        geometry: {
+            type: string;
+            coordinates: number[][][][];
+        };
+    } | {
+        type: string;
+        properties: {
+            name: string;
+        };
+        geometry: {
+            type: string;
+            coordinates: number[][][];
+        };
+    })[];
+};