indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/dashboard/Tooltip.js

@@ -0,0 +1,86 @@
+'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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardTooltip = DashboardTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+const utils_1 = require("../../lib/utils.js");
+/**
+ * DashboardTooltip - Hover tooltip for dashboard elements
+ *
+ * Usage:
+ * <DashboardTooltip content="This is a tooltip">
+ *   <button>Hover me</button>
+ * </DashboardTooltip>
+ */
+function DashboardTooltip({ content, position = 'top', delay = 200, children, className, disabled = false }) {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    const showTooltip = () => {
+        if (disabled)
+            return;
+        timeoutRef.current = setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+    };
+    const hideTooltip = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setIsVisible(false);
+    };
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const positionClasses = {
+        top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+        bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+        left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+        right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+    };
+    const arrowClasses = {
+        top: 'top-full left-1/2 -translate-x-1/2 border-t-[rgb(var(--fg-default))] border-x-transparent border-b-transparent',
+        bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-[rgb(var(--fg-default))] border-x-transparent border-t-transparent',
+        left: 'left-full top-1/2 -translate-y-1/2 border-l-[rgb(var(--fg-default))] border-y-transparent border-r-transparent',
+        right: 'right-full top-1/2 -translate-y-1/2 border-r-[rgb(var(--fg-default))] border-y-transparent border-l-transparent'
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: [children, (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isVisible && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: { duration: 0.15 }, className: (0, utils_1.cn)('absolute z-50 px-2.5 py-1.5', 'bg-[rgb(var(--fg-default))] text-[rgb(var(--bg-surface))] text-xs font-medium', 'rounded-md shadow-lg whitespace-nowrap', positionClasses[position], className), role: "tooltip", children: [content, (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('absolute w-0 h-0 border-4', arrowClasses[position]) })] })) })] }));
+}

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

@@ -0,0 +1,127 @@
+'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.AreaChart = AreaChart;
+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");
+// 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
+ */
+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 ((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/Bar.js

@@ -0,0 +1,111 @@
+'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.BarChart = BarChart;
+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");
+/**
+ * BarChart - ECharts Bar Chart component
+ */
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), (0, jsx_runtime_1.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()}` })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [(0, jsx_runtime_1.jsx)("span", { children: actual.toLocaleString() }), (0, jsx_runtime_1.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 ((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/BoxPlot.js

@@ -0,0 +1,118 @@
+'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.BoxPlotChart = BoxPlotChart;
+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");
+/**
+ * BoxPlotChart - Statistical box and whisker plot
+ * Shows min, Q1, median, Q3, max and outliers
+ */
+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 ((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/Bubble.js

@@ -0,0 +1,102 @@
+'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.BubbleChart = BubbleChart;
+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");
+/**
+ * BubbleChart - Three-dimensional scatter plot with size encoding
+ * Shows relationship between X, Y, and Size dimensions
+ */
+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 ((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/DashboardCard.js

@@ -0,0 +1,12 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartCard = ChartCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils.js");
+/**
+ * ChartCard - Container for chart components with title and description
+ */
+function ChartCard({ title, description, children, className, headerAction }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-0.5", children: description }))] }), headerAction && ((0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0", children: headerAction }))] })), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: children })] }));
+}