indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,143 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChart = GaugeChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const utils_1 = require("../../../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.
+ */
+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] = (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { 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/cjs/components/dashboard/charts/GeoMap.js

@@ -0,0 +1,164 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GeoMap = GeoMap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const echarts = __importStar(require("echarts/core"));
+const utils_1 = require("../../../lib/utils.js");
+const india_map_1 = require("./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
+ */
+function GeoMap({ markers = [], height = 400, markerColor = '#5470c6', markerSizeRange = [10, 35], showRipple = true, mapColor = '#e8f4f8', borderColor = '#b0c4de', showStateLabels = true, className }) {
+    const chartRef = (0, react_1.useRef)(null);
+    const [mapReady, setMapReady] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        // Register India map GeoJSON
+        try {
+            echarts.registerMap('India', india_map_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full flex items-center justify-center', className), style: { height }, children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { ref: chartRef, option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}

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

@@ -0,0 +1,116 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeatmapChart = HeatmapChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const utils_1 = require("../../../lib/utils.js");
+/**
+ * HeatmapChart - ECharts Heatmap for time/category based data visualization
+ */
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}

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

@@ -0,0 +1,75 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = LineChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const utils_1 = require("../../../lib/utils.js");
+const theme_1 = require("./theme.js");
+/**
+ * LineChart - ECharts Line Chart component (no area fill)
+ */
+function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, className }) {
+    const theme = (0, theme_1.getChartTheme)();
+    const axisConfig = (0, theme_1.getAxisConfig)();
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            ...(0, theme_1.getTooltipConfig)()
+        },
+        legend: showLegend ? (0, theme_1.getLegendConfig)('top') : undefined,
+        grid: (0, theme_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}

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

@@ -0,0 +1,110 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParetoChart = ParetoChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const utils_1 = require("../../../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)
+ */
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' } }) }));
+}