Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/sankey/alluvial_diagram_01.js

@@ -0,0 +1,294 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Alluvial Diagram",
+    "chart_name": "alluvial_diagram_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 10], [0, "inf"], [2, 10]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const sourceChannel = chartUtils.schema.column(dataColumns, 0);
+    const valueChannel = chartUtils.schema.column(dataColumns, 1);
+    const targetChannel = chartUtils.schema.column(dataColumns, 2);
+    const sourceField = sourceChannel.key;
+    const valueField = valueChannel.key;
+    const targetField = targetChannel.key;
+    const sourceLabel = sourceChannel.rawLabel || sourceField;
+    const targetLabel = targetChannel.rawLabel || targetField;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 140, right: 150, bottom: 140, left: 150 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算每个类别的总值
+    const sourceTotals = {};
+    const targetTotals = {};
+    
+    chartData.forEach(d => {
+        sourceTotals[d[sourceField]] = (sourceTotals[d[sourceField]] || 0) + (+d[valueField]);
+        targetTotals[d[targetField]] = (targetTotals[d[targetField]] || 0) + (+d[valueField]);
+    });
+    
+    // 获取唯一的源和目标类别
+    const sourceCategories = [...new Set(chartData.map(d => d[sourceField]))];
+    const targetCategories = [...new Set(chartData.map(d => d[targetField]))];
+    
+    // 获取主色调
+    // const primaryColor = colorResolver.other("primary", { fallback: "#1f77b4" }).value;
+    // const secondaryColor = colorResolver.other("secondary", { fallback: "#ff7f0e" }).value;
+    const primaryColor = "#902d1f"; //"#7293EE"
+    const secondaryColor = "#2f6ae4"; //"#211CB7"
+    
+    // 创建渐变色系 - 从浅到深
+    const createColorScale = (baseColor, count) => {
+        // 创建从浅色到深色的渐变
+        const lightColor = chartUtils.color.variant(baseColor, { mode: "brighter", amount: 0.5 });
+        const darkColor = chartUtils.color.variant(baseColor, { mode: "darker", amount: 0.5 });
+        
+        return d3.scaleLinear()
+            .domain([0, count - 1])
+            .range([lightColor, darkColor])
+            .interpolate(d3.interpolateHcl);
+    };
+    
+    // 创建源和目标的颜色比例尺
+    const sourceColorScale = createColorScale(primaryColor, sourceCategories.length);
+    const targetColorScale = createColorScale(secondaryColor, targetCategories.length);
+    
+    // 准备 Sankey 数据
+    const nodes = [];
+    const links = [];
+    
+    // 添加源节点
+    sourceCategories.forEach((category, i) => {
+        nodes.push({
+            id: category,
+            name: category,
+            type: "source",
+            index: i,
+            colorIndex: i,
+            value: sourceTotals[category]
+        });
+    });
+    
+    // 添加目标节点
+    targetCategories.forEach((category, i) => {
+        nodes.push({
+            id: `target_${category}`,
+            name: category,
+            type: "target",
+            index: sourceCategories.length + i,
+            colorIndex: i,
+            value: targetTotals[category]
+        });
+    });
+    
+    // 添加链接
+    chartData.forEach(d => {
+        links.push({
+            source: d[sourceField],
+            target: `target_${d[targetField]}`,
+            value: +d[valueField],
+            sourceCategory: d[sourceField],
+            targetCategory: d[targetField]
+        });
+    });
+    
+    // 创建 Sankey 生成器
+    const sankey = d3.sankey()
+        .nodeId(d => d.id)
+        .nodeWidth(20)
+        .nodePadding(10)
+        .extent([[0, 0], [chartWidth, chartHeight]])
+        // 使用 nodeSort 方法按值从大到小排序节点
+        .nodeSort((a, b) => {
+            // 如果节点在同一列（都是源或都是目标）
+            if ((a.type === "source" && b.type === "source") || 
+                (a.type === "target" && b.type === "target")) {
+                // 按值从大到小排序
+                return b.value - a.value;
+            }
+            // 保持不同列的节点顺序不变
+            return 0;
+        });
+    
+    // 计算 Sankey 布局
+    const { nodes: sankeyNodes, links: sankeyLinks } = sankey({
+        nodes: nodes.map(d => Object.assign({}, d)),
+        links: links.map(d => Object.assign({}, d))
+    });
+    
+    // 更新节点的颜色索引，基于排序后的位置
+    const sourceNodesSorted = sankeyNodes
+        .filter(d => d.type === "source")
+        .sort((a, b) => a.y0 - b.y0);
+    
+    const targetNodesSorted = sankeyNodes
+        .filter(d => d.type === "target")
+        .sort((a, b) => a.y0 - b.y0);
+    
+    sourceNodesSorted.forEach((node, i) => {
+        node.colorIndex = i;
+    });
+    
+    targetNodesSorted.forEach((node, i) => {
+        node.colorIndex = i;
+    });
+    
+    // 创建路径生成器
+    const linkGenerator = d3.sankeyLinkHorizontal();
+    
+    // 创建渐变定义
+    const defs = svg.append("defs");
+    
+    // 为每个链接创建渐变
+    sankeyLinks.forEach((link, i) => {
+        const sourceNode = sankeyNodes.find(n => n.id === link.source.id);
+        const targetNode = sankeyNodes.find(n => n.id === link.target.id);
+        
+        const sourceColor = sourceNode.type === "source" 
+            ? sourceColorScale(sourceNode.colorIndex) 
+            : targetColorScale(sourceNode.colorIndex);
+        
+        const targetColor = targetNode.type === "source" 
+            ? sourceColorScale(targetNode.colorIndex) 
+            : targetColorScale(targetNode.colorIndex);
+        
+        const gradientId = `link-gradient-${i}`;
+        
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("x1", link.source.x1)
+            .attr("y1", link.y0)
+            .attr("x2", link.target.x0)
+            .attr("y2", link.y1);
+        
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", sourceColor);
+        
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", targetColor);
+        
+        link.gradientId = gradientId;
+    });
+    
+    // 绘制链接
+    const link = g.append("g")
+        .attr("class", "links")
+        .attr("fill", "none")
+        .attr("stroke-opacity", 0.7)
+        .selectAll("path")
+        .data(sankeyLinks)
+        .enter()
+        .append("path")
+        .attr("d", linkGenerator)
+        .attr("stroke", d => `url(#${d.gradientId})`)
+        .attr("stroke-width", d => Math.max(1, d.width));
+    
+    // 绘制节点
+    const node = g.append("g")
+        .attr("class", "nodes")
+        .selectAll("g")
+        .data(sankeyNodes)
+        .enter()
+        .append("g");
+    
+    // 添加节点矩形
+    node.append("rect")
+        .attr("x", d => d.x0)
+        .attr("y", d => d.y0)
+        .attr("height", d => d.y1 - d.y0)
+        .attr("width", d => d.x1 - d.x0)
+        .attr("fill", d => d.type === "source" 
+            ? sourceColorScale(d.colorIndex) 
+            : targetColorScale(d.colorIndex));
+    
+    // 添加节点标签和值标签
+    node.append("text")
+        .attr("x", d => d.type === "source" ? d.x0 - 8 : d.x1 + 8)
+        .attr("y", d => (d.y0 + d.y1) / 2)
+        .attr("dy", "0.35em")
+        .attr("text-anchor", d => d.type === "source" ? "end" : "start")
+        .attr("font-size", "14px")
+        .attr("font-weight", "bold")
+        .text(d => `${d.name} (${chartUtils.format.autoText(+(d.value))})`)
+        .attr("fill", d => {
+            // 使用与节点相同的颜色，但稍微加深以提高可读性
+            const baseColor = d.type === "source" 
+                ? sourceColorScale(d.colorIndex) 
+                : targetColorScale(d.colorIndex);
+            return chartUtils.color.variant(baseColor, { mode: "darker", amount: 0.8 });
+        });
+    
+    // 添加源和目标标题
+    svg.append("text")
+        .attr("x", margin.left)
+        .attr("y", margin.top / 2)
+        .attr("text-anchor", "middle")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .attr("fill", chartUtils.color.variant(primaryColor, { mode: "darker", amount: 0.5 }))
+        .text(sourceLabel);
+    
+    svg.append("text")
+        .attr("x", width - margin.right)
+        .attr("y", margin.top / 2)
+        .attr("text-anchor", "middle")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .attr("fill", chartUtils.color.variant(secondaryColor, { mode: "darker", amount: 0.5 }))
+        .text(targetLabel);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/sankey/alluvial_diagram_01_dark.js

@@ -0,0 +1,722 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Alluvial Diagram",
+    "chart_name": "alluvial_diagram_01_dark",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 10], [0, "inf"], [2, 10]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors_dark || jsonData.colors || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const sourceData = jsonData.data?.data || [];
+
+    d3.select(containerSelector).html("");
+
+    const sourceColumn = dataColumns[0] || {};
+    const valueColumn = dataColumns[1] || {};
+    const targetColumn = dataColumns[2] || {};
+    const sourceField = sourceColumn.name;
+    const valueField = valueColumn.name;
+    const targetField = targetColumn.name;
+
+    const width = Math.max(520, Number(variables.width) || 600);
+    const height = Math.max(480, Number(variables.height) || 600);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFontFamily = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || sourceColors.text || "#F7FBFF";
+    const mutedText = sourceColors.muted_text || "#9FB5D8";
+    const sourceColor = sourceColors.other?.source_accent || sourceColors.source_accent || "#FF6848";
+    const targetPrimary = sourceColors.other?.target_accent || sourceColors.target_accent || "#2F80ED";
+    const targetSecondary = sourceColors.other?.target_secondary || sourceColors.target_secondary || "#8D62FF";
+    const targetPalette = [
+        targetPrimary,
+        targetSecondary,
+        "#2EC4B6",
+        "#77D353",
+        "#F4B443",
+        "#49A6FF",
+        "#D66AFF",
+        "#41D6A5",
+        "#FF8D5C",
+        "#7CB3FF"
+    ];
+    const cardStroke = sourceColors.card_stroke || "#24486F";
+    const idSuffix = String(containerSelector || "alluvial")
+        .replace(/[^a-zA-Z0-9_-]/g, "")
+        .slice(0, 24) || "alluvial";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "alluvial-dark-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", "#05101F");
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!sourceField || !valueField || !targetField) {
+        return addEmptyState("Missing alluvial fields");
+    }
+
+    const readableName = value => String(value || "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const shortLabel = (value, maxChars = 18) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        const words = clean.split(/[\s/,-]+/).filter(Boolean);
+        if (words.length > 1) {
+            const compact = words.map(word => word[0]).join("").toUpperCase();
+            if (compact.length >= 2 && compact.length <= maxChars) return compact;
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(1, maxChars - 1)).trim()}.`;
+    };
+    const truncateText = (value, maxChars = 48) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 1)).trim()}.`;
+    };
+    const wrapLabelLines = (value, maxChars = 13, maxLines = 2) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return [clean];
+        const words = clean.split(/\s+/).filter(Boolean);
+        const lines = [];
+        words.forEach(word => {
+            if (!lines.length) {
+                lines.push(word);
+                return;
+            }
+            const current = lines[lines.length - 1] || "";
+            const candidate = current ? `${current} ${word}` : word;
+            if (candidate.length <= maxChars || lines.length >= maxLines) {
+                if (current && candidate.length > maxChars && lines.length >= maxLines) {
+                    lines[lines.length - 1] = truncateText(candidate, maxChars + 1);
+                } else {
+                    lines[lines.length - 1] = candidate;
+                }
+            } else {
+                lines.push(word);
+            }
+        });
+        return lines.slice(0, maxLines).map(line => truncateText(line, maxChars + 1));
+    };
+
+    const valueUnit = (valueColumn.unit || "").trim();
+    const visibleValueUnit = /^\$?m$/i.test(valueUnit) ? "" : valueUnit;
+    const formatNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 1000 ? ",.0f" : abs >= 100 ? ",.0f" : abs >= 10 ? ",.1f" : ",.2f";
+        return d3.format(spec)(value)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+    const formatLocalValue = value => `${formatNumber(value)}${visibleValueUnit ? ` ${visibleValueUnit}` : ""}`;
+    const formatCompactValue = value => {
+        const abs = Math.abs(value);
+        if (abs >= 1e9) return `${d3.format(".2~f")(value / 1e9)}B${visibleValueUnit ? ` ${visibleValueUnit}` : ""}`;
+        if (abs >= 1e6) return `${d3.format(".2~f")(value / 1e6)}M${visibleValueUnit ? ` ${visibleValueUnit}` : ""}`;
+        if (abs >= 1e3) return `${d3.format(".2~f")(value / 1e3)}K${visibleValueUnit ? ` ${visibleValueUnit}` : ""}`;
+        return formatLocalValue(value);
+    };
+
+    const cleanRows = sourceData
+        .map((row, index) => ({
+            source: String(row[sourceField] ?? "").trim(),
+            target: String(row[targetField] ?? "").trim(),
+            value: Number(row[valueField]),
+            rawSource: row[sourceField],
+            rawTarget: row[targetField],
+            sourceIndex: index
+        }))
+        .filter(row => row.source && row.target && Number.isFinite(row.value) && row.value > 0);
+
+    if (!cleanRows.length) {
+        return addEmptyState("No positive alluvial values");
+    }
+
+    const firstIndex = new Map();
+    cleanRows.forEach(row => {
+        if (!firstIndex.has(`source:${row.source}`)) firstIndex.set(`source:${row.source}`, row.sourceIndex);
+        if (!firstIndex.has(`target:${row.target}`)) firstIndex.set(`target:${row.target}`, row.sourceIndex);
+    });
+
+    const rollupTotal = (rows, key) => {
+        const totals = new Map();
+        rows.forEach(row => totals.set(row[key], (totals.get(row[key]) || 0) + row.value));
+        return totals;
+    };
+
+    const sourceTotals = rollupTotal(cleanRows, "source");
+    const targetTotals = rollupTotal(cleanRows, "target");
+    const sortByTotal = (a, b, totals, prefix) => {
+        const delta = (totals.get(b) || 0) - (totals.get(a) || 0);
+        if (Math.abs(delta) > 1e-9) return delta;
+        return (firstIndex.get(`${prefix}:${a}`) || 0) - (firstIndex.get(`${prefix}:${b}`) || 0);
+    };
+    const sourceCategories = [...sourceTotals.keys()].sort((a, b) => sortByTotal(a, b, sourceTotals, "source"));
+    const targetCategories = [...targetTotals.keys()].sort((a, b) => sortByTotal(a, b, targetTotals, "target"));
+
+    const totalValue = d3.sum(cleanRows, row => row.value);
+    const nodes = [
+        ...sourceCategories.map((name, index) => ({
+            id: `source:${name}`,
+            name,
+            type: "source",
+            rank: index + 1,
+            value: sourceTotals.get(name) || 0,
+            color: chartUtils.color.variant(sourceColor, { mode: "brighter", amount: index / Math.max(4, sourceCategories.length) })
+        })),
+        ...targetCategories.map((name, index) => ({
+            id: `target:${name}`,
+            name,
+            type: "target",
+            rank: index + 1,
+            value: targetTotals.get(name) || 0,
+            color: targetPalette[index % targetPalette.length]
+        }))
+    ];
+
+    const links = cleanRows.map(row => ({
+        source: `source:${row.source}`,
+        target: `target:${row.target}`,
+        value: row.value,
+        sourceName: row.source,
+        targetName: row.target,
+        sourceIndex: row.sourceIndex
+    }));
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("radialGradient")
+        .attr("id", `alluvial-bg-${idSuffix}`)
+        .attr("cx", "50%")
+        .attr("cy", "46%")
+        .attr("r", "78%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#031524");
+    bgGradient.append("stop").attr("offset", "62%").attr("stop-color", "#020F1D");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#020A16");
+
+    const softGlow = defs.append("filter")
+        .attr("id", `soft-glow-${idSuffix}`)
+        .attr("x", "-30%")
+        .attr("y", "-30%")
+        .attr("width", "160%")
+        .attr("height", "160%");
+    softGlow.append("feGaussianBlur").attr("stdDeviation", 1.8).attr("result", "blur");
+    const merge = softGlow.append("feMerge");
+    merge.append("feMergeNode").attr("in", "blur");
+    merge.append("feMergeNode").attr("in", "SourceGraphic");
+
+    const root = svg.append("g").attr("class", "alluvial-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("rx", 0)
+        .attr("fill", `url(#alluvial-bg-${idSuffix})`);
+
+    const addIconSlot = (group, cx, cy, r, className, fill, glyph, slotMeta = {}) => {
+        const slot = group.append("g").attr("class", className);
+        if (slotMeta.id) slot.attr("data-reserved-slot", slotMeta.id);
+        if (slotMeta.assetSourcePolicy) slot.attr("data-asset-source-policy", slotMeta.assetSourcePolicy);
+        if (slotMeta.anchor) slot.attr("data-anchor", slotMeta.anchor);
+        if (slotMeta.collisionRule) slot.attr("data-collision-rule", slotMeta.collisionRule);
+        slot.append("circle")
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .attr("r", r)
+            .attr("fill", fill)
+            .attr("opacity", 0.88)
+            .attr("stroke", "#7DAEFF")
+            .attr("stroke-opacity", 0.35);
+        if (glyph !== undefined && glyph !== null && String(glyph).trim()) {
+            slot.append("text")
+                .attr("x", cx)
+                .attr("y", cy + 1)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#FFFFFF")
+                .style("font-family", titleFontFamily)
+                .style("font-size", `${Math.max(9, r * 0.78)}px`)
+                .style("font-weight", "900")
+                .text(glyph);
+        }
+        return slot;
+    };
+
+    const sourceLabel = shortLabel(sourceColumn.label || sourceField, 18).toUpperCase();
+    const targetLabel = shortLabel(targetColumn.label || targetField, 20).toUpperCase();
+    const panelPadX = Math.max(22, width * 0.038);
+    const footerLegendH = targetCategories.length <= 4 ? Math.max(58, height * 0.095) : 0;
+    const bottomPad = footerLegendH ? footerLegendH + Math.max(26, height * 0.045) : Math.max(34, height * 0.065);
+    const labelColumnW = Math.min(98, Math.max(78, width * 0.145));
+    const targetCardW = targetCategories.length <= 2
+        ? Math.min(132, Math.max(118, width * 0.2))
+        : Math.min(148, Math.max(132, width * 0.22));
+    const targetGap = targetCategories.length <= 2
+        ? Math.max(2, width * 0.004)
+        : Math.max(8, width * 0.018);
+    const plotX = panelPadX + labelColumnW + 4;
+    const plotY = Math.max(88, height * 0.15);
+    const plotW = Math.max(190, width - panelPadX - targetCardW - targetGap - plotX);
+    const plotH = Math.max(320, height - plotY - bottomPad);
+    const targetCardX = plotX + plotW + targetGap;
+    const headerY = Math.max(28, plotY - 48);
+
+    const addHeaderPill = (x, y, w, label, color, className) => {
+        const pill = root.append("g")
+            .attr("class", `header-pill ${className}`)
+            .attr("transform", `translate(${x}, ${y})`);
+        pill.append("rect")
+            .attr("width", w)
+            .attr("height", 27)
+            .attr("rx", 7)
+            .attr("fill", color)
+            .attr("fill-opacity", 0.32)
+            .attr("stroke", color)
+            .attr("stroke-opacity", 0.85);
+        pill.append("text")
+            .attr("x", w / 2)
+            .attr("y", 18)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", titleFontFamily)
+            .style("font-size", "11px")
+            .style("font-weight", "900")
+            .style("letter-spacing", "0px")
+            .text(label);
+        return pill;
+    };
+
+    addHeaderPill(Math.max(panelPadX, plotX - 102), headerY, 92, sourceLabel, sourceColor, "source-header-pill");
+    addHeaderPill(targetCardX, headerY, targetCardW, targetLabel, targetPalette[0], "target-header-pill");
+
+    const sankey = d3.sankey()
+        .nodeId(d => d.id)
+        .nodeWidth(12)
+        .nodePadding(Math.max(8, Math.min(18, plotH / Math.max(12, sourceCategories.length * 1.45))))
+        .extent([[0, 0], [plotW, plotH]])
+        .nodeSort((a, b) => {
+            if (a.type === b.type) return b.value - a.value || a.rank - b.rank;
+            return 0;
+        });
+
+    const sankeyGraph = sankey({
+        nodes: nodes.map(node => ({ ...node })),
+        links: links.map(link => ({ ...link }))
+    });
+    const sankeyNodes = sankeyGraph.nodes;
+    const sankeyLinks = sankeyGraph.links;
+    const sourceNodes = sankeyNodes.filter(node => node.type === "source").sort((a, b) => a.y0 - b.y0);
+    const targetNodes = sankeyNodes.filter(node => node.type === "target").sort((a, b) => a.y0 - b.y0);
+
+    sourceNodes.forEach((node, index) => {
+        node.visualRank = index + 1;
+        node.color = sourceColor;
+    });
+    targetNodes.forEach((node, index) => {
+        node.visualRank = index + 1;
+        node.color = targetPalette[index % targetPalette.length];
+    });
+
+    sankeyLinks.forEach((link, index) => {
+        const source = link.source;
+        const target = link.target;
+        const gradientId = `alluvial-link-gradient-${idSuffix}-${index}`;
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("x1", source.x1)
+            .attr("y1", link.y0)
+            .attr("x2", target.x0)
+            .attr("y2", link.y1);
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", sourceColor)
+            .attr("stop-opacity", 0.92);
+        gradient.append("stop")
+            .attr("offset", "18%")
+            .attr("stop-color", d3.interpolateRgb(sourceColor, target.color)(0.22))
+            .attr("stop-opacity", 0.80);
+        gradient.append("stop")
+            .attr("offset", "44%")
+            .attr("stop-color", d3.interpolateRgb(sourceColor, target.color)(0.78))
+            .attr("stop-opacity", 0.82);
+        gradient.append("stop")
+            .attr("offset", "66%")
+            .attr("stop-color", target.color)
+            .attr("stop-opacity", 0.86);
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", target.color)
+            .attr("stop-opacity", 0.92);
+        link.gradientId = gradientId;
+    });
+
+    const plot = root.append("g")
+        .attr("class", "alluvial-plot-area")
+        .attr("transform", `translate(${plotX}, ${plotY})`);
+
+    const linkGenerator = d3.sankeyLinkHorizontal();
+    plot.append("g")
+        .attr("class", "alluvial-links")
+        .attr("fill", "none")
+        .selectAll("path")
+        .data(sankeyLinks)
+        .enter()
+        .append("path")
+        .attr("class", "alluvial-link data-link")
+        .attr("d", linkGenerator)
+        .attr("stroke", d => `url(#${d.gradientId})`)
+        .attr("stroke-width", d => Math.max(1.8, d.width * 1.04))
+        .attr("stroke-linecap", "butt")
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-opacity", 0.82)
+        .attr("data-source", d => d.source.name)
+        .attr("data-target", d => d.target.name)
+        .attr("data-value", d => d.value)
+        .attr("data-source-index", d => d.sourceIndex);
+
+    const node = plot.append("g")
+        .attr("class", "alluvial-nodes")
+        .selectAll("g")
+        .data(sankeyNodes)
+        .enter()
+        .append("g")
+        .attr("class", d => `alluvial-node ${d.type}-node`)
+        .attr("data-label", d => d.name)
+        .attr("data-value", d => d.value)
+        .attr("data-rank", d => d.visualRank || d.rank)
+        .attr("data-node-type", d => d.type);
+
+    node.append("rect")
+        .attr("class", "node-bar")
+        .attr("x", d => d.x0)
+        .attr("y", d => d.y0)
+        .attr("width", d => Math.max(10, d.x1 - d.x0))
+        .attr("height", d => Math.max(4, d.y1 - d.y0))
+        .attr("rx", 4)
+        .attr("fill", d => d.color)
+        .attr("stroke", d => chartUtils.color.variant(d.color, { mode: "brighter", amount: 0.8 }))
+        .attr("stroke-width", 0.7);
+
+    node.filter(d => d.type === "source")
+        .append("circle")
+        .attr("class", "source-node-dot")
+        .attr("cx", d => d.x0 + 6)
+        .attr("cy", d => (d.y0 + d.y1) / 2)
+        .attr("r", 5.5)
+        .attr("fill", "#FFFFFF")
+        .attr("stroke", d => d.color)
+        .attr("stroke-width", 3);
+
+    const labelFont = Math.max(10.8, Math.min(14.2, 16.2 - sourceNodes.length * 0.22));
+    plot.append("g")
+        .attr("class", "source-labels")
+        .selectAll("text")
+        .data(sourceNodes)
+        .enter()
+        .append("text")
+        .attr("class", "source-node-label chart-text")
+        .attr("x", -22)
+        .attr("y", d => (d.y0 + d.y1) / 2)
+        .attr("dy", "0.34em")
+        .attr("text-anchor", "end")
+        .attr("fill", sourceColor)
+        .style("font-family", titleFontFamily)
+        .style("font-size", `${labelFont}px`)
+        .style("font-weight", "900")
+        .each(function(d) {
+            const label = d3.select(this);
+            label.append("tspan")
+                .attr("fill", sourceColor)
+                .text(shortLabel(d.name, sourceNodes.length > 8 ? 11 : 14));
+            label.append("tspan")
+                .attr("dx", 4)
+                .attr("fill", "#D8E7FF")
+                .style("font-size", `${Math.max(8.8, labelFont * 0.72)}px`)
+                .style("font-weight", "760")
+                .text(`(${formatCompactValue(d.value)})`);
+        });
+
+    const referenceTwoTargetCards = targetNodes.length <= 2;
+    const minCardH = referenceTwoTargetCards ? Math.max(126, Math.min(148, plotH * 0.3)) : targetNodes.length <= 4 ? 82 : 48;
+    const maxTwoTargetCardH = Math.max(minCardH, Math.min(190, plotH * 0.45));
+    const cardGap = referenceTwoTargetCards ? Math.max(8, height * 0.014) : targetNodes.length <= 4 ? 10 : 7;
+    const packedCardH = Math.min(minCardH, Math.max(36, (plotH - cardGap * (targetNodes.length - 1)) / Math.max(1, targetNodes.length)));
+    const cardLayout = targetNodes.map(nodeDatum => {
+        const nodeTop = plotY + nodeDatum.y0;
+        const nodeHeight = Math.max(4, nodeDatum.y1 - nodeDatum.y0);
+        if (referenceTwoTargetCards) {
+            const cardH = Math.min(maxTwoTargetCardH, Math.max(minCardH, nodeHeight));
+            return {
+                y: nodeTop + nodeHeight / 2 - cardH / 2,
+                h: cardH,
+                attachedToNode: false,
+                relationship: "centerline-aligned"
+            };
+        }
+        return {
+            y: plotY + (nodeDatum.y0 + nodeDatum.y1) / 2 - packedCardH / 2,
+            h: packedCardH,
+            attachedToNode: false
+        };
+    });
+    for (let i = 1; i < cardLayout.length; i++) {
+        cardLayout[i].y = Math.max(cardLayout[i].y, cardLayout[i - 1].y + cardLayout[i - 1].h + cardGap);
+    }
+    const overflow = cardLayout.length
+        ? cardLayout[cardLayout.length - 1].y + cardLayout[cardLayout.length - 1].h - (plotY + plotH)
+        : 0;
+    if (overflow > 0) {
+        for (let i = 0; i < cardLayout.length; i++) cardLayout[i].y -= overflow;
+    }
+    for (let i = cardLayout.length - 2; i >= 0; i--) {
+        cardLayout[i].y = Math.min(cardLayout[i].y, cardLayout[i + 1].y - cardLayout[i].h - cardGap);
+    }
+
+    const targetCards = root.append("g")
+        .attr("class", "target-summary-cards")
+        .selectAll("g")
+        .data(targetNodes)
+        .enter()
+        .append("g")
+        .attr("class", "target-card")
+        .attr("transform", (d, i) => `translate(${targetCardX}, ${Math.max(plotY, cardLayout[i].y)})`)
+        .attr("data-label", d => d.name)
+        .attr("data-value", d => d.value)
+        .attr("data-rank", d => d.visualRank || d.rank);
+
+    targetCards.append("rect")
+        .attr("width", targetCardW)
+        .attr("height", (d, i) => cardLayout[i].h)
+        .attr("rx", 10)
+        .attr("fill", "#071B33")
+        .attr("fill-opacity", 0.92)
+        .attr("stroke", cardStroke)
+        .attr("stroke-width", 1);
+
+    targetCards.each(function(d, i) {
+        const group = d3.select(this);
+        const cardH = cardLayout[i].h;
+        const compact = targetNodes.length > 2 || cardH < 96;
+        if (compact) {
+            addIconSlot(
+                group,
+                19,
+                cardH / 2,
+                12,
+                "target-card-icon-slot target-rank-slot decorative-icon-slot",
+                d.color,
+                "",
+                {
+                    id: "target_card_icon_slot",
+                    assetSourcePolicy: "image2-owned-or-neutral-placeholder",
+                    anchor: "target-card-left-center",
+                    collisionRule: "inside-target-card-avoid-label-value"
+                }
+            );
+            group.append("text")
+                .attr("class", "target-card-label chart-text")
+                .attr("x", 38)
+                .attr("y", cardH / 2 - 7)
+                .attr("text-anchor", "start")
+                .attr("fill", textColor)
+                .style("font-family", titleFontFamily)
+                .style("font-size", "10px")
+                .style("font-weight", "900")
+                .text(shortLabel(d.name, 15));
+            group.append("text")
+                .attr("class", "target-card-value chart-text")
+                .attr("x", 38)
+                .attr("y", cardH / 2 + 16)
+                .attr("text-anchor", "start")
+                .attr("fill", d.color)
+                .style("font-family", titleFontFamily)
+                .style("font-size", "14px")
+                .style("font-weight", "900")
+                .text(formatCompactValue(d.value));
+            return;
+        }
+        const iconR = Math.min(27, cardH * 0.26);
+        addIconSlot(
+            group,
+            targetCardW / 2,
+            Math.max(30, iconR + 8),
+            iconR,
+            "target-card-icon-slot target-rank-slot decorative-icon-slot",
+            d.color,
+            "",
+            {
+                id: "target_card_icon_slot",
+                assetSourcePolicy: "image2-owned-or-neutral-placeholder",
+                anchor: "target-card-top-center",
+                collisionRule: "inside-target-card-avoid-label-value"
+            }
+        );
+        const labelLines = wrapLabelLines(d.name, targetCardW < 140 ? 12 : 16, 2);
+        const labelY = Math.min(cardH - 50, iconR * 2 + 19) - (labelLines.length - 1) * 7;
+        const labelText = group.append("text")
+            .attr("class", "target-card-label chart-text")
+            .attr("x", targetCardW / 2)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${targetCardW < 140 ? 12 : 14}px`)
+            .style("font-weight", "900");
+        labelLines.forEach((line, lineIndex) => {
+            labelText.append("tspan")
+                .attr("x", targetCardW / 2)
+                .attr("dy", lineIndex === 0 ? 0 : 15)
+                .text(line);
+        });
+        group.append("text")
+            .attr("class", "target-card-value chart-text")
+            .attr("x", targetCardW / 2)
+            .attr("y", cardH - 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", d.color)
+            .style("font-family", titleFontFamily)
+            .style("font-size", "26px")
+            .style("font-weight", "900")
+            .text(formatCompactValue(d.value));
+    });
+
+    if (footerLegendH) {
+        const footerPadX = panelPadX;
+        const footerY = height - footerLegendH - Math.max(18, height * 0.03);
+        const footerW = width - footerPadX * 2;
+        const footer = root.append("g")
+            .attr("class", "footer-legend-strip")
+            .attr("transform", `translate(${footerPadX}, ${footerY})`);
+        footer.append("rect")
+            .attr("width", footerW)
+            .attr("height", footerLegendH)
+            .attr("rx", 12)
+            .attr("fill", "#071B33")
+            .attr("fill-opacity", 0.86)
+            .attr("stroke", cardStroke)
+            .attr("stroke-width", 0.9);
+        addIconSlot(
+            footer,
+            31,
+            footerLegendH / 2,
+            Math.min(20, footerLegendH * 0.34),
+            "footer-semantic-slot decorative-icon-slot",
+            "#183254",
+            "",
+            {
+                id: "footer_semantic_slot",
+                assetSourcePolicy: "neutral-placeholder",
+                anchor: "footer-left",
+                collisionRule: "inside-legend-strip"
+            }
+        );
+
+        const legendItems = targetNodes.slice(0, Math.min(4, targetNodes.length));
+        const legendX = Math.max(footerW - 178, footerW * 0.58);
+        footer.append("line")
+            .attr("x1", legendX - 22)
+            .attr("x2", legendX - 22)
+            .attr("y1", 13)
+            .attr("y2", footerLegendH - 13)
+            .attr("stroke", cardStroke)
+            .attr("stroke-width", 1);
+        const legendCols = legendItems.length > 2 ? 2 : 1;
+        const legendRows = Math.ceil(legendItems.length / legendCols);
+        const legendColW = legendCols > 1 ? Math.max(78, Math.min(96, (footerW - legendX - 8) / 2)) : 0;
+        const legendRowH = 18;
+        const legendBlockH = (legendRows - 1) * legendRowH + 10;
+        const legendStartY = Math.max(12, (footerLegendH - legendBlockH) / 2);
+        legendItems.forEach((item, index) => {
+            const col = index % legendCols;
+            const rowIndex = Math.floor(index / legendCols);
+            const row = footer.append("g")
+                .attr("class", "legend-row")
+                .attr("transform", `translate(${legendX + col * legendColW}, ${legendStartY + rowIndex * legendRowH})`)
+                .attr("data-label", item.name)
+                .attr("data-value", item.value);
+            row.append("rect")
+                .attr("width", 10)
+                .attr("height", 10)
+                .attr("rx", 2)
+                .attr("fill", item.color);
+            row.append("text")
+                .attr("x", 17)
+                .attr("y", 9)
+                .attr("fill", textColor)
+                .style("font-family", fontFamily)
+                .style("font-size", "9.5px")
+                .style("font-weight", "650")
+                .text(shortLabel(item.name, legendCols > 1 ? 11 : 22));
+        });
+    }
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/sankey/alluvial_diagram_02.js

@@ -0,0 +1,472 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Alluvial Diagram",
+    "chart_name": "alluvial_diagram_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["temporal"]],
+    "required_fields_range": [[2, 10], [0, "inf"], [2, 2]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": ["primary", "secondary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const sourceData = jsonData.data?.data || [];
+    const images = jsonData.images || {};
+
+    d3.select(containerSelector).html("");
+
+    const categoryColumn = dataColumns[0] || {};
+    const valueColumn = dataColumns[1] || {};
+    const timeColumn = dataColumns[2] || {};
+    const categoryField = categoryColumn.name;
+    const valueField = valueColumn.name;
+    const timeField = timeColumn.name;
+
+    const width = Math.max(520, Number(variables.width) || 600);
+    const requestedHeight = Number(variables.height) || 600;
+    const height = Math.max(requestedHeight, Math.round(width * 1.34), 780);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFontFamily = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#0B2542";
+    const mutedText = "#536271";
+    const navy = "#082944";
+    const border = "#DDE7F2";
+    const bg = "#FFFFFF";
+    const palette = [
+        "#E81E2C",
+        "#1267C8",
+        "#3D8BFF",
+        "#6B48D7",
+        "#FF9F1C",
+        "#22A699",
+        "#6BBE45",
+        "#8D5CF6",
+        "#EF6F6C",
+        "#1785A7"
+    ];
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "alluvial-02-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", bg);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!categoryField || !valueField || !timeField) {
+        return addEmptyState("Missing alluvial comparison fields");
+    }
+
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const shortLabel = (value, maxChars = 18) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        const words = clean.split(/[\s/,-]+/).filter(Boolean);
+        if (words.length > 1) {
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(1, maxChars - 1)).trim()}.`;
+    };
+
+    const unit = (valueColumn.unit || "").trim();
+    const formatNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 1000 ? ",.0f" : abs >= 100 ? ",.0f" : abs >= 10 ? ",.1f" : abs >= 1 ? ",.1f" : ",.2f";
+        return d3.format(spec)(value)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+    const formatLocalValue = value => {
+        const number = formatNumber(value);
+        if (!unit) return number;
+        if (unit === "%") return `${number}%`;
+        if (unit.startsWith("$")) return `${unit[0]}${number}${unit.slice(1)}`;
+        return `${number} ${unit}`;
+    };
+    const formatMarkValue = value => {
+        const number = formatNumber(value);
+        if (!unit) return number;
+        if (unit === "%") return `${number}%`;
+        if (unit.startsWith("$")) return `${unit[0]}${number}${unit.slice(1)}`;
+        if (/million\s+usd/i.test(unit)) return `${number}m`;
+        if (/billion\s+usd/i.test(unit)) return `${number}b`;
+        if (unit.length > 7 || /[\/\s]/.test(unit)) return number;
+        return `${number} ${unit}`;
+    };
+
+    const normalizeTime = value => {
+        const raw = String(value ?? "").trim();
+        const numeric = Number(raw);
+        const sortable = Number.isFinite(numeric) ? numeric : Date.parse(raw);
+        return {
+            raw,
+            sortable: Number.isFinite(sortable) ? sortable : raw
+        };
+    };
+    const compareTime = (a, b) => {
+        const ta = normalizeTime(a);
+        const tb = normalizeTime(b);
+        if (typeof ta.sortable === "number" && typeof tb.sortable === "number") return ta.sortable - tb.sortable;
+        return String(a).localeCompare(String(b));
+    };
+
+    const cleanRows = sourceData
+        .map((row, index) => ({
+            category: String(row[categoryField] ?? "").trim(),
+            time: String(row[timeField] ?? "").trim(),
+            value: Number(row[valueField]),
+            sourceIndex: index
+        }))
+        .filter(row => row.category && row.time && Number.isFinite(row.value) && row.value >= 0);
+
+    const timePoints = [...new Set(cleanRows.map(row => row.time))].sort(compareTime);
+    if (timePoints.length !== 2) {
+        return addEmptyState("Alluvial comparison needs exactly two time points");
+    }
+
+    const firstIndex = new Map();
+    cleanRows.forEach(row => {
+        if (!firstIndex.has(row.category)) firstIndex.set(row.category, row.sourceIndex);
+    });
+
+    const byCategory = new Map();
+    cleanRows.forEach(row => {
+        if (!byCategory.has(row.category)) {
+            byCategory.set(row.category, {
+                category: row.category,
+                leftValue: 0,
+                rightValue: 0,
+                leftSourceIndex: -1,
+                rightSourceIndex: -1,
+                firstSourceIndex: firstIndex.get(row.category) ?? row.sourceIndex
+            });
+        }
+        const record = byCategory.get(row.category);
+        if (row.time === timePoints[0]) {
+            record.leftValue += row.value;
+            record.leftSourceIndex = row.sourceIndex;
+        } else if (row.time === timePoints[1]) {
+            record.rightValue += row.value;
+            record.rightSourceIndex = row.sourceIndex;
+        }
+    });
+
+    const categories = [...byCategory.values()]
+        .filter(row => row.leftValue > 0 || row.rightValue > 0)
+        .sort((a, b) => b.leftValue - a.leftValue || b.rightValue - a.rightValue || a.firstSourceIndex - b.firstSourceIndex)
+        .map((row, index) => ({ ...row, rank: index + 1 }));
+
+    if (!categories.length) {
+        return addEmptyState("No alluvial comparison values");
+    }
+
+    const colorMap = sourceColors.x || {};
+    const getColor = (category, index) => colorMap[category] || palette[index % palette.length];
+    const getIcon = category => images.field?.[category] || images.fields?.[category] || null;
+
+    const defs = svg.append("defs");
+    const shadow = defs.append("filter")
+        .attr("id", "alluvial-02-card-shadow")
+        .attr("x", "-15%")
+        .attr("y", "-15%")
+        .attr("width", "130%")
+        .attr("height", "130%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 12)
+        .attr("flood-color", "#A8B8CC")
+        .attr("flood-opacity", 0.23);
+
+    const root = svg.append("g").attr("class", "alluvial-02-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("rx", 0)
+        .attr("fill", bg);
+
+    const panelPad = Math.max(18, width * 0.035);
+    const leftIconX = panelPad + 34;
+    const leftLabelX = panelPad + 34;
+    const leftNodeX = Math.max(130, width * 0.22);
+    const nodeWidth = Math.max(13, width * 0.026);
+    const rightNodeWidth = Math.max(76, width * 0.135);
+    const rightNodeX = Math.min(width - panelPad - rightNodeWidth - 70, width * 0.64);
+    const valueBoxW = Math.max(66, Math.min(88, width * 0.13));
+    const plotTop = Math.max(104, height * 0.20);
+    const plotBottom = height * 0.84;
+    const plotH = Math.max(260, plotBottom - plotTop);
+    const rowPitch = plotH / categories.length;
+    const maxBandH = Math.max(42, Math.min(104, rowPitch * 0.90));
+    const minBandH = Math.max(22, Math.min(32, rowPitch * 0.27));
+    const maxValue = Math.max(1, d3.max(categories, d => Math.max(d.leftValue, d.rightValue)) || 1);
+    const bandHeight = value => value <= 0 ? 0 : Math.max(minBandH, Math.sqrt(value / maxValue) * maxBandH);
+
+    const yearPillW = Math.max(76, width * 0.14);
+    const yearPillH = 31;
+    const addYearPill = (x, y, label, className) => {
+        const pill = root.append("g")
+            .attr("class", `time-pill ${className}`)
+            .attr("transform", `translate(${x}, ${y})`);
+        pill.append("rect")
+            .attr("width", yearPillW)
+            .attr("height", yearPillH)
+            .attr("rx", 8)
+            .attr("fill", navy)
+            .attr("filter", "url(#alluvial-02-card-shadow)");
+        pill.append("text")
+            .attr("x", yearPillW / 2)
+            .attr("y", 21)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#FFFFFF")
+            .style("font-family", titleFontFamily)
+            .style("font-size", "18px")
+            .style("font-weight", "900")
+            .text(label);
+        return pill;
+    };
+    addYearPill(leftNodeX, plotTop - 46, timePoints[0], "time-pill-left");
+    addYearPill(rightNodeX + rightNodeWidth - yearPillW, plotTop - 46, timePoints[1], "time-pill-right");
+
+    const addIconSlot = (group, cx, cy, r, className, fill, glyph, href) => {
+        const slot = group.append("g")
+            .attr("class", className);
+        slot.append("circle")
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .attr("r", r)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#E5ECF4")
+            .attr("stroke-width", 1.3)
+            .attr("filter", "url(#alluvial-02-card-shadow)");
+        if (href) {
+            slot.append("image")
+                .attr("x", cx - r + 4)
+                .attr("y", cy - r + 4)
+                .attr("width", (r - 4) * 2)
+                .attr("height", (r - 4) * 2)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("href", href);
+        } else {
+            slot.append("circle")
+                .attr("cx", cx)
+                .attr("cy", cy)
+                .attr("r", r - 5)
+                .attr("fill", fill);
+            slot.append("text")
+                .attr("x", cx)
+                .attr("y", cy + 1)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#FFFFFF")
+                .style("font-family", titleFontFamily)
+                .style("font-size", `${Math.max(9, r * 0.65)}px`)
+                .style("font-weight", "900")
+                .text(glyph);
+        }
+        return slot;
+    };
+
+    const rows = root.append("g")
+        .attr("class", "comparison-flow-rows");
+
+    categories.forEach((row, index) => {
+        const color = getColor(row.category, index);
+        const centerY = plotTop + rowPitch * (index + 0.5);
+        const leftH = bandHeight(row.leftValue);
+        const rightH = bandHeight(row.rightValue);
+        const leftTop = centerY - leftH / 2;
+        const leftBottom = centerY + leftH / 2;
+        const rightTop = centerY - rightH / 2;
+        const rightBottom = centerY + rightH / 2;
+        const midX1 = leftNodeX + nodeWidth + (rightNodeX - leftNodeX - nodeWidth) * 0.34;
+        const midX2 = leftNodeX + nodeWidth + (rightNodeX - leftNodeX - nodeWidth) * 0.66;
+        const path = [
+            `M ${leftNodeX + nodeWidth} ${leftTop}`,
+            `C ${midX1} ${leftTop}, ${midX2} ${rightTop}, ${rightNodeX} ${rightTop}`,
+            `L ${rightNodeX} ${rightBottom}`,
+            `C ${midX2} ${rightBottom}, ${midX1} ${leftBottom}, ${leftNodeX + nodeWidth} ${leftBottom}`,
+            "Z"
+        ].join(" ");
+        const gradientId = `alluvial-02-gradient-${index}`;
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("x1", leftNodeX)
+            .attr("x2", rightNodeX + rightNodeWidth)
+            .attr("y1", centerY)
+            .attr("y2", centerY);
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", color).attr("stop-opacity", 0.96);
+        gradient.append("stop").attr("offset", "58%").attr("stop-color", chartUtils.color.variant(color, { mode: "brighter", amount: 1.8 })).attr("stop-opacity", 0.72);
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", color).attr("stop-opacity", 0.90);
+
+        const group = rows.append("g")
+            .attr("class", "category-row")
+            .attr("data-category", row.category)
+            .attr("data-left-time", timePoints[0])
+            .attr("data-right-time", timePoints[1])
+            .attr("data-left-value", row.leftValue)
+            .attr("data-right-value", row.rightValue)
+            .attr("data-left-source-index", row.leftSourceIndex)
+            .attr("data-right-source-index", row.rightSourceIndex)
+            .attr("data-rank", row.rank);
+
+        addIconSlot(group, leftIconX, centerY - Math.min(9, rowPitch * 0.12), Math.min(23, Math.max(16, rowPitch * 0.23)), "category-icon-slot decorative-icon-slot", color, shortLabel(row.category, 1).slice(0, 1), getIcon(row.category));
+        group.append("text")
+            .attr("class", "category-label chart-text")
+            .attr("x", leftLabelX)
+            .attr("y", centerY + Math.min(31, rowPitch * 0.32))
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${Math.max(10, Math.min(15, rowPitch * 0.18))}px`)
+            .style("font-weight", "900")
+            .text(shortLabel(row.category, 14));
+
+        group.append("path")
+            .attr("class", "alluvial-ribbon data-link")
+            .attr("d", path)
+            .attr("fill", `url(#${gradientId})`)
+            .attr("stroke", "rgba(255,255,255,0.85)")
+            .attr("stroke-width", 0.8)
+            .attr("data-category", row.category)
+            .attr("data-left-value", row.leftValue)
+            .attr("data-right-value", row.rightValue);
+
+        group.append("rect")
+            .attr("class", "left-node-bar")
+            .attr("x", leftNodeX)
+            .attr("y", leftTop)
+            .attr("width", nodeWidth)
+            .attr("height", Math.max(2, leftH))
+            .attr("rx", 3)
+            .attr("fill", color)
+            .attr("data-category", row.category)
+            .attr("data-value", row.leftValue)
+            .attr("data-time", timePoints[0]);
+
+        group.append("rect")
+            .attr("class", "right-node-bar")
+            .attr("x", rightNodeX)
+            .attr("y", rightTop)
+            .attr("width", rightNodeWidth)
+            .attr("height", Math.max(2, rightH))
+            .attr("rx", 3)
+            .attr("fill", color)
+            .attr("data-category", row.category)
+            .attr("data-value", row.rightValue)
+            .attr("data-time", timePoints[1]);
+
+        const minValueBoxH = Math.max(40, Math.min(56, rowPitch * 0.46));
+        const leftValueBoxX = leftNodeX + nodeWidth + 12;
+        const leftLabelXInBand = leftValueBoxX + valueBoxW / 2;
+        const rightLabelXInBand = rightNodeX + rightNodeWidth / 2;
+        const rightValueBoxH = Math.max(minValueBoxH, rightH);
+        const rightValueBoxY = centerY - rightValueBoxH / 2;
+        group.append("rect")
+            .attr("class", "right-value-box")
+            .attr("x", rightNodeX)
+            .attr("y", rightValueBoxY)
+            .attr("width", rightNodeWidth)
+            .attr("height", rightValueBoxH)
+            .attr("rx", 5)
+            .attr("fill", chartUtils.color.variant(color, { mode: "darker", amount: 0.15 }))
+            .attr("opacity", 0.96)
+            .attr("data-category", row.category)
+            .attr("data-value", row.rightValue)
+            .attr("data-time", timePoints[1]);
+        group.append("text")
+            .attr("class", "left-value-label chart-text")
+            .attr("x", leftNodeX + nodeWidth + Math.max(20, width * 0.045))
+            .attr("y", centerY)
+            .attr("dy", "0.35em")
+            .attr("fill", "#FFFFFF")
+            .attr("text-anchor", "start")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${Math.max(13, Math.min(19, rowPitch * 0.22))}px`)
+            .style("font-weight", "900")
+            .text(formatMarkValue(row.leftValue));
+
+        group.append("text")
+            .attr("class", "right-value-label chart-text")
+            .attr("x", rightLabelXInBand)
+            .attr("y", centerY)
+            .attr("dy", "0.35em")
+            .attr("fill", "#FFFFFF")
+            .attr("text-anchor", "middle")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${Math.max(13, Math.min(18, rowPitch * 0.20))}px`)
+            .style("font-weight", "900")
+            .text(formatMarkValue(row.rightValue));
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/sankey/alluvial_diagram_02_dark.js

@@ -0,0 +1,641 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Alluvial Diagram",
+    "chart_name": "alluvial_diagram_02_dark",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["temporal"]],
+    "required_fields_range": [[2, 10], [0, "inf"], [2, 2]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": ["primary", "secondary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const sourceData = jsonData.data?.data || [];
+    const images = jsonData.images || {};
+    const metadata = jsonData.metadata || {};
+
+    d3.select(containerSelector).html("");
+
+    const categoryColumn = dataColumns[0] || {};
+    const valueColumn = dataColumns[1] || {};
+    const timeColumn = dataColumns[2] || {};
+    const categoryField = categoryColumn.name;
+    const valueField = valueColumn.name;
+    const timeField = timeColumn.name;
+
+    const width = Math.max(520, Number(variables.width) || 600);
+    const height = Math.max(480, Number(variables.height) || 600);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFontFamily = typography.title?.font_family || fontFamily;
+    const textColor = "#F7FBFF";
+    const mutedText = "#9CB3C8";
+    const accentBlue = "#72B7E6";
+    const cardFill = "#061A2D";
+    const cardStroke = "#193B5E";
+    const palette = [
+        "#E33A2E",
+        "#E18213",
+        "#E5B51E",
+        "#4D9D4E",
+        "#2C8FD5",
+        "#7A5CF0",
+        "#28B6A2",
+        "#D65D93",
+        "#7CB342",
+        "#F06242"
+    ];
+    const idSuffix = String(containerSelector || "alluvial-02-dark")
+        .replace(/[^a-zA-Z0-9_-]/g, "")
+        .slice(0, 24) || "alluvial";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "alluvial-02-dark-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", "#020A13");
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!categoryField || !valueField || !timeField) {
+        return addEmptyState("Missing alluvial comparison fields");
+    }
+
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const shortLabel = (value, maxChars = 18) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        const withoutParen = clean.replace(/\s*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim();
+        if (withoutParen && withoutParen.length <= maxChars) return withoutParen;
+        const words = clean
+            .replace(/\([^)]*\)/g, " ")
+            .split(/[\s/,-]+/)
+            .map(word => word.replace(/[^A-Za-z0-9]+/g, ""))
+            .filter(Boolean);
+        if (words.length > 1) {
+            if (words[0] && words[0].length <= maxChars) return words[0];
+            const meaningful = words.find(word => !/^(coffee|co|inc|ltd|llc|company|group)$/i.test(word));
+            if (meaningful && meaningful.length <= maxChars) return meaningful;
+            const parenthetical = (clean.match(/\(([^)]+)\)/) || [])[1];
+            if (parenthetical) {
+                const compactParen = readableName(parenthetical).replace(/[^A-Za-z0-9]+/g, "");
+                if (compactParen.length >= 2 && compactParen.length <= Math.min(maxChars, 8)) return compactParen;
+            }
+            const compact = words.map(word => word[0]).join("").toUpperCase();
+            if (compact.length >= 2 && compact.length <= maxChars) return compact;
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(1, maxChars - 1)).trim()}.`;
+    };
+
+    const truncateText = (value, maxChars = 60) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 1)).trim()}.`;
+    };
+
+    const appendWrappedText = (selection, text, x, y, maxWidth, fontSize, lineHeight, maxLines) => {
+        const words = readableName(text).split(/\s+/).filter(Boolean);
+        const approxChars = Math.max(10, Math.floor(maxWidth / Math.max(5.2, fontSize * 0.53)));
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (candidate.length <= approxChars || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        const visibleLines = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visibleLines.length) {
+            const last = visibleLines[visibleLines.length - 1];
+            visibleLines[visibleLines.length - 1] = last.length > Math.max(8, approxChars - 3)
+                ? `${last.slice(0, Math.max(8, approxChars - 3)).trim()}...`
+                : `${last}...`;
+        }
+        visibleLines.forEach((line, index) => {
+            selection.append("tspan")
+                .attr("x", x)
+                .attr("dy", index === 0 ? 0 : lineHeight)
+                .text(line);
+        });
+        selection.attr("x", x).attr("y", y);
+    };
+
+    const unit = (valueColumn.unit || "").trim();
+    const unitLine = (() => {
+        const description = String(valueColumn.description || "").toLowerCase();
+        if (unit === "%" && /gdp/.test(description)) return "of GDP";
+        if (unit === "%") return "";
+        if (!unit || unit.length > 12) return "";
+        return unit;
+    })();
+    const formatNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 1000 ? ",.0f" : abs >= 100 ? ",.0f" : abs >= 10 ? ",.1f" : abs >= 1 ? ",.1f" : ",.2f";
+        return d3.format(spec)(abs)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+    const formatLocalValue = value => {
+        const numberValue = Number(value) || 0;
+        const sign = numberValue < 0 ? "-" : "";
+        const number = formatNumber(numberValue);
+        if (!unit) return `${sign}${number}`;
+        if (unit === "%") return `${sign}${number}%`;
+        if (unit.startsWith("$")) return `${sign}${unit[0]}${number}${unit.slice(1)}`;
+        return `${sign}${number} ${unit}`;
+    };
+    const formatMarkValue = value => {
+        const numberValue = Number(value) || 0;
+        const sign = numberValue < 0 ? "-" : "";
+        if (unit === "%") return `${sign}${d3.format(".1f")(Math.abs(numberValue))}%`;
+        const number = formatNumber(numberValue);
+        if (!unit) return `${sign}${number}`;
+        if (unit.startsWith("$")) return `${sign}${unit[0]}${number}${unit.slice(1)}`;
+        if (/million\s+usd/i.test(unit)) return `${sign}${number}m`;
+        if (/billion\s+usd/i.test(unit)) return `${sign}${number}b`;
+        if (unit.length > 7 || /[\/\s]/.test(unit)) return `${sign}${number}`;
+        return `${sign}${number} ${unit}`;
+    };
+
+    const normalizeTime = value => {
+        const raw = String(value ?? "").trim();
+        const numeric = Number(raw);
+        const sortable = Number.isFinite(numeric) ? numeric : Date.parse(raw);
+        return {
+            raw,
+            sortable: Number.isFinite(sortable) ? sortable : raw
+        };
+    };
+    const compareTime = (a, b) => {
+        const ta = normalizeTime(a);
+        const tb = normalizeTime(b);
+        if (typeof ta.sortable === "number" && typeof tb.sortable === "number") return ta.sortable - tb.sortable;
+        return String(a).localeCompare(String(b));
+    };
+
+    const cleanRows = sourceData
+        .map((row, index) => ({
+            category: String(row[categoryField] ?? "").trim(),
+            time: String(row[timeField] ?? "").trim(),
+            value: Number(row[valueField]),
+            sourceIndex: index
+        }))
+        .filter(row => row.category && row.time && Number.isFinite(row.value) && row.value >= 0);
+
+    const timePoints = [...new Set(cleanRows.map(row => row.time))].sort(compareTime);
+    if (timePoints.length !== 2) {
+        return addEmptyState("Alluvial comparison needs exactly two time points");
+    }
+
+    const firstIndex = new Map();
+    cleanRows.forEach(row => {
+        if (!firstIndex.has(row.category)) firstIndex.set(row.category, row.sourceIndex);
+    });
+
+    const byCategory = new Map();
+    cleanRows.forEach(row => {
+        if (!byCategory.has(row.category)) {
+            byCategory.set(row.category, {
+                category: row.category,
+                leftValue: 0,
+                rightValue: 0,
+                leftSourceIndex: -1,
+                rightSourceIndex: -1,
+                firstSourceIndex: firstIndex.get(row.category) ?? row.sourceIndex
+            });
+        }
+        const record = byCategory.get(row.category);
+        if (row.time === timePoints[0]) {
+            record.leftValue += row.value;
+            record.leftSourceIndex = row.sourceIndex;
+        } else if (row.time === timePoints[1]) {
+            record.rightValue += row.value;
+            record.rightSourceIndex = row.sourceIndex;
+        }
+    });
+
+    const categories = [...byCategory.values()]
+        .filter(row => row.leftValue > 0 || row.rightValue > 0)
+        .sort((a, b) => b.leftValue - a.leftValue || b.rightValue - a.rightValue || a.firstSourceIndex - b.firstSourceIndex)
+        .map((row, index) => ({ ...row, rank: index + 1 }));
+
+    if (!categories.length) {
+        return addEmptyState("No alluvial comparison values");
+    }
+
+    const getColor = (category, index) => palette[index % palette.length];
+    const getIcon = category => images.field?.[category] || images.fields?.[category] || null;
+    const safeColor = color => d3.color(color) || d3.color("#2C8FD5");
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("radialGradient")
+        .attr("id", `alluvial-02-dark-bg-${idSuffix}`)
+        .attr("cx", "50%")
+        .attr("cy", "42%")
+        .attr("r", "84%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#0A263E");
+    bgGradient.append("stop").attr("offset", "58%").attr("stop-color", "#041524");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#010812");
+
+    const shadow = defs.append("filter")
+        .attr("id", `alluvial-02-dark-shadow-${idSuffix}`)
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#000000")
+        .attr("flood-opacity", 0.38);
+
+    const glow = defs.append("filter")
+        .attr("id", `alluvial-02-dark-glow-${idSuffix}`)
+        .attr("x", "-20%")
+        .attr("y", "-40%")
+        .attr("width", "140%")
+        .attr("height", "180%");
+    glow.append("feGaussianBlur").attr("stdDeviation", 3).attr("result", "blur");
+    const glowMerge = glow.append("feMerge");
+    glowMerge.append("feMergeNode").attr("in", "blur");
+    glowMerge.append("feMergeNode").attr("in", "SourceGraphic");
+
+    const root = svg.append("g").attr("class", "alluvial-02-dark-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("rx", 0)
+        .attr("fill", `url(#alluvial-02-dark-bg-${idSuffix})`);
+
+    const plotTop = Math.max(86, height * 0.145);
+    const plotBottom = height - Math.max(32, height * 0.075);
+    const plotH = Math.max(270, plotBottom - plotTop);
+    const rowPitch = plotH / categories.length;
+    const rowCardH = Math.max(48, Math.min(92, rowPitch * 0.92));
+    const leftIconX = Math.max(54, width * 0.11);
+    const leftFlowX = Math.max(104, width * 0.19);
+    const rightFlowX = Math.min(width - 76, width * 0.835);
+    const rightIconX = Math.min(width - 48, width * 0.92);
+    const leftValueX = leftFlowX + Math.max(10, width * 0.018);
+    const rightValueX = rightFlowX - Math.max(11, width * 0.025);
+    const nodeW = Math.max(4.5, width * 0.009);
+    const maxValue = Math.max(1, d3.max(categories, d => Math.max(d.leftValue, d.rightValue)) || 1);
+    const maxBandH = Math.max(34, Math.min(rowCardH * 0.94, 86));
+    const minBandH = Math.max(13, Math.min(24, rowCardH * 0.30));
+    const bandHeight = value => value <= 0 ? 0 : Math.max(minBandH, Math.sqrt(value / maxValue) * maxBandH);
+
+    const addTimeLabel = (x, y, label, className) => {
+        const group = root.append("g")
+            .attr("class", `time-label-group ${className}`)
+            .attr("transform", `translate(${x}, ${y})`);
+        group.append("text")
+            .attr("class", "time-label chart-text")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("text-anchor", "middle")
+            .attr("fill", accentBlue)
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${Math.max(17, width * 0.035)}px`)
+            .style("font-weight", "900")
+            .style("letter-spacing", "0px")
+            .text(label);
+        group.append("line")
+            .attr("class", "time-label-rule")
+            .attr("x1", -32)
+            .attr("x2", 32)
+            .attr("y1", 8)
+            .attr("y2", 8)
+            .attr("stroke", accentBlue)
+            .attr("stroke-width", 1)
+            .attr("stroke-opacity", 0.35);
+        return group;
+    };
+    addTimeLabel(leftFlowX + Math.max(22, width * 0.045), plotTop - 10, timePoints[0], "time-label-left");
+    addTimeLabel(rightFlowX - Math.max(22, width * 0.045), plotTop - 10, timePoints[1], "time-label-right");
+
+    const addIconSlot = (group, cx, cy, r, className, fill, glyph, href) => {
+        const slot = group.append("g")
+            .attr("class", className)
+            .attr("data-asset-slot", className.includes("right") ? "category_icon_right" : "category_icon_left")
+            .attr("data-slot-anchor", "row-centerline")
+            .attr("data-slot-collision-rule", "keep inside row card and outside value labels");
+        slot.append("circle")
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .attr("r", r)
+            .attr("fill", "#F4EFE4")
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 1)
+            .attr("filter", `url(#alluvial-02-dark-shadow-${idSuffix})`);
+        if (href) {
+            slot.append("image")
+                .attr("x", cx - r + 3)
+                .attr("y", cy - r + 3)
+                .attr("width", (r - 3) * 2)
+                .attr("height", (r - 3) * 2)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("href", href);
+        } else {
+            slot.append("circle")
+                .attr("cx", cx)
+                .attr("cy", cy)
+                .attr("r", r - 4)
+                .attr("fill", fill);
+            slot.append("text")
+                .attr("x", cx)
+                .attr("y", cy + 1)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#FFFFFF")
+                .style("font-family", titleFontFamily)
+                .style("font-size", `${Math.max(9, r * 0.70)}px`)
+                .style("font-weight", "900")
+                .text(glyph);
+        }
+        return slot;
+    };
+
+    const rows = root.append("g")
+        .attr("class", "comparison-flow-rows");
+
+    categories.forEach((row, index) => {
+        const color = getColor(row.category, index);
+        const colorObj = safeColor(color);
+        const centerY = plotTop + rowPitch * (index + 0.5);
+        const leftH = bandHeight(row.leftValue);
+        const rightH = bandHeight(row.rightValue);
+        const leftTop = centerY - leftH / 2;
+        const leftBottom = centerY + leftH / 2;
+        const rightTop = centerY - rightH / 2;
+        const rightBottom = centerY + rightH / 2;
+        const plateauLeftX = leftFlowX + (rightFlowX - leftFlowX) * 0.34;
+        const plateauRightX = leftFlowX + (rightFlowX - leftFlowX) * 0.68;
+        const midX1 = leftFlowX + (rightFlowX - leftFlowX) * 0.46;
+        const midX2 = leftFlowX + (rightFlowX - leftFlowX) * 0.56;
+        const neckH = Math.max(8, Math.min(leftH, rightH) * 0.92);
+        const path = [
+            `M ${leftFlowX} ${leftTop}`,
+            `L ${plateauLeftX} ${leftTop}`,
+            `C ${midX1} ${leftTop}, ${midX2} ${centerY - neckH / 2}, ${plateauRightX} ${rightTop}`,
+            `L ${rightFlowX} ${rightTop}`,
+            `L ${rightFlowX} ${rightBottom}`,
+            `L ${plateauRightX} ${rightBottom}`,
+            `C ${midX2} ${centerY + neckH / 2}, ${midX1} ${leftBottom}, ${plateauLeftX} ${leftBottom}`,
+            `L ${leftFlowX} ${leftBottom}`,
+            "Z"
+        ].join(" ");
+        const gradientId = `alluvial-02-dark-gradient-${idSuffix}-${index}`;
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("x1", leftFlowX)
+            .attr("x2", rightFlowX)
+            .attr("y1", centerY)
+            .attr("y2", centerY);
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", color).attr("stop-opacity", 0.97);
+        gradient.append("stop").attr("offset", "62%").attr("stop-color", chartUtils.color.variant(colorObj, { mode: "brighter", amount: 0.45 })).attr("stop-opacity", 0.88);
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", chartUtils.color.variant(colorObj, { mode: "darker", amount: 0.08 })).attr("stop-opacity", 0.95);
+
+        const group = rows.append("g")
+            .attr("class", "category-row")
+            .attr("data-category", row.category)
+            .attr("data-left-time", timePoints[0])
+            .attr("data-right-time", timePoints[1])
+            .attr("data-left-value", row.leftValue)
+            .attr("data-right-value", row.rightValue)
+            .attr("data-left-source-index", row.leftSourceIndex)
+            .attr("data-right-source-index", row.rightSourceIndex)
+            .attr("data-rank", row.rank);
+
+        group.append("rect")
+            .attr("class", "row-card-background")
+            .attr("x", Math.max(26, width * 0.055))
+            .attr("y", centerY - rowCardH / 2)
+            .attr("width", width - Math.max(26, width * 0.055) * 2)
+            .attr("height", rowCardH)
+            .attr("rx", 9)
+            .attr("fill", cardFill)
+            .attr("fill-opacity", 0.78)
+            .attr("stroke", "#123354")
+            .attr("stroke-opacity", 0.55)
+            .attr("filter", `url(#alluvial-02-dark-shadow-${idSuffix})`);
+
+        const iconR = Math.max(14, Math.min(27, rowCardH * 0.32));
+        const iconY = centerY - Math.min(7, rowCardH * 0.08);
+        const iconHref = getIcon(row.category);
+        addIconSlot(group, leftIconX, iconY, iconR, "category-icon-slot category-icon-slot-left decorative-icon-slot", color, shortLabel(row.category, 1).slice(0, 1), iconHref);
+        group.append("text")
+            .attr("class", "category-label chart-text")
+            .attr("x", leftIconX)
+            .attr("y", iconY + iconR + Math.max(9, rowCardH * 0.15))
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${Math.max(9, Math.min(15, rowCardH * 0.22))}px`)
+            .style("font-weight", "900")
+            .text(shortLabel(row.category, categories.length > 6 ? 11 : 14));
+
+        group.append("path")
+            .attr("class", "alluvial-ribbon data-link")
+            .attr("d", path)
+            .attr("fill", `url(#${gradientId})`)
+            .attr("stroke", chartUtils.color.variant(colorObj, { mode: "brighter", amount: 0.8 }))
+            .attr("stroke-opacity", 0.26)
+            .attr("stroke-width", 0.8)
+            .attr("filter", `url(#alluvial-02-dark-shadow-${idSuffix})`)
+            .attr("data-category", row.category)
+            .attr("data-left-value", row.leftValue)
+            .attr("data-right-value", row.rightValue);
+
+        group.append("rect")
+            .attr("class", "left-node-bar")
+            .attr("x", leftFlowX - nodeW)
+            .attr("y", leftTop)
+            .attr("width", nodeW)
+            .attr("height", Math.max(2, leftH))
+            .attr("rx", 2.5)
+            .attr("fill", chartUtils.color.variant(colorObj, { mode: "brighter", amount: 0.45 }))
+            .attr("data-category", row.category)
+            .attr("data-value", row.leftValue)
+            .attr("data-time", timePoints[0]);
+
+        group.append("rect")
+            .attr("class", "right-node-bar")
+            .attr("x", rightFlowX)
+            .attr("y", rightTop)
+            .attr("width", nodeW)
+            .attr("height", Math.max(2, rightH))
+            .attr("rx", 2.5)
+            .attr("fill", chartUtils.color.variant(colorObj, { mode: "brighter", amount: 0.28 }))
+            .attr("data-category", row.category)
+            .attr("data-value", row.rightValue)
+            .attr("data-time", timePoints[1]);
+
+        const valueFont = Math.max(14, Math.min(27, rowCardH * 0.36));
+        const unitFont = Math.max(8, Math.min(15, rowCardH * 0.18));
+        const valueBoxH = Math.max(31, Math.min(48, rowCardH * 0.54));
+        const leftBoxW = Math.max(68, Math.min(118, width * 0.17));
+        const rightBoxW = Math.max(58, Math.min(98, width * 0.145));
+        group.append("rect")
+            .attr("class", "left-value-box")
+            .attr("x", leftValueX - 4)
+            .attr("y", centerY - valueBoxH / 2)
+            .attr("width", leftBoxW)
+            .attr("height", valueBoxH)
+            .attr("rx", 6)
+            .attr("fill", "#000000")
+            .attr("fill-opacity", 0)
+            .attr("data-category", row.category)
+            .attr("data-value", row.leftValue)
+            .attr("data-time", timePoints[0]);
+        group.append("rect")
+            .attr("class", "right-value-box")
+            .attr("x", rightValueX - rightBoxW + 4)
+            .attr("y", centerY - valueBoxH / 2)
+            .attr("width", rightBoxW)
+            .attr("height", valueBoxH)
+            .attr("rx", 6)
+            .attr("fill", "#000000")
+            .attr("fill-opacity", 0)
+            .attr("data-category", row.category)
+            .attr("data-value", row.rightValue)
+            .attr("data-time", timePoints[1]);
+        group.append("text")
+            .attr("class", "left-value-label chart-text")
+            .attr("x", leftValueX)
+            .attr("y", centerY - (unitLine ? Math.max(7, unitFont * 0.55) : 0))
+            .attr("fill", "#FFFFFF")
+            .attr("text-anchor", "start")
+            .attr("paint-order", "stroke")
+            .attr("stroke", "rgba(0,0,0,0.38)")
+            .attr("stroke-width", 2.2)
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${valueFont}px`)
+            .style("font-weight", "900")
+            .style("dominant-baseline", "middle")
+            .text(formatMarkValue(row.leftValue));
+        if (unitLine) {
+            group.append("text")
+                .attr("class", "left-value-unit chart-text")
+                .attr("x", leftValueX + 1)
+                .attr("y", centerY + Math.max(13, valueFont * 0.62))
+                .attr("fill", "#FFFFFF")
+                .attr("fill-opacity", 0.92)
+                .attr("text-anchor", "start")
+                .attr("paint-order", "stroke")
+                .attr("stroke", "rgba(0,0,0,0.34)")
+                .attr("stroke-width", 1.5)
+                .style("font-family", fontFamily)
+                .style("font-size", `${unitFont}px`)
+                .style("font-weight", "500")
+                .text(unitLine);
+        }
+
+        group.append("text")
+            .attr("class", "right-value-label chart-text")
+            .attr("x", rightValueX)
+            .attr("y", centerY - (unitLine ? Math.max(7, unitFont * 0.55) : 0))
+            .attr("fill", "#FFFFFF")
+            .attr("text-anchor", "end")
+            .attr("paint-order", "stroke")
+            .attr("stroke", "rgba(0,0,0,0.38)")
+            .attr("stroke-width", 2.2)
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${valueFont}px`)
+            .style("font-weight", "900")
+            .style("dominant-baseline", "middle")
+            .text(formatMarkValue(row.rightValue));
+        if (unitLine) {
+            group.append("text")
+                .attr("class", "right-value-unit chart-text")
+                .attr("x", rightValueX - 1)
+                .attr("y", centerY + Math.max(13, valueFont * 0.62))
+                .attr("fill", "#FFFFFF")
+                .attr("fill-opacity", 0.92)
+                .attr("text-anchor", "end")
+                .attr("paint-order", "stroke")
+                .attr("stroke", "rgba(0,0,0,0.34)")
+                .attr("stroke-width", 1.5)
+                .style("font-family", fontFamily)
+                .style("font-size", `${unitFont}px`)
+                .style("font-weight", "500")
+                .text(unitLine);
+        }
+
+        addIconSlot(group, rightIconX, iconY, iconR * 0.92, "category-icon-slot category-icon-slot-right decorative-icon-slot", color, shortLabel(row.category, 1).slice(0, 1), iconHref);
+    });
+
+    return svg.node();
+}