indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,110 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * HeatmapChart - ECharts Heatmap for time/category based data visualization
+ */
+export function HeatmapChart({ data, xCategories, yCategories, height = 300, showLabels = true, colorRange = ['#f0f9eb', '#67c23a'], minValue, maxValue, showVisualMap = true, className }) {
+    // Calculate min/max from data if not provided
+    const values = data.map(d => d.value);
+    const min = minValue ?? Math.min(...values);
+    const max = maxValue ?? Math.max(...values);
+    // Convert data to ECharts format [xIndex, yIndex, value]
+    const echartsData = data.map(d => {
+        const xIndex = typeof d.x === 'number' ? d.x : xCategories.indexOf(d.x);
+        const yIndex = typeof d.y === 'number' ? d.y : yCategories.indexOf(d.y);
+        return [xIndex, yIndex, d.value];
+    });
+    const option = {
+        tooltip: {
+            position: 'top',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            textStyle: {
+                color: '#344767',
+                fontSize: 12
+            },
+            formatter: (params) => {
+                return `${xCategories[params.data[0]]} × ${yCategories[params.data[1]]}<br/>Value: ${params.data[2]}`;
+            }
+        },
+        grid: {
+            top: 12,
+            right: showVisualMap ? 70 : 12,
+            bottom: 4,
+            left: 4,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: xCategories,
+            position: 'bottom',
+            axisLine: { lineStyle: { color: '#dee2e6' } },
+            axisLabel: {
+                color: '#6c757d',
+                fontSize: 11,
+                rotate: xCategories.length > 10 ? 45 : 0
+            },
+            axisTick: { show: false },
+            splitArea: { show: false }
+        },
+        yAxis: {
+            type: 'category',
+            data: yCategories,
+            axisLine: { show: false },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisTick: { show: false },
+            splitArea: { show: false }
+        },
+        visualMap: showVisualMap ? {
+            min: min,
+            max: max,
+            calculable: true,
+            orient: 'vertical',
+            right: 10,
+            top: 'center',
+            itemHeight: 120,
+            itemWidth: 12,
+            textStyle: {
+                color: '#6c757d',
+                fontSize: 10
+            },
+            inRange: {
+                color: colorRange
+            }
+        } : {
+            show: false,
+            min: min,
+            max: max,
+            inRange: {
+                color: colorRange
+            }
+        },
+        series: [
+            {
+                type: 'heatmap',
+                data: echartsData,
+                label: {
+                    show: showLabels,
+                    fontSize: 10,
+                    color: '#344767',
+                    formatter: (params) => params.data[2]
+                },
+                itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 1,
+                    borderRadius: 2
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowColor: 'rgba(0, 0, 0, 0.3)'
+                    }
+                }
+            }
+        ]
+    };
+    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/Line.d.ts

@@ -0,0 +1,33 @@
+export interface LineChartDataItem {
+    [key: string]: string | number;
+}
+export interface LineChartSeries {
+    key: string;
+    name: string;
+    color?: string;
+    /** Line style: solid, dashed, dotted */
+    lineStyle?: 'solid' | 'dashed' | 'dotted';
+    /** Show data points */
+    showSymbol?: boolean;
+}
+export interface LineChartProps {
+    data: LineChartDataItem[];
+    xKey: string;
+    series: LineChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    /** Smooth curve or straight lines */
+    smooth?: boolean;
+    /** Show data labels on points */
+    showLabels?: boolean;
+    /** Y-axis minimum value */
+    yMin?: number;
+    /** Y-axis maximum value */
+    yMax?: number;
+    className?: string;
+}
+/**
+ * LineChart - ECharts Line Chart component (no area fill)
+ */
+export declare function LineChart({ data, xKey, series, height, showLegend, showGrid, smooth, showLabels, yMin, yMax, className }: LineChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,69 @@
+'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, getLegendConfig, getAxisConfig, getGridConfig } from './theme.js';
+/**
+ * LineChart - ECharts Line Chart component (no area fill)
+ */
+export function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, className }) {
+    const theme = getChartTheme();
+    const axisConfig = getAxisConfig();
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            ...getTooltipConfig()
+        },
+        legend: showLegend ? getLegendConfig('top') : undefined,
+        grid: getGridConfig(showLegend),
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.map(item => item[xKey]),
+            ...axisConfig
+        },
+        yAxis: {
+            type: 'value',
+            min: yMin,
+            max: yMax,
+            axisLine: { show: false },
+            axisLabel: axisConfig.axisLabel,
+            splitLine: {
+                show: showGrid,
+                ...axisConfig.splitLine
+            }
+        },
+        series: series.map((s, index) => {
+            const color = s.color || theme.colors[index % theme.colors.length];
+            return {
+                name: s.name,
+                type: 'line',
+                smooth: smooth,
+                symbol: s.showSymbol !== false ? 'circle' : 'none',
+                symbolSize: 6,
+                showSymbol: s.showSymbol !== false,
+                lineStyle: {
+                    width: 2,
+                    color: color,
+                    type: s.lineStyle || 'solid'
+                },
+                itemStyle: { color },
+                label: {
+                    show: showLabels,
+                    position: 'top',
+                    fontSize: 10,
+                    color: theme.textColor
+                },
+                emphasis: {
+                    focus: 'series',
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowColor: 'rgba(0, 0, 0, 0.2)'
+                    }
+                },
+                data: data.map(item => item[s.key])
+            };
+        })
+    };
+    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/Pareto.d.ts

@@ -0,0 +1,21 @@
+export interface ParetoChartDataItem {
+    name: string;
+    value: number;
+}
+export interface ParetoChartProps {
+    data: ParetoChartDataItem[];
+    height?: number;
+    showLegend?: boolean;
+    /** Bar color */
+    barColor?: string;
+    /** Line color for cumulative percentage */
+    lineColor?: string;
+    /** Y-axis label for values */
+    valueAxisName?: string;
+    className?: string;
+}
+/**
+ * ParetoChart - Combined bar and line chart showing values and cumulative percentage
+ * Used for identifying the "vital few" from the "trivial many" (80/20 rule)
+ */
+export declare function ParetoChart({ data, height, showLegend, barColor, lineColor, valueAxisName, className }: ParetoChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * ParetoChart - Combined bar and line chart showing values and cumulative percentage
+ * Used for identifying the "vital few" from the "trivial many" (80/20 rule)
+ */
+export function ParetoChart({ data, height = 300, showLegend = true, barColor = '#5470c6', lineColor = '#ee6666', valueAxisName, className }) {
+    // Sort data descending by value
+    const sortedData = [...data].sort((a, b) => b.value - a.value);
+    // Calculate cumulative percentage
+    const total = sortedData.reduce((sum, item) => sum + item.value, 0);
+    let cumulative = 0;
+    const cumulativeData = sortedData.map(item => {
+        cumulative += item.value;
+        return Math.round((cumulative / total) * 100);
+    });
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            textStyle: { color: '#344767', fontSize: 12 },
+            axisPointer: { type: 'cross' },
+            formatter: (params) => {
+                const bar = params.find((p) => p.seriesType === 'bar');
+                const line = params.find((p) => p.seriesType === 'line');
+                return `${bar?.name}<br/>
+          Value: ${bar?.value?.toLocaleString()}<br/>
+          Cumulative: ${line?.value}%`;
+            }
+        },
+        legend: showLegend ? {
+            top: 0,
+            left: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: { fontSize: 12, color: '#6c757d' }
+        } : undefined,
+        grid: {
+            top: showLegend ? 44 : 24,
+            right: 44,
+            bottom: 8,
+            left: 8,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: sortedData.map(d => d.name),
+            axisLine: { lineStyle: { color: '#dee2e6' } },
+            axisLabel: { color: '#6c757d', fontSize: 11, rotate: sortedData.length > 6 ? 30 : 0 },
+            axisTick: { show: false }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: valueAxisName,
+                nameTextStyle: { color: '#6c757d', fontSize: 11 },
+                axisLine: { show: false },
+                axisLabel: { color: '#6c757d', fontSize: 11 },
+                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+            },
+            {
+                type: 'value',
+                name: '%',
+                min: 0,
+                max: 100,
+                nameTextStyle: { color: '#6c757d', fontSize: 11 },
+                axisLine: { show: false },
+                axisLabel: { color: '#6c757d', fontSize: 11, formatter: '{value}%' },
+                splitLine: { show: false }
+            }
+        ],
+        series: [
+            {
+                name: 'Value',
+                type: 'bar',
+                data: sortedData.map(d => d.value),
+                barMaxWidth: 50,
+                itemStyle: { color: barColor, borderRadius: [4, 4, 0, 0] }
+            },
+            {
+                name: 'Cumulative %',
+                type: 'line',
+                yAxisIndex: 1,
+                data: cumulativeData,
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 6,
+                lineStyle: { width: 2, color: lineColor },
+                itemStyle: { color: lineColor },
+                markLine: {
+                    silent: true,
+                    symbol: 'none',
+                    lineStyle: { color: '#faad14', type: 'dashed' },
+                    data: [{ yAxis: 80, label: { formatter: '80%', position: 'end' } }]
+                }
+            }
+        ]
+    };
+    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/Radar.d.ts

@@ -0,0 +1,32 @@
+export interface RadarChartIndicator {
+    /** Dimension name */
+    name: string;
+    /** Maximum value for this dimension */
+    max: number;
+    /** Minimum value (default 0) */
+    min?: number;
+}
+export interface RadarChartSeries {
+    name: string;
+    values: number[];
+    color?: string;
+    /** Fill area opacity (0-1) */
+    areaOpacity?: number;
+}
+export interface RadarChartProps {
+    /** Dimensions/axes of the radar */
+    indicators: RadarChartIndicator[];
+    /** Data series to plot */
+    series: RadarChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+    /** Radar shape: polygon or circle */
+    shape?: 'polygon' | 'circle';
+    /** Number of split rings */
+    splitNumber?: number;
+    className?: string;
+}
+/**
+ * RadarChart - ECharts Radar/Spider Chart for multi-dimensional data
+ */
+export declare function RadarChart({ indicators, series, height, showLegend, shape, splitNumber, className }: RadarChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * RadarChart - ECharts Radar/Spider Chart for multi-dimensional data
+ */
+export function RadarChart({ indicators, series, height = 300, showLegend = true, shape = 'polygon', splitNumber = 4, className }) {
+    const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            textStyle: {
+                color: '#344767',
+                fontSize: 12
+            }
+        },
+        legend: showLegend ? {
+            bottom: 0,
+            left: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                fontSize: 12,
+                color: '#6c757d'
+            }
+        } : undefined,
+        radar: {
+            shape: shape,
+            splitNumber: splitNumber,
+            center: ['50%', showLegend ? '45%' : '50%'],
+            radius: showLegend ? '60%' : '70%',
+            indicator: indicators.map(ind => ({
+                name: ind.name,
+                max: ind.max,
+                min: ind.min || 0
+            })),
+            axisName: {
+                color: '#6c757d',
+                fontSize: 11
+            },
+            splitArea: {
+                areaStyle: {
+                    color: ['rgba(240, 240, 240, 0.3)', 'rgba(255, 255, 255, 0.3)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#e9ecef'
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#e9ecef'
+                }
+            }
+        },
+        series: [
+            {
+                type: 'radar',
+                data: series.map((s, index) => {
+                    const color = s.color || colors[index % colors.length];
+                    return {
+                        name: s.name,
+                        value: s.values,
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        lineStyle: {
+                            width: 2,
+                            color: color
+                        },
+                        itemStyle: {
+                            color: color
+                        },
+                        areaStyle: {
+                            color: color,
+                            opacity: s.areaOpacity ?? 0.2
+                        }
+                    };
+                })
+            }
+        ]
+    };
+    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/Sankey.d.ts

@@ -0,0 +1,43 @@
+export interface SankeyNode {
+    /** Node name (must be unique) */
+    name: string;
+    /** Optional custom color */
+    color?: string;
+    /** Optional depth level (0 = leftmost) */
+    depth?: number;
+}
+export interface SankeyLink {
+    /** Source node name */
+    source: string;
+    /** Target node name */
+    target: string;
+    /** Flow value */
+    value: number;
+    /** Optional custom color */
+    color?: string;
+}
+export interface SankeyChartProps {
+    /** Nodes in the diagram */
+    nodes: SankeyNode[];
+    /** Links/flows between nodes */
+    links: SankeyLink[];
+    height?: number;
+    /** Orientation */
+    orient?: 'horizontal' | 'vertical';
+    /** Node width */
+    nodeWidth?: number;
+    /** Gap between nodes */
+    nodeGap?: number;
+    /** Show labels */
+    showLabels?: boolean;
+    /** Color palette for nodes */
+    colors?: string[];
+    /** Link opacity */
+    linkOpacity?: number;
+    className?: string;
+}
+/**
+ * SankeyChart - Flow/relationship visualization
+ * Great for: Material flow, process flow, cost flow, conversion funnels
+ */
+export declare function SankeyChart({ nodes, links, height, orient, nodeWidth, nodeGap, showLabels, colors, linkOpacity, className }: SankeyChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * SankeyChart - Flow/relationship visualization
+ * Great for: Material flow, process flow, cost flow, conversion funnels
+ */
+export function SankeyChart({ nodes, links, height = 300, orient = 'horizontal', nodeWidth = 20, nodeGap = 12, showLabels = true, colors = ['#6366f1', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'], linkOpacity = 0.45, className }) {
+    // Node value = total flow through it (incoming for non-source nodes, else outgoing).
+    const nodeValue = (name) => {
+        const incoming = links.filter(l => l.target === name).reduce((s, l) => s + l.value, 0);
+        if (incoming > 0)
+            return incoming;
+        return links.filter(l => l.source === name).reduce((s, l) => s + l.value, 0);
+    };
+    // Assign colors to nodes if not specified
+    const nodesWithColors = nodes.map((node, index) => ({
+        ...node,
+        value: nodeValue(node.name),
+        itemStyle: {
+            color: node.color || colors[index % colors.length]
+        }
+    }));
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            triggerOn: 'mousemove',
+            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) => {
+                if (params.dataType === 'edge') {
+                    return `<strong>${params.data.source}</strong> → <strong>${params.data.target}</strong><br/>Value: ${params.data.value?.toLocaleString()}`;
+                }
+                return `<strong>${params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+            }
+        },
+        series: [{
+                type: 'sankey',
+                orient: orient,
+                nodeWidth: nodeWidth,
+                nodeGap: nodeGap,
+                draggable: false,
+                left: 8,
+                right: 64,
+                top: 12,
+                bottom: 12,
+                nodeAlign: 'justify',
+                layoutIterations: 0,
+                emphasis: {
+                    focus: 'adjacency',
+                    lineStyle: {
+                        opacity: 0.7
+                    }
+                },
+                itemStyle: {
+                    borderWidth: 0,
+                    borderRadius: 3
+                },
+                lineStyle: {
+                    color: 'gradient',
+                    opacity: linkOpacity,
+                    curveness: 0.55
+                },
+                label: {
+                    show: showLabels,
+                    position: orient === 'horizontal' ? 'right' : 'bottom',
+                    color: '#344767',
+                    fontSize: 11,
+                    fontWeight: 500,
+                    formatter: (p) => `${p.name} (${p.value?.toLocaleString() ?? '-'})`
+                },
+                data: nodesWithColors,
+                links: links.map(link => ({
+                    ...link,
+                    lineStyle: link.color ? { color: link.color } : undefined
+                }))
+            }]
+    };
+    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/Scatter.d.ts

@@ -0,0 +1,38 @@
+export interface ScatterChartDataItem {
+    /** X value */
+    x: number;
+    /** Y value */
+    y: number;
+    /** Optional size value for bubble charts */
+    size?: number;
+    /** Optional label */
+    label?: string;
+}
+export interface ScatterChartSeries {
+    name: string;
+    data: ScatterChartDataItem[];
+    color?: string;
+    /** Symbol shape */
+    symbol?: 'circle' | 'rect' | 'triangle' | 'diamond' | 'pin' | 'arrow';
+    /** Fixed symbol size (ignored if data has size values) */
+    symbolSize?: number;
+}
+export interface ScatterChartProps {
+    series: ScatterChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    /** X-axis label */
+    xAxisName?: string;
+    /** Y-axis label */
+    yAxisName?: string;
+    /** Enable bubble mode (size based on data) */
+    bubbleMode?: boolean;
+    /** Size range for bubble mode [min, max] */
+    sizeRange?: [number, number];
+    className?: string;
+}
+/**
+ * ScatterChart - ECharts Scatter/Bubble Chart for correlation data
+ */
+export declare function ScatterChart({ series, height, showLegend, showGrid, xAxisName, yAxisName, bubbleMode, sizeRange, className }: ScatterChartProps): import("react").JSX.Element;