indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,121 @@
+'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 + 'cc') 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();
+    // Hex #rgb or #rrggbb
+    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 + ')';
+        }
+    }
+    // rgb()/rgba() — handle both comma and space syntax
+    const m = trimmed.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (m) {
+        return 'rgba(' + m[1] + ',' + m[2] + ',' + m[3] + ',' + alpha + ')';
+    }
+    // Fallback — let canvas try to parse it (named colors, etc.)
+    return trimmed;
+}
+/**
+ * AreaChart - ECharts Area Chart component
+ */
+export function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, className }) {
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderColor: '#e9ecef',
+            borderWidth: 1,
+            textStyle: {
+                color: '#344767',
+                fontSize: 12
+            }
+        },
+        legend: showLegend ? {
+            top: 0,
+            left: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                fontSize: 12,
+                color: '#6c757d'
+            }
+        } : undefined,
+        grid: {
+            top: showLegend ? 36 : 12,
+            right: 12,
+            bottom: 4,
+            left: 4,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: series.some(s => s.bar),
+            data: data.map(item => item[xKey]),
+            axisLine: { lineStyle: { color: '#dee2e6' } },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisTick: { show: false }
+        },
+        yAxis: series.some(s => s.secondaryAxis)
+            ? [
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: false } },
+            ]
+            : {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { color: '#6c757d', fontSize: 11 },
+                splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+            },
+        series: series.map((s, index) => {
+            const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
+            const color = s.color || colors[index % colors.length];
+            if (s.bar) {
+                return {
+                    name: s.name,
+                    type: 'bar',
+                    barMaxWidth: 36,
+                    yAxisIndex: s.secondaryAxis ? 1 : 0,
+                    itemStyle: { color: color, borderRadius: [4, 4, 0, 0] },
+                    data: data.map(item => item[s.key])
+                };
+            }
+            return {
+                name: s.name,
+                type: 'line',
+                smooth: smooth,
+                symbol: 'circle',
+                symbolSize: 6,
+                showSymbol: false,
+                yAxisIndex: s.secondaryAxis ? 1 : 0,
+                lineStyle: { width: 2, color: color },
+                ...(s.line ? {} : {
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1,
+                            colorStops: [
+                                { offset: 0, color: withAlpha(color, 0.8) },
+                                { offset: 1, color: withAlpha(color, 0.06) }
+                            ]
+                        }
+                    }
+                }),
+                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/Bar.d.ts

@@ -0,0 +1,27 @@
+export interface BarChartDataItem {
+    [key: string]: string | number;
+}
+export interface BarChartSeries {
+    key: string;
+    name: string;
+    color?: string;
+}
+export interface BarChartProps {
+    data: BarChartDataItem[];
+    xKey: string;
+    series: BarChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    horizontal?: boolean;
+    /**
+     * Bullet mode: with `horizontal`, supply a data key holding each row's target.
+     * Renders a KPI-vs-target bullet (track + actual fill + target marker + achievement %).
+     */
+    targetKey?: string;
+    className?: string;
+}
+/**
+ * BarChart - ECharts Bar Chart component
+ */
+export declare function BarChart({ data, xKey, series, height, showLegend, showGrid, horizontal, targetKey, className }: BarChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * BarChart - ECharts Bar Chart component
+ */
+export function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, className }) {
+    // Bullet mode: horizontal KPI-vs-target rows (CSS-rendered, not ECharts).
+    if (horizontal && targetKey) {
+        const actualKey = series[0]?.key;
+        const actualColor = series[0]?.color;
+        return (_jsx("div", { className: cn('w-full flex flex-col justify-center gap-3', className), style: height ? { minHeight: height } : undefined, children: data.map((item, idx) => {
+                const name = String(item[xKey]);
+                const actual = Number(item[actualKey]) || 0;
+                const target = Number(item[targetKey]) || 0;
+                const scaleMax = Math.max(actual, target) * 1.05 || 1;
+                const actualPct = Math.min((actual / scaleMax) * 100, 100);
+                const targetPct = Math.min((target / scaleMax) * 100, 100);
+                const achievement = target > 0 ? (actual / target) * 100 : 0;
+                const met = actual >= target;
+                const barColor = actualColor || (met ? '#10b981' : '#f59e0b');
+                const barGradient = actualColor
+                    ? actualColor
+                    : met
+                        ? 'linear-gradient(90deg, #34d399 0%, #10b981 100%)'
+                        : 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)';
+                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), _jsxs("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), _jsx("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1 h-4 rounded-full ring-2 ring-[rgb(var(--bg-surface))]", style: { left: `${targetPct}%`, backgroundColor: '#475569' }, title: `Target: ${target.toLocaleString()}` })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [_jsx("span", { children: actual.toLocaleString() }), _jsx("span", { children: `Target ${target.toLocaleString()}` })] })] }, `${name}-${idx}`));
+            }) }));
+    }
+    const categoryData = data.map(item => item[xKey]);
+    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
+            }
+        },
+        legend: showLegend ? {
+            top: 0,
+            left: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                fontSize: 12,
+                color: '#6c757d'
+            }
+        } : undefined,
+        grid: {
+            top: showLegend ? 36 : 12,
+            right: 12,
+            bottom: 4,
+            left: 4,
+            containLabel: true
+        },
+        xAxis: {
+            type: horizontal ? 'value' : 'category',
+            data: horizontal ? undefined : categoryData,
+            axisLine: { lineStyle: { color: '#dee2e6' } },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisTick: { show: false },
+            splitLine: horizontal && showGrid ? {
+                lineStyle: { color: '#f0f0f0', type: 'dashed' }
+            } : { show: false }
+        },
+        yAxis: {
+            type: horizontal ? 'category' : 'value',
+            data: horizontal ? categoryData : undefined,
+            axisLine: { show: false },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            splitLine: !horizontal && showGrid ? {
+                lineStyle: { color: '#f0f0f0', type: 'dashed' }
+            } : { show: false }
+        },
+        series: series.map((s, index) => {
+            const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
+            const color = s.color || colors[index % colors.length];
+            return {
+                name: s.name,
+                type: 'bar',
+                barMaxWidth: 40,
+                barGap: '10%',
+                itemStyle: {
+                    color: color,
+                    borderRadius: [4, 4, 0, 0]
+                },
+                emphasis: {
+                    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/BoxPlot.d.ts

@@ -0,0 +1,23 @@
+export interface BoxPlotChartDataItem {
+    /** Category name */
+    name: string;
+    /** Raw data values to calculate box plot from */
+    values: number[];
+}
+export interface BoxPlotChartProps {
+    data: BoxPlotChartDataItem[];
+    height?: number;
+    showLegend?: boolean;
+    /** Box color */
+    color?: string;
+    /** Orientation */
+    horizontal?: boolean;
+    /** Show outliers */
+    showOutliers?: boolean;
+    className?: string;
+}
+/**
+ * BoxPlotChart - Statistical box and whisker plot
+ * Shows min, Q1, median, Q3, max and outliers
+ */
+export declare function BoxPlotChart({ data, height, showLegend, color, horizontal, showOutliers, className }: BoxPlotChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * BoxPlotChart - Statistical box and whisker plot
+ * Shows min, Q1, median, Q3, max and outliers
+ */
+export function BoxPlotChart({ data, height = 300, showLegend = false, color = '#5470c6', horizontal = false, showOutliers = true, className }) {
+    // Calculate box plot statistics for each category
+    const calculateBoxPlot = (values) => {
+        const sorted = [...values].sort((a, b) => a - b);
+        const n = sorted.length;
+        const q1Index = Math.floor(n * 0.25);
+        const q2Index = Math.floor(n * 0.5);
+        const q3Index = Math.floor(n * 0.75);
+        const q1 = sorted[q1Index];
+        const median = sorted[q2Index];
+        const q3 = sorted[q3Index];
+        const iqr = q3 - q1;
+        const lowerFence = q1 - 1.5 * iqr;
+        const upperFence = q3 + 1.5 * iqr;
+        const min = sorted.find(v => v >= lowerFence) || sorted[0];
+        const max = [...sorted].reverse().find(v => v <= upperFence) || sorted[n - 1];
+        const outliers = sorted.filter(v => v < lowerFence || v > upperFence);
+        return { min, q1, median, q3, max, outliers };
+    };
+    const boxPlotData = data.map(d => calculateBoxPlot(d.values));
+    const categories = data.map(d => d.name);
+    // Format data for ECharts boxplot: [min, Q1, median, Q3, max]
+    const boxData = boxPlotData.map(bp => [bp.min, bp.q1, bp.median, bp.q3, bp.max]);
+    // Collect outliers with category index
+    const outlierData = showOutliers
+        ? boxPlotData.flatMap((bp, index) => bp.outliers.map(v => [index, v]))
+        : [];
+    const categoryAxis = {
+        type: 'category',
+        data: categories,
+        axisLine: { lineStyle: { color: '#dee2e6' } },
+        axisLabel: { color: '#6c757d', fontSize: 11 },
+        axisTick: { show: false }
+    };
+    const valueAxis = {
+        type: 'value',
+        axisLine: { show: false },
+        axisLabel: { color: '#6c757d', fontSize: 11 },
+        splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+    };
+    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 === 'boxplot') {
+                    const [min, q1, median, q3, max] = params.data;
+                    return `<strong>${categories[params.dataIndex]}</strong><br/>
+            Max: ${max}<br/>
+            Q3: ${q3}<br/>
+            Median: ${median}<br/>
+            Q1: ${q1}<br/>
+            Min: ${min}`;
+                }
+                return `Outlier: ${params.data[1]}`;
+            }
+        },
+        legend: showLegend ? {
+            top: 0,
+            textStyle: { fontSize: 12, color: '#6c757d' }
+        } : undefined,
+        grid: {
+            top: showLegend ? 36 : 12,
+            right: 16,
+            bottom: 4,
+            left: 8,
+            containLabel: true
+        },
+        xAxis: horizontal ? valueAxis : categoryAxis,
+        yAxis: horizontal ? categoryAxis : valueAxis,
+        series: [
+            {
+                name: 'Box Plot',
+                type: 'boxplot',
+                data: boxData,
+                itemStyle: {
+                    color: color,
+                    borderColor: color
+                },
+                emphasis: {
+                    itemStyle: {
+                        borderWidth: 2,
+                        shadowBlur: 5,
+                        shadowColor: 'rgba(0, 0, 0, 0.2)'
+                    }
+                }
+            },
+            ...(showOutliers && outlierData.length > 0 ? [{
+                    name: 'Outliers',
+                    type: 'scatter',
+                    data: outlierData,
+                    symbol: 'circle',
+                    symbolSize: 6,
+                    itemStyle: {
+                        color: '#ee6666'
+                    }
+                }] : [])
+        ]
+    };
+    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/Bubble.d.ts

@@ -0,0 +1,36 @@
+export interface BubbleChartDataItem {
+    /** X-axis value */
+    x: number;
+    /** Y-axis value */
+    y: number;
+    /** Bubble size value */
+    size: number;
+    /** Optional label */
+    label?: string;
+}
+export interface BubbleChartSeries {
+    name: string;
+    data: BubbleChartDataItem[];
+    color?: string;
+}
+export interface BubbleChartProps {
+    series: BubbleChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+    /** X-axis label */
+    xAxisName?: string;
+    /** Y-axis label */
+    yAxisName?: string;
+    /** Size axis label (for tooltip) */
+    sizeAxisName?: string;
+    /** Size range [min, max] in pixels */
+    sizeRange?: [number, number];
+    /** Bubble opacity (0-1) */
+    opacity?: number;
+    className?: string;
+}
+/**
+ * BubbleChart - Three-dimensional scatter plot with size encoding
+ * Shows relationship between X, Y, and Size dimensions
+ */
+export declare function BubbleChart({ series, height, showLegend, xAxisName, yAxisName, sizeAxisName, sizeRange, opacity, className }: BubbleChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * BubbleChart - Three-dimensional scatter plot with size encoding
+ * Shows relationship between X, Y, and Size dimensions
+ */
+export function BubbleChart({ series, height = 300, showLegend = true, xAxisName, yAxisName, sizeAxisName = 'Size', sizeRange = [10, 60], opacity = 0.7, className }) {
+    const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
+    // Calculate global min/max for size scaling
+    const allSizes = series.flatMap(s => s.data.map(d => d.size));
+    const minSize = Math.min(...allSizes);
+    const maxSize = Math.max(...allSizes);
+    const sizeScale = (size) => {
+        if (maxSize === minSize)
+            return (sizeRange[0] + sizeRange[1]) / 2;
+        const normalized = (size - minSize) / (maxSize - minSize);
+        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 d = params.data;
+                let tip = `<strong>${params.seriesName}</strong><br/>`;
+                if (d.label)
+                    tip += `${d.label}<br/>`;
+                tip += `${xAxisName || 'X'}: ${d.value[0]}<br/>`;
+                tip += `${yAxisName || 'Y'}: ${d.value[1]}<br/>`;
+                tip += `${sizeAxisName}: ${d.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: 30,
+            nameTextStyle: { color: '#6c757d', fontSize: 11 },
+            axisLine: { lineStyle: { color: '#dee2e6' } },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+        },
+        yAxis: {
+            type: 'value',
+            name: yAxisName,
+            nameLocation: 'center',
+            nameGap: 40,
+            nameTextStyle: { color: '#6c757d', fontSize: 11 },
+            axisLine: { show: false },
+            axisLabel: { color: '#6c757d', fontSize: 11 },
+            splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+        },
+        series: series.map((s, index) => ({
+            name: s.name,
+            type: 'scatter',
+            symbolSize: (data) => sizeScale(data[2]),
+            itemStyle: {
+                color: s.color || colors[index % colors.length],
+                opacity: opacity
+            },
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.3)',
+                    opacity: 1
+                }
+            },
+            data: s.data.map(d => ({
+                value: [d.x, d.y, d.size],
+                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/DashboardCard.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartCardProps {
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+    headerAction?: React.ReactNode;
+}
+/**
+ * ChartCard - Container for chart components with title and description
+ */
+export declare function ChartCard({ title, description, children, className, headerAction }: ChartCardProps): React.JSX.Element;

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+/**
+ * ChartCard - Container for chart components with title and description
+ */
+export function ChartCard({ title, description, children, className, headerAction }) {
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl shadow-sm border border-[rgb(var(--bd-default))]', 'p-4 md:p-5', className), children: [(title || description || headerAction) && (_jsxs("div", { className: "flex items-start justify-between mb-4", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title })), description && (_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-0.5", children: description }))] }), headerAction && (_jsx("div", { className: "flex-shrink-0", children: headerAction }))] })), _jsx("div", { className: "w-full", children: children })] }));
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface DonutChartDataItem {
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface DonutChartProps {
+    data: DonutChartDataItem[];
+    height?: number;
+    showLegend?: boolean;
+    centerLabel?: string;
+    centerValue?: string;
+    innerRadius?: string;
+    outerRadius?: string;
+    className?: string;
+    onSegmentClick?: (item: DonutChartDataItem) => void;
+}
+/**
+ * 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 declare function DonutChart({ data, height, showLegend, centerLabel, centerValue, innerRadius, outerRadius, className, onSegmentClick }: DonutChartProps): React.JSX.Element;