@jotx-labs/editor 2.4.193 → 2.4.204

package/dist/components/ChartNodeView.js

@@ -1,247 +1,548 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartNodeView = ChartNodeView;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const react_2 = require("@tiptap/react");
-const chart_js_1 = require("chart.js");
+const bar_1 = require("@nivo/bar");
+const line_1 = require("@nivo/line");
+const pie_1 = require("@nivo/pie");
+const radar_1 = require("@nivo/radar");
+const heatmap_1 = require("@nivo/heatmap");
+const treemap_1 = require("@nivo/treemap");
+const scatterplot_1 = require("@nivo/scatterplot");
+const sankey_1 = require("@nivo/sankey");
 const lucide_react_1 = require("lucide-react");
 require("../styles/ChartNodeView.css");
-chart_js_1.Chart.register(...chart_js_1.registerables);
+// ─── Portal tooltip: bypasses all overflow:hidden ancestors ────────
+// The webview's html > body > #root all have overflow:hidden, clipping
+// Nivo's absolutely-positioned tooltip. This system:
+// 1. Tracks mouse position via a module-level ref (no re-renders)
+// 2. Renders tooltip via createPortal at document.body level
+const mouseRef = { x: 0, y: 0 };
+if (typeof window !== 'undefined') {
+    window.addEventListener('mousemove', (e) => {
+        mouseRef.x = e.clientX;
+        mouseRef.y = e.clientY;
+    }, { passive: true });
+}
+function PortalTooltip({ children, bg, color, border }) {
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: {
+            position: 'fixed',
+            top: mouseRef.y + 14,
+            left: mouseRef.x + 14,
+            pointerEvents: 'none',
+            zIndex: 99999,
+            background: bg,
+            color: color,
+            fontSize: 12,
+            borderRadius: 6,
+            padding: '8px 12px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+            border: `1px solid ${border}`,
+            maxWidth: 300,
+            whiteSpace: 'nowrap',
+        }, children: children }), document.body);
+}
+// Helper to get CSS variable with robust fallback
 function getCssVar(name, fallback) {
+    if (typeof window === 'undefined')
+        return fallback;
     try {
-        const cs = getComputedStyle(document.documentElement);
-        return (cs.getPropertyValue(name)?.trim() || fallback).toString();
+        // Check both body and documentElement
+        const bodyVal = getComputedStyle(document.body).getPropertyValue(name).trim();
+        if (bodyVal)
+            return bodyVal;
+        const docVal = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+        if (docVal)
+            return docVal;
+        return fallback;
     }
     catch {
         return fallback;
     }
 }
-function hexToRgba(hex, alpha) {
-    const h = (hex || '').trim().replace('#', '');
-    if (h.length !== 6)
-        return `rgba(99, 102, 241, ${alpha})`;
-    const r = parseInt(h.slice(0, 2), 16);
-    const g = parseInt(h.slice(2, 4), 16);
-    const b = parseInt(h.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+// Custom Teal-oriented palette
+const TEAL_PALETTE = [
+    '#2dd4bf', // Teal 400
+    '#0d9488', // Teal 600
+    '#99f6e4', // Teal 200
+    '#115e59', // Teal 800
+    '#5eead4', // Teal 300
+    '#134e4a', // Teal 900
+    '#ccfbf1', // Teal 100
+];
+// ------ Data Transformation Adapters ------
+// 1. Chart.js -> Nivo Bar
+// ChartJS: { labels: ['A', 'B'], datasets: [{label: 'S1', data: [10, 20]}, {label: 'S2', data: [5, 15]}] }
+// Nivo Bar: [ { id: 'A', S1: 10, S2: 5 }, { id: 'B', S1: 20, S2: 15 } ]
+function transformToBar(data) {
+    const labels = data?.labels || [];
+    const datasets = data?.datasets || [];
+    if (!labels.length)
+        return { data: [], keys: [] };
+    const result = [];
+    const keys = [];
+    // Collect keys
+    datasets.forEach((ds) => {
+        if (ds.label)
+            keys.push(ds.label);
+    });
+    // Build data points
+    labels.forEach((label, i) => {
+        const item = { id: label };
+        datasets.forEach((ds) => {
+            if (ds.label)
+                item[ds.label] = ds.data[i] || 0;
+        });
+        result.push(item);
+    });
+    return { data: result, keys };
 }
-function computeSuggestedMax(data) {
-    try {
-        const ds = Array.isArray(data?.datasets) ? data.datasets : [];
-        const vals = [];
-        for (const d of ds) {
-            const arr = Array.isArray(d?.data) ? d.data : [];
-            for (const v of arr) {
-                const n = typeof v === 'number' ? v : parseFloat(String(v));
-                if (Number.isFinite(n))
-                    vals.push(n);
-            }
-        }
-        if (vals.length === 0)
-            return undefined;
-        const max = Math.max(...vals);
-        if (!Number.isFinite(max))
-            return undefined;
-        const step = max <= 10 ? 2 : 10;
-        return Math.ceil(max / step) * step;
-    }
-    catch {
-        return undefined;
-    }
+// 2. Chart.js -> Nivo Line
+// Nivo Line: [ { id: 'S1', data: [{x: 'A', y: 10}, {x: 'B', y: 20}] } ]
+function transformToLine(data) {
+    const labels = data?.labels || [];
+    const datasets = data?.datasets || [];
+    const result = [];
+    datasets.forEach((ds) => {
+        const points = labels.map((label, i) => ({
+            x: label,
+            y: ds.data[i] || 0
+        }));
+        result.push({
+            id: ds.label || 'Series',
+            data: points
+        });
+    });
+    return result;
 }
-function applyDefaultStyles(chartType, data) {
-    const primary = getCssVar('--jotx-primary', '#4f46e5');
-    const text = getCssVar('--jotx-text', '#e5e7eb');
-    const text2 = getCssVar('--jotx-textSecondary', '#cbd5e1');
-    const border = getCssVar('--jotx-border', '#334155');
-    const bg = getCssVar('--jotx-background', '#0b1220');
-    const datasets = Array.isArray(data?.datasets) ? data.datasets : [];
-    const labels = Array.isArray(data?.labels) ? data.labels : [];
-    const defaultPiePalette = (count) => {
-        // A readable palette in both dark/light themes.
-        const base = [
-            '#60a5fa', // blue
-            '#34d399', // green
-            '#fbbf24', // amber
-            '#f87171', // red
-            '#a78bfa', // purple
-            '#22d3ee', // cyan
-            '#fb7185', // pink
-            '#4ade80' // lime
-        ];
-        const out = [];
-        for (let i = 0; i < Math.max(1, count); i++) {
-            out.push(base[i % base.length]);
-        }
-        return out;
-    };
-    // Gentle defaults for readability; only fill missing values.
-    for (const ds of datasets) {
-        if (chartType === 'radar') {
-            ds.borderColor = ds.borderColor ?? primary;
-            ds.backgroundColor = ds.backgroundColor ?? hexToRgba(primary, 0.18);
-            ds.pointBackgroundColor = ds.pointBackgroundColor ?? primary;
-            ds.pointBorderColor = ds.pointBorderColor ?? bg;
-            ds.pointHoverBackgroundColor = ds.pointHoverBackgroundColor ?? primary;
-            ds.pointHoverBorderColor = ds.pointHoverBorderColor ?? bg;
-            ds.borderWidth = ds.borderWidth ?? 2;
-            ds.pointRadius = ds.pointRadius ?? 3;
-            ds.pointHoverRadius = ds.pointHoverRadius ?? 5;
-        }
-        else if (chartType === 'pie') {
-            // Remove slice borders (and legend swatch borders) for a clean fill look.
-            ds.borderWidth = 0;
-            ds.borderColor = 'transparent';
-            // If caller didn't provide slice colors, apply a default palette.
-            // (Without this, Chart.js defaults can look black in our themed webview.)
-            const hasBg = Array.isArray(ds.backgroundColor) ? ds.backgroundColor.length > 0 : typeof ds.backgroundColor === 'string' ? !!ds.backgroundColor : false;
-            if (!hasBg) {
-                const n = labels.length || (Array.isArray(ds.data) ? ds.data.length : 0) || 1;
-                ds.backgroundColor = defaultPiePalette(n);
-                ds.hoverBackgroundColor = ds.hoverBackgroundColor ?? ds.backgroundColor;
-            }
-        }
-        else if (chartType === 'bar') {
-            ds.backgroundColor = ds.backgroundColor ?? hexToRgba(primary, 0.28);
-            ds.borderColor = ds.borderColor ?? hexToRgba(primary, 0.75);
-            ds.borderWidth = ds.borderWidth ?? 1;
-        }
+// 3. Chart.js -> Nivo Pie
+// Nivo Pie: [ { id: 'A', label: 'A', value: 10 }, { id: 'B', label: 'B', value: 20 } ]
+// We only support the FIRST dataset for Pie charts (standard practice)
+function transformToPie(data) {
+    const labels = data?.labels || [];
+    const ds = data?.datasets?.[0];
+    if (!ds)
+        return [];
+    return labels.map((label, i) => ({
+        id: label,
+        label,
+        value: ds.data[i] || 0
+    }));
+}
+// 4. Chart.js -> Nivo Radar
+// Nivo Radar expects same format as Bar basically (indexBy keys)
+// [ { id: 'Metric A', Series1: 100, Series2: 50 } ]
+function transformToRadar(data) {
+    const labels = data?.labels || [];
+    const datasets = data?.datasets || [];
+    const result = [];
+    const keys = [];
+    datasets.forEach((ds) => {
+        if (ds.label)
+            keys.push(ds.label);
+    });
+    labels.forEach((label, i) => {
+        const item = { id: label };
+        datasets.forEach((ds) => {
+            if (ds.label)
+                item[ds.label] = ds.data[i] || 0;
+        });
+        result.push(item);
+    });
+    return { data: result, keys };
+}
+// 5. Chart.js -> Nivo Heatmap
+// { labels: ['Mon', 'Tue'], datasets: [{ label: 'Morning', data: [10, 20] }, { label: 'Evening', data: [30, 50] }] }
+// -> [ { id: 'Morning', data: [{x: 'Mon', y: 10}, {x: 'Tue', y: 20}] }, ... ]
+function transformToHeatmap(data) {
+    const labels = data?.labels || [];
+    const datasets = data?.datasets || [];
+    return datasets.map((ds) => ({
+        id: ds.label,
+        data: labels.map((label, i) => ({
+            x: label,
+            y: ds.data[i] || 0
+        }))
+    }));
+}
+// 6. Chart.js -> Nivo Treemap
+// Takes standard "datasets" and makes a simple hierarchy.
+// { labels: ['A', 'B'], datasets: [{ label: 'Size', data: [100, 200] }] }
+// -> { name: 'root', children: [ { name: 'A', loc: 100 }, { name: 'B', loc: 200 } ] }
+function transformToTreemap(data) {
+    const labels = data?.labels || [];
+    const ds = data?.datasets?.[0];
+    if (!ds)
+        return { name: 'root', children: [] };
+    const children = labels.map((label, i) => ({
+        name: label,
+        loc: ds.data[i] || 0
+    }));
+    return { name: 'root', children };
+}
+// 7. Chart.js -> Nivo ScatterPlot
+// { datasets: [{ label: 'Group A', data: [{x: 10, y: 14}, {x: 20, y: 30}] }] }
+// -> [ { id: 'Group A', data: [{x: 10, y: 14}, ...] } ]
+function transformToScatter(data) {
+    const datasets = data?.datasets || [];
+    return datasets.map((ds) => ({
+        id: ds.label,
+        data: ds.data?.map((pt) => ({
+            x: pt.x || 0,
+            y: pt.y || 0
+        })) || []
+    }));
+}
+// 8. Custom JSON -> Nivo Sankey
+// Sankey doesn't map well to Chart.js structure. We expect direct Nivo structure key 'sankey'.
+// Or we try to adapt: 
+// { labels: ['A', 'B', 'C'], datasets: [{ data: [ { source: 'A', target: 'B', value: 10 } ] }] }
+function transformToSankey(data) {
+    // If user provides native Sankey structure in a generic way
+    if (data.nodes && data.links)
+        return data;
+    // Otherwise try to adapt from datasets if possible
+    const ds = data?.datasets?.[0];
+    if (ds && Array.isArray(ds.data)) {
+        // Collect all unique nodes from links
+        const links = ds.data;
+        const nodeIds = new Set();
+        links.forEach((l) => {
+            nodeIds.add(l.source);
+            nodeIds.add(l.target);
+        });
+        // Check if we have explicit nodes, else exact simple ones
+        const nodes = Array.from(nodeIds).map(id => ({ id }));
+        return { nodes, links };
     }
-    return {
-        colors: { primary, text, text2, border, bg },
-        data: { ...data, datasets }
-    };
+    return { nodes: [], links: [] };
 }
 function defaultChartJson(type) {
     if (type === 'pie') {
         return JSON.stringify({
-            labels: ['A', 'B', 'C'],
-            datasets: [{ label: 'Share', data: [30, 45, 25] }]
+            labels: ['Task A', 'Task B', 'Task C'],
+            datasets: [{ label: 'Hours', data: [30, 45, 25] }]
         }, null, 2);
     }
     if (type === 'radar') {
         return JSON.stringify({
-            labels: ['Speed', 'Quality', 'Cost', 'DX', 'Reliability'],
-            datasets: [{ label: 'Score', data: [70, 80, 60, 85, 75] }]
+            labels: ['Speed', 'Reliability', 'Cost', 'UX', 'Security'],
+            datasets: [{ label: 'Product A', data: [90, 80, 60, 85, 70] }]
+        }, null, 2);
+    }
+    if (type === 'heatmap') {
+        return JSON.stringify({
+            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+            datasets: [
+                { label: 'Morning', data: [10, 20, 15, 25, 30] },
+                { label: 'Afternoon', data: [35, 40, 30, 20, 45] },
+                { label: 'Evening', data: [15, 25, 40, 50, 60] }
+            ]
+        }, null, 2);
+    }
+    if (type === 'treemap') {
+        return JSON.stringify({
+            labels: ['React', 'Vue', 'Angular', 'Svelte', 'Solid'],
+            datasets: [{ label: 'Usage', data: [55, 30, 25, 15, 10] }]
+        }, null, 2);
+    }
+    if (type === 'scatterplot') {
+        return JSON.stringify({
+            datasets: [
+                {
+                    label: 'Group A',
+                    data: [{ x: 10, y: 14 }, { x: 20, y: 30 }, { x: 30, y: 45 }, { x: 40, y: 60 }]
+                },
+                {
+                    label: 'Group B',
+                    data: [{ x: 15, y: 24 }, { x: 25, y: 35 }, { x: 35, y: 20 }, { x: 45, y: 50 }]
+                }
+            ]
+        }, null, 2);
+    }
+    if (type === 'sankey') {
+        return JSON.stringify({
+            datasets: [{
+                    data: [
+                        { source: 'A', target: 'B', value: 50 },
+                        { source: 'A', target: 'C', value: 30 },
+                        { source: 'B', target: 'D', value: 40 },
+                        { source: 'C', target: 'D', value: 20 }
+                    ]
+                }]
         }, null, 2);
     }
-    // bar default
+    // bar/line default
     return JSON.stringify({
-        labels: ['Jan', 'Feb', 'Mar', 'Apr'],
-        datasets: [{ label: 'Events', data: [12, 19, 8, 15] }]
+        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+        datasets: [{ label: 'Revenue', data: [1200, 1900, 800, 1500] }]
     }, null, 2);
 }
+// --- Component ---
 function ChartNodeView({ node, updateAttributes, selected }) {
-    const canvasRef = (0, react_1.useRef)(null);
-    const chartRef = (0, react_1.useRef)(null);
-    // Determine if source should be shown. Default to attribute, but if it's a new empty/default node, show it.
-    // Read directly from node.attrs to make it reactive
     const showSource = node.attrs.showSource || false;
-    (0, react_1.useEffect)(() => {
-        const currentJson = (node.attrs.json || '').toString();
-        const isNew = !currentJson || currentJson === defaultChartJson((node.attrs.chartType || 'bar').toString());
-        if (isNew && !showSource) {
-            updateAttributes({ showSource: true });
-        }
-    }, []);
-    const setShowSource = (val) => {
-        const current = node.attrs.showSource || false;
-        const next = typeof val === 'function' ? val(current) : val;
-        updateAttributes({ showSource: next });
-    };
-    const [error, setError] = (0, react_1.useState)(null);
     const chartType = (node.attrs.chartType || 'bar').toString();
     const json = (node.attrs.json || '').toString() || defaultChartJson(chartType);
-    const id = (0, react_1.useMemo)(() => `chart_${Math.random().toString(36).slice(2)}`, []);
+    const [error, setError] = (0, react_1.useState)(null);
+    // Tooltip style state for portal tooltips
+    const [tooltipStyle, setTooltipStyle] = (0, react_1.useState)({ bg: '#252526', color: '#ffffff', border: '#444444' });
+    // Track dark mode for Sankey link colors
+    const [isDark, setIsDark] = (0, react_1.useState)(true);
+    // Theme state
+    const [theme, setTheme] = (0, react_1.useState)({
+        axis: {
+            ticks: { text: { fill: '#888' } },
+            legend: { text: { fill: '#888' } }
+        },
+        labels: { text: { fill: '#888' } },
+        legends: { text: { fill: '#888' } }
+    });
+    // Robust theme extraction
+    const updateTheme = () => {
+        // Try to detect if we are in dark mode to choose a good default
+        const isDarkMode = document.body.classList.contains('vscode-dark') ||
+            document.body.getAttribute('data-vscode-theme-kind') === 'vscode-dark';
+        setIsDark(isDarkMode);
+        // Core colors
+        const textPrimary = getCssVar('--jotx-text', isDarkMode ? '#e0e0e0' : '#333333');
+        const textSecondary = getCssVar('--vscode-descriptionForeground', isDarkMode ? '#aaaaaa' : '#666666');
+        const gridColor = getCssVar('--jotx-border', isDarkMode ? '#444444' : '#e0e0e0');
+        const tooltipBg = getCssVar('--jotx-background', isDarkMode ? '#252526' : '#ffffff');
+        const tooltipColor = getCssVar('--jotx-text', isDarkMode ? '#ffffff' : '#000000');
+        // Store tooltip style for portal tooltips
+        setTooltipStyle({ bg: tooltipBg, color: tooltipColor, border: gridColor });
+        setTheme({
+            background: 'transparent',
+            textColor: textPrimary,
+            axis: {
+                domain: {
+                    line: {
+                        stroke: gridColor,
+                        strokeWidth: 1
+                    }
+                },
+                ticks: {
+                    line: {
+                        stroke: gridColor,
+                        strokeWidth: 1
+                    },
+                    text: {
+                        fill: textSecondary, // Use slightly muted color for axis ticks
+                        fontSize: 11
+                    }
+                },
+                legend: {
+                    text: {
+                        fill: textPrimary, // Use primary color for titles
+                        fontSize: 12,
+                        fontWeight: 600
+                    }
+                }
+            },
+            grid: {
+                line: {
+                    stroke: gridColor,
+                    strokeWidth: 1,
+                    strokeDasharray: '4 4'
+                }
+            },
+            labels: {
+                text: {
+                    fill: textPrimary,
+                    fontSize: 12,
+                    fontWeight: 600
+                }
+            },
+            tooltip: {
+                container: {
+                    background: tooltipBg,
+                    color: tooltipColor,
+                    fontSize: 12,
+                    borderRadius: 4,
+                    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.25)',
+                    border: `1px solid ${gridColor}`,
+                    zIndex: 1000 // Ensure tooltip is above everything
+                }
+            },
+            legends: {
+                text: {
+                    fill: textSecondary,
+                    fontSize: 12
+                }
+            }
+        });
+    };
+    // Initial and dynamic theme update
     (0, react_1.useEffect)(() => {
-        // hydrate default json once if empty
-        if (!node.attrs.json) {
-            updateAttributes({ json });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        updateTheme();
+        // Observe body for class changes (theme switching in VS Code)
+        const observer = new MutationObserver((mutations) => {
+            updateTheme();
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class', 'data-vscode-theme-kind']
+        });
+        return () => observer.disconnect();
     }, []);
-    (0, react_1.useEffect)(() => {
-        const el = canvasRef.current;
-        if (!el)
-            return;
-        const ctx = el.getContext('2d');
-        if (!ctx)
-            return;
+    // Parse JSON
+    const chartData = (0, react_1.useMemo)(() => {
         try {
-            const parsedRaw = JSON.parse(json);
-            const themed = applyDefaultStyles(chartType, parsedRaw);
-            const parsed = themed.data;
-            const { text, text2, border } = themed.colors;
-            const suggestedMax = chartType === 'radar' ? computeSuggestedMax(parsed) : undefined;
+            const parsed = JSON.parse(json);
             setError(null);
-            chartRef.current?.destroy();
-            chartRef.current = new chart_js_1.Chart(ctx, {
-                type: chartType,
-                data: parsed,
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    animation: { duration: 180 },
-                    layout: { padding: chartType === 'radar' ? 16 : 10 },
-                    plugins: {
-                        legend: {
-                            display: true,
-                            labels: {
-                                color: text2,
-                                boxWidth: 14,
-                                boxHeight: 8,
-                                // Pie legend should be solid color swatches (no borders). Point-style looks odd here.
-                                usePointStyle: chartType === 'pie' ? false : true
-                            }
-                        }
-                    },
-                    ...(chartType === 'radar'
-                        ? {
-                            scales: {
-                                r: {
-                                    beginAtZero: true,
-                                    suggestedMax,
-                                    grid: {
-                                        color: hexToRgba(border, 0.45),
-                                        circular: true
-                                    },
-                                    angleLines: {
-                                        color: hexToRgba(border, 0.55)
-                                    },
-                                    pointLabels: {
-                                        color: text,
-                                        font: { size: 12, weight: '600' },
-                                        padding: 6
-                                    },
-                                    ticks: {
-                                        display: false
-                                    }
-                                }
-                            },
-                            elements: {
-                                line: { tension: 0.25 }
-                            }
-                        }
-                        : {})
-                }
-            });
+            return parsed;
         }
         catch (e) {
-            chartRef.current?.destroy();
-            chartRef.current = null;
-            setError(e?.message || 'Invalid chart JSON');
+            setError(e.message);
+            return null;
         }
-        return () => {
-            // keep chart alive between renders; only destroy on unmount
-        };
-    }, [chartType, json, id]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            chartRef.current?.destroy();
-            chartRef.current = null;
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(react_2.NodeViewWrapper, { className: "jotx-chart", "data-type": "chart", "data-chart-type": chartType, "data-selected": selected ? 'true' : 'false', children: [(0, jsx_runtime_1.jsxs)("div", { className: "jotx-chart-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-title", children: "Chart" }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "jotx-block-title-input", placeholder: "Title (shown in graph)...", value: (node.attrs.title || '').toString(), onChange: (e) => updateAttributes({ title: e.target.value }) }), (0, jsx_runtime_1.jsxs)("div", { className: "jotx-chart-type", children: [(0, jsx_runtime_1.jsx)("button", { className: `jotx-chart-type-btn ${chartType === 'bar' ? 'active' : ''}`, onMouseDown: (e) => e.preventDefault(), onClick: () => updateAttributes({ chartType: 'bar', json: node.attrs.json || defaultChartJson('bar') }), title: "Bar", children: (0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { className: `jotx-chart-type-btn ${chartType === 'pie' ? 'active' : ''}`, onMouseDown: (e) => e.preventDefault(), onClick: () => updateAttributes({ chartType: 'pie', json: node.attrs.json || defaultChartJson('pie') }), title: "Pie", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PieChart, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { className: `jotx-chart-type-btn ${chartType === 'radar' ? 'active' : ''}`, onMouseDown: (e) => e.preventDefault(), onClick: () => updateAttributes({ chartType: 'radar', json: node.attrs.json || defaultChartJson('radar') }), title: "Radar", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Radar, { size: 16 }) })] }), (0, jsx_runtime_1.jsx)("button", { className: "jotx-chart-settings", onMouseDown: (e) => e.preventDefault(), onClick: () => setShowSource((s) => !s), title: (node.attrs.showSource || false) ? "Hide Source" : "Show Source", children: (node.attrs.showSource || false) ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 16 }) })] }), error ? (0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-error", children: error }) : null, (0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-canvasWrap", children: (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef }) }), (node.attrs.showSource || false) ? ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-chart-editor", children: [(0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-editorHint", children: "Edit JSON (labels + datasets)" }), (0, jsx_runtime_1.jsx)("textarea", { value: json, onChange: (e) => updateAttributes({ json: e.target.value }), spellCheck: false })] })) : null] }));
+    }, [json]);
+    // Render correct chart type (Memoized to prevent flickering/lag on hover)
+    // Note: Nivo charts are heavy/complex, avoiding re-renders helps responsiveness.
+    const chartComponent = (0, react_1.useMemo)(() => {
+        if (!chartData)
+            return null;
+        switch (chartType) {
+            case 'bar':
+                const barData = transformToBar(chartData);
+                return ((0, jsx_runtime_1.jsx)(bar_1.ResponsiveBar, { data: barData.data, keys: barData.keys, indexBy: "id", margin: { top: 20, right: 20, bottom: 50, left: 60 }, padding: 0.3, valueScale: { type: 'linear' }, colors: TEAL_PALETTE, theme: theme, animate: true, labelSkipWidth: 12, labelSkipHeight: 12, labelTextColor: { from: 'color', modifiers: [['darker', 2]] }, tooltip: ({ id, value, color }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [(0, jsx_runtime_1.jsx)("span", { style: { color }, children: "\u25CF" }), " ", id, ": ", (0, jsx_runtime_1.jsx)("strong", { children: value })] })), axisBottom: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: 'Category',
+                        legendPosition: 'middle',
+                        legendOffset: 36
+                    }, axisLeft: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: 'Value',
+                        legendPosition: 'middle',
+                        legendOffset: -45
+                    } }));
+            case 'line':
+                const lineData = transformToLine(chartData);
+                return ((0, jsx_runtime_1.jsx)(line_1.ResponsiveLine, { data: lineData, margin: { top: 20, right: 30, bottom: 50, left: 60 }, xScale: { type: 'point' }, yScale: { type: 'linear', min: 'auto', max: 'auto', stacked: false, reverse: false }, axisTop: null, axisRight: null, axisBottom: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: 'Time',
+                        legendOffset: 36,
+                        legendPosition: 'middle'
+                    }, axisLeft: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: 'Value',
+                        legendOffset: -45,
+                        legendPosition: 'middle'
+                    }, pointSize: 10, pointColor: { theme: 'background' }, pointBorderWidth: 2, pointBorderColor: { from: 'serieColor' }, pointLabelYOffset: -12, useMesh: true, theme: theme, colors: TEAL_PALETTE, tooltip: ({ point }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: point.serieColor }, children: "\u25CF" }), " ", point.serieId, ": ", (0, jsx_runtime_1.jsx)("strong", { children: point.data.yFormatted })] })) }));
+            case 'pie':
+            case 'doughnut': // Adapt doughnut as Pie with innerRadius
+                const pieData = transformToPie(chartData);
+                return ((0, jsx_runtime_1.jsx)(pie_1.ResponsivePie, { data: pieData, margin: { top: 40, right: 80, bottom: 80, left: 80 }, innerRadius: chartType === 'doughnut' ? 0.5 : 0, padAngle: 0.7, cornerRadius: 3, activeOuterRadiusOffset: 8, borderWidth: 1, borderColor: { from: 'color', modifiers: [['darker', 0.2]] }, arcLinkLabelsSkipAngle: 10, arcLinkLabelsTextColor: { from: 'color', modifiers: [] }, arcLinkLabelsThickness: 2, arcLinkLabelsColor: { from: 'color' }, arcLabelsSkipAngle: 10, arcLabelsTextColor: { from: 'color', modifiers: [['darker', 2]] }, theme: theme, colors: TEAL_PALETTE, tooltip: ({ datum }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: datum.color }, children: "\u25CF" }), " ", datum.id, ": ", (0, jsx_runtime_1.jsx)("strong", { children: datum.value })] })) }));
+            case 'radar':
+                const radarData = transformToRadar(chartData);
+                return ((0, jsx_runtime_1.jsx)(radar_1.ResponsiveRadar, { data: radarData.data, keys: radarData.keys, indexBy: "id", margin: { top: 70, right: 80, bottom: 40, left: 80 }, borderColor: { from: 'color' }, gridLabelOffset: 36, dotSize: 10, dotColor: { theme: 'background' }, dotBorderWidth: 2, colors: TEAL_PALETTE, blendMode: "normal", motionConfig: "wobbly", theme: theme, sliceTooltip: ({ index, data }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [(0, jsx_runtime_1.jsx)("strong", { children: index }), data.map((d) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: d.color }, children: "\u25CF" }), " ", d.id, ": ", d.value] }, d.id)))] })) }));
+            case 'heatmap':
+                const heatData = transformToHeatmap(chartData);
+                return ((0, jsx_runtime_1.jsx)(heatmap_1.ResponsiveHeatMap, { data: heatData, margin: { top: 60, right: 90, bottom: 60, left: 90 }, valueFormat: ">-.2s", axisTop: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: -90,
+                        legend: '',
+                        legendOffset: 46
+                    }, axisRight: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: '',
+                        legendPosition: 'middle',
+                        legendOffset: 70
+                    }, axisLeft: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: '',
+                        legendPosition: 'middle',
+                        legendOffset: -72
+                    }, colors: {
+                        type: 'sequential',
+                        scheme: 'blues' // Matches our teal theme roughly
+                    }, emptyColor: "#555555", theme: theme, tooltip: ({ cell }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [cell.serieId, " / ", cell.data.x, ": ", (0, jsx_runtime_1.jsx)("strong", { children: cell.data.y ?? cell.value })] })) }));
+            case 'treemap':
+                const treeData = transformToTreemap(chartData);
+                return ((0, jsx_runtime_1.jsx)(treemap_1.ResponsiveTreeMap, { data: treeData, identity: "name", value: "loc", valueFormat: ".02s", margin: { top: 10, right: 10, bottom: 10, left: 10 }, labelSkipSize: 12, labelTextColor: { from: 'color', modifiers: [['darker', 2]] }, parentLabelPosition: "left", parentLabelTextColor: { from: 'color', modifiers: [['darker', 2]] }, borderColor: { from: 'color', modifiers: [['darker', 0.1]] }, colors: TEAL_PALETTE, theme: theme, tooltip: ({ node }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: node.color }, children: "\u25CF" }), " ", node.id, ": ", (0, jsx_runtime_1.jsx)("strong", { children: node.formattedValue })] })) }));
+            case 'scatterplot':
+                const scatterData = transformToScatter(chartData);
+                return ((0, jsx_runtime_1.jsx)(scatterplot_1.ResponsiveScatterPlot, { data: scatterData, margin: { top: 60, right: 140, bottom: 70, left: 90 }, xScale: { type: 'linear', min: 0, max: 'auto' }, xFormat: ">-.2f", yScale: { type: 'linear', min: 0, max: 'auto' }, yFormat: ">-.2f", blendMode: "normal", colors: TEAL_PALETTE, theme: theme, tooltip: ({ node }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: node.color }, children: "\u25CF" }), " ", node.serieId, ": (", node.formattedX, ", ", node.formattedY, ")"] })), axisTop: null, axisRight: null, axisBottom: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: 'X',
+                        legendPosition: 'middle',
+                        legendOffset: 46
+                    }, axisLeft: {
+                        tickSize: 5,
+                        tickPadding: 5,
+                        tickRotation: 0,
+                        legend: 'Y',
+                        legendPosition: 'middle',
+                        legendOffset: -60
+                    } }));
+            case 'sankey':
+                const sankeyData = transformToSankey(chartData);
+                // Inject link colors based on theme - startColor/endColor on each link
+                // Using SOLID colors (no rgba) + linkOpacity=1 so there's no double-transparency
+                const flowColor = isDark ? '#A8C4DC' : '#666666';
+                const themedSankeyData = {
+                    ...sankeyData,
+                    links: sankeyData.links.map((l) => ({
+                        ...l,
+                        startColor: l.startColor || flowColor,
+                        endColor: l.endColor || flowColor,
+                    }))
+                };
+                return ((0, jsx_runtime_1.jsx)(sankey_1.ResponsiveSankey, { data: themedSankeyData, margin: { top: 40, right: 160, bottom: 40, left: 50 }, align: "justify", colors: TEAL_PALETTE, nodeOpacity: 1, nodeHoverOthersOpacity: 0.35, nodeThickness: 18, nodeSpacing: 24, nodeBorderWidth: 0, nodeBorderColor: { from: 'color', modifiers: [['darker', 0.8]] }, linkOpacity: 0.5, linkHoverOthersOpacity: 0.1, linkContract: 3, linkBlendMode: "normal", enableLinkGradient: true, labelPosition: "outside", labelOrientation: "vertical", labelPadding: 16, labelTextColor: { from: 'color', modifiers: [['darker', 1]] }, nodeTooltip: ({ node }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: node.color }, children: "\u25CF" }), " ", node.label, ": ", (0, jsx_runtime_1.jsx)("strong", { children: node.value })] })), linkTooltip: ({ link }) => ((0, jsx_runtime_1.jsxs)(PortalTooltip, { bg: tooltipStyle.bg, color: tooltipStyle.color, border: tooltipStyle.border, children: [link.source.label, " \u2192 ", link.target.label, ": ", (0, jsx_runtime_1.jsx)("strong", { children: link.value })] })), theme: {
+                        ...theme,
+                        labels: { text: { fill: theme.textColor } }
+                    } }));
+            default:
+                return (0, jsx_runtime_1.jsxs)("div", { children: ["Unknown chart type: ", chartType] });
+        }
+    }, [chartData, chartType, theme, tooltipStyle, isDark]);
+    // Confirmation state for switching types
+    const [pendingType, setPendingType] = (0, react_1.useState)(null);
+    const handleTypeSwitch = (newType) => {
+        if (newType === chartType)
+            return; // Already this type
+        // Always show confirmation before switching
+        setPendingType(newType);
+    };
+    const confirmSwitch = () => {
+        if (pendingType) {
+            updateAttributes({ chartType: pendingType, json: defaultChartJson(pendingType) });
+            setPendingType(null);
+        }
+    };
+    const cancelSwitch = () => {
+        setPendingType(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.NodeViewWrapper, { className: "jotx-chart", "data-type": "chart", "data-chart-type": chartType, "data-selected": selected ? 'true' : 'false', children: [(0, jsx_runtime_1.jsxs)("div", { className: "jotx-chart-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-title", children: "Chart" }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "jotx-block-title-input", placeholder: "Title (shown in graph)...", value: (node.attrs.title || '').toString(), onChange: (e) => updateAttributes({ title: e.target.value }) }), (0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-type", children: ['bar', 'line', 'pie', 'radar', 'heatmap', 'treemap', 'scatterplot', 'sankey'].map(type => ((0, jsx_runtime_1.jsxs)("button", { className: `jotx-chart-type-btn ${chartType === type ? 'active' : ''}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleTypeSwitch(type), title: type.charAt(0).toUpperCase() + type.slice(1), children: [type === 'bar' && (0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { size: 16 }), type === 'line' && (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 16 }), type === 'pie' && (0, jsx_runtime_1.jsx)(lucide_react_1.PieChart, { size: 16 }), type === 'radar' && (0, jsx_runtime_1.jsx)(lucide_react_1.Radar, { size: 16 }), type === 'heatmap' && (0, jsx_runtime_1.jsx)(lucide_react_1.Grid, { size: 16 }), type === 'treemap' && (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutDashboard, { size: 16 }), type === 'scatterplot' && (0, jsx_runtime_1.jsx)(lucide_react_1.ScatterChart, { size: 16 }), type === 'sankey' && (0, jsx_runtime_1.jsx)(lucide_react_1.GitMerge, { size: 16 })] }, type))) }), (0, jsx_runtime_1.jsx)("button", { className: "jotx-chart-settings", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                            const next = !showSource;
+                            updateAttributes({ showSource: next });
+                        }, title: showSource ? "Hide Source" : "Show Source", children: showSource ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 16 }) })] }), pendingType && ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-chart-confirm-overlay", style: {
+                    position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
+                    background: 'rgba(0,0,0,0.8)', zIndex: 50,
+                    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+                    color: 'white', padding: '20px', textAlign: 'center',
+                    borderRadius: '8px'
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px', fontWeight: 600 }, children: ["Switching to ", pendingType, " will reset your data."] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '10px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: confirmSwitch, style: { padding: '6px 12px', background: '#d93025', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }, children: "Reset & Switch" }), (0, jsx_runtime_1.jsx)("button", { onClick: cancelSwitch, style: { padding: '6px 12px', background: '#555', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }, children: "Cancel" })] })] })), error ? (0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-error", children: error }) : null, (0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-canvasWrap", style: { height: '320px', width: '100%', position: 'relative', zIndex: 1, overflow: 'visible' }, children: chartComponent }), showSource ? ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-chart-editor", children: [(0, jsx_runtime_1.jsx)("div", { className: "jotx-chart-editorHint", children: "Edit JSON (labels + datasets)" }), (0, jsx_runtime_1.jsx)("textarea", { value: json, onChange: (e) => updateAttributes({ json: e.target.value }), spellCheck: false })] })) : null] }));
 }
 //# sourceMappingURL=ChartNodeView.js.map