Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type69_alluvial_diagram/alluvial_diagram_plain_chart_01.js

@@ -0,0 +1,760 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Alluvial Diagram",
+    "chart_name": "alluvial_diagram_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"], ["categorical", "temporal"]],
+    "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 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 variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    const images = jsonData.images || {};
+
+    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(520, 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 primaryColor = sourceColors.other?.primary || "#19A996";
+    const secondaryColor = sourceColors.other?.secondary || "#2D7ED4";
+    const textColor = sourceColors.text_color || "#17324A";
+    const mutedText = "#607284";
+    const panelStroke = "#CDE6F0";
+    const softBlue = "#EAF7FB";
+    const idSuffix = String(containerSelector || "alluvial-plain-01")
+        .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-plain-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", "#F7FCFF");
+        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 = 24) => {
+        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(8, Math.floor(maxWidth / Math.max(5, fontSize * 0.52)));
+        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 visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            const last = visible[visible.length - 1];
+            visible[visible.length - 1] = last.length > Math.max(7, approxChars - 3)
+                ? `${last.slice(0, Math.max(7, approxChars - 3)).trim()}...`
+                : `${last}...`;
+        }
+        visible.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 = String(valueColumn.unit || "").trim();
+    const formatNumber = value => {
+        const abs = Math.abs(Number(value) || 0);
+        const spec = abs >= 1000000 ? ",.1f" : 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);
+        const lowerUnit = unit.toLowerCase();
+        if (!unit) return `${sign}${number}`;
+        if (unit === "%") return `${sign}${number}%`;
+        if (unit === "$") return `${sign}$${number}`;
+        if (lowerUnit === "usd") return `${sign}$${number}`;
+        if (unit.startsWith("$")) return `${sign}$${number}${unit.slice(1)}`;
+        return `${sign}${number} ${unit}`;
+    };
+    const formatValueCompact = value => {
+        const numberValue = Number(value) || 0;
+        const abs = Math.abs(numberValue);
+        const sign = numberValue < 0 ? "-" : "";
+        const lowerUnit = unit.toLowerCase();
+        if (unit === "%") return formatLocalValue(value);
+        const compactNumber = (() => {
+            if (abs >= 1000000000) return `${d3.format(".1f")(abs / 1000000000).replace(/\.0$/, "")}B`;
+            if (abs >= 1000000) return `${d3.format(".1f")(abs / 1000000).replace(/\.0$/, "")}M`;
+            if (abs >= 1000) return `${d3.format(".1f")(abs / 1000).replace(/\.0$/, "")}K`;
+            return formatNumber(abs);
+        })();
+        if (!unit) return `${sign}${compactNumber}`;
+        if (unit === "$" || lowerUnit === "usd") return `${sign}$${compactNumber}`;
+        if (unit.startsWith("$")) return `${sign}$${compactNumber}${unit.slice(1)}`;
+        return `${sign}${compactNumber} ${unit}`;
+    };
+
+    const rawRows = chartData
+        .map((row, index) => ({
+            source: String(row[sourceField] ?? "").trim(),
+            target: String(row[targetField] ?? "").trim(),
+            value: Number(row[valueField]),
+            sourceIndex: index
+        }))
+        .filter(row => row.source && row.target && Number.isFinite(row.value) && row.value >= 0);
+
+    if (!rawRows.length) {
+        return addEmptyState("No alluvial values");
+    }
+
+    const linkMap = new Map();
+    rawRows.forEach(row => {
+        const key = `${row.source}\u0000${row.target}`;
+        if (!linkMap.has(key)) {
+            linkMap.set(key, {
+                source: row.source,
+                target: row.target,
+                value: 0,
+                firstSourceIndex: row.sourceIndex
+            });
+        }
+        const record = linkMap.get(key);
+        record.value += row.value;
+        record.firstSourceIndex = Math.min(record.firstSourceIndex, row.sourceIndex);
+    });
+
+    const links = [...linkMap.values()].filter(link => link.value > 0);
+    const sourceTotals = new Map();
+    const targetTotals = new Map();
+    const firstSourceIndex = new Map();
+    const firstTargetIndex = new Map();
+    rawRows.forEach(row => {
+        sourceTotals.set(row.source, (sourceTotals.get(row.source) || 0) + row.value);
+        targetTotals.set(row.target, (targetTotals.get(row.target) || 0) + row.value);
+        if (!firstSourceIndex.has(row.source)) firstSourceIndex.set(row.source, row.sourceIndex);
+        if (!firstTargetIndex.has(row.target)) firstTargetIndex.set(row.target, row.sourceIndex);
+    });
+
+    const sourceNames = [...sourceTotals.keys()]
+        .sort((a, b) => sourceTotals.get(b) - sourceTotals.get(a) || firstSourceIndex.get(a) - firstSourceIndex.get(b));
+    const targetNames = [...targetTotals.keys()]
+        .sort((a, b) => targetTotals.get(b) - targetTotals.get(a) || firstTargetIndex.get(a) - firstTargetIndex.get(b));
+
+    const fieldColors = sourceColors.field || {};
+    const palette = [
+        primaryColor,
+        secondaryColor,
+        "#22B7A6",
+        "#5AA8E8",
+        "#F5B542",
+        "#8267E8",
+        "#F06F8F",
+        "#5DBB63",
+        "#F1844B",
+        "#2F6BAE"
+    ];
+    const safeColor = color => d3.color(color) || d3.color("#2D7ED4");
+    const targetColor = target => {
+        const index = Math.max(0, targetNames.indexOf(target));
+        return fieldColors[target] || palette[(index + 1) % palette.length] || secondaryColor;
+    };
+    const sourceColor = source => {
+        const index = Math.max(0, sourceNames.indexOf(source));
+        return fieldColors[source] || d3.interpolateRgb(primaryColor, "#7DDDCB")(sourceNames.length <= 1 ? 0.25 : index / Math.max(1, sourceNames.length - 1));
+    };
+    const targetIcon = target => images.field?.[target] || images.fields?.[target] || null;
+
+    const panelX = Math.max(22, width * 0.045);
+    const panelY = Math.max(18, height * 0.035);
+    const panelW = width - panelX * 2;
+    const panelH = height - panelY * 2;
+    const flowTop = panelY + Math.max(82, panelH * 0.145);
+    const flowBottom = panelY + panelH - Math.max(30, panelH * 0.055);
+    const nodeW = Math.max(8, Math.min(16, width * 0.02));
+    const sourceNodeX = panelX + panelW * 0.275;
+    const targetNodeX = panelX + panelW * 0.685;
+    const sourceIconX = panelX + panelW * 0.04;
+    const sourceLabelX = sourceNodeX - Math.max(18, panelW * 0.035);
+    const targetCardX = targetNodeX + nodeW - 1;
+    const targetCardW = Math.max(98, panelX + panelW - targetCardX - Math.max(14, panelW * 0.025));
+    const flowH = Math.max(120, flowBottom - flowTop);
+    const nodePadding = Math.max(5, Math.min(13, flowH / Math.max(sourceNames.length, targetNames.length, 1) * 0.15));
+
+    const nodes = [
+        ...sourceNames.map((name, index) => ({
+            id: `source:${name}`,
+            name,
+            side: "source",
+            value: sourceTotals.get(name),
+            order: index
+        })),
+        ...targetNames.map((name, index) => ({
+            id: `target:${name}`,
+            name,
+            side: "target",
+            value: targetTotals.get(name),
+            order: index
+        }))
+    ];
+    const sankeyLinks = links.map(link => ({
+        source: `source:${link.source}`,
+        target: `target:${link.target}`,
+        value: link.value,
+        sourceName: link.source,
+        targetName: link.target
+    }));
+
+    const sankey = d3.sankey()
+        .nodeId(d => d.id)
+        .nodeWidth(nodeW)
+        .nodePadding(nodePadding)
+        .extent([[sourceNodeX, flowTop], [targetNodeX + nodeW, flowBottom]])
+        .nodeSort((a, b) => b.value - a.value || a.order - b.order);
+
+    let graph;
+    try {
+        graph = sankey({
+            nodes: nodes.map(node => ({ ...node })),
+            links: sankeyLinks.map(link => ({ ...link }))
+        });
+    } catch (error) {
+        return addEmptyState("Unable to render alluvial links");
+    }
+
+    const renderedSources = graph.nodes.filter(node => node.side === "source").sort((a, b) => a.y0 - b.y0);
+    const renderedTargets = graph.nodes.filter(node => node.side === "target").sort((a, b) => a.y0 - b.y0);
+
+    const distributeLabelY = (items, top, bottom, desiredGap) => {
+        if (!items.length) return new Map();
+        const gap = Math.min(desiredGap, items.length > 1 ? (bottom - top) / (items.length - 1) : desiredGap);
+        const positions = items.map(item => ({
+            id: item.id,
+            y: Math.max(top, Math.min(bottom, (item.y0 + item.y1) / 2))
+        }));
+        positions.forEach((item, index) => {
+            const minY = index === 0 ? top : positions[index - 1].y + gap;
+            if (item.y < minY) item.y = minY;
+        });
+        const overflow = positions[positions.length - 1].y - bottom;
+        if (overflow > 0) {
+            positions.forEach(item => { item.y -= overflow; });
+            positions.forEach((item, index) => {
+                const minY = index === 0 ? top : positions[index - 1].y + gap;
+                if (item.y < minY) item.y = minY;
+            });
+        }
+        return new Map(positions.map(item => [item.id, item.y]));
+    };
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", `alluvial-plain-bg-${idSuffix}`)
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#FFFFFF");
+    bgGradient.append("stop").attr("offset", "55%").attr("stop-color", "#F6FCFE");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#EAF7FB");
+
+    const shadow = defs.append("filter")
+        .attr("id", `alluvial-plain-shadow-${idSuffix}`)
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 5)
+        .attr("stdDeviation", 7)
+        .attr("flood-color", "#5C8FA5")
+        .attr("flood-opacity", 0.18);
+
+    const softShadow = defs.append("filter")
+        .attr("id", `alluvial-plain-soft-shadow-${idSuffix}`)
+        .attr("x", "-15%")
+        .attr("y", "-15%")
+        .attr("width", "130%")
+        .attr("height", "130%");
+    softShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 3)
+        .attr("flood-color", "#6B9DB3")
+        .attr("flood-opacity", 0.18);
+
+    graph.links.forEach((link, index) => {
+        const source = sourceColor(link.source.name);
+        const target = targetColor(link.target.name);
+        const gradient = defs.append("linearGradient")
+            .attr("id", `alluvial-plain-link-${idSuffix}-${index}`)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("x1", link.source.x1)
+            .attr("x2", link.target.x0)
+            .attr("y1", link.y0)
+            .attr("y2", link.y1);
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", source).attr("stop-opacity", 0.80);
+        gradient.append("stop").attr("offset", "52%").attr("stop-color", "#8FE3DF").attr("stop-opacity", 0.56);
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", target).attr("stop-opacity", 0.78);
+        link.gradientId = `alluvial-plain-link-${idSuffix}-${index}`;
+    });
+
+    const root = svg.append("g").attr("class", "alluvial-plain-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "#F7FCFF");
+    root.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", 18)
+        .attr("fill", `url(#alluvial-plain-bg-${idSuffix})`)
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1.2)
+        .attr("filter", `url(#alluvial-plain-shadow-${idSuffix})`);
+
+    const addPill = (x, y, w, label, fill, className) => {
+        const group = root.append("g")
+            .attr("class", `field-header ${className}`)
+            .attr("transform", `translate(${x}, ${y})`);
+        group.append("rect")
+            .attr("width", w)
+            .attr("height", 24)
+            .attr("rx", 7)
+            .attr("fill", fill);
+        group.append("text")
+            .attr("class", "field-header-label chart-text")
+            .attr("x", w / 2)
+            .attr("y", 16.5)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#FFFFFF")
+            .style("font-family", titleFontFamily)
+            .style("font-size", "12px")
+            .style("font-weight", "900")
+            .style("letter-spacing", "0px")
+            .text(shortLabel(label, 18).toUpperCase());
+        return group;
+    };
+    addPill(panelX + panelW * 0.055, panelY + 22, 94, sourceColumn.label || sourceField, primaryColor, "source-field-header");
+    addPill(targetCardX + Math.max(0, (targetCardW - 94) / 2), panelY + 22, 94, targetColumn.label || targetField, secondaryColor, "target-field-header");
+
+    root.append("line")
+        .attr("class", "top-decoration-rule decorative-line")
+        .attr("x1", panelX + panelW * 0.30)
+        .attr("x2", panelX + panelW * 0.54)
+        .attr("y1", panelY + 35)
+        .attr("y2", panelY + 35)
+        .attr("stroke", "#B9DCE8")
+        .attr("stroke-width", 1.1);
+    root.append("circle")
+        .attr("class", "top-decoration-dot decorative-icon-slot")
+        .attr("cx", panelX + panelW * 0.57)
+        .attr("cy", panelY + 35)
+        .attr("r", 4)
+        .attr("fill", primaryColor)
+        .attr("fill-opacity", 0.75);
+
+    root.append("g")
+        .attr("class", "flow-links")
+        .selectAll("path")
+        .data(graph.links)
+        .enter()
+        .append("path")
+        .attr("class", "alluvial-ribbon data-link")
+        .attr("d", d3.sankeyLinkHorizontal())
+        .attr("fill", "none")
+        .attr("stroke", d => `url(#${d.gradientId})`)
+        .attr("stroke-width", d => Math.max(1.2, d.width))
+        .attr("stroke-linecap", "round")
+        .attr("stroke-opacity", 0.83)
+        .attr("data-source", d => d.source.name)
+        .attr("data-target", d => d.target.name)
+        .attr("data-value", d => d.value);
+
+    const addIconSlot = (group, cx, cy, r, className, fill, glyph, href) => {
+        const slot = group.append("g")
+            .attr("class", className)
+            .attr("data-asset-slot", className.includes("target") ? "target_city_icon" : "source_icon")
+            .attr("data-slot-anchor", className.includes("target") ? "target-card-centerline" : "source-row-centerline")
+            .attr("data-slot-collision-rule", "stay inside owning row/card and avoid text labels");
+        slot.append("circle")
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .attr("r", r)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", fill)
+            .attr("stroke-width", 1.4)
+            .attr("filter", `url(#alluvial-plain-soft-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)
+                .attr("fill-opacity", 0.95);
+            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.68)}px`)
+                .style("font-weight", "900")
+                .text(glyph);
+        }
+        return slot;
+    };
+
+    const sourceGroup = root.append("g").attr("class", "source-node-list");
+    const sourceCenterYs = renderedSources.map(node => (node.y0 + node.y1) / 2).sort((a, b) => a - b);
+    const minSourceCenterGap = sourceCenterYs.length > 1
+        ? d3.min(d3.pairs(sourceCenterYs), pair => pair[1] - pair[0])
+        : flowH;
+    const compactSourceRows = renderedSources.length >= 7 || minSourceCenterGap < 28;
+    const sourceLabelY = distributeLabelY(
+        renderedSources,
+        flowTop + (compactSourceRows ? 16 : 8),
+        flowBottom - (compactSourceRows ? 11 : 8),
+        compactSourceRows ? 29 : 25
+    );
+    renderedSources.forEach((node, index) => {
+        const centerY = (node.y0 + node.y1) / 2;
+        const labelY = sourceLabelY.get(node.id) || centerY;
+        const color = safeColor(sourceColor(node.name));
+        const group = sourceGroup.append("g")
+            .attr("class", "source-row")
+            .attr("data-source", node.name)
+            .attr("data-value", node.value)
+            .attr("data-rank", index + 1);
+        const compactValue = formatValueCompact(node.value);
+        const sourceCardX = panelX + Math.max(10, panelW * 0.018);
+        const sourceCardW = Math.max(54, node.x0 - sourceCardX - Math.max(6, panelW * 0.012));
+        const sourceCardH = compactSourceRows
+            ? Math.max(20, Math.min(27, (node.y1 - node.y0) + 8))
+            : Math.max(34, Math.min(48, (node.y1 - node.y0) + 14));
+        group.append("rect")
+            .attr("class", "source-label-card")
+            .attr("x", sourceCardX)
+            .attr("y", labelY - sourceCardH / 2)
+            .attr("width", sourceCardW)
+            .attr("height", sourceCardH)
+            .attr("rx", 7)
+            .attr("fill", "#FFFFFF")
+            .attr("fill-opacity", compactSourceRows ? 0.92 : 0.96)
+            .attr("stroke", "#D5ECF4")
+            .attr("stroke-width", 0.8)
+            .attr("filter", `url(#alluvial-plain-soft-shadow-${idSuffix})`);
+        if (!compactSourceRows) {
+            addIconSlot(
+                group,
+                sourceIconX,
+                labelY,
+                Math.max(10, Math.min(17, (node.y1 - node.y0) * 0.28 + 6)),
+                "source-icon-slot decorative-icon-slot",
+                color.formatHex(),
+                shortLabel(node.name, 1).slice(0, 1).toUpperCase(),
+                null
+            );
+        } else {
+            group.append("rect")
+                .attr("class", "source-compact-accent")
+                .attr("x", sourceCardX)
+                .attr("y", labelY - sourceCardH / 2)
+                .attr("width", 4)
+                .attr("height", sourceCardH)
+                .attr("rx", 2)
+                .attr("fill", color.formatHex())
+                .attr("fill-opacity", 0.86);
+        }
+        if (Math.abs(labelY - centerY) > 3) {
+            group.append("line")
+                .attr("class", "source-label-connector decorative-line")
+                .attr("x1", sourceLabelX + 5)
+                .attr("x2", node.x0 - 5)
+                .attr("y1", labelY)
+                .attr("y2", centerY)
+                .attr("stroke", chartUtils.color.variant(color, { mode: "brighter", amount: 0.8 }))
+                .attr("stroke-width", 0.8)
+                .attr("stroke-opacity", 0.42);
+        }
+        group.append("rect")
+            .attr("class", "source-node-bar")
+            .attr("x", node.x0)
+            .attr("y", node.y0)
+            .attr("width", node.x1 - node.x0)
+            .attr("height", Math.max(2, node.y1 - node.y0))
+            .attr("rx", 3)
+            .attr("fill", chartUtils.color.variant(color, { mode: "brighter", amount: 0.35 }))
+            .attr("data-source", node.name)
+            .attr("data-value", node.value);
+        const compactTextX = sourceCardX + sourceCardW / 2;
+        const compactAvailableChars = Math.max(8, Math.floor((sourceCardW - 12) / 6.4));
+        const compactNameChars = Math.max(3, Math.min(11, compactAvailableChars - compactValue.length - 3));
+        const label = group.append("text")
+            .attr("class", "source-label chart-text")
+            .attr("x", compactSourceRows ? compactTextX : sourceLabelX)
+            .attr("y", compactSourceRows ? labelY - 2 : labelY - 2)
+            .attr("text-anchor", compactSourceRows ? "middle" : "end")
+            .attr("fill", chartUtils.color.variant(color, { mode: "darker", amount: 0.8 }))
+            .style("font-family", titleFontFamily)
+            .style("font-weight", "900")
+            .style("font-size", compactSourceRows ? "11px" : "13px")
+            .style("letter-spacing", "0px");
+        if (compactSourceRows) {
+            label.append("tspan")
+                .attr("x", compactTextX)
+                .attr("dy", 0)
+                .text(truncateText(node.name, Math.max(6, compactNameChars)));
+            label.append("tspan")
+                .attr("x", compactTextX)
+                .attr("dy", 11)
+                .style("font-size", "9px")
+                .style("font-weight", "800")
+                .text(compactValue);
+        } else {
+            label.append("tspan")
+                .attr("x", sourceLabelX)
+                .attr("dy", 0)
+                .text(shortLabel(node.name, 14));
+            label.append("tspan")
+                .attr("x", sourceLabelX)
+                .attr("dy", 14)
+                .attr("fill", mutedText)
+                .style("font-weight", "700")
+                .text(`(${formatLocalValue(node.value)})`);
+        }
+    });
+
+    const layoutTargetCards = targetNodes => {
+        const cards = targetNodes.map(node => {
+            return {
+                node,
+                h: Math.max(42, node.y1 - node.y0),
+                y: node.y0
+            };
+        });
+        return cards;
+    };
+
+    const targetCards = layoutTargetCards(renderedTargets);
+    const targetGroup = root.append("g").attr("class", "target-card-list");
+    targetCards.forEach(({ node, y, h }, index) => {
+        const color = safeColor(targetColor(node.name));
+        const centerY = (node.y0 + node.y1) / 2;
+        const group = targetGroup.append("g")
+            .attr("class", "target-card")
+            .attr("data-target", node.name)
+            .attr("data-value", node.value)
+            .attr("data-rank", index + 1);
+        group.append("rect")
+            .attr("class", "target-node-bar")
+            .attr("x", node.x0)
+            .attr("y", node.y0)
+            .attr("width", node.x1 - node.x0)
+            .attr("height", Math.max(2, node.y1 - node.y0))
+            .attr("rx", 4)
+            .attr("fill", color.formatHex())
+            .attr("data-target", node.name)
+            .attr("data-value", node.value);
+        group.append("rect")
+            .attr("class", "target-card-background")
+            .attr("x", targetCardX)
+            .attr("y", y)
+            .attr("width", targetCardW)
+            .attr("height", h)
+            .attr("rx", 7)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", chartUtils.color.variant(color, { mode: "brighter", amount: 0.8 }))
+            .attr("stroke-width", 1.1)
+            .attr("filter", `url(#alluvial-plain-soft-shadow-${idSuffix})`);
+        group.append("rect")
+            .attr("class", "target-card-color-rail")
+            .attr("x", targetCardX)
+            .attr("y", y)
+            .attr("width", 7)
+            .attr("height", h)
+            .attr("rx", 3.5)
+            .attr("fill", color.formatHex());
+        const targetCenterX = targetCardX + targetCardW / 2;
+        const prominentTargetCard = targetNames.length <= 2 && h >= 95;
+        const targetIconR = prominentTargetCard
+            ? Math.max(20, Math.min(34, h * 0.15))
+            : Math.max(15, Math.min(24, h * 0.25));
+        addIconSlot(
+            group,
+            prominentTargetCard ? targetCenterX : targetCardX + 29,
+            prominentTargetCard ? y + h * 0.27 : y + h / 2,
+            targetIconR,
+            "target-icon-slot decorative-icon-slot",
+            color.formatHex(),
+            shortLabel(node.name, 1).slice(0, 1).toUpperCase(),
+            targetIcon(node.name)
+        );
+        const title = group.append("text")
+            .attr("class", "target-label chart-text")
+            .attr("fill", chartUtils.color.variant(color, { mode: "darker", amount: 0.7 }))
+            .style("font-family", titleFontFamily)
+            .style("font-size", prominentTargetCard ? "24px" : "12px")
+            .style("font-weight", "900")
+            .style("letter-spacing", "0px");
+        if (prominentTargetCard) {
+            title.attr("x", targetCenterX)
+                .attr("y", y + h * 0.55)
+                .attr("text-anchor", "middle")
+                .text(shortLabel(node.name, 16).toUpperCase());
+        } else {
+            appendWrappedText(
+                title,
+                node.name,
+                targetCardX + 58,
+                y + Math.max(20, h * 0.36),
+                targetCardW - 70,
+                12,
+                13,
+                2
+            );
+        }
+        const targetValue = formatLocalValue(node.value);
+        const targetValueFont = Math.max(
+            prominentTargetCard ? 26 : 10,
+            Math.min(
+                prominentTargetCard ? 36 : 13,
+                (targetCardW - 74) / Math.max(5.4, targetValue.length * 0.60)
+            )
+        );
+        group.append("text")
+            .attr("class", "target-value-label chart-text")
+            .attr("x", prominentTargetCard ? targetCenterX : targetCardX + 58)
+            .attr("y", prominentTargetCard ? y + h * 0.78 : y + h - Math.max(12, h * 0.18))
+            .attr("fill", textColor)
+            .attr("text-anchor", prominentTargetCard ? "middle" : "start")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${targetValueFont}px`)
+            .style("font-weight", "900")
+            .text(targetValue);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type69_alluvial_diagram/alluvial_diagram_plain_chart_02.js

@@ -0,0 +1,717 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Alluvial Diagram",
+    "chart_name": "alluvial_diagram_plain_chart_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["temporal"]],
+    "required_fields_range": [[2, 10], [0, "inf"], [2, 2]],
+    "required_fields_icons": [],
+    "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 chartData = jsonData.data?.data || [];
+    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 variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    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 height = Math.max(520, 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 || "#091D3A";
+    const mutedText = "#657181";
+    const pageFill = "#F6F9FD";
+    const border = "#E7EDF5";
+    const navy = "#071A48";
+    const accent = sourceColors.other?.secondary || "#4C7FE6";
+    const idSuffix = String(containerSelector || "alluvial-plain-02")
+        .replace(/[^a-zA-Z0-9_-]/g, "")
+        .slice(0, 24) || "alluvial02";
+
+    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-plain-02-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", pageFill);
+        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 && maxChars <= 15) {
+            const firstTwo = words.slice(0, 2).join(" ");
+            if (firstTwo.length <= maxChars) return firstTwo;
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+
+    const truncateText = (value, maxChars = 42) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+
+    const unit = String(valueColumn.unit || "").trim();
+    const formatNumber = value => {
+        const abs = Math.abs(Number(value) || 0);
+        const spec = abs >= 1000000 ? ",.1f" : 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);
+        const lowerUnit = unit.toLowerCase();
+        if (!unit) return `${sign}${number}`;
+        if (unit === "%") return `${sign}${number}%`;
+        if (unit === "$" || lowerUnit === "usd") return `${sign}$${number}`;
+        if (unit.startsWith("$")) return `${sign}$${number}${unit.slice(1)}`;
+        return `${sign}${number} ${unit}`;
+    };
+
+    const normalizeTime = value => {
+        const raw = String(value ?? "").trim();
+        const numeric = Number(raw);
+        const parsed = Date.parse(raw);
+        return {
+            raw,
+            sortable: Number.isFinite(numeric) ? numeric : Number.isFinite(parsed) ? parsed : 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 = chartData
+        .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 categoryMap = new Map();
+    cleanRows.forEach(row => {
+        if (!categoryMap.has(row.category)) {
+            categoryMap.set(row.category, {
+                category: row.category,
+                leftValue: 0,
+                rightValue: 0,
+                leftSourceIndex: -1,
+                rightSourceIndex: -1,
+                firstSourceIndex: firstIndex.get(row.category) ?? row.sourceIndex
+            });
+        }
+        const record = categoryMap.get(row.category);
+        if (row.time === timePoints[0]) {
+            record.leftValue += row.value;
+            record.leftSourceIndex = record.leftSourceIndex < 0 ? row.sourceIndex : Math.min(record.leftSourceIndex, row.sourceIndex);
+        } else if (row.time === timePoints[1]) {
+            record.rightValue += row.value;
+            record.rightSourceIndex = record.rightSourceIndex < 0 ? row.sourceIndex : Math.min(record.rightSourceIndex, row.sourceIndex);
+        }
+    });
+
+    const categories = [...categoryMap.values()]
+        .filter(row => row.leftValue > 0 || row.rightValue > 0);
+
+    if (!categories.length) {
+        return addEmptyState("No alluvial comparison values");
+    }
+
+    const leftOrder = [...categories]
+        .sort((a, b) => b.leftValue - a.leftValue || b.rightValue - a.rightValue || a.firstSourceIndex - b.firstSourceIndex);
+    const rightOrder = [...categories]
+        .sort((a, b) => b.rightValue - a.rightValue || b.leftValue - a.leftValue || a.firstSourceIndex - b.firstSourceIndex);
+    leftOrder.forEach((row, index) => { row.leftRank = index + 1; });
+    rightOrder.forEach((row, index) => { row.rightRank = index + 1; });
+
+    const fieldColors = sourceColors.field || sourceColors.x || {};
+    const palette = [
+        "#F28E2B",
+        "#2F6BD5",
+        "#E84D68",
+        "#32AFA8",
+        "#59A14F",
+        "#EDC949",
+        "#8E5AD7",
+        "#4E79A7",
+        "#FF7F50",
+        "#1C9C7A"
+    ];
+    const safeColor = color => d3.color(color) || d3.color("#2F6BD5");
+    const getColor = (category, index) => fieldColors[category] || palette[index % palette.length];
+    const getIcon = category => images.field?.[category] || images.fields?.[category] || null;
+
+    const panelX = -Math.max(82, width * 0.16);
+    const panelY = Math.max(6, height * 0.012);
+    const panelW = width - panelX * 2;
+    const panelH = height - panelY * 2;
+    const plotTop = panelY + Math.max(92, panelH * 0.16);
+    const plotBottom = panelY + panelH - Math.max(14, panelH * 0.025);
+    const plotH = Math.max(220, plotBottom - plotTop);
+    const rowPitch = plotH / categories.length;
+    const rowCardH = Math.max(34, Math.min(82, rowPitch * 0.82));
+    const iconR = Math.max(12, Math.min(28, rowPitch * 0.27));
+    const labelFont = Math.max(11, Math.min(18, rowPitch * 0.20));
+    const valueFont = Math.max(12, Math.min(23, rowPitch * 0.24));
+    const leftIconX = panelX + Math.max(26, panelW * 0.055);
+    const leftLabelX = leftIconX + Math.max(25, panelW * 0.048);
+    const leftNodeX = panelX + Math.max(145, panelW * 0.265);
+    const rightNodeX = panelX + panelW * 0.735;
+    const nodeW = Math.max(12, Math.min(18, panelW * 0.027));
+    const rowOuterX = panelX + Math.max(10, panelW * 0.018);
+    const rowOuterW = panelW - Math.max(20, panelW * 0.036);
+    const rowOuterRight = rowOuterX + rowOuterW;
+    const rightValueX = rightNodeX + nodeW + Math.max(13, panelW * 0.026);
+    const rightColumnDividerX = rowOuterRight - Math.max(26, panelW * 0.048);
+    const rightValueMaxW = Math.max(42, rightColumnDividerX - rightValueX - 18);
+    const maxValue = Math.max(1, d3.max(categories, d => Math.max(d.leftValue, d.rightValue)) || 1);
+    const minBandH = Math.max(8, Math.min(12, rowPitch * 0.20));
+    const maxBandH = Math.max(10, Math.min(70, rowPitch * 0.68));
+    const bandHeight = value => value <= 0 ? 0 : Math.max(minBandH, (value / maxValue) * maxBandH);
+
+    leftOrder.forEach((row, index) => {
+        row.leftCenterY = plotTop + rowPitch * (index + 0.5);
+    });
+    rightOrder.forEach((row, index) => {
+        row.rightCenterY = plotTop + rowPitch * (index + 0.5);
+    });
+
+    const defs = svg.append("defs");
+    const panelShadow = defs.append("filter")
+        .attr("id", `alluvial-plain-02-panel-shadow-${idSuffix}`)
+        .attr("x", "-12%")
+        .attr("y", "-12%")
+        .attr("width", "124%")
+        .attr("height", "124%");
+    panelShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#AAB8CC")
+        .attr("flood-opacity", 0.20);
+
+    const rowShadow = defs.append("filter")
+        .attr("id", `alluvial-plain-02-row-shadow-${idSuffix}`)
+        .attr("x", "-8%")
+        .attr("y", "-20%")
+        .attr("width", "116%")
+        .attr("height", "140%");
+    rowShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 3)
+        .attr("stdDeviation", 4)
+        .attr("flood-color", "#B7C4D7")
+        .attr("flood-opacity", 0.16);
+
+    categories.forEach((row, index) => {
+        const color = safeColor(getColor(row.category, index));
+        const gradient = defs.append("linearGradient")
+            .attr("id", `alluvial-plain-02-link-${idSuffix}-${index}`)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("x1", leftNodeX)
+            .attr("x2", rightNodeX + nodeW)
+            .attr("y1", row.leftCenterY)
+            .attr("y2", row.rightCenterY);
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", color.formatHex()).attr("stop-opacity", 0.96);
+        gradient.append("stop").attr("offset", "55%").attr("stop-color", chartUtils.color.variant(color, { mode: "brighter", amount: 1.55 })).attr("stop-opacity", 0.72);
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", color.formatHex()).attr("stop-opacity", 0.92);
+        row.gradientId = `alluvial-plain-02-link-${idSuffix}-${index}`;
+    });
+
+    const root = svg.append("g").attr("class", "alluvial-plain-02-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-background")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", pageFill)
+        .attr("fill-opacity", 0);
+    root.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", 0)
+        .attr("fill", "none")
+        .attr("stroke", "none");
+
+    const headerY = panelY + Math.max(40, panelH * 0.075);
+    const addTimeHeader = (x, label, className) => {
+        const group = root.append("g")
+            .attr("class", `time-header ${className}`)
+            .attr("data-time", label);
+        group.append("rect")
+            .attr("class", "time-label-pill")
+            .attr("x", x - 36)
+            .attr("y", headerY - 22)
+            .attr("width", 72)
+            .attr("height", 30)
+            .attr("rx", 15)
+            .attr("fill", "#1D5C82")
+            .attr("filter", `url(#alluvial-plain-02-row-shadow-${idSuffix})`);
+        group.append("text")
+            .attr("class", "time-label chart-text")
+            .attr("x", x)
+            .attr("y", headerY - 1)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#FFFFFF")
+            .style("font-family", titleFontFamily)
+            .style("font-size", "17px")
+            .style("font-weight", "900")
+            .text(label);
+        return group;
+    };
+    const leftHeaderX = leftNodeX + nodeW / 2;
+    const rightHeaderX = rightValueX + Math.min(38, rightValueMaxW * 0.36);
+    addTimeHeader(leftHeaderX, timePoints[0], "time-header-left");
+    addTimeHeader(rightHeaderX, timePoints[1], "time-header-right");
+    root.append("path")
+        .attr("class", "time-header-guide decorative-line")
+        .attr("d", [
+            `M ${leftHeaderX - 38} ${headerY - 7}`,
+            `H ${rowOuterX + Math.max(46, panelW * 0.18)}`,
+            `V ${plotTop - rowPitch * 0.26}`,
+            `M ${leftHeaderX + 38} ${headerY - 7}`,
+            `H ${(leftHeaderX + rightHeaderX) / 2 - 72}`,
+            `M ${(leftHeaderX + rightHeaderX) / 2 + 72} ${headerY - 7}`,
+            `H ${rightHeaderX - 38}`,
+            `M ${rightHeaderX + 38} ${headerY - 7}`,
+            `H ${rowOuterRight - Math.max(42, panelW * 0.08)}`,
+            `V ${plotTop - rowPitch * 0.26}`
+        ].join(" "))
+        .attr("fill", "none")
+        .attr("stroke", "#2E91C4")
+        .attr("stroke-width", 1.2)
+        .attr("stroke-dasharray", "2.5 4")
+        .attr("stroke-linecap", "round")
+        .attr("opacity", 0.86);
+    root.append("text")
+        .attr("class", "metric-caption chart-text")
+        .attr("x", (leftNodeX + rightNodeX + nodeW) / 2)
+        .attr("y", headerY - 5)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", titleFontFamily)
+        .style("font-size", "11px")
+        .style("font-weight", "900")
+        .style("letter-spacing", "0px")
+        .text(shortLabel(`${readableName(valueColumn.label || valueField)}${unit ? ` (${unit})` : ""}`, 26).toUpperCase());
+
+    const addIconSlot = (group, cx, cy, r, className, color, glyph, href) => {
+    const slot = group.append("g")
+        .attr("class", className)
+        .attr("data-asset-slot", "category_icon")
+        .attr("data-slot-anchor", "row-centerline")
+        .attr("data-slot-collision-rule", "stay inside left category block and avoid value labels");
+        slot.append("circle")
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .attr("r", r)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#DDE5EF")
+            .attr("stroke-width", 1.2)
+            .attr("filter", `url(#alluvial-plain-02-row-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", Math.max(3, r - 4))
+                .attr("fill", color.formatHex());
+            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(8, r * 0.62)}px`)
+                .style("font-weight", "900")
+                .text(glyph);
+        }
+        return slot;
+    };
+
+    const rowLayer = root.append("g").attr("class", "comparison-row-cards");
+    leftOrder.forEach(row => {
+        const color = safeColor(getColor(row.category, leftOrder.indexOf(row)));
+        rowLayer.append("rect")
+            .attr("class", "row-card-background")
+            .attr("x", rowOuterX)
+            .attr("y", row.leftCenterY - rowCardH / 2)
+            .attr("width", rowOuterW)
+            .attr("height", rowCardH)
+            .attr("rx", Math.min(12, rowCardH * 0.16))
+            .attr("fill", color.formatHex())
+            .attr("fill-opacity", 0.88)
+            .attr("stroke", chartUtils.color.variant(color, { mode: "brighter", amount: 0.5 }))
+            .attr("stroke-opacity", 0.35)
+            .attr("filter", `url(#alluvial-plain-02-row-shadow-${idSuffix})`)
+            .attr("data-category", row.category);
+        rowLayer.append("rect")
+            .attr("class", "row-category-block")
+            .attr("x", rowOuterX)
+            .attr("y", row.leftCenterY - rowCardH / 2)
+            .attr("width", Math.max(118, leftNodeX - rowOuterX))
+            .attr("height", rowCardH)
+            .attr("rx", Math.min(12, rowCardH * 0.16))
+            .attr("fill", color.formatHex())
+            .attr("fill-opacity", 0.92)
+            .attr("data-category", row.category);
+        rowLayer.append("line")
+            .attr("class", "row-category-divider decorative-line")
+            .attr("x1", leftNodeX)
+            .attr("x2", leftNodeX)
+            .attr("y1", row.leftCenterY - rowCardH / 2)
+            .attr("y2", row.leftCenterY + rowCardH / 2)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-opacity", 0.82)
+            .attr("stroke-width", 1.4);
+        rowLayer.append("line")
+            .attr("class", "row-right-column-divider decorative-line")
+            .attr("x1", rightColumnDividerX)
+            .attr("x2", rightColumnDividerX)
+            .attr("y1", row.leftCenterY - rowCardH / 2)
+            .attr("y2", row.leftCenterY + rowCardH / 2)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-opacity", 0.82)
+            .attr("stroke-width", 1.4);
+    });
+
+    const ribbons = root.append("g").attr("class", "alluvial-flow-links");
+    const rows = root.append("g").attr("class", "comparison-flow-rows");
+
+    categories.forEach((row, index) => {
+        const color = safeColor(getColor(row.category, index));
+        const leftH = bandHeight(row.leftValue);
+        const rightH = bandHeight(row.rightValue);
+        const leftTop = row.leftCenterY - leftH / 2;
+        const leftBottom = row.leftCenterY + leftH / 2;
+        const rightTop = row.rightCenterY - rightH / 2;
+        const rightBottom = row.rightCenterY + rightH / 2;
+        const midX1 = leftNodeX + nodeW + (rightNodeX - leftNodeX - nodeW) * 0.33;
+        const midX2 = leftNodeX + nodeW + (rightNodeX - leftNodeX - nodeW) * 0.67;
+        const path = [
+            `M ${leftNodeX + nodeW} ${leftTop}`,
+            `C ${midX1} ${leftTop}, ${midX2} ${rightTop}, ${rightNodeX} ${rightTop}`,
+            `L ${rightNodeX} ${rightBottom}`,
+            `C ${midX2} ${rightBottom}, ${midX1} ${leftBottom}, ${leftNodeX + nodeW} ${leftBottom}`,
+            "Z"
+        ].join(" ");
+
+        ribbons.append("path")
+            .attr("class", "alluvial-ribbon data-link")
+            .attr("d", path)
+            .attr("fill", `url(#${row.gradientId})`)
+            .attr("stroke", "rgba(255,255,255,0.82)")
+            .attr("stroke-width", 0.7)
+            .attr("opacity", 0.18)
+            .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-rank", row.leftRank)
+            .attr("data-right-rank", row.rightRank);
+
+        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-left-rank", row.leftRank)
+            .attr("data-right-rank", row.rightRank);
+
+        addIconSlot(
+            group,
+            leftIconX,
+            row.leftCenterY,
+            iconR,
+            "category-icon-slot decorative-icon-slot",
+            color,
+            shortLabel(row.category, 1).slice(0, 1).toUpperCase(),
+            getIcon(row.category)
+        );
+
+        const categoryWords = readableName(row.category).split(/\s+/).filter(Boolean);
+        const categoryLine1 = categoryWords.length > 2
+            ? categoryWords.slice(0, 2).join(" ")
+            : (categoryWords[0] || row.category);
+        const categoryLine2 = categoryWords.length > 2
+            ? categoryWords.slice(2).join(" ")
+            : (categoryWords.length === 2 ? categoryWords[1] : "");
+        const categoryText = group.append("text")
+            .attr("class", "category-label chart-text")
+            .attr("x", leftLabelX)
+            .attr("y", row.leftCenterY + (categoryLine2 ? -3 : Math.max(3, labelFont * 0.35)))
+            .attr("text-anchor", "start")
+            .attr("fill", navy)
+            .attr("fill", "#FFFFFF")
+            .attr("paint-order", "stroke fill")
+            .attr("stroke", chartUtils.color.variant(color, { mode: "darker", amount: 0.35 }))
+            .attr("stroke-width", 0.8)
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${labelFont}px`)
+            .style("font-weight", "900")
+            .text(shortLabel(categoryLine1, 16));
+        if (categoryLine2) {
+            categoryText.append("tspan")
+                .attr("x", leftLabelX)
+                .attr("dy", Math.max(13, labelFont * 0.86))
+                .text(shortLabel(categoryLine2, 16));
+        }
+
+        group.append("rect")
+            .attr("class", "left-node-bar")
+            .attr("x", leftNodeX)
+            .attr("y", leftTop)
+            .attr("width", nodeW)
+            .attr("height", Math.max(2, leftH))
+            .attr("rx", 4)
+            .attr("fill", color.formatHex())
+            .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-node-bar")
+            .attr("x", rightNodeX)
+            .attr("y", rightTop)
+            .attr("width", nodeW)
+            .attr("height", Math.max(2, rightH))
+            .attr("rx", 4)
+            .attr("fill", chartUtils.color.variant(color, { mode: "darker", amount: 0.08 }))
+            .attr("fill-opacity", 0)
+            .attr("data-category", row.category)
+            .attr("data-value", row.rightValue)
+            .attr("data-time", timePoints[1]);
+
+        const leftValue = formatLocalValue(row.leftValue);
+        const rightValue = formatLocalValue(row.rightValue);
+        const leftValueX = leftNodeX + nodeW + Math.max(12, panelW * 0.024);
+        const leftValueFont = Math.max(11, Math.min(valueFont, Math.max(11, rowCardH * 0.34), (rightNodeX - leftValueX - 12) / Math.max(8, leftValue.length * 0.58)));
+        const rightValueFont = Math.max(11, Math.min(valueFont, Math.max(11, rowCardH * 0.34), rightValueMaxW / Math.max(5.5, rightValue.length * 0.58)));
+        const valueBoxH = Math.max(20, Math.min(rowCardH * 0.72, 38));
+        const leftValueBoxW = Math.max(74, Math.min(116, (rightNodeX - leftValueX) * 0.34));
+        const rightValueBoxW = Math.max(74, Math.min(116, rightValueMaxW + 18));
+        const changeX = (leftNodeX + rightNodeX + nodeW) / 2;
+        const delta = row.rightValue - row.leftValue;
+        const deltaLabel = `${delta >= 0 ? "+" : "-"}${formatLocalValue(Math.abs(delta))}`;
+        const badgeR = Math.max(19, Math.min(34, rowCardH * 0.43));
+        const badgeValueFont = Math.max(8.5, Math.min(13, badgeR * 0.39, (badgeR * 1.48) / Math.max(4.5, deltaLabel.length * 0.48)));
+
+        group.append("rect")
+            .attr("class", "left-value-block")
+            .attr("x", leftValueX - 8)
+            .attr("y", row.leftCenterY - valueBoxH / 2)
+            .attr("width", leftValueBoxW)
+            .attr("height", valueBoxH)
+            .attr("rx", 7)
+            .attr("fill", chartUtils.color.variant(color, { mode: "darker", amount: 0.08 }))
+            .attr("fill-opacity", 0)
+            .attr("data-category", row.category)
+            .attr("data-time", timePoints[0]);
+        group.append("rect")
+            .attr("class", "right-value-block")
+            .attr("x", rightValueX - 9)
+            .attr("y", row.rightCenterY - valueBoxH / 2)
+            .attr("width", rightValueBoxW)
+            .attr("height", valueBoxH)
+            .attr("rx", 7)
+            .attr("fill", "#FFFFFF")
+            .attr("fill-opacity", 0)
+            .attr("stroke", chartUtils.color.variant(color, { mode: "brighter", amount: 0.55 }))
+            .attr("stroke-opacity", 0)
+            .attr("stroke-width", 1)
+            .attr("data-category", row.category)
+            .attr("data-time", timePoints[1]);
+        group.append("g")
+            .attr("class", "change-badge")
+            .attr("data-category", row.category)
+            .attr("data-delta", delta)
+            .attr("transform", `translate(${changeX}, ${row.leftCenterY})`)
+            .call(badge => {
+                badge.append("circle")
+                    .attr("r", badgeR)
+                    .attr("fill", "#FFFFFF")
+                    .attr("stroke", "#E6EDF5")
+                    .attr("stroke-width", 0.9)
+                    .attr("filter", `url(#alluvial-plain-02-row-shadow-${idSuffix})`);
+                badge.append("text")
+                    .attr("x", 0)
+                    .attr("y", -badgeR * 0.38)
+                    .attr("text-anchor", "middle")
+                    .attr("fill", delta < 0 ? "#E84D68" : "#26A269")
+                    .style("font-family", titleFontFamily)
+                    .style("font-size", `${Math.max(10, badgeR * 0.52)}px`)
+                    .style("font-weight", "900")
+                    .text(delta < 0 ? "↓" : "↑");
+                badge.append("text")
+                    .attr("x", 0)
+                    .attr("y", badgeR * 0.10)
+                    .attr("text-anchor", "middle")
+                    .attr("fill", delta < 0 ? "#C9333C" : "#1B8C5A")
+                    .style("font-family", titleFontFamily)
+                    .style("font-size", `${badgeValueFont}px`)
+                    .style("font-weight", "900")
+                    .text(deltaLabel);
+                badge.append("text")
+                    .attr("x", 0)
+                    .attr("y", badgeR * 0.52)
+                    .attr("text-anchor", "middle")
+                    .attr("fill", mutedText)
+                    .style("font-family", fontFamily)
+                    .style("font-size", `${Math.max(6, badgeR * 0.26)}px`)
+                    .style("font-weight", "700")
+                    .text(delta < 0 ? "decline" : "increase");
+            });
+
+        group.append("text")
+            .attr("class", "left-value-label chart-text")
+            .attr("x", leftValueX)
+            .attr("y", row.leftCenterY + Math.max(3, leftValueFont * 0.34))
+            .attr("text-anchor", "start")
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", chartUtils.color.variant(color, { mode: "darker", amount: 0.65 }))
+            .attr("stroke-width", 1.6)
+            .attr("stroke-linejoin", "round")
+            .attr("paint-order", "stroke fill")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${leftValueFont}px`)
+            .style("font-weight", "900")
+            .attr("data-category", row.category)
+            .attr("data-value", row.leftValue)
+            .attr("data-time", timePoints[0])
+            .text(leftValue);
+
+        group.append("text")
+            .attr("class", "right-value-label chart-text")
+            .attr("x", rightValueX)
+            .attr("y", row.rightCenterY + Math.max(3, rightValueFont * 0.34))
+            .attr("text-anchor", "start")
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", chartUtils.color.variant(color, { mode: "darker", amount: 0.60 }))
+            .attr("stroke-width", 1.3)
+            .attr("paint-order", "stroke fill")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${rightValueFont}px`)
+            .style("font-weight", "900")
+            .attr("data-category", row.category)
+            .attr("data-value", row.rightValue)
+            .attr("data-time", timePoints[1])
+            .text(rightValue);
+    });
+
+    return svg.node();
+}