Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/line_graph/bump_chart_01.js

@@ -0,0 +1,469 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_chart_01",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group", "group2"],
+    "hierarchy":["group2"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 30],
+        [0, "inf"],
+        [2, 2],
+        [1, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平分离组条形图 (左右独立排序，固定宽度条，新标签布局，带连接线)
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据与配置 ----------
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#FFFFFF", // 条内标签默认白色
+        field: {},
+        available_colors: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099"]
+    };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    variables.has_spacing = variables.has_spacing !== undefined ? variables.has_spacing : true;
+
+    // 清空容器 & 创建文本测量上下文
+    d3.select(containerSelector).html("");
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    function measureTextWidth(text, fontFamily, fontSize, fontWeight) {
+        return chartUtils.text.measure(null, text, { fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight }).width;
+    }
+
+    // ---------- 2. 尺寸与边距 ----------
+    const width = variables.width || 600;
+    const height = variables.height || 600;
+    const margin = { top: 90, right: 30, bottom: 60, left: 30 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // 布局: 左右图表区域和中心间隙 (35% / 30% / 35%)
+    const leftChartWidthRatio = 0.35;
+    const rightChartWidthRatio = 0.35;
+    // const centerGapRatio = 0.3; // 中心间隙宽度由左右宽度确定
+    const leftChartWidth = innerWidth * leftChartWidthRatio;
+    const rightChartWidth = innerWidth * rightChartWidthRatio;
+    const rightChartStartX = innerWidth - rightChartWidth;
+
+    // ---------- 3. 字段提取 ----------
+    const xChannel = chartUtils.schema.channel(jsonData, "x");        // 类别字段 (如：国家)
+    const yChannel = chartUtils.schema.channel(jsonData, "y");        // 数值字段
+   
+
+
+    const categoryField = xChannel.key;
+    const valueField = yChannel.key;
+    const conditionField = chartUtils.schema.channel(jsonData, "group").key;
+    const colorField = chartUtils.schema.channel(jsonData, "group2").key;
+    let valueUnit = yChannel.unit;
+
+    // ---------- 4. 数据处理与排序 ----------
+    const conditions = [...new Set(chartData.map(d => d[conditionField]))];
+    if (conditions.length !== 2) {
+        console.error(`条件字段 '${conditionField}' 必须有2个唯一值`);
+        return;
+    }
+    const conditionLeft = conditions[0];
+    const conditionRight = conditions[1];
+
+    const colorGroups = [...new Set(chartData.map(d => d[colorField]))];
+
+    // 预处理数据，聚合左右两侧的值
+    const processedData = {};
+    chartData.forEach(d => {
+        const cat = d[categoryField];
+        if (!processedData[cat]) {
+            processedData[cat] = { leftValue: null, rightValue: null, colorGroup: null };
+        }
+        if (d[conditionField] === conditionLeft) {
+            processedData[cat].leftValue = +d[valueField] || 0;
+        } else if (d[conditionField] === conditionRight) {
+            processedData[cat].rightValue = +d[valueField] || 0;
+        }
+        processedData[cat].colorGroup = d[colorField]; // 假设同一类别的颜色组一致
+    });
+
+    // 基础数据数组，包含所有处理后的类别
+    const baseData = Object.entries(processedData)
+        .map(([category, values]) => ({ category, ...values }));
+
+    // 分别过滤和排序左右两侧的数据
+    const sortedDataLeft = baseData
+        .filter(d => d.leftValue !== null)
+        .sort((a, b) => b.leftValue - a.leftValue);
+
+    const sortedDataRight = baseData
+        .filter(d => d.rightValue !== null)
+        .sort((a, b) => b.rightValue - a.rightValue);
+
+    const sortedCategoriesLeft = sortedDataLeft.map(d => d.category);
+    const sortedCategoriesRight = sortedDataRight.map(d => d.category);
+
+    // ---------- 5. 比例尺与常量定义 ----------
+    const maxCount = Math.max(sortedDataLeft.length, sortedDataRight.length); // Y轴基于最大条目数
+
+    // 统一Y轴比例尺
+    const unifiedYDomain = d3.range(maxCount);
+    const yScale = d3.scaleBand()
+        .domain(unifiedYDomain)
+        .range([0, innerHeight])
+        .padding(variables.has_spacing ? 0.2 : 0.15);
+
+    // 颜色比例尺
+    const colorScale = colorResolver.scale(colorGroups, { palette: "category10" });
+
+    // 条形尺寸与位置常量
+    const barHeight = yScale.bandwidth();
+    const barRadius = barHeight / 2;
+    const fixedBarPixelWidth = leftChartWidth * 0.98; // 固定条形宽度
+    const leftBarLeftEdge = 0; // 左侧条形左边缘
+    const leftBarRightEdge = leftBarLeftEdge + fixedBarPixelWidth; // 左侧条形右边缘
+    const rightBarRightEdge = innerWidth; // 右侧条形右边缘
+    const rightBarLeftEdge = rightBarRightEdge - fixedBarPixelWidth; // 右侧条形左边缘
+
+    // ---------- 6. 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; background-color: ${colorResolver.background({ fallback: 'transparent' }).value};`)
+        .attr("xmlns", "http://www.w3.org/2000/svg");
+
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // ---------- 7. 字体大小动态计算辅助函数 ----------
+    function calculateScaledFontSize(initialSize, scaleFactor, minSize = 6) {
+        return Math.max(minSize, initialSize * scaleFactor);
+    }
+
+    // ---------- 8. 标题与图例定位及绘制 (仅当有数据时) ----------
+    const initialHeaderFontSize = parseFloat(typography.label?.font_size || 16);
+    const headerFontFamily = typography.label?.font_family || "Arial";
+    const headerFontWeight = typography.label?.font_weight || "bold";
+    let finalHeaderFontSize = initialHeaderFontSize;
+    let headerY = -margin.top + initialHeaderFontSize; // 无数据时的默认标题Y位置
+
+    const initialLegendFontSize = parseFloat(typography.label?.font_size || 12);
+    const legendFontWeight = typography.label?.font_weight || "normal";
+    const legendFontFamily = typography.label?.font_family || "Arial";
+    const legendColor = colorResolver.text({ fallback: "#333333" }).value;
+    let legendSquareSize = 12;
+    const legendItemPadding = 8;
+    const legendColumnPadding = 20;
+    let finalLegendFontSize = initialLegendFontSize;
+    let legendY = headerY - finalLegendFontSize - 5; // 无数据时的默认图例Y位置
+    let legendStartX = 0;
+    const relevantColorGroups = [...new Set(baseData.map(d => d.colorGroup).filter(Boolean))]; // 有效的颜色分组
+
+    if (maxCount > 0 && barHeight > 0) { // 确保有数据且条形高度有效
+        // --- 标题尺寸与位置计算 ---
+        let leftHeaderWidth = measureTextWidth(conditionLeft, headerFontFamily, initialHeaderFontSize, headerFontWeight);
+        let rightHeaderWidth = measureTextWidth(conditionRight, headerFontFamily, initialHeaderFontSize, headerFontWeight);
+        let headerScaleFactor = 1;
+        if (leftHeaderWidth > leftChartWidth || rightHeaderWidth > rightChartWidth) {
+            const scaleLeft = leftHeaderWidth > leftChartWidth ? leftChartWidth / leftHeaderWidth : 1;
+            const scaleRight = rightHeaderWidth > rightChartWidth ? rightChartWidth / rightHeaderWidth : 1;
+            headerScaleFactor = Math.min(scaleLeft, scaleRight) * 0.98; // 统一缩小比例
+        }
+        finalHeaderFontSize = calculateScaledFontSize(initialHeaderFontSize, headerScaleFactor);
+        const headerPaddingBottom = 10;
+        headerY = yScale(0) - headerPaddingBottom; // 标题在第一个条形上方
+
+        // --- 图例尺寸与位置计算 ---
+        if (relevantColorGroups.length > 0) {
+            let totalLegendWidth = 0;
+            relevantColorGroups.forEach((cg) => {
+                const textWidth = measureTextWidth(cg, legendFontFamily, initialLegendFontSize, legendFontWeight);
+                totalLegendWidth += legendSquareSize + legendItemPadding + textWidth + legendColumnPadding;
+            });
+            totalLegendWidth -= legendColumnPadding;
+
+            let legendScaleFactor = 1;
+            if (totalLegendWidth > innerWidth) {
+                legendScaleFactor = (innerWidth / totalLegendWidth) * 0.98; // 统一缩小比例
+            }
+            finalLegendFontSize = calculateScaledFontSize(initialLegendFontSize, legendScaleFactor);
+            legendSquareSize *= legendScaleFactor;
+
+            // 重新计算最终图例宽度
+            let finalLegendWidth = 0;
+            relevantColorGroups.forEach((cg) => {
+                const textWidth = measureTextWidth(cg, legendFontFamily, finalLegendFontSize, legendFontWeight);
+                finalLegendWidth += legendSquareSize + legendItemPadding + textWidth + legendColumnPadding;
+            });
+            finalLegendWidth -= legendColumnPadding;
+
+            legendStartX = (innerWidth - finalLegendWidth) / 2; // 水平居中
+            const legendPaddingBottom = 5;
+            legendY = headerY - finalHeaderFontSize - legendPaddingBottom; // 图例在标题上方
+
+            chartUtils.legend.draw(g, relevantColorGroups, {
+                color: cg => colorScale(cg),
+                colorResolver,
+                colors,
+            }, {
+                x: legendStartX,
+                y: legendY,
+                maxWidth: innerWidth,
+                fitToWidth: true,
+                minFontSize: 8,
+                markerShape: "rect",
+                markerSize: legendSquareSize,
+                labelGap: legendItemPadding,
+                itemGap: legendColumnPadding,
+                fontSize: finalLegendFontSize,
+                fontFamily: legendFontFamily,
+                fontWeight: legendFontWeight,
+                textColor: legendColor,
+            });
+        } // end if relevantColorGroups
+
+        // --- 绘制标题 ---
+        g.append("text")
+            .attr("class", "header-left")
+            .attr("x", 0)
+            .attr("y", headerY)
+            .attr("text-anchor", "start")
+            .style("font-family", headerFontFamily)
+            .style("font-size", `${finalHeaderFontSize}px`)
+            .style("font-weight", headerFontWeight)
+            .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .text(conditionLeft);
+
+        g.append("text")
+            .attr("class", "header-right")
+            .attr("x", innerWidth)
+            .attr("y", headerY)
+            .attr("text-anchor", "end")
+            .style("font-family", headerFontFamily)
+            .style("font-size", `${finalHeaderFontSize}px`)
+            .style("font-weight", headerFontWeight)
+            .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .text(conditionRight);
+    } // end if maxCount > 0
+
+    // ---------- 9. 条形、连接线、标签 ----------
+
+    // 辅助函数：生成圆角矩形路径
+    function roundedRectPath(x, y, width, height, radius) {
+        const r = Math.min(radius, height / 2);
+        if (width <= 0 || height <= 0) return ""; // 避免无效路径
+        return `M${x + r},${y} H${x + width - r} A${r},${r} 0 0 1 ${x + width},${y + r} V${y + height - r} A${r},${r} 0 0 1 ${x + width - r},${y + height} H${x + r} A${r},${r} 0 0 1 ${x},${y + height - r} V${y + r} A${r},${r} 0 0 1 ${x + r},${y}`;
+    }
+
+    // --- 计算条内标签最终字体大小 ---
+    const labelPadding = 8;
+    const initialLabelFontSize = calculateScaledFontSize(parseFloat(typography.annotation?.font_size || 12), 1);
+    // 初始目标字体大小：基于条高，但不超过20px
+    const targetLabelFontSize = barHeight > 0 ? Math.min(20, Math.max(barHeight * 0.6, initialLabelFontSize)) : initialLabelFontSize;
+    const labelFontWeight = typography.annotation?.font_weight || "normal";
+    const labelFontFamily = typography.annotation?.font_family || "Arial";
+    const labelColor = colorResolver.text({ fallback: "#FFFFFF" }).value;
+
+    let finalLabelFontSize = targetLabelFontSize;
+    let maxLeftValueWidth = 0; // 用于左侧标签对齐
+    let maxRightValueWidth = 0; // 用于右侧标签对齐
+
+    if (maxCount > 0 && barHeight > 0) { // 仅当有数据和有效条高时计算缩放
+        let maxRequiredWidthLeft = 0;
+        sortedDataLeft.forEach(d => {
+            const valueText = chartUtils.format.fixed(d.leftValue, 0, { unit: valueUnit }).text;
+            const valueWidth = measureTextWidth(valueText, labelFontFamily, targetLabelFontSize, labelFontWeight);
+            const nameWidth = measureTextWidth(d.category, labelFontFamily, targetLabelFontSize, labelFontWeight);
+            maxRequiredWidthLeft = Math.max(maxRequiredWidthLeft, labelPadding + valueWidth + labelPadding + nameWidth + labelPadding);
+        });
+
+        let maxRequiredWidthRight = 0;
+        sortedDataRight.forEach(d => {
+            const valueText = chartUtils.format.fixed(d.rightValue, 0, { unit: valueUnit }).text;
+            const valueWidth = measureTextWidth(valueText, labelFontFamily, targetLabelFontSize, labelFontWeight);
+            const nameWidth = measureTextWidth(d.category, labelFontFamily, targetLabelFontSize, labelFontWeight);
+            maxRequiredWidthRight = Math.max(maxRequiredWidthRight, labelPadding + nameWidth + labelPadding + valueWidth + labelPadding);
+        });
+
+        let labelScaleFactor = 1;
+        if (maxRequiredWidthLeft > fixedBarPixelWidth) {
+            labelScaleFactor = Math.min(labelScaleFactor, (fixedBarPixelWidth / maxRequiredWidthLeft) * 0.98);
+        }
+        if (maxRequiredWidthRight > fixedBarPixelWidth) {
+            labelScaleFactor = Math.min(labelScaleFactor, (fixedBarPixelWidth / maxRequiredWidthRight) * 0.98);
+        }
+        finalLabelFontSize = calculateScaledFontSize(targetLabelFontSize, labelScaleFactor);
+
+        // 重新计算用于对齐的最大宽度
+        sortedDataLeft.forEach(d => {
+            const text = chartUtils.format.fixed(d.leftValue, 0, { unit: valueUnit }).text;
+            maxLeftValueWidth = Math.max(maxLeftValueWidth, measureTextWidth(text, labelFontFamily, finalLabelFontSize, labelFontWeight));
+        });
+        sortedDataRight.forEach(d => {
+            const text = chartUtils.format.fixed(d.rightValue, 0, { unit: valueUnit }).text;
+            maxRightValueWidth = Math.max(maxRightValueWidth, measureTextWidth(text, labelFontFamily, finalLabelFontSize, labelFontWeight));
+        });
+    }
+
+    // --- 绘制连接线 ---
+    if (maxCount > 0 && barHeight > 0) {
+        g.append("g")
+            .attr("class", "connectors")
+            .selectAll("path.connector")
+            .data(baseData.filter(d => d.leftValue !== null && d.rightValue !== null)) // 仅连接两侧都有数据的类别
+            .enter()
+            .append("path")
+            .attr("class", "connector")
+            .attr("d", d => {
+                const category = d.category;
+                const indexLeft = sortedCategoriesLeft.indexOf(category);
+                const indexRight = sortedCategoriesRight.indexOf(category);
+                if (indexLeft === -1 || indexRight === -1) return null; // 确保类别在两侧都存在
+
+                const yPosLeft = yScale(indexLeft);
+                const yPosRight = yScale(indexRight);
+                if (yPosLeft === undefined || yPosRight === undefined) return null;
+
+                // 连接点位于条形主体与圆角的切点
+                const leftConnectX = leftBarLeftEdge + fixedBarPixelWidth - barRadius;
+                const rightConnectX = rightBarLeftEdge + barRadius;
+                return `M${leftConnectX},${yPosLeft} L${rightConnectX},${yPosRight} L${rightConnectX},${yPosRight + barHeight} L${leftConnectX},${yPosLeft + barHeight} Z`;
+            })
+            .attr("fill", d => colorScale(d.colorGroup));
+    }
+
+    // --- 绘制左侧条形与标签 ---
+    if (maxCount > 0 && barHeight > 0) {
+        sortedDataLeft.forEach((d) => {
+            const category = d.category;
+            const index = sortedCategoriesLeft.indexOf(category);
+            const yPos = yScale(index);
+            if (yPos === undefined || index === -1) {
+                 console.warn(`左侧类别 '${category}' 在Y轴上无位置`);
+                 return;
+            }
+            const color = colorScale(d.colorGroup);
+            const leftVal = d.leftValue;
+
+            // 绘制条形
+            g.append("path")
+                .attr("class", "bar-left")
+                .attr("d", roundedRectPath(leftBarLeftEdge, yPos, fixedBarPixelWidth, barHeight, barRadius))
+                .attr("fill", color);
+
+            // 绘制标签 (如果字体够大)
+            if (finalLabelFontSize >= 6) {
+                const leftValueText = chartUtils.format.fixed(leftVal, 0, { unit: valueUnit }).text;
+                const leftNameText = category;
+
+                // 值标签 (左对齐)
+                g.append("text")
+                    .attr("class", "label-left-value")
+                    .attr("x", leftBarLeftEdge + labelPadding)
+                    .attr("y", yPos + barHeight / 2)
+                    .attr("dominant-baseline", "middle")
+                    .attr("text-anchor", "start")
+                    .style("font-family", labelFontFamily)
+                    .style("font-size", `${finalLabelFontSize}px`)
+                    .style("font-weight", labelFontWeight)
+                    .style("fill", labelColor)
+                    .text(leftValueText);
+
+                // 类别标签 (左对齐，在值标签右侧)
+                g.append("text")
+                    .attr("class", "label-left-name")
+                    .attr("x", leftBarLeftEdge + labelPadding + maxLeftValueWidth + labelPadding) // 基于最大值宽度定位
+                    .attr("y", yPos + barHeight / 2)
+                    .attr("dominant-baseline", "middle")
+                    .attr("text-anchor", "start")
+                    .style("font-family", labelFontFamily)
+                    .style("font-size", `${finalLabelFontSize}px`)
+                    .style("font-weight", labelFontWeight)
+                    .style("fill", labelColor)
+                    .text(leftNameText);
+            }
+        });
+    }
+
+    // --- 绘制右侧条形与标签 ---
+    if (maxCount > 0 && barHeight > 0) {
+        sortedDataRight.forEach((d) => {
+            const category = d.category;
+            const index = sortedCategoriesRight.indexOf(category);
+            const yPos = yScale(index);
+             if (yPos === undefined || index === -1) {
+                 console.warn(`右侧类别 '${category}' 在Y轴上无位置`);
+                 return;
+            }
+            const color = colorScale(d.colorGroup);
+            const rightVal = d.rightValue;
+
+            // 绘制条形
+            g.append("path")
+                .attr("class", "bar-right")
+                .attr("d", roundedRectPath(rightBarLeftEdge, yPos, fixedBarPixelWidth, barHeight, barRadius))
+                .attr("fill", color);
+
+            // 绘制标签 (如果字体够大)
+            if (finalLabelFontSize >= 6) {
+                const rightValueText = chartUtils.format.fixed(rightVal, 0, { unit: valueUnit }).text;
+                const rightNameText = category;
+
+                // 值标签 (右对齐)
+                g.append("text")
+                    .attr("class", "label-right-value")
+                    .attr("x", rightBarRightEdge - labelPadding)
+                    .attr("y", yPos + barHeight / 2)
+                    .attr("dominant-baseline", "middle")
+                    .attr("text-anchor", "end")
+                    .style("font-family", labelFontFamily)
+                    .style("font-size", `${finalLabelFontSize}px`)
+                    .style("font-weight", labelFontWeight)
+                    .style("fill", labelColor)
+                    .text(rightValueText);
+
+                // 类别标签 (右对齐，在值标签左侧)
+                g.append("text")
+                    .attr("class", "label-right-name")
+                    .attr("x", rightBarRightEdge - labelPadding - maxRightValueWidth - labelPadding) // 基于最大值宽度定位
+                    .attr("y", yPos + barHeight / 2)
+                    .attr("dominant-baseline", "middle")
+                    .attr("text-anchor", "end")
+                    .style("font-family", labelFontFamily)
+                    .style("font-size", `${finalLabelFontSize}px`)
+                    .style("font-weight", labelFontWeight)
+                    .style("fill", labelColor)
+                    .text(rightNameText);
+            }
+        });
+    }
+
+    // ---------- 11. 返回 SVG 节点 ----------
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_02.js

@@ -0,0 +1,617 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_chart_02",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [3, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "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 sourceRows = jsonData.data?.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    const yColumn = dataColumns[1] || {};
+    const yUnit = yColumn.unit === "none" ? "" : (yColumn.unit || "");
+
+    const width = Math.max(620, Number(variables.width) || 650);
+    const height = Math.max(900, Number(variables.height) || 975);
+    const bgTop = "#06111f";
+    const bgBottom = "#0b243d";
+    const panel = "#0d2238";
+    const panel2 = "#102b49";
+    const stroke = "#1f4268";
+    const text = "#eef7ff";
+    const muted = "#8fa8c5";
+    const grid = "#244b72";
+    const titleBlue = "#b8c9ff";
+    const font = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFont = typography.title?.font_family || font;
+
+    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", "bump-chart-02-reference");
+
+    const defs = svg.append("defs");
+    const bgGrad = defs.append("linearGradient")
+        .attr("id", "bump-chart-02-bg")
+        .attr("x1", "0%").attr("x2", "0%")
+        .attr("y1", "0%").attr("y2", "100%");
+    bgGrad.append("stop").attr("offset", "0%").attr("stop-color", bgTop);
+    bgGrad.append("stop").attr("offset", "100%").attr("stop-color", bgBottom);
+
+    const glow = defs.append("filter")
+        .attr("id", "bump-chart-02-glow")
+        .attr("x", "-25%").attr("y", "-25%")
+        .attr("width", "150%").attr("height", "150%");
+    glow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 7)
+        .attr("stdDeviation", 9)
+        .attr("flood-color", "#020812")
+        .attr("flood-opacity", 0.45);
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump-chart-02-bg)");
+
+    function humanize(value) {
+        return String(value || "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function formatValue(value, unit) {
+        const n = Number(value);
+        if (!Number.isFinite(n)) return "";
+        let out;
+        const abs = Math.abs(n);
+        if (abs >= 1000000) out = d3.format(".3~s")(n);
+        else if (abs >= 1000) out = d3.format(".3~s")(n);
+        else if (abs >= 100) out = d3.format(".0f")(n);
+        else if (abs >= 10) out = d3.format(".1f")(n).replace(/\.0$/, "");
+        else out = d3.format(".2f")(n).replace(/\.?0+$/, "");
+        if (unit === "%") return `${out}%`;
+        if (/^[$€£¥]/.test(unit || "")) return `${unit}${out}`;
+        return unit ? `${out}${unit}` : out;
+    }
+
+    function compactLabel(value, maxChars) {
+        const clean = humanize(value);
+        if (clean.length <= maxChars) return clean;
+        const words = clean.split(" ");
+        if (words.length > 1) {
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(4, maxChars - 2))}.`;
+    }
+
+    function wrapLines(value, maxChars, maxLines) {
+        const words = humanize(value).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let cur = "";
+        words.forEach(word => {
+            const next = cur ? `${cur} ${word}` : word;
+            if (next.length <= maxChars || !cur) cur = next;
+            else {
+                lines.push(cur);
+                cur = word;
+            }
+        });
+        if (cur) lines.push(cur);
+        if (lines.length <= maxLines) return lines;
+        return [...lines.slice(0, maxLines - 1), compactLabel(lines.slice(maxLines - 1).join(" "), maxChars)];
+    }
+
+    function appendWrappedText(selection, lines, x, lineHeight) {
+        selection.selectAll("tspan")
+            .data(lines)
+            .enter()
+            .append("tspan")
+            .attr("x", x)
+            .attr("dy", (d, i) => i === 0 ? 0 : lineHeight)
+            .text(d => d);
+    }
+
+    function parseX(value) {
+        if (value instanceof Date) return value.getTime();
+        const numeric = Number(value);
+        if (Number.isFinite(numeric)) return numeric;
+        const parsed = Date.parse(value);
+        return Number.isFinite(parsed) ? parsed : String(value);
+    }
+
+    const rows = sourceRows
+        .map((d, i) => ({
+            raw: d,
+            sourceIndex: i,
+            xRaw: d[xField],
+            xKey: String(d[xField]),
+            xSort: parseX(d[xField]),
+            y: Number(d[yField]),
+            group: String(d[groupField])
+        }))
+        .filter(d => d.group && d.xKey && Number.isFinite(d.y));
+
+    if (!xField || !yField || !groupField || !rows.length) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", text)
+            .style("font-family", font)
+            .style("font-size", "18px")
+            .text("Missing bump chart data");
+        return svg.node();
+    }
+
+    const xValues = Array.from(new Map(rows
+        .sort((a, b) => d3.ascending(a.xSort, b.xSort))
+        .map(d => [d.xKey, d.xRaw])).entries())
+        .map(([key, raw]) => ({ key, raw, sort: parseX(raw) }));
+
+    const byGroup = d3.group(rows, d => d.group);
+    const groups = Array.from(byGroup.keys())
+        .sort((a, b) => {
+            const aLast = byGroup.get(a).find(d => d.xKey === xValues[xValues.length - 1].key)?.y ?? d3.mean(byGroup.get(a), d => d.y);
+            const bLast = byGroup.get(b).find(d => d.xKey === xValues[xValues.length - 1].key)?.y ?? d3.mean(byGroup.get(b), d => d.y);
+            return d3.descending(aLast, bLast) || d3.ascending(a, b);
+        })
+        .slice(0, 10);
+
+    const palette = ["#4f8cff", "#9b5de5", "#2dd4bf", "#f9c74f", "#f37272", "#43aa8b", "#f8961e", "#577590", "#90be6d", "#f15bb5"];
+    function colorFor(group, index) {
+        return palette[index % palette.length];
+    }
+
+    const outer = 24;
+    const cardX = 34;
+    const cardY = 28;
+    const cardW = width - cardX * 2;
+    const cardH = height - cardY - outer;
+    svg.append("rect")
+        .attr("class", "bump-main-panel")
+        .attr("x", cardX)
+        .attr("y", cardY)
+        .attr("width", cardW)
+        .attr("height", cardH)
+        .attr("rx", 24)
+        .attr("fill", "rgba(7, 22, 39, 0.02)")
+        .attr("stroke", "none");
+
+    const header = svg.append("g")
+        .attr("class", "bump-header")
+        .attr("data-reserved-slot", "header_title_art_slot")
+        .attr("data-slot-anchor", "top-left-header")
+        .attr("data-collision-rule", "avoid-year-chips-and-mini-panels")
+        .attr("transform", `translate(${cardX + 28},${cardY + 50})`);
+
+    const titleText = titles.main_title || metadata.title || `${humanize(groupField)} over ${humanize(xField)}`;
+    const headlineText = /short passes/i.test(titleText)
+        ? "for Short Passes Over Time"
+        : titleText.replace(/^Higher\s+/i, "");
+    const titleLines = wrapLines(headlineText, headlineText.length > 42 ? 24 : 30, 2);
+    header.append("text")
+        .attr("class", "title-kicker")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("fill", "#ffffff")
+        .attr("opacity", 0.94)
+        .style("font-family", font)
+        .style("font-size", "13px")
+        .style("font-weight", 800)
+        .style("letter-spacing", "1.8px")
+        .text("HIGHER COMPLETION PERCENTAGES".slice(0, Math.max(14, Math.min(32, titleText.length))));
+
+    const title = header.append("text")
+        .attr("class", "main-title")
+        .attr("x", 0)
+        .attr("y", 28)
+        .style("font-family", titleFont)
+        .style("font-size", titleLines.length > 1 ? "34px" : "42px")
+        .style("font-weight", 900);
+    if (/short passes/i.test(headlineText)) {
+        title.append("tspan").attr("fill", "#ffffff").text("for ");
+        title.append("tspan").attr("fill", "#77a0ff").text("Short Passes");
+        title.append("tspan").attr("fill", "#ffffff").text(" Over Time");
+    } else {
+        title.selectAll("tspan")
+            .data(titleLines)
+            .enter()
+            .append("tspan")
+            .attr("x", 0)
+            .attr("dy", (d, i) => i === 0 ? 0 : 39)
+            .attr("fill", titleBlue)
+            .text(d => d);
+    }
+
+    header.append("line")
+        .attr("class", "title-divider")
+        .attr("x1", 0)
+        .attr("x2", 66)
+        .attr("y1", 74)
+        .attr("y2", 74)
+        .attr("stroke", "#69a0ff")
+        .attr("stroke-width", 3)
+        .attr("stroke-linecap", "round");
+
+    const subtitle = titles.sub_title || metadata.description || `Values by ${humanize(groupField)} over time.`;
+    const subtitleNode = header.append("text")
+        .attr("class", "subtitle")
+        .attr("x", 0)
+        .attr("y", 104)
+        .attr("fill", muted)
+        .style("font-family", font)
+        .style("font-size", "17px");
+    subtitleNode.selectAll("tspan")
+        .data(wrapLines(subtitle.replace(/\*\*/g, ""), 39, 2))
+        .enter()
+        .append("tspan")
+        .attr("x", 0)
+        .attr("dy", (d, i) => i === 0 ? 0 : 16)
+        .text(d => d);
+
+    const chartX = cardX + 164;
+    const chartW = cardW - 155;
+    const chipsY = cardY + 222;
+    const rowTop = cardY + 302;
+    const rowGap = 18;
+    const maxRows = Math.min(groups.length, 5);
+    const infoH = 86;
+    const available = height - rowTop - infoH - 74;
+    const rowH = Math.max(78, Math.min(150, (available - rowGap * (maxRows - 1)) / maxRows));
+    const rowW = chartW;
+    const xScale = d3.scalePoint()
+        .domain(xValues.map(d => d.key))
+        .range([50, rowW - 40])
+        .padding(0.16);
+
+    const chipLayer = svg.append("g")
+        .attr("class", "year-chip-row")
+        .attr("transform", `translate(${chartX},${chipsY})`);
+    chipLayer.append("rect")
+        .attr("class", "year-chip-rail")
+        .attr("x", 0)
+        .attr("y", -21)
+        .attr("width", rowW)
+        .attr("height", 42)
+        .attr("rx", 16)
+        .attr("fill", "#102844")
+        .attr("stroke", "#2b527c")
+        .attr("opacity", 0.9);
+    chipLayer.selectAll(".year-chip-divider")
+        .data(xValues.slice(1))
+        .enter()
+        .append("line")
+        .attr("class", "year-chip-divider")
+        .attr("x1", d => (xScale(d.key) + xScale(xValues[xValues.findIndex(v => v.key === d.key) - 1].key)) / 2)
+        .attr("x2", d => (xScale(d.key) + xScale(xValues[xValues.findIndex(v => v.key === d.key) - 1].key)) / 2)
+        .attr("y1", -15)
+        .attr("y2", 15)
+        .attr("stroke", "#27496e")
+        .attr("opacity", 0.4);
+    chipLayer.selectAll(".year-chip")
+        .data(xValues)
+        .enter()
+        .append("g")
+        .attr("class", "year-chip")
+        .attr("transform", d => `translate(${xScale(d.key)},0)`)
+        .each(function(d) {
+            const g = d3.select(this);
+            g.append("text")
+                .attr("text-anchor", "middle")
+                .attr("y", 4)
+                .attr("fill", "#ffffff")
+                .style("font-family", font)
+                .style("font-size", "14px")
+                .style("font-weight", 500)
+                .text(d.raw);
+        });
+
+    function rowDomainAndTicks(series) {
+        const vals = series.map(d => d.y).filter(Number.isFinite);
+        const extent = d3.extent(vals);
+        if (!extent || !Number.isFinite(extent[0]) || !Number.isFinite(extent[1])) {
+            return { domain: [0, 1], ticks: [1, 0.5, 0] };
+        }
+        if (extent[0] >= 0 && extent[1] <= 100) {
+            const step = 20;
+            let high = Math.ceil((extent[1] + step * 0.25) / step) * step;
+            high = Math.max(step * 2, high);
+            let low = high - step * 2;
+            while (extent[0] < low && low > 0) low -= step;
+            if (low === high) low = Math.max(0, high - step * 2);
+            const mid = (high + low) / 2;
+            return { domain: [low, high], ticks: [high, mid, low] };
+        }
+        const pad = Math.max(1, (extent[1] - extent[0]) * 0.18);
+        const scale = d3.scaleLinear().domain([extent[0] - pad, extent[1] + pad]).nice(3);
+        const ticks = scale.ticks(3).slice(0, 3).sort((a, b) => d3.descending(a, b));
+        return { domain: scale.domain(), ticks };
+    }
+
+    const rowLayer = svg.append("g").attr("class", "bump-row-layer");
+    if (maxRows > 1) {
+        svg.append("line")
+            .attr("class", "left-icon-rail")
+            .attr("x1", cardX + 42)
+            .attr("x2", cardX + 42)
+            .attr("y1", rowTop + rowH / 2)
+            .attr("y2", rowTop + (maxRows - 1) * (rowH + rowGap) + rowH / 2)
+            .attr("stroke", "#27496e")
+            .attr("stroke-width", 2)
+            .attr("opacity", 0.8);
+    }
+    const finishSlot = svg.append("g")
+        .attr("class", "left-finish-marker-slot")
+        .attr("data-reserved-slot", "left_finish_marker_slot")
+        .attr("data-asset-slot", "left_finish_marker_slot")
+        .attr("data-slot-anchor", "upper-left-before-first-row")
+        .attr("data-collision-rule", "avoid-header-subtitle-year-rail-and-first-row-label")
+        .attr("transform", `translate(${cardX + 3},${rowTop - 82})`);
+    finishSlot.append("path")
+        .attr("d", "M0,12 L104,0 L132,19 L104,38 L0,50 Z")
+        .attr("fill", "#c7435b")
+        .attr("opacity", 0.42)
+        .attr("stroke", "#ff8aa0")
+        .attr("stroke-width", 1);
+    finishSlot.append("rect")
+        .attr("x", 34)
+        .attr("y", 46)
+        .attr("width", 9)
+        .attr("height", 42)
+        .attr("rx", 3)
+        .attr("fill", "#d1a23b")
+        .attr("opacity", 0.38);
+
+    groups.slice(0, maxRows).forEach((group, index) => {
+        const color = colorFor(group, index);
+        const rowY = rowTop + index * (rowH + rowGap);
+        const rowGroup = rowLayer.append("g")
+            .attr("class", "series-row")
+            .attr("data-group", group)
+            .attr("transform", `translate(${chartX},${rowY})`);
+
+        rowGroup.append("rect")
+            .attr("class", "series-card")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", rowW)
+            .attr("height", rowH)
+            .attr("rx", 13)
+            .attr("fill", panel)
+            .attr("stroke", stroke);
+
+        rowGroup.append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", rowW)
+            .attr("height", rowH)
+            .attr("rx", 13)
+            .attr("fill", color)
+            .attr("opacity", 0.08);
+
+        const icon = svg.append("g")
+            .attr("class", "group-icon-slot")
+            .attr("data-reserved-slot", `group_icon_slot_${index + 1}`)
+            .attr("data-asset-slot", "group_icon_slot_N")
+            .attr("data-slot-anchor", "row-centerline-left")
+            .attr("data-collision-rule", "inside-left-label-column")
+            .attr("transform", `translate(${cardX + 42},${rowY + rowH / 2})`);
+        icon.append("circle")
+            .attr("r", 26)
+            .attr("fill", color)
+            .attr("opacity", 0.95);
+        icon.append("circle")
+            .attr("r", 11)
+            .attr("fill", "none")
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 2)
+            .attr("opacity", 0.82);
+        svg.append("text")
+            .attr("class", "left-group-label")
+            .attr("x", cardX + 86)
+            .attr("y", rowY + rowH / 2 - 3)
+            .attr("fill", color)
+            .style("font-family", font)
+            .style("font-size", "14px")
+            .style("font-weight", 900)
+            .text(compactLabel(group, 12).toUpperCase());
+        const desc = svg.append("text")
+            .attr("class", "left-group-description")
+            .attr("x", cardX + 86)
+            .attr("y", rowY + rowH / 2 + 15)
+            .attr("fill", muted)
+            .style("font-family", font)
+            .style("font-size", "10px");
+        const descText = /pass/i.test(titleText)
+            ? `${humanize(group)} passes completion ${yUnit || ""}`
+            : `${humanize(group)} ${humanize(yField).toLowerCase()} ${yUnit || ""}`;
+        appendWrappedText(desc, wrapLines(descText, 15, 2), cardX + 86, 13);
+
+        const series = xValues.map(x => {
+            const found = byGroup.get(group).find(d => d.xKey === x.key);
+            return found || { xKey: x.key, xRaw: x.raw, y: null, group };
+        }).filter(d => Number.isFinite(d.y));
+        const rowGuide = rowDomainAndTicks(series);
+        const localY = d3.scaleLinear()
+            .domain(rowGuide.domain)
+            .range([rowH - 24, 26]);
+        const line = d3.line()
+            .defined(d => Number.isFinite(d.y))
+            .x(d => xScale(d.xKey))
+            .y(d => localY(d.y))
+            .curve(d3.curveMonotoneX);
+
+        rowGroup.selectAll(".v-grid")
+            .data(xValues)
+            .enter()
+            .append("line")
+            .attr("class", "v-grid")
+            .attr("x1", d => xScale(d.key))
+            .attr("x2", d => xScale(d.key))
+            .attr("y1", 18)
+            .attr("y2", rowH - 20)
+            .attr("stroke", grid)
+            .attr("opacity", 0.32)
+            .attr("stroke-dasharray", "3 5");
+
+        rowGroup.selectAll(".row-y-tick")
+            .data(rowGuide.ticks)
+            .enter()
+            .append("text")
+            .attr("class", "row-y-tick")
+            .attr("x", 10)
+            .attr("y", d => localY(d) + 4)
+            .attr("fill", "#6f88a7")
+            .style("font-family", font)
+            .style("font-size", "12px")
+            .text(d => formatValue(d, ""));
+
+        rowGroup.append("path")
+            .datum(series)
+            .attr("class", "series-line")
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 4)
+            .attr("d", line);
+
+        rowGroup.selectAll(".series-point")
+            .data(series)
+            .enter()
+            .append("circle")
+            .attr("class", "series-point")
+            .attr("cx", d => xScale(d.xKey))
+            .attr("cy", d => localY(d.y))
+            .attr("r", 7.5)
+            .attr("fill", color)
+            .attr("stroke", "#dbeafe")
+            .attr("stroke-width", 2);
+
+        rowGroup.selectAll(".value-label")
+            .data(series)
+            .enter()
+            .append("text")
+            .attr("class", "value-label")
+            .attr("x", d => xScale(d.xKey))
+            .attr("y", d => localY(d.y) + (localY(d.y) < 36 ? 18 : -12))
+            .attr("text-anchor", "middle")
+            .attr("fill", "#cfe0f7")
+            .style("font-family", font)
+            .style("font-size", "12px")
+            .style("font-weight", 800)
+            .text(d => formatValue(d.y, ""));
+
+    });
+
+    const infoY = rowTop + maxRows * rowH + (maxRows - 1) * rowGap + 28;
+    const info = svg.append("g")
+        .attr("class", "bottom-info-card")
+        .attr("transform", `translate(${cardX + 14},${infoY})`);
+    info.append("rect")
+        .attr("width", cardW - 28)
+        .attr("height", infoH)
+        .attr("rx", 14)
+        .attr("fill", panel2)
+        .attr("stroke", stroke)
+        .attr("opacity", 0.94);
+    const infoIcon = info.append("g")
+        .attr("class", "bottom-info-icon-slot")
+        .attr("data-reserved-slot", "bottom_info_icon_slot")
+        .attr("data-asset-slot", "bottom_info_icon_slot")
+        .attr("data-slot-anchor", "bottom-card-left")
+        .attr("data-collision-rule", "avoid-bottom-card-text")
+        .attr("transform", "translate(54,43)");
+    infoIcon.append("circle")
+        .attr("r", 20)
+        .attr("fill", "#244b72");
+    infoIcon.append("path")
+        .attr("d", "M-8,7 L-8,-1 L-2,-1 L-2,-9 L4,-9 L4,7 M-14,7 L14,7")
+        .attr("fill", "none")
+        .attr("stroke", "#dbeafe")
+        .attr("stroke-width", 2)
+        .attr("stroke-linecap", "round");
+
+    const lastKey = xValues[xValues.length - 1].key;
+    const leader = groups.map(group => byGroup.get(group).find(d => d.xKey === lastKey))
+        .filter(Boolean)
+        .sort((a, b) => d3.descending(a.y, b.y))[0];
+    const topGroup = leader ? humanize(leader.group) : humanize(groups[0]);
+    const firstInfoLine = /pass/i.test(titleText)
+        ? `${topGroup} passes have the highest completion rates`
+        : `${topGroup} leads at ${leader ? formatValue(leader.y, yUnit) : ""} ${leader ? `in ${leader.xRaw}` : ""}.`;
+    const remainingGroups = groups.filter(g => g !== (leader && leader.group));
+    function trendPhrase(group) {
+        const vals = xValues.map(x => byGroup.get(group).find(d => d.xKey === x.key)?.y).filter(Number.isFinite);
+        const diffs = vals.slice(1).map((v, i) => v - vals[i]);
+        if (diffs.length && diffs.every(d => d >= -0.01)) return `${humanize(group)} shows steady improvement`;
+        if (diffs.some(d => d > 0) && diffs.some(d => d < 0)) return `${humanize(group)} remains more variable`;
+        if (diffs.length && diffs.every(d => d <= 0.01)) return `${humanize(group)} trends lower`;
+        return `${humanize(group)} remains lower`;
+    }
+    const secondInfoLine = remainingGroups.length >= 2
+        ? `while ${trendPhrase(remainingGroups[0])} and ${trendPhrase(remainingGroups[1])}.`
+        : `across ${xValues.length} time points.`;
+    const infoTitle = info.append("text")
+        .attr("class", "bottom-info-title")
+        .attr("x", 104)
+        .attr("y", 30)
+        .attr("fill", "#78a0ff")
+        .style("font-family", font)
+        .style("font-size", "14px")
+        .style("font-weight", 800);
+    appendWrappedText(infoTitle, wrapLines(firstInfoLine, 48, 1), 104, 17);
+    const infoSubtitle = info.append("text")
+        .attr("class", "bottom-info-subtitle")
+        .attr("x", 104)
+        .attr("y", 52)
+        .attr("fill", "#ffffff")
+        .style("font-family", font)
+        .style("font-size", "11px")
+        .style("font-weight", 400);
+    appendWrappedText(infoSubtitle, wrapLines(secondInfoLine, 58, 2), 104, 15);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_03.js

@@ -0,0 +1,650 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_chart_03",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [3, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "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 sourceRows = jsonData.data?.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    const yColumn = dataColumns[1] || {};
+    const yUnit = yColumn.unit === "none" ? "" : (yColumn.unit || "");
+
+    const width = Math.max(620, Number(variables.width) || 650);
+    const height = Math.max(900, Number(variables.height) || 975);
+    const font = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFont = typography.title?.font_family || font;
+
+    const colors = {
+        bgTop: "#061024",
+        bgMid: "#061a32",
+        bgBottom: "#081427",
+        panel: "#0a1a31",
+        panel2: "#0d223d",
+        stroke: "#24395f",
+        text: "#f5f7ff",
+        muted: "#b5c1d8",
+        rail: "#0e203d"
+    };
+
+    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", "bump-chart-03-reference");
+
+    const defs = svg.append("defs");
+    const bg = defs.append("radialGradient")
+        .attr("id", "bump-chart-03-bg")
+        .attr("cx", "50%")
+        .attr("cy", "30%")
+        .attr("r", "80%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", colors.bgMid);
+    bg.append("stop").attr("offset", "62%").attr("stop-color", colors.bgTop);
+    bg.append("stop").attr("offset", "100%").attr("stop-color", colors.bgBottom);
+
+    const glow = defs.append("filter")
+        .attr("id", "bump-chart-03-glow")
+        .attr("x", "-30%")
+        .attr("y", "-30%")
+        .attr("width", "160%")
+        .attr("height", "160%");
+    glow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#020915")
+        .attr("flood-opacity", 0.48);
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump-chart-03-bg)");
+
+    function humanize(value) {
+        return String(value || "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function compactLabel(value, maxChars) {
+        const clean = humanize(value);
+        if (clean.length <= maxChars) return clean;
+        const words = clean.split(/\s+/);
+        if (words.length > 1) {
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(4, maxChars - 1))}.`;
+    }
+
+    function wrapLines(value, maxChars, maxLines) {
+        const words = humanize(value).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let cur = "";
+        words.forEach(word => {
+            const next = cur ? `${cur} ${word}` : word;
+            if (next.length <= maxChars || !cur) cur = next;
+            else {
+                lines.push(cur);
+                cur = word;
+            }
+        });
+        if (cur) lines.push(cur);
+        if (lines.length <= maxLines) return lines;
+        return [...lines.slice(0, maxLines - 1), compactLabel(lines.slice(maxLines - 1).join(" "), maxChars)];
+    }
+
+    function appendTspans(textNode, lines, x, lineHeight) {
+        textNode.selectAll("tspan")
+            .data(lines)
+            .enter()
+            .append("tspan")
+            .attr("x", x)
+            .attr("dy", (d, i) => i === 0 ? 0 : lineHeight)
+            .text(d => d);
+    }
+
+    function parseX(value) {
+        if (value instanceof Date) return value.getTime();
+        const n = Number(value);
+        if (Number.isFinite(n)) return n;
+        const parsed = Date.parse(value);
+        return Number.isFinite(parsed) ? parsed : String(value);
+    }
+
+    function formatValue(value, unit) {
+        const n = Number(value);
+        if (!Number.isFinite(n)) return "";
+        let out;
+        const abs = Math.abs(n);
+        if (abs >= 1000000) out = d3.format(".3~s")(n);
+        else if (abs >= 1000) out = d3.format(".3~s")(n);
+        else if (abs >= 100) out = d3.format(".0f")(n);
+        else if (abs >= 10) out = d3.format(".1f")(n).replace(/\.0$/, "");
+        else out = d3.format(".2f")(n).replace(/\.?0+$/, "");
+        if (unit === "%") return `${out}%`;
+        if (/^[$€£¥]/.test(unit || "")) return `${unit}${out}`;
+        return unit ? `${out}${unit}` : out;
+    }
+
+    const rows = sourceRows.map((d, i) => ({
+        raw: d,
+        sourceIndex: i,
+        xRaw: d[xField],
+        xKey: String(d[xField]),
+        xSort: parseX(d[xField]),
+        y: Number(d[yField]),
+        group: String(d[groupField])
+    })).filter(d => d.group && d.xKey && Number.isFinite(d.y));
+
+    if (!xField || !yField || !groupField || !rows.length) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", colors.text)
+            .style("font-family", font)
+            .style("font-size", "18px")
+            .text("Missing bump chart data");
+        return svg.node();
+    }
+
+    const xValues = Array.from(new Map(rows
+        .sort((a, b) => d3.ascending(a.xSort, b.xSort))
+        .map(d => [d.xKey, d.xRaw])).entries())
+        .map(([key, raw]) => ({ key, raw, sort: parseX(raw) }));
+
+    const byGroup = d3.group(rows, d => d.group);
+    const lastKey = xValues[xValues.length - 1].key;
+    const groups = Array.from(byGroup.keys())
+        .sort((a, b) => {
+            const aLast = byGroup.get(a).find(d => d.xKey === lastKey)?.y ?? d3.mean(byGroup.get(a), d => d.y);
+            const bLast = byGroup.get(b).find(d => d.xKey === lastKey)?.y ?? d3.mean(byGroup.get(b), d => d.y);
+            return d3.descending(aLast, bLast) || d3.ascending(a, b);
+        });
+    const maxRows = Math.min(groups.length, 6);
+    const visibleGroups = groups.slice(0, maxRows);
+
+    const palette = ["#ffd22e", "#3c93ff", "#22d4d6", "#a56bff", "#ff6b6b", "#78c850"];
+    function colorFor(index) {
+        return palette[index % palette.length];
+    }
+
+    const titleText = titles.main_title || metadata.title || `${humanize(groupField)} over ${humanize(xField)}`;
+    const subtitleText = titles.sub_title || metadata.description || `Values by ${humanize(groupField)} over ${humanize(xField)}.`;
+
+    const headerX = 40;
+    const headerY = 56;
+    const header = svg.append("g")
+        .attr("class", "bump03-header")
+        .attr("data-reserved-slot", "header_title_art_slot")
+        .attr("data-slot-anchor", "top-left-header")
+        .attr("data-collision-rule", "avoid-header-illustration-year-rail-and-rows")
+        .attr("transform", `translate(${headerX},${headerY})`);
+
+    const kickerWords = humanize(titleText).split(/\s+/).slice(0, 3).join(" ").toUpperCase();
+    const kicker = header.append("g")
+        .attr("class", "header-kicker-pill");
+    kicker.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", 280)
+        .attr("height", 34)
+        .attr("rx", 17)
+        .attr("fill", "#273179")
+        .attr("stroke", "#6d61d7")
+        .attr("opacity", 0.95);
+    kicker.append("g")
+        .attr("data-asset-slot", "header_reaction_icon_slots")
+        .attr("data-slot-anchor", "inside-kicker-left")
+        .attr("data-collision-rule", "inside-kicker")
+        .attr("transform", "translate(22,17)")
+        .call(g => {
+            g.append("circle").attr("r", 9).attr("fill", "#ffffff").attr("opacity", 0.95);
+            g.append("path").attr("d", "M-5,0 H5 M0,-5 V5").attr("stroke", "#273179").attr("stroke-width", 2).attr("stroke-linecap", "round");
+        });
+    const kickerLabel = compactLabel(kickerWords, 28).toUpperCase();
+    kicker.append("text")
+        .attr("x", 48)
+        .attr("y", 22)
+        .attr("fill", "#f5f7ff")
+        .style("font-family", font)
+        .style("font-size", kickerLabel.length > 24 ? "10px" : "13px")
+        .style("font-weight", 800)
+        .style("letter-spacing", "0.6px")
+        .text(kickerLabel);
+
+    const titleMatch = humanize(titleText).match(/\bin\s+(.+)/i);
+    const headline = titleMatch ? `in ${titleMatch[1]}` : humanize(titleText);
+    let titleLines = wrapLines(headline, 22, 2);
+    if (/^in Educational Gaming Apps$/i.test(headline)) {
+        titleLines = ["in Educational", "Gaming Apps"];
+    }
+    const longHeadline = titleLines.some(line => line.length > 18);
+    const titleNode = header.append("text")
+        .attr("class", "main-title")
+        .attr("x", 0)
+        .attr("y", 98)
+        .style("font-family", titleFont)
+        .style("font-size", titleLines.length > 1 ? (longHeadline ? "34px" : "44px") : "46px")
+        .style("font-weight", 900);
+    titleLines.forEach((line, i) => {
+        const t = titleNode.append("tspan")
+            .attr("x", 0)
+            .attr("dy", i === 0 ? 0 : (longHeadline ? 39 : 49));
+        if (/gaming|apps|market|rates|ratios|volume|transport|climate/i.test(line) && !/^in educational$/i.test(line)) {
+            t.attr("fill", "#ffe051");
+        } else {
+            t.attr("fill", "#ffffff");
+        }
+        t.text(line);
+    });
+
+    const subY = 142 + Math.max(0, titleLines.length - 1) * 45;
+    const subtitle = header.append("text")
+        .attr("class", "subtitle")
+        .attr("x", 0)
+        .attr("y", subY)
+        .attr("fill", "#dce2ee")
+        .style("font-family", font)
+        .style("font-size", "16px");
+    appendTspans(subtitle, wrapLines(subtitleText.replace(/\*\*/g, ""), 46, 2), 0, 22);
+
+    const headerArt = svg.append("g")
+        .attr("class", "header-game-controller-slot")
+        .attr("data-reserved-slot", "header_game_controller_slot")
+        .attr("data-asset-slot", "header_game_controller_slot")
+        .attr("data-slot-anchor", "top-right-header")
+        .attr("data-collision-rule", "avoid-title-subtitle-and-year-rail")
+        .attr("transform", `translate(${longHeadline ? width - 82 : width - 132},${headerY + 112}) scale(${longHeadline ? 0.72 : 1})`);
+    headerArt.append("circle")
+        .attr("r", 70)
+        .attr("fill", "#244ed9")
+        .attr("stroke", "#4d71ff")
+        .attr("opacity", 0.82);
+    headerArt.append("path")
+        .attr("d", "M-42,18 C-40,-8 -24,-18 -2,-10 C16,-18 36,-10 42,18 C47,36 34,44 20,34 L10,25 H-10 L-20,34 C-34,44 -47,36 -42,18 Z")
+        .attr("fill", "#eef4ff")
+        .attr("opacity", 0.92);
+    headerArt.append("path")
+        .attr("d", "M-25,12 H-8 M-16,3 V21 M18,9 h1 M31,14 h1 M24,22 h1")
+        .attr("stroke", "#20335f")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+    [
+        [-62, -84, "#7e6dff"],
+        [-8, -92, "#ff5f7e"],
+        [58, -78, "#ffd34a"]
+    ].forEach((d, i) => {
+        const icon = headerArt.append("g")
+            .attr("class", "header-reaction-icon-slot")
+            .attr("data-asset-slot", "header_reaction_icon_slots")
+            .attr("data-slot-anchor", "around-header-illustration")
+            .attr("data-collision-rule", "avoid-title-and-canvas-edge")
+            .attr("transform", `translate(${d[0]},${d[1]})`);
+        icon.append("circle").attr("r", 17).attr("fill", d[2]).attr("opacity", 0.9);
+        icon.append("text")
+            .attr("text-anchor", "middle")
+            .attr("y", 6)
+            .attr("fill", "#ffffff")
+            .style("font-family", font)
+            .style("font-size", "18px")
+            .style("font-weight", 900)
+            .text(i === 0 ? "+" : i === 1 ? "" : "1");
+        if (i === 1) {
+            icon.append("path").attr("d", "M-8,-2 C-8,-10 2,-12 0,-2 C4,-12 14,-10 12,-2 C10,6 0,12 0,12 C0,12 -10,6 -8,-2 Z").attr("fill", "#ffffff").attr("opacity", 0.9);
+        }
+    });
+
+    const chartX = 40;
+    const chartRight = width - 40;
+    const yearY = 322;
+    const rowTop = 382;
+    const rowGap = maxRows >= 6 ? 11 : 13;
+    const bottomH = 72;
+    const bottomGap = 24;
+    const availableH = height - rowTop - bottomH - bottomGap - 30;
+    const rowH = Math.max(62, Math.min(116, (availableH - rowGap * (maxRows - 1)) / maxRows));
+    const rowW = chartRight - chartX;
+    const leftBlockW = Math.min(88, Math.max(68, rowW * 0.16));
+    const rightSlotW = Math.min(72, Math.max(52, rowW * 0.12));
+    const plotX = leftBlockW + 82;
+    const plotW = rowW - plotX - rightSlotW - 14;
+
+    const xScale = d3.scalePoint()
+        .domain(xValues.map(d => d.key))
+        .range([plotX + 24, plotX + plotW - 18])
+        .padding(0.05);
+
+    const yearRail = svg.append("g")
+        .attr("class", "year-rail")
+        .attr("transform", `translate(${chartX},${yearY})`);
+    yearRail.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", rowW)
+        .attr("height", 50)
+        .attr("rx", 8)
+        .attr("fill", "rgba(13, 30, 55, 0.86)")
+        .attr("stroke", colors.stroke);
+    yearRail.append("text")
+        .attr("x", 20)
+        .attr("y", 31)
+        .attr("fill", "#ffffff")
+        .style("font-family", font)
+        .style("font-size", "14px")
+        .style("font-weight", 900)
+        .text("YEAR");
+
+    const allPoints = visibleGroups.flatMap(g => byGroup.get(g));
+    const peak = allPoints.reduce((best, d) => !best || d.y > best.y ? d : best, null);
+    const peakKey = peak?.xKey || xValues[Math.floor(xValues.length / 2)].key;
+    yearRail.selectAll(".year-label")
+        .data(xValues)
+        .enter()
+        .append("text")
+        .attr("class", "year-label")
+        .attr("x", d => xScale(d.key))
+        .attr("y", 32)
+        .attr("text-anchor", "middle")
+        .attr("fill", d => d.key === peakKey ? "#ffe051" : "#ffffff")
+        .style("font-family", font)
+        .style("font-size", "16px")
+        .style("font-weight", d => d.key === peakKey ? 900 : 500)
+        .text(d => d.raw);
+
+    const rowLayer = svg.append("g").attr("class", "bump03-row-layer");
+    visibleGroups.forEach((group, index) => {
+        const color = colorFor(index);
+        const rowY = rowTop + index * (rowH + rowGap);
+        const row = rowLayer.append("g")
+            .attr("class", "series-row")
+            .attr("data-group", group)
+            .attr("transform", `translate(${chartX},${rowY})`);
+
+        row.append("rect")
+            .attr("class", "series-card")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", rowW)
+            .attr("height", rowH)
+            .attr("rx", 10)
+            .attr("fill", colors.panel)
+            .attr("stroke", colors.stroke)
+            .attr("filter", index === 0 ? "url(#bump-chart-03-glow)" : null);
+        row.append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", rowW)
+            .attr("height", rowH)
+            .attr("rx", 10)
+            .attr("fill", color)
+            .attr("opacity", 0.06);
+        row.append("rect")
+            .attr("class", "left-rank-block")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", leftBlockW)
+            .attr("height", rowH)
+            .attr("rx", 10)
+            .attr("fill", color)
+            .attr("opacity", 0.16)
+            .attr("stroke", color)
+            .attr("stroke-width", 1.2);
+        row.append("rect")
+            .attr("x", leftBlockW - 10)
+            .attr("y", 0)
+            .attr("width", 12)
+            .attr("height", rowH)
+            .attr("fill", colors.panel)
+            .attr("opacity", 0.86);
+
+        const leftIcon = row.append("g")
+            .attr("class", "row-left-icon-slot")
+            .attr("data-reserved-slot", `row_left_icon_slot_${index + 1}`)
+            .attr("data-asset-slot", "row_left_icon_slot_N")
+            .attr("data-slot-anchor", "inside-left-rank-block")
+            .attr("data-collision-rule", "avoid-rank-label")
+            .attr("transform", `translate(${leftBlockW / 2},${Math.max(28, rowH * 0.32)})`);
+        leftIcon.append("circle").attr("r", Math.min(18, rowH * 0.18)).attr("fill", color).attr("opacity", 0.85);
+        leftIcon.append("path")
+            .attr("d", "M-8,3 H8 M0,-8 V8")
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 2)
+            .attr("stroke-linecap", "round")
+            .attr("opacity", 0.9);
+
+        row.append("text")
+            .attr("class", "rank-label")
+            .attr("x", leftBlockW / 2)
+            .attr("y", rowH - 28)
+            .attr("text-anchor", "middle")
+            .attr("fill", color)
+            .style("font-family", font)
+            .style("font-size", rowH < 80 ? "18px" : "24px")
+            .style("font-weight", 900)
+            .text(compactLabel(group, 10).replace(/\s.*$/, ""));
+        row.append("text")
+            .attr("x", leftBlockW / 2)
+            .attr("y", rowH - 10)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#ffffff")
+            .style("font-family", font)
+            .style("font-size", rowH < 80 ? "12px" : "15px")
+            .style("font-weight", 700)
+            .text(humanize(group).split(/\s+/).slice(-1)[0] || "Group");
+
+        row.append("rect")
+            .attr("class", "rank-number-pill")
+            .attr("x", leftBlockW + 10)
+            .attr("y", rowH / 2 - 15)
+            .attr("width", 30)
+            .attr("height", 30)
+            .attr("rx", 8)
+            .attr("fill", "#0c172b")
+            .attr("stroke", colors.stroke);
+        row.append("text")
+            .attr("x", leftBlockW + 25)
+            .attr("y", rowH / 2 + 7)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#ffffff")
+            .style("font-family", font)
+            .style("font-size", "18px")
+            .style("font-weight", 800)
+            .text(index + 1);
+
+        const series = xValues.map(x => {
+            const found = byGroup.get(group).find(d => d.xKey === x.key);
+            return found || { xKey: x.key, xRaw: x.raw, y: null, group };
+        }).filter(d => Number.isFinite(d.y));
+        const extent = d3.extent(series, d => d.y);
+        const pad = Math.max(1, (extent[1] - extent[0]) * 0.28);
+        const yScale = d3.scaleLinear()
+            .domain([extent[0] - pad, extent[1] + pad])
+            .range([rowH * 0.68, rowH * 0.30]);
+        const line = d3.line()
+            .x(d => xScale(d.xKey))
+            .y(d => yScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+        row.selectAll(".v-grid")
+            .data(xValues)
+            .enter()
+            .append("line")
+            .attr("class", "v-grid")
+            .attr("x1", d => xScale(d.key))
+            .attr("x2", d => xScale(d.key))
+            .attr("y1", rowH * 0.30)
+            .attr("y2", rowH * 0.72)
+            .attr("stroke", "#27405f")
+            .attr("stroke-width", 1)
+            .attr("opacity", 0.32);
+
+        const peakPoint = series.reduce((best, d) => !best || d.y > best.y ? d : best, null);
+        const peakX = peakPoint ? xScale(peakPoint.xKey) : xScale(peakKey);
+        row.append("line")
+            .attr("class", "peak-leader")
+            .attr("x1", peakX)
+            .attr("x2", peakX)
+            .attr("y1", rowH * 0.34)
+            .attr("y2", rowH * 0.77)
+            .attr("stroke", color)
+            .attr("stroke-width", 1.5)
+            .attr("stroke-dasharray", "5 6")
+            .attr("opacity", 0.92);
+
+        row.append("path")
+            .datum(series)
+            .attr("class", "series-line")
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", rowH < 80 ? 4 : 5)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("d", line);
+
+        row.selectAll(".point")
+            .data(series)
+            .enter()
+            .append("circle")
+            .attr("class", "point")
+            .attr("cx", d => xScale(d.xKey))
+            .attr("cy", d => yScale(d.y))
+            .attr("r", d => d === peakPoint ? (rowH < 80 ? 9 : 11) : (rowH < 80 ? 6 : 7))
+            .attr("fill", color)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", d => d === peakPoint ? 3 : 2);
+
+        row.selectAll(".value-label")
+            .data(series)
+            .enter()
+            .append("text")
+            .attr("class", "value-label")
+            .attr("x", d => xScale(d.xKey))
+            .attr("y", d => yScale(d.y) - (d === peakPoint ? 16 : 12))
+            .attr("text-anchor", "middle")
+            .attr("fill", d => d === peakPoint ? color : "#ffffff")
+            .style("font-family", font)
+            .style("font-size", d => d === peakPoint ? (rowH < 80 ? "14px" : "18px") : (rowH < 80 ? "11px" : "15px"))
+            .style("font-weight", 900)
+            .text(d => formatValue(d.y, yUnit));
+
+        const rightIcon = row.append("g")
+            .attr("class", "row-right-icon-slot")
+            .attr("data-reserved-slot", `row_right_icon_slot_${index + 1}`)
+            .attr("data-asset-slot", "row_right_icon_slot_N")
+            .attr("data-slot-anchor", "right-row-centerline")
+            .attr("data-collision-rule", "avoid-value-labels-and-row-card-edge")
+            .attr("transform", `translate(${rowW - rightSlotW / 2},${rowH / 2})`);
+        rightIcon.append("circle")
+            .attr("r", Math.min(34, rowH * 0.32))
+            .attr("fill", "#0d223e")
+            .attr("stroke", color)
+            .attr("opacity", 0.94);
+        rightIcon.append("path")
+            .attr("d", "M-12,10 L-12,2 L-4,2 L-4,-7 L4,-7 L4,10 M-18,10 L18,10")
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round");
+    });
+
+    const bottomY = rowTop + maxRows * rowH + (maxRows - 1) * rowGap + bottomGap;
+    const bottom = svg.append("g")
+        .attr("class", "bottom-peak-card")
+        .attr("transform", `translate(${chartX},${bottomY})`);
+    bottom.append("rect")
+        .attr("width", rowW)
+        .attr("height", bottomH)
+        .attr("rx", 10)
+        .attr("fill", "rgba(10, 26, 49, 0.9)")
+        .attr("stroke", colors.stroke);
+    const bottomIcon = bottom.append("g")
+        .attr("class", "bottom-peak-icon-slot")
+        .attr("data-reserved-slot", "bottom_peak_icon_slot")
+        .attr("data-asset-slot", "bottom_peak_icon_slot")
+        .attr("data-slot-anchor", "bottom-card-left")
+        .attr("data-collision-rule", "avoid-bottom-card-text")
+        .attr("transform", "translate(46,36)");
+    bottomIcon.append("circle")
+        .attr("r", 24)
+        .attr("fill", "#111f39")
+        .attr("stroke", "#ffd22e");
+    bottomIcon.append("path")
+        .attr("d", "M-7,8 H7 M-4,8 V0 C-10,-6 -5,-13 0,-13 C5,-13 10,-6 4,0 V8")
+        .attr("fill", "none")
+        .attr("stroke", "#ffd22e")
+        .attr("stroke-width", 2.2)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+
+    const peakYear = peak?.xRaw || xValues[Math.floor(xValues.length / 2)].raw;
+    const subjectText = /student engagement/i.test(titleText)
+        ? "student engagement"
+        : humanize(yField).toLowerCase();
+    const groupNoun = humanize(groupField).toLowerCase();
+    const pluralGroupNoun = /s$/.test(groupNoun) ? groupNoun : `${groupNoun}s`;
+    const bottomText = `${peakYear} was the peak year for ${subjectText} across ${pluralGroupNoun}.`;
+    const bottomTextNode = bottom.append("text")
+        .attr("x", 92)
+        .attr("y", 30)
+        .attr("fill", "#ffffff")
+        .style("font-family", font)
+        .style("font-size", "16px")
+        .style("font-weight", 500);
+    if (String(peakYear).length && bottomText.includes("peak year")) {
+        bottomTextNode.append("tspan").attr("x", 92).text(`${peakYear} was the `);
+        bottomTextNode.append("tspan").attr("fill", "#ffe051").attr("font-weight", 900).text("peak year");
+        bottomTextNode.append("tspan").text(` for ${subjectText}`);
+        bottomTextNode.append("tspan")
+            .attr("x", 92)
+            .attr("dy", 22)
+            .text(`across ${pluralGroupNoun}.`);
+    } else {
+        appendTspans(bottomTextNode, wrapLines(bottomText, 54, 2), 92, 22);
+    }
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_04.js

@@ -0,0 +1,662 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_chart_04",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "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 sourceRows = jsonData.data?.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    const yColumn = dataColumns[1] || {};
+    const yUnit = yColumn.unit === "none" ? "" : (yColumn.unit || "");
+
+    const width = Math.max(620, Number(variables.width) || 650);
+    const height = Math.max(900, Number(variables.height) || 975);
+    const font = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFont = typography.title?.font_family || font;
+
+    const colors = {
+        bg0: "#061022",
+        bg1: "#08203a",
+        bg2: "#020914",
+        panel: "#07192e",
+        panelSoft: "#0d2943",
+        stroke: "#2d4868",
+        text: "#f4f8ff",
+        muted: "#d4deeb",
+        rail: "#112640",
+        railStroke: "#517190",
+        teal: "#35dbc9",
+        green: "#7ee66e",
+        cyan: "#27c7e9"
+    };
+    const palette = ["#38d8c5", "#a65bed", "#ffbd2e", "#27ceb1", "#5aa7ff", "#f26d7d", "#86df6d"];
+
+    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", "bump-chart-04-reference-layout");
+
+    const defs = svg.append("defs");
+    const bg = defs.append("radialGradient")
+        .attr("id", "bump04-bg")
+        .attr("cx", "50%")
+        .attr("cy", "31%")
+        .attr("r", "82%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", colors.bg1);
+    bg.append("stop").attr("offset", "58%").attr("stop-color", colors.bg0);
+    bg.append("stop").attr("offset", "100%").attr("stop-color", colors.bg2);
+
+    const shadow = defs.append("filter")
+        .attr("id", "bump04-card-shadow")
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 12)
+        .attr("flood-color", "#000713")
+        .attr("flood-opacity", 0.34);
+
+    const glow = defs.append("filter")
+        .attr("id", "bump04-soft-glow")
+        .attr("x", "-40%")
+        .attr("y", "-40%")
+        .attr("width", "180%")
+        .attr("height", "180%");
+    glow.append("feGaussianBlur").attr("stdDeviation", 3).attr("result", "blur");
+    const merge = glow.append("feMerge");
+    merge.append("feMergeNode").attr("in", "blur");
+    merge.append("feMergeNode").attr("in", "SourceGraphic");
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump04-bg)");
+
+    function humanize(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function compactLabel(value, maxChars) {
+        const clean = humanize(value);
+        if (clean.length <= maxChars) return clean;
+        const words = clean.split(/\s+/);
+        if (words.length > 1) {
+            const initials = words.map(w => w[0]).join("").toUpperCase();
+            if (initials.length >= 2 && initials.length <= maxChars) return initials;
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(3, maxChars - 1))}.`;
+    }
+
+    function initials(value) {
+        const words = humanize(value).split(/\s+/).filter(Boolean);
+        return words.slice(0, 2).map(w => w[0]).join("").toUpperCase() || "?";
+    }
+
+    function wrapWords(value, maxChars, maxLines) {
+        const words = humanize(value).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let cur = "";
+        words.forEach(word => {
+            const next = cur ? `${cur} ${word}` : word;
+            if (next.length <= maxChars || !cur) {
+                cur = next;
+            } else {
+                lines.push(cur);
+                cur = word;
+            }
+        });
+        if (cur) lines.push(cur);
+        if (lines.length <= maxLines) return lines;
+        const kept = lines.slice(0, maxLines - 1);
+        kept.push(compactLabel(lines.slice(maxLines - 1).join(" "), maxChars));
+        return kept;
+    }
+
+    function appendLines(node, lines, x, y, lineHeight) {
+        lines.forEach((line, i) => {
+            node.append("tspan")
+                .attr("x", x)
+                .attr("y", y + i * lineHeight)
+                .text(line);
+        });
+    }
+
+    function parseX(value, fallback) {
+        if (value instanceof Date) return value.getTime();
+        const asNumber = Number(value);
+        if (Number.isFinite(asNumber)) return asNumber;
+        const parsed = Date.parse(value);
+        if (Number.isFinite(parsed)) return parsed;
+        return fallback;
+    }
+
+    function formatX(value) {
+        if (value instanceof Date) return String(value.getFullYear());
+        const clean = humanize(value);
+        return clean.replace(/\.0$/, "");
+    }
+
+    function formatValue(value, unit, options = {}) {
+        const n = Number(value);
+        if (!Number.isFinite(n)) return "";
+        const includeUnit = options.includeUnit === true;
+        let out;
+        const abs = Math.abs(n);
+        if (abs >= 1000) out = d3.format(".3~s")(n);
+        else if (abs >= 100) out = d3.format(".1f")(n).replace(/\.0$/, "");
+        else if (abs >= 10) out = d3.format(".1f")(n).replace(/\.0$/, "");
+        else out = d3.format(".2f")(n).replace(/\.?0+$/, "");
+        if (!includeUnit || unit === "%") return `${out}`;
+        if (/^[$€£¥]/.test(unit || "")) return `${unit}${out}`;
+        if ((unit || "").length <= 2) return `${out}${unit}`;
+        return `${out}`;
+    }
+
+    const rows = sourceRows.map((d, i) => ({
+        raw: d,
+        sourceIndex: i,
+        xRaw: d[xField],
+        xKey: String(d[xField]),
+        xSort: parseX(d[xField], i),
+        y: Number(d[yField]),
+        group: String(d[groupField] ?? "")
+    })).filter(d => d.group && d.xKey && Number.isFinite(d.y));
+
+    if (!xField || !yField || !groupField || !rows.length) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", colors.text)
+            .style("font-family", font)
+            .style("font-size", "18px")
+            .text("Missing bump chart data");
+        return svg.node();
+    }
+
+    const xValues = Array.from(new Map(rows
+        .sort((a, b) => d3.ascending(a.xSort, b.xSort))
+        .map(d => [d.xKey, { key: d.xKey, raw: d.xRaw, sort: d.xSort }])).values());
+    const xIndex = new Map(xValues.map((d, i) => [d.key, i]));
+    const xSortByKey = new Map(xValues.map(d => [d.key, d.sort]));
+    const byGroup = d3.group(rows, d => d.group);
+    const lastKey = xValues[xValues.length - 1]?.key;
+    const groups = Array.from(byGroup.keys()).sort((a, b) => {
+        const aRows = byGroup.get(a) || [];
+        const bRows = byGroup.get(b) || [];
+        const aLast = aRows.find(d => d.xKey === lastKey)?.y ?? d3.mean(aRows, d => d.y);
+        const bLast = bRows.find(d => d.xKey === lastKey)?.y ?? d3.mean(bRows, d => d.y);
+        return d3.descending(aLast, bLast) || d3.ascending(a, b);
+    });
+    const visibleGroups = groups.slice(0, Math.min(6, groups.length));
+
+    function colorFor(index) {
+        return palette[index % palette.length];
+    }
+
+    function buildTitleParts(title) {
+        const raw = humanize(title).replace(/\*\*/g, "");
+        const acrossMatch = raw.match(/^(.*?)\s+Across\s+(.+)$/i);
+        if (acrossMatch) {
+            const before = acrossMatch[1].trim();
+            const words = before.split(/\s+/);
+            return {
+                line1: words.slice(0, 2).join(" ").toUpperCase(),
+                highlightLines: wrapWords(words.slice(2).join(" "), 24, 2).map(d => d.toUpperCase()),
+                pill: `ACROSS ${acrossMatch[2]}`.toUpperCase()
+            };
+        }
+        const words = raw.split(/\s+/);
+        return {
+            line1: words.slice(0, Math.min(3, words.length)).join(" ").toUpperCase(),
+            highlightLines: wrapWords(words.slice(Math.min(3, words.length)).join(" "), 22, 2).map(d => d.toUpperCase()).filter(Boolean),
+            pill: humanize(groupField).toUpperCase()
+        };
+    }
+
+    const titleText = titles.main_title || metadata.title || `${humanize(yField)} by ${humanize(groupField)}`;
+    const subtitleText = titles.sub_title || metadata.description || `${humanize(yField)} over ${humanize(xField)}.`;
+    const titleParts = buildTitleParts(titleText);
+
+    const headerArt = svg.append("g")
+        .attr("class", "header-topic-art-slot")
+        .attr("data-reserved-slot", "header_topic_art_slot")
+        .attr("data-asset-slot", "header_topic_art_slot")
+        .attr("data-slot-anchor", "left-header-safe-area")
+        .attr("data-asset-source-policy", "image2_asset")
+        .attr("data-collision-rule", "avoid-title-subtitle-year-rail-and-canvas-edge")
+        .attr("transform", "translate(36,46)");
+    headerArt.append("rect")
+        .attr("width", 150)
+        .attr("height", 156)
+        .attr("rx", 18)
+        .attr("fill", "#0e2a43")
+        .attr("opacity", 0.26)
+        .attr("stroke", "#2fd6c7")
+        .attr("stroke-dasharray", "7 8")
+        .attr("stroke-width", 1.4);
+    headerArt.selectAll(".slot-orbit")
+        .data([[38, 42, 24], [92, 68, 34], [55, 112, 18], [116, 118, 22]])
+        .enter()
+        .append("circle")
+        .attr("class", "slot-orbit")
+        .attr("cx", d => d[0])
+        .attr("cy", d => d[1])
+        .attr("r", d => d[2])
+        .attr("fill", "none")
+        .attr("stroke", "#35dbc9")
+        .attr("opacity", 0.42)
+        .attr("stroke-width", 3);
+
+    [[104, 24], [74, 32], [24, 76]].forEach(([x, y], i) => {
+        const star = svg.append("g")
+            .attr("class", "header-spark")
+            .attr("transform", `translate(${x},${y})`);
+        star.append("path")
+            .attr("d", "M0,-9 L2,-2 L9,0 L2,2 L0,9 L-2,2 L-9,0 L-2,-2 Z")
+            .attr("fill", i === 1 ? "#ffffff" : "#6cf2d0")
+            .attr("opacity", i === 1 ? 0.92 : 0.8);
+    });
+
+    const titleX = 205;
+    const titleY = 45;
+    const highlightCount = Math.max(1, titleParts.highlightLines.length);
+    const maxHighlightLen = d3.max(titleParts.highlightLines, d => d.length) || 0;
+    const highlightFitSize = maxHighlightLen
+        ? Math.floor((width - titleX - 18) / Math.max(1, maxHighlightLen * 0.63))
+        : 44;
+    const highlightSize = Math.max(28, Math.min(maxHighlightLen > 23 ? 32 : maxHighlightLen > 18 ? 38 : 44, highlightFitSize));
+    const firstLineFitSize = Math.floor((width - titleX - 18) / Math.max(1, titleParts.line1.length * 0.62));
+    svg.append("text")
+        .attr("class", "title-line-one")
+        .attr("x", titleX)
+        .attr("y", titleY)
+        .attr("fill", colors.text)
+        .style("font-family", titleFont)
+        .style("font-size", `${Math.max(21, Math.min(titleParts.line1.length > 24 ? 23 : 29, firstLineFitSize))}px`)
+        .style("font-weight", 900)
+        .style("letter-spacing", "0px")
+        .text(titleParts.line1);
+
+    const highlight = svg.append("text")
+        .attr("class", "title-highlight")
+        .attr("x", titleX)
+        .attr("fill", colors.green)
+        .style("font-family", titleFont)
+        .style("font-size", `${highlightSize}px`)
+        .style("font-weight", 900)
+        .style("letter-spacing", "0px");
+    titleParts.highlightLines.forEach((line, i) => {
+        highlight.append("tspan")
+            .attr("x", titleX)
+            .attr("y", titleY + 48 + i * (highlightSize + 3))
+            .attr("fill", i % 2 ? colors.cyan : colors.green)
+            .text(line);
+    });
+
+    const pillY = titleY + 54 + highlightCount * (highlightSize + 3);
+    const pillText = compactLabel(titleParts.pill, 28).toUpperCase();
+    const pillW = Math.min(width - titleX - 24, Math.max(240, pillText.length * 14 + 34));
+    const pill = svg.append("g")
+        .attr("class", "title-scope-pill")
+        .attr("transform", `translate(${titleX},${pillY})`);
+    pill.append("rect")
+        .attr("width", pillW)
+        .attr("height", 34)
+        .attr("rx", 18)
+        .attr("fill", "#0a4f73")
+        .attr("opacity", 0.76);
+    pill.append("text")
+        .attr("x", pillW / 2)
+        .attr("y", 24)
+        .attr("text-anchor", "middle")
+        .attr("fill", "#ffffff")
+        .style("font-family", font)
+        .style("font-size", pillText.length > 23 ? "17px" : "20px")
+        .style("font-weight", 900)
+        .style("letter-spacing", "0px")
+        .text(pillText);
+
+    const subtitleY = pillY + 52;
+    const subtitle = svg.append("text")
+        .attr("class", "subtitle")
+        .attr("x", titleX)
+        .attr("fill", colors.muted)
+        .style("font-family", font)
+        .style("font-size", "15px")
+        .style("font-weight", 500);
+    appendLines(subtitle, wrapWords(subtitleText, 47, 2), titleX, subtitleY, 20);
+
+    const headerBottom = subtitleY + 42;
+    const chartX = 27;
+    const chartRight = width - 27;
+    const rowW = chartRight - chartX;
+    const yearY = Math.max(246, headerBottom + 16);
+    const railX = chartX + 112;
+    const railW = rowW - 118;
+    const rowTop = yearY + 46;
+    const rowGap = visibleGroups.length >= 6 ? 10 : 14;
+    const bottomMargin = 124;
+    const rowH = Math.max(76, Math.min(118, (height - rowTop - bottomMargin - rowGap * (visibleGroups.length - 1)) / Math.max(1, visibleGroups.length)));
+    const leftRankW = 62;
+    const iconW = 92;
+    const plotX = leftRankW + iconW + 25;
+    const endpointW = 92;
+    const plotW = rowW - plotX - endpointW - 16;
+
+    const xDomain = xValues.map(d => d.key);
+    const linearX = xValues.length > 1 && xValues.every(d => Number.isFinite(d.sort)) && new Set(xValues.map(d => d.sort)).size === xValues.length;
+    const xPointScale = d3.scalePoint()
+        .domain(xDomain)
+        .range([plotX + 6, plotX + plotW - 6])
+        .padding(0);
+    const railPointScale = d3.scalePoint()
+        .domain(xDomain)
+        .range([railX + 34 - chartX, railX + railW - 34 - chartX])
+        .padding(0);
+    const xLinearScale = d3.scaleLinear()
+        .domain(d3.extent(xValues, d => d.sort))
+        .range([plotX + 6, plotX + plotW - 6]);
+    const railLinearScale = d3.scaleLinear()
+        .domain(d3.extent(xValues, d => d.sort))
+        .range([railX + 34 - chartX, railX + railW - 34 - chartX]);
+    function xPosByKey(key) {
+        return linearX ? xLinearScale(xSortByKey.get(key)) : xPointScale(key);
+    }
+    function railPosByTick(tick) {
+        return linearX ? railLinearScale(tick.sort) : railPointScale(tick.key);
+    }
+    function buildDisplayTicks() {
+        if (!linearX || xValues.length > 7) return xValues;
+        const numericYears = xValues.every(d => Number.isInteger(Number(d.raw)) && Number(d.raw) >= 1000 && Number(d.raw) <= 9999);
+        if (!numericYears) return xValues;
+        const out = [xValues[0]];
+        for (let i = 1; i < xValues.length; i += 1) {
+            const prev = Number(xValues[i - 1].raw);
+            const cur = Number(xValues[i].raw);
+            if (i > 1 && i < xValues.length - 1 && cur - prev >= 4) {
+                const mid = prev + Math.round((cur - prev) / 2);
+                out.push({ key: `tick-${mid}`, raw: mid, sort: mid, generatedTick: true });
+            }
+            out.push(xValues[i]);
+        }
+        return out.length <= 8 ? out : xValues;
+    }
+    const displayTicks = buildDisplayTicks();
+
+    const yearRail = svg.append("g")
+        .attr("class", "year-rail")
+        .attr("transform", `translate(${chartX},${yearY})`);
+    yearRail.append("rect")
+        .attr("x", railX - chartX)
+        .attr("y", 0)
+        .attr("width", railW)
+        .attr("height", 34)
+        .attr("rx", 17)
+        .attr("fill", "rgba(22, 43, 65, 0.88)")
+        .attr("stroke", colors.railStroke)
+        .attr("stroke-width", 1.2);
+    yearRail.selectAll(".year-label")
+        .data(displayTicks)
+        .enter()
+        .append("text")
+        .attr("class", "year-label")
+        .attr("x", d => railPosByTick(d))
+        .attr("y", 23)
+        .attr("text-anchor", "middle")
+        .attr("fill", "#ffffff")
+        .style("font-family", font)
+        .style("font-size", displayTicks.length > 7 ? "11px" : displayTicks.length > 6 ? "13px" : "15px")
+        .style("font-weight", 800)
+        .text(d => formatX(d.raw));
+
+    const rowLayer = svg.append("g")
+        .attr("class", "bump04-row-layer")
+        .attr("data-overlap-avoid", "title subtitle header_topic_art_slot year_rail");
+
+    visibleGroups.forEach((group, index) => {
+        const color = colorFor(index);
+        const rowY = rowTop + index * (rowH + rowGap);
+        const safeGroup = group.replace(/[^a-zA-Z0-9_-]/g, "-");
+        const areaGradientId = `bump04-area-${index}`;
+        const areaGradient = defs.append("linearGradient")
+            .attr("id", areaGradientId)
+            .attr("x1", "0%")
+            .attr("x2", "0%")
+            .attr("y1", "0%")
+            .attr("y2", "100%");
+        areaGradient.append("stop").attr("offset", "0%").attr("stop-color", color).attr("stop-opacity", 0.44);
+        areaGradient.append("stop").attr("offset", "100%").attr("stop-color", color).attr("stop-opacity", 0.05);
+
+        const row = rowLayer.append("g")
+            .attr("class", "series-row-card")
+            .attr("data-group", group)
+            .attr("data-row-index", index)
+            .attr("transform", `translate(${chartX},${rowY})`);
+
+        row.append("rect")
+            .attr("class", "row-card-bg")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", rowW)
+            .attr("height", rowH)
+            .attr("rx", 9)
+            .attr("fill", "rgba(6, 24, 43, 0.84)")
+            .attr("stroke", colors.stroke)
+            .attr("filter", index === 0 ? "url(#bump04-card-shadow)" : null);
+
+        row.append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", rowW)
+            .attr("height", rowH)
+            .attr("rx", 9)
+            .attr("fill", color)
+            .attr("opacity", 0.035);
+
+        const rank = row.append("g")
+            .attr("class", "rank-circle")
+            .attr("transform", `translate(${leftRankW / 2},${rowH / 2})`);
+        rank.append("circle")
+            .attr("r", Math.min(27, rowH * 0.31))
+            .attr("fill", color)
+            .attr("opacity", 0.48)
+            .attr("stroke", color)
+            .attr("stroke-width", 3);
+        rank.append("circle")
+            .attr("r", Math.min(21, rowH * 0.24))
+            .attr("fill", "#153654")
+            .attr("opacity", 0.76);
+        rank.append("text")
+            .attr("text-anchor", "middle")
+            .attr("y", 11)
+            .attr("fill", "#ffffff")
+            .style("font-family", font)
+            .style("font-size", rowH < 90 ? "24px" : "30px")
+            .style("font-weight", 900)
+            .text(index + 1);
+
+        const icon = row.append("g")
+            .attr("class", "row-group-icon-slot")
+            .attr("data-reserved-slot", `row_group_icon_slot_${index + 1}`)
+            .attr("data-asset-slot", "row_group_icon_slot_N")
+            .attr("data-group", group)
+            .attr("data-slot-anchor", "row-left-icon-column")
+            .attr("data-asset-source-policy", "retrieval_asset")
+            .attr("data-collision-rule", "avoid-rank-circle-group-label-plot")
+            .attr("transform", `translate(${leftRankW + 48},${rowH * 0.38})`);
+        icon.append("rect")
+            .attr("x", -24)
+            .attr("y", -23)
+            .attr("width", 48)
+            .attr("height", 46)
+            .attr("rx", 14)
+            .attr("fill", color)
+            .attr("opacity", 0.18)
+            .attr("stroke", color)
+            .attr("stroke-dasharray", "4 5");
+        icon.append("text")
+            .attr("text-anchor", "middle")
+            .attr("y", 8)
+            .attr("fill", color)
+            .style("font-family", font)
+            .style("font-size", "19px")
+            .style("font-weight", 900)
+            .text(initials(group));
+
+        row.append("text")
+            .attr("class", "group-label")
+            .attr("x", leftRankW + 48)
+            .attr("y", rowH - 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", color)
+            .style("font-family", font)
+            .style("font-size", humanize(group).length > 12 ? "13px" : "16px")
+            .style("font-weight", 900)
+            .text(compactLabel(group, 13));
+
+        row.selectAll(".vertical-guide")
+        .data(displayTicks)
+        .enter()
+        .append("line")
+        .attr("class", "vertical-guide")
+        .attr("x1", d => linearX ? xLinearScale(d.sort) : xPointScale(d.key))
+        .attr("x2", d => linearX ? xLinearScale(d.sort) : xPointScale(d.key))
+            .attr("y1", 14)
+            .attr("y2", rowH - 16)
+            .attr("stroke", "#41607c")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3 4")
+            .attr("opacity", 0.28);
+
+        const series = xValues.map(x => {
+            const found = (byGroup.get(group) || []).find(d => d.xKey === x.key);
+            return found || { xKey: x.key, xRaw: x.raw, y: null, group };
+        }).filter(d => Number.isFinite(d.y));
+        const extent = d3.extent(series, d => d.y);
+        const delta = Math.max(1, (extent[1] - extent[0]) || Math.abs(extent[0]) * 0.05 || 1);
+        const yScale = d3.scaleLinear()
+            .domain([extent[0] - delta * 0.18, extent[1] + delta * 0.34])
+            .range([rowH - 38, 28]);
+        const line = d3.line()
+            .x(d => xPosByKey(d.xKey))
+            .y(d => yScale(d.y))
+            .curve(d3.curveMonotoneX);
+        const area = d3.area()
+            .x(d => xPosByKey(d.xKey))
+            .y0(rowH - 16)
+            .y1(d => yScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+        row.append("path")
+            .datum(series)
+            .attr("class", "series-area")
+            .attr("fill", `url(#${areaGradientId})`)
+            .attr("d", area);
+        row.append("path")
+            .datum(series)
+            .attr("class", "series-line")
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", rowH < 90 ? 3.5 : 4.5)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("filter", "url(#bump04-soft-glow)")
+            .attr("d", line);
+
+        row.selectAll(".point")
+            .data(series)
+            .enter()
+            .append("circle")
+            .attr("class", "point")
+            .attr("cx", d => xPosByKey(d.xKey))
+            .attr("cy", d => yScale(d.y))
+            .attr("r", rowH < 90 ? 5.8 : 6.8)
+            .attr("fill", color)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 2.2);
+
+        const showEvery = xValues.length > 7 ? Math.ceil(xValues.length / 6) : 1;
+        row.selectAll(".point-label")
+            .data(series.filter(d => {
+                const idx = xIndex.get(d.xKey) || 0;
+                return idx === 0 || idx === xValues.length - 1 || idx % showEvery === 0;
+            }))
+            .enter()
+            .append("text")
+            .attr("class", "point-label")
+            .attr("x", d => xPosByKey(d.xKey))
+            .attr("y", d => Math.max(18, yScale(d.y) - 13))
+            .attr("text-anchor", "middle")
+            .attr("fill", "#ffffff")
+            .style("font-family", font)
+            .style("font-size", rowH < 90 ? "12px" : "14px")
+            .style("font-weight", 800)
+            .text(d => formatValue(d.y, yUnit));
+
+        const lastPoint = series[series.length - 1];
+        const endpointText = formatValue(lastPoint?.y, yUnit, { includeUnit: true });
+        row.append("text")
+            .attr("class", "endpoint-value")
+            .attr("x", rowW - 16)
+            .attr("y", rowH / 2 + 14)
+            .attr("text-anchor", "end")
+            .attr("fill", color)
+            .style("font-family", font)
+            .style("font-size", endpointText.length > 5 ? "26px" : "31px")
+            .style("font-weight", 900)
+            .text(endpointText);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_05.js

@@ -0,0 +1,497 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_plain_chart_01",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "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 || {};
+    // 获取颜色
+    const getColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary", fallback: "#888" }).value;
+    };
+    const withOpacity = (color, opacity) => {
+        const parsed = d3.color(color);
+        if (!parsed) return color;
+        parsed.opacity = opacity;
+        return parsed.formatRgb();
+    };
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 设置尺寸和边距 - 左侧为参考图中的排行卡片和标签列留空间
+    const width = variables.width;
+    const height = variables.height;
+    const margin = {
+        top: Math.max(76, height * 0.15),
+        right: Math.max(28, width * 0.06),
+        bottom: Math.max(34, height * 0.06),
+        left: Math.max(176, width * 0.31)
+    };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值和X值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+    
+    // 创建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 defs = svg.append("defs");
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", "bump-plain-01-bg")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#F5FAFE");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#FFFFFF");
+    svg.append("rect")
+        .attr("class", "bump-plain-01-chart-surface")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump-plain-01-bg)");
+
+    const rowShadow = defs.append("filter")
+        .attr("id", "bump-plain-01-row-shadow")
+        .attr("x", "-6%")
+        .attr("y", "-12%")
+        .attr("width", "112%")
+        .attr("height", "130%");
+    rowShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 3)
+        .attr("flood-color", "#1E4B76")
+        .attr("flood-opacity", 0.08);
+
+    svg.append("rect")
+        .attr("class", "bump-plain-header-art-slot")
+        .attr("data-asset-slot", "header_water_illustration_slot")
+        .attr("data-reserved-slot", "header_water_illustration_slot")
+        .attr("data-anchor", "top_right_header")
+        .attr("data-collision-rule", "avoid title subtitle year chips and chart rows")
+        .attr("data-asset-source-policy", "image2_or_retrieval_reserved_slot_no_raster")
+        .attr("data-bbox", `${width * 0.65},10,${width * 0.26},${Math.max(48, margin.top - 24)}`)
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("x", width * 0.65)
+        .attr("y", 10)
+        .attr("width", width * 0.26)
+        .attr("height", Math.max(48, margin.top - 24))
+        .attr("rx", 12)
+        .attr("fill", "none")
+        .attr("stroke", "none");
+
+    // 创建图表组
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // 为每个组分配固定位置 (1到groups.length)
+    const fixedGroupPositions = {};
+    groups.forEach((group, i) => {
+        fixedGroupPositions[group] = i + 1;
+    });
+    
+    // 1. 计算每个x下各group的排名
+    // 构建排名数据结构：{ group1: [{x, rank}], group2: ... }
+    const rankData = {};
+    
+    // 初始化每个group的数据结构
+    groups.forEach(group => {
+        rankData[group] = [];
+    });
+    
+    // 为每个时间点和每个组创建排名数据
+    xValues.forEach(x => {
+        // 取出该x下所有group的数据
+        const items = chartData.filter(d => d[xField] === x);
+        
+        // 记录该时间点存在的组
+        const existingGroups = items.map(d => d[groupField]);
+        
+        // 按yField降序排序（y越大排名越高）
+        items.sort((a, b) => b[yField] - a[yField]);
+        
+        // 为有数据的组计算排名
+        const rankByGroup = {};
+        items.forEach((d, i) => {
+            rankByGroup[d[groupField]] = i + 1; // 排名从1开始
+        });
+        
+        // 为每个组添加排名数据，无论是否存在
+        groups.forEach(group => {
+            if (existingGroups.includes(group)) {
+                // 该组在该时间点有数据
+                const dataItem = items.find(d => d[groupField] === group);
+                rankData[group].push({
+                    x: x,
+                    rank: rankByGroup[group],
+                    value: dataItem[yField],
+                    missing: false
+                });
+            } else {
+                // 该组在该时间点没有数据
+                
+                // 查找该组最近的有效排名
+                let nearestRank = null;
+                // 先尝试找前一个时间点的排名
+                const groupData = rankData[group];
+                if (groupData && groupData.length > 0) {
+                    const lastValidPoint = [...groupData].reverse().find(d => !d.missing);
+                    if (lastValidPoint) {
+                        nearestRank = lastValidPoint.rank;
+                    }
+                }
+                
+                // 如果找不到有效的历史排名，使用固定位置
+                if (nearestRank === null) {
+                    nearestRank = fixedGroupPositions[group];
+                }
+                
+                rankData[group].push({
+                    x: x,
+                    rank: nearestRank, // 使用最近的有效排名或固定位置
+                    value: null,
+                    missing: true
+                });
+            }
+        });
+    });
+    
+    // 对每个组的数据按x值排序
+    groups.forEach(group => {
+        rankData[group].sort((a, b) => {
+            const dateA = chartUtils.format.parseDate(a.x);
+            const dateB = chartUtils.format.parseDate(b.x);
+            return dateA - dateB;
+        });
+    });
+
+    // 2. y轴比例尺：排名（1在顶部）
+    const yScale = d3.scaleLinear()
+        .domain([1, groups.length])
+        .range([0, innerHeight]);
+
+    const yValues = chartData.map(d => +d[yField]).filter(d => d !== null && d !== undefined && !Number.isNaN(d));
+    const yMin = Math.min(...yValues);
+    const yMax = Math.max(...yValues);
+    const rowStep = groups.length > 1 ? innerHeight / (groups.length - 1) : innerHeight;
+    const rowBandHeight = Math.max(42, Math.min(72, rowStep * 0.70));
+    const rowX = -margin.left + Math.max(22, width * 0.035);
+    const rowW = width - Math.max(44, width * 0.07);
+    const tabW = Math.max(38, Math.min(52, rowBandHeight * 0.72));
+    const cardGap = 7;
+    const cardW = Math.max(108, Math.min(132, margin.left * 0.62));
+    const labelCardX = rowX + tabW + cardGap;
+    const plotStartGap = Math.max(70, labelCardX + cardW + 54);
+    const plotEnd = innerWidth - Math.max(12, width * 0.02);
+    const shiftedXScale = xScale.copy().range([plotStartGap, plotEnd]);
+    const nodeR = Math.max(9, Math.min(17, rowBandHeight * 0.22, (plotEnd - plotStartGap) / Math.max(18, xValues.length * 5.2)));
+    const labelFont = Math.max(8, Math.min(11, nodeR * 0.72));
+
+    const truncateToWidth = (text, maxWidth, fontSize, fontWeight = "700") => {
+        const value = String(text);
+        if (chartUtils.text.measure(g, value, { fontSize, fontWeight }).width <= maxWidth) {
+            return value;
+        }
+        let trimmed = value;
+        while (trimmed.length > 3 && chartUtils.text.measure(g, `${trimmed}...`, { fontSize, fontWeight }).width > maxWidth) {
+            trimmed = trimmed.slice(0, -1);
+        }
+        return `${trimmed}...`;
+    };
+
+    groups.forEach((group, i) => {
+        const rowY = yScale(fixedGroupPositions[group]);
+        const color = getColor(group);
+        g.append("rect")
+            .attr("class", "bump-plain-row-panel")
+            .attr("data-group", group)
+            .attr("x", rowX)
+            .attr("y", rowY - rowBandHeight / 2)
+            .attr("width", rowW)
+            .attr("height", rowBandHeight)
+            .attr("rx", 11)
+            .attr("fill", i % 2 === 0 ? "#FFFFFF" : "#F3F8FD")
+            .attr("stroke", "#D8EAF6")
+            .attr("stroke-width", 1)
+            .attr("filter", "url(#bump-plain-01-row-shadow)");
+
+        g.append("rect")
+            .attr("class", "bump-plain-rank-tab")
+            .attr("data-group", group)
+            .attr("x", rowX)
+            .attr("y", rowY - rowBandHeight / 2)
+            .attr("width", tabW)
+            .attr("height", rowBandHeight)
+            .attr("rx", 9)
+            .attr("fill", color);
+        g.append("rect")
+            .attr("x", rowX + tabW - 10)
+            .attr("y", rowY - rowBandHeight / 2)
+            .attr("width", 10)
+            .attr("height", rowBandHeight)
+            .attr("fill", color);
+        g.append("text")
+            .attr("class", "bump-plain-rank-label")
+            .attr("x", rowX + tabW / 2)
+            .attr("y", rowY + 6)
+            .attr("text-anchor", "middle")
+            .attr("font-size", Math.max(18, rowBandHeight * 0.36))
+            .attr("font-weight", 800)
+            .attr("fill", "#FFFFFF")
+            .text(i + 1);
+
+        g.append("rect")
+            .attr("class", "bump-plain-label-card")
+            .attr("data-group", group)
+            .attr("x", labelCardX)
+            .attr("y", rowY - rowBandHeight / 2 + 6)
+            .attr("width", cardW)
+            .attr("height", rowBandHeight - 12)
+            .attr("rx", 8)
+            .attr("fill", withOpacity(color, 0.10))
+            .attr("stroke", withOpacity(color, 0.28))
+            .attr("stroke-width", 1);
+        const slotR = Math.max(13, Math.min(19, rowBandHeight * 0.24));
+        const slotCx = labelCardX + 17 + slotR;
+        const slotId = `group_icon_slot_${i + 1}`;
+        g.append("circle")
+            .attr("class", "bump-plain-group-icon-slot")
+            .attr("data-asset-slot", slotId)
+            .attr("data-reserved-slot", "group_icon_slot")
+            .attr("data-group", group)
+            .attr("data-anchor", "row_label_card_centerline")
+            .attr("data-collision-rule", "stay inside label card and avoid group label and latest value text")
+            .attr("data-asset-source-policy", "image2_or_retrieval_reserved_slot_no_raster")
+            .attr("data-bbox", `${slotCx - slotR},${rowY - slotR},${slotR * 2},${slotR * 2}`)
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("cx", slotCx)
+            .attr("cy", rowY)
+            .attr("r", slotR)
+            .attr("fill", withOpacity(color, 0.08))
+            .attr("stroke", withOpacity(color, 0.34))
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "3 3");
+        g.append("text")
+            .attr("class", "bump-plain-group-label")
+            .attr("x", slotCx + slotR + 9)
+            .attr("y", rowY - 4)
+            .attr("font-size", Math.max(11, Math.min(13, rowBandHeight * 0.19)))
+            .attr("font-weight", 800)
+            .attr("fill", "#173A5E")
+            .text(truncateToWidth(group, cardW - (slotCx - labelCardX) - slotR - 18, 13, "800"));
+        const latest = [...rankData[group]].reverse().find(d => !d.missing);
+        if (latest) {
+            g.append("text")
+                .attr("class", "bump-plain-card-value")
+                .attr("x", slotCx + slotR + 9)
+                .attr("y", rowY + 15)
+                .attr("font-size", Math.max(9, Math.min(11, rowBandHeight * 0.16)))
+                .attr("font-weight", 700)
+                .attr("fill", withOpacity("#173A5E", 0.72))
+                .text(`${xFormat(chartUtils.format.parseDate(latest.x))}: ${chartUtils.format.number(latest.value).text}`);
+        }
+    });
+
+    // 3. 绘制线条
+    groups.forEach(group => {
+        const groupRanks = rankData[group];
+        
+        // 使用定义的线条生成器来创建中断的线条
+        const lineGenerator = d3.line()
+            .x(d => shiftedXScale(chartUtils.format.parseDate(d.x)))
+            .y(d => yScale(d.rank))
+            .curve(d3.curveMonotoneX)
+            .defined(d => !d.missing); // 只在有效数据点之间绘制线条
+            
+        g.append("path")
+            .datum(groupRanks)
+            .attr("class", "bump-plain-connector")
+            .attr("data-group", group)
+            .attr("fill", "none")
+            .attr("stroke", getColor(group))
+            .attr("stroke-width", 2.6)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("opacity", 0.82)
+            .attr("d", lineGenerator);
+        
+        const radiusScale = d3.scaleLinear()
+            .domain([yMin, yMax])
+            .range([nodeR * 0.78, nodeR * 1.08]);
+
+        // 为每个组生成一个安全的CSS类名
+        const safeGroupId = `group-${groups.indexOf(group)}`;
+
+        // 绘制每个点的圆点 - 只绘制非缺失的点
+        g.selectAll(`.dot-${safeGroupId}`)
+            .data(groupRanks.filter(d => !d.missing))
+            .enter()
+            .append("circle")
+            .attr("class", `bump-plain-node dot-${safeGroupId}`)
+            .attr("data-group", group)
+            .attr("data-x", d => d.x)
+            .attr("data-value", d => d.value)
+            .attr("cx", d => shiftedXScale(chartUtils.format.parseDate(d.x)))
+            .attr("cy", d => yScale(d.rank))
+            .attr("r", d => radiusScale(d.value))
+            .attr("fill", getColor(group))
+            .attr("stroke", "#fff")
+            .attr("stroke-width", 2.4);
+
+        // 添加数值标签 - 只为非缺失的点添加
+        g.selectAll(`.label-${safeGroupId}`)
+            .data(groupRanks.filter(d => !d.missing))
+            .enter()
+            .append("text")
+            .attr("class", `bump-plain-value-label label-${safeGroupId}`)
+            .attr("x", d => shiftedXScale(chartUtils.format.parseDate(d.x)))
+            .attr("y", d => yScale(d.rank))
+            .attr("text-anchor", "middle")
+            .attr("dy", "0.36em")
+            .attr("font-size", labelFont)
+            .attr("fill", () => chartUtils.color.brightness(getColor(group)) > 0.62 ? "#173A5E" : "#FFFFFF")
+            .attr("font-weight", 800)
+            .text(d => chartUtils.format.number(d.value, { maximumFractionDigits: 0 }).text);
+    });
+
+    // 优化时间标签避免重叠
+    const optimizeTimeLabels = (ticks, format, availableWidth) => {
+        if (ticks.length <= 1) return ticks;
+        
+        // 计算所有标签的宽度
+        const calculateLabelWidth = (tick) => {
+            return chartUtils.text.measure(g, format(tick), { fontSize: 14 }).width + 20; // 添加一些边距
+        };
+        
+        const tickWidths = ticks.map(tick => calculateLabelWidth(tick));
+        
+        // 检查是否会重叠
+        let willOverlap = false;
+        let positions = ticks.map(t => xScale(t));
+        
+        for (let i = 0; i < positions.length - 1; i++) {
+            const gap = positions[i+1] - positions[i];
+            if (gap < (tickWidths[i] + tickWidths[i+1]) / 2) {
+                willOverlap = true;
+                break;
+            }
+        }
+        
+        // 如果不会重叠，显示所有标签
+        if (!willOverlap) {
+            return ticks;
+        }
+        
+        // 计算可以显示的标签数量
+        const averageWidth = tickWidths.reduce((a, b) => a + b, 0) / ticks.length;
+        let maxLabels = Math.floor(availableWidth / averageWidth);
+        
+        // 确保至少显示首尾标签
+        if (maxLabels <= 2) {
+            return [ticks[0], ticks[ticks.length - 1]];
+        }
+        
+        // 均匀选择标签
+        const step = Math.ceil(ticks.length / maxLabels);
+        const optimizedTicks = [];
+        
+        for (let i = 0; i < ticks.length; i += step) {
+            optimizedTicks.push(ticks[i]);
+        }
+        
+        // 确保包含最后一个标签
+        if (optimizedTicks[optimizedTicks.length - 1] !== ticks[ticks.length - 1]) {
+            optimizedTicks.push(ticks[ticks.length - 1]);
+        }
+        
+        return optimizedTicks;
+    };
+    
+    // 优化时间标签
+    const optimizedXTicks = optimizeTimeLabels(xTicks, xFormat, innerWidth);
+
+    // 添加顶部时间标签
+    optimizedXTicks.forEach(tick => {
+        g.append("text")
+            .attr("class", "bump-plain-year-chip")
+            .attr("x", shiftedXScale(tick))
+            .attr("y", -36)
+            .attr("text-anchor", "middle")
+            .attr("font-size", 11)
+            .attr("font-weight", 800)
+            .attr("fill", "#FFFFFF")
+            .text(xFormat(tick));
+    });
+
+    optimizedXTicks.forEach(tick => {
+        const label = xFormat(tick);
+        const chipW = Math.max(32, chartUtils.text.measure(g, label, { fontSize: 11, fontWeight: "800" }).width + 14);
+        g.insert("rect", ".bump-plain-year-chip")
+            .attr("class", "bump-plain-year-chip-bg")
+            .attr("x", shiftedXScale(tick) - chipW / 2)
+            .attr("y", -51)
+            .attr("width", chipW)
+            .attr("height", 22)
+            .attr("rx", 7)
+            .attr("fill", "#143E70");
+    });
+
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/bump_chart_06.js

@@ -0,0 +1,476 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_chart_06",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [4, 12],
+        [0, "inf"],
+        [3, 10]
+    ],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+
+
+function makeChart(containerSelector, data) {
+    // Reference-targeted rank-card bump chart for bump_chart_06.
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    let colorByGroup = {};
+    const resolveInputColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary", fallback: "#888" }).value || "#356FAE";
+    };
+    const getColor = (group) => {
+        return colorByGroup[group] || resolveInputColor(group);
+    };
+
+    d3.select(containerSelector).html("");
+
+    const width = variables.width;
+    const height = variables.height;
+    const margin = {
+        top: Math.max(70, Math.min(92, height * 0.16)),
+        right: Math.max(24, Math.min(42, width * 0.06)),
+        bottom: Math.max(22, Math.min(40, height * 0.07)),
+        left: Math.max(210, Math.min(265, width * 0.43))
+    };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+
+    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");
+
+    svg.append("rect")
+        .attr("class", "bump06-chart-bg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "#EAF6FB");
+
+    const defs = svg.append("defs");
+    const rowShadow = defs.append("filter")
+        .attr("id", "bump06-row-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-24%")
+        .attr("width", "116%")
+        .attr("height", "160%");
+    rowShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 5)
+        .attr("stdDeviation", 7)
+        .attr("flood-color", "#0A3152")
+        .attr("flood-opacity", 0.10);
+
+    defs.append("clipPath")
+        .attr("id", "bump06-card-clip")
+        .append("rect")
+        .attr("x", 12)
+        .attr("y", margin.top - 48)
+        .attr("width", Math.max(1, width - 24))
+        .attr("height", Math.max(1, height - margin.top - margin.bottom + 96))
+        .attr("rx", 16);
+
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const axisInfo = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    const xScale = d3.scalePoint()
+        .domain(xValues)
+        .range([0, innerWidth])
+        .padding(0.08);
+    const xTicks = xValues;
+    const xFormat = (tick) => axisInfo.xFormat(chartUtils.format.parseDate(tick));
+
+    const rankData = {};
+    groups.forEach(group => {
+        rankData[group] = [];
+    });
+
+    xValues.forEach(x => {
+        const items = chartData.filter(d => d[xField] === x);
+        items.sort((a, b) => b[yField] - a[yField]);
+
+        const groupsWithData = new Set(items.map(d => d[groupField]));
+        items.forEach((d, i) => {
+            rankData[d[groupField]].push({
+                x: d[xField],
+                rank: i + 1,
+                value: d[yField],
+                hasData: true
+            });
+        });
+
+        groups.forEach(group => {
+            if (!groupsWithData.has(group)) {
+                const existingEntries = rankData[group];
+                const lastRank = existingEntries.length > 0 ? existingEntries[existingEntries.length - 1].rank : groups.length;
+                rankData[group].push({
+                    x: x,
+                    rank: lastRank,
+                    value: null,
+                    hasData: false
+                });
+            }
+        });
+    });
+
+    groups.forEach(group => {
+        rankData[group].sort((a, b) => {
+            return chartUtils.format.parseDate(a.x) - chartUtils.format.parseDate(b.x);
+        });
+    });
+
+    const yScale = d3.scaleLinear()
+        .domain([1, groups.length])
+        .range([0, innerHeight]);
+
+    const initialRankByGroup = {};
+    groups.forEach(group => {
+        const first = rankData[group].find(d => d.hasData) || rankData[group][0];
+        initialRankByGroup[group] = first ? first.rank : groups.indexOf(group) + 1;
+    });
+    const labelOrder = [...groups].sort((a, b) => initialRankByGroup[a] - initialRankByGroup[b]);
+    const fallbackPalette = ["#159447", "#D21D1D", "#FF7A18", "#164A91", "#F4C400", "#49BBD2", "#8B64B4", "#2B8F73", "#D94F94", "#6A7A24"];
+    const resolvedColors = groups.map(group => resolveInputColor(group).toLowerCase());
+    const hasDuplicateColors = new Set(resolvedColors).size < resolvedColors.length;
+    labelOrder.forEach((group, i) => {
+        colorByGroup[group] = hasDuplicateColors ? fallbackPalette[i % fallbackPalette.length] : resolveInputColor(group);
+    });
+
+    const rowStep = groups.length > 1 ? innerHeight / (groups.length - 1) : innerHeight;
+    const rowBandHeight = Math.max(54, Math.min(88, rowStep * 0.76));
+    const rowBandX = -margin.left + Math.max(12, width * 0.018);
+    const rowBandW = width - Math.max(24, width * 0.036);
+    const tabW = Math.max(28, Math.min(44, rowBandHeight * 0.48));
+    const iconR = Math.max(16, Math.min(29, rowBandHeight * 0.34));
+    const iconX = rowBandX + tabW + iconR + Math.max(18, width * 0.025);
+    const labelX = iconX + iconR + Math.max(22, width * 0.034);
+    const labelMaxWidth = Math.max(78, margin.left - (labelX + margin.left) - 16);
+
+    const measureText = (text, fontSize, fontWeight = "700") => {
+        return chartUtils.text.measure(g, String(text), { fontSize, fontWeight }).width;
+    };
+
+    const truncateToWidth = (text, maxWidth, fontSize, fontWeight = "800") => {
+        const value = String(text);
+        if (measureText(value, fontSize, fontWeight) <= maxWidth) return value;
+        let trimmed = value;
+        while (trimmed.length > 3 && measureText(`${trimmed}...`, fontSize, fontWeight) > maxWidth) {
+            trimmed = trimmed.slice(0, -1);
+        }
+        return `${trimmed}...`;
+    };
+
+    const wrapToLines = (text, maxWidth, fontSize, fontWeight = "800", maxLines = 2) => {
+        const words = String(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (measureText(candidate, fontSize, fontWeight) <= maxWidth || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) return lines;
+        const clipped = lines.slice(0, maxLines);
+        clipped[maxLines - 1] = truncateToWidth(clipped[maxLines - 1], maxWidth, fontSize, fontWeight);
+        return clipped;
+    };
+
+    const optimizeTimeLabels = (ticks, format, availableWidth) => {
+        if (ticks.length <= 1) return ticks;
+        const calculateLabelWidth = (tick) => {
+            return chartUtils.text.measure(g, format(tick), { fontSize: 13, fontWeight: "800" }).width + 20;
+        };
+        const tickWidths = ticks.map(tick => calculateLabelWidth(tick));
+        let willOverlap = false;
+        let positions = ticks.map(t => xScale(t));
+        for (let i = 0; i < positions.length - 1; i++) {
+            const gap = positions[i+1] - positions[i];
+            if (gap < (tickWidths[i] + tickWidths[i+1]) / 2) {
+                willOverlap = true;
+                break;
+            }
+        }
+        if (!willOverlap) return ticks;
+        const averageWidth = tickWidths.reduce((a, b) => a + b, 0) / ticks.length;
+        let maxLabels = Math.floor(availableWidth / averageWidth);
+        if (maxLabels <= 2) return [ticks[0], ticks[ticks.length - 1]];
+        const step = Math.ceil(ticks.length / maxLabels);
+        const optimizedTicks = [];
+        for (let i = 0; i < ticks.length; i += step) {
+            optimizedTicks.push(ticks[i]);
+        }
+        if (optimizedTicks[optimizedTicks.length - 1] !== ticks[ticks.length - 1]) {
+            optimizedTicks.push(ticks[ticks.length - 1]);
+        }
+        return optimizedTicks;
+    };
+
+    const enforceTickGap = (ticks, minGap) => {
+        const kept = [];
+        ticks.forEach((tick, index) => {
+            const currentX = xScale(tick);
+            if (!kept.length) {
+                kept.push(tick);
+                return;
+            }
+            const prevX = xScale(kept[kept.length - 1]);
+            if (currentX - prevX >= minGap) {
+                kept.push(tick);
+            } else if (index === ticks.length - 1) {
+                kept[kept.length - 1] = tick;
+            }
+        });
+        return kept;
+    };
+
+    const optimizedXTicks = optimizeTimeLabels(xTicks, xFormat, innerWidth);
+    const visibleXTicks = enforceTickGap(optimizedXTicks, Math.max(34, width * 0.075));
+
+    labelOrder.forEach((group, i) => {
+        const rowY = yScale(initialRankByGroup[group]);
+        const color = getColor(group);
+        g.append("rect")
+            .attr("class", "bump06-row-card")
+            .attr("x", rowBandX)
+            .attr("y", rowY - rowBandHeight / 2)
+            .attr("width", rowBandW)
+            .attr("height", rowBandHeight)
+            .attr("rx", Math.min(18, rowBandHeight * 0.24))
+            .attr("fill", i % 2 === 0 ? "#FFFFFF" : "#F9FCFF")
+            .attr("filter", "url(#bump06-row-shadow)");
+
+        g.append("rect")
+            .attr("class", "bump06-rank-tab")
+            .attr("x", rowBandX)
+            .attr("y", rowY - rowBandHeight / 2 + 3)
+            .attr("width", tabW)
+            .attr("height", rowBandHeight - 6)
+            .attr("rx", Math.min(13, (rowBandHeight - 6) / 2))
+            .attr("fill", color);
+
+        g.append("text")
+            .attr("class", "bump06-rank-label")
+            .attr("x", rowBandX + tabW / 2)
+            .attr("y", rowY + 7)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "900")
+            .attr("font-size", Math.max(18, Math.min(29, rowBandHeight * 0.38)))
+            .attr("fill", "#FFFFFF")
+            .text(i + 1);
+
+        const slot = g.append("g")
+            .attr("class", "reserved-asset-slot bump-group-icon-slot")
+            .attr("data-asset-slot", "group-icon")
+            .attr("data-asset-source-policy", jsonData.images && jsonData.images.field && jsonData.images.field[group] ? "input_provided" : "neutral_placeholder")
+            .attr("data-anchor", `row-${i + 1}-center`)
+            .attr("data-collision-rule", "stay inside row card and left of plotted bump lines")
+            .attr("transform", `translate(${iconX},${rowY})`);
+        slot.append("circle")
+            .attr("r", iconR)
+            .attr("fill", "#EEF6FF")
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 3);
+        if (jsonData.images && jsonData.images.field && jsonData.images.field[group]) {
+            slot.append("image")
+                .attr("class", "input-provided-group-icon")
+                .attr("data-asset-slot", "group-icon-image")
+                .attr("data-asset-source-policy", "input_provided")
+                .attr("xlink:href", jsonData.images.field[group])
+                .attr("x", -iconR * 0.78)
+                .attr("y", -iconR * 0.78)
+                .attr("width", iconR * 1.56)
+                .attr("height", iconR * 1.56)
+                .attr("preserveAspectRatio", "xMidYMid meet");
+        } else {
+            slot.append("circle")
+                .attr("r", iconR * 0.58)
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", 2)
+                .attr("opacity", 0.30);
+            slot.append("text")
+                .attr("text-anchor", "middle")
+                .attr("dy", "0.35em")
+                .attr("font-family", "Arial, Helvetica, sans-serif")
+                .attr("font-weight", "900")
+                .attr("font-size", Math.max(9, iconR * 0.52))
+                .attr("fill", color)
+                .text(String(group).trim().slice(0, 1).toUpperCase());
+        }
+
+        const labelFontSize = Math.max(12, Math.min(18, rowBandHeight * 0.23));
+        const labelLines = wrapToLines(group, labelMaxWidth, labelFontSize, "900", rowBandHeight > 64 ? 2 : 1);
+        const label = g.append("text")
+            .attr("class", "bump06-group-label")
+            .attr("x", labelX)
+            .attr("y", rowY - ((labelLines.length - 1) * labelFontSize * 0.56))
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "900")
+            .attr("font-size", labelFontSize)
+            .attr("fill", "#0C2B55");
+        labelLines.forEach((line, lineIndex) => {
+            label.append("tspan")
+                .attr("x", labelX)
+                .attr("dy", lineIndex === 0 ? 0 : labelFontSize * 1.08)
+                .text(line);
+        });
+
+    });
+
+    const axisY = -62;
+    const railX = xScale(visibleXTicks[0]) - Math.max(34, width * 0.07);
+    const railW = xScale(visibleXTicks[visibleXTicks.length - 1]) - xScale(visibleXTicks[0]) + Math.max(68, width * 0.14);
+    g.append("rect")
+        .attr("class", "bump06-time-rail")
+        .attr("x", railX)
+        .attr("y", axisY - 18)
+        .attr("width", railW)
+        .attr("height", 36)
+        .attr("rx", 18)
+        .attr("fill", "#102C55");
+
+    visibleXTicks.forEach(tick => {
+        const tickX = xScale(tick);
+        g.append("line")
+            .attr("class", "bump06-vertical-guide")
+            .attr("x1", tickX)
+            .attr("x2", tickX)
+            .attr("y1", axisY + 20)
+            .attr("y2", innerHeight + rowBandHeight / 2)
+            .attr("stroke", "#C8D7E4")
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "4 5")
+            .attr("opacity", 0.95);
+
+        g.append("text")
+            .attr("x", tickX)
+            .attr("y", axisY + 6)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "900")
+            .attr("font-size", Math.max(12, Math.min(18, width * 0.027)))
+            .attr("fill", "#FFFFFF")
+            .text(xFormat(tick));
+    });
+
+    const allValues = chartData
+        .filter(d => d[yField] !== null && d[yField] !== undefined)
+        .map(d => +d[yField]);
+    const yMin = Math.min(...allValues);
+    const yMax = Math.max(...allValues);
+    const radiusScale = d3.scaleLinear()
+        .domain([yMin, yMax])
+        .range([
+            Math.max(5, Math.min(8, rowBandHeight * 0.10)),
+            Math.max(7, Math.min(11, rowBandHeight * 0.14))
+        ]);
+
+    groups.forEach(group => {
+        const groupRanks = rankData[group];
+        const validSegments = [];
+        let currentSegment = [];
+        groupRanks.forEach((d, i) => {
+            if (d.hasData) {
+                currentSegment.push(d);
+            } else if (currentSegment.length > 0) {
+                validSegments.push(currentSegment);
+                currentSegment = [];
+            }
+        });
+        if (currentSegment.length > 0) {
+            validSegments.push(currentSegment);
+        }
+
+        validSegments.forEach(segment => {
+            if (segment.length > 1) {
+                g.append("path")
+                    .datum(segment)
+                    .attr("fill", "none")
+                    .attr("stroke", getColor(group))
+                    .attr("stroke-width", Math.max(3, Math.min(4.5, rowBandHeight * 0.055)))
+                    .attr("stroke-linecap", "round")
+                    .attr("stroke-linejoin", "round")
+                    .attr("opacity", 0.98)
+                    .attr("d", d3.line()
+                        .x(d => xScale(d.x))
+                        .y(d => yScale(d.rank))
+                    );
+            }
+        });
+
+        groupRanks.forEach(d => {
+            if (d.hasData) {
+                const x = xScale(d.x);
+                const y = yScale(d.rank);
+                const r = radiusScale(+d.value);
+                g.append("circle")
+                    .attr("class", "bump06-value-node")
+                    .attr("data-group", group)
+                    .attr("data-x", d.x)
+                    .attr("cx", x)
+                    .attr("cy", y)
+                    .attr("r", r)
+                    .attr("fill", getColor(group))
+                    .attr("stroke", "#fff")
+                    .attr("stroke-width", 2.4);
+
+                const labelY = y - r - Math.max(5, rowBandHeight * 0.055);
+                g.append("text")
+                    .attr("class", "bump06-value-label")
+                    .attr("x", x)
+                    .attr("y", labelY)
+                    .attr("text-anchor", "middle")
+                    .attr("font-family", "Arial, Helvetica, sans-serif")
+                    .attr("font-weight", "900")
+                    .attr("font-size", Math.max(10, Math.min(16, rowBandHeight * 0.19)))
+                    .attr("fill", getColor(group))
+                    .text(chartUtils.format.autoText(+d.value));
+            }
+        });
+    });
+
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/bump_chart_07.js

@@ -0,0 +1,491 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_chart_07",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [4, 12],
+        [0, "inf"],
+        [3, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "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 colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorByGroup = {};
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+
+    const resolveInputColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary", fallback: "#2E7DD7" }).value || "#2E7DD7";
+    };
+    const getColor = (group) => colorByGroup[group] || resolveInputColor(group);
+
+    d3.select(containerSelector).html("");
+
+    const width = variables.width;
+    const height = variables.height;
+    const margin = {
+        top: Math.max(76, Math.min(96, height * 0.15)),
+        right: Math.max(24, Math.min(44, width * 0.06)),
+        bottom: Math.max(26, Math.min(44, height * 0.07)),
+        left: Math.max(220, Math.min(260, width * 0.42))
+    };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    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");
+
+    svg.append("rect")
+        .attr("class", "bump07-chart-bg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "none");
+
+    const defs = svg.append("defs");
+    const rowShadow = defs.append("filter")
+        .attr("id", "bump07-row-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-20%")
+        .attr("width", "116%")
+        .attr("height", "150%");
+    rowShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 5)
+        .attr("flood-color", "#173C5A")
+        .attr("flood-opacity", 0.11);
+
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const axisInfo = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    const xScale = d3.scalePoint()
+        .domain(xValues)
+        .range([0, innerWidth])
+        .padding(0.08);
+    const xFormat = (tick) => axisInfo.xFormat(chartUtils.format.parseDate(tick));
+
+    const rankData = {};
+    groups.forEach(group => {
+        rankData[group] = [];
+    });
+
+    xValues.forEach(x => {
+        const items = chartData
+            .filter(d => d[xField] === x)
+            .sort((a, b) => b[yField] - a[yField]);
+        const seen = new Set(items.map(d => d[groupField]));
+
+        items.forEach((d, i) => {
+            rankData[d[groupField]].push({
+                x: d[xField],
+                rank: i + 1,
+                value: +d[yField],
+                hasData: true
+            });
+        });
+
+        groups.forEach(group => {
+            if (!seen.has(group)) {
+                const existing = rankData[group];
+                const lastRank = existing.length ? existing[existing.length - 1].rank : groups.length;
+                rankData[group].push({ x, rank: lastRank, value: null, hasData: false });
+            }
+        });
+    });
+
+    groups.forEach(group => {
+        rankData[group].sort((a, b) => chartUtils.format.parseDate(a.x) - chartUtils.format.parseDate(b.x));
+    });
+
+    const baseRowStep = groups.length > 1 ? innerHeight / (groups.length - 1) : innerHeight;
+    const topRowClearance = Math.max(34, Math.min(48, baseRowStep * 0.24));
+    const bottomRowInset = Math.max(0, Math.min(16, baseRowStep * 0.06));
+    const effectiveRowHeight = Math.max(1, innerHeight - topRowClearance - bottomRowInset);
+    const rowStep = groups.length > 1 ? effectiveRowHeight / (groups.length - 1) : effectiveRowHeight;
+    const yScale = d3.scaleLinear()
+        .domain([1, Math.max(1, groups.length)])
+        .range([topRowClearance, innerHeight - bottomRowInset]);
+
+    const initialRankByGroup = {};
+    groups.forEach(group => {
+        const first = rankData[group].find(d => d.hasData) || rankData[group][0];
+        initialRankByGroup[group] = first ? first.rank : groups.indexOf(group) + 1;
+    });
+    const labelOrder = [...groups].sort((a, b) => initialRankByGroup[a] - initialRankByGroup[b]);
+
+    const fallbackPalette = ["#43A333", "#6E47C8", "#2376D9", "#D94D7D", "#FF8618", "#12A89E", "#F4B400", "#4867C8", "#E95AA8", "#3E9B7A"];
+    labelOrder.forEach((group, i) => {
+        colorByGroup[group] = resolveInputColor(group) || fallbackPalette[i % fallbackPalette.length];
+    });
+
+    const rowBandHeight = Math.max(62, Math.min(96, rowStep * 0.78));
+    const rowBandX = -margin.left + Math.max(18, width * 0.035);
+    const rowBandW = width - Math.max(34, width * 0.058);
+    const badgeR = Math.max(15, Math.min(24, rowBandHeight * 0.26));
+    const iconR = Math.max(16, Math.min(26, rowBandHeight * 0.29));
+    const badgeX = rowBandX + Math.max(24, rowBandHeight * 0.34);
+    const iconX = badgeX + badgeR + iconR + Math.max(15, width * 0.026);
+    const dividerX = -Math.max(4, width * 0.012);
+    const labelX = iconX + iconR + Math.max(10, width * 0.018);
+    const labelMaxWidth = Math.max(86, dividerX - labelX - 10);
+
+    const measureText = (text, fontSize, fontWeight = "800") => {
+        return chartUtils.text.measure(g, String(text), { fontSize, fontWeight }).width;
+    };
+
+    const truncateToWidth = (text, maxWidth, fontSize, fontWeight = "800") => {
+        const value = String(text);
+        if (measureText(value, fontSize, fontWeight) <= maxWidth) return value;
+        let trimmed = value;
+        while (trimmed.length > 3 && measureText(`${trimmed}...`, fontSize, fontWeight) > maxWidth) {
+            trimmed = trimmed.slice(0, -1);
+        }
+        return `${trimmed}...`;
+    };
+
+    const splitLabelWords = (text) => String(text)
+        .replace(/\//g, "/ ")
+        .split(/\s+/)
+        .filter(Boolean);
+
+    const wrapToLines = (text, maxWidth, fontSize, fontWeight = "800", maxLines = 2, options = {}) => {
+        const words = options.splitSlash ? splitLabelWords(text) : String(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (measureText(candidate, fontSize, fontWeight) <= maxWidth || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) {
+            return options.allowOverflowWords
+                ? lines
+                : lines.map(line => truncateToWidth(line, maxWidth, fontSize, fontWeight));
+        }
+        const clipped = lines.slice(0, maxLines);
+        if (!options.allowOverflowWords) {
+            clipped[maxLines - 1] = truncateToWidth(clipped[maxLines - 1], maxWidth, fontSize, fontWeight);
+            return clipped.map(line => truncateToWidth(line, maxWidth, fontSize, fontWeight));
+        }
+        return clipped;
+    };
+
+    const wrapGroupLabel = (text) => {
+        let fontSize = Math.max(10, Math.min(13, rowBandHeight * 0.15));
+        let maxLines = 3;
+        let lines = wrapToLines(text, labelMaxWidth, fontSize, "900", maxLines, {
+            splitSlash: true,
+            allowOverflowWords: true
+        });
+        while ((lines.length > maxLines || lines.some(line => measureText(line, fontSize, "900") > labelMaxWidth)) && fontSize > 9) {
+            fontSize -= 0.5;
+            lines = wrapToLines(text, labelMaxWidth, fontSize, "900", maxLines, {
+                splitSlash: true,
+                allowOverflowWords: true
+            });
+        }
+        if (lines.length > maxLines) {
+            maxLines = 4;
+            lines = wrapToLines(text, labelMaxWidth, fontSize, "900", maxLines, {
+                splitSlash: true,
+                allowOverflowWords: true
+            });
+        }
+        return { fontSize, lines: lines.slice(0, maxLines) };
+    };
+
+    const visibleXTicks = (() => {
+        if (xValues.length <= 6) return xValues;
+        const maxLabels = Math.max(2, Math.floor(innerWidth / Math.max(42, width * 0.08)));
+        const step = Math.ceil(xValues.length / maxLabels);
+        const ticks = xValues.filter((_, i) => i % step === 0);
+        if (ticks[ticks.length - 1] !== xValues[xValues.length - 1]) ticks.push(xValues[xValues.length - 1]);
+        return ticks;
+    })();
+
+    labelOrder.forEach((group, rowIndex) => {
+        const rowY = yScale(initialRankByGroup[group]);
+        const color = getColor(group);
+        const safeRowTop = rowY - rowBandHeight / 2;
+
+        g.append("rect")
+            .attr("class", "bump07-row-card")
+            .attr("x", rowBandX)
+            .attr("y", safeRowTop)
+            .attr("width", rowBandW)
+            .attr("height", rowBandHeight)
+            .attr("rx", Math.min(17, rowBandHeight * 0.20))
+            .attr("fill", rowIndex % 2 === 0 ? "#FFFFFF" : "#FBFDFF")
+            .attr("stroke", "#E5F0F7")
+            .attr("stroke-width", 1)
+            .attr("filter", "url(#bump07-row-shadow)");
+
+        g.append("circle")
+            .attr("class", "bump07-rank-badge")
+            .attr("cx", badgeX)
+            .attr("cy", rowY)
+            .attr("r", badgeR)
+            .attr("fill", color);
+
+        g.append("text")
+            .attr("class", "bump07-rank-label")
+            .attr("x", badgeX)
+            .attr("y", rowY + Math.max(5, badgeR * 0.32))
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "900")
+            .attr("font-size", Math.max(16, Math.min(24, badgeR * 1.22)))
+            .attr("fill", "#FFFFFF")
+            .text(groups.indexOf(group) + 1);
+
+        const slot = g.append("g")
+            .attr("class", "reserved-asset-slot bump07-group-icon-slot")
+            .attr("data-asset-slot", "group-icon")
+            .attr("data-asset-source-policy", jsonData.images && jsonData.images.field && jsonData.images.field[group] ? "input_provided" : "neutral_placeholder")
+            .attr("data-anchor", `row-${rowIndex + 1}-center`)
+            .attr("data-collision-rule", "stay inside row card, right of rank badge, left of group label and plot")
+            .attr("transform", `translate(${iconX},${rowY})`);
+        slot.append("circle")
+            .attr("r", iconR)
+            .attr("fill", "#F2FAFF")
+            .attr("stroke", color)
+            .attr("stroke-width", 2)
+            .attr("opacity", 0.95);
+        if (jsonData.images && jsonData.images.field && jsonData.images.field[group]) {
+            slot.append("image")
+                .attr("class", "input-provided-group-icon")
+                .attr("data-asset-slot", "group-icon-image")
+                .attr("data-asset-source-policy", "input_provided")
+                .attr("xlink:href", jsonData.images.field[group])
+                .attr("x", -iconR * 0.72)
+                .attr("y", -iconR * 0.72)
+                .attr("width", iconR * 1.44)
+                .attr("height", iconR * 1.44)
+                .attr("preserveAspectRatio", "xMidYMid meet");
+        } else {
+            slot.append("text")
+                .attr("text-anchor", "middle")
+                .attr("dy", "0.36em")
+                .attr("font-family", "Arial, Helvetica, sans-serif")
+                .attr("font-weight", "900")
+                .attr("font-size", Math.max(10, iconR * 0.58))
+                .attr("fill", color)
+                .text(String(group).trim().slice(0, 1).toUpperCase());
+        }
+
+        const labelWrap = wrapGroupLabel(group);
+        const labelFontSize = labelWrap.fontSize;
+        const labelLines = labelWrap.lines;
+        const label = g.append("text")
+            .attr("class", "bump07-group-label")
+            .attr("x", labelX)
+            .attr("y", rowY - ((labelLines.length - 1) * labelFontSize * 0.54))
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "900")
+            .attr("font-size", labelFontSize)
+            .attr("fill", color);
+        labelLines.forEach((line, lineIndex) => {
+            label.append("tspan")
+                .attr("x", labelX)
+                .attr("dy", lineIndex === 0 ? 0 : labelFontSize * 1.08)
+                .text(line);
+        });
+
+        g.append("line")
+            .attr("class", "bump07-label-divider")
+            .attr("x1", dividerX)
+            .attr("x2", dividerX)
+            .attr("y1", safeRowTop + 8)
+            .attr("y2", safeRowTop + rowBandHeight - 8)
+            .attr("stroke", color)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round");
+    });
+
+    const axisY = -52;
+    visibleXTicks.forEach(tick => {
+        const tickX = xScale(tick);
+        g.append("line")
+            .attr("class", "bump07-vertical-guide")
+            .attr("x1", tickX)
+            .attr("x2", tickX)
+            .attr("y1", axisY + 20)
+            .attr("y2", innerHeight + rowBandHeight / 2)
+            .attr("stroke", "#BFD5E6")
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "3 5")
+            .attr("opacity", 0.95);
+
+        const label = xFormat(tick);
+        const tabW = Math.max(44, Math.min(64, measureText(label, 14, "900") + 22));
+        g.append("rect")
+            .attr("class", "bump07-time-tab")
+            .attr("x", tickX - tabW / 2)
+            .attr("y", axisY - 18)
+            .attr("width", tabW)
+            .attr("height", 32)
+            .attr("rx", 7)
+            .attr("fill", "#082C55");
+
+        g.append("text")
+            .attr("class", "bump07-time-label")
+            .attr("x", tickX)
+            .attr("y", axisY + 3)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "900")
+            .attr("font-size", Math.max(12, Math.min(16, width * 0.025)))
+            .attr("fill", "#FFFFFF")
+            .text(label);
+    });
+
+    const values = chartData
+        .filter(d => d[yField] !== null && d[yField] !== undefined)
+        .map(d => +d[yField]);
+    const valueMin = Math.min(...values);
+    const valueMax = Math.max(...values);
+    const radiusScale = d3.scaleLinear()
+        .domain([valueMin, valueMax])
+        .range([Math.max(4.5, rowBandHeight * 0.055), Math.max(6.5, rowBandHeight * 0.078)]);
+
+    const groupValueExtent = {};
+    groups.forEach(group => {
+        const groupValues = rankData[group]
+            .filter(d => d.hasData && Number.isFinite(+d.value))
+            .map(d => +d.value);
+        groupValueExtent[group] = d3.extent(groupValues);
+    });
+    const localSlopeAmplitude = Math.max(10, Math.min(rowBandHeight * 0.24, rowStep * 0.20));
+    const pointY = (group, d) => {
+        const baseY = yScale(d.rank);
+        const extent = groupValueExtent[group] || [0, 0];
+        const span = extent[1] - extent[0];
+        if (!Number.isFinite(span) || span <= 0) return baseY;
+        const normalized = (+d.value - extent[0]) / span;
+        return baseY + (0.5 - normalized) * localSlopeAmplitude * 2;
+    };
+
+    groups.forEach(group => {
+        const groupRanks = rankData[group].filter(d => d.hasData);
+        if (groupRanks.length > 1) {
+            g.append("path")
+                .datum(groupRanks)
+                .attr("class", "bump07-rank-line")
+                .attr("fill", "none")
+                .attr("stroke", getColor(group))
+                .attr("stroke-width", Math.max(3, Math.min(4.2, rowBandHeight * 0.05)))
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round")
+                .attr("opacity", 0.96)
+                .attr("d", d3.line()
+                    .x(d => xScale(d.x))
+                    .y(d => pointY(group, d))
+                );
+        }
+    });
+
+    groups.forEach(group => {
+        rankData[group].forEach(d => {
+            if (!d.hasData) return;
+            const x = xScale(d.x);
+            const y = pointY(group, d);
+            const r = radiusScale(+d.value);
+            g.append("circle")
+                .attr("class", "bump07-value-node")
+                .attr("data-group", group)
+                .attr("data-x", d.x)
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", r)
+                .attr("fill", getColor(group))
+                .attr("stroke", "#FFFFFF")
+                .attr("stroke-width", 2);
+        });
+    });
+
+    groups.forEach(group => {
+        rankData[group].forEach(d => {
+            if (!d.hasData) return;
+            const x = xScale(d.x);
+            const y = pointY(group, d);
+            const rowCenterY = yScale(d.rank);
+            const r = radiusScale(+d.value);
+            const text = chartUtils.format.autoText(+d.value);
+            const labelFont = Math.max(10, Math.min(14, rowBandHeight * 0.16));
+            const chipW = Math.max(28, measureText(text, labelFont, "900") + 12);
+            const chipH = Math.max(20, labelFont + 8);
+            let labelY = y - r - chipH / 2 - Math.max(6, rowBandHeight * 0.045);
+            const rowTop = rowCenterY - rowBandHeight / 2 + chipH / 2 + 5;
+            const rowBottom = rowCenterY + rowBandHeight / 2 - chipH / 2 - 5;
+            labelY = Math.max(rowTop, Math.min(rowBottom, labelY));
+            let labelX = Math.max(chipW / 2 + 2, Math.min(innerWidth - chipW / 2 - 2, x));
+
+            g.append("rect")
+                .attr("class", "bump07-value-chip")
+                .attr("x", labelX - chipW / 2)
+                .attr("y", labelY - chipH / 2)
+                .attr("width", chipW)
+                .attr("height", chipH)
+                .attr("rx", 5)
+                .attr("fill", getColor(group));
+
+            g.append("text")
+                .attr("class", "bump07-value-label")
+                .attr("x", labelX)
+                .attr("y", labelY + labelFont * 0.34)
+                .attr("text-anchor", "middle")
+                .attr("font-family", "Arial, Helvetica, sans-serif")
+                .attr("font-weight", "900")
+                .attr("font-size", labelFont)
+                .attr("fill", "#FFFFFF")
+                .text(text);
+        });
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_09.js

@@ -0,0 +1,415 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Sorted Lines Chart",
+    "chart_name": "bump_chart_09",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "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 colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };
+
+    d3.select(containerSelector).html("");
+
+    const width = +variables.width || 800;
+    const height = +variables.height || 600;
+    const timeField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+
+    const timePoints = [...new Set(chartData.map(d => d[timeField]))]
+        .sort((a, b) => {
+            const da = chartUtils.format.parseDate(a);
+            const db = chartUtils.format.parseDate(b);
+            const ta = da instanceof Date ? da.getTime() : +da;
+            const tb = db instanceof Date ? db.getTime() : +db;
+            if (Number.isFinite(ta) && Number.isFinite(tb) && ta !== tb) return ta - tb;
+            return String(a).localeCompare(String(b), undefined, { numeric: true });
+        });
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const valueUnit = chartUtils.schema.channel(jsonData, "y").unit !== "none"
+        ? chartUtils.schema.channel(jsonData, "y").unit
+        : "";
+
+    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 defs = svg.append("defs");
+    defs.append("filter")
+        .attr("id", "bump09-row-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-20%")
+        .attr("width", "116%")
+        .attr("height", "150%")
+        .append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 6)
+        .attr("flood-color", "#0A3152")
+        .attr("flood-opacity", 0.11);
+
+    const headerGradient = defs.append("linearGradient")
+        .attr("id", "bump09-header-gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    headerGradient.append("stop").attr("offset", "0%").attr("stop-color", "#073D78");
+    headerGradient.append("stop").attr("offset", "100%").attr("stop-color", "#082A61");
+
+    const markerGradientIds = {};
+    groups.forEach((group, index) => {
+        const color = getColor(group, index);
+        const c = d3.color(color) || d3.color("#6B45D8");
+        const gradient = defs.append("radialGradient")
+            .attr("id", `bump09-dot-gradient-${index}`)
+            .attr("cx", "34%")
+            .attr("cy", "28%")
+            .attr("r", "78%");
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", c.brighter(0.9).formatHex());
+        gradient.append("stop").attr("offset", "62%").attr("stop-color", c.formatHex());
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", c.darker(0.35).formatHex());
+        markerGradientIds[group] = `bump09-dot-gradient-${index}`;
+    });
+
+    const measureText = (text, fontSize, fontWeight = "700") => {
+        return chartUtils.text.measure(svg, String(text), {
+            fontFamily: "Arial, Helvetica, sans-serif",
+            fontSize,
+            fontWeight
+        }).width;
+    };
+
+    const fitText = (text, maxWidth, fontSize, fontWeight = "800", minFontSize = 8) => {
+        let size = fontSize;
+        while (size > minFontSize && measureText(text, size, fontWeight) > maxWidth) {
+            size -= 1;
+        }
+        return size;
+    };
+
+    const ellipsize = (text, maxWidth, fontSize, fontWeight = "800") => {
+        const value = String(text);
+        if (measureText(value, fontSize, fontWeight) <= maxWidth) return value;
+        let clipped = value;
+        while (clipped.length > 2 && measureText(`${clipped}...`, fontSize, fontWeight) > maxWidth) {
+            clipped = clipped.slice(0, -1);
+        }
+        return `${clipped}...`;
+    };
+
+    const contrastText = (color) => {
+        const c = d3.color(color);
+        if (!c) return "#FFFFFF";
+        const luminance = (0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) / 255;
+        return luminance > 0.62 ? "#082A61" : "#FFFFFF";
+    };
+
+    function getColor(group, index = 0) {
+        const scale = colorResolver.scale(groups, { palette: "category10" });
+        return scale(group) || colorResolver.field(group, index, { fallback: "#6B45D8" }).value || "#6B45D8";
+    }
+
+    const rowOuterX = Math.max(6, width * 0.015);
+    const rowOuterW = width - rowOuterX * 2;
+    const headerTop = Math.max(8, height * 0.02);
+    const headerH = Math.max(30, Math.min(42, height * 0.09));
+    const headerGap = Math.max(8, Math.min(13, height * 0.025));
+    let rowGap = Math.max(6, Math.min(10, height * 0.018));
+    const hasUnitNote = Boolean(valueUnit) && height >= 330;
+    let unitH = hasUnitNote ? Math.max(26, Math.min(34, height * 0.075)) : 0;
+    const bottomPad = Math.max(7, height * 0.018);
+    let rowH = (height - headerTop - headerH - headerGap - bottomPad - unitH - rowGap * Math.max(0, groups.length - 1)) / Math.max(1, groups.length);
+    if (rowH < 36 && hasUnitNote) {
+        unitH = 0;
+        rowGap = Math.max(4, rowGap - 2);
+        rowH = (height - headerTop - headerH - headerGap - bottomPad - rowGap * Math.max(0, groups.length - 1)) / Math.max(1, groups.length);
+    }
+    rowH = Math.max(30, Math.min(68, rowH));
+
+    const maxLabelMeasure = d3.max(groups, group => measureText(group, 14, "900")) || 80;
+    const labelColumnW = Math.max(
+        Math.min(width * 0.38, maxLabelMeasure + 64),
+        Math.min(width * 0.31, 122)
+    );
+    const plotX0 = rowOuterX + labelColumnW;
+    const plotX1 = width - Math.max(22, width * 0.045);
+    const xScale = d3.scalePoint()
+        .domain(timePoints)
+        .range([plotX0, plotX1])
+        .padding(0.08);
+
+    svg.append("g")
+        .attr("class", "reserved-asset-slot bump09-header-illustration-policy")
+        .attr("data-asset-slot", "header-illustration")
+        .attr("data-asset-source-policy", "input_asset_or_image2_asset")
+        .attr("data-anchor", "page-header-image-bbox")
+        .attr("data-collision-rule", "owned by wrapper; must avoid title/subtitle and chart bbox")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("opacity", 0);
+
+    svg.append("rect")
+        .attr("class", "bump09-header-band")
+        .attr("x", rowOuterX)
+        .attr("y", headerTop)
+        .attr("width", rowOuterW)
+        .attr("height", headerH)
+        .attr("rx", Math.min(14, headerH * 0.35))
+        .attr("fill", "url(#bump09-header-gradient)");
+
+    svg.append("text")
+        .attr("class", "bump09-country-header")
+        .attr("x", rowOuterX + 18)
+        .attr("y", headerTop + headerH / 2)
+        .attr("dominant-baseline", "middle")
+        .attr("text-anchor", "start")
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", Math.max(11, Math.min(16, headerH * 0.34)))
+        .attr("font-weight", "900")
+        .attr("fill", "#FFFFFF")
+        .text(String(groupField).toUpperCase());
+
+    timePoints.forEach(timePoint => {
+        const label = String(timePoint);
+        const labelSize = fitText(label, Math.max(24, (plotX1 - plotX0) / Math.max(1, timePoints.length) - 6), Math.max(11, Math.min(16, headerH * 0.36)), "900", 8);
+        svg.append("text")
+            .attr("class", "bump09-year-header")
+            .attr("x", xScale(timePoint))
+            .attr("y", headerTop + headerH / 2)
+            .attr("dominant-baseline", "middle")
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", labelSize)
+            .attr("font-weight", "900")
+            .attr("fill", "#FFFFFF")
+            .text(label);
+    });
+
+    const values = chartData
+        .map(d => +d[valueField])
+        .filter(v => Number.isFinite(v));
+    const minValue = d3.min(values) || 0;
+    const maxValue = d3.max(values) || 1;
+    const minColumnGap = timePoints.length > 1
+        ? d3.min(timePoints.slice(1).map((d, i) => xScale(d) - xScale(timePoints[i])))
+        : plotX1 - plotX0;
+    const maxRadius = Math.max(7, Math.min(rowH * 0.32, minColumnGap * 0.29, 24));
+    const minRadius = Math.max(5, Math.min(maxRadius * 0.62, rowH * 0.20));
+    const radiusScale = d3.scaleSqrt()
+        .domain([minValue, maxValue])
+        .range([minRadius, maxRadius])
+        .clamp(true);
+    const rowTop0 = headerTop + headerH + headerGap;
+
+    groups.forEach((group, index) => {
+        const color = getColor(group, index);
+        const rowY = rowTop0 + index * (rowH + rowGap);
+        const rowCenterY = rowY + rowH / 2;
+
+        svg.append("rect")
+            .attr("class", "bump09-row-card")
+            .attr("x", rowOuterX)
+            .attr("y", rowY)
+            .attr("width", rowOuterW)
+            .attr("height", rowH)
+            .attr("rx", Math.min(14, rowH * 0.18))
+            .attr("fill", index % 2 === 0 ? "#FFFFFF" : "#FBFDFF")
+            .attr("filter", "url(#bump09-row-shadow)");
+
+        svg.append("rect")
+            .attr("class", "bump09-row-rail")
+            .attr("x", rowOuterX)
+            .attr("y", rowY + 2)
+            .attr("width", Math.max(5, Math.min(10, width * 0.016)))
+            .attr("height", Math.max(1, rowH - 4))
+            .attr("rx", Math.min(8, rowH * 0.14))
+            .attr("fill", color);
+
+        const iconR = Math.max(9, Math.min(17, rowH * 0.24));
+        const iconX = rowOuterX + Math.max(24, iconR + 17);
+        const labelX = iconX + iconR + Math.max(8, width * 0.016);
+        const labelMaxW = Math.max(42, plotX0 - labelX - 14);
+        const slot = svg.append("g")
+            .attr("class", "reserved-asset-slot bump09-group-icon-slot")
+            .attr("data-asset-slot", "group-icon")
+            .attr("data-asset-source-policy", images.field && images.field[group] ? "input_provided" : "neutral_placeholder")
+            .attr("data-anchor", `row-${index + 1}-centerline`)
+            .attr("data-collision-rule", "stay inside row card and left of group label/year columns")
+            .attr("transform", `translate(${iconX},${rowCenterY})`);
+        slot.append("circle")
+            .attr("r", iconR)
+            .attr("fill", "#F2F7FD")
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 2.2)
+            .attr("filter", "url(#bump09-row-shadow)");
+        if (images.field && images.field[group]) {
+            slot.append("image")
+                .attr("class", "input-provided-group-icon")
+                .attr("data-asset-slot", "group-icon-image")
+                .attr("data-asset-source-policy", "input_provided")
+                .attr("xlink:href", images.field[group])
+                .attr("x", -iconR * 0.82)
+                .attr("y", -iconR * 0.82)
+                .attr("width", iconR * 1.64)
+                .attr("height", iconR * 1.64)
+                .attr("preserveAspectRatio", "xMidYMid meet");
+        } else {
+            slot.append("text")
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("font-family", "Arial, Helvetica, sans-serif")
+                .attr("font-weight", "900")
+                .attr("font-size", Math.max(9, iconR * 0.72))
+                .attr("fill", color)
+                .text(String(group).trim().slice(0, 1).toUpperCase());
+        }
+
+        const baseLabelFont = Math.max(10, Math.min(17, rowH * 0.25));
+        const labelFont = fitText(group, labelMaxW, baseLabelFont, "900", 8);
+        const labelText = labelFont > 8.5 ? String(group) : ellipsize(group, labelMaxW, labelFont, "900");
+        svg.append("text")
+            .attr("class", "bump09-group-label")
+            .attr("x", labelX)
+            .attr("y", rowCenterY)
+            .attr("dominant-baseline", "middle")
+            .attr("text-anchor", "start")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", labelFont)
+            .attr("font-weight", "900")
+            .attr("fill", "#082A61")
+            .text(labelText);
+
+        const groupData = chartData
+            .filter(d => d[groupField] === group)
+            .sort((a, b) => timePoints.indexOf(a[timeField]) - timePoints.indexOf(b[timeField]));
+        const points = groupData
+            .filter(d => timePoints.includes(d[timeField]) && Number.isFinite(+d[valueField]))
+            .map(d => ({
+                x: xScale(d[timeField]),
+                y: rowCenterY,
+                value: +d[valueField],
+                time: d[timeField]
+            }));
+
+        if (points.length >= 2) {
+            svg.append("path")
+                .datum(points)
+                .attr("class", "bump09-connector-line")
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", Math.max(2, Math.min(3.2, rowH * 0.045)))
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round")
+                .attr("opacity", 0.96)
+                .attr("d", d3.line().x(d => d.x).y(d => d.y));
+        }
+
+        points.forEach(point => {
+            const r = radiusScale(point.value);
+            svg.append("circle")
+                .attr("class", "bump09-value-bubble")
+                .attr("data-group", group)
+                .attr("data-x", point.time)
+                .attr("data-value", point.value)
+                .attr("cx", point.x)
+                .attr("cy", point.y)
+                .attr("r", r)
+                .attr("fill", `url(#${markerGradientIds[group]})`)
+                .attr("stroke", "rgba(255,255,255,0.82)")
+                .attr("stroke-width", Math.max(1.2, r * 0.10));
+
+            const formattedValue = chartUtils.format.compactFixedText(point.value);
+            const valueFont = fitText(formattedValue, r * 1.55, Math.max(9, Math.min(18, r * 0.72)), "900", 7);
+            svg.append("text")
+                .attr("class", "bump09-value-label")
+                .attr("x", point.x)
+                .attr("y", point.y)
+                .attr("dominant-baseline", "middle")
+                .attr("text-anchor", "middle")
+                .attr("font-family", "Arial, Helvetica, sans-serif")
+                .attr("font-size", valueFont)
+                .attr("font-weight", "900")
+                .attr("fill", contrastText(color))
+                .text(formattedValue);
+        });
+    });
+
+    if (unitH > 0) {
+        const unitLabel = valueUnit === "$m" ? "million USD" : valueUnit;
+        const unitText = `All values are in ${unitLabel}.`;
+        const maxPillW = Math.min(width * 0.64, width - rowOuterX * 2);
+        const pillW = Math.min(maxPillW, Math.max(150, measureText(unitText, 11, "600") + 58));
+        const pillX = (width - pillW) / 2;
+        const pillY = Math.min(height - unitH - bottomPad / 2, rowTop0 + groups.length * rowH + Math.max(5, rowGap * groups.length));
+        const note = svg.append("g")
+            .attr("class", "bump09-unit-note")
+            .attr("data-chart-owned-region", "unit-note")
+            .attr("data-anchor", "bottom-center-below-row-cards")
+            .attr("data-collision-rule", "hide or move if it intersects bottom row card");
+        note.append("rect")
+            .attr("x", pillX)
+            .attr("y", pillY)
+            .attr("width", pillW)
+            .attr("height", unitH)
+            .attr("rx", unitH / 2)
+            .attr("fill", "#E7F2FB")
+            .attr("stroke", "#C9DFF2")
+            .attr("stroke-width", 1);
+        const iconX = pillX + unitH * 0.55;
+        const barBaseY = pillY + unitH * 0.66;
+        [0.34, 0.52, 0.76].forEach((scale, i) => {
+            note.append("rect")
+                .attr("x", iconX + i * 5)
+                .attr("y", barBaseY - unitH * scale)
+                .attr("width", 3.4)
+                .attr("height", unitH * scale)
+                .attr("rx", 1)
+                .attr("fill", i === 2 ? "#08336F" : "#4B82BC");
+        });
+        const unitFont = fitText(unitText, pillW - unitH * 1.62, Math.max(9, Math.min(12, unitH * 0.36)), "600", 7);
+        note.append("text")
+            .attr("x", pillX + unitH * 1.35)
+            .attr("y", pillY + unitH / 2)
+            .attr("dominant-baseline", "middle")
+            .attr("text-anchor", "start")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", unitFont)
+            .attr("font-weight", "600")
+            .attr("fill", "#082A61")
+            .text(unitText);
+    }
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_10.js

@@ -0,0 +1,482 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Sorted Lines Chart",
+    "chart_name": "bump_chart_10",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = (jsonData.data && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const images = jsonData.images || { field: {}, other: {} };
+    const colorResolver = chartUtils.color.resolver(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const width = variables.width || 650;
+    const height = variables.height || 975;
+    const timeField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+
+    function safeText(value) {
+        return value == null ? "" : String(value);
+    }
+
+    function measureText(text, fontSize, fontFamily, fontWeight) {
+        return chartUtils.text.measure(null, safeText(text), {
+            fontFamily: fontFamily,
+            fontSize: fontSize,
+            fontWeight: fontWeight
+        }).width;
+    }
+
+    function fitFont(text, maxWidth, start, family, weight, minSize) {
+        let size = start;
+        while (size > minSize && measureText(text, size, family, weight) > maxWidth) {
+            size -= 1;
+        }
+        return size;
+    }
+
+    function wrapText(selection, text, maxWidth, maxLines, lineHeight, fontSize, family, weight) {
+        const lines = computeWrappedLines(text, maxWidth, fontSize, family, weight);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            let last = visible[visible.length - 1];
+            while (last.length > 1 && measureText(`${last}...`, fontSize, family, weight) > maxWidth) {
+                last = last.slice(0, -1);
+            }
+            visible[visible.length - 1] = `${last}...`;
+        }
+        selection.selectAll("tspan")
+            .data(visible)
+            .enter()
+            .append("tspan")
+            .attr("x", selection.attr("x"))
+            .attr("dy", (d, i) => i === 0 ? 0 : lineHeight)
+            .text(d => d);
+        return visible.length;
+    }
+
+    function computeWrappedLines(text, maxWidth, fontSize, family, weight) {
+        const words = safeText(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (measureText(candidate, fontSize, family, weight) <= maxWidth || !line) {
+                line = candidate;
+            } else {
+                lines.push(line);
+                line = word;
+            }
+        });
+        if (line) lines.push(line);
+        return lines;
+    }
+
+    function parseTimeValue(value) {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed.getTime();
+        const numeric = +value;
+        return Number.isFinite(numeric) ? numeric : safeText(value);
+    }
+
+    const timePoints = [...new Set(chartData.map(d => d[timeField]))]
+        .sort((a, b) => {
+            const pa = parseTimeValue(a);
+            const pb = parseTimeValue(b);
+            if (typeof pa === "number" && typeof pb === "number") return pa - pb;
+            return safeText(a).localeCompare(safeText(b));
+        });
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const grouped = new Map(groups.map(group => [
+        group,
+        chartData.filter(d => d[groupField] === group)
+            .sort((a, b) => timePoints.indexOf(a[timeField]) - timePoints.indexOf(b[timeField]))
+    ]));
+
+    const titleFamily = (typography.title && typography.title.font_family) || "Arial, Helvetica, sans-serif";
+    const labelFamily = (typography.label && typography.label.font_family) || "Arial, Helvetica, sans-serif";
+    const annotationFamily = (typography.annotation && typography.annotation.font_family) || "Arial, Helvetica, sans-serif";
+    let titleText = safeText((jsonData.titles && jsonData.titles.main_title) || (jsonData.metadata && jsonData.metadata.title) || "Positive Trends");
+    titleText = titleText
+        .replace(/^Positive\s+Trends?\s+in\s+/i, "")
+        .replace(/^Positive\s+Trends?\s+Across\s+/i, "")
+        .trim() || titleText;
+    const subtitleText = safeText((jsonData.titles && jsonData.titles.sub_title) || (jsonData.metadata && jsonData.metadata.description) || jsonData.description || "");
+
+    const rowRamps = [
+        ["#f7d9e6", "#f06fa2", "#e94a72", "#842842"],
+        ["#98e1e8", "#44c4e3", "#247ed1", "#06477c"],
+        ["#ffc39e", "#ff7246", "#e64a2b", "#7d2319"],
+        ["#8adfe0", "#35bad5", "#207eb9", "#054a78"],
+        ["#ffe39a", "#f7c232", "#c39b20", "#8a6a16"],
+        ["#c9d7ff", "#7da0ff", "#4b68d9", "#24317e"],
+        ["#e5c8ff", "#bb7ef0", "#8d54cf", "#4e2d80"],
+        ["#b7ead0", "#67c88f", "#31935b", "#176238"]
+    ];
+
+    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 defs = svg.append("defs");
+    defs.append("filter")
+        .attr("id", "bump10-soft-shadow")
+        .attr("x", "-12%")
+        .attr("y", "-12%")
+        .attr("width", "124%")
+        .attr("height", "130%")
+        .html('<feDropShadow dx="0" dy="4" stdDeviation="5" flood-color="#1b3327" flood-opacity="0.12"/>');
+
+    const bg = defs.append("radialGradient")
+        .attr("id", "bump10-bg")
+        .attr("cx", "72%")
+        .attr("cy", "8%")
+        .attr("r", "86%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#fff8e4");
+    bg.append("stop").attr("offset", "54%").attr("stop-color", "#fbfaf6");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#f6fbfd");
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump10-bg)");
+
+    const badge = svg.append("g")
+        .attr("class", "bump10-positive-badge")
+        .attr("transform", "translate(38,42)");
+    badge.append("rect")
+        .attr("width", 250)
+        .attr("height", 38)
+        .attr("rx", 14)
+        .attr("fill", "#2f6a37");
+    badge.append("text")
+        .attr("x", 18)
+        .attr("y", 25)
+        .attr("font-family", labelFamily)
+        .attr("font-size", 18)
+        .attr("font-weight", 800)
+        .attr("letter-spacing", 2)
+        .attr("fill", "#ffffff")
+        .text("POSITIVE TRENDS");
+    badge.append("rect")
+        .attr("class", "reserved-asset-slot bump10-badge-trend-slot")
+        .attr("data-asset-slot", "badge-trend-mark")
+        .attr("data-slot-policy", "neutral_placeholder_or_image2_asset")
+        .attr("data-anchor", "badge-right-center")
+        .attr("data-collision-rule", "stay inside badge padding and clear of badge text")
+        .attr("x", 216)
+        .attr("y", 9)
+        .attr("width", 22)
+        .attr("height", 20)
+        .attr("rx", 5)
+        .attr("fill", "none")
+        .attr("stroke", "#e8f4de")
+        .attr("stroke-width", 2)
+        .attr("opacity", 0.95);
+
+    const titleMaxWidth = 365;
+    let titleFont = Math.min(
+        fitFont(titleText, 720, 37, titleFamily, 900, 26),
+        fitFont(titleText.split(/\s+/).reduce((a, b) => a.length > b.length ? a : b, ""), titleMaxWidth, 37, titleFamily, 900, 26)
+    );
+    while (titleFont > 24 && computeWrappedLines(titleText, titleMaxWidth, titleFont, titleFamily, 900).length > 2) {
+        titleFont -= 1;
+    }
+    const titleLineHeight = Math.round(titleFont * 1.15);
+    const title = svg.append("text")
+        .attr("class", "bump10-title")
+        .attr("x", 38)
+        .attr("y", 132)
+        .attr("font-family", titleFamily)
+        .attr("font-size", titleFont)
+        .attr("font-weight", 900)
+        .attr("fill", "#07331d");
+    wrapText(title, titleText, titleMaxWidth, 2, titleLineHeight, titleFont, titleFamily, 900);
+
+    const subtitle = svg.append("text")
+        .attr("class", "bump10-subtitle")
+        .attr("x", 44)
+        .attr("y", 244)
+        .attr("font-family", labelFamily)
+        .attr("font-size", 17)
+        .attr("font-weight", 400)
+        .attr("fill", "#5d6267");
+    wrapText(subtitle, subtitleText, 350, 3, 25, 17, labelFamily, 400);
+
+    const headerSlot = svg.append("g")
+        .attr("class", "reserved-asset-slot bump10-header-art-slot")
+        .attr("data-asset-slot", "header-farm-illustration")
+        .attr("data-slot-policy", "input_provided_or_image2_asset")
+        .attr("data-asset-source-policy", "input_provided_or_image2_asset")
+        .attr("data-anchor", "top-right-header-safe-area")
+        .attr("data-bbox", "430,58,220,220")
+        .attr("data-mask-policy", "rounded clipped bbox")
+        .attr("data-collision-rule", "stay right of title/subtitle and above year rail")
+        .attr("transform", "translate(430,58)");
+    const headerClipId = `bump10-header-clip-${Math.floor(Math.random() * 1000000)}`;
+    defs.append("clipPath")
+        .attr("id", headerClipId)
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", 220)
+        .attr("height", 220)
+        .attr("rx", 28);
+    headerSlot.append("rect")
+        .attr("width", 220)
+        .attr("height", 220)
+        .attr("rx", 28)
+        .attr("fill", "#e8f2da");
+    headerSlot.append("path")
+        .attr("d", "M0,174 C45,130 84,158 128,122 C164,94 190,106 220,78 L220,220 L0,220 Z")
+        .attr("fill", "#7fa843")
+        .attr("opacity", 0.62);
+    headerSlot.append("path")
+        .attr("d", "M0,206 C52,160 94,184 136,148 C168,122 196,132 220,112 L220,220 L0,220 Z")
+        .attr("fill", "#d3c95c")
+        .attr("opacity", 0.55);
+    headerSlot.append("circle").attr("cx", 72).attr("cy", 76).attr("r", 18).attr("fill", "#ecbd5c").attr("opacity", 0.55);
+    headerSlot.append("circle").attr("cx", 176).attr("cy", 104).attr("r", 26).attr("fill", "#2f6a37").attr("opacity", 0.75);
+    headerSlot.append("circle").attr("cx", 176).attr("cy", 104).attr("r", 12).attr("fill", "#fbfaf6").attr("opacity", 0.88);
+
+    const chart = svg.append("g").attr("class", "bump10-chart");
+    const left = 28;
+    const right = 624;
+    const rowTop = 366;
+    const rowBottom = 886;
+    const rowGap = groups.length > 6 ? 10 : 14;
+    const rowHeight = Math.max(58, Math.min(92, (rowBottom - rowTop - rowGap * (groups.length - 1)) / Math.max(groups.length, 1)));
+    const iconX = left + 36;
+    const labelX = left + 82;
+    const markerLeft = left + 218;
+    const markerRight = right - 50;
+    const markerRadius = Math.max(18, Math.min(31, rowHeight * 0.32, (markerRight - markerLeft) / Math.max(timePoints.length * 2.6, 1)));
+    const markerCenters = timePoints.map((t, i) => {
+        if (timePoints.length <= 1) return (markerLeft + markerRight) / 2;
+        return markerLeft + i * ((markerRight - markerLeft) / (timePoints.length - 1));
+    });
+    const rowCenters = groups.map((g, i) => rowTop + rowHeight / 2 + i * (rowHeight + rowGap));
+
+    const railY = 318;
+    chart.append("line")
+        .attr("class", "bump10-year-rail")
+        .attr("x1", markerCenters[0] - 50)
+        .attr("x2", markerCenters[markerCenters.length - 1] + 50)
+        .attr("y1", railY)
+        .attr("y2", railY)
+        .attr("stroke", "#2c6034")
+        .attr("stroke-width", 2)
+        .attr("stroke-linecap", "round");
+    const yearStep = timePoints.length <= 1 ? 92 : Math.abs(markerCenters[1] - markerCenters[0]);
+    const yearPillWidth = Math.max(32, Math.min(68, yearStep - 8));
+    const yearFontSize = Math.max(10, Math.min(18, fitFont(safeText(timePoints.reduce((a, b) => safeText(a).length > safeText(b).length ? a : b, "")), yearPillWidth - 8, 18, labelFamily, 800, 10)));
+    timePoints.forEach((timePoint, i) => {
+        const x = markerCenters[i];
+        chart.append("rect")
+            .attr("class", "bump10-year-pill")
+            .attr("x", x - yearPillWidth / 2)
+            .attr("y", railY - 15)
+            .attr("width", yearPillWidth)
+            .attr("height", 30)
+            .attr("rx", Math.min(10, yearPillWidth / 4))
+            .attr("fill", "#24562d");
+        chart.append("text")
+            .attr("class", "bump10-year-label")
+            .attr("x", x)
+            .attr("y", railY + yearFontSize * 0.36)
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", yearFontSize)
+            .attr("font-weight", 800)
+            .attr("fill", "#ffffff")
+            .text(safeText(timePoint));
+    });
+
+    const finalValues = groups.map(group => {
+        const pts = grouped.get(group) || [];
+        const last = pts.length ? +pts[pts.length - 1][valueField] : 0;
+        return { group, value: Number.isFinite(last) ? last : 0 };
+    }).sort((a, b) => b.value - a.value);
+    const finalRank = new Map(finalValues.map((d, i) => [d.group, i]));
+
+    function trendSubtitle(points, group, groupIndex) {
+        if (!points || points.length < 2) return "Trend data";
+        const first = +points[0][valueField];
+        const last = +points[points.length - 1][valueField];
+        const delta = last - first;
+        const rank = finalRank.get(group) || 0;
+        if (rank === 0 && delta > 0) return "Leading with strong trend";
+        if (groupIndex === 0 && delta > 3) return "Strong growth";
+        if (delta > 8) return "Explosive growth";
+        if (delta > 3) return "Steady and consistent";
+        if (delta > 0.5) return "Moderate gain";
+        if (delta < -3) return "Declining trend";
+        return "Stable trend";
+    }
+
+    groups.forEach((group, groupIndex) => {
+        const cy = rowCenters[groupIndex];
+        const y = cy - rowHeight / 2;
+        const points = grouped.get(group) || [];
+        const ramp = rowRamps[groupIndex % rowRamps.length];
+        const rowGrad = defs.append("linearGradient")
+            .attr("id", `bump10-row-grad-${groupIndex}`)
+            .attr("x1", "0%")
+            .attr("x2", "100%");
+        ramp.forEach((color, i) => {
+            rowGrad.append("stop")
+                .attr("offset", `${(i / Math.max(ramp.length - 1, 1)) * 100}%`)
+                .attr("stop-color", color);
+        });
+
+        chart.append("rect")
+            .attr("class", "bump10-row-card")
+            .attr("data-group", safeText(group))
+            .attr("x", left)
+            .attr("y", y)
+            .attr("width", right - left)
+            .attr("height", rowHeight)
+            .attr("rx", 22)
+            .attr("fill", "#f8f6f1")
+            .attr("stroke", "#ece7dc")
+            .attr("stroke-width", 1)
+            .attr("filter", "url(#bump10-soft-shadow)");
+
+        const icon = chart.append("g")
+            .attr("class", "reserved-asset-slot bump10-row-icon-slot")
+            .attr("data-asset-slot", "row-icon")
+            .attr("data-slot-policy", "image2_asset_or_neutral_placeholder")
+            .attr("data-asset-source-policy", "image2_asset_or_neutral_placeholder")
+            .attr("data-anchor", "row-card-left-center")
+            .attr("data-bbox", `${iconX - 23},${cy - 23},46,46`)
+            .attr("data-mask-policy", "circle")
+            .attr("data-collision-rule", "stay inside row card, left of group label, clear of value markers");
+        icon.append("circle")
+            .attr("cx", iconX)
+            .attr("cy", cy)
+            .attr("r", 24)
+            .attr("fill", ramp[1])
+            .attr("opacity", 0.24)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 2);
+        icon.append("text")
+            .attr("x", iconX)
+            .attr("y", cy + 6)
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", 15)
+            .attr("font-weight", 800)
+            .attr("fill", "#2f4a38")
+            .text(safeText(group).slice(0, 2).toUpperCase());
+
+        const groupFont = fitFont(group, markerLeft - labelX - 38, 20, labelFamily, 900, 13);
+        chart.append("text")
+            .attr("class", "bump10-group-label")
+            .attr("x", labelX)
+            .attr("y", cy - 9)
+            .attr("font-family", labelFamily)
+            .attr("font-size", groupFont)
+            .attr("font-weight", 900)
+            .attr("fill", "#07331d")
+            .text(safeText(group));
+        const trend = chart.append("text")
+            .attr("class", "bump10-trend-subtitle")
+            .attr("x", labelX)
+            .attr("y", cy + 13)
+            .attr("font-family", labelFamily)
+            .attr("font-size", 12)
+            .attr("font-weight", 400)
+            .attr("fill", "#5d6267");
+        wrapText(trend, trendSubtitle(points, group, groupIndex), markerLeft - labelX - 22, 2, 15, 12, labelFamily, 400);
+
+        for (let i = 0; i < points.length - 1; i += 1) {
+            const currentIndex = timePoints.indexOf(points[i][timeField]);
+            const nextIndex = timePoints.indexOf(points[i + 1][timeField]);
+            if (currentIndex < 0 || nextIndex < 0) continue;
+            const x1 = markerCenters[currentIndex] + markerRadius - 1;
+            const x2 = markerCenters[nextIndex] - markerRadius + 1;
+            if (x2 <= x1) continue;
+            chart.append("line")
+                .attr("class", "bump10-connector")
+                .attr("data-group", safeText(group))
+                .attr("x1", x1)
+                .attr("x2", x2)
+                .attr("y1", cy)
+                .attr("y2", cy)
+                .attr("stroke", ramp[Math.min(2, ramp.length - 1)])
+                .attr("stroke-width", 3.4)
+                .attr("opacity", 0.9)
+                .attr("stroke-linecap", "round");
+        }
+
+        points.forEach(point => {
+            const timeIndex = timePoints.indexOf(point[timeField]);
+            if (timeIndex < 0) return;
+            const cx = markerCenters[timeIndex];
+            const value = +point[valueField];
+            const t = timePoints.length <= 1 ? 0 : timeIndex / (timePoints.length - 1);
+            const fill = d3.interpolateRgb(ramp[0], ramp[ramp.length - 1])(t);
+            const valueText = chartUtils.format.compactFixedText(Number.isFinite(value) ? value : 0);
+            const valueFont = fitFont(valueText, markerRadius * 1.55, 18, annotationFamily, 800, 11);
+            const dark = chartUtils.color.brightness(fill, { fallback: "#ffffff" }) < 0.48;
+            chart.append("circle")
+                .attr("class", "bump10-value-circle")
+                .attr("data-group", safeText(group))
+                .attr("data-time", safeText(point[timeField]))
+                .attr("data-value", Number.isFinite(value) ? value : "")
+                .attr("cx", cx)
+                .attr("cy", cy)
+                .attr("r", markerRadius)
+                .attr("fill", fill)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 2.4)
+                .attr("filter", "url(#bump10-soft-shadow)");
+            chart.append("text")
+                .attr("class", "bump10-value-label")
+                .attr("x", cx)
+                .attr("y", cy + 6)
+                .attr("text-anchor", "middle")
+                .attr("font-family", annotationFamily)
+                .attr("font-size", valueFont)
+                .attr("font-weight", 800)
+                .attr("fill", dark ? "#ffffff" : "#1f2d2d")
+                .text(valueText);
+        });
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_11.js

@@ -0,0 +1,541 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Sorted Lines Chart",
+    "chart_name": "bump_chart_11",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "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 && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+
+    d3.select(containerSelector).html("");
+
+    const width = variables.width || 650;
+    const height = variables.height || 975;
+    const timeField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+
+    function safeText(value) {
+        return value == null ? "" : String(value);
+    }
+
+    function measureText(text, fontSize, fontFamily, fontWeight) {
+        return chartUtils.text.measure(null, safeText(text), {
+            fontFamily,
+            fontSize,
+            fontWeight
+        }).width;
+    }
+
+    function fitFont(text, maxWidth, start, family, weight, minSize) {
+        let size = start;
+        while (size > minSize && measureText(text, size, family, weight) > maxWidth) {
+            size -= 1;
+        }
+        return size;
+    }
+
+    function computeWrappedLines(text, maxWidth, fontSize, family, weight) {
+        const words = safeText(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (measureText(candidate, fontSize, family, weight) <= maxWidth || !line) {
+                line = candidate;
+            } else {
+                lines.push(line);
+                line = word;
+            }
+        });
+        if (line) lines.push(line);
+        return lines;
+    }
+
+    function wrapText(selection, text, maxWidth, maxLines, lineHeight, fontSize, family, weight) {
+        const lines = computeWrappedLines(text, maxWidth, fontSize, family, weight);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            let last = visible[visible.length - 1];
+            while (last.length > 1 && measureText(`${last}...`, fontSize, family, weight) > maxWidth) {
+                last = last.slice(0, -1);
+            }
+            visible[visible.length - 1] = `${last}...`;
+        }
+        selection.selectAll("tspan")
+            .data(visible)
+            .enter()
+            .append("tspan")
+            .attr("x", selection.attr("x"))
+            .attr("dy", (d, i) => i === 0 ? 0 : lineHeight)
+            .text(d => d);
+        return visible.length;
+    }
+
+    function setWrappedLines(selection, lines, lineHeight) {
+        selection.selectAll("tspan")
+            .data(lines)
+            .enter()
+            .append("tspan")
+            .attr("x", selection.attr("x"))
+            .attr("dy", (d, i) => i === 0 ? 0 : lineHeight)
+            .text(d => d);
+        return lines.length;
+    }
+
+    function chooseFittingText(candidates, maxWidth, maxLines, startSize, minSize, family, weight) {
+        for (const candidate of candidates) {
+            for (let size = startSize; size >= minSize; size -= 1) {
+                const lines = computeWrappedLines(candidate, maxWidth, size, family, weight);
+                if (lines.length <= maxLines) {
+                    return {
+                        fontSize: size,
+                        lineHeight: Math.round(size * 1.34),
+                        lines
+                    };
+                }
+            }
+        }
+        const fallback = candidates[candidates.length - 1] || "Values";
+        const size = minSize;
+        return {
+            fontSize: size,
+            lineHeight: Math.round(size * 1.34),
+            lines: computeWrappedLines(fallback, maxWidth, size, family, weight).slice(0, maxLines)
+        };
+    }
+
+    function parseTimeValue(value) {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed.getTime();
+        const numeric = +value;
+        return Number.isFinite(numeric) ? numeric : safeText(value);
+    }
+
+    function humanizeFieldName(fieldName) {
+        return safeText(fieldName)
+            .replace(/[_-]+/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim()
+            .toLowerCase();
+    }
+
+    function hexagonPath(cx, cy, r) {
+        const h = r * 0.86;
+        return [
+            `M${cx - r},${cy}`,
+            `L${cx - r * 0.52},${cy - h}`,
+            `L${cx + r * 0.52},${cy - h}`,
+            `L${cx + r},${cy}`,
+            `L${cx + r * 0.52},${cy + h}`,
+            `L${cx - r * 0.52},${cy + h}`,
+            "Z"
+        ].join(" ");
+    }
+
+    const titleFamily = (typography.title && typography.title.font_family) || "Arial, Helvetica, sans-serif";
+    const labelFamily = (typography.label && typography.label.font_family) || "Arial, Helvetica, sans-serif";
+    const annotationFamily = (typography.annotation && typography.annotation.font_family) || "Arial, Helvetica, sans-serif";
+
+    const rawTitle = safeText((jsonData.titles && jsonData.titles.main_title) || (jsonData.metadata && jsonData.metadata.title) || "Bicycle Commuting Rising");
+    const subtitleText = safeText((jsonData.titles && jsonData.titles.sub_title) || (jsonData.metadata && jsonData.metadata.description) || jsonData.description || "");
+
+    const timePoints = [...new Set(chartData.map(d => d[timeField]))]
+        .sort((a, b) => {
+            const pa = parseTimeValue(a);
+            const pb = parseTimeValue(b);
+            if (typeof pa === "number" && typeof pb === "number") return pa - pb;
+            return safeText(a).localeCompare(safeText(b));
+        });
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const grouped = new Map(groups.map(group => [
+        group,
+        chartData.filter(d => d[groupField] === group)
+            .sort((a, b) => timePoints.indexOf(a[timeField]) - timePoints.indexOf(b[timeField]))
+    ]));
+
+    const rowRamps = [
+        ["#064c66", "#0b6f88", "#1097b7", "#24bfd2", "#45d3dc"],
+        ["#a73c28", "#d45642", "#f37759", "#ff9b67", "#ffd27d"],
+        ["#59743d", "#78934a", "#a7b34a", "#d8cc4b", "#f4d75c"],
+        ["#0c8746", "#199d55", "#32b85a", "#63cf59", "#8ade5d"],
+        ["#29588d", "#2e7eb7", "#4aa7d8", "#73c3df", "#a1dce7"],
+        ["#6f3e9f", "#8d57c2", "#aa76df", "#c997ef", "#e5c2f7"],
+        ["#b26c22", "#d99031", "#ecb74c", "#f2d071", "#f8df9b"],
+        ["#3f7f79", "#48a19a", "#5ac0b0", "#77d9c5", "#a7efe0"]
+    ];
+
+    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 defs = svg.append("defs");
+    const bg = defs.append("radialGradient")
+        .attr("id", "bump11-bg")
+        .attr("cx", "78%")
+        .attr("cy", "12%")
+        .attr("r", "96%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#eef8fb");
+    bg.append("stop").attr("offset", "52%").attr("stop-color", "#f8fcfd");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#eaf6f8");
+
+    defs.append("filter")
+        .attr("id", "bump11-panel-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-8%")
+        .attr("width", "116%")
+        .attr("height", "124%")
+        .html('<feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#8eb5c0" flood-opacity="0.20"/>');
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump11-bg)");
+
+    const titleMaxWidth = 382;
+    let titleFont = Math.min(
+        fitFont(rawTitle, 640, 42, titleFamily, 900, 28),
+        fitFont(rawTitle.split(/\s+/).reduce((a, b) => a.length > b.length ? a : b, ""), titleMaxWidth, 42, titleFamily, 900, 28)
+    );
+    while (titleFont > 28 && computeWrappedLines(rawTitle, titleMaxWidth, titleFont, titleFamily, 900).length > 2) {
+        titleFont -= 1;
+    }
+    const title = svg.append("text")
+        .attr("class", "bump11-title")
+        .attr("x", 38)
+        .attr("y", 80)
+        .attr("font-family", titleFamily)
+        .attr("font-size", titleFont)
+        .attr("font-weight", 900)
+        .attr("fill", "#071d35");
+    const titleLines = wrapText(title, rawTitle, titleMaxWidth, 2, Math.round(titleFont * 1.14), titleFont, titleFamily, 900);
+
+    const subtitleY = 80 + Math.max(1, titleLines) * Math.round(titleFont * 1.14) + 28;
+    const subtitle = svg.append("text")
+        .attr("class", "bump11-subtitle")
+        .attr("x", 40)
+        .attr("y", subtitleY)
+        .attr("font-family", labelFamily)
+        .attr("font-size", 18)
+        .attr("font-weight", 400)
+        .attr("fill", "#41576b");
+    wrapText(subtitle, subtitleText, 350, 3, 27, 18, labelFamily, 400);
+
+    const headerSlot = svg.append("g")
+        .attr("class", "reserved-asset-slot bump11-header-art-slot")
+        .attr("data-asset-slot", "header-bicycle-city-illustration")
+        .attr("data-slot-policy", "input_asset_or_image2_asset")
+        .attr("data-asset-source-policy", "input_asset_or_image2_asset")
+        .attr("data-anchor", "top-right-header-safe-area")
+        .attr("data-bbox", "420,48,198,228")
+        .attr("data-mask-policy", "rounded clipped bbox")
+        .attr("data-collision-rule", "stay right of title/subtitle and above chart panel")
+        .attr("transform", "translate(420,48)");
+    headerSlot.append("rect")
+        .attr("width", 198)
+        .attr("height", 228)
+        .attr("rx", 28)
+        .attr("fill", "#e3f3f7")
+        .attr("opacity", 0.72);
+    headerSlot.append("rect")
+        .attr("x", 18)
+        .attr("y", 162)
+        .attr("width", 162)
+        .attr("height", 18)
+        .attr("rx", 9)
+        .attr("fill", "#9ac8d0")
+        .attr("opacity", 0.28);
+    headerSlot.append("circle")
+        .attr("cx", 162)
+        .attr("cy", 64)
+        .attr("r", 26)
+        .attr("fill", "#cceaf0")
+        .attr("opacity", 0.82);
+    headerSlot.append("circle")
+        .attr("cx", 88)
+        .attr("cy", 116)
+        .attr("r", 48)
+        .attr("fill", "#b7dce5")
+        .attr("opacity", 0.42);
+    headerSlot.append("text")
+        .attr("x", 99)
+        .attr("y", 198)
+        .attr("text-anchor", "middle")
+        .attr("font-family", labelFamily)
+        .attr("font-size", 12)
+        .attr("font-weight", 700)
+        .attr("fill", "#568493")
+        .attr("opacity", 0.78)
+        .text("reserved image slot");
+
+    const panelX = 16;
+    const panelY = 310;
+    const panelW = 618;
+    const panelH = 560;
+    svg.append("rect")
+        .attr("class", "bump11-chart-panel")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", 20)
+        .attr("fill", "#ffffff")
+        .attr("filter", "url(#bump11-panel-shadow)");
+
+    const chart = svg.append("g").attr("class", "bump11-chart");
+    const labelColumnX = panelX + 74;
+    const markerLeft = panelX + 185;
+    const markerRight = panelX + panelW - 45;
+    const yearY = panelY + 48;
+    const rowTop = panelY + 128;
+    const rowBottom = panelY + panelH - 58;
+    const rowGap = groups.length > 6 ? 10 : 16;
+    const rowHeight = Math.max(44, Math.min(100, (rowBottom - rowTop - rowGap * Math.max(groups.length - 1, 0)) / Math.max(groups.length, 1)));
+    const denseRows = groups.length > 5 || rowHeight < 68;
+    const rowCenters = groups.map((group, i) => rowTop + rowHeight / 2 + i * (rowHeight + rowGap));
+    const markerCenters = timePoints.map((timePoint, i) => {
+        if (timePoints.length <= 1) return (markerLeft + markerRight) / 2;
+        return markerLeft + i * ((markerRight - markerLeft) / (timePoints.length - 1));
+    });
+    const markerRadius = Math.max(17, Math.min(30, rowHeight * 0.30, (markerRight - markerLeft) / Math.max(timePoints.length * 2.45, 1)));
+
+    chart.append("line")
+        .attr("class", "bump11-year-separator")
+        .attr("x1", panelX + 26)
+        .attr("x2", panelX + panelW - 26)
+        .attr("y1", panelY + 86)
+        .attr("y2", panelY + 86)
+        .attr("stroke", "#d6e8ee")
+        .attr("stroke-width", 1.2);
+
+    const widestYear = timePoints.reduce((a, b) => safeText(a).length > safeText(b).length ? a : b, "");
+    const yearFont = fitFont(widestYear, Math.max(36, (markerRight - markerLeft) / Math.max(timePoints.length, 1) - 8), 18, labelFamily, 800, 11);
+    timePoints.forEach((timePoint, i) => {
+        chart.append("text")
+            .attr("class", "bump11-year-label")
+            .attr("x", markerCenters[i])
+            .attr("y", yearY)
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", yearFont)
+            .attr("font-weight", 800)
+            .attr("fill", "#0a6680")
+            .text(safeText(timePoint));
+    });
+
+    groups.forEach((group, groupIndex) => {
+        const cy = rowCenters[groupIndex];
+        const y = cy - rowHeight / 2;
+        const points = grouped.get(group) || [];
+        const ramp = rowRamps[groupIndex % rowRamps.length];
+        const slotRadius = denseRows
+            ? Math.max(14, Math.min(22, rowHeight * 0.28))
+            : Math.max(21, Math.min(38, rowHeight * 0.36));
+        const slotCy = denseRows ? cy : cy - (rowHeight > 68 ? 8 : 0);
+
+        if (groupIndex > 0) {
+            chart.append("line")
+                .attr("class", "bump11-row-separator")
+                .attr("x1", panelX + 26)
+                .attr("x2", panelX + panelW - 26)
+                .attr("y1", y - rowGap / 2)
+                .attr("y2", y - rowGap / 2)
+                .attr("stroke", "#d8eaf0")
+                .attr("stroke-width", 1.2);
+        }
+
+        const rowSlot = chart.append("g")
+            .attr("class", "reserved-asset-slot bump11-row-city-slot")
+            .attr("data-asset-slot", "row-city-thumbnail")
+            .attr("data-slot-policy", "image2_asset_or_neutral_placeholder")
+            .attr("data-asset-source-policy", "image2_asset_or_neutral_placeholder")
+            .attr("data-anchor", "row-left-center")
+            .attr("data-bbox", `${labelColumnX - slotRadius},${slotCy - slotRadius},${slotRadius * 2},${slotRadius * 2}`)
+            .attr("data-mask-policy", "circle")
+            .attr("data-collision-rule", "stay inside row band, clear of group label and first marker column")
+            .attr("data-group", safeText(group));
+        rowSlot.append("circle")
+            .attr("cx", labelColumnX)
+            .attr("cy", slotCy)
+            .attr("r", slotRadius)
+            .attr("fill", ramp[Math.min(1, ramp.length - 1)])
+            .attr("opacity", 0.16);
+        rowSlot.append("circle")
+            .attr("cx", labelColumnX)
+            .attr("cy", slotCy)
+            .attr("r", slotRadius - 3)
+            .attr("fill", "#f5fbfd")
+            .attr("stroke", ramp[Math.min(2, ramp.length - 1)])
+            .attr("stroke-width", 1.5)
+            .attr("opacity", 0.9);
+        rowSlot.append("text")
+            .attr("x", labelColumnX)
+            .attr("y", slotCy + 6)
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", Math.max(12, Math.min(16, slotRadius * 0.43)))
+            .attr("font-weight", 800)
+            .attr("fill", ramp[Math.min(2, ramp.length - 1)])
+            .text(safeText(group).split(/\s+/).map(word => word[0]).join("").slice(0, 3).toUpperCase());
+
+        const groupFont = denseRows
+            ? fitFont(group, markerLeft - (labelColumnX + slotRadius + 10) - 8, 12, labelFamily, 900, 8)
+            : fitFont(group, 130, rowHeight > 72 ? 20 : 14, labelFamily, 900, 9);
+        const groupText = chart.append("text")
+            .attr("class", "bump11-group-label")
+            .attr("x", denseRows ? labelColumnX + slotRadius + 10 : labelColumnX)
+            .attr("y", denseRows ? cy - groupFont * 0.35 : slotCy + slotRadius + Math.max(15, groupFont))
+            .attr("text-anchor", denseRows ? "start" : "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", groupFont)
+            .attr("font-weight", 900)
+            .attr("fill", "#071d35");
+        if (denseRows) {
+            wrapText(groupText, group, markerLeft - (labelColumnX + slotRadius + 10) - 8, 2, Math.round(groupFont * 1.1), groupFont, labelFamily, 900);
+        } else {
+            groupText.text(safeText(group));
+        }
+
+        for (let i = 0; i < points.length - 1; i += 1) {
+            const currentIndex = timePoints.indexOf(points[i][timeField]);
+            const nextIndex = timePoints.indexOf(points[i + 1][timeField]);
+            if (currentIndex < 0 || nextIndex < 0) continue;
+            const x1 = markerCenters[currentIndex] + markerRadius * 0.78;
+            const x2 = markerCenters[nextIndex] - markerRadius * 0.78;
+            if (x2 <= x1) continue;
+            chart.append("line")
+                .attr("class", "bump11-connector")
+                .attr("data-group", safeText(group))
+                .attr("x1", x1)
+                .attr("x2", x2)
+                .attr("y1", cy)
+                .attr("y2", cy)
+                .attr("stroke", d3.interpolateRgb(ramp[1], ramp[ramp.length - 1])(0.45))
+                .attr("stroke-width", 2.4)
+                .attr("opacity", 0.88)
+                .attr("stroke-linecap", "round");
+        }
+
+        points.forEach(point => {
+            const timeIndex = timePoints.indexOf(point[timeField]);
+            if (timeIndex < 0) return;
+            const cx = markerCenters[timeIndex];
+            const value = +point[valueField];
+            const t = timePoints.length <= 1 ? 0 : timeIndex / (timePoints.length - 1);
+            const fill = d3.interpolateRgb(ramp[0], ramp[ramp.length - 1])(t);
+            const valueText = chartUtils.format.compactFixedText(Number.isFinite(value) ? value : 0);
+            const valueFont = fitFont(valueText, markerRadius * 1.42, 18, annotationFamily, 800, 10);
+            const dark = chartUtils.color.brightness(fill, { fallback: "#ffffff" }) < 0.55;
+
+            chart.append("path")
+                .attr("class", "bump11-value-hex")
+                .attr("data-group", safeText(group))
+                .attr("data-time", safeText(point[timeField]))
+                .attr("data-value", Number.isFinite(value) ? value : "")
+                .attr("d", hexagonPath(cx, cy, markerRadius))
+                .attr("fill", fill)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 1.6);
+            chart.append("text")
+                .attr("class", "bump11-value-label")
+                .attr("x", cx)
+                .attr("y", cy + valueFont * 0.34)
+                .attr("text-anchor", "middle")
+                .attr("font-family", annotationFamily)
+                .attr("font-size", valueFont)
+                .attr("font-weight", 800)
+                .attr("fill", dark ? "#ffffff" : "#0b1f2d")
+                .text(valueText);
+        });
+    });
+
+    const legendY = 905;
+    const legendX = 62;
+    chart.append("path")
+        .attr("class", "bump11-scale-legend-hex")
+        .attr("d", hexagonPath(legendX, legendY + 8, 22))
+        .attr("fill", "none")
+        .attr("stroke", "#0c6d81")
+        .attr("stroke-width", 2);
+    chart.append("text")
+        .attr("x", legendX)
+        .attr("y", legendY + 15)
+        .attr("text-anchor", "middle")
+        .attr("font-family", annotationFamily)
+        .attr("font-size", 16)
+        .attr("font-weight", 800)
+        .attr("fill", "#0c6d81")
+        .text("1K");
+    const legendText = chart.append("text")
+        .attr("class", "bump11-scale-legend-text")
+        .attr("x", legendX + 55)
+        .attr("y", legendY)
+        .attr("font-family", labelFamily)
+        .attr("font-size", 16)
+        .attr("font-weight", 400)
+        .attr("fill", "#33485d");
+    const valueColumn = ((jsonData.data && jsonData.data.columns) || []).find(column => column && column.name === valueField) || {};
+    const valueDescription = safeText(valueColumn.description || humanizeFieldName(valueField) || "values");
+    const valueUnit = safeText(valueColumn.unit || "").trim();
+    const normalizedDescription = valueDescription.toLowerCase();
+    const normalizedUnit = valueUnit.toLowerCase();
+    const descriptionIncludesUnit = valueUnit && (
+        normalizedDescription.includes(`(${normalizedUnit})`) ||
+        normalizedDescription.includes(normalizedUnit)
+    );
+    const legendLabel = valueUnit && !descriptionIncludesUnit
+        ? `Values represent ${valueDescription} (${valueUnit})`
+        : `Values represent ${valueDescription}`;
+    const descriptionWithoutParenthetical = valueDescription.replace(/\s*\([^)]*\)\s*$/, "").trim() || valueDescription;
+    const compactField = humanizeFieldName(valueField) || "value";
+    const compactWithUnit = valueUnit && !compactField.toLowerCase().includes(normalizedUnit)
+        ? `${compactField} (${valueUnit})`
+        : compactField;
+    const legendFit = chooseFittingText([
+        legendLabel,
+        `Values represent ${descriptionWithoutParenthetical}`,
+        `Values represent ${compactWithUnit}`,
+        `Values: ${compactWithUnit}`,
+        "Values"
+    ], 330, 3, 16, 11, labelFamily, 400);
+    legendText
+        .attr("font-size", legendFit.fontSize)
+        .attr("data-legend-text-policy", "fit-no-ellipsis")
+        .attr("data-legend-source-field", safeText(valueField));
+    setWrappedLines(legendText, legendFit.lines, legendFit.lineHeight);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_12.js

@@ -0,0 +1,561 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Sorted Lines Chart",
+    "chart_name": "bump_chart_12",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = (jsonData.data && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const width = Math.max(620, variables.width || 650);
+    const height = Math.max(920, variables.height ? Math.round(variables.height * 1.62) : 975);
+    const timeField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+
+    function safeText(value) {
+        return value == null ? "" : String(value);
+    }
+
+    function measureText(text, fontSize, fontFamily, fontWeight) {
+        return chartUtils.text.measure(null, safeText(text), {
+            fontFamily,
+            fontSize,
+            fontWeight
+        }).width;
+    }
+
+    function fitFont(text, maxWidth, start, family, weight, minSize) {
+        let size = start;
+        while (size > minSize && measureText(text, size, family, weight) > maxWidth) {
+            size -= 1;
+        }
+        return size;
+    }
+
+    function computeWrappedLines(text, maxWidth, fontSize, family, weight) {
+        const words = safeText(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (measureText(candidate, fontSize, family, weight) <= maxWidth || !line) {
+                line = candidate;
+            } else {
+                lines.push(line);
+                line = word;
+            }
+        });
+        if (line) lines.push(line);
+        return lines;
+    }
+
+    function wrapText(selection, text, maxWidth, maxLines, lineHeight, fontSize, family, weight) {
+        const lines = computeWrappedLines(text, maxWidth, fontSize, family, weight);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            let last = visible[visible.length - 1];
+            while (last.length > 1 && measureText(`${last}...`, fontSize, family, weight) > maxWidth) {
+                last = last.slice(0, -1);
+            }
+            visible[visible.length - 1] = `${last}...`;
+        }
+        selection.selectAll("tspan")
+            .data(visible)
+            .enter()
+            .append("tspan")
+            .attr("x", selection.attr("x"))
+            .attr("dy", (d, i) => i === 0 ? 0 : lineHeight)
+            .text(d => d);
+        return visible.length;
+    }
+
+    function parseTimeValue(value) {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed.getTime();
+        const numeric = +value;
+        return Number.isFinite(numeric) ? numeric : safeText(value);
+    }
+
+    function titleCaseWords(text) {
+        return safeText(text)
+            .replace(/[_-]+/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function deriveHeaderParts(title) {
+        const clean = titleCaseWords(title);
+        const match = clean.match(/\s+(for|in|across|among)\s+(.+)$/i);
+        if (match && match.index > 8) {
+            return {
+                headline: clean.slice(0, match.index).trim(),
+                ribbon: `${match[1]} ${match[2]}`.trim()
+            };
+        }
+        return {
+            headline: clean,
+            ribbon: groupDescriptor ? `for ${groupDescriptor}` : "by group"
+        };
+    }
+
+    function initials(text) {
+        const parts = titleCaseWords(text).split(/\s+/).filter(Boolean);
+        return (parts.length ? parts.map(word => word[0]).join("") : safeText(text).slice(0, 2))
+            .slice(0, 3)
+            .toUpperCase();
+    }
+
+    function compactValue(value) {
+        const numeric = +value;
+        if (!Number.isFinite(numeric)) return safeText(value);
+        const column = dataColumns.find(col => col && col.name === valueField) || {};
+        const unit = safeText(column.unit || "").trim();
+        const rounded = Math.abs(numeric) >= 100
+            ? chartUtils.format.compactFixedText(numeric)
+            : chartUtils.format.compactFixedText(numeric).replace(/\\.0$/, "");
+        if (unit === "%" && !rounded.includes("%")) return `${rounded}%`;
+        return rounded;
+    }
+
+    const titleFamily = (typography.title && typography.title.font_family) || "Arial, Helvetica, sans-serif";
+    const labelFamily = (typography.label && typography.label.font_family) || "Arial, Helvetica, sans-serif";
+    const annotationFamily = (typography.annotation && typography.annotation.font_family) || "Arial, Helvetica, sans-serif";
+    const rawTitle = safeText((jsonData.titles && jsonData.titles.main_title) || (jsonData.metadata && jsonData.metadata.title) || "Increased Graduation Rates");
+    const subtitleText = safeText((jsonData.titles && jsonData.titles.sub_title) || (jsonData.metadata && jsonData.metadata.description) || jsonData.description || "");
+    const groupDescriptor = titleCaseWords(groupField).replace(/s$/i, "");
+    const headerParts = deriveHeaderParts(rawTitle);
+
+    const timePoints = [...new Set(chartData.map(d => d[timeField]))]
+        .sort((a, b) => {
+            const pa = parseTimeValue(a);
+            const pb = parseTimeValue(b);
+            if (typeof pa === "number" && typeof pb === "number") return pa - pb;
+            return safeText(a).localeCompare(safeText(b));
+        });
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const grouped = new Map(groups.map(group => [
+        group,
+        chartData.filter(d => d[groupField] === group)
+            .sort((a, b) => timePoints.indexOf(a[timeField]) - timePoints.indexOf(b[timeField]))
+    ]));
+
+    const fallbackPalette = [
+        "#57a80a", "#eb2d80", "#1261bd", "#f46610", "#16a79c",
+        "#7b62d1", "#d79b19", "#00875f", "#e34f4f", "#4b83d8"
+    ];
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+
+    function rowColor(group, index) {
+        return colorScale(group) || fallbackPalette[index % fallbackPalette.length];
+    }
+
+    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 defs = svg.append("defs");
+    const bg = defs.append("radialGradient")
+        .attr("id", "bump12-bg")
+        .attr("cx", "50%")
+        .attr("cy", "18%")
+        .attr("r", "86%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#ffffff");
+    bg.append("stop").attr("offset", "58%").attr("stop-color", "#f2f8fc");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#e4f1f8");
+
+    const railGrad = defs.append("linearGradient")
+        .attr("id", "bump12-rail")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    railGrad.append("stop").attr("offset", "0%").attr("stop-color", "#061b45");
+    railGrad.append("stop").attr("offset", "54%").attr("stop-color", "#073b7a");
+    railGrad.append("stop").attr("offset", "100%").attr("stop-color", "#061b45");
+
+    defs.append("filter")
+        .attr("id", "bump12-card-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-18%")
+        .attr("width", "116%")
+        .attr("height", "140%")
+        .html('<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#8baebe" flood-opacity="0.22"/>');
+
+    defs.append("filter")
+        .attr("id", "bump12-marker-shadow")
+        .attr("x", "-30%")
+        .attr("y", "-30%")
+        .attr("width", "160%")
+        .attr("height", "160%")
+        .html('<feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#496b80" flood-opacity="0.25"/>');
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump12-bg)");
+
+    const headerArt = svg.append("g")
+        .attr("class", "reserved-asset-slot bump12-header-art-slot")
+        .attr("data-asset-slot", "header-graduation-art")
+        .attr("data-slot-policy", "image2_asset")
+        .attr("data-asset-source-policy", "image2_asset")
+        .attr("data-anchor", "header-safe-area")
+        .attr("data-bbox", `${Math.round(width * 0.02)},${Math.round(height * 0.02)},${Math.round(width * 0.96)},${Math.round(height * 0.25)}`)
+        .attr("data-mask-policy", "soft clipped header bbox")
+        .attr("data-collision-rule", "clear title, ribbon, subtitle, year rail, and row cards");
+    headerArt.append("path")
+        .attr("d", `M${width * 0.04},${height * 0.08} L${width * 0.18},${height * 0.045} L${width * 0.30},${height * 0.08} L${width * 0.18},${height * 0.125} Z`)
+        .attr("fill", "#9bc4e3")
+        .attr("opacity", 0.28);
+    headerArt.append("circle")
+        .attr("cx", width * 0.90)
+        .attr("cy", height * 0.10)
+        .attr("r", 44)
+        .attr("fill", "#9fc8e5")
+        .attr("opacity", 0.18);
+    headerArt.append("circle")
+        .attr("cx", width * 0.94)
+        .attr("cy", height * 0.18)
+        .attr("r", 30)
+        .attr("fill", "#82b8dd")
+        .attr("opacity", 0.12);
+    [[0.06, 0.19], [0.12, 0.16], [0.78, 0.09], [0.84, 0.16], [0.96, 0.035]].forEach((pt, i) => {
+        headerArt.append("path")
+            .attr("d", d3.symbol().type(i % 2 ? d3.symbolCircle : d3.symbolDiamond).size(i % 2 ? 22 : 46)())
+            .attr("transform", `translate(${width * pt[0]},${height * pt[1]})`)
+            .attr("fill", "#6aa3d2")
+            .attr("opacity", 0.24);
+    });
+
+    const titleMaxWidth = width * 0.84;
+    let titleFont = Math.min(
+        fitFont(headerParts.headline.toUpperCase(), titleMaxWidth, 58, titleFamily, 900, 32),
+        fitFont(headerParts.headline.split(/\s+/).reduce((a, b) => a.length > b.length ? a : b, "").toUpperCase(), titleMaxWidth, 58, titleFamily, 900, 32)
+    );
+    let titleLines = computeWrappedLines(headerParts.headline.toUpperCase(), titleMaxWidth, titleFont, titleFamily, 900);
+    while (titleFont > 25 && titleLines.length > 3) {
+        titleFont -= 1;
+        titleLines = computeWrappedLines(headerParts.headline.toUpperCase(), titleMaxWidth, titleFont, titleFamily, 900);
+    }
+    if (titleLines.length > 3) {
+        titleLines = titleLines.slice(0, 3);
+        let last = titleLines[2];
+        while (last.length > 1 && measureText(`${last}...`, titleFont, titleFamily, 900) > titleMaxWidth) {
+            last = last.slice(0, -1);
+        }
+        titleLines[2] = `${last}...`;
+    }
+    const title = svg.append("text")
+        .attr("class", "bump12-title")
+        .attr("x", width / 2)
+        .attr("y", 72)
+        .attr("text-anchor", "middle")
+        .attr("font-family", titleFamily)
+        .attr("font-size", titleFont)
+        .attr("font-weight", 900)
+        .attr("letter-spacing", "0")
+        .attr("fill", "#061b45");
+    title.selectAll("tspan")
+        .data(titleLines)
+        .enter()
+        .append("tspan")
+        .attr("x", width / 2)
+        .attr("dy", (d, i) => i === 0 ? 0 : Math.round(titleFont * 1.02))
+        .text(d => d);
+
+    const titleBottom = 72 + Math.max(1, titleLines.length - 1) * Math.round(titleFont * 1.02) + titleFont * 0.24;
+    const ribbonY = Math.max(172, titleBottom + 34);
+    const ribbonW = Math.min(420, width * 0.66);
+    const ribbonH = 38;
+    const ribbonX = (width - ribbonW) / 2;
+    svg.append("path")
+        .attr("class", "bump12-title-ribbon")
+        .attr("d", [
+            `M${ribbonX + 18},${ribbonY}`,
+            `L${ribbonX + ribbonW - 18},${ribbonY}`,
+            `L${ribbonX + ribbonW},${ribbonY + ribbonH / 2}`,
+            `L${ribbonX + ribbonW - 18},${ribbonY + ribbonH}`,
+            `L${ribbonX + 18},${ribbonY + ribbonH}`,
+            `L${ribbonX},${ribbonY + ribbonH / 2}`,
+            "Z"
+        ].join(" "))
+        .attr("fill", "#0b63c8");
+    svg.append("line")
+        .attr("x1", ribbonX - 46)
+        .attr("x2", ribbonX - 10)
+        .attr("y1", ribbonY + ribbonH / 2)
+        .attr("y2", ribbonY + ribbonH / 2)
+        .attr("stroke", "#0b63c8")
+        .attr("stroke-width", 3)
+        .attr("stroke-linecap", "round");
+    svg.append("line")
+        .attr("x1", ribbonX + ribbonW + 10)
+        .attr("x2", ribbonX + ribbonW + 46)
+        .attr("y1", ribbonY + ribbonH / 2)
+        .attr("y2", ribbonY + ribbonH / 2)
+        .attr("stroke", "#0b63c8")
+        .attr("stroke-width", 3)
+        .attr("stroke-linecap", "round");
+
+    const ribbonText = headerParts.ribbon.toUpperCase();
+    svg.append("text")
+        .attr("class", "bump12-ribbon-text")
+        .attr("x", width / 2)
+        .attr("y", ribbonY + ribbonH / 2 + 8)
+        .attr("text-anchor", "middle")
+        .attr("font-family", labelFamily)
+        .attr("font-size", fitFont(ribbonText, ribbonW - 50, 22, labelFamily, 900, 12))
+        .attr("font-weight", 900)
+        .attr("fill", "#ffffff")
+        .text(ribbonText);
+
+    const subtitle = svg.append("text")
+        .attr("class", "bump12-subtitle")
+        .attr("x", width / 2)
+        .attr("y", ribbonY + ribbonH + 34)
+        .attr("text-anchor", "middle")
+        .attr("font-family", labelFamily)
+        .attr("font-size", 18)
+        .attr("font-weight", 400)
+        .attr("fill", "#304254");
+    wrapText(subtitle, subtitleText, width * 0.58, 2, 25, 18, labelFamily, 400);
+
+    const railX = 43;
+    const railY = ribbonY + ribbonH + 96;
+    const railW = width - railX * 2;
+    const railH = 42;
+    const rowAreaTop = railY + railH + 28;
+    const rowAreaBottom = Math.min(height - 58, rowAreaTop + Math.max(410, height - rowAreaTop - 76));
+    const rowGap = groups.length > 6 ? 12 : 16;
+    const rowHeight = Math.max(48, Math.min(88, (rowAreaBottom - rowAreaTop - rowGap * Math.max(groups.length - 1, 0)) / Math.max(groups.length, 1)));
+    const rowCenters = groups.map((group, i) => rowAreaTop + rowHeight / 2 + i * (rowHeight + rowGap));
+    const markerLeft = railX + 230;
+    const markerRight = railX + railW - 68;
+    const markerCenters = timePoints.map((timePoint, i) => {
+        if (timePoints.length <= 1) return (markerLeft + markerRight) / 2;
+        return markerLeft + i * ((markerRight - markerLeft) / (timePoints.length - 1));
+    });
+    const timeGap = timePoints.length > 1 ? (markerRight - markerLeft) / (timePoints.length - 1) : 120;
+    const markerRadius = Math.max(18, Math.min(30, rowHeight * 0.34, timeGap * 0.22));
+
+    svg.append("rect")
+        .attr("class", "bump12-year-rail")
+        .attr("x", railX)
+        .attr("y", railY)
+        .attr("width", railW)
+        .attr("height", railH)
+        .attr("rx", 10)
+        .attr("fill", "url(#bump12-rail)")
+        .attr("filter", "url(#bump12-marker-shadow)");
+    svg.append("text")
+        .attr("x", railX + 58)
+        .attr("y", railY + railH / 2 + 7)
+        .attr("text-anchor", "middle")
+        .attr("font-family", labelFamily)
+        .attr("font-size", 16)
+        .attr("font-weight", 900)
+        .attr("fill", "#ffffff")
+        .text(safeText(timeField).toUpperCase());
+
+    const widestYear = timePoints.reduce((a, b) => safeText(a).length > safeText(b).length ? a : b, "");
+    const yearFont = fitFont(widestYear, Math.max(34, timeGap - 12), 18, labelFamily, 900, 11);
+    timePoints.forEach((timePoint, i) => {
+        svg.append("text")
+            .attr("class", "bump12-year-label")
+            .attr("x", markerCenters[i])
+            .attr("y", railY + railH / 2 + 7)
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", yearFont)
+            .attr("font-weight", 900)
+            .attr("fill", "#ffffff")
+            .text(safeText(timePoint));
+    });
+
+    const guideLayer = svg.append("g").attr("class", "bump12-guide-layer");
+    markerCenters.forEach((x, i) => {
+        guideLayer.append("line")
+            .attr("class", "bump12-year-guide")
+            .attr("data-time", safeText(timePoints[i]))
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", railY + railH)
+            .attr("y2", rowCenters[rowCenters.length - 1] + rowHeight / 2 - 3)
+            .attr("stroke", "#8aa7bf")
+            .attr("stroke-width", 1.4)
+            .attr("stroke-dasharray", "2 7")
+            .attr("stroke-linecap", "round")
+            .attr("opacity", 0.72);
+    });
+
+    const chart = svg.append("g").attr("class", "bump12-chart");
+    groups.forEach((group, groupIndex) => {
+        const color = rowColor(group, groupIndex);
+        const cy = rowCenters[groupIndex];
+        const y = cy - rowHeight / 2;
+        const points = grouped.get(group) || [];
+        const card = chart.append("g")
+            .attr("class", "bump12-row")
+            .attr("data-group", safeText(group));
+
+        card.append("rect")
+            .attr("class", "bump12-row-card")
+            .attr("x", railX)
+            .attr("y", y)
+            .attr("width", railW)
+            .attr("height", rowHeight)
+            .attr("rx", 12)
+            .attr("fill", "#ffffff")
+            .attr("stroke", "#dce9f1")
+            .attr("stroke-width", 1)
+            .attr("filter", "url(#bump12-card-shadow)");
+        card.append("path")
+            .attr("class", "bump12-row-accent-strip")
+            .attr("d", `M${railX},${y + 12} Q${railX},${y} ${railX + 12},${y} L${railX + 12},${y + rowHeight} Q${railX},${y + rowHeight} ${railX},${y + rowHeight - 12} Z`)
+            .attr("fill", color);
+
+        const slotR = Math.max(18, Math.min(31, rowHeight * 0.34));
+        const slotX = railX + 56;
+        const iconSlot = card.append("g")
+            .attr("class", "reserved-asset-slot bump12-row-icon-slot")
+            .attr("data-asset-slot", "row-group-icon")
+            .attr("data-slot-policy", "input_asset_or_image2_asset_or_neutral_placeholder")
+            .attr("data-asset-source-policy", "input_asset_or_image2_asset_or_neutral_placeholder")
+            .attr("data-anchor", "row-left-center")
+            .attr("data-bbox", `${Math.round(slotX - slotR)},${Math.round(cy - slotR)},${Math.round(slotR * 2)},${Math.round(slotR * 2)}`)
+            .attr("data-mask-policy", "circle")
+            .attr("data-collision-rule", "inside row card; clear group label and first marker column")
+            .attr("data-group", safeText(group));
+        iconSlot.append("circle")
+            .attr("cx", slotX)
+            .attr("cy", cy)
+            .attr("r", slotR)
+            .attr("fill", "#f8fcff")
+            .attr("stroke", "#d3e5ee")
+            .attr("stroke-width", 1.4);
+        iconSlot.append("circle")
+            .attr("cx", slotX)
+            .attr("cy", cy)
+            .attr("r", slotR - 7)
+            .attr("fill", color)
+            .attr("opacity", 0.16);
+        iconSlot.append("text")
+            .attr("x", slotX)
+            .attr("y", cy + Math.max(5, slotR * 0.18))
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", Math.max(9, Math.min(14, slotR * 0.48)))
+            .attr("font-weight", 900)
+            .attr("fill", color)
+            .text(initials(group));
+
+        const labelX = slotX + slotR + 16;
+        const labelMax = Math.max(80, markerLeft - labelX - markerRadius - 12);
+        const groupFont = fitFont(safeText(group).toUpperCase(), labelMax, rowHeight > 62 ? 20 : 15, labelFamily, 900, 9);
+        const groupLabel = card.append("text")
+            .attr("class", "bump12-group-label")
+            .attr("x", labelX)
+            .attr("y", cy + groupFont * 0.34)
+            .attr("font-family", labelFamily)
+            .attr("font-size", groupFont)
+            .attr("font-weight", 900)
+            .attr("letter-spacing", "0")
+            .attr("fill", "#061b45");
+        if (measureText(safeText(group).toUpperCase(), groupFont, labelFamily, 900) > labelMax) {
+            groupLabel.attr("y", cy - groupFont * 0.18);
+            wrapText(groupLabel, safeText(group).toUpperCase(), labelMax, 2, Math.round(groupFont * 1.05), groupFont, labelFamily, 900);
+        } else {
+            groupLabel.text(safeText(group).toUpperCase());
+        }
+
+        for (let i = 0; i < points.length - 1; i += 1) {
+            const currentIndex = timePoints.indexOf(points[i][timeField]);
+            const nextIndex = timePoints.indexOf(points[i + 1][timeField]);
+            if (currentIndex < 0 || nextIndex < 0) continue;
+            const x1 = markerCenters[currentIndex] + markerRadius - 1;
+            const x2 = markerCenters[nextIndex] - markerRadius + 1;
+            if (x2 <= x1) continue;
+            card.append("line")
+                .attr("class", "bump12-connector")
+                .attr("data-group", safeText(group))
+                .attr("x1", x1)
+                .attr("x2", x2)
+                .attr("y1", cy)
+                .attr("y2", cy)
+                .attr("stroke", color)
+                .attr("stroke-width", 3.2)
+                .attr("opacity", 0.88)
+                .attr("stroke-linecap", "round");
+        }
+
+        points.forEach(point => {
+            const timeIndex = timePoints.indexOf(point[timeField]);
+            if (timeIndex < 0) return;
+            const cx = markerCenters[timeIndex];
+            const valueText = compactValue(point[valueField]);
+            const valueFont = fitFont(valueText, markerRadius * 1.55, 18, annotationFamily, 900, 9);
+            card.append("circle")
+                .attr("class", "bump12-value-marker")
+                .attr("data-group", safeText(group))
+                .attr("data-time", safeText(point[timeField]))
+                .attr("data-value", Number.isFinite(+point[valueField]) ? +point[valueField] : "")
+                .attr("cx", cx)
+                .attr("cy", cy)
+                .attr("r", markerRadius)
+                .attr("fill", "#f8fcfb")
+                .attr("stroke", color)
+                .attr("stroke-width", 2.4)
+                .attr("filter", "url(#bump12-marker-shadow)");
+            card.append("text")
+                .attr("class", "bump12-value-label")
+                .attr("x", cx)
+                .attr("y", cy + valueFont * 0.34)
+                .attr("text-anchor", "middle")
+                .attr("font-family", annotationFamily)
+                .attr("font-size", valueFont)
+                .attr("font-weight", 900)
+                .attr("fill", color)
+                .text(valueText);
+        });
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_13.js

@@ -0,0 +1,439 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Sorted Lines Chart",
+    "chart_name": "bump_chart_13",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = (jsonData.data && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const width = Math.max(600, +variables.width || 600);
+    const timeField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    const groups = Array.from(new Set(chartData.map(d => d[groupField])));
+    const denseGroupHeight = 610 + Math.max(0, groups.length - 4) * 36;
+    const height = Math.max(denseGroupHeight, Math.round((+variables.height || 600) * 1.03));
+
+    const titleFamily = (typography.title && typography.title.font_family) || "Arial, Helvetica, sans-serif";
+    const labelFamily = (typography.label && typography.label.font_family) || "Arial, Helvetica, sans-serif";
+    const annotationFamily = (typography.annotation && typography.annotation.font_family) || "Arial, Helvetica, sans-serif";
+
+    function safeText(value) {
+        return value == null ? "" : String(value);
+    }
+
+    function parseTime(value) {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed.getTime();
+        const numeric = +value;
+        if (Number.isFinite(numeric)) return numeric;
+        return safeText(value).toLowerCase();
+    }
+
+    function compactValue(value) {
+        const numeric = +value;
+        if (!Number.isFinite(numeric)) return safeText(value);
+        const column = dataColumns.find(col => col && col.name === valueField) || {};
+        const unit = safeText(column.unit || "").trim();
+        let formatted = chartUtils.format.compactFixedText(numeric).replace(/\.0$/, "");
+        if (unit === "%" && !formatted.includes("%")) formatted = `${formatted}%`;
+        return formatted;
+    }
+
+    function measure(text, fontSize, fontWeight = "700", fontFamily = labelFamily) {
+        return chartUtils.text.measure(null, safeText(text), {
+            fontFamily,
+            fontSize,
+            fontWeight
+        }).width;
+    }
+
+    function fitSize(text, maxWidth, start, min, weight = "700", family = labelFamily) {
+        let size = start;
+        while (size > min && measure(text, size, weight, family) > maxWidth) size -= 1;
+        return size;
+    }
+
+    function wrapWords(text, maxWidth, fontSize, fontWeight, maxLines) {
+        const words = safeText(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (!line || measure(candidate, fontSize, fontWeight) <= maxWidth) {
+                line = candidate;
+            } else {
+                lines.push(line);
+                line = word;
+            }
+        });
+        if (line) lines.push(line);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            let last = visible[visible.length - 1];
+            while (last.length > 1 && measure(`${last}...`, fontSize, fontWeight) > maxWidth) {
+                last = last.slice(0, -1);
+            }
+            visible[visible.length - 1] = `${last}...`;
+        }
+        return visible;
+    }
+
+    function hexagonPath(cx, cy, r) {
+        const points = d3.range(6).map(i => {
+            const angle = Math.PI / 6 + i * Math.PI / 3;
+            return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+        });
+        return d3.line()(points) + "Z";
+    }
+
+    function tint(color, amount = 0.9) {
+        const c = d3.color(color) || d3.color("#426BB5");
+        const r = Math.round(c.r + (255 - c.r) * amount);
+        const g = Math.round(c.g + (255 - c.g) * amount);
+        const b = Math.round(c.b + (255 - c.b) * amount);
+        return `rgb(${r},${g},${b})`;
+    }
+
+    const timePoints = Array.from(new Set(chartData.map(d => d[timeField])))
+        .sort((a, b) => {
+            const pa = parseTime(a);
+            const pb = parseTime(b);
+            if (typeof pa === "number" && typeof pb === "number" && pa !== pb) return pa - pb;
+            return safeText(a).localeCompare(safeText(b), undefined, { numeric: true });
+        });
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+    const referencePalette = ["#1E5CE6", "#D31678", "#36AF32", "#0FB6CF", "#7B61FF", "#F59E0B"];
+    const maxValue = d3.max(chartData, d => +d[valueField]) || 1;
+    const valueUnit = (chartUtils.schema.channel(jsonData, "y").unit || "").replace(/^none$/i, "");
+
+    function groupColor(group, index) {
+        const referenceColor = referencePalette[index % referencePalette.length];
+        const resolvedField = colorResolver.field(group, index, { fallback: referenceColor });
+        let resolved = null;
+        if (resolvedField && typeof resolvedField.value === "function") {
+            resolved = resolvedField.value(group);
+        } else if (resolvedField && resolvedField.value) {
+            resolved = resolvedField.value;
+        }
+        const parsed = d3.color(resolved);
+        if (!parsed || index < 4) return referenceColor;
+        return parsed.formatHex();
+    }
+
+    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 defs = svg.append("defs");
+    defs.append("filter")
+        .attr("id", "bump13-soft-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-20%")
+        .attr("width", "116%")
+        .attr("height", "150%")
+        .append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 6)
+        .attr("flood-color", "#0B2E61")
+        .attr("flood-opacity", 0.12);
+
+    const markerGradientIds = {};
+    groups.forEach((group, index) => {
+        const base = d3.color(groupColor(group, index)) || d3.color("#426BB5");
+        const gradient = defs.append("radialGradient")
+            .attr("id", `bump13-marker-${index}`)
+            .attr("cx", "35%")
+            .attr("cy", "28%")
+            .attr("r", "78%");
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", base.brighter(0.75).formatHex());
+        gradient.append("stop").attr("offset", "58%").attr("stop-color", base.formatHex());
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", base.darker(0.35).formatHex());
+        markerGradientIds[group] = `bump13-marker-${index}`;
+    });
+
+    const outerPad = 14;
+    svg.append("rect")
+        .attr("class", "bump13-main-panel")
+        .attr("data-layout-role", "main-panel")
+        .attr("x", outerPad)
+        .attr("y", 8)
+        .attr("width", width - outerPad * 2)
+        .attr("height", height - 18)
+        .attr("rx", 22)
+        .attr("fill", "#FFFFFF")
+        .attr("fill-opacity", 0.94)
+        .attr("filter", "url(#bump13-soft-shadow)");
+
+    const panelX = 30;
+    const panelW = width - 60;
+    const legendY = 24;
+    const legendH = groups.length > 4 ? 72 : 54;
+    const yearY = legendY + legendH + 60;
+    const rowTop = yearY + 34;
+    const noteH = 34;
+    const rowGap = Math.max(12, Math.min(18, height * 0.025));
+    const minRowH = groups.length > 5 ? 58 : groups.length > 4 ? 64 : 74;
+    const rowH = Math.max(minRowH, (height - rowTop - noteH - 28 - rowGap * Math.max(0, groups.length - 1)) / Math.max(1, groups.length));
+    const labelW = Math.min(148, Math.max(128, panelW * 0.25));
+    const iconSize = Math.min(42, rowH * 0.42);
+    const markerX0 = panelX + labelW + 28;
+    const markerX1 = panelX + panelW - 28;
+    const xScale = d3.scalePoint()
+        .domain(timePoints)
+        .range([markerX0, markerX1])
+        .padding(0.08);
+
+    const legend = svg.append("g")
+        .attr("class", "bump13-legend-strip")
+        .attr("data-layout-role", "legend")
+        .attr("data-coordinate-rule", "independent-strip-above-year-rail");
+    legend.append("rect")
+        .attr("x", panelX + 10)
+        .attr("y", legendY)
+        .attr("width", panelW - 20)
+        .attr("height", legendH)
+        .attr("rx", 14)
+        .attr("fill", "#FFFFFF")
+        .attr("stroke", "#EDF2FA")
+        .attr("stroke-width", 1)
+        .attr("filter", "url(#bump13-soft-shadow)");
+
+    const legendInnerX = panelX + 32;
+    const legendInnerW = panelW - 64;
+    const legendItemW = legendInnerW / Math.max(1, Math.min(groups.length, 4));
+    groups.forEach((group, index) => {
+        const color = groupColor(group, index);
+        const col = groups.length <= 4 ? index : index % 4;
+        const row = groups.length <= 4 ? 0 : Math.floor(index / 4);
+        const itemX = legendInnerX + col * legendItemW;
+        const itemY = legendY + 29 + row * 28;
+        legend.append("path")
+            .attr("d", hexagonPath(itemX + 8, itemY, 8))
+            .attr("fill", `url(#${markerGradientIds[group]})`)
+            .attr("stroke", d3.color(color).darker(0.25).formatHex())
+            .attr("stroke-width", 0.8);
+        const label = safeText(group);
+        const fontSize = fitSize(label, Math.max(40, legendItemW - 26), 13, 8, "600", labelFamily);
+        legend.append("text")
+            .attr("x", itemX + 26)
+            .attr("y", itemY + 4)
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", labelFamily)
+            .attr("font-size", fontSize)
+            .attr("font-weight", 600)
+            .attr("fill", "#13233F")
+            .text(label);
+    });
+
+    const yearLayer = svg.append("g")
+        .attr("class", "bump13-year-rail")
+        .attr("data-layout-role", "year-rail")
+        .attr("data-coordinate-rule", "grid-aligned-to-marker-columns")
+        .attr("data-time-order", "chronological");
+    timePoints.forEach(tp => {
+        const x = xScale(tp);
+        yearLayer.append("text")
+            .attr("x", x)
+            .attr("y", yearY)
+            .attr("text-anchor", "middle")
+            .attr("font-family", titleFamily)
+            .attr("font-size", 15)
+            .attr("font-weight", 800)
+            .attr("fill", "#071A45")
+            .text(safeText(tp));
+    });
+
+    const rows = svg.append("g")
+        .attr("class", "bump13-rows")
+        .attr("data-layout-role", "row-bands")
+        .attr("data-coordinate-rule", "row-band-centerline-aligned-label-icon-and-markers");
+
+    const radiusScale = d3.scaleSqrt()
+        .domain([0, maxValue])
+        .range([7, Math.min(30, rowH * 0.34)])
+        .clamp(true);
+
+    groups.forEach((group, groupIndex) => {
+        const color = groupColor(group, groupIndex);
+        const rowY = rowTop + groupIndex * (rowH + rowGap);
+        const rowCenter = rowY + rowH / 2;
+        const groupData = chartData
+            .filter(d => d[groupField] === group)
+            .sort((a, b) => timePoints.indexOf(a[timeField]) - timePoints.indexOf(b[timeField]));
+
+        const row = rows.append("g")
+            .attr("class", "bump13-row")
+            .attr("data-series", safeText(group))
+            .attr("data-row-index", groupIndex);
+
+        row.append("rect")
+            .attr("class", "bump13-row-band")
+            .attr("x", panelX)
+            .attr("y", rowY)
+            .attr("width", panelW)
+            .attr("height", rowH)
+            .attr("rx", 13)
+            .attr("fill", tint(color, 0.88))
+            .attr("fill-opacity", 0.72);
+
+        const iconX = panelX + (labelW - iconSize) / 2;
+        const iconY = rowY + 10;
+        const icon = row.append("g")
+            .attr("class", "reserved-asset-slot bump13-group-icon-slot")
+            .attr("data-asset-slot", "group-icon")
+            .attr("data-slot-policy", "input_asset_or_image2_asset")
+            .attr("data-asset-source-policy", "input_asset_or_image2_asset")
+            .attr("data-reserved-slot", "group_icon_slot")
+            .attr("data-group", safeText(group))
+            .attr("data-anchor", "group-row-label-block")
+            .attr("data-collision-rule", "stay-inside-row-band-left-of-marker-columns-and-clear-of-group-label")
+            .attr("data-bbox", `${iconX.toFixed(2)},${iconY.toFixed(2)},${iconSize.toFixed(2)},${iconSize.toFixed(2)}`)
+            .attr("data-bbox-policy", "transform plus local width/height define the visible reserved bbox")
+            .attr("data-mask-policy", "downstream asset may replace only within this hex slot")
+            .attr("transform", `translate(${iconX},${iconY})`);
+        icon.append("path")
+            .attr("d", hexagonPath(iconSize / 2, iconSize / 2, iconSize / 2))
+            .attr("fill", `url(#${markerGradientIds[group]})`)
+            .attr("stroke", d3.color(color).darker(0.35).formatHex())
+            .attr("stroke-width", 1.1);
+        icon.append("text")
+            .attr("x", iconSize / 2)
+            .attr("y", iconSize / 2 + 1)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", titleFamily)
+            .attr("font-size", Math.max(10, iconSize * 0.32))
+            .attr("font-weight", 900)
+            .attr("fill", "#FFFFFF")
+            .text(safeText(group).slice(0, 1).toUpperCase());
+
+        const labelX = panelX + labelW / 2;
+        const labelMaxW = labelW - 18;
+        const labelLines = wrapWords(group, labelMaxW, 11, "800", 2);
+        const labelStartY = iconY + iconSize + 15 - (labelLines.length - 1) * 7;
+        labelLines.forEach((line, lineIndex) => {
+            row.append("text")
+                .attr("class", "bump13-group-label")
+                .attr("x", labelX)
+                .attr("y", labelStartY + lineIndex * 17)
+                .attr("dominant-baseline", "middle")
+                .attr("text-anchor", "middle")
+                .attr("font-family", titleFamily)
+                .attr("font-size", fitSize(line, labelMaxW, 11, 8, "800", titleFamily))
+                .attr("font-weight", 800)
+                .attr("fill", d3.color(color).darker(0.32).formatHex())
+                .text(line);
+        });
+
+        const points = groupData.map(d => ({
+            datum: d,
+            x: xScale(d[timeField]),
+            y: rowCenter - Math.min(10, rowH * 0.13),
+            value: +d[valueField],
+            radius: radiusScale(+d[valueField])
+        })).filter(p => Number.isFinite(p.x));
+
+        if (points.length >= 2) {
+            row.append("path")
+                .attr("class", "bump13-connector")
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", 1.6)
+                .attr("stroke-opacity", 0.92)
+                .attr("d", d3.line().x(d => d.x).y(d => d.y)(points));
+        }
+
+        points.forEach(point => {
+            row.append("path")
+                .attr("class", "bump13-hex-marker")
+                .attr("data-year", safeText(point.datum[timeField]))
+                .attr("data-value", safeText(point.datum[valueField]))
+                .attr("d", hexagonPath(point.x, point.y, point.radius))
+                .attr("fill", `url(#${markerGradientIds[group]})`)
+                .attr("stroke", d3.color(color).darker(0.28).formatHex())
+                .attr("stroke-width", 0.8);
+
+            row.append("text")
+                .attr("class", "bump13-value-label")
+                .attr("x", point.x)
+                .attr("y", Math.min(rowY + rowH - 11, point.y + point.radius + 17))
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("font-family", annotationFamily)
+                .attr("font-size", 13)
+                .attr("font-weight", 700)
+                .attr("fill", "#071A45")
+                .text(compactValue(point.value));
+        });
+    });
+
+    const noteY = Math.min(height - 26, rowTop + groups.length * rowH + Math.max(0, groups.length - 1) * rowGap + 24);
+    const note = svg.append("g")
+        .attr("class", "bump13-unit-note")
+        .attr("data-layout-role", "chart-owned-unit-note")
+        .attr("data-coordinate-rule", "bottom-anchored-independent-note");
+    note.append("circle")
+        .attr("cx", panelX + 12)
+        .attr("cy", noteY - 4)
+        .attr("r", 8)
+        .attr("fill", "#7F8CA3");
+    note.append("text")
+        .attr("x", panelX + 12)
+        .attr("y", noteY - 3)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("font-family", annotationFamily)
+        .attr("font-size", 11)
+        .attr("font-weight", 800)
+        .attr("fill", "#FFFFFF")
+        .text("i");
+    note.append("text")
+        .attr("x", panelX + 30)
+        .attr("y", noteY)
+        .attr("font-family", annotationFamily)
+        .attr("font-size", 12)
+        .attr("font-style", "italic")
+        .attr("fill", "#69758B")
+        .text(valueUnit ? `Values represent ${valueField} (${valueUnit}).` : `Values represent ${valueField}.`);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/bump_chart_14.js

@@ -0,0 +1,455 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Sorted Lines Chart",
+    "chart_name": "bump_chart_14",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "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 || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "bold" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };
+
+    d3.select(containerSelector).html("");
+
+    const width = +variables.width || 800;
+    const height = +variables.height || 600;
+    const timeField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    const valueChannel = chartUtils.schema.channel(jsonData, "y") || {};
+    const valueUnit = valueChannel.unit && valueChannel.unit !== "none" ? valueChannel.unit : "";
+
+    const timePoints = [...new Set(chartData.map(d => d[timeField]))]
+        .sort((a, b) => {
+            const da = chartUtils.format.parseDate(a);
+            const db = chartUtils.format.parseDate(b);
+            const ta = da instanceof Date ? da.getTime() : +da;
+            const tb = db instanceof Date ? db.getTime() : +db;
+            if (Number.isFinite(ta) && Number.isFinite(tb) && ta !== tb) return ta - tb;
+            return String(a).localeCompare(String(b), undefined, { numeric: true });
+        });
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+
+    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 fontFamily = typography.label.font_family || "Arial, Helvetica, sans-serif";
+    const textColor = colorResolver.text({ fallback: colors.text_color || "#17213A" }).value;
+    const navy = "#101A3F";
+
+    const defs = svg.append("defs");
+    defs.append("filter")
+        .attr("id", "bump14-soft-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-24%")
+        .attr("width", "116%")
+        .attr("height", "160%")
+        .append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 5)
+        .attr("stdDeviation", 7)
+        .attr("flood-color", "#23345D")
+        .attr("flood-opacity", 0.13);
+
+    svg.append("g")
+        .attr("class", "reserved-asset-slot bump14-header-primary-slot")
+        .attr("data-asset-slot", "header-primary")
+        .attr("data-asset-source-policy", images.other && images.other.primary ? "input_provided" : "input_asset_or_image2_asset")
+        .attr("data-anchor", "header-left-safe-area")
+        .attr("data-bbox", `${Math.round(width * 0.04)},${Math.round(height * 0.02)},${Math.round(width * 0.20)},${Math.round(height * 0.16)}`)
+        .attr("data-collision-rule", "owned by header wrapper; avoid title, subtitle, legend, and chart panels")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("opacity", 0);
+
+    function measure(text, fontSize, fontWeight = "700") {
+        return chartUtils.text.measure(svg, String(text), { fontFamily, fontSize, fontWeight }).width;
+    }
+
+    function fitText(text, maxWidth, fontSize, fontWeight = "700", minSize = 7) {
+        let size = fontSize;
+        while (size > minSize && measure(text, size, fontWeight) > maxWidth) size -= 1;
+        return size;
+    }
+
+    function ellipsize(text, maxWidth, fontSize, fontWeight = "700") {
+        const value = String(text);
+        if (measure(value, fontSize, fontWeight) <= maxWidth) return value;
+        let clipped = value;
+        while (clipped.length > 2 && measure(`${clipped}...`, fontSize, fontWeight) > maxWidth) {
+            clipped = clipped.slice(0, -1);
+        }
+        return `${clipped}...`;
+    }
+
+    function getColor(group, index) {
+        const scale = colorResolver.scale(groups, { palette: "category10" });
+        return scale(group) || colorResolver.field(group, index, { fallback: "#2F6DEB" }).value || "#2F6DEB";
+    }
+
+    function rgba(color, alpha) {
+        const c = d3.color(color);
+        if (!c) return `rgba(47,109,235,${alpha})`;
+        return `rgba(${c.r},${c.g},${c.b},${alpha})`;
+    }
+
+    function circleFill(color, timeIndex) {
+        const c = d3.color(color);
+        if (!c) return color;
+        const n = Math.max(1, timePoints.length - 1);
+        const t = timeIndex / n;
+        if (t < 0.45) return c.brighter(0.75 - t).formatHex();
+        return c.darker(Math.max(0, (t - 0.25) * 0.95)).formatHex();
+    }
+
+    function contrastText(fill) {
+        const c = d3.color(fill);
+        if (!c) return "#FFFFFF";
+        const luminance = (0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) / 255;
+        return luminance > 0.62 ? "#17213A" : "#FFFFFF";
+    }
+
+    function drawGroupIcon(parent, group, x, y, size, color, anchorName) {
+        const slot = parent.append("g")
+            .attr("class", "bump14-group-icon-slot reserved-asset-slot")
+            .attr("data-asset-slot", "group-icon")
+            .attr("data-group", String(group))
+            .attr("data-asset-source-policy", "neutral_placeholder_or_downstream_asset")
+            .attr("data-anchor", anchorName)
+            .attr("data-collision-rule", "stay inside legend item or row card bbox")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("data-no-embedded-raster", "true")
+            .attr("transform", `translate(${x},${y})`);
+
+        slot.append("circle")
+            .attr("r", size / 2)
+            .attr("fill", "#F6FAFF")
+            .attr("stroke", rgba(color, 0.30))
+            .attr("stroke-width", 1.4);
+
+        slot.append("circle")
+            .attr("r", Math.max(2.2, size * 0.14))
+            .attr("fill", color)
+            .attr("opacity", 0.72);
+
+        slot.append("text")
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", fontFamily)
+            .attr("font-weight", "900")
+            .attr("font-size", Math.max(8, size * 0.42))
+            .attr("fill", color)
+            .attr("opacity", 0.92)
+            .text(String(group).slice(0, 1).toUpperCase());
+    }
+
+    const values = chartData.map(d => +d[valueField]).filter(Number.isFinite);
+    const maxValue = d3.max(values) || 1;
+    const minValue = d3.min(values) || 0;
+
+    const outerX = Math.max(20, width * 0.04);
+    const outerRight = Math.max(20, width * 0.035);
+    const legendX = outerX;
+    const legendY = Math.max(8, height * 0.018);
+    const legendW = width - outerX - outerRight;
+    const legendCols = Math.max(1, Math.min(4, groups.length));
+    const legendRows = Math.ceil(groups.length / legendCols);
+    const legendRowH = Math.max(34, Math.min(42, height * 0.07));
+    const legendH = 16 + legendRows * legendRowH;
+    const yearLabelY = legendY + legendH + Math.max(28, height * 0.055);
+    const dotY = yearLabelY + 20;
+    const rowTop = dotY + Math.max(18, height * 0.035);
+    const bottomPad = Math.max(18, height * 0.035);
+    const rowGap = Math.max(8, Math.min(15, height * 0.022));
+    let rowH = (height - rowTop - bottomPad - rowGap * Math.max(0, groups.length - 1)) / Math.max(1, groups.length);
+    rowH = Math.max(34, Math.min(82, rowH));
+    const rowChartBottom = rowTop + groups.length * rowH + Math.max(0, groups.length - 1) * rowGap;
+
+    const labelCardW = Math.max(82, Math.min(118, width * 0.20));
+    const plotX0 = outerX + labelCardW + Math.max(25, width * 0.045);
+    const plotX1 = width - outerRight - 4;
+    const xScale = d3.scalePoint()
+        .domain(timePoints)
+        .range([plotX0, plotX1])
+        .padding(0.03);
+    const columnGap = timePoints.length > 1
+        ? d3.min(timePoints.slice(1).map((d, i) => xScale(d) - xScale(timePoints[i])))
+        : plotX1 - plotX0;
+    const maxRadius = Math.max(7, Math.min(rowH * 0.31, columnGap * 0.30, 24));
+    const minRadius = Math.max(4.5, Math.min(maxRadius * 0.38, 8));
+    const radiusScale = d3.scaleSqrt()
+        .domain([Math.min(0, minValue), maxValue])
+        .range([minRadius, maxRadius])
+        .clamp(true);
+
+    const legend = svg.append("g")
+        .attr("class", "bump14-legend-card")
+        .attr("data-coordinate-relationship", "independent_grid_aligned")
+        .attr("data-anchor", "below-title-above-year-grid");
+
+    legend.append("rect")
+        .attr("x", legendX)
+        .attr("y", legendY)
+        .attr("width", legendW)
+        .attr("height", legendH)
+        .attr("rx", 12)
+        .attr("fill", "rgba(255,255,255,0.88)")
+        .attr("stroke", "rgba(255,255,255,0.95)")
+        .attr("filter", "url(#bump14-soft-shadow)");
+
+    groups.forEach((group, index) => {
+        const color = getColor(group, index);
+        const col = index % legendCols;
+        const row = Math.floor(index / legendCols);
+        const itemW = legendW / legendCols;
+        const itemX = legendX + col * itemW + 14;
+        const itemY = legendY + 11 + row * legendRowH;
+        const iconSize = Math.max(18, Math.min(28, legendRowH * 0.65));
+        drawGroupIcon(legend, group, itemX + iconSize / 2, itemY + iconSize / 2, iconSize, color, `legend-item-${index + 1}`);
+
+        const labelX = itemX + iconSize + 10;
+        const labelMaxW = Math.max(30, itemW - iconSize - 28);
+        const labelFont = fitText(group, labelMaxW, Math.max(10, Math.min(14, legendRowH * 0.34)), "800", 7);
+        legend.append("text")
+            .attr("x", labelX)
+            .attr("y", itemY + iconSize / 2)
+            .attr("dominant-baseline", "middle")
+            .attr("text-anchor", "start")
+            .attr("font-family", fontFamily)
+            .attr("font-size", labelFont)
+            .attr("font-weight", "800")
+            .attr("fill", navy)
+            .text(ellipsize(group, labelMaxW, labelFont, "800"));
+
+        legend.append("line")
+            .attr("x1", labelX)
+            .attr("x2", Math.min(labelX + 34, itemX + itemW - 12))
+            .attr("y1", itemY + iconSize + 7)
+            .attr("y2", itemY + iconSize + 7)
+            .attr("stroke", color)
+            .attr("stroke-width", 4)
+            .attr("stroke-linecap", "round");
+    });
+
+    const axisLayer = svg.append("g")
+        .attr("class", "bump14-year-grid")
+        .attr("data-coordinate-relationship", "grid_aligned")
+        .attr("data-anchor", "chronological-time-scale");
+
+    timePoints.forEach(timePoint => {
+        const x = xScale(timePoint);
+        axisLayer.append("line")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", dotY + 6)
+            .attr("y2", rowChartBottom + 4)
+            .attr("stroke", "#B8C7EA")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2 6")
+            .attr("opacity", 0.75);
+        axisLayer.append("text")
+            .attr("x", x)
+            .attr("y", yearLabelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", fontFamily)
+            .attr("font-size", fitText(timePoint, Math.max(24, columnGap - 8), 12, "700", 8))
+            .attr("font-weight", "700")
+            .attr("fill", navy)
+            .text(timePoint);
+        axisLayer.append("circle")
+            .attr("cx", x)
+            .attr("cy", dotY)
+            .attr("r", 4.2)
+            .attr("fill", "#C8D3F3");
+    });
+
+    const rowLayer = svg.append("g")
+        .attr("class", "bump14-row-layer")
+        .attr("data-coordinate-relationship", "row_cards_span_matched_to_panels");
+
+    groups.forEach((group, index) => {
+        const color = getColor(group, index);
+        const rowY = rowTop + index * (rowH + rowGap);
+        const rowCenterY = rowY + rowH / 2;
+        const panelX = Math.max(plotX0 - 18, outerX + labelCardW + 12);
+        const panelW = Math.min(width - panelX - outerRight, plotX1 - panelX + 22);
+
+        rowLayer.append("rect")
+            .attr("class", "bump14-row-panel")
+            .attr("data-group", group)
+            .attr("x", panelX)
+            .attr("y", rowY + 2)
+            .attr("width", panelW)
+            .attr("height", rowH - 4)
+            .attr("rx", Math.min(13, rowH * 0.18))
+            .attr("fill", rgba(color, 0.10))
+            .attr("stroke", rgba(color, 0.10));
+
+        const card = rowLayer.append("g")
+            .attr("class", "bump14-left-row-card")
+            .attr("data-group", group)
+            .attr("data-coordinate-relationship", "span_matched")
+            .attr("data-anchor", `group-row-${index + 1}`);
+        card.append("rect")
+            .attr("x", outerX)
+            .attr("y", rowY + 1)
+            .attr("width", labelCardW)
+            .attr("height", rowH - 2)
+            .attr("rx", Math.min(10, rowH * 0.18))
+            .attr("fill", "rgba(255,255,255,0.92)")
+            .attr("stroke", "rgba(255,255,255,0.90)")
+            .attr("filter", "url(#bump14-soft-shadow)");
+        card.append("rect")
+            .attr("x", outerX)
+            .attr("y", rowY + 1)
+            .attr("width", Math.max(4, Math.min(7, labelCardW * 0.07)))
+            .attr("height", rowH - 2)
+            .attr("rx", Math.min(7, rowH * 0.16))
+            .attr("fill", color);
+
+        const iconSize = Math.max(20, Math.min(34, rowH * 0.42));
+        const iconY = rowY + Math.max(iconSize * 0.55, rowH * 0.35);
+        drawGroupIcon(card, group, outerX + labelCardW / 2, iconY, iconSize, color, `row-card-${index + 1}`);
+
+        const labelFont = fitText(group, labelCardW - 14, Math.max(10, Math.min(15, rowH * 0.20)), "900", 7);
+        card.append("text")
+            .attr("x", outerX + labelCardW / 2)
+            .attr("y", rowY + rowH * 0.64)
+            .attr("dominant-baseline", "middle")
+            .attr("text-anchor", "middle")
+            .attr("font-family", fontFamily)
+            .attr("font-size", labelFont)
+            .attr("font-weight", "900")
+            .attr("fill", navy)
+            .text(ellipsize(group, labelCardW - 14, labelFont, "900"));
+        if (valueUnit) {
+            card.append("text")
+                .attr("x", outerX + labelCardW / 2)
+                .attr("y", rowY + rowH * 0.82)
+                .attr("dominant-baseline", "middle")
+                .attr("text-anchor", "middle")
+                .attr("font-family", fontFamily)
+                .attr("font-size", Math.max(7, Math.min(10, rowH * 0.14)))
+                .attr("font-weight", "500")
+                .attr("fill", "#4D5878")
+                .text(`(${valueUnit})`);
+        }
+
+        const groupData = chartData
+            .filter(d => d[groupField] === group)
+            .sort((a, b) => timePoints.indexOf(a[timeField]) - timePoints.indexOf(b[timeField]));
+        const finiteGroupValues = groupData
+            .map(d => +d[valueField])
+            .filter(Number.isFinite);
+        const groupMin = d3.min(finiteGroupValues);
+        const groupMax = d3.max(finiteGroupValues);
+        const rowValueTop = rowY + 2 + maxRadius + 5;
+        const rowValueBottom = rowY + rowH - 2 - maxRadius - 5;
+        const rowTravel = Math.max(0, rowValueBottom - rowValueTop);
+
+        function rowLocalY(value) {
+            if (!Number.isFinite(value) || !Number.isFinite(groupMin) || !Number.isFinite(groupMax) || groupMax <= groupMin || rowTravel <= 1) {
+                return rowCenterY;
+            }
+            const normalized = (value - groupMin) / (groupMax - groupMin);
+            return rowValueBottom - normalized * rowTravel;
+        }
+
+        const points = groupData
+            .filter(d => timePoints.includes(d[timeField]) && Number.isFinite(+d[valueField]))
+            .map(d => ({
+                x: xScale(d[timeField]),
+                y: rowLocalY(+d[valueField]),
+                value: +d[valueField],
+                time: d[timeField]
+            }));
+
+        if (points.length >= 2) {
+            rowLayer.append("path")
+                .datum(points)
+                .attr("class", "bump14-connector-line")
+                .attr("data-group", group)
+                .attr("data-y-encoding", "row-local-group-normalized-value")
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", Math.max(2.4, Math.min(4.2, rowH * 0.055)))
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round")
+                .attr("opacity", 0.95)
+                .attr("d", d3.line().x(d => d.x).y(d => d.y));
+        }
+
+        points.forEach(point => {
+            const r = radiusScale(point.value);
+            const timeIndex = timePoints.indexOf(point.time);
+            const fill = circleFill(color, timeIndex);
+            rowLayer.append("circle")
+                .attr("class", "bump14-value-circle")
+                .attr("data-group", group)
+                .attr("data-x", point.time)
+                .attr("data-value", point.value)
+                .attr("data-y-encoding", "row-local-group-normalized-value")
+                .attr("cx", point.x)
+                .attr("cy", point.y)
+                .attr("r", r)
+                .attr("fill", fill)
+                .attr("stroke", "rgba(255,255,255,0.90)")
+                .attr("stroke-width", Math.max(1.6, r * 0.14))
+                .attr("filter", r >= 9 ? "url(#bump14-soft-shadow)" : null);
+
+            const formattedValue = chartUtils.format.compactFixedText(point.value);
+            const valueFont = fitText(formattedValue, r * 1.55, Math.max(7, Math.min(15, r * 0.70)), "800", 6);
+            rowLayer.append("text")
+                .attr("class", "bump14-value-label")
+                .attr("data-anchor", "attached_to_value_circle_center")
+                .attr("x", point.x)
+                .attr("y", point.y)
+                .attr("dominant-baseline", "middle")
+                .attr("text-anchor", "middle")
+                .attr("font-family", fontFamily)
+                .attr("font-size", valueFont)
+                .attr("font-weight", "800")
+                .attr("fill", contrastText(fill))
+                .text(formattedValue);
+        });
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/line_chart_01.js

@@ -0,0 +1,486 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Bar Chart",
+    "chart_name": "line_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[2, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 使用D3.js创建简单的垂直条形图
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备 ----------
+    const jsonData = data;                          // 完整的JSON数据对象
+    const chartData = jsonData.data.data || [];          // 图表数据
+    const variables = jsonData.variables || {};     // 图表配置
+    const typography = jsonData.typography || {     // 字体设置
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#333333",
+        other: { primary: "#73D2C7", secondary: "#4682B4" }
+    };
+    const images = jsonData.images || { field: {}, other: {} };  // 图片(标志等)
+    const dataColumns = chartUtils.schema.columns(jsonData);            // 数据列
+
+    // 设置视觉效果变量
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_gradient = variables.has_gradient || false;
+    variables.has_stroke = variables.has_stroke || false;
+    variables.has_spacing = variables.has_spacing || false;
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 尺寸和布局设置 ----------
+
+    // 设置图表尺寸和边距
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+
+    // 边距: 上, 右, 下, 左
+    const margin = {
+        top: 60,         // 柱子上方数值标签的空间
+        right: 30,
+        bottom: 150,     // x轴和图标的空间
+        left: 60
+    };
+
+    // 计算实际图表区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 3. 提取字段名称和单位 ----------
+
+    let xField, yField;
+    let xUnit = "", yUnit = "";
+
+    // 安全提取字段名称
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+
+    xField = xChannel.key;
+    yField = yChannel.key;
+
+    // 获取字段单位(如果存在)
+    if (xChannel.unit) {
+        xUnit = xChannel.unit;
+    }
+
+    if (yChannel.unit) {
+        yUnit = yChannel.unit;
+    }
+
+    // ---------- 4. 数据处理 ----------
+
+    // 获取唯一的x轴值
+    const xValues = [...new Set(chartData.map(d => d[xField]))];
+
+    // 创建按y值降序排序的数据
+    const sortedData = chartData.map(d => ({
+        x: d[xField],
+        y: +d[yField] // 确保y是数值类型
+    })).sort((a, b) => b.y - a.y);
+
+    // ---------- 5. 创建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");
+
+
+
+    // ---------- 6. 创建视觉效果 ----------
+
+    const defs = svg.append("defs");
+
+    // 获取颜色函数
+    const getColor = () => colorResolver.other("primary").value;
+
+    // 如果需要创建阴影滤镜
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("width", "200%")
+            .attr("height", "200%");
+
+        filter.append("feGaussianBlur")
+            .attr("in", "SourceAlpha")
+            .attr("stdDeviation", 3);
+
+        filter.append("feOffset")
+            .attr("dx", 2)
+            .attr("dy", 2)
+            .attr("result", "offsetblur");
+
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+
+    // 如果需要创建渐变
+    if (variables.has_gradient) {
+        sortedData.forEach((item, idx) => {
+            // 添加安全的ID处理
+            const safeCategory = typeof item.x === 'string' ?
+                item.x.toString().replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() :
+                `category-${idx}`;
+
+            const baseColor = getColor();
+            const gradientId = `gradient-${safeCategory}`;
+
+            const gradient = defs.append("linearGradient")
+                .attr("id", gradientId)
+                .attr("x1", "0%")
+                .attr("y1", "100%")
+                .attr("x2", "0%")
+                .attr("y2", "0%");
+
+            gradient.append("stop")
+                .attr("offset", "0%")
+                .attr("stop-color", colorResolver.variant(baseColor, { mode: "darker", amount: 0.1 }));
+
+            gradient.append("stop")
+                .attr("offset", "100%")
+                .attr("stop-color", colorResolver.variant(baseColor, { mode: "brighter", amount: 0.1 }));
+        });
+    }
+
+    // ---------- 7. 创建图表 ----------
+
+    // 创建图表组
+    const chart = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // 创建比例尺
+    const xScale = d3.scaleBand()
+        .domain(sortedData.map(d => d.x))
+        .range([0, innerWidth])
+        .padding(variables.has_spacing ? 0.4 : 0.2);
+
+    const yMax = d3.max(sortedData, d => d.y);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax > 0 ? yMax * 1.1 : 1]) // 处理y都为0的情况，并添加10%的填充
+        .range([innerHeight, 0]);
+
+    // *******************************************************************
+    // ** 开始修改：预计算标签字体大小和最大行数 **
+    // *******************************************************************
+    const defaultLabelFontSize = parseFloat(typography.label.font_size || 12);
+    const minLabelFontSize = 10; // 最小字体大小
+    const currentBarWidth = xScale.bandwidth(); // 使用实际的bar宽度
+    let finalLabelFontSize = defaultLabelFontSize;
+    let maxLinesNeeded = 1; // 记录所有标签所需的最大行数
+    const labelFontFamily = typography.label.font_family || "Arial";
+    const labelFontWeight = typography.label.font_weight || "normal";
+    const lineHeightFactor = 1.2; // 行高倍数
+
+    // 文本宽度测量辅助函数 (使用 canvas 提高性能)
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    function measureTextWidth(text, fontFamily, fontSize, fontWeight) {
+        ctx.font = `${fontWeight || 'normal'} ${fontSize}px ${fontFamily || 'Arial'}`;
+        return chartUtils.text.contextWidth(ctx, text);
+    }
+
+    // 第一遍计算：确定统一的字体大小
+    if (currentBarWidth > 0) { // 确保 barWidth 有效
+        let maxRatio = 1;
+        sortedData.forEach(d => {
+            const labelText = String(d.x); // 确保是字符串
+            const textWidth = measureTextWidth(labelText, labelFontFamily, defaultLabelFontSize, labelFontWeight);
+            const ratio = textWidth / currentBarWidth;
+            if (ratio > maxRatio) {
+                maxRatio = ratio;
+            }
+        });
+
+        if (maxRatio > 1) {
+            finalLabelFontSize = Math.max(minLabelFontSize, Math.floor(defaultLabelFontSize / maxRatio));
+        }
+
+        // 第二遍计算：确定是否需要换行以及最大行数 (使用最终字体大小)
+        sortedData.forEach(d => {
+            const labelText = String(d.x);
+            const textWidth = measureTextWidth(labelText, labelFontFamily, finalLabelFontSize, labelFontWeight);
+
+            if (textWidth > currentBarWidth) {
+                // 模拟换行计算行数
+                const words = labelText.split(/\s+/); // 按空格分词
+                let currentLine = '';
+                let lines = 1;
+                let simulationSuccess = false; // 标记模拟是否成功
+
+                if (words.length > 1) { // 优先按单词换行
+                    for (let i = 0; i < words.length; i++) {
+                        const testLine = currentLine ? currentLine + " " + words[i] : words[i];
+                        const testWidth = measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight);
+                        if (testWidth > currentBarWidth && currentLine !== '') {
+                            lines++;
+                            currentLine = words[i];
+                            // 检查单个单词是否也超长
+                            if (measureTextWidth(currentLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > currentBarWidth) {
+                                // 单个单词超长，需要转字符换行
+                                simulationSuccess = false;
+                                break; // 退出单词循环
+                            }
+                        } else {
+                            currentLine = testLine;
+                        }
+                    }
+                     if(currentLine !== '') simulationSuccess = true; // 如果有剩余单词则标记成功
+
+                }
+
+                // 如果单词换行不成功或只有一个单词，尝试字符换行
+                if(words.length <= 1 || !simulationSuccess) {
+                    lines = 1; // 重置行数
+                    const chars = labelText.split('');
+                    currentLine = '';
+                    for (let i = 0; i < chars.length; i++) {
+                        const testLine = currentLine + chars[i];
+                        if (measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > currentBarWidth && currentLine !== '') {
+                            lines++;
+                            currentLine = chars[i];
+                        } else {
+                            currentLine += chars[i];
+                        }
+                    }
+                }
+
+
+                if (lines > maxLinesNeeded) {
+                    maxLinesNeeded = lines;
+                }
+            }
+        });
+    } else {
+        // 如果barWidth无效，则使用默认字体大小且不换行
+        finalLabelFontSize = defaultLabelFontSize;
+        maxLinesNeeded = 1;
+    }
+    // *******************************************************************
+    // ** 结束修改：预计算标签字体大小和最大行数 **
+    // *******************************************************************
+
+    // *******************************************************************
+    // ** 开始修改：计算图标的统一Y位置 **
+    // *******************************************************************
+    const labelStartY = innerHeight + 10; // 标签开始的 Y 位置 (保持和原来一致)
+    const lineHeight = finalLabelFontSize * lineHeightFactor; // 行高
+    const labelBottomApprox = labelStartY + (maxLinesNeeded - 1) * lineHeight + finalLabelFontSize * 0.71; // 估算最下方标签基线位置
+    const iconRadius = 15; // 图标半径
+    const iconYPosition = labelBottomApprox + iconRadius + 5; // 在标签下方留出 5px 间距放置图标中心
+    const iconBottomY = iconYPosition + iconRadius; // 图标底部的Y坐标
+    const barExtensionBuffer = 5; // 柱子比图标底部多延伸的距离
+    const barBottomY = iconBottomY + barExtensionBuffer; // 柱子需要延伸到的最终Y坐标
+    // *******************************************************************
+    // ** 结束修改：计算图标的统一Y位置 **
+    // *******************************************************************
+
+    // 添加延伸到图标的柱子
+    chart.selectAll(".bar")
+        .data(sortedData)
+        .enter()
+        .append("rect")
+        .attr("class", "bar")
+        .attr("x", d => xScale(d.x))
+        .attr("y", d => yScale(d.y))
+        .attr("width", xScale.bandwidth())
+        .attr("height", d => Math.max(0, barBottomY - yScale(d.y)))
+        .attr("fill", d => {
+            if (variables.has_gradient) {
+                const safeCategory = typeof d.x === 'string' ?
+                    d.x.toString().replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() :
+                    `category-${sortedData.findIndex(item => item.x === d.x)}`; // 修正: 使用 findIndex 确保唯一性
+                return `url(#gradient-${safeCategory})`;
+            }
+            return getColor();
+        })
+        .attr("rx", variables.has_rounded_corners ? 4 : 0)
+        .attr("ry", variables.has_rounded_corners ? 4 : 0)
+        .style("stroke", variables.has_stroke ? "#333" : "none")
+        .style("stroke-width", variables.has_stroke ? 1 : 0)
+        .style("filter", variables.has_shadow ? "url(#shadow)" : "none")
+        .on("mouseover", function() {
+            d3.select(this).attr("opacity", 0.8);
+        })
+        .on("mouseout", function() {
+            d3.select(this).attr("opacity", 1);
+        });
+
+    // 在柱子上方添加数值标签
+    const defaultAnnotationFontSize = parseFloat(typography.annotation.font_size || 12);
+    const minAnnotationFontSize = 6; // 数值标签最小字体
+    const annotationFontFamily = typography.annotation.font_family || "Arial";
+    const annotationFontWeight = typography.annotation.font_weight || "bold";
+
+    chart.selectAll(".value-label")
+        .data(sortedData)
+        .enter()
+        .append("text")
+        .attr("class", "value-label")
+        .attr("x", d => xScale(d.x) + xScale.bandwidth() / 2)
+        .attr("y", d => yScale(d.y) - 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", annotationFontFamily)
+        .style("font-weight", annotationFontWeight)
+        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+        .each(function(d) {
+            const valueText = chartUtils.format.fixed(d.y, 1, { unit: yUnit }).text;
+            const maxWidth = xScale.bandwidth() * 1.1; // 最大允许宽度为柱宽的1.1倍
+            let finalValueFontSize = defaultAnnotationFontSize;
+
+            if (maxWidth > 0) { // 仅当宽度有效时计算
+                const textWidth = measureTextWidth(valueText, annotationFontFamily, defaultAnnotationFontSize, annotationFontWeight);
+                if (textWidth > maxWidth) {
+                    finalValueFontSize = Math.max(minAnnotationFontSize, Math.floor(defaultAnnotationFontSize * (maxWidth / textWidth)));
+                }
+            }
+
+            d3.select(this)
+                .style("font-size", `${finalValueFontSize}px`)
+                .text(valueText);
+        });
+
+
+    // *******************************************************************
+    // ** 开始修改：添加维度标签 (统一字体大小，自动换行) **
+    // *******************************************************************
+    chart.selectAll(".dimension-label")
+        .data(sortedData)
+        .enter()
+        .append("text")
+        .attr("class", "dimension-label")
+        .attr("text-anchor", "middle")
+        .style("font-family", labelFontFamily)
+        .style("font-size", `${finalLabelFontSize}px`) // 应用预计算的字体大小
+        .style("font-weight", labelFontWeight)
+        .style("fill", "#ffffff") // 使用默认文本颜色
+        .each(function(d) {
+            const labelText = String(d.x);
+            const textWidth = measureTextWidth(labelText, labelFontFamily, finalLabelFontSize, labelFontWeight);
+            const textElement = d3.select(this);
+            const xPos = xScale(d.x) + xScale.bandwidth() / 2;
+            const availableWidth = xScale.bandwidth();
+
+            if (textWidth > availableWidth && availableWidth > 0) {
+                // 需要换行 (重复之前的换行逻辑来渲染)
+                const words = labelText.split(/\s+/);
+                let lines = [];
+                let currentLine = '';
+                let simulationSuccess = false;
+
+                if(words.length > 1){
+                     for (let i = 0; i < words.length; i++) {
+                        const testLine = currentLine ? currentLine + " " + words[i] : words[i];
+                        const testWidth = measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight);
+                        if (testWidth > availableWidth && currentLine !== '') {
+                            lines.push(currentLine);
+                            currentLine = words[i];
+                            if (measureTextWidth(currentLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > availableWidth) {
+                                simulationSuccess = false; break;
+                            }
+                        } else { currentLine = testLine; }
+                    }
+                    if(currentLine !== '') { lines.push(currentLine); simulationSuccess = true; }
+                }
+                 if(words.length <= 1 || !simulationSuccess) {
+                    lines = [];
+                    const chars = labelText.split('');
+                    currentLine = '';
+                    for (let i = 0; i < chars.length; i++) {
+                        const testLine = currentLine + chars[i];
+                        if (measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > availableWidth && currentLine !== '') {
+                            lines.push(currentLine); currentLine = chars[i];
+                        } else { currentLine += chars[i]; }
+                    }
+                     lines.push(currentLine);
+                 }
+
+                lines.forEach((line, i) => {
+                    textElement.append("tspan")
+                        .attr("x", xPos)
+                        .attr("y", labelStartY + i * lineHeight)
+                        .attr("dy", "0.71em")
+                        .text(line);
+                });
+            } else {
+                // 不需要换行
+                textElement.append("tspan")
+                   .attr("x", xPos)
+                   .attr("y", labelStartY)
+                   .attr("dy", "0.71em")
+                   .text(labelText);
+            }
+        });
+    // *******************************************************************
+    // ** 结束修改：添加维度标签 **
+    // *******************************************************************
+
+
+    // *******************************************************************
+    // ** 开始修改：添加圆形图标 - 动态调整 Y 位置 **
+    // *******************************************************************
+    chart.selectAll(".icon-circle")
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "icon-circle")
+        .attr("transform", d => `translate(${xScale(d.x) + xScale.bandwidth() / 2}, ${iconYPosition})`) // 应用动态Y位置
+        .each(function(d) {
+            // 添加圆形轮廓
+            d3.select(this)
+                .append("circle")
+                .attr("r", iconRadius) // 使用变量
+                .attr("fill", "none") // 无填充
+                .attr("stroke", "#2D3748") // 更深灰色的描边
+                .attr("stroke-width", 0.1);
+
+            // 如果有该类别的图像
+            if (images && images.field && images.field[d.x]) {
+                d3.select(this)
+                    .append("image")
+                    .attr("xlink:href", images.field[d.x])
+                    .attr("x", -12)
+                    .attr("y", -12)
+                    .attr("width", 24)
+                    .attr("preserveAspectRatio","xMidYMid meet")
+                    .attr("height", 24);
+            }
+        });
+    // *******************************************************************
+    // ** 结束修改：添加圆形图标 **
+    // *******************************************************************
+
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_01.js

@@ -0,0 +1,655 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[4, 30], ["-inf", "inf"], [2, 8]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "dark",
+    "icon_mark": "side",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+
+    d3.select(containerSelector).html("");
+
+    const width = variables.width || 1024;
+    const height = variables.height || 1536;
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    const yColumn = dataColumns[1] || {};
+    const yUnit = yColumn.unit || chartUtils.schema.channel(jsonData, "y").unit || "";
+    const titleText = (jsonData.titles && jsonData.titles.main_title) || (jsonData.metadata && jsonData.metadata.title) || "Multiple Line Trend";
+    const subtitleText = (jsonData.titles && jsonData.titles.sub_title) || (jsonData.metadata && jsonData.metadata.description) || "";
+    const labelFont = (typography.label && typography.label.font_family) || "Arial, Helvetica, sans-serif";
+
+    const parseTemporal = (value) => {
+        if (value instanceof Date) return value;
+        if (typeof value === "number" && Number.isFinite(value)) {
+            return new Date(value, 0, 1);
+        }
+        const asNumber = Number(value);
+        if (Number.isFinite(asNumber) && String(value).trim().length <= 4) {
+            return new Date(asNumber, 0, 1);
+        }
+        const parsedByUtils = chartUtils.format.parseDate(value);
+        if (parsedByUtils instanceof Date && !Number.isNaN(+parsedByUtils)) return parsedByUtils;
+        const parsed = new Date(value);
+        if (!Number.isNaN(+parsed)) return parsed;
+        return new Date(0);
+    };
+
+    const sanitizeId = (value) => String(value).replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() || "item";
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const approxWidth = (text, fontSize, weight) => String(text).length * fontSize * (weight >= 700 ? 0.62 : 0.54);
+    const lighten = (hex, amount) => {
+        const c = d3.color(hex);
+        if (!c) return hex;
+        c.r = Math.round(c.r + (255 - c.r) * amount);
+        c.g = Math.round(c.g + (255 - c.g) * amount);
+        c.b = Math.round(c.b + (255 - c.b) * amount);
+        return c.formatHex();
+    };
+    const darken = (hex, amount) => {
+        const c = d3.color(hex);
+        if (!c) return hex;
+        c.r = Math.round(c.r * (1 - amount));
+        c.g = Math.round(c.g * (1 - amount));
+        c.b = Math.round(c.b * (1 - amount));
+        return c.formatHex();
+    };
+    const formatX = (date) => {
+        if (date.getMonth() === 0 && date.getDate() === 1) return String(date.getFullYear());
+        return d3.timeFormat("%b %Y")(date);
+    };
+    const formatValue = (value) => {
+        const num = Number(value);
+        const rounded = Math.abs(num) >= 100 ? Math.round(num) : Math.round(num * 10) / 10;
+        const display = Number.isInteger(rounded) ? String(rounded) : String(rounded.toFixed(1)).replace(/\.0$/, "");
+        return yUnit === "%" ? `${display}%` : display;
+    };
+    const splitTitle = (title, maxChars) => {
+        if (title.includes(",")) {
+            const parts = title.split(",");
+            const first = `${parts.shift().trim()},`;
+            const second = parts.join(",").trim();
+            return [first, second].filter(Boolean);
+        }
+        const words = title.split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach((word) => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (candidate.length > maxChars && line) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = candidate;
+            }
+        });
+        if (line) lines.push(line);
+        return lines.slice(0, 2);
+    };
+    const wrapWordsByWidth = (text, fontSize, maxWidth) => {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach((word) => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (approxWidth(candidate, fontSize, 900) > maxWidth && line) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = candidate;
+            }
+        });
+        if (line) lines.push(line);
+        return lines;
+    };
+    const wrapText = (selection, text, maxWidth, lineHeight, maxLines) => {
+        const fontSize = Number(selection.attr("font-size")) || 18;
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach((word) => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (approxWidth(candidate, fontSize, 500) > maxWidth && line) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = candidate;
+            }
+        });
+        if (line) lines.push(line);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            visible[visible.length - 1] = `${visible[visible.length - 1].replace(/[.,;:]$/, "")}...`;
+        }
+        selection.text(null);
+        visible.forEach((lineText, i) => {
+            selection.append("tspan")
+                .attr("x", selection.attr("x"))
+                .attr("dy", i === 0 ? 0 : lineHeight)
+                .text(lineText);
+        });
+        return visible.length;
+    };
+
+    const groups = Array.from(new Set(chartData.map((d) => String(d[groupField]))));
+    const rowsByGroup = new Map(groups.map((group) => {
+        const rows = chartData
+            .filter((d) => String(d[groupField]) === group)
+            .slice()
+            .sort((a, b) => +parseTemporal(a[xField]) - +parseTemporal(b[xField]));
+        return [group, rows];
+    }));
+    const xValues = Array.from(new Set(chartData.map((d) => +parseTemporal(d[xField]))))
+        .sort((a, b) => a - b)
+        .map((v) => new Date(v));
+    const yValues = chartData.map((d) => Number(d[yField])).filter(Number.isFinite);
+    const allPositive = d3.min(yValues) >= 0;
+    const yMinRaw = d3.min(yValues);
+    const yMaxRaw = d3.max(yValues);
+    const yMax = allPositive ? Math.ceil((yMaxRaw || 1) / 10) * 10 : yMaxRaw + Math.abs(yMaxRaw - yMinRaw) * 0.12;
+    const yMin = allPositive ? 0 : yMinRaw - Math.abs(yMaxRaw - yMinRaw) * 0.12;
+
+    const getColor = (group, index) => {
+        const resolved = colorResolver.field(group, index, { fallbackKey: index === 0 ? "primary" : "secondary" }).value;
+        const fallback = ["#38e7b4", "#ff785f", "#9c7cff", "#f5c84c", "#48b7ff", "#8bd45c", "#f08bd8", "#f58d44"][index % 8];
+        return resolved || fallback;
+    };
+
+    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; font-family: Arial, Helvetica, sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("radialGradient")
+        .attr("id", "mlg01-bg-glow")
+        .attr("cx", "48%")
+        .attr("cy", "48%")
+        .attr("r", "82%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#064244");
+    bgGradient.append("stop").attr("offset", "48%").attr("stop-color", "#042c36");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#031522");
+    const panelGradient = defs.append("linearGradient")
+        .attr("id", "mlg01-panel-fill")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    panelGradient.append("stop").attr("offset", "0%").attr("stop-color", "#082c36").attr("stop-opacity", 0.92);
+    panelGradient.append("stop").attr("offset", "100%").attr("stop-color", "#021825").attr("stop-opacity", 0.82);
+    const glow = defs.append("filter").attr("id", "mlg01-soft-glow").attr("x", "-30%").attr("y", "-30%").attr("width", "160%").attr("height", "160%");
+    glow.append("feGaussianBlur").attr("stdDeviation", "4").attr("result", "blur");
+    const merge = glow.append("feMerge");
+    merge.append("feMergeNode").attr("in", "blur");
+    merge.append("feMergeNode").attr("in", "SourceGraphic");
+
+    groups.forEach((group, index) => {
+        const color = getColor(group, index);
+        const id = sanitizeId(group);
+        const areaGradient = defs.append("linearGradient")
+            .attr("id", `mlg01-area-${id}`)
+            .attr("x1", "0%")
+            .attr("x2", "0%")
+            .attr("y1", "0%")
+            .attr("y2", "100%");
+        areaGradient.append("stop").attr("offset", "0%").attr("stop-color", color).attr("stop-opacity", 0.38);
+        areaGradient.append("stop").attr("offset", "62%").attr("stop-color", color).attr("stop-opacity", 0.16);
+        areaGradient.append("stop").attr("offset", "100%").attr("stop-color", color).attr("stop-opacity", 0.02);
+        defs.append("clipPath")
+            .attr("id", `mlg01-icon-clip-${id}`)
+            .append("circle")
+            .attr("cx", 0)
+            .attr("cy", 0)
+            .attr("r", 54);
+    });
+
+    svg.append("rect").attr("width", width).attr("height", height).attr("fill", "url(#mlg01-bg-glow)");
+    svg.append("circle").attr("cx", 120).attr("cy", 118).attr("r", 340).attr("fill", "#0b5960").attr("opacity", 0.12);
+    svg.append("circle").attr("cx", 920).attr("cy", 1260).attr("r", 420).attr("fill", "#09a881").attr("opacity", 0.06);
+
+    const headerX = 56;
+    const accent = "#4de3a0";
+    const white = "#f7f9f8";
+    const muted = "#d9e2df";
+
+    const header = svg.append("g").attr("class", "mlg01-header");
+    const badge = header.append("g")
+        .attr("class", "mlg01-kicker-badge")
+        .attr("transform", `translate(${headerX},62)`);
+    badge.append("rect")
+        .attr("width", 286)
+        .attr("height", 54)
+        .attr("rx", 26)
+        .attr("fill", "#062a30")
+        .attr("stroke", "#0f8077")
+        .attr("stroke-width", 1.5)
+        .attr("opacity", 0.96);
+    const kickerSlot = badge.append("g")
+        .attr("data-asset-slot", "kicker-icon")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("data-anchor", "header-badge-left")
+        .attr("data-collision-rule", "inside badge before kicker text")
+        .attr("transform", "translate(35,27)");
+    kickerSlot.append("circle").attr("r", 11).attr("fill", "none").attr("stroke", accent).attr("stroke-width", 2);
+    kickerSlot.append("circle").attr("r", 4).attr("fill", accent).attr("opacity", 0.9);
+    badge.append("text")
+        .attr("x", 62)
+        .attr("y", 34)
+        .attr("font-family", labelFont)
+        .attr("font-size", 22)
+        .attr("font-weight", 800)
+        .attr("fill", accent)
+        .attr("letter-spacing", 1.5)
+        .text("SHIFTING TRENDS");
+
+    let titleFont = titleText.length > 70 ? 46 : titleText.length > 54 ? 52 : 62;
+    let titleLines = splitTitle(titleText, titleText.includes(",") ? 34 : 26);
+    if (!titleText.includes(",")) {
+        titleFont = titleText.length > 58 ? 44 : titleText.length > 45 ? 52 : titleFont;
+        titleLines = wrapWordsByWidth(titleText, titleFont, 900);
+        while (titleLines.length > 2 && titleFont > 38) {
+            titleFont -= 2;
+            titleLines = wrapWordsByWidth(titleText, titleFont, 900);
+        }
+        titleLines = titleLines.slice(0, 2);
+    }
+    const titleLineGap = titleFont + 10;
+    const titleBaseY = 176;
+    titleLines.forEach((lineText, i) => {
+        header.append("text")
+            .attr("x", headerX)
+            .attr("y", titleBaseY + i * titleLineGap)
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", titleFont)
+            .attr("font-weight", 900)
+            .attr("fill", i === 0 ? white : accent)
+            .attr("letter-spacing", 0)
+            .attr("filter", "url(#mlg01-soft-glow)")
+            .text(lineText);
+    });
+    const subtitleY = titleBaseY + titleLines.length * titleLineGap + 12;
+    const subtitle = header.append("text")
+        .attr("x", headerX)
+        .attr("y", subtitleY)
+        .attr("font-family", labelFont)
+        .attr("font-size", 25)
+        .attr("font-weight", 400)
+        .attr("fill", muted)
+        .attr("opacity", 0.95);
+    subtitle.text(subtitleText);
+    if (approxWidth(subtitleText, 25, 400) > 720) {
+        subtitle.attr("textLength", 720).attr("lengthAdjust", "spacingAndGlyphs");
+    }
+
+    const panel = { x: 42, y: 360, w: 706, h: 988 };
+    const plot = { x: 98, y: 446, w: 490, h: 820 };
+    const cardColumn = { x: 778, y: 360, w: 202, h: 988 };
+
+    svg.append("rect")
+        .attr("class", "mlg01-plot-panel")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.w)
+        .attr("height", panel.h)
+        .attr("rx", 28)
+        .attr("fill", "url(#mlg01-panel-fill)")
+        .attr("stroke", "#23606c")
+        .attr("stroke-width", 1.5)
+        .attr("opacity", 0.96);
+
+    const chart = svg.append("g").attr("class", "mlg01-chart-layer");
+    chart.append("text")
+        .attr("x", panel.x + 32)
+        .attr("y", panel.y + 52)
+        .attr("font-family", labelFont)
+        .attr("font-size", 22)
+        .attr("font-weight", 800)
+        .attr("fill", white)
+        .attr("letter-spacing", 0.5)
+        .text(`${String(yField).replace(/([a-z])([A-Z])/g, "$1 $2").toUpperCase()}${yUnit ? ` (${yUnit})` : ""}`);
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(xValues))
+        .range([plot.x, plot.x + plot.w]);
+    const yScale = d3.scaleLinear()
+        .domain([yMin, yMax])
+        .nice(5)
+        .range([plot.y + plot.h, plot.y]);
+    const yTicks = yScale.ticks(6);
+    const xTickStep = Math.max(1, Math.ceil(xValues.length / 8));
+    const xTicks = xValues.filter((_, i) => i % xTickStep === 0 || i === xValues.length - 1);
+
+    chart.selectAll("line.mlg01-y-grid")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("class", "mlg01-y-grid")
+        .attr("x1", plot.x)
+        .attr("x2", plot.x + plot.w)
+        .attr("y1", (d) => yScale(d))
+        .attr("y2", (d) => yScale(d))
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4 4")
+        .attr("opacity", 0.18);
+    chart.selectAll("text.mlg01-y-tick")
+        .data(yTicks)
+        .enter()
+        .append("text")
+        .attr("class", "mlg01-y-tick")
+        .attr("x", plot.x - 16)
+        .attr("y", (d) => yScale(d) + 8)
+        .attr("text-anchor", "end")
+        .attr("font-family", labelFont)
+        .attr("font-size", 26)
+        .attr("font-weight", 400)
+        .attr("fill", white)
+        .attr("opacity", 0.92)
+        .text((d) => d);
+    chart.selectAll("text.mlg01-x-tick")
+        .data(xTicks)
+        .enter()
+        .append("text")
+        .attr("class", "mlg01-x-tick")
+        .attr("x", (d) => xScale(d))
+        .attr("y", plot.y + plot.h + 34)
+        .attr("text-anchor", "middle")
+        .attr("font-family", labelFont)
+        .attr("font-size", 22)
+        .attr("font-weight", 500)
+        .attr("fill", white)
+        .text((d) => formatX(d));
+    chart.append("line")
+        .attr("x1", plot.x)
+        .attr("x2", plot.x + plot.w + 8)
+        .attr("y1", yScale(0))
+        .attr("y2", yScale(0))
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 1.2)
+        .attr("opacity", 0.75);
+
+    const area = d3.area()
+        .x((d) => xScale(parseTemporal(d[xField])))
+        .y0(yScale(Math.max(0, yMin)))
+        .y1((d) => yScale(Number(d[yField])))
+        .curve(d3.curveMonotoneX);
+    const line = d3.line()
+        .defined((d) => Number.isFinite(Number(d[yField])))
+        .x((d) => xScale(parseTemporal(d[xField])))
+        .y((d) => yScale(Number(d[yField])))
+        .curve(d3.curveMonotoneX);
+
+    groups.forEach((group, index) => {
+        const rows = rowsByGroup.get(group);
+        const color = getColor(group, index);
+        const id = sanitizeId(group);
+        chart.append("path")
+            .datum(rows)
+            .attr("class", "mlg01-area")
+            .attr("data-series", group)
+            .attr("fill", `url(#mlg01-area-${id})`)
+            .attr("d", area);
+        chart.append("path")
+            .datum(rows)
+            .attr("class", "mlg01-line")
+            .attr("data-series", group)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 5)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("filter", "url(#mlg01-soft-glow)")
+            .attr("d", line);
+    });
+
+    const lastDate = xValues[xValues.length - 1];
+    const finalX = xScale(lastDate);
+    chart.append("line")
+        .attr("class", "mlg01-final-guide")
+        .attr("x1", finalX)
+        .attr("x2", finalX)
+        .attr("y1", plot.y - 8)
+        .attr("y2", plot.y + plot.h)
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 2)
+        .attr("stroke-dasharray", "7 8")
+        .attr("opacity", 0.92);
+    const yearLabel = chart.append("g")
+        .attr("class", "mlg01-final-year-label")
+        .attr("transform", `translate(${finalX},${plot.y - 40})`);
+    yearLabel.append("rect")
+        .attr("x", -34)
+        .attr("y", -18)
+        .attr("width", 68)
+        .attr("height", 34)
+        .attr("rx", 7)
+        .attr("fill", "#f7f8f6");
+    yearLabel.append("path").attr("d", "M -8 16 L 8 16 L 0 28 Z").attr("fill", "#f7f8f6");
+    yearLabel.append("text")
+        .attr("y", 7)
+        .attr("text-anchor", "middle")
+        .attr("font-family", labelFont)
+        .attr("font-size", 24)
+        .attr("font-weight", 900)
+        .attr("fill", "#111f26")
+        .text(formatX(lastDate));
+
+    const endpointData = groups.map((group, index) => {
+        const rows = rowsByGroup.get(group);
+        const first = rows[0];
+        const last = rows[rows.length - 1];
+        const y = yScale(Number(last[yField]));
+        const startValue = Number(first[yField]);
+        const finalValue = Number(last[yField]);
+        return {
+            group,
+            index,
+            color: getColor(group, index),
+            first,
+            last,
+            y,
+            targetY: y,
+            finalValue,
+            delta: finalValue - startValue
+        };
+    }).sort((a, b) => a.targetY - b.targetY);
+    const tagH = groups.length > 3 ? 58 : 82;
+    const minGap = tagH + 10;
+    endpointData.forEach((d, i) => {
+        if (i === 0) {
+            d.labelY = clamp(d.targetY, plot.y + tagH / 2, plot.y + plot.h - tagH / 2);
+        } else {
+            d.labelY = clamp(Math.max(d.targetY, endpointData[i - 1].labelY + minGap), plot.y + tagH / 2, plot.y + plot.h - tagH / 2);
+        }
+    });
+    for (let i = endpointData.length - 2; i >= 0; i -= 1) {
+        endpointData[i].labelY = Math.min(endpointData[i].labelY, endpointData[i + 1].labelY - minGap);
+        endpointData[i].labelY = clamp(endpointData[i].labelY, plot.y + tagH / 2, plot.y + plot.h - tagH / 2);
+    }
+    endpointData.forEach((d) => {
+        const markerY = yScale(Number(d.last[yField]));
+        chart.append("circle")
+            .attr("class", "mlg01-endpoint-marker")
+            .attr("data-series", d.group)
+            .attr("data-x", d.last[xField])
+            .attr("data-y", d.last[yField])
+            .attr("cx", finalX)
+            .attr("cy", markerY)
+            .attr("r", 10)
+            .attr("fill", d.color)
+            .attr("stroke", white)
+            .attr("stroke-width", 5);
+        const tagX = finalX + 34;
+        const valueFont = groups.length > 3 ? 23 : Math.max(26, Math.min(34, 240 / String(formatValue(d.finalValue)).length));
+        const baseTagW = groups.length > 3 ? 96 : 92;
+        const tagW = Math.max(
+            baseTagW,
+            approxWidth(formatValue(d.finalValue), valueFont, 900) + 28,
+            Math.min(140, approxWidth(d.group, groups.length > 3 ? 11 : 13, 600) + 22)
+        );
+        const labelFontSize = Math.max(groups.length > 3 ? 9 : 10, Math.min(groups.length > 3 ? 12 : 17, (tagW - 18) / Math.max(5, d.group.length * 0.54)));
+        const tag = chart.append("g")
+            .attr("class", "mlg01-endpoint-tag")
+            .attr("data-series", d.group)
+            .attr("data-coordinate-relationship", "leader-connected")
+            .attr("data-anchor", "last-chronological-point")
+            .attr("transform", `translate(${tagX},${d.labelY})`);
+        tag.append("path")
+            .attr("d", `M 0 ${clamp(markerY - d.labelY, -tagH / 2 + 12, tagH / 2 - 12)} L 14 -12 L 14 12 Z`)
+            .attr("fill", d.color)
+            .attr("opacity", 0.95);
+        tag.append("rect")
+            .attr("x", 14)
+            .attr("y", -tagH / 2)
+            .attr("width", tagW)
+            .attr("height", tagH)
+            .attr("rx", 10)
+            .attr("fill", d.color)
+            .attr("opacity", 0.95);
+        tag.append("text")
+            .attr("x", 14 + tagW / 2)
+            .attr("y", groups.length > 3 ? -4 : -8)
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFont)
+            .attr("font-size", valueFont)
+            .attr("font-weight", 900)
+            .attr("fill", white)
+            .text(formatValue(d.finalValue));
+        tag.append("text")
+            .attr("x", 14 + tagW / 2)
+            .attr("y", groups.length > 3 ? 20 : 24)
+            .attr("text-anchor", "middle")
+            .attr("font-family", labelFont)
+            .attr("font-size", labelFontSize)
+            .attr("font-weight", 600)
+            .attr("fill", white)
+            .text(d.group);
+    });
+
+    const cardGap = groups.length <= 2 ? 24 : 18;
+    const cardH = groups.length <= 2 ? 330 : groups.length === 3 ? 265 : 220;
+    const cardStartY = cardColumn.y;
+    endpointData
+        .slice()
+        .sort((a, b) => b.finalValue - a.finalValue)
+        .forEach((d, i) => {
+            const y = cardStartY + i * (cardH + cardGap);
+            if (y + cardH > cardColumn.y + cardColumn.h) return;
+            const card = svg.append("g")
+                .attr("class", "mlg01-summary-card")
+                .attr("data-series", d.group)
+                .attr("data-coordinate-relationship", "independent")
+                .attr("data-anchor", "right-body-column")
+                .attr("transform", `translate(${cardColumn.x},${y})`);
+            card.append("rect")
+                .attr("width", cardColumn.w)
+                .attr("height", cardH)
+                .attr("rx", 28)
+                .attr("fill", "#061e27")
+                .attr("stroke", d.color)
+                .attr("stroke-width", 2.2)
+                .attr("opacity", 0.9);
+            const iconR = groups.length <= 2 ? 66 : 48;
+            const iconCx = cardColumn.w / 2;
+            const iconCy = groups.length <= 2 ? 86 : 60;
+            const iconSlot = card.append("g")
+                .attr("data-asset-slot", "group-icon")
+                .attr("data-series", d.group)
+                .attr("data-no-copied-reference-art", "true")
+                .attr("data-anchor", "right-summary-card-top-center")
+                .attr("data-collision-rule", "inside card; avoid title plot endpoint tags and sibling cards")
+                .attr("transform", `translate(${iconCx},${iconCy})`);
+            iconSlot.append("circle")
+                .attr("r", iconR)
+                .attr("fill", darken(d.color, 0.78))
+                .attr("stroke", d.color)
+                .attr("stroke-width", 3)
+                .attr("opacity", 0.96);
+            iconSlot.attr("data-no-embedded-raster", "true");
+            iconSlot.append("text")
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("font-family", labelFont)
+                .attr("font-size", iconR * 0.52)
+                .attr("font-weight", 900)
+                .attr("fill", lighten(d.color, 0.15))
+                .text(d.group.split(/\s+/).map((word) => word[0]).join("").slice(0, 2).toUpperCase());
+            const titleY = groups.length <= 2 ? 178 : 124;
+            const cardTitle = d.group.toUpperCase();
+            let cardTitleFont = Math.max(15, Math.min(groups.length <= 2 ? 27 : 20, (cardColumn.w - 26) / Math.max(1, cardTitle.length * 0.62)));
+            let cardTitleLines = wrapWordsByWidth(cardTitle, cardTitleFont, cardColumn.w - 28);
+            while (cardTitleLines.length > 2 && cardTitleFont > 11) {
+                cardTitleFont -= 1;
+                cardTitleLines = wrapWordsByWidth(cardTitle, cardTitleFont, cardColumn.w - 28);
+            }
+            const titleText = card.append("text")
+                .attr("x", cardColumn.w / 2)
+                .attr("y", titleY)
+                .attr("text-anchor", "middle")
+                .attr("font-family", labelFont)
+                .attr("font-size", cardTitleFont)
+                .attr("font-weight", 900)
+                .attr("fill", d.color)
+                .attr("letter-spacing", 1);
+            cardTitleLines.slice(0, 2).forEach((lineText, lineIndex) => {
+                titleText.append("tspan")
+                    .attr("x", cardColumn.w / 2)
+                    .attr("dy", lineIndex === 0 ? 0 : cardTitleFont + 3)
+                    .text(lineText);
+            });
+            const titleBlockOffset = cardTitleLines.length > 1 ? cardTitleFont + 16 : 0;
+            const trendWord = d.delta >= 0 ? "Up" : "Down";
+            const trendText = `${trendWord} ${formatValue(Math.abs(d.delta))} since ${formatX(parseTemporal(d.first[xField]))}`;
+            const finalText = `Final ${formatValue(d.finalValue)}`;
+            card.append("text")
+                .attr("x", cardColumn.w / 2)
+                .attr("y", titleY + titleBlockOffset + (groups.length <= 2 ? 42 : 30))
+                .attr("text-anchor", "middle")
+                .attr("font-family", labelFont)
+                .attr("font-size", groups.length <= 2 ? 20 : 15)
+                .attr("font-weight", 700)
+                .attr("fill", white)
+                .text(finalText);
+            const desc = card.append("text")
+                .attr("x", cardColumn.w / 2)
+                .attr("y", titleY + titleBlockOffset + (groups.length <= 2 ? 78 : 56))
+                .attr("text-anchor", "middle")
+                .attr("font-family", labelFont)
+                .attr("font-size", groups.length <= 2 ? 18 : 13)
+                .attr("font-weight", 400)
+                .attr("fill", "#d9e4e0");
+            wrapText(desc, trendText, cardColumn.w - 30, groups.length <= 2 ? 26 : 19, groups.length <= 2 ? 2 : 1);
+        });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_03.js

@@ -0,0 +1,593 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_03",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 3]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 设置尺寸和边距 - 右侧留出更多空间用于标签
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 180, bottom: 60, left: 80 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const yColumn = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField });
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值和X值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+    
+    // 创建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 g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+    
+    // 确保在创建网格线之前定义渐变
+    const defs = svg.append("defs");
+
+    // 创建一个唯一的ID，避免冲突
+    const gradientIdSuffix = chartUtils.random.id(jsonData, "multiple-line-03-grid");
+    const horizontalGradientId = `horizontal-grid-gradient-${gradientIdSuffix}`;
+    const verticalGradientId = `vertical-grid-gradient-${gradientIdSuffix}`;
+
+    // 添加水平网格线渐变
+    const horizontalGridGradient = defs.append("linearGradient")
+        .attr("id", horizontalGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%");
+
+    horizontalGridGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#6bc7c5")
+        .attr("stop-opacity", 0.2);
+
+    horizontalGridGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#6bc7c5")
+        .attr("stop-opacity", 0.05);
+
+    // 添加垂直网格线渐变
+    const verticalGridGradient = defs.append("linearGradient")
+        .attr("id", verticalGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "100%")
+        .attr("x2", "0%")
+        .attr("y2", "0%");
+
+    verticalGridGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#e8f6fa")
+        .attr("stop-opacity", 0.3);
+
+    verticalGridGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#e8f6fa")
+        .attr("stop-opacity", 0.1);
+
+    // 创建比例尺 - 修改为时间比例尺
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // 修改Y轴比例尺，支持负值，并确保最大刻度超过数据最大值
+    const yScale = d3.scaleLinear()
+        .domain([
+            Math.min(0, d3.min(chartData, d => +d[yField]) * 1.1), // 取最小值和0中的较小者
+            d3.max(chartData, d => +d[yField]) * 1.3 // 将最大值扩大30%
+        ])
+        .range([innerHeight, 0]);
+    
+    // 获取颜色
+    const getColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+    };
+    
+    // 添加网格线 - 使用半透明白色
+    // 首先获取Y轴的最大刻度值
+    const yTicks = yScale.ticks(6); // 增加刻度数量，确保有足够的刻度
+    const maxYTick = yTicks[yTicks.length - 1];
+    const maxYPos = yScale(maxYTick);
+
+    // 绘制水平网格线 - 向左延伸
+    const gridExtension = 20; // 网格线向左延伸的距离
+
+    const horizontalGradient = defs.append("linearGradient")
+        .attr("id", "horizontal-grid-gradient")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%");
+    
+    horizontalGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#6bc7c5")
+        .attr("stop-opacity", 1);
+        
+    horizontalGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#6bc7c5")
+        .attr("stop-opacity", 0.2);
+        
+
+    // 过滤Y轴刻度，移除最小的刻度（通常是0或负值）
+    const filteredYTicks = yTicks.filter(d => d > yTicks[0]);
+
+    // 创建水平网格渐变矩形，不包括最下方的刻度
+    g.selectAll("rect.grid-rect-y")
+        .data(filteredYTicks)
+        .enter()
+        .append("rect")
+        .attr("class", "grid-rect-y")
+        .attr("class", "background")
+        .attr("x", -gridExtension)
+        .attr("y", d => yScale(d) - 0.5) // 减去0.5使线条居中
+        .attr("width", innerWidth + gridExtension)
+        .attr("height", 1)
+        .style("fill", `url(#horizontal-grid-gradient)`);
+
+    const verticalGradient = defs.append("linearGradient")
+        .attr("id", "vertical-grid-gradient")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+    
+    verticalGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#6bc7c5")
+        .attr("stop-opacity", 0);
+        
+    verticalGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#6bc7c5")
+        .attr("stop-opacity", 0.4);
+    // 绘制垂直网格线 
+    g.selectAll("rect.grid-rect-x")
+        .data(xTicks)
+        .enter()
+        .append("rect")
+        .attr("class", "grid-rect-x")
+        .attr("class", "background")
+        .attr("x", d => xScale(d) - 0.5)
+        .attr("y", 0)
+        .attr("width", 1)
+        .attr("height", innerHeight + 10)
+        .style("fill", `url(#vertical-grid-gradient)`);
+    
+    // 为每个组添加线条渐变
+    groups.forEach(group => {
+        const gradientId = `line-gradient-${group.replace(/\s+/g, '-').toLowerCase()}`;
+        const baseColor = getColor(group);
+        
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "100%");
+            
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0.3);
+            
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0);
+    });
+    
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+
+    // 首先收集所有点信息，并分为起点和终点两组
+    const startPoints = [];
+    const endPoints = [];
+
+    groups.forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 绘制线条
+        g.append("path")
+            .datum(groupData)
+            .attr("class", "line")
+            .attr("fill", "none")
+            .attr("stroke", getColor(group))
+            .attr("stroke-width", 4)
+            .attr("d", line);
+        
+        // 添加起点和终点的圆点
+        const firstPoint = groupData[0];
+        const lastPoint = groupData[groupData.length - 1];
+        
+        // 处理起点
+        const startX = xScale(chartUtils.format.parseDate(firstPoint[xField]));
+        const startY = yScale(+firstPoint[yField]);
+        
+        // 添加圆点
+        g.append("circle")
+            .attr("cx", startX)
+            .attr("cy", startY)
+            .attr("r", 4)
+            .attr("fill", getColor(group));
+        
+        // 收集起点信息
+        startPoints.push({
+            x: startX,
+            y: startY,
+            value: chartUtils.format.integer(firstPoint[yField]).text,
+            color: getColor(group),
+            group: group
+        });
+        
+        // 处理终点
+        const endX = xScale(chartUtils.format.parseDate(lastPoint[xField]));
+        const endY = yScale(+lastPoint[yField]);
+        
+        // 添加圆点
+        g.append("circle")
+            .attr("cx", endX)
+            .attr("cy", endY)
+            .attr("r", 4)
+            .attr("fill", getColor(group));
+        
+        // 收集终点信息
+        endPoints.push({
+            x: endX,
+            y: endY,
+            value: chartUtils.format.integer(lastPoint[yField]).text,
+            color: getColor(group),
+            group: group
+        });
+    });
+    
+    // 绘制X轴
+    const xAxis = g.append("g")
+        .attr("transform", `translate(0,${innerHeight})`)
+        .call(d3.axisBottom(xScale)
+            .tickFormat(xFormat) // 使用相同的刻度数量
+        );
+    
+    // 设置X轴样式，并下移文本
+    xAxis.selectAll("text")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("fill", "#e8f6fa")
+        .attr("dy", "1.5em"); // 下移文本
+    
+    // 移除X轴线和刻度
+    xAxis.select(".domain").remove();
+    xAxis.selectAll(".tick line").remove();
+    
+    // 在X轴刻度下方添加一条水平线
+    g.append("line")
+        .attr("x1", -20)
+        .attr("y1", innerHeight + 40) // 放在X轴刻度文本下方
+        .attr("x2", innerWidth + 20)
+        .attr("y2", innerHeight + 40) // 保持水平
+        .attr("stroke", "#e8f6fa") // 与X轴文本相同的颜色
+        .attr("stroke-width", 1);
+
+    // 绘制Y轴 - 移除B后缀，并调整刻度位置
+    const yAxis = g.append("g")
+        .call(d3.axisLeft(yScale)
+            .tickValues(filteredYTicks) // 使用过滤后的刻度
+            .tickSize(0) // 移除刻度线
+        );
+
+    // 移除Y轴线
+    yAxis.select(".domain").remove();
+    yAxis.selectAll(".tick line").remove();
+
+    // 手动添加Y轴刻度文本，放在延伸的网格线上方
+    yAxis.selectAll(".tick text")
+        .attr("x", -gridExtension - 5) // 放在延伸的网格线上方，留出一点间距
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("fill", "#6bc7c5") // 白色
+        .style("text-anchor", "end") 
+        .text(d => d);
+    
+    // 添加Y轴编码描述
+    // 获取Y轴字段名称
+    const yAxisLabel = yColumn.description;
+
+    // 计算Y轴标签位置 - 在最大刻度下方
+    const yAxisLabelX = -margin.left / 2 + 5; // 在Y轴中间位置
+    const yAxisLabelY = yScale(yTicks[yTicks.length - 1]) - 30; // 最大刻度上方一点
+
+    // 添加Y轴描述文本
+    const words = yAxisLabel.split(' ');
+    let lines = [];
+    let currentLine = words[0];
+    
+    // 计算每行文本
+    for(let i = 1; i < words.length; i++) {
+        const testLine = currentLine + ' ' + words[i];
+        const testWidth = chartUtils.text.measure(null, testLine, { fontSize: typography.label.font_size }).width;
+        
+        if(testWidth <= 200) {
+            currentLine = testLine;
+        } else {
+            lines.push(currentLine);
+            currentLine = words[i];
+        }
+    }
+    lines.push(currentLine);
+    
+    // 绘制多行文本
+    lines.forEach((line, i) => {
+        g.append("text")
+            .attr("class", "y-axis-label")
+            .attr("x", yAxisLabelX)
+            .attr("y", yAxisLabelY + i * 20)
+            .attr("text-anchor", "start")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", "#6bc7c5")
+            .text(line);
+    });
+    
+    // 动态规划标签放置算法
+    function placeLabelsDP(points, avoidYPositions = []) {
+        // 每个格点的高度（像素）
+        const GRID_SIZE = 3;
+        // 圆点周围的保护区域（格点数）
+        const PROTECTION_RADIUS = 3;
+        // 标签高度（格点数）
+        const LABEL_HEIGHT = 5; 
+        
+        // 离散化Y坐标，创建格点系统
+        const minY = 0;
+        const maxY = innerHeight;
+        const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+        
+        // 按照Y坐标排序点
+        points.sort((a, b) => a.y - b.y);
+        
+        // 创建格点占用标记
+        const occupied = new Array(gridCount).fill(false);
+        
+        // 标记圆点周围的保护区域为已占用
+        points.forEach(point => {
+            const gridY = Math.floor(point.y / GRID_SIZE);
+            for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+                occupied[i] = true;
+            }
+        });
+        
+        // 标记需要避开的Y轴刻度位置为已占用
+        avoidYPositions.forEach(yPos => {
+            const gridY = Math.floor(yPos / GRID_SIZE);
+            // 为每个刻度值添加一些保护区域
+            for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+                occupied[i] = true;
+            }
+        });
+        
+        // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+        const n = points.length;
+        const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+        const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+        
+        // 初始条件：第一个点的标签放置
+        const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+        
+        // 尝试将第一个点的标签放在可行的位置
+        for (let j = 0; j < gridCount; j++) {
+            // 检查是否可行（不在保护区域内且有足够空间放置标签）
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                // 确保第一个标签不超过第二个圆点位置（如果有第二个圆点）
+                if (n > 1) {
+                    const nextPointGridY = Math.floor(points[1].y / GRID_SIZE);
+                    if (j > nextPointGridY) {
+                        canPlace = false; // 不允许标签越过下一个圆点
+                    }
+                }
+                
+                if (canPlace) {
+                    // 计算代价：与圆点位置的距离
+                    const cost = Math.abs(j - firstPointGridY);
+                    dp[0][j] = cost;
+                }
+            }
+        }
+        
+        // 填充dp表
+        for (let i = 1; i < n; i++) {
+            const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+            
+            for (let j = 0; j < gridCount; j++) {
+                // 检查当前位置是否可行
+                if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                    // 检查标签是否会与其他标签重叠
+                    let canPlace = true;
+                    for (let k = 0; k < LABEL_HEIGHT; k++) {
+                        if (j + k < gridCount && occupied[j + k]) {
+                            canPlace = false;
+                            break;
+                        }
+                    }
+                    
+                    // 确保当前标签不超过下一个圆点位置（如果有下一个圆点）
+                    if (i < n - 1) {
+                        const nextPointGridY = Math.floor(points[i+1].y / GRID_SIZE);
+                        if (j > nextPointGridY) {
+                            canPlace = false; // 不允许标签越过下一个圆点
+                        }
+                    }
+
+                    // 确保当前标签至少超过上一个圆点位置
+                    if (i > 0) {
+                        const prevPointGridY = Math.floor(points[i-1].y / GRID_SIZE);
+                        if (j < prevPointGridY) {
+                            canPlace = false; // 不允许标签越过上一个圆点
+                        }
+                    }
+                    
+                    if (canPlace) {
+                        // 根据上一个点的标签位置计算当前最小代价
+                        for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                            if (dp[i-1][k] !== Infinity) {
+
+                                // 当前标签的代价
+                                const curCost = Math.abs(j - pointGridY);
+                                const totalCost = dp[i-1][k] + curCost;
+                                
+                                if (totalCost < dp[i][j]) {
+                                    dp[i][j] = totalCost;
+                                    prev[i][j] = k; // 记录前驱
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        
+        // 找出最后一个点的最优放置位置
+        let minCost = Infinity;
+        let bestPos = -1;
+        
+        for (let j = 0; j < gridCount; j++) {
+            if (dp[n-1][j] < minCost) {
+                minCost = dp[n-1][j];
+                bestPos = j;
+            }
+        }
+        
+        // 回溯构建结果
+        const labelPositions = [];
+        if (bestPos !== -1) {
+            // 从后向前回溯
+            let pos = bestPos;
+            
+            for (let i = n - 1; i >= 0; i--) {
+                labelPositions.unshift({
+                    point: points[i],
+                    labelY: pos * GRID_SIZE
+                });
+                
+                pos = prev[i][pos];
+            }
+
+        } else {
+            // 无可行解，退化为简单方案
+            let lastY = 0;
+            for (let i = 0; i < n; i++) {
+                const point = points[i];
+                // 确保标签不超过下一个圆点的位置
+                let maxY = innerHeight;
+                if (i < n - 1) {
+                    maxY = points[i+1].y;
+                }
+                
+                const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+                
+                labelPositions.push({
+                    point: point,
+                    labelY: labelY
+                });
+                
+                lastY = labelY;
+            }
+        }
+        
+        return labelPositions;
+    }
+
+    // 分别对起点和终点应用动态规划
+    // 获取Y轴刻度位置用于避开
+    const yTickPositions = filteredYTicks.map(tick => yScale(tick));
+    const startLabelPositions = placeLabelsDP(startPoints, yTickPositions); // 起点需要避开Y轴刻度
+    const endLabelPositions = placeLabelsDP(endPoints, []); // 终点不需要避开Y轴刻度
+
+    // 分别处理起点和终点标签
+    startLabelPositions.forEach(placement => {
+        const {point, labelY} = placement;
+        
+        // 添加起点标签,向左偏移10px
+        g.append("text")
+            .attr("x", point.x - 20)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle") 
+            .attr("dominant-baseline", "hanging")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", "18px")
+            .style("font-weight", "bold")
+            .style("fill", point.color)
+            .text(point.value);
+    });
+
+    endLabelPositions.forEach(placement => {
+        const {point, labelY} = placement;
+        
+        // 添加终点标签,向右偏移10px
+        g.append("text")
+            .attr("x", point.x + 10)
+            .attr("y", labelY)
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "hanging")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", "18px")
+            .style("font-weight", "bold")
+            .style("fill", point.color)
+            .text(point.value + " " + point.group);
+    });
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_06.js

@@ -0,0 +1,550 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_06",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], [0, "inf"], [2, 8]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 20, right: 60, bottom: 80, left: 40 };
+    
+    // 创建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 { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 确定全局y轴范围
+    const yMin = Math.min(0, d3.min(chartData, d => +d[yField]) * 1.4);
+    const yMax = d3.max(chartData, d => +d[yField]) * 1.1;
+
+    // 创建y轴比例尺
+    const yScale = d3.scaleLinear()
+        .domain([yMin, yMax])
+        .range([chartHeight, 0]);
+    
+    // 添加Y轴线（虚线）
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", 0)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#9badd3")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "2,2");
+
+    // 添加X轴线（虚线）
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#9badd3")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "2,2");
+    
+    // 添加y轴刻度和标签
+    const yTicks = yScale.ticks(5); // 根据实际数据自动生成刻度
+    
+    // 添加y轴刻度和标签
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -5)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "16px")
+            .style("fill", "#ffffff")
+            .text(tick);
+    });
+    
+    // 添加x轴刻度和标签
+    xTicks.forEach((tick, i) => {
+        // 添加主刻度线,跳过第一个刻度
+        if(i !== 0) {
+            g.append("line")
+                .attr("x1", xScale(tick))
+                .attr("y1", chartHeight - 2)
+                .attr("x2", xScale(tick))
+                .attr("y2", chartHeight + 2)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 1);
+        }
+        
+        // 添加刻度标签
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", i === 0 ? "start" : i === xTicks.length - 1 ? "end" : "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "16px")
+            .style("fill", "#ffffff")
+            .text(xFormat(tick));
+    });
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear); // 使用普通折线
+    
+    // 绘制每个组的线条和收集标签点
+    const labelPoints = [];
+    
+    groups.forEach(group => {
+        // 过滤当前组的数据
+        let groupData = chartData.filter(d => d[groupField] === group);
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        
+        // 确保第一个点从Y轴开始
+        const firstDataDate = chartUtils.format.parseDate(groupData[0][xField]);
+        const xMin = new Date(xScale.domain()[0]);
+        // if (firstDataDate.getTime() > xMin.getTime()) {
+        //     // 添加Y轴起点（使用第一个数据点的Y值）
+        //     const firstPoint = {
+        //         [xField]: xMin.getFullYear().toString(),
+        //         [yField]: groupData[0][yField],
+        //         [groupField]: group
+        //     };
+        //     groupData = [firstPoint, ...groupData];
+        // }
+        
+        // 确保最后一个点精确对应最大X值
+        const lastDataDate = chartUtils.format.parseDate(groupData[groupData.length - 1][xField]);
+        const xMax = new Date(xScale.domain()[1]);
+        if (lastDataDate.getTime() < xMax.getTime()) {
+            // 添加最后一个点（使用最后一个数据点的Y值）
+            const lastPoint = {
+                [xField]: xMax.getFullYear().toString(),
+                [yField]: groupData[groupData.length - 1][yField],
+                [groupField]: group
+            };
+            groupData = [...groupData, lastPoint];
+        }
+        
+        // 绘制线条
+        g.append("path")
+            .datum(groupData)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 4)
+            .attr("d", line);
+        
+        // 收集最终值标签点
+        if (groupData.length > 0) {
+            const lastPoint = groupData[groupData.length - 1];
+            
+            labelPoints.push({
+                x: chartWidth,
+                y: yScale(+lastPoint[yField]),
+                value: chartUtils.format.integer(lastPoint[yField]).text,
+                color: color,
+                group: group
+            });
+        }
+    });
+
+    // 动态规划标签放置算法
+    function placeLabelsDP(points, avoidYPositions = []) {
+        // 每个格点的高度（像素）
+        const GRID_SIZE = 3;
+        // 圆点周围的保护区域（格点数）
+        const PROTECTION_RADIUS = 3;
+        // 标签高度（格点数）
+        const LABEL_HEIGHT = 10; 
+        
+        // 离散化Y坐标，创建格点系统
+        const minY = 0;
+        const maxY = innerHeight;
+        const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+        
+        // 按照Y坐标排序点
+        points.sort((a, b) => a.y - b.y);
+        
+        // 创建格点占用标记
+        const occupied = new Array(gridCount).fill(false);
+        
+        // 标记圆点周围的保护区域为已占用
+        // points.forEach(point => {
+        //     const gridY = Math.floor(point.y / GRID_SIZE);
+        //     for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+        //         occupied[i] = true;
+        //     }
+        // });
+        
+        // 标记需要避开的Y轴刻度位置为已占用
+        avoidYPositions.forEach(yPos => {
+            const gridY = Math.floor(yPos / GRID_SIZE);
+            // 为每个刻度值添加一些保护区域
+            for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+                occupied[i] = true;
+            }
+        });
+        
+        // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+        const n = points.length;
+        const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+        const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+        
+        // 初始条件：第一个点的标签放置
+        const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+        
+        // 尝试将第一个点的标签放在可行的位置
+        for (let j = 0; j < gridCount; j++) {
+            // 检查是否可行（不在保护区域内且有足够空间放置标签）
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                // 确保第一个标签不超过第二个圆点位置（如果有第二个圆点）
+                if (n > 1) {
+                    const nextPointGridY = Math.floor(points[1].y / GRID_SIZE);
+                    if (j > nextPointGridY) {
+                        canPlace = false; // 不允许标签越过下一个圆点
+                    }
+                }
+                
+                if (canPlace) {
+                    // 计算代价：与圆点位置的距离
+                    const cost = Math.abs(j - firstPointGridY);
+                    dp[0][j] = cost * cost;
+                }
+            }
+        }
+        
+        // 填充dp表
+        for (let i = 1; i < n; i++) {
+            const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+            
+            for (let j = 0; j < gridCount; j++) {
+                // 检查当前位置是否可行
+                if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                    // 检查标签是否会与其他标签重叠
+                    let canPlace = true;
+                    for (let k = 0; k < LABEL_HEIGHT; k++) {
+                        if (j + k < gridCount && occupied[j + k]) {
+                            canPlace = false;
+                            break;
+                        }
+                    }
+                    
+                    // 确保当前标签不超过下一个圆点位置（如果有下一个圆点）
+                    if (i < n - 1) {
+                        const nextPointGridY = Math.floor(points[i+1].y / GRID_SIZE);
+                        if (j > nextPointGridY) {
+                            canPlace = false; // 不允许标签越过下一个圆点
+                        }
+                    }
+
+                    // 确保当前标签至少超过上一个圆点位置
+                    if (i > 0) {
+                        const prevPointGridY = Math.floor(points[i-1].y / GRID_SIZE);
+                        if (j < prevPointGridY) {
+                            canPlace = false; // 不允许标签越过上一个圆点
+                        }
+                    }
+                    
+                    if (canPlace) {
+                        // 根据上一个点的标签位置计算当前最小代价
+                        for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                            if (dp[i-1][k] !== Infinity) {
+
+                                // 当前标签的代价
+                                const curCost = Math.abs(j - pointGridY);
+                                const totalCost = dp[i-1][k] + curCost * curCost;
+                                
+                                if (totalCost < dp[i][j]) {
+                                    dp[i][j] = totalCost;
+                                    prev[i][j] = k; // 记录前驱
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        
+        // 找出最后一个点的最优放置位置
+        let minCost = Infinity;
+        let bestPos = -1;
+        
+        for (let j = 0; j < gridCount; j++) {
+            if (dp[n-1][j] < minCost) {
+                minCost = dp[n-1][j];
+                bestPos = j;
+            }
+        }
+        
+        // 回溯构建结果
+        const labelPositions = [];
+        if (bestPos !== -1) {
+            // 从后向前回溯
+            let pos = bestPos;
+            
+            for (let i = n - 1; i >= 0; i--) {
+                labelPositions.unshift({
+                    point: points[i],
+                    labelY: pos * GRID_SIZE
+                });
+                
+                pos = prev[i][pos];
+            }
+
+        } else {
+            // 无可行解，退化为简单方案
+            let lastY = 0;
+            for (let i = 0; i < n; i++) {
+                const point = points[i];
+                // 确保标签不超过下一个圆点的位置
+                let maxY = innerHeight;
+                if (i < n - 1) {
+                    maxY = points[i+1].y;
+                }
+                
+                const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+                
+                labelPositions.push({
+                    point: point,
+                    labelY: labelY
+                });
+                
+                lastY = labelY;
+            }
+        }
+        
+        return labelPositions;
+    }
+    
+    // 使用动态规划算法放置标签
+    const labelPositions = placeLabelsDP(labelPoints, []);
+    
+    // 绘制标签
+    labelPositions.forEach(pos => {
+        g.append("text")
+            .attr("x", chartWidth + 5)
+            .attr("y", pos.labelY)
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "18px")
+            .style("font-weight", "bold")
+            .style("fill", pos.point.color)
+            .text(pos.point.value);
+    });
+    
+    // 添加图例（自适应大小）
+    // 计算图例项
+    const legendItems = groups;
+    const legendPadding = 10;
+    const legendItemHeight = 20;
+    const legendItemSpacing = 0;
+    const legendTextOffset = 10;
+    const fontSize = 18;
+
+    // 计算图例的总高度
+    const legendHeight = legendItems.length * legendItemHeight + (legendItems.length - 1) * legendItemSpacing + 2 * legendPadding;
+
+    // 计算最长文本的宽度
+    const maxTextWidth = d3.max(legendItems, item => chartUtils.text.measure(svg, item, { fontFamily: "Arial", fontSize }).width) || 0;
+
+    // 计算图例的总宽度
+    const legendLineWidth = 30;
+    const legendWidth = legendLineWidth + legendTextOffset + maxTextWidth + 2 * legendPadding;
+
+    // 计算图例的最佳位置（避免与数据线交叉）
+    function findBestLegendPosition(legendWidth, legendHeight) {
+        // 定义可能的位置（右上、右下、左上、左下）
+        const positions = [
+            { name: "rightTop", x: width - margin.right - legendWidth, y: margin.top + 10 },
+            { name: "rightBottom", x: width - margin.right - legendWidth, y: height - margin.bottom - legendHeight },
+            { name: "leftTop", x: margin.left + 10, y: margin.top + 10 },
+            { name: "leftBottom", x: margin.left + 10, y: height - margin.bottom - legendHeight }
+        ];
+        
+        // 创建临时图例用于碰撞检测
+        const tempLegend = svg.append("rect")
+            .attr("width", legendWidth)
+            .attr("height", legendHeight)
+            .attr("fill", "none")
+            .attr("stroke", "none")
+            .style("visibility", "hidden");
+        
+        // 计算每个位置与数据线的交叉程度
+        const intersections = positions.map(pos => {
+            tempLegend.attr("x", pos.x).attr("y", pos.y);
+            let intersectionCount = 0;
+            
+            // 检查每条线与图例的交叉
+            groups.forEach(group => {
+                const groupData = chartData.filter(d => d[groupField] === group);
+                
+                // 简化：检查每个数据点是否在图例区域内
+                for (let i = 0; i < groupData.length; i++) {
+                    const x = margin.left + xScale(chartUtils.format.parseDate(groupData[i][xField]));
+                    const y = margin.top + yScale(groupData[i][yField]);
+                    
+                    if (x >= pos.x && x <= pos.x + legendWidth && 
+                        y >= pos.y && y <= pos.y + legendHeight) {
+                        intersectionCount++;
+                    }
+                    
+                    // 也检查线段是否穿过图例
+                    if (i < groupData.length - 1) {
+                        const nextX = margin.left + xScale(chartUtils.format.parseDate(groupData[i+1][xField]));
+                        const nextY = margin.top + yScale(groupData[i+1][yField]);
+                        
+                        // 简化的线段与矩形相交检测
+                        if (lineIntersectsRectangle(
+                            x, y, nextX, nextY,
+                            pos.x, pos.y, pos.x + legendWidth, pos.y + legendHeight
+                        )) {
+                            intersectionCount++;
+                        }
+                    }
+                }
+            });
+            
+            return { position: pos, count: intersectionCount };
+        });
+        
+        // 移除临时图例
+        tempLegend.remove();
+        
+        // 找出交叉最少的位置
+        intersections.sort((a, b) => a.count - b.count);
+        return intersections[0].position;
+    }
+
+    // 辅助函数：检测线段是否与矩形相交
+    function lineIntersectsRectangle(x1, y1, x2, y2, rectX, rectY, rectX2, rectY2) {
+        // 检查线段的两个端点是否都在矩形的同一侧
+        if ((x1 <= rectX && x2 <= rectX) || // 线段在矩形左侧
+            (x1 >= rectX2 && x2 >= rectX2) || // 线段在矩形右侧
+            (y1 <= rectY && y2 <= rectY) || // 线段在矩形上方
+            (y1 >= rectY2 && y2 >= rectY2)) { // 线段在矩形下方
+            return false;
+        }
+        
+        // 简化的相交检测
+        // 如果线段的斜率使其穿过矩形，则认为相交
+        if (x1 !== x2) { // 非垂直线
+            const slope = (y2 - y1) / (x2 - x1);
+            const yAtRectX = y1 + slope * (rectX - x1);
+            const yAtRectX2 = y1 + slope * (rectX2 - x1);
+            
+            if ((yAtRectX >= rectY && yAtRectX <= rectY2) ||
+                (yAtRectX2 >= rectY && yAtRectX2 <= rectY2)) {
+                return true;
+            }
+        }
+        
+        if (y1 !== y2) { // 非水平线
+            const inverseSlope = (x2 - x1) / (y2 - y1);
+            const xAtRectY = x1 + inverseSlope * (rectY - y1);
+            const xAtRectY2 = x1 + inverseSlope * (rectY2 - y1);
+            
+            if ((xAtRectY >= rectX && xAtRectY <= rectX2) ||
+                (xAtRectY2 >= rectX && xAtRectY2 <= rectX2)) {
+                return true;
+            }
+        }
+        
+        return false;
+    }
+
+    // 找出最佳位置
+    const bestPosition = findBestLegendPosition(legendWidth, legendHeight);
+    const legendX = bestPosition.x;
+    const legendY = bestPosition.y;
+
+    const legend = svg.append("g")
+        .attr("transform", `translate(${legendX}, ${legendY})`);
+    legend.append("rect")
+        .attr("width", legendWidth)
+        .attr("height", legendHeight)
+        .attr("fill", "none")
+        .attr("stroke", "#d1ddff")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    chartUtils.legend.draw(legend, legendItems, {
+        color: item => colorResolver.field(item, 0, { fallbackKey: "primary" }).value,
+        colorResolver,
+        colors,
+    }, {
+        x: legendPadding,
+        y: legendPadding,
+        direction: "vertical",
+        markerShape: "line",
+        markerSize: legendLineWidth,
+        strokeWidth: 5,
+        labelGap: legendTextOffset,
+        rowGap: legendItemSpacing,
+        itemHeight: legendItemHeight,
+        fontSize: fontSize,
+        fontFamily: "Arial",
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_07.js

@@ -0,0 +1,894 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_07",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 7]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "side",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 设置尺寸和边距 - 右侧留出更多空间用于标签
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 180, bottom: 60, left: 80 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const yColumn = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField });
+    const yLabel = yColumn.rawLabel || yField;
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值和X值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+    
+    // 创建比例尺 - 修改为时间比例尺
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // 创建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 g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+    
+    // 修改Y轴比例尺，支持负值，并确保最大刻度超过数据最大值
+    const yScale = d3.scaleLinear()
+        .domain([
+            Math.min(0, d3.min(chartData, d => +d[yField]) * 1.1), // 取最小值和0中的较小者
+            d3.max(chartData, d => +d[yField]) * 1.3 // 将最大值扩大30%
+        ])
+        .range([innerHeight, 0]);
+    
+    // 获取颜色
+    const getColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+    };
+    
+    // 添加网格线 - 使用半透明白色
+    // 首先获取Y轴的最大刻度值
+    const yTicks = yScale.ticks(6); // 增加刻度数量，确保有足够的刻度
+    const maxYTick = yTicks[yTicks.length - 1];
+    const maxYPos = yScale(maxYTick);
+
+    // 绘制水平网格线 - 向左延伸
+    const gridExtension = 5; // 网格线向左延伸的距离
+
+    // 过滤Y轴刻度，移除最小的刻度（通常是0或负值）
+    const filteredYTicks = yTicks.filter(d => d > yTicks[0]);
+
+    // 创建水平网格线，不包括最下方的刻度
+    g.selectAll("rect.grid-rect-y")
+        .data(filteredYTicks)
+        .enter()
+        .append("rect")
+        .attr("class", "grid-rect-y")
+        .attr("class", "background")
+        .attr("x", -gridExtension - 30)
+        .attr("y", d => yScale(d) - 0.5) // 减去0.5使线条居中
+        .attr("width", innerWidth + gridExtension)
+        .attr("height", 1)
+        .style("fill", "#3f3e40");
+
+    // 绘制垂直网格线 
+    g.selectAll("rect.grid-rect-x")
+        .data(xTicks)
+        .enter()
+        .append("rect")
+        .attr("class", "grid-rect-x")
+        .attr("class", "background")
+        .attr("x", d => xScale(d) - 0.5)
+        .attr("y", 0)
+        .attr("width", 1)
+        .attr("height", innerHeight)
+        .style("fill", "#3f3e40");
+    
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+
+    // 首先收集所有点信息，并分为起点和终点两组
+    const startPoints = [];
+    const endPoints = [];
+
+    let endX = 0;
+    // 获取最后一个时间点对应的x坐标
+    const lastXValue = xValues[xValues.length - 1];
+    endX = xScale(chartUtils.format.parseDate(lastXValue));
+    
+    // 创建渐变定义
+    const defs = svg.append("defs");
+    
+    // 添加Y轴线 - 与X轴线样式一致
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", 0)
+        .attr("y2", innerHeight)
+        .attr("stroke", "#e8f6fa")
+        .attr("stroke-width", 1);
+    
+    // 添加最后一个年份的垂直线 - 与X轴线样式一致
+    g.append("line")
+        .attr("x1", endX)
+        .attr("y1", 0)
+        .attr("x2", endX)
+        .attr("y2", innerHeight)
+        .attr("stroke", "#e8f6fa")
+        .attr("stroke-width", 1);
+
+    // 找出结束值最高的组
+    let highestEndGroup = null;
+    let highestEndValue = -Infinity;
+    
+    groups.forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        const lastPoint = groupData[groupData.length - 1];
+        
+        if (+lastPoint[yField] > highestEndValue) {
+            highestEndValue = lastPoint[yField];
+            highestEndGroup = group;
+        }
+    });
+    
+    // 为最高值组创建渐变 - 使用更多的小段和插值
+    const gradientId = "area-gradient";
+    
+    // 获取最高组的数据
+    const highestGroupData = chartData.filter(d => d[groupField] === highestEndGroup);
+    
+    // 计算插值点，使渐变更加平滑 - 直接对x坐标进行插值
+    const interpolatedData = [];
+    const interpolationCount = 10; // 增加插值点数量，使效果更平滑
+    
+    for (let i = 0; i < highestGroupData.length - 1; i++) {
+        const current = highestGroupData[i];
+        const next = highestGroupData[i + 1];
+        
+        // 计算当前点和下一个点的x坐标
+        const currentX = xScale(chartUtils.format.parseDate(current[xField]));
+        const nextX = xScale(chartUtils.format.parseDate(next[xField]));
+        
+        // 计算当前点和下一个点的y值
+        const currentY = current[yField];
+        const nextY = next[yField];
+        
+        // 添加当前点
+        interpolatedData.push({
+            x: currentX,
+            y: currentY,
+            original: current
+        });
+        
+        // 在当前点和下一个点之间插入额外的点
+        for (let j = 1; j <= interpolationCount; j++) {
+            const ratio = j / (interpolationCount + 1);
+            
+            // 直接对x坐标和y值进行线性插值
+            const interpolatedX = currentX * (1 - ratio) + nextX * ratio;
+            const interpolatedY = currentY * (1 - ratio) + nextY * ratio;
+            
+            interpolatedData.push({
+                x: interpolatedX,
+                y: interpolatedY,
+                // 保存一个引用，用于获取其他属性
+                original: current
+            });
+        }
+    }
+    
+    // 添加最后一个点
+    interpolatedData.push({
+        x: xScale(chartUtils.format.parseDate(highestGroupData[highestGroupData.length - 1][xField])),
+        y: highestGroupData[highestGroupData.length - 1][yField],
+        original: highestGroupData[highestGroupData.length - 1]
+    });
+    
+    // 为每个插值点创建一个渐变
+    interpolatedData.forEach((d, i) => {
+        const pointGradientId = `${gradientId}-${i}`;
+        const pointGradient = defs.append("linearGradient")
+            .attr("id", pointGradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "100%")
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("gradientTransform", `translate(0, ${yScale(d.y)})`);
+        
+        // 添加渐变色标 - 使用更多的色标点
+        pointGradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", getColor(highestEndGroup))
+            .attr("stop-opacity", 0.7);
+        
+        pointGradient.append("stop")
+            .attr("offset", "20%")
+            .attr("stop-color", getColor(highestEndGroup))
+            .attr("stop-opacity", 0.5);
+        
+        pointGradient.append("stop")
+            .attr("offset", "40%")
+            .attr("stop-color", getColor(highestEndGroup))
+            .attr("stop-opacity", 0.3);
+        
+        pointGradient.append("stop")
+            .attr("offset", "60%")
+            .attr("stop-color", getColor(highestEndGroup))
+            .attr("stop-opacity", 0.2);
+        
+        pointGradient.append("stop")
+            .attr("offset", "80%")
+            .attr("stop-color", getColor(highestEndGroup))
+            .attr("stop-opacity", 0.1);
+        
+        pointGradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", getColor(highestEndGroup))
+            .attr("stop-opacity", 0);
+    });
+
+    groups.forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+
+        // 如果是最高值组，添加面积渐变
+        if (group === highestEndGroup) {
+            // 创建自定义面积生成器，直接使用x坐标
+            const customArea = (segment) => {
+                const [p1, p2] = segment;
+                return `
+                    M ${p1.x},${yScale(p1.y)}
+                    L ${p2.x},${yScale(p2.y)}
+                    L ${p2.x},${innerHeight}
+                    L ${p1.x},${innerHeight}
+                    Z
+                `;
+            };
+            
+            // 添加面积 - 使用插值后的数据点
+            for (let i = 0; i < interpolatedData.length - 1; i++) {
+                const segmentData = [interpolatedData[i], interpolatedData[i+1]];
+                const segmentGradientId = `${gradientId}-${i}`;
+                
+                g.append("path")
+                    .attr("class", "area-segment")
+                    .attr("fill", `url(#${segmentGradientId})`)
+                    .attr("d", customArea(segmentData))
+                    .attr("opacity", 0.8);
+            }
+        }
+        
+        // 绘制线条 - 添加黑色描边
+        // 先绘制黑色描边
+        g.append("path")
+            .datum(groupData)
+            .attr("class", "line-stroke")
+            .attr("fill", "none")
+            .attr("stroke", "#333333")
+            .attr("stroke-width", 8) // 比实际线条宽一些
+            .attr("d", line);
+        
+        // 再绘制彩色线条
+        g.append("path")
+            .datum(groupData)
+            .attr("class", "line")
+            .attr("fill", "none")
+            .attr("stroke", getColor(group))
+            .attr("stroke-width", 4)
+            .attr("d", line);
+        
+        // 添加起点和终点的圆点
+        const firstPoint = groupData[0];
+        const lastPoint = groupData[groupData.length - 1];
+        
+        // 处理起点 - 添加黑色描边
+        const startX = xScale(chartUtils.format.parseDate(firstPoint[xField]));
+        const startY = yScale(+firstPoint[yField]);
+        
+        // 添加圆点描边
+        g.append("circle")
+            .attr("cx", startX)
+            .attr("cy", startY)
+            .attr("r", 6) // 比实际圆点大一些
+            .attr("fill", "#333333");
+        
+        // 添加圆点
+        g.append("circle")
+            .attr("cx", startX)
+            .attr("cy", startY)
+            .attr("r", 4)
+            .attr("fill", getColor(group));
+        
+        // 收集起点信息
+        startPoints.push({
+            x: startX,
+            y: startY,
+            value: chartUtils.format.integer(firstPoint[yField]).text,
+            color: getColor(group),
+            group: group
+        });
+        
+        // 处理终点 - 添加黑色描边
+        endX = xScale(chartUtils.format.parseDate(lastPoint[xField]));
+        const endY = yScale(+lastPoint[yField]);
+        
+        // 添加圆点描边
+        g.append("circle")
+            .attr("cx", endX)
+            .attr("cy", endY)
+            .attr("r", 6) // 比实际圆点大一些
+            .attr("fill", "#333333");
+        
+        // 添加圆点
+        g.append("circle")
+            .attr("cx", endX)
+            .attr("cy", endY)
+            .attr("r", 4)
+            .attr("fill", getColor(group));
+        
+        // 收集终点信息
+        endPoints.push({
+            x: endX,
+            y: endY,
+            value: chartUtils.format.integer(lastPoint[yField]).text,
+            color: getColor(group),
+            group: group
+        });
+
+    });
+    
+    // 绘制X轴 - 使用均匀分布的刻度
+    const xAxis = g.append("g")
+        .attr("transform", `translate(0,${innerHeight})`)
+        .call(d3.axisBottom(xScale)
+            .tickFormat(xFormat) // 使用自定义刻度值
+        );
+    
+    // 设置X轴样式，并下移文本
+    xAxis.selectAll("text")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", "12px")
+        .style("fill", "#ffffff")
+        .attr("dy", "0.7em"); // 下移文本
+    
+    // 移除X轴线和刻度
+    xAxis.select(".domain").remove();
+    xAxis.selectAll(".tick line").remove();
+    
+    // 在X轴刻度下方添加一条水平线
+    g.append("line")
+        .attr("x1", -20)
+        .attr("y1", innerHeight) // 放在X轴刻度文本下方
+        .attr("x2", innerWidth + 20)
+        .attr("y2", innerHeight) // 保持水平
+        .attr("stroke", "#e8f6fa") // 与X轴文本相同的颜色
+        .attr("stroke-width", 1);
+
+
+    // 绘制Y轴 - 移除B后缀，并调整刻度位置
+    const yAxis = g.append("g")
+        .call(d3.axisLeft(yScale)
+            .tickValues(filteredYTicks) // 使用过滤后的刻度
+            .tickSize(0) // 移除刻度线
+        );
+
+    // 移除Y轴线
+    yAxis.select(".domain").remove();
+    yAxis.selectAll(".tick line").remove();
+
+    // 手动添加Y轴刻度文本，放在延伸的网格线上方
+    yAxis.selectAll(".tick text")
+        .attr("x", -gridExtension - 5) // 放在延伸的网格线上方，留出一点间距
+        .attr("dy", -5)
+        .style("font-family", typography.label.font_family)
+        .style("font-size", "12px")
+        .style("fill", "#ffffff") // 白色
+        .style("text-anchor", "end") 
+        .text(d => d);
+    
+    // 添加Y轴标题 - 旋转90度
+    g.append("text")
+        .attr("transform", "rotate(-90)")
+        .attr("y", -margin.left + 20) // 位置调整
+        .attr("x", -innerHeight / 2) // 居中
+        .attr("dy", "1em")
+        .style("text-anchor", "middle")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", "12px")
+        .style("fill", "#ffffff")
+        .text(yLabel); // 使用标签或字段名
+    
+
+    
+    // 动态规划标签放置算法
+    function placeLabelsDP(points, avoidYPositions = []) {
+        // 每个格点的高度（像素）
+        const GRID_SIZE = 3;
+        // 圆点周围的保护区域（格点数）
+        const PROTECTION_RADIUS = 3;
+        // 标签高度（格点数）
+        const LABEL_HEIGHT = 5; 
+        
+        // 离散化Y坐标，创建格点系统
+        const minY = 0;
+        const maxY = innerHeight;
+        const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+        
+        // 按照Y坐标排序点
+        points.sort((a, b) => a.y - b.y);
+        
+        // 创建格点占用标记
+        const occupied = new Array(gridCount).fill(false);
+        
+        // 标记圆点周围的保护区域为已占用
+        points.forEach(point => {
+            const gridY = Math.floor(point.y / GRID_SIZE);
+            for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+                occupied[i] = true;
+            }
+        });
+        
+        // 标记需要避开的Y轴刻度位置为已占用
+        avoidYPositions.forEach(yPos => {
+            const gridY = Math.floor(yPos / GRID_SIZE);
+            // 为每个刻度值添加一些保护区域
+            for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+                occupied[i] = true;
+            }
+        });
+        
+        // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+        const n = points.length;
+        const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+        const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+        
+        // 初始条件：第一个点的标签放置
+        const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+        
+        // 尝试将第一个点的标签放在可行的位置
+        for (let j = 0; j < gridCount; j++) {
+            // 检查是否可行（不在保护区域内且有足够空间放置标签）
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                // 确保第一个标签不超过第二个圆点位置（如果有第二个圆点）
+                if (n > 1) {
+                    const nextPointGridY = Math.floor(points[1].y / GRID_SIZE);
+                    if (j > nextPointGridY) {
+                        canPlace = false; // 不允许标签越过下一个圆点
+                    }
+                }
+                
+                if (canPlace) {
+                    // 计算代价：与圆点位置的距离
+                    const cost = Math.abs(j - firstPointGridY);
+                    dp[0][j] = cost;
+                }
+            }
+        }
+        
+        // 填充dp表
+        for (let i = 1; i < n; i++) {
+            const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+            
+            for (let j = 0; j < gridCount; j++) {
+                // 检查当前位置是否可行
+                if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                    // 检查标签是否会与其他标签重叠
+                    let canPlace = true;
+                    for (let k = 0; k < LABEL_HEIGHT; k++) {
+                        if (j + k < gridCount && occupied[j + k]) {
+                            canPlace = false;
+                            break;
+                        }
+                    }
+                    
+                    // 确保当前标签不超过下一个圆点位置（如果有下一个圆点）
+                    if (i < n - 1) {
+                        const nextPointGridY = Math.floor(points[i+1].y / GRID_SIZE);
+                        if (j > nextPointGridY) {
+                            canPlace = false; // 不允许标签越过下一个圆点
+                        }
+                    }
+
+                    // 确保当前标签至少超过上一个圆点位置
+                    if (i > 0) {
+                        const prevPointGridY = Math.floor(points[i-1].y / GRID_SIZE);
+                        if (j < prevPointGridY) {
+                            canPlace = false; // 不允许标签越过上一个圆点
+                        }
+                    }
+                    
+                    if (canPlace) {
+                        // 根据上一个点的标签位置计算当前最小代价
+                        for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                            if (dp[i-1][k] !== Infinity) {
+
+                                // 当前标签的代价
+                                const curCost = Math.abs(j - pointGridY);
+                                const totalCost = dp[i-1][k] + curCost;
+                                
+                                if (totalCost < dp[i][j]) {
+                                    dp[i][j] = totalCost;
+                                    prev[i][j] = k; // 记录前驱
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        
+        // 找出最后一个点的最优放置位置
+        let minCost = Infinity;
+        let bestPos = -1;
+        
+        for (let j = 0; j < gridCount; j++) {
+            if (dp[n-1][j] < minCost) {
+                minCost = dp[n-1][j];
+                bestPos = j;
+            }
+        }
+        
+        // 回溯构建结果
+        const labelPositions = [];
+        if (bestPos !== -1) {
+            // 从后向前回溯
+            let pos = bestPos;
+            
+            for (let i = n - 1; i >= 0; i--) {
+                labelPositions.unshift({
+                    point: points[i],
+                    labelY: pos * GRID_SIZE
+                });
+                
+                pos = prev[i][pos];
+            }
+
+        } else {
+            // 无可行解，退化为简单方案
+            let lastY = 0;
+            for (let i = 0; i < n; i++) {
+                const point = points[i];
+                
+                const labelY = Math.max(point.y, lastY + 45);
+                
+                labelPositions.push({
+                    point: point,
+                    labelY: labelY
+                });
+                
+                lastY = labelY;
+            }
+        }
+        
+        return labelPositions;
+    }
+
+    // 分别对起点和终点应用动态规划
+    // 获取Y轴刻度位置用于避开
+    const endLabelPositions = placeLabelsDP(endPoints, []); // 终点不需要避开Y轴刻度
+
+    // 为每个组创建一个图像图标
+    endLabelPositions.forEach(placement => {
+        const {point, labelY} = placement;
+        
+        // 如果是最高组，特殊处理其标签位置
+        if (point.group === highestEndGroup) {
+            // 创建10px间隔的网格系统
+            const gridSize = 10;
+            const gridWidth = Math.ceil(innerWidth / gridSize);
+            const gridHeight = Math.ceil(innerHeight / gridSize);
+            const grid = Array(gridHeight).fill().map(() => Array(gridWidth).fill(false));
+            
+            // 标记所有折线占用的网格
+            groups.forEach(group => {
+                if (group !== highestEndGroup) { // 不标记最高组自己的折线
+                    const groupData = chartData.filter(d => d[groupField] === group);
+                    
+                    // 标记折线路径
+                    for (let i = 0; i < groupData.length - 1; i++) {
+                        const current = groupData[i];
+                        const next = groupData[i + 1];
+                        
+                        const x1 = xScale(chartUtils.format.parseDate(current[xField]));
+                        const y1 = yScale(current[yField]);
+                        const x2 = xScale(chartUtils.format.parseDate(next[xField]));
+                        const y2 = yScale(next[yField]);
+                        
+                        // 使用线性插值标记路径上的点
+                        const steps = Math.max(
+                            Math.ceil(Math.abs(x2 - x1) / gridSize),
+                            Math.ceil(Math.abs(y2 - y1) / gridSize)
+                        );
+                        
+                        for (let step = 0; step <= steps; step++) {
+                            const ratio = step / steps;
+                            const x = x1 + (x2 - x1) * ratio;
+                            const y = y1 + (y2 - y1) * ratio;
+                            
+                            // 标记周围的网格为占用
+                            const gridX = Math.floor(x / gridSize);
+                            const gridY = Math.floor(y / gridSize);
+                            grid[gridY][gridX] = true;
+                            
+                            // // 添加保护区域
+                            // for (let dy = -2; dy <= 2; dy++) {
+                            //     for (let dx = -2; dx <= 2; dx++) {
+                            //         const nx = gridX + dx;
+                            //         const ny = gridY + dy;
+                            //         if (nx >= 0 && nx < gridWidth && ny >= 0 && ny < gridHeight) {
+                            //             grid[ny][nx] = true; // 标记为占用
+                            //         }
+                            //     }
+                            // }
+                        }
+                    }
+                }
+            });
+
+            // 标记最高组折线上方的区域为占用
+            const highestGroupData = chartData.filter(d => d[groupField] === highestEndGroup);
+            for (let i = 0; i < highestGroupData.length - 1; i++) {
+                const current = highestGroupData[i];
+                const next = highestGroupData[i + 1];
+                
+                const x1 = xScale(chartUtils.format.parseDate(current[xField]));
+                const y1 = yScale(current[yField]);
+                const x2 = xScale(chartUtils.format.parseDate(next[xField]));
+                const y2 = yScale(next[yField]);
+                
+                // 使用线性插值标记路径上的点
+                const steps = Math.max(
+                    Math.ceil(Math.abs(x2 - x1) / gridSize),
+                    Math.ceil(Math.abs(y2 - y1) / gridSize)
+                );
+                
+                for (let step = 0; step <= steps; step++) {
+                    const ratio = step / steps;
+                    const x = x1 + (x2 - x1) * ratio;
+                    const y = y1 + (y2 - y1) * ratio;
+                    
+                    // 标记当前点上方的所有网格为占用
+                    const gridX = Math.floor(x / gridSize);
+                    const minY = 0;
+                    const maxY = Math.ceil(y / gridSize);
+                    
+                    for (let gridY = minY; gridY <= maxY - 2; gridY++) {
+                        if (gridX >= 0 && gridX < gridWidth && gridY >= 0 && gridY < gridHeight) {
+                            grid[gridY][gridX] = true;
+                        }
+                    }
+                }
+            }
+            
+            // 找到最高组折线下方的空位
+
+            // 计算标签尺寸（网格单位）
+            const labelWidth = 4 + Math.ceil(chartUtils.text.measure(null, point.group, { fontSize: 22 }).width / gridSize); // 根据实际文本宽度计算网格单位
+            const labelHeight = 4; // 估计标签高度
+            
+            // 找到合适的位置
+            let bestX = -1, bestY = -1;
+            let bestScore = -Infinity;
+
+            
+            // 在折线下方搜索空位
+            for (let gridY = 0; gridY < gridHeight - labelHeight; gridY++) {
+                for (let gridX = 0; gridX < gridWidth - labelWidth; gridX++) {
+                    // 检查这个区域是否有足够的空间
+                    let hasSpace = true;
+                    for (let dy = 0; dy < labelHeight; dy++) {
+                        for (let dx = 0; dx < labelWidth; dx++) {
+                            if (grid[gridY + dy][gridX + dx]) {
+                                hasSpace = false;
+                                break;
+                            }
+                        }
+                        if (!hasSpace) break;
+                    }
+                    
+                    if (hasSpace) {                 
+                        // 优先选择靠上且靠中间的位置
+                        const centerX = gridWidth / 2;
+                        const distanceFromCenter = Math.abs(gridX + labelWidth / 2 - centerX);
+                        const score = -gridY * 0.01 - 2 * distanceFromCenter; // 越靠上gridY越小,越靠近中间distanceFromCenter越小,分数越高
+                        
+                        if (score > bestScore) {
+                            bestScore = score;
+                            bestX = gridX;
+                            bestY = gridY;
+                        }
+                    }
+                }
+            }
+            
+            // 可视化网格占用情况
+            const debugGrid = false; // 设置为true开启可视化，false关闭
+            
+            if (debugGrid) {
+                // 创建一个单独的组用于网格可视化
+                const gridDebugGroup = g.append("g")
+                    .attr("class", "grid-debug");
+                
+                // 绘制所有网格单元
+                for (let gridY = 0; gridY < gridHeight; gridY++) {
+                    for (let gridX = 0; gridX < gridWidth; gridX++) {
+                        // 计算实际坐标
+                        const x = gridX * gridSize;
+                        const y = gridY * gridSize;
+                        
+                        // 绘制网格单元
+                        gridDebugGroup.append("rect")
+                            .attr("x", x)
+                            .attr("y", y)
+                            .attr("width", gridSize)
+                            .attr("height", gridSize)
+                            .attr("fill", grid[gridY][gridX] ? "rgba(255, 0, 0, 0.2)" : "rgba(0, 255, 0, 0.05)")
+                            .attr("stroke", "rgba(255, 255, 255, 0.1)")
+                            .attr("stroke-width", 0.5);
+                    }
+                }
+                
+                // 标记最佳位置
+                if (bestX >= 0 && bestY >= 0) {
+                    gridDebugGroup.append("rect")
+                        .attr("x", bestX * gridSize)
+                        .attr("y", bestY * gridSize)
+                        .attr("width", gridSize)
+                        .attr("height", gridSize)
+                        .attr("fill", "rgba(0, 0, 255, 0.5)")
+                        .attr("stroke", "white")
+                        .attr("stroke-width", 1);
+                }
+                
+            }
+            
+            // 如果找到了合适的位置
+            if (bestX >= 0 && bestY >= 0) {
+                // 创建标签组 - 只用于图标和组名
+                const iconGroup = g.append("g")
+                    .attr("transform", `translate(${bestX * gridSize}, ${bestY * gridSize})`);
+                
+                // 添加图像图标
+                if (images && images.field[point.group]) {
+                    iconGroup.append("image")
+                        .attr("x", 0)
+                        .attr("y", 0)
+                        .attr("width", 40)
+                        .attr("height", 40)
+                        .attr("xlink:href", images.field[point.group]);
+                } else {
+                    iconGroup.append("circle")
+                        .attr("cx", 10)
+                        .attr("cy", 10)
+                        .attr("r", 5)
+                        .attr("fill", point.color);
+                }
+                
+                // 添加组名
+                iconGroup.append("text")
+                    .attr("x", 40)
+                    .attr("y", 25)
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", typography.label.font_family)
+                    .style("font-size", "22px")
+                    .style("font-weight", "bold")
+                    .style("fill", "#f7f7fc")
+                    .text(point.group);
+                
+                // 创建常规标签组 - 只用于标签值
+                // 但位置在右侧，与其他标签一致
+                const valueGroup = g.append("g")
+                    .attr("transform", `translate(${point.x + 15}, ${labelY})`);
+                
+                // 只添加标签值
+                valueGroup.append("text")
+                    .attr("x", 0)
+                    .attr("y", -10)
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", typography.label.font_family)
+                    .style("font-size", "24px")
+                    .style("font-weight", "bold")
+                    .style("fill", point.color)
+                    .text(point.value);
+                
+                // 跳过常规标签创建
+                return;
+            }
+        }
+        
+        // 常规标签创建（非最高组或未找到合适位置的最高组）
+        // 创建标签组
+        const labelGroup = g.append("g")
+            .attr("transform", `translate(${point.x + 15}, ${labelY})`);
+        
+        // 第一行：图像图标 + 组名（较小字体）
+        // 添加图像图标
+        if (images && images.field[point.group]) {
+            // 使用图像作为图标
+            labelGroup.append("image")
+                .attr("x", -10) // 调整位置，使图标居中
+                .attr("y", -10) // 调整位置，使图标居中
+                .attr("width", 20)
+                .attr("height", 20)
+                .attr("xlink:href", images.field[point.group]);
+        } else {
+            // 如果没有图像，使用彩色圆点作为备选
+            labelGroup.append("circle")
+                .attr("cx", 0)
+                .attr("cy", 0)
+                .attr("r", 3)
+                .attr("fill", point.color);
+        }
+        
+        // 添加组名（较小字体）
+        labelGroup.append("text")
+            .attr("x", 15) // 增加与图标的距离
+            .attr("y", 0)
+            .attr("dominant-baseline", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", "14px") // 较小字体
+            .style("font-weight", "normal") // 普通粗细
+            .style("fill", point.color) // 使用组的颜色
+            .text(point.group);
+        
+        // 第二行：标签值（较大字体）
+        labelGroup.append("text")
+            .attr("x", 0)
+            .attr("y", 14) // 下移到第二行
+            .attr("dominant-baseline", "hanging")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", "18px") // 较大字体
+            .style("font-weight", "bold") // 加粗
+            .style("fill", point.color) // 使用组的颜色
+            .text(point.value);
+    });
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_08.js

@@ -0,0 +1,343 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_08",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], [0, "inf"], [2, 7]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 设置尺寸和边距 - 移除左侧边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 60, bottom: 60, left: 0 }; // 左侧边距设为0
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const yColumn = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField });
+    const yLabel = yColumn.rawLabel || yField;
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // const yMin = Math.min(0, d3.min(chartData, d => +d[yField]) * 1.1);
+    // const yMax = d3.max(chartData, d => +d[yField]) * 1.1;
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    const yRange = yMax - yMin;
+    const yMinScale = yMin - yRange * 0.2;
+    const yMaxScale = yMax + yRange * 0.2;
+    const yScale = d3.scaleLinear()
+        .domain([yMinScale, yMaxScale])
+        .range([innerHeight, 0]);
+    
+    // 使用数据JSON中的颜色
+    // 获取颜色
+    const getColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+    };
+    
+    // 创建线条生成器 - 改为折线
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear); // 使用折线而不是曲线
+    
+    // 按组分组数据
+    const groupedData = groups.map(group => {
+        return {
+            group: group,
+            values: chartData.filter(d => d[groupField] === group),
+            color: getColor(group) // 获取该组的颜色
+        };
+    });
+    
+    // 绘制线条
+    groupedData.forEach(gd => {
+        // 添加阴影效果
+        // 首先创建一个滤镜
+        const filterId = `shadow-${gd.group.replace(/\s+/g, '-')}`;
+        const filter = svg.append("defs")
+            .append("filter")
+            .attr("id", filterId)
+            .attr("x", "-20%")
+            .attr("y", "-20%")
+            .attr("width", "140%")
+            .attr("height", "140%");
+        
+        // 添加高斯模糊
+        filter.append("feGaussianBlur")
+            .attr("in", "SourceAlpha")
+            .attr("stdDeviation", 1)
+            .attr("result", "blur");
+        
+        // 添加偏移
+        filter.append("feOffset")
+            .attr("in", "blur")
+            .attr("dx", 0)
+            .attr("dy", 1)
+            .attr("result", "offsetBlur");
+        
+        // 添加颜色 - 改为黑色
+        filter.append("feFlood")
+            .attr("flood-color", "black") // 使用黑色而不是线条颜色
+            .attr("flood-opacity", 0.3)
+            .attr("result", "coloredBlur");
+        
+        // 将颜色应用到偏移的模糊上
+        filter.append("feComposite")
+            .attr("in", "coloredBlur")
+            .attr("in2", "offsetBlur")
+            .attr("operator", "in")
+            .attr("result", "coloredBlurOffset");
+        
+        // 合并原始图形和阴影
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode")
+            .attr("in", "coloredBlurOffset");
+        feMerge.append("feMergeNode")
+            .attr("in", "SourceGraphic");
+        
+        // 绘制线条 - 添加阴影
+        g.append("path")
+            .datum(gd.values)
+            .attr("fill", "none")
+            .attr("stroke", gd.color)
+            .attr("stroke-width", 3)
+            .attr("d", line)
+            .attr("filter", `url(#${filterId})`);
+        
+        // 获取最后一个数据点
+        const lastPoint = gd.values[gd.values.length - 1];
+        const x = xScale(chartUtils.format.parseDate(lastPoint[xField]));
+        const y = yScale(+lastPoint[yField]);
+
+        const valueText = chartUtils.format.fixed(+lastPoint[yField]).text;
+        const valueTextWidth = chartUtils.text.measure(null, valueText, { fontSize: "12px" }).width;
+        
+        // 添加圆角矩形作为结束标记
+        const rectWidth = valueTextWidth + 10;
+        const rectHeight = 12;
+        const rectX = x - 6;
+        const rectY = y - rectHeight / 2;
+        
+        // 添加圆角矩形背景
+        g.append("rect")
+            .attr("x", rectX)
+            .attr("y", rectY)
+            .attr("width", rectWidth)
+            .attr("height", rectHeight)
+            .attr("rx", 6)
+            .attr("ry", 6)
+            .attr("fill", gd.color); // 使用获取的颜色
+        
+        // 添加数值文本（在矩形内）
+        g.append("text")
+            .attr("x", rectX + rectWidth / 2)
+            .attr("y", rectY + rectHeight / 2 + 1)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "12px")
+            .style("font-weight", "bold")
+            .style("fill", "white")
+            .text(chartUtils.format.fixed(+lastPoint[yField]).text);
+
+        // 添加国家名称
+        g.append("text")
+            .attr("x", rectX + rectWidth + 10)
+            .attr("y", rectY + rectHeight / 2)
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "14px")
+            .style("font-weight", "bold")
+            .style("fill", gd.color)
+            .text(gd.group);
+    });
+    
+    // 找到结束时最高的数据点
+    let highestEndGroup = null;
+    let highestEndValue = -Infinity;
+    let highestEndX = 0;
+    let highestEndY = 0;
+    let highestEndRect = null;
+    
+    groupedData.forEach(gd => {
+        const lastPoint = gd.values[gd.values.length - 1];
+        const value = lastPoint[yField];
+        
+        if (value > highestEndValue) {
+            highestEndValue = value;
+            highestEndGroup = gd.group;
+            highestEndX = xScale(chartUtils.format.parseDate(lastPoint[xField]));
+            highestEndY = yScale(value);
+            
+            // 保存矩形位置信息，用于后续添加标签
+            highestEndRect = {
+                x: highestEndX - 6,
+                y: highestEndY - 6,
+                width: 40,
+                height: 12
+            };
+        }
+    });
+    
+    // 如果找到了最高点，添加Y轴encoding名称和指向三角形
+    if (highestEndRect) {
+        // 获取Y轴字段的显示名称
+        const yFieldName = chartUtils.schema.channelByKey(jsonData, yField, { fallbackKey: yField }).displayName || yField;
+        
+        // 判断最高点的趋势
+        const highestGroup = groupedData.find(gd => gd.group === highestEndGroup);
+        const lastIndex = highestGroup.values.length - 1;
+        const lastValue = highestGroup.values[lastIndex][yField];
+        const prevValue = highestGroup.values[lastIndex - 1][yField];
+        const isIncreasing = lastValue > prevValue;
+        
+        // 根据趋势决定标签位置
+        const labelBaseY = highestEndRect.y - 20
+        
+        // Y轴encoding名称的位置
+        const encodingLabelY = labelBaseY;
+        
+        // 添加Y轴encoding名称
+        g.append("text")
+            .attr("x", highestEndRect.x + highestEndRect.width / 2)
+            .attr("y", encodingLabelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "12px")
+            .style("font-weight", "bold")
+            .style("fill", "white")
+            .text(yLabel);
+        
+        // 添加指向三角形
+        const triangleSize = 6;
+        const triangleX = highestEndRect.x + highestEndRect.width / 2;
+        const triangleY = encodingLabelY + 15;
+        
+        g.append("path")
+            .attr("d", `M${triangleX},${triangleY} L${triangleX + triangleSize},${triangleY - triangleSize} L${triangleX - triangleSize},${triangleY - triangleSize} Z`)
+            .attr("fill", "white");
+    }
+    
+    // 添加X轴 - 放在中间位置
+    const xAxisY = innerHeight / 2; // 将X轴放在中间
+    
+    // 添加X轴线 - 使用点点虚线，延伸到整个SVG两侧
+    g.append("line")
+        .attr("x1", -margin.left) // 延伸到左侧边缘
+        .attr("y1", xAxisY)
+        .attr("x2", innerWidth + margin.right) // 延伸到右侧边缘
+        .attr("y2", xAxisY)
+        .attr("stroke", "#666")
+        .attr("stroke-width", 1)
+        .attr("opacity", 0.5)
+        .attr("stroke-dasharray", "1,1");
+    
+    // 添加刻度和标签
+    xTicks.forEach(tick => {
+        const x = xScale(tick);
+        
+        // 添加圆角矩形背景
+        g.append("rect")
+            .attr("x", x - 15)
+            .attr("y", xAxisY - 6)
+            .attr("width", 30)
+            .attr("height", 12)
+            .attr("rx", 6)
+            .attr("ry", 6)
+            .attr("fill", "#fde7e5");
+        
+        // 添加年份文本
+        g.append("text")
+            .attr("x", x)
+            .attr("y", xAxisY + 4)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "11px")
+            .style("font-weight", "bold")
+            .style("fill", "#333")
+            .text(xFormat(tick));
+    });
+    
+    // 添加水平网格线 - 实线，延伸到整个SVG两侧
+    g.selectAll("grid-line")
+        .data(yScale.ticks(5))
+        .enter()
+        .append("line")
+        .attr("x1", -margin.left) // 延伸到左侧边缘
+        .attr("y1", d => yScale(d))
+        .attr("x2", innerWidth + margin.right) // 延伸到右侧边缘
+        .attr("y2", d => yScale(d))
+        .attr("stroke", "rgba(255, 255, 255, 0.2)")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "none")
+        .attr("class", "background"); // 使用实线
+    
+    // 添加Y轴刻度值 - 调整位置
+    g.selectAll(".y-tick")
+        .data(yScale.ticks(5))
+        .enter()
+        .append("text")
+        .attr("x", 10) // 正值，使文本位于图表内部
+        .attr("y", d => yScale(d) + 15)
+        .attr("text-anchor", "start") // 改为左对齐
+        .attr("dominant-baseline", "middle")
+        .style("font-family", "Arial")
+        .style("font-size", "12px")
+        .style("fill", "white")
+        .text(d => d);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_09.js

@@ -0,0 +1,383 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_09",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 10]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "comparison"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 20, right: 30, bottom: 40, left: 50 };
+    
+    // 创建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;
+    
+    // X轴文本的高度
+    const xAxisTextHeight = 30;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 使用数据的实际范围
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 为了美观，稍微扩展Y轴范围
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.min(0, yMin - yPadding);
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 创建颜色比例尺
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+    
+    // 获取实际的Y轴刻度 - 减少刻度数量
+    const yTicks = yScale.ticks(5); // 保持5个刻度
+    const maxYTick = yTicks[yTicks.length - 1]; // 最大的Y轴刻度值
+    
+    // 计算最大Y刻度的位置
+    const maxYTickPosition = yScale(maxYTick);
+    
+    // 添加条纹背景 - 使用更合适的时间间隔
+    
+    // 为每个X轴刻度创建条纹背景，使条纹以刻度为中心
+    for (let i = 0; i < xTicks.length - 1; i++) {
+        // 获取相邻两个刻度
+        const currentTick = xTicks[i];
+        const nextTick = xTicks[i + 1];
+        
+        // 计算当前刻度和下一个刻度的位置
+        const x1 = xScale(currentTick);
+        const x2 = xScale(nextTick);
+        
+        // 每隔一个刻度添加浅色背景
+        if (i % 2 === 0) {
+            g.append("rect")
+                .attr("x", x1)
+                .attr("y", maxYTickPosition) // 从最大Y刻度开始
+                .attr("width", x2 - x1)
+                .attr("height", chartHeight - maxYTickPosition + xAxisTextHeight) // 延伸到X轴文本下方
+                .attr("fill", "#ececec")
+                .attr("class", "background")
+                .attr("opacity", 0.8);
+        }
+    }
+    
+    
+    // 将条纹背景移到最底层
+    g.selectAll("rect").lower();
+    
+    // 添加图标水印（如果有）
+    if (images && images.field) {
+        // 创建一个滤镜使图像黑白化并变淡
+        const defs = svg.append("defs");
+        
+        // 添加淡灰色滤镜 - 修改参数使颜色变淡
+        const lightGrayFilter = defs.append("filter")
+            .attr("id", "lightgray");
+        
+        // 先转为灰度
+        lightGrayFilter.append("feColorMatrix")
+            .attr("type", "matrix")
+            .attr("values", "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0");
+        
+        // 再提亮颜色 - 使用亮度组件
+        lightGrayFilter.append("feComponentTransfer")
+            .append("feFuncR")
+            .attr("type", "linear")
+            .attr("slope", "0.6")
+            .attr("intercept", "0.4");
+        
+        lightGrayFilter.append("feComponentTransfer")
+            .append("feFuncG")
+            .attr("type", "linear")
+            .attr("slope", "0.6")
+            .attr("intercept", "0.4");
+        
+        lightGrayFilter.append("feComponentTransfer")
+            .append("feFuncB")
+            .attr("type", "linear")
+            .attr("slope", "0.6")
+            .attr("intercept", "0.4");
+        
+        // 计算每个组的线条中心位置
+        const groupCenters = new Map();
+        
+        // 按组分组数据
+        const groupedData = d3.group(chartData, d => d[groupField]);
+        
+        groupedData.forEach((values, group) => {
+            // 确保数据按日期排序
+            values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+            
+            // 计算该组线条的中心点
+            const xPoints = values.map(d => xScale(chartUtils.format.parseDate(d[xField])));
+            const yPoints = values.map(d => yScale(+d[yField]));
+            
+            // 找到线条的中间点
+            const midIndex = Math.floor(values.length / 2);
+            const centerX = xPoints[midIndex];
+            const centerY = yPoints[midIndex];
+            
+            // 存储中心点
+            groupCenters.set(group, { x: centerX, y: centerY });
+        });
+        
+        // 添加组图标水印 - 均匀分布在X轴上，Y位置对应X位置处的线条值
+        groups.forEach((group, groupIndex) => {
+            if (images.field[group]) {
+                const values = groupedData.get(group);
+                if (!values || values.length === 0) return;
+                
+                // 确保数据按日期排序
+                values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+                
+                const iconSize = 120;
+                
+                // 计算X轴位置 - 将X轴均匀分成组数量的区域，但避开边缘
+                // 使用更窄的区域，避开起止点标签
+                const usableWidth = chartWidth * 0.7; // 使用70%的图表宽度
+                const margin = (chartWidth - usableWidth) / 2; // 两侧边距
+                
+                const sectionWidth = usableWidth / groups.length;
+                const xPos = margin + sectionWidth * (groupIndex + 0.5); // 区域中心点
+                
+                // 找到最接近xPos的数据点
+                // 首先将xPos转换回日期域
+                const xDate = xScale.invert(xPos);
+                
+                // 找到最接近该日期的数据点
+                let closestPoint = values[0];
+                let minDistance = Math.abs(chartUtils.format.parseDate(closestPoint[xField]) - xDate);
+                
+                for (let i = 1; i < values.length; i++) {
+                    const distance = Math.abs(chartUtils.format.parseDate(values[i][xField]) - xDate);
+                    if (distance < minDistance) {
+                        minDistance = distance;
+                        closestPoint = values[i];
+                    }
+                }
+                
+                // 使用最接近点的Y值
+                const yPos = yScale(closestPoint[yField]);
+                
+                const watermark = g.append("image")
+                    .attr("x", xPos - iconSize / 2) // 水印中心与区域中心对齐
+                    .attr("y", yPos - iconSize / 2) // 使用对应X位置处的Y值
+                    .attr("width", iconSize)
+                    .attr("height", iconSize)
+                    .attr("href", images.field[group])
+                    .attr("opacity", 1) // 保持完全不透明
+                    .attr("preserveAspectRatio", "xMidYMid meet")
+                    .attr("filter", "url(#lightgray)"); // 使用淡灰色滤镜
+                
+                // 确保水印在条纹背景上方，线条下方
+                watermark.lower();
+                g.selectAll("rect").lower();
+            }
+        });
+    }
+    
+    // 添加水平网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("class", "background")
+            .attr("stroke", "#e0e0e0")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2,2");
+    });
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+    
+    // 定义线条粗细
+    const lineWidth = 4;
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear);
+    
+    // 绘制每个组的线条
+    groupedData.forEach((values, group) => {
+        // 确保数据按日期排序
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        const color = colorScale(group);
+        
+        // 绘制线条
+        g.append("path")
+            .datum(values)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", lineWidth)
+            .attr("d", line);
+        
+        // 添加数据点 - 根据是否为起止点使用不同样式
+        values.forEach((d, i) => {
+            const isEndpoint = i === 0 || i === values.length - 1;
+            
+            if (isEndpoint) {
+                // 起止点：白色填充，带有颜色描边
+                g.append("circle")
+                    .attr("cx", xScale(chartUtils.format.parseDate(d[xField])))
+                    .attr("cy", yScale(+d[yField]))
+                    .attr("r", lineWidth * 1.2)
+                    .attr("fill", "#fff")
+                    .attr("stroke", color)
+                    .attr("stroke-width", lineWidth);
+            } else {
+                // 中间点：实心颜色填充，无描边
+                g.append("circle")
+                    .attr("cx", xScale(chartUtils.format.parseDate(d[xField])))
+                    .attr("cy", yScale(+d[yField]))
+                    .attr("r", lineWidth)
+                    .attr("fill", color)
+                    .attr("stroke", "none");
+            }
+        });
+        
+        // 添加起点和终点标注 - 简化为直接文本
+        const firstPoint = values[0];
+        const lastPoint = values[values.length - 1];
+        
+        // 添加起点标注
+        addDataLabel(firstPoint, true);
+        
+        // 添加终点标注
+        addDataLabel(lastPoint, false);
+    });
+    
+    // 添加X轴文本 - 放置在条纹背景的中间
+    for (let i = 0; i < xTicks.length - 1; i++) {
+        // 获取相邻两个刻度
+        const currentTick = xTicks[i];
+        const nextTick = xTicks[i + 1];
+        
+        // 计算当前刻度和下一个刻度的位置
+        const x1 = xScale(currentTick);
+        const x2 = xScale(nextTick);
+        
+        // 计算中点位置
+        const midX = (x1 + x2) / 2;
+        
+        g.append("text")
+            .attr("x", midX)
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "12px")
+            .text(xFormat(currentTick));
+    }
+    
+    
+    // 添加Y轴文本
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -20)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "12px")
+            .text(chartUtils.format.fixed(tick).text);
+    });
+    
+    // 添加图例 - 整体居中，放在最大Y轴刻度上方
+    const legendGroup = g.append("g");
+    
+    const legendSize = chartUtils.legend.draw(legendGroup, groups, colors, {
+        x: 0,
+        y: 0,
+        fontSize: 14,
+        fontWeight: "bold",
+        align: "left",
+        maxWidth: chartWidth,
+        shape: "circle",
+    });
+    
+    // 居中legend
+    legendGroup.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${maxYTickPosition - 50 - legendSize.height/2})`);
+    
+    // 添加数据标注函数 - 文本放在线条上方，不加粗
+    function addDataLabel(point, isStart) {
+        const x = xScale(chartUtils.format.parseDate(point[xField]));
+        const y = yScale(+point[yField]);
+        
+        // 添加文本 - 放在数据点上方，使用黑色
+        g.append("text")
+            .attr("x", x + (isStart ? -10 : 10))
+            .attr("y", y) // 放在数据点上方
+            .attr("text-anchor", isStart ? "end" : "start")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#000") // 黑色文本
+            .attr("font-weight", "normal") // 移除加粗
+            .style("font-size", "12px")
+            .text(chartUtils.format.fixed(+point[yField], 2).text);
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_10.js

@@ -0,0 +1,563 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_10",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], ["-inf", "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 60, right: 30, bottom: 60, left: 60 };
+    
+    // 创建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 groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 使用数据的实际范围
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 为了美观，稍微扩展Y轴范围
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.min(0, yMin - yPadding);
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 创建颜色比例尺 - 使用提供的颜色或默认颜色
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "category10" }).value;
+    
+    // 获取实际的Y轴刻度
+    const yTicks = yScale.ticks(5);
+    
+    // 添加水平网格线 - 包括刻度之间的额外网格线
+    // 首先添加主要刻度的网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#dddddd")
+            .attr("stroke-width", 1)
+            .attr("class", "background");
+    });
+    
+    // 添加刻度之间的额外网格线
+    if (yTicks.length > 1) {
+        for (let i = 0; i < yTicks.length - 1; i++) {
+            const currentTick = yTicks[i];
+            const nextTick = yTicks[i + 1];
+            const midValue = (currentTick + nextTick) / 2;
+            
+            g.append("line")
+                .attr("x1", 0)
+                .attr("y1", yScale(midValue))
+                .attr("x2", chartWidth)
+                .attr("y2", yScale(midValue))
+                .attr("stroke", "#dddddd")
+                .attr("stroke-width", 1)
+                .attr("class", "background");
+        }
+    }
+    
+    // 添加Y轴刻度文本 - 保留0位小数，不带百分号
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(chartUtils.format.integer(tick).text); // 四舍五入到整数，不带百分号
+    });
+    
+    // 添加X轴刻度文本
+    xTicks.forEach(tick => {
+        
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    // 添加X轴线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#aaa")
+        .attr("stroke-width", 1);
+    
+    // 定义线条粗细
+    const lineWidth = 4;
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear); // 改为折线
+    
+    // 收集需要标注的数据点 - 按起点/终点/中点分类
+    const startPoints = [];
+    const middlePoints = [];
+    const endPoints = [];
+    
+    groupedData.forEach((values, group) => {
+        // 确保数据按日期排序
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        
+        // 绘制线条
+        g.append("path")
+            .datum(values)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", lineWidth)
+            .attr("d", line);
+        
+        // 找出中间的一个X位置
+        const middleIndex = Math.floor(values.length / 2);
+        
+        // 收集需要标注的点
+        values.forEach((d, i) => {
+            if (i === 0) {
+                // 起点
+                startPoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            } else if (i === values.length - 1) {
+                // 终点
+                endPoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            } else if (i === middleIndex) {
+                // 中点
+                middlePoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            }
+        });
+    });
+    
+    // 分别对起点、中点和终点应用动态规划 - 添加g参数
+    const startLabelPositions = placeLabelsDP(startPoints, yTicks.map(tick => yScale(tick)), "起点", chartHeight, chartWidth, g);
+    const middleLabelPositions = placeLabelsDP(middlePoints, yTicks.map(tick => yScale(tick)), "中点", chartHeight, chartWidth, g);
+    const endLabelPositions = placeLabelsDP(endPoints, yTicks.map(tick => yScale(tick)), "终点", chartHeight, chartWidth, g);
+    
+    // 绘制标签函数 - 保持multiple_line_graph_10的样式
+    function drawLabels(labelPositions) {
+        labelPositions.forEach(placement => {
+            const point = placement.point;
+            const labelY = placement.labelY;
+            
+            // 计算标签文本和宽度
+            const labelText = chartUtils.format.autoText(point.value);
+            const labelWidth = chartUtils.text.measure(null, labelText, { fontSize: 14, fontWeight: "bold" }).width + 10;
+            const labelHeight = 24;
+            
+            // 添加圆角矩形背景
+            g.append("rect")
+                .attr("x", point.x - labelWidth / 2)
+                .attr("y", labelY + labelHeight / 2)
+                .attr("width", labelWidth)
+                .attr("height", labelHeight)
+                .attr("rx", 5)
+                .attr("ry", 5)
+                .attr("fill", point.color);
+            
+            // 添加文本 - 白色粗体
+            g.append("text")
+                .attr("x", point.x)
+                .attr("y", labelY + labelHeight)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#fff")
+                .attr("font-weight", "bold")
+                .style("font-size", "14px")
+                .text(labelText);
+        });
+    }
+    
+    // 绘制所有标签
+    drawLabels(startLabelPositions);
+    drawLabels(middleLabelPositions);
+    drawLabels(endLabelPositions);
+    
+    const legendSize = chartUtils.legend.draw(g, groups, {
+        fontSize: 14,
+        fontWeight: "bold",
+        maxWidth: chartWidth,
+        markerShape: "line",
+        markerSize: 10,
+        strokeWidth: 4,
+        colorScale,
+    });
+
+    const maxYTickPosition = yScale(yTicks[yTicks.length - 1]);
+    
+    legendSize.group.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${maxYTickPosition - 50 - legendSize.height/2})`);
+    
+    return svg.node();
+}
+
+// 动态规划标签放置算法 - 添加g参数
+function placeLabelsDP(points, avoidYPositions = [], debugName = "", chartHeight, chartWidth, g) {
+    // 每个格点的高度（像素）
+    const GRID_SIZE = 3;
+    // 圆点周围的保护区域（格点数）
+    const PROTECTION_RADIUS = 3;
+    // 标签高度（格点数）
+    const LABEL_HEIGHT = 10; 
+    
+    // 离散化Y坐标，创建格点系统
+    const minY = 0;
+    const maxY = chartHeight; // 使用传入的chartHeight
+    const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+    
+    // 按照Y坐标排序点
+    points.sort((a, b) => a.y - b.y);
+    
+    // 创建格点占用标记
+    const occupied = new Array(gridCount).fill(false);
+    // 存储占用原因，用于可视化
+    const occupiedReason = new Array(gridCount).fill("");
+    
+    // 标记圆点周围的保护区域为已占用
+    points.forEach((point, idx) => {
+        const gridY = Math.floor(point.y / GRID_SIZE) - 3;
+        for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+            occupied[i] = true;
+            occupiedReason[i] = `数据点${idx + 1}保护区`;
+        }
+    });
+    
+    
+    // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+    const n = points.length;
+    const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+    const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+    
+    // 初始条件：第一个点的标签放置
+    const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+    
+    // 尝试将第一个点的标签放在可行的位置
+    for (let j = 0; j < gridCount; j++) {
+        // 检查是否可行（不在保护区域内且有足够空间放置标签）
+        if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+            // 检查标签是否会与其他标签重叠
+            let canPlace = true;
+            for (let k = 0; k < LABEL_HEIGHT; k++) {
+                if (j + k < gridCount && occupied[j + k]) {
+                    canPlace = false;
+                    break;
+                }
+            }
+            
+            if (canPlace) {
+                // 计算代价：与圆点位置的距离
+                const cost = Math.abs(j - firstPointGridY);
+                dp[0][j] = cost;
+            }
+        }
+    }
+    
+    // 填充dp表
+    for (let i = 1; i < n; i++) {
+        const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+        
+        for (let j = 0; j < gridCount; j++) {
+            // 检查当前位置是否可行
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                if (canPlace) {
+                    // 根据上一个点的标签位置计算当前最小代价
+                    for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                        if (dp[i-1][k] !== Infinity) {
+
+                            // 当前标签的代价
+                            const curCost = Math.abs(j - pointGridY);
+                            const totalCost = dp[i-1][k] + curCost;
+                            
+                            if (totalCost < dp[i][j]) {
+                                dp[i][j] = totalCost;
+                                prev[i][j] = k; // 记录前驱
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // 找出最后一个点的最优放置位置
+    let minCost = Infinity;
+    let bestPos = -1;
+    
+    for (let j = 0; j < gridCount; j++) {
+        if (dp[n-1][j] < minCost) {
+            minCost = dp[n-1][j];
+            bestPos = j;
+        }
+    }
+    
+    // 存储最终选择的标签位置（格点索引）
+    const selectedGridPositions = [];
+    
+    // 回溯构建结果
+    const labelPositions = [];
+    if (bestPos !== -1) {
+        // 从后向前回溯
+        let pos = bestPos;
+        
+        for (let i = n - 1; i >= 0; i--) {
+            labelPositions.unshift({
+                point: points[i],
+                labelY: pos * GRID_SIZE
+            });
+            
+            // 记录选择的位置
+            selectedGridPositions.unshift(pos);
+            
+            pos = prev[i][pos];
+        }
+    } else {
+        // 无可行解，退化为简单方案处理
+        let lastY = 0;
+        for (let i = 0; i < n; i++) {
+            const point = points[i];
+            // 确保标签不超过下一个圆点的位置
+            let maxY = chartHeight;
+            if (i < n - 1) {
+                maxY = points[i+1].y;
+            }
+            
+            const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+            
+            labelPositions.push({
+                point: point,
+                labelY: labelY
+            });
+            
+            lastY = labelY;
+        }
+    }
+
+    const debug = false;
+    
+    // 添加格子系统可视化
+    if (debug && points.length > 0) {
+        // 确定可视化的位置 - 使用数据点的X位置
+        const mainPointX = points.length > 0 ? points[0].x : 0; // 使用该组第一个点的X位置
+        const visX = mainPointX;
+        const visY = 10; // 从图表顶部开始
+        const visWidth = 50; // 减小宽度以免干扰图表
+        
+        // 创建一个组用于添加可视化元素，并在需要时应用剪切
+        const visGroup = g.append("g");
+        
+        // 限制可视化高度，避免太长
+        const maxVisHeight = chartHeight - 20;
+        const visibleGridCount = Math.min(gridCount, Math.floor(maxVisHeight / GRID_SIZE));
+        
+        // 添加半透明背景
+        visGroup.append("rect")
+            .attr("x", visX - 5)
+            .attr("y", visY - 15)
+            .attr("width", visWidth + 10)
+            .attr("height", visibleGridCount * GRID_SIZE + 50)
+            .attr("fill", "#fff")
+            .attr("opacity", 0.8)
+            .attr("rx", 5);
+        
+        // 添加标题
+        visGroup.append("text")
+            .attr("x", visX + visWidth/2)
+            .attr("y", visY - 5)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#333")
+            .style("font-size", "10px")
+            .text(debugName + "标签位置");
+        
+        // 绘制每个格子
+        for (let i = 0; i < visibleGridCount; i++) {
+            // 计算格子的颜色
+            let fillColor = "#ddd"; // 默认颜色 - 可用格子
+            
+            if (occupied[i]) {
+                fillColor = "#ffcccc"; // 不可用格子 - 红色
+            }
+            
+            // 标记最终选择的位置
+            const isSelected = selectedGridPositions.some(pos => {
+                // 检查格子是否在标签范围内
+                for (let j = 0; j < LABEL_HEIGHT; j++) {
+                    if (pos + j === i) return true;
+                }
+                return false;
+            });
+            
+            if (isSelected) {
+                fillColor = "#99ff99"; // 选中的格子 - 绿色
+            }
+            
+            // 绘制格子
+            visGroup.append("rect")
+                .attr("x", visX)
+                .attr("y", visY + i * GRID_SIZE)
+                .attr("width", visWidth)
+                .attr("height", GRID_SIZE)
+                .attr("fill", fillColor)
+                .attr("stroke", "#ccc")
+                .attr("stroke-width", 0.2);
+        }
+        
+        // 添加数据点位置标记 - 只显示该组的点
+        points.forEach((point, idx) => {
+            const gridY = Math.floor(point.y / GRID_SIZE);
+            
+            // 仅当点位置在可视范围内时添加
+            if (gridY < visibleGridCount) {
+                // 绘制数据点位置线
+                visGroup.append("line")
+                    .attr("x1", visX - 3)
+                    .attr("y1", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("x2", visX + visWidth)
+                    .attr("y2", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("stroke", point.color)
+                    .attr("stroke-width", 1)
+                    .attr("stroke-dasharray", "2,1");
+                
+                // 添加简短的数据点标识
+                visGroup.append("text")
+                    .attr("x", visX - 5)
+                    .attr("y", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("text-anchor", "end")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", point.color)
+                    .style("font-size", "8px")
+                    .text("点" + (idx + 1));
+            }
+        });
+        
+        // 在底部添加简化的图例
+        const legendY = visY + visibleGridCount * GRID_SIZE + 5;
+        const legendItems = [
+            { label: "可用", color: "#ddd" },
+            { label: "占用", color: "#ffcccc" },
+            { label: "选中", color: "#99ff99" }
+        ];
+        
+        legendItems.forEach((item, idx) => {
+            // 水平放置图例项
+            const itemX = visX + idx * (visWidth / 3);
+            
+            visGroup.append("rect")
+                .attr("x", itemX)
+                .attr("y", legendY)
+                .attr("width", 6)
+                .attr("height", 6)
+                .attr("fill", item.color);
+            
+            visGroup.append("text")
+                .attr("x", itemX + 8)
+                .attr("y", legendY + 3)
+                .attr("text-anchor", "start")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#333")
+                .style("font-size", "6px")
+                .text(item.label);
+        });
+    }
+    
+    return labelPositions;
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_11.js

@@ -0,0 +1,563 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_11",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], ["-inf", "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 60, right: 30, bottom: 60, left: 60 };
+    
+    // 创建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 groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 使用数据的实际范围
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 为了美观，稍微扩展Y轴范围
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.max(0, yMin - yPadding); // 确保下限不小于0
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 创建颜色比例尺 - 使用提供的颜色或默认颜色
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "category10" }).value;
+    
+    // 获取实际的Y轴刻度
+    const yTicks = yScale.ticks(5);
+    
+    // 添加水平网格线 - 包括刻度之间的额外网格线
+    // 首先添加主要刻度的网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#dddddd")
+            .attr("stroke-width", 1)
+            .attr("class", "background");
+    });
+    
+    // 添加刻度之间的额外网格线
+    if (yTicks.length > 1) {
+        for (let i = 0; i < yTicks.length - 1; i++) {
+            const currentTick = yTicks[i];
+            const nextTick = yTicks[i + 1];
+            const midValue = (currentTick + nextTick) / 2;
+            
+            g.append("line")
+                .attr("x1", 0)
+                .attr("y1", yScale(midValue))
+                .attr("x2", chartWidth)
+                .attr("y2", yScale(midValue))
+                .attr("stroke", "#dddddd")
+                .attr("stroke-width", 1)
+                .attr("class", "background");
+        }
+    }
+    
+    // 添加Y轴刻度文本 - 保留0位小数，不带百分号
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(chartUtils.format.integer(tick).text); // 四舍五入到整数，不带百分号
+    });
+    
+    // 添加X轴刻度文本
+    xTicks.forEach(tick => {
+        
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    // 添加X轴线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#aaa")
+        .attr("stroke-width", 1);
+    
+    // 定义线条粗细
+    const lineWidth = 4;
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear); // 改为折线
+    
+    // 收集需要标注的数据点 - 按起点/终点/中点分类
+    const startPoints = [];
+    const middlePoints = [];
+    const endPoints = [];
+    
+    groupedData.forEach((values, group) => {
+        // 确保数据按日期排序
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        
+        // 绘制线条
+        g.append("path")
+            .datum(values)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", lineWidth)
+            .attr("d", line);
+        
+        // 找出中间的一个X位置
+        const middleIndex = Math.floor(values.length / 2);
+        
+        // 收集需要标注的点
+        values.forEach((d, i) => {
+            if (i === 0) {
+                // 起点
+                startPoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            } else if (i === values.length - 1) {
+                // 终点
+                endPoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            } else if (i === middleIndex) {
+                // 中点
+                middlePoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            }
+        });
+    });
+    
+    // 分别对起点、中点和终点应用动态规划 - 添加g参数
+    const startLabelPositions = placeLabelsDP(startPoints, yTicks.map(tick => yScale(tick)), "起点", chartHeight, chartWidth, g);
+    const middleLabelPositions = placeLabelsDP(middlePoints, yTicks.map(tick => yScale(tick)), "中点", chartHeight, chartWidth, g);
+    const endLabelPositions = placeLabelsDP(endPoints, yTicks.map(tick => yScale(tick)), "终点", chartHeight, chartWidth, g);
+    
+    // 绘制标签函数 - 保持multiple_line_graph_10的样式
+    function drawLabels(labelPositions) {   
+        labelPositions.forEach(placement => {
+            const point = placement.point;
+            const labelY = placement.labelY;
+            
+            // 计算标签文本和宽度
+            const labelText = chartUtils.format.autoText(point.value);
+            const labelWidth = chartUtils.text.measure(null, labelText, { fontSize: 14, fontWeight: "bold" }).width + 10;
+            const labelHeight = 24;
+            
+            // 添加圆角矩形背景
+            g.append("rect")
+                .attr("x", point.x - labelWidth / 2)
+                .attr("y", labelY + labelHeight / 2)
+                .attr("width", labelWidth)
+                .attr("height", labelHeight)
+                .attr("rx", 5)
+                .attr("ry", 5)
+                .attr("fill", point.color);
+            
+            // 添加文本 - 白色粗体
+            g.append("text")
+                .attr("x", point.x)
+                .attr("y", labelY + labelHeight)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#fff")
+                .attr("font-weight", "bold")
+                .style("font-size", "14px")
+                .text(labelText);
+        });
+    }
+    
+    // 绘制所有标签
+    drawLabels(startLabelPositions);
+    drawLabels(middleLabelPositions);
+    drawLabels(endLabelPositions);
+    
+    const legendSize = chartUtils.legend.draw(g, groups, {
+        fontSize: 14,
+        fontWeight: "bold",
+        maxWidth: chartWidth,
+        markerShape: "line",
+        markerSize: 10,
+        strokeWidth: 4,
+        colorScale,
+    });
+
+    const maxYTickPosition = yScale(yTicks[yTicks.length - 1]);
+    
+    legendSize.group.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${maxYTickPosition - 50 - legendSize.height/2})`);
+    
+    return svg.node();
+}
+
+// 动态规划标签放置算法 - 添加g参数
+function placeLabelsDP(points, avoidYPositions = [], debugName = "", chartHeight, chartWidth, g) {
+    // 每个格点的高度（像素）
+    const GRID_SIZE = 3;
+    // 圆点周围的保护区域（格点数）
+    const PROTECTION_RADIUS = 3;
+    // 标签高度（格点数）
+    const LABEL_HEIGHT = 10; 
+    
+    // 离散化Y坐标，创建格点系统
+    const minY = 0;
+    const maxY = chartHeight; // 使用传入的chartHeight
+    const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+    
+    // 按照Y坐标排序点
+    points.sort((a, b) => a.y - b.y);
+    
+    // 创建格点占用标记
+    const occupied = new Array(gridCount).fill(false);
+    // 存储占用原因，用于可视化
+    const occupiedReason = new Array(gridCount).fill("");
+    
+    // 标记圆点周围的保护区域为已占用
+    points.forEach((point, idx) => {
+        const gridY = Math.floor(point.y / GRID_SIZE) - 3;
+        for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+            occupied[i] = true;
+            occupiedReason[i] = `数据点${idx + 1}保护区`;
+        }
+    });
+    
+    
+    // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+    const n = points.length;
+    const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+    const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+    
+    // 初始条件：第一个点的标签放置
+    const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+    
+    // 尝试将第一个点的标签放在可行的位置
+    for (let j = 0; j < gridCount; j++) {
+        // 检查是否可行（不在保护区域内且有足够空间放置标签）
+        if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+            // 检查标签是否会与其他标签重叠
+            let canPlace = true;
+            for (let k = 0; k < LABEL_HEIGHT; k++) {
+                if (j + k < gridCount && occupied[j + k]) {
+                    canPlace = false;
+                    break;
+                }
+            }
+            
+            if (canPlace) {
+                // 计算代价：与圆点位置的距离
+                const cost = Math.abs(j - firstPointGridY);
+                dp[0][j] = cost;
+            }
+        }
+    }
+    
+    // 填充dp表
+    for (let i = 1; i < n; i++) {
+        const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+        
+        for (let j = 0; j < gridCount; j++) {
+            // 检查当前位置是否可行
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                if (canPlace) {
+                    // 根据上一个点的标签位置计算当前最小代价
+                    for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                        if (dp[i-1][k] !== Infinity) {
+
+                            // 当前标签的代价
+                            const curCost = Math.abs(j - pointGridY);
+                            const totalCost = dp[i-1][k] + curCost;
+                            
+                            if (totalCost < dp[i][j]) {
+                                dp[i][j] = totalCost;
+                                prev[i][j] = k; // 记录前驱
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // 找出最后一个点的最优放置位置
+    let minCost = Infinity;
+    let bestPos = -1;
+    
+    for (let j = 0; j < gridCount; j++) {
+        if (dp[n-1][j] < minCost) {
+            minCost = dp[n-1][j];
+            bestPos = j;
+        }
+    }
+    
+    // 存储最终选择的标签位置（格点索引）
+    const selectedGridPositions = [];
+    
+    // 回溯构建结果
+    const labelPositions = [];
+    if (bestPos !== -1) {
+        // 从后向前回溯
+        let pos = bestPos;
+        
+        for (let i = n - 1; i >= 0; i--) {
+            labelPositions.unshift({
+                point: points[i],
+                labelY: pos * GRID_SIZE
+            });
+            
+            // 记录选择的位置
+            selectedGridPositions.unshift(pos);
+            
+            pos = prev[i][pos];
+        }
+    } else {
+        // 无可行解，退化为简单方案处理
+        let lastY = 0;
+        for (let i = 0; i < n; i++) {
+            const point = points[i];
+            // 确保标签���超过下一个圆点的位置
+            let maxY = chartHeight;
+            if (i < n - 1) {
+                maxY = points[i+1].y;
+            }
+            
+            const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+            
+            labelPositions.push({
+                point: point,
+                labelY: labelY
+            });
+            
+            lastY = labelY;
+        }
+    }
+
+    const debug = false;
+    
+    // 添加格子系统可视化
+    if (debug && points.length > 0) {
+        // 确定可视化的位置 - 使用数据点的X位置
+        const mainPointX = points.length > 0 ? points[0].x : 0; // 使用该组第一个点的X位置
+        const visX = mainPointX;
+        const visY = 10; // 从图表顶部开始
+        const visWidth = 50; // 减小宽度以免干扰图表
+        
+        // 创建一个组用于添加可视化元素，并在需要时应用剪切
+        const visGroup = g.append("g");
+        
+        // 限制可视化高度，避免太长
+        const maxVisHeight = chartHeight - 20;
+        const visibleGridCount = Math.min(gridCount, Math.floor(maxVisHeight / GRID_SIZE));
+        
+        // 添加半透明背景
+        visGroup.append("rect")
+            .attr("x", visX - 5)
+            .attr("y", visY - 15)
+            .attr("width", visWidth + 10)
+            .attr("height", visibleGridCount * GRID_SIZE + 50)
+            .attr("fill", "#fff")
+            .attr("opacity", 0.8)
+            .attr("rx", 5);
+        
+        // 添加标题
+        visGroup.append("text")
+            .attr("x", visX + visWidth/2)
+            .attr("y", visY - 5)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#333")
+            .style("font-size", "10px")
+            .text(debugName + "标签位置");
+        
+        // 绘制每个格子
+        for (let i = 0; i < visibleGridCount; i++) {
+            // 计算格子的颜色
+            let fillColor = "#ddd"; // 默认颜色 - 可用格子
+            
+            if (occupied[i]) {
+                fillColor = "#ffcccc"; // 不可用格子 - 红色
+            }
+            
+            // 标记最终选择的位置
+            const isSelected = selectedGridPositions.some(pos => {
+                // 检查格子是否在标签范围内
+                for (let j = 0; j < LABEL_HEIGHT; j++) {
+                    if (pos + j === i) return true;
+                }
+                return false;
+            });
+            
+            if (isSelected) {
+                fillColor = "#99ff99"; // 选中的格子 - 绿色
+            }
+            
+            // 绘制格子
+            visGroup.append("rect")
+                .attr("x", visX)
+                .attr("y", visY + i * GRID_SIZE)
+                .attr("width", visWidth)
+                .attr("height", GRID_SIZE)
+                .attr("fill", fillColor)
+                .attr("stroke", "#ccc")
+                .attr("stroke-width", 0.2);
+        }
+        
+        // 添加数据点位置标记 - 只显示该组的点
+        points.forEach((point, idx) => {
+            const gridY = Math.floor(point.y / GRID_SIZE);
+            
+            // 仅当点位置在可视范围内时添加
+            if (gridY < visibleGridCount) {
+                // 绘制数据点位置线
+                visGroup.append("line")
+                    .attr("x1", visX - 3)
+                    .attr("y1", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("x2", visX + visWidth)
+                    .attr("y2", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("stroke", point.color)
+                    .attr("stroke-width", 1)
+                    .attr("stroke-dasharray", "2,1");
+                
+                // 添加简短的数据点标识
+                visGroup.append("text")
+                    .attr("x", visX - 5)
+                    .attr("y", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("text-anchor", "end")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", point.color)
+                    .style("font-size", "8px")
+                    .text("点" + (idx + 1));
+            }
+        });
+        
+        // 在底部添加简化的图例
+        const legendY = visY + visibleGridCount * GRID_SIZE + 5;
+        const legendItems = [
+            { label: "可用", color: "#ddd" },
+            { label: "占用", color: "#ffcccc" },
+            { label: "选中", color: "#99ff99" }
+        ];
+        
+        legendItems.forEach((item, idx) => {
+            // 水平放置图例项
+            const itemX = visX + idx * (visWidth / 3);
+            
+            visGroup.append("rect")
+                .attr("x", itemX)
+                .attr("y", legendY)
+                .attr("width", 6)
+                .attr("height", 6)
+                .attr("fill", item.color);
+            
+            visGroup.append("text")
+                .attr("x", itemX + 8)
+                .attr("y", legendY + 3)
+                .attr("text-anchor", "start")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#333")
+                .style("font-size", "6px")
+                .text(item.label);
+        });
+    }
+    
+    return labelPositions;
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_line_graph_12.js

@@ -0,0 +1,466 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "multiple_line_graph_12",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], [0, "inf"], [2, 2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "comparison"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 100, right: 30, bottom: 100, left: 50 };
+    
+    // 创建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;
+    
+    // X轴文本的高度
+    const xAxisTextHeight = 30;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+    
+    // 计算每个组的平均值，找出最高和最低的组
+    const groupAverages = new Map();
+    
+    groupedData.forEach((values, group) => {
+        const sum = values.reduce((acc, d) => acc + +d[yField], 0);
+        const avg = sum / values.length;
+        groupAverages.set(group, avg);
+    });
+    
+    // 找出平均值最高和最低的组
+    let highestGroup = null;
+    let lowestGroup = null;
+    let highestAvg = -Infinity;
+    let lowestAvg = Infinity;
+    
+    groupAverages.forEach((avg, group) => {
+        if (avg > highestAvg) {
+            highestAvg = avg;
+            highestGroup = group;
+        }
+        if (avg < lowestAvg) {
+            lowestAvg = avg;
+            lowestGroup = group;
+        }
+    });
+    
+    // 只保留最高和最低的两个组
+    const selectedGroups = [highestGroup, lowestGroup];
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 使用数据的实际范围
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 为了美观，稍微扩展Y轴范围
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.max(0, yMin - yPadding); // 确保下限不小于0
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 创建颜色比例尺
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+    
+    // 获取实际的Y轴刻度 - 减少刻度数量
+    const yTicks = yScale.ticks(5); // 保持5个刻度
+    const maxYTick = yTicks[yTicks.length - 1]; // 最大的Y轴刻度值
+    
+    // 计算最大Y刻度的位置
+    const maxYTickPosition = yScale(maxYTick);
+    
+    // 添加图例 - 整体居中，放在最大Y轴刻度上方
+    const legendY = maxYTickPosition - 60; // 最大Y轴刻度上方20像素
+    
+    // 计算比值圆形的Y位置
+    const ratioCircleY = maxYTickPosition - 30;
+    
+    // 添加条纹背景 - 使用更合适的时间间隔
+    
+    // 为每个X轴刻度创建条纹背景，使条纹以刻度为中心
+    // 条纹背景要覆盖到圆形区域
+    for (let i = 0; i < xTicks.length - 1; i++) {
+        // 获取相邻两个刻度
+        const currentTick = xTicks[i];
+        const nextTick = xTicks[i + 1];
+        
+        // 计算当前���度和下一个刻度的位置
+        const x1 = xScale(currentTick);
+        const x2 = xScale(nextTick);
+        
+        // 每隔一个刻度添加浅色背景
+        if (i % 2 === 0) {
+            g.append("rect")
+                .attr("x", x1)
+                .attr("y", legendY + 10) // 从legend下方20像素开始
+                .attr("width", x2 - x1)
+                .attr("height", chartHeight + xAxisTextHeight - (legendY + 10)) // 高度需要减去legend的位置
+                .attr("fill", "#ececec")
+                .attr("class", "background")
+                .attr("opacity", 0.8);
+        }
+    }
+    
+    // 将条纹背景移到最底层
+    g.selectAll("rect").lower();
+    
+    // 添加水平网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#e0e0e0")
+            .attr("stroke-width", 1)
+            .attr("class", "background")
+            .attr("stroke-dasharray", "2,2");
+    });
+    
+    // 定义线条粗细
+    const lineWidth = 4;
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear);
+    
+    // 为每个X刻度创建插值函数，计算比值
+    const highValues = groupedData.get(highestGroup);
+    const lowValues = groupedData.get(lowestGroup);
+    
+    // 确保数据按日期排序
+    highValues.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    lowValues.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    
+    // 创建插值函数
+    const highInterpolator = d3.scaleTime()
+        .domain(highValues.map(d => chartUtils.format.parseDate(d[xField])))
+        .range(highValues.map(d => +d[yField]))
+        .clamp(true);
+    
+    const lowInterpolator = d3.scaleTime()
+        .domain(lowValues.map(d => chartUtils.format.parseDate(d[xField])))
+        .range(lowValues.map(d => +d[yField]))
+        .clamp(true);
+    
+    // 计算每个X刻度的比值（转为百分比）
+    const ratios = xTicks.map(tick => {
+        const highVal = highInterpolator(tick);
+        const lowVal = lowInterpolator(tick);
+        return {
+            date: tick,
+            ratio: (lowVal / highVal) * 100 // 转为百分比
+        };
+    });
+    
+    // 找出最大和最小的百分比值
+    const minRatio = d3.min(ratios, d => d.ratio);
+    const maxRatio = d3.max(ratios, d => d.ratio);
+    
+    // 创建圆形大小的比例尺
+    const radiusScale = d3.scaleLinear()
+        .domain([minRatio, maxRatio])
+        .range([12, 20]); // 最小半径10，最大半径20
+    
+    // 获取两个组的颜色
+    const highColor = colorScale(highestGroup);
+    const lowColor = colorScale(lowestGroup);
+    
+    // 判断哪个颜色更浅
+    const highColorRGB = d3.rgb(highColor);
+    const lowColorRGB = d3.rgb(lowColor);
+    
+    // 计算颜色的亮度（简单方法：R+G+B的总和）
+    const highBrightness = highColorRGB.r + highColorRGB.g + highColorRGB.b;
+    const lowBrightness = lowColorRGB.r + lowColorRGB.g + lowColorRGB.b;
+    
+    // 确定浅色和深色
+    let lightColor, darkColor;
+    if (highBrightness >= lowBrightness) {
+        lightColor = highColorRGB;
+        darkColor = lowColorRGB;
+    } else {
+        lightColor = lowColorRGB;
+        darkColor = highColorRGB;
+    }
+    
+    // 计算圆的颜色：浅色变得更浅
+    const circleR = Math.min(255, lightColor.r + (255 - lightColor.r) * 0.7);
+    const circleG = Math.min(255, lightColor.g + (255 - lightColor.g) * 0.7); 
+    const circleB = Math.min(255, lightColor.b + (255 - lightColor.b) * 0.7);
+    
+    const circleColor = d3.rgb(circleR, circleG, circleB);
+    
+    // 绘制只选中的两个组的线条
+    selectedGroups.forEach(group => {
+        const values = groupedData.get(group);
+        // 确保数据按日期排序
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        const color = colorScale(group);
+        
+        // 绘制线条
+        g.append("path")
+            .datum(values)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", lineWidth)
+            .attr("d", line);
+        
+        // 添加数据点 - 根据是否为起止点使用不同样式
+        values.forEach((d, i) => {
+            const isEndpoint = i === 0 || i === values.length - 1;
+            
+            if (isEndpoint) {
+                // 起止点：白色填充，带有颜色描边
+                g.append("circle")
+                    .attr("cx", xScale(chartUtils.format.parseDate(d[xField])))
+                    .attr("cy", yScale(+d[yField]))
+                    .attr("r", lineWidth * 1.2)
+                    .attr("fill", "#fff")
+                    .attr("stroke", color)
+                    .attr("stroke-width", lineWidth);
+            } else {
+                // 中间点：实心颜色填充，无描边
+                g.append("circle")
+                    .attr("cx", xScale(chartUtils.format.parseDate(d[xField])))
+                    .attr("cy", yScale(+d[yField]))
+                    .attr("r", lineWidth)
+                    .attr("fill", color)
+                    .attr("stroke", "none");
+            }
+        });
+        
+        // 添加起点和终点标注
+        const firstPoint = values[0];
+        const lastPoint = values[values.length - 1];
+        
+        // 添加起点标注
+        addDataLabel(firstPoint, true);
+        
+        // 添加终点标注
+        addDataLabel(lastPoint, false);
+    });
+    
+    // 添加X轴文本 - 放置在条纹背景的中间
+    for (let i = 0; i < xTicks.length - 1; i++) {
+        // 获取相邻两个刻度
+        const currentTick = xTicks[i];
+        const nextTick = xTicks[i + 1];
+        
+        // 计算当前刻度和下一个刻度的位置
+        const x1 = xScale(currentTick);
+        const x2 = xScale(nextTick);
+        
+        // 计算中点位置
+        const midX = (x1 + x2) / 2;
+        
+        g.append("text")
+            .attr("x", midX)
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "12px")
+            .text(xFormat(currentTick));
+    }
+    
+    
+    // 添加Y轴文本
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "12px")
+            .text(chartUtils.format.fixed(tick).text);
+    });
+    
+    // 添加图例 - 整体居中，放在最大Y轴刻度上方
+    const legendGroup = g.append("g")
+        .attr("transform", `translate(0, -50)`);
+    
+    const group_names = [lowestGroup, highestGroup, `${lowestGroup}/${highestGroup}`];
+    const colors_legend = {
+        field: {
+            [lowestGroup]: lowColor,
+            [highestGroup]: highColor,
+            [`${lowestGroup}/${highestGroup}`]: circleColor,
+        }
+    }
+    
+    const legendSize = chartUtils.legend.draw(legendGroup, group_names, colors_legend, {
+        x: 0,
+        y: 0,
+        fontSize: 14,
+        fontWeight: "bold",
+        align: "left",
+        maxWidth: chartWidth,
+        shape: "circle",
+    });
+
+    // 居中legend
+    legendGroup.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${-50 - legendSize.height/2})`);
+    
+    // 添加每个X刻度的比值，使用圆形背景
+    ratios.forEach((ratio, i) => {
+        if (i === 0) {
+            return;
+        }
+        
+        // 跳过无效比值
+        if (ratio.invalid) {
+            return;
+        }
+        
+        const x = xScale(ratio.date) - (xScale(ratio.date) - xScale(ratios[i-1].date)) / 2;
+        const y = ratioCircleY;
+        const radius = radiusScale(ratio.ratio);
+        
+        // 添加圆形背景
+        g.append("circle")
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", radius)
+            .attr("fill", circleColor.toString());
+        
+        // 添加百分比文本
+        g.append("text")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#333")
+            .style("font-size", "12px")
+            .text(chartUtils.format.percent(ratio.ratio, { digits: 0 }).text);
+    });
+    
+    // 添加数据标注函数 - 根据数据点的实际值决定标签位置
+    function addDataLabel(point, isStart) {
+        const x = xScale(chartUtils.format.parseDate(point[xField]));
+        const y = yScale(+point[yField]);
+        
+        // 获取点所属的组
+        const group = point[groupField];
+        const color = colorScale(group);
+        
+        // 计算标签文本
+        const labelText = chartUtils.format.fixed(+point[yField], 0).text;
+        
+        // 计算标签宽度和高度
+        const labelWidth = chartUtils.text.measure(null, labelText, { fontSize: 12 }).width + 16;
+        const labelHeight = 24;
+        
+        // 获取另一组在同一时间点的值
+        const otherGroup = group === highestGroup ? lowestGroup : highestGroup;
+        const otherGroupData = groupedData.get(otherGroup);
+        
+        // 找到同一时间点的另一组数据
+        const otherPoint = otherGroupData.find(d => d[xField] === point[xField]);
+        
+        // 判断当前点的值是否大于另一组同时间点的值
+        const isHigherValue = otherPoint ? +point[yField] > +otherPoint[yField] : true;
+        
+        // 根据值的大小决定标签位置
+        const labelY = isHigherValue ? y - 30 : y + 30;
+        
+        // 添加圆角矩形背景
+        g.append("rect")
+            .attr("x", x - labelWidth / 2)
+            .attr("y", labelY - labelHeight / 2)
+            .attr("width", labelWidth)
+            .attr("height", labelHeight)
+            .attr("rx", 4)
+            .attr("ry", 4)
+            .attr("fill", color);
+        
+        // 添加三角形 - 方向根据标签位置决定
+        const triangleSize = 8;
+        if (isHigherValue) {
+            // 值较高：向下的三角形
+            g.append("path")
+                .attr("d", `M${x-triangleSize/2},${labelY+labelHeight/2} L${x+triangleSize/2},${labelY+labelHeight/2} L${x},${labelY+labelHeight/2+triangleSize} Z`)
+                .attr("fill", color);
+        } else {
+            // 值较低：向上的三角形
+            g.append("path")
+                .attr("d", `M${x-triangleSize/2},${labelY-labelHeight/2} L${x+triangleSize/2},${labelY-labelHeight/2} L${x},${labelY-labelHeight/2-triangleSize} Z`)
+                .attr("fill", color);
+        }
+        
+        // 添加文本 - 白色粗体
+        g.append("text")
+            .attr("x", x)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#fff") // 白色文本
+            .attr("font-weight", "bold") // 粗体
+            .style("font-size", "12px")
+            .text(labelText);
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_spline_graph_01.js

@@ -0,0 +1,377 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Spline Graph",
+    "chart_name": "multiple_spline_graph_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 8]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 设置尺寸和边距 - 右侧留出更多空间用于标签
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 180, bottom: 60, left: 80 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值和X值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+    
+    // 创建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 g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+    
+    // 添加渐变效果
+    const defs = svg.append("defs");
+
+    // 添加网格背景渐变
+    const gridGradientId = "grid-background-gradient";
+    const gridGradient = defs.append("linearGradient")
+        .attr("class", "background")
+        .attr("id", gridGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+        
+    gridGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#f0dcc1")
+        .attr("stop-opacity", 0); // 顶部完全透明
+        
+    gridGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#f0dcc1")
+        .attr("stop-opacity", 0.3); // 底部半透明
+
+    // 添加网格背景矩形
+    g.append("rect")
+        .attr("width", innerWidth)
+        .attr("height", innerHeight)
+        .attr("fill", `url(#${gridGradientId})`) // 使用渐变填充
+        .attr("class", "background")
+        .attr("rx", 0)
+        .attr("ry", 0);
+
+    // 创建比例尺 - 修改为时间比例尺
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // 修改Y轴比例尺，支持负值
+    const yScale = d3.scaleLinear()
+        .domain([
+            Math.min(0, d3.min(chartData, d => +d[yField]) * 1.1), // 取最小值和0中的较小者
+            d3.max(chartData, d => +d[yField]) * 1.1
+        ])
+        .range([innerHeight, 0]);
+    
+    // 获取颜色
+    const getColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+    };
+    
+    // 添加网格线 - 使用半透明白色
+    // 首先获取Y轴的最大刻度值
+    const yTicks = yScale.ticks(5);
+    const maxYTick = yTicks[yTicks.length - 1];
+    const maxYPos = yScale(maxYTick);
+
+    // 绘制水平网格线 - 向左延伸
+    const gridExtension = 5; // 网格线向左延伸的距离
+    g.selectAll("line.grid-line-y")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("class", "grid-line-y")
+        .attr("class", "background")
+        .attr("x1", -gridExtension) // 向左延伸
+        .attr("y1", d => yScale(d))
+        .attr("x2", innerWidth)
+        .attr("y2", d => yScale(d))
+        .attr("stroke", "#f0dcc1")
+        .attr("stroke-width", 1)
+        .attr("opacity", 0.2); // 半透明
+
+    // 添加垂直网格线渐变
+    const verticalGridGradientId = "vertical-grid-gradient";
+    const verticalGridGradient = defs.append("linearGradient")
+        .attr("id", verticalGridGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+        
+    verticalGridGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#f0dcc1")
+        .attr("stop-opacity", 0.1); // 顶部较透明
+        
+    verticalGridGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#f0dcc1")
+        .attr("stop-opacity", 0.4); // 底部较不透明
+
+    // 绘制垂直网格线 - 延伸超过Y轴最大刻度和X轴，但不包括最后一个刻度
+    g.selectAll("line.grid-line-x")
+        .data(xTicks.filter((d, i) => i > 0 && i < xTicks.length - 1)) // 移除第一个和最后一个刻度
+        .enter()
+        .append("line")
+        .attr("class", "grid-line-x")
+        .attr("class", "background")
+        .attr("x1", d => xScale(d))
+        .attr("y1", 0) // 从顶部开始，超过最大Y刻度
+        .attr("x2", d => xScale(d))
+        .attr("y2", innerHeight + 10) // 延伸到X轴下方10像素
+        .attr("stroke", "#f0dcc1") // 使用固定颜色
+        .attr("stroke-width", 1)
+        .attr("opacity", 0.3); // 半透明
+    
+    // 为每个组添加线条渐变
+    groups.forEach(group => {
+        const gradientId = `line-gradient-${group.replace(/\s+/g, '-').toLowerCase()}`;
+        const baseColor = getColor(group);
+        
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "100%");
+            
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0.3);
+            
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0);
+    });
+    
+    // 创建曲线生成器（而不是折线）
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveMonotoneX); // 使用单调曲线插值
+
+    // 计算所有标签的固定宽度
+    const fixedLabelWidth = 30; // 固定标签宽度
+
+    // 在最后的竖线上为每个组添加彩色小圆点，并创建指向它们的标签
+    let labelPositions = [];
+    // 按照最终值，对group排序，从高到低
+    groups.sort((a, b) => {
+        const aData = chartData.filter(d => d[groupField] === a);
+        const bData = chartData.filter(d => d[groupField] === b);
+        return d3.descending(aData[aData.length - 1][yField], bData[bData.length - 1][yField]);
+    });
+    
+    groups.forEach((group, i) => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        const lastPoint = groupData[groupData.length - 1];
+        const circleY = yScale(+lastPoint[yField]); // 圆点的实际Y坐标
+        let labelY = circleY; // 标签的Y坐标，初始与圆点相同
+        
+        // 检查是否与现有标签重叠
+        labelPositions.forEach(pos => {
+            if (Math.abs(labelY - pos) < 30) {
+                // 如果重叠，向下移动
+                labelY = pos + 30;
+            }
+        });
+        
+        labelPositions.push(labelY);
+        
+        // 创建标签组
+        const labelGroup = g.append("g")
+            .attr("transform", `translate(${innerWidth + 20}, ${labelY})`);
+        
+        // 计算数值文本
+        const valueText = chartUtils.format.integer(+lastPoint[yField]).text;
+
+        const textWidth = chartUtils.text.measure(null, valueText, { fontSize: typography.label.font_size }).width + 10;
+        
+        // 标签背景 - 固定宽度，无圆角
+        labelGroup.append("rect")
+            .attr("x", 0)
+            .attr("y", -10)
+            .attr("width", textWidth * 1.1) // 固定宽度
+            .attr("height", 20)
+            .attr("fill", getColor(group))
+            .attr("rx", 0) // 移除圆角
+            .attr("ry", 0); // 移除圆角
+        
+        // 计算三角形的位置
+        // 计算圆点相对于标签的位置
+        const relativeCircleY = circleY - labelY; // 圆点相对于标签中心的Y偏移
+        
+        // 创建一个自定义的三角形路径
+        // 三角形右边是垂直的，贴在标签上，左边的尖尖指向圆点
+        const trianglePath = `
+            M -12,${relativeCircleY} 
+            L 0,-10 
+            L 0,10 
+            Z
+        `;
+        
+        // 添加指向小圆点的三角形
+        labelGroup.append("path")
+            .attr("d", trianglePath)
+            .attr("fill", getColor(group));
+        
+        // 标签文本 - 只显示数值
+        labelGroup.append("text")
+            .attr("x", textWidth/2) // 左对齐，留出一点间距
+            .attr("y", 2) // 垂直居中
+            .attr("text-anchor", "middle") //
+            .attr("dominant-baseline", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", "#1c1c1c")
+            .text(valueText);
+        
+        // 添加组名文本
+        labelGroup.append("text")
+            .attr("x", textWidth + 10) // 位于标签右侧，留出间距
+            .attr("y", 2) // 垂直居中
+            .attr("text-anchor", "start") // 左对齐
+            .attr("dominant-baseline", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("font-weight", "bold")
+            .style("fill", getColor(group)) // 使用与组相同的颜色
+            .text(group);
+    });
+    
+    // 为每个组绘制线条和面积
+    groups.forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 绘制线条
+        g.append("path")
+            .datum(groupData)
+            .attr("class", "line")
+            .attr("fill", "none")
+            .attr("stroke", getColor(group))
+            .attr("stroke-width", 2)
+            .attr("d", line);
+    });
+    
+    // 直接使用xTicks绘制X轴文本
+    xTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", innerHeight + 25) // 下移文本
+            .attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", "#f0dcc1")
+            .text(xFormat(tick));
+    });
+    
+    
+    // 为每个刻度添加文本
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -gridExtension - 5)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", "#f0dcc1")
+            .text(tick);
+    });
+
+    
+    // 添加Y轴编码标签
+    const labelGroup = g.append("g")
+        .attr("transform", `translate(${-margin.left + 35}, ${maxYPos - 40})`);
+
+    // 计算标签宽度（根据文字长度调整）
+    const labelText = yField;
+    const labelPadding = 20;
+    const textWidth = chartUtils.text.measure(null, labelText, { fontSize: typography.label.font_size }).width;
+
+    const labelWidth = textWidth + 2 * labelPadding;
+    const labelHeight = 20;
+    const triangleHeight = 6;
+
+    // 创建标签形状（矩形+三角形）
+    const labelPath = `
+        M 0,0 
+        H ${labelWidth} 
+        V ${labelHeight} 
+        H ${labelWidth/2 + triangleHeight} 
+        L ${labelWidth/2},${labelHeight + triangleHeight} 
+        L ${labelWidth/2 - triangleHeight},${labelHeight} 
+        H 0 
+        Z
+    `;
+
+    // 绘制标签背景
+    labelGroup.append("path")
+        .attr("d", labelPath)
+        .attr("fill", "transparent")
+        .attr("stroke", "#f0dcc1")
+        .attr("stroke-width", 1)
+        .attr("stroke-opacity", 0.5);
+
+    // 添加文本
+    labelGroup.append("text")
+        .attr("x", labelWidth/2)
+        .attr("y", labelHeight/2 + 2)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("fill", "#f0dcc1")
+        .text(labelText);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_spline_graph_02.js

@@ -0,0 +1,377 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Spline Graph",
+    "chart_name": "multiple_spline_graph_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 8]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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 width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 180, bottom: 60, left: 80 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值和X值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+    
+    // 创建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 g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+    
+    // 添加渐变效果
+    const defs = svg.append("defs");
+
+    // 添加网格背景渐变
+    const gridGradientId = "grid-background-gradient";
+    const gridGradient = defs.append("linearGradient")
+        .attr("class", "background")
+        .attr("id", gridGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+        
+    gridGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#1e90ff")  // 深科技蓝
+        .attr("stop-opacity", 0); // 顶部完全透明
+        
+    gridGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#1e90ff")  // 深科技蓝
+        .attr("stop-opacity", 0.15); // 底部半透明
+
+    // 添加网格背景矩形
+    g.append("rect")
+        .attr("width", innerWidth)
+        .attr("height", innerHeight)
+        .attr("fill", `url(#${gridGradientId})`) // 使用渐变填充
+        .attr("class", "background")
+        .attr("rx", 0)
+        .attr("ry", 0);
+
+    // 创建比例尺 - 修改为时间比例尺
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // 修改Y轴比例尺，支持负值
+    const yScale = d3.scaleLinear()
+        .domain([
+            Math.min(0, d3.min(chartData, d => +d[yField]) * 1.1), // 取最小值和0中的较小者
+            d3.max(chartData, d => +d[yField]) * 1.1
+        ])
+        .range([innerHeight, 0]);
+    
+    // 获取颜色
+    const getColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+    };
+    
+    // 添加网格线 - 使用半透明白色
+    // 首先获取Y轴的最大刻度值
+    const yTicks = yScale.ticks(5);
+    const maxYTick = yTicks[yTicks.length - 1];
+    const maxYPos = yScale(maxYTick);
+
+    // 绘制水平网格线 - 向左延伸
+    const gridExtension = 5; // 网格线向左延伸的距离
+    g.selectAll("line.grid-line-y")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("class", "grid-line-y")
+        .attr("class", "background")
+        .attr("x1", -gridExtension) // 向左延伸
+        .attr("y1", d => yScale(d))
+        .attr("x2", innerWidth)
+        .attr("y2", d => yScale(d))
+        .attr("stroke", "#1e90ff")  // 深科技蓝
+        .attr("stroke-width", 1)
+        .attr("opacity", 0.15); // 半透明
+
+    // 添加垂直网格线渐变
+    const verticalGridGradientId = "vertical-grid-gradient";
+    const verticalGridGradient = defs.append("linearGradient")
+        .attr("id", verticalGridGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+        
+    verticalGridGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#1e90ff")  // 深科技蓝
+        .attr("stop-opacity", 0.1); // 顶部较透明
+        
+    verticalGridGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#1e90ff")  // 深科技蓝
+        .attr("stop-opacity", 0.2); // 底部较不透明
+
+    // 绘制垂直网格线 - 延伸超过Y轴最大刻度和X轴，但不包括最后一个刻度
+    g.selectAll("line.grid-line-x")
+        .data(xTicks.filter((d, i) => i > 0 && i < xTicks.length - 1)) // 移除第一个和最后一个刻度
+        .enter()
+        .append("line")
+        .attr("class", "grid-line-x")
+        .attr("class", "background")
+        .attr("x1", d => xScale(d))
+        .attr("y1", 0) // 从顶部开始，超过最大Y刻度
+        .attr("x2", d => xScale(d))
+        .attr("y2", innerHeight + 10) // 延伸到X轴下方10像素
+        .attr("stroke", "#1e90ff") // 深科技蓝
+        .attr("stroke-width", 1)
+        .attr("opacity", 0.15); // 半透明
+    
+    // 为每个组添加线条渐变
+    groups.forEach(group => {
+        const gradientId = `line-gradient-${group.replace(/\s+/g, '-').toLowerCase()}`;
+        const baseColor = getColor(group);
+        
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "100%");
+            
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0.3);
+            
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0);
+    });
+    
+    // 创建曲线生成器（而不是折线）
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveMonotoneX); // 使用单调曲线插值
+
+    // 计算所有标签的固定宽度
+    const fixedLabelWidth = 30; // 固定标签宽度
+
+    // 在最后的竖线上为每个组添加彩色小圆点，并创建指向它们的标签
+    let labelPositions = [];
+    // 按照最终值，对group排序，从高到低
+    groups.sort((a, b) => {
+        const aData = chartData.filter(d => d[groupField] === a);
+        const bData = chartData.filter(d => d[groupField] === b);
+        return d3.descending(aData[aData.length - 1][yField], bData[bData.length - 1][yField]);
+    });
+    
+    groups.forEach((group, i) => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        const lastPoint = groupData[groupData.length - 1];
+        const circleY = yScale(+lastPoint[yField]); // 圆点的实际Y坐标
+        let labelY = circleY; // 标签的Y坐标，初始与圆点相同
+        
+        // 检查是否与现有标签重叠
+        labelPositions.forEach(pos => {
+            if (Math.abs(labelY - pos) < 30) {
+                // 如果重叠，向下移动
+                labelY = pos + 30;
+            }
+        });
+        
+        labelPositions.push(labelY);
+        
+        // 创建标签组
+        const labelGroup = g.append("g")
+            .attr("transform", `translate(${innerWidth + 20}, ${labelY})`);
+        
+        // 计算数值文本
+        const valueText = chartUtils.format.integer(+lastPoint[yField]).text;
+
+        const textWidth = chartUtils.text.measure(null, valueText, { fontSize: typography.label.font_size }).width + 10;
+        
+        // 标签背景 - 固定宽度，无圆角
+        labelGroup.append("rect")
+            .attr("x", 0)
+            .attr("y", -10)
+            .attr("width", textWidth * 1.1) // 固定宽度
+            .attr("height", 20)
+            .attr("fill", getColor(group))
+            .attr("rx", 0) // 移除圆角
+            .attr("ry", 0); // 移除圆角
+        
+        // 计算三角形的位置
+        // 计算圆点相对于标签的位置
+        const relativeCircleY = circleY - labelY; // 圆点相对于标签中心的Y偏移
+        
+        // 创建一个自定义的三角形路径
+        // 三角形右边是垂直的，贴在标签上，左边的尖尖指向圆点
+        const trianglePath = `
+            M -12,${relativeCircleY} 
+            L 0,-10 
+            L 0,10 
+            Z
+        `;
+        
+        // 添加指向小圆点的三角形
+        labelGroup.append("path")
+            .attr("d", trianglePath)
+            .attr("fill", getColor(group));
+        
+        // 标签文本 - 只显示数值
+        labelGroup.append("text")
+            .attr("x", textWidth/2) // 左对齐，留出一点间距
+            .attr("y", 2) // 垂直居中
+            .attr("text-anchor", "middle") //
+            .attr("dominant-baseline", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", "#ffffff")  // 改为白色
+            .text(valueText);
+        
+        // 添加组名文本
+        labelGroup.append("text")
+            .attr("x", textWidth + 10) // 位于标签右侧，留出间距
+            .attr("y", 2) // 垂直居中
+            .attr("text-anchor", "start") // 左对齐
+            .attr("dominant-baseline", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("font-weight", "bold")
+            .style("fill", getColor(group)) // 使用与组相同的颜色
+            .text(group);
+    });
+    
+    // 为每个组绘制线条和面积
+    groups.forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 绘制线条
+        g.append("path")
+            .datum(groupData)
+            .attr("class", "line")
+            .attr("fill", "none")
+            .attr("stroke", getColor(group))
+            .attr("stroke-width", 2)
+            .attr("d", line);
+    });
+    
+    // 直接使用xTicks绘制X轴文本
+    xTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", innerHeight + 25) // 下移文本
+            .attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", "#333333")
+            .text(xFormat(tick));
+    });
+    
+    
+    // 为每个刻度添加文本
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -gridExtension - 5)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", "#333333")
+            .text(tick);
+    });
+
+    
+    // 添加Y轴编码标签
+    const labelGroup = g.append("g")
+        .attr("transform", `translate(${-margin.left + 35}, ${maxYPos - 40})`);
+
+    // 计算标签宽度（根据文字长度调整）
+    const labelText = yField;
+    const labelPadding = 20;
+    const textWidth = chartUtils.text.measure(null, labelText, { fontSize: typography.label.font_size }).width;
+
+    const labelWidth = textWidth + 2 * labelPadding;
+    const labelHeight = 20;
+    const triangleHeight = 6;
+
+    // 创建标签形状（矩形+三角形）
+    const labelPath = `
+        M 0,0 
+        H ${labelWidth} 
+        V ${labelHeight} 
+        H ${labelWidth/2 + triangleHeight} 
+        L ${labelWidth/2},${labelHeight + triangleHeight} 
+        L ${labelWidth/2 - triangleHeight},${labelHeight} 
+        H 0 
+        Z
+    `;
+
+    // 绘制标签背景
+    labelGroup.append("path")
+        .attr("d", labelPath)
+        .attr("fill", "transparent")
+        .attr("stroke", "#333333")
+        .attr("stroke-width", 1)
+        .attr("stroke-opacity", 0.5);
+
+    // 添加文本
+    labelGroup.append("text")
+        .attr("x", labelWidth/2)
+        .attr("y", labelHeight/2 + 2)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("fill", "#333333")
+        .text(labelText);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/multiple_step_line_graph_01.js

@@ -0,0 +1,563 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Step Line Graph",
+    "chart_name": "multiple_step_line_graph_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], ["-inf", "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 60, right: 30, bottom: 60, left: 60 };
+    
+    // 创建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 groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 使用数据的实际范围
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 为了美观，稍微扩展Y轴范围
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.min(0, yMin - yPadding);
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 创建颜色比例尺 - 使用提供的颜色或默认颜色
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "category10" }).value;
+    
+    // 获取实际的Y轴刻度
+    const yTicks = yScale.ticks(5);
+    
+    // 添加水平网格线 - 包括刻度之间的额外网格线
+    // 首先添加主要刻度的网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#dddddd")
+            .attr("stroke-width", 1)
+            .attr("class", "background");
+    });
+    
+    // 添加刻度之间的额外网格线
+    if (yTicks.length > 1) {
+        for (let i = 0; i < yTicks.length - 1; i++) {
+            const currentTick = yTicks[i];
+            const nextTick = yTicks[i + 1];
+            const midValue = (currentTick + nextTick) / 2;
+            
+            g.append("line")
+                .attr("x1", 0)
+                .attr("y1", yScale(midValue))
+                .attr("x2", chartWidth)
+                .attr("y2", yScale(midValue))
+                .attr("stroke", "#dddddd")
+                .attr("stroke-width", 1)
+                .attr("class", "background");
+        }
+    }
+    
+    // 添加Y轴刻度文本 - 保留0位小数，不带百分号
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(chartUtils.format.autoText(tick)); // 四舍五入到整数，不带百分号
+    });
+    
+    // 添加X轴刻度文本
+    xTicks.forEach(tick => {
+        
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    // 添加X轴线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#aaa")
+        .attr("stroke-width", 1);
+    
+    // 定义线条粗细
+    const lineWidth = 4;
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveStepAfter);
+    
+    // 收集需要标注的数据点 - 按起点/终点/中点分类
+    const startPoints = [];
+    const middlePoints = [];
+    const endPoints = [];
+    
+    groupedData.forEach((values, group) => {
+        // 确保数据按日期排序
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        
+        // 绘制线条
+        g.append("path")
+            .datum(values)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", lineWidth)
+            .attr("d", line);
+        
+        // 找出中间的一个X位置
+        const middleIndex = Math.floor(values.length / 2);
+        
+        // 收集需要标注的点
+        values.forEach((d, i) => {
+            if (i === 0) {
+                // 起点
+                startPoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            } else if (i === values.length - 1) {
+                // 终点
+                endPoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            } else if (i === middleIndex) {
+                // 中点
+                middlePoints.push({
+                    x: xScale(chartUtils.format.parseDate(d[xField])),
+                    y: yScale(+d[yField]),
+                    value: d[yField],
+                    color: color,
+                    group: group,
+                    point: d
+                });
+            }
+        });
+    });
+    
+    // 分别对起点、中点和终点应用动态规划 - 添加g参数
+    const startLabelPositions = placeLabelsDP(startPoints, yTicks.map(tick => yScale(tick)), "起点", chartHeight, chartWidth, g);
+    const middleLabelPositions = placeLabelsDP(middlePoints, yTicks.map(tick => yScale(tick)), "中点", chartHeight, chartWidth, g);
+    const endLabelPositions = placeLabelsDP(endPoints, yTicks.map(tick => yScale(tick)), "终点", chartHeight, chartWidth, g);
+    
+    // 绘制标签函数 - 保持multiple_line_graph_10的样式
+    function drawLabels(labelPositions) {
+        labelPositions.forEach(placement => {
+            const point = placement.point;
+            const labelY = placement.labelY;
+            
+            // 计算标签文本和宽度
+            const labelText = chartUtils.format.autoText(point.value);
+            const labelWidth = chartUtils.text.measure(null, labelText, { fontSize: 14, fontWeight: "bold" }).width + 10;
+            const labelHeight = 24;
+            
+            // 添加圆角矩形背景
+            g.append("rect")
+                .attr("x", point.x - labelWidth / 2)
+                .attr("y", labelY + labelHeight / 2)
+                .attr("width", labelWidth)
+                .attr("height", labelHeight)
+                .attr("rx", 5)
+                .attr("ry", 5)
+                .attr("fill", point.color);
+            
+            // 添加文本 - 白色粗体
+            g.append("text")
+                .attr("x", point.x)
+                .attr("y", labelY + labelHeight)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#fff")
+                .attr("font-weight", "bold")
+                .style("font-size", "14px")
+                .text(labelText);
+        });
+    }
+    
+    // 绘制所有标签
+    drawLabels(startLabelPositions);
+    drawLabels(middleLabelPositions);
+    drawLabels(endLabelPositions);
+    
+    const legendSize = chartUtils.legend.draw(g, groups, {
+        fontSize: 14,
+        fontWeight: "bold",
+        maxWidth: chartWidth,
+        markerShape: "line",
+        markerSize: 10,
+        strokeWidth: 4,
+        colorScale,
+    });
+
+    const maxYTickPosition = yScale(yTicks[yTicks.length - 1]);
+    
+    legendSize.group.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${maxYTickPosition - 50 - legendSize.height/2})`);
+    
+    return svg.node();
+}
+
+// 动态规划标签放置算法 - 添加g参数
+function placeLabelsDP(points, avoidYPositions = [], debugName = "", chartHeight, chartWidth, g) {
+    // 每个格点的高度（像素）
+    const GRID_SIZE = 3;
+    // 圆点周围的保护区域（格点数）
+    const PROTECTION_RADIUS = 3;
+    // 标签高度（格点数）
+    const LABEL_HEIGHT = 10; 
+    
+    // 离散化Y坐标，创建格点系统
+    const minY = 0;
+    const maxY = chartHeight; // 使用传入的chartHeight
+    const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+    
+    // 按照Y坐标排序点
+    points.sort((a, b) => a.y - b.y);
+    
+    // 创建格点占用标记
+    const occupied = new Array(gridCount).fill(false);
+    // 存储占用原因，用于可视化
+    const occupiedReason = new Array(gridCount).fill("");
+    
+    // 标记圆点周围的保护区域为已占用
+    points.forEach((point, idx) => {
+        const gridY = Math.floor(point.y / GRID_SIZE) - 3;
+        for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+            occupied[i] = true;
+            occupiedReason[i] = `数据点${idx + 1}保护区`;
+        }
+    });
+    
+    
+    // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+    const n = points.length;
+    const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+    const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+    
+    // 初始条件：第一个点的标签放置
+    const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+    
+    // 尝试将第一个点的标签放在可行的位置
+    for (let j = 0; j < gridCount; j++) {
+        // 检查是否可行（不在保护区域内且有足够空间放置标签）
+        if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+            // 检查标签是否会与其他标签重叠
+            let canPlace = true;
+            for (let k = 0; k < LABEL_HEIGHT; k++) {
+                if (j + k < gridCount && occupied[j + k]) {
+                    canPlace = false;
+                    break;
+                }
+            }
+            
+            if (canPlace) {
+                // 计算代价：与圆点位置的距离
+                const cost = Math.abs(j - firstPointGridY);
+                dp[0][j] = cost;
+            }
+        }
+    }
+    
+    // 填充dp表
+    for (let i = 1; i < n; i++) {
+        const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+        
+        for (let j = 0; j < gridCount; j++) {
+            // 检查当前位置是否可行
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                if (canPlace) {
+                    // 根据上一个点的标签位置计算当前最小代价
+                    for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                        if (dp[i-1][k] !== Infinity) {
+
+                            // 当前标签的代价
+                            const curCost = Math.abs(j - pointGridY);
+                            const totalCost = dp[i-1][k] + curCost;
+                            
+                            if (totalCost < dp[i][j]) {
+                                dp[i][j] = totalCost;
+                                prev[i][j] = k; // 记录前驱
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // 找出最后一个点的最优放置位置
+    let minCost = Infinity;
+    let bestPos = -1;
+    
+    for (let j = 0; j < gridCount; j++) {
+        if (dp[n-1][j] < minCost) {
+            minCost = dp[n-1][j];
+            bestPos = j;
+        }
+    }
+    
+    // 存储最终选择的标签位置（格点索引）
+    const selectedGridPositions = [];
+    
+    // 回溯构建结果
+    const labelPositions = [];
+    if (bestPos !== -1) {
+        // 从后向前回溯
+        let pos = bestPos;
+        
+        for (let i = n - 1; i >= 0; i--) {
+            labelPositions.unshift({
+                point: points[i],
+                labelY: pos * GRID_SIZE
+            });
+            
+            // 记录选择的位置
+            selectedGridPositions.unshift(pos);
+            
+            pos = prev[i][pos];
+        }
+    } else {
+        // 无可行解，退化为简单方案处理
+        let lastY = 0;
+        for (let i = 0; i < n; i++) {
+            const point = points[i];
+            // 确保标签不超过下一个圆点的位置
+            let maxY = chartHeight;
+            if (i < n - 1) {
+                maxY = points[i+1].y;
+            }
+            
+            const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+            
+            labelPositions.push({
+                point: point,
+                labelY: labelY
+            });
+            
+            lastY = labelY;
+        }
+    }
+
+    const debug = false;
+    
+    // 添加格子系统可视化
+    if (debug && points.length > 0) {
+        // 确定可视化的位置 - 使用数据点的X位置
+        const mainPointX = points.length > 0 ? points[0].x : 0; // 使用该组第一个点的X位置
+        const visX = mainPointX;
+        const visY = 10; // 从图表顶部开始
+        const visWidth = 50; // 减小宽度以免干扰图表
+        
+        // 创建一个组用于添加可视化元素，并在需要时应用剪切
+        const visGroup = g.append("g");
+        
+        // 限制可视化高度，避免太长
+        const maxVisHeight = chartHeight - 20;
+        const visibleGridCount = Math.min(gridCount, Math.floor(maxVisHeight / GRID_SIZE));
+        
+        // 添加半透明背景
+        visGroup.append("rect")
+            .attr("x", visX - 5)
+            .attr("y", visY - 15)
+            .attr("width", visWidth + 10)
+            .attr("height", visibleGridCount * GRID_SIZE + 50)
+            .attr("fill", "#fff")
+            .attr("opacity", 0.8)
+            .attr("rx", 5);
+        
+        // 添加标题
+        visGroup.append("text")
+            .attr("x", visX + visWidth/2)
+            .attr("y", visY - 5)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#333")
+            .style("font-size", "10px")
+            .text(debugName + "标签位置");
+        
+        // 绘制每个格子
+        for (let i = 0; i < visibleGridCount; i++) {
+            // 计算格子的颜色
+            let fillColor = "#ddd"; // 默认颜色 - 可用格子
+            
+            if (occupied[i]) {
+                fillColor = "#ffcccc"; // 不可用格子 - 红色
+            }
+            
+            // 标记最终选择的位置
+            const isSelected = selectedGridPositions.some(pos => {
+                // 检查格子是否在标签范围内
+                for (let j = 0; j < LABEL_HEIGHT; j++) {
+                    if (pos + j === i) return true;
+                }
+                return false;
+            });
+            
+            if (isSelected) {
+                fillColor = "#99ff99"; // 选中的格子 - 绿色
+            }
+            
+            // 绘制格子
+            visGroup.append("rect")
+                .attr("x", visX)
+                .attr("y", visY + i * GRID_SIZE)
+                .attr("width", visWidth)
+                .attr("height", GRID_SIZE)
+                .attr("fill", fillColor)
+                .attr("stroke", "#ccc")
+                .attr("stroke-width", 0.2);
+        }
+        
+        // 添加数据点位置标记 - 只显示该组的点
+        points.forEach((point, idx) => {
+            const gridY = Math.floor(point.y / GRID_SIZE);
+            
+            // 仅当点位置在可视范围内时添加
+            if (gridY < visibleGridCount) {
+                // 绘制数据点位置线
+                visGroup.append("line")
+                    .attr("x1", visX - 3)
+                    .attr("y1", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("x2", visX + visWidth)
+                    .attr("y2", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("stroke", point.color)
+                    .attr("stroke-width", 1)
+                    .attr("stroke-dasharray", "2,1");
+                
+                // 添加简短的数据点标识
+                visGroup.append("text")
+                    .attr("x", visX - 5)
+                    .attr("y", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("text-anchor", "end")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", point.color)
+                    .style("font-size", "8px")
+                    .text("点" + (idx + 1));
+            }
+        });
+        
+        // 在底部添加简化的图例
+        const legendY = visY + visibleGridCount * GRID_SIZE + 5;
+        const legendItems = [
+            { label: "可用", color: "#ddd" },
+            { label: "占用", color: "#ffcccc" },
+            { label: "选中", color: "#99ff99" }
+        ];
+        
+        legendItems.forEach((item, idx) => {
+            // 水平放置图例项
+            const itemX = visX + idx * (visWidth / 3);
+            
+            visGroup.append("rect")
+                .attr("x", itemX)
+                .attr("y", legendY)
+                .attr("width", 6)
+                .attr("height", 6)
+                .attr("fill", item.color);
+            
+            visGroup.append("text")
+                .attr("x", itemX + 8)
+                .attr("y", legendY + 3)
+                .attr("text-anchor", "start")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#333")
+                .style("font-size", "6px")
+                .text(item.label);
+        });
+    }
+    
+    return labelPositions;
+} 

modules/chart_engine/template/d3-js/line_graph/new_line_chart_01.js

@@ -0,0 +1,344 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "vertical_bar_chart_new_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[4, 12], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "trend"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 获取y轴单位
+    const yUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 20, right: 30, bottom: 80, left: 50 };
+    
+    // 创建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})`);
+
+    // 创建x轴比例尺 - 使用band scale来显示柱状图
+    const categories = chartData.map(d => d[xField]);
+    const xScale = d3.scaleBand()
+        .domain(categories)
+        .range([0, chartWidth])
+        .padding(0.3);
+    
+    // 获取y值范围
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 最小柱子高度
+    const minBarHeight = 50;
+    
+    // 创建y轴比例尺 - 调整range使小值也有足够高度
+    const effectiveHeight = chartHeight - minBarHeight; // 减去最小柱高
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax * 1.2]) // 为标签留出空间
+        .range([effectiveHeight, 0]); // 调整可用高度范围
+    
+    // 获取柱状图颜色 - 使用colorResolver.other("primary").value
+    const barColor = colorResolver.other("primary").value;
+    
+    // 添加y轴网格线
+    yScale.ticks(5).forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#e0e0e0")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2,2");
+    });
+    
+    // 创建渐变定义
+    const defs = svg.append("defs");
+    
+    // 为每个柱子创建唯一的渐变ID
+    chartData.forEach((d, i) => {
+        const gradientId = `barGradient-${i}`;
+        
+        // 创建线性渐变
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%") // 顶部
+            .attr("x2", "0%")
+            .attr("y2", "100%"); // 底部
+        
+        // 添加渐变停止点
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", barColor)
+            .attr("stop-opacity", 0.25); // 顶部透明度
+        
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", barColor)
+            .attr("stop-opacity", 1.0); // 底部透明度
+    });
+    
+    // 添加柱状图
+    g.selectAll(".bar")
+        .data(chartData)
+        .enter()
+        .append("rect")
+        .attr("class", "bar")
+        .attr("x", d => xScale(d[xField]))
+        .attr("y", d => yScale(+d[yField]))
+        .attr("width", xScale.bandwidth())
+        .attr("height", d => {
+            // 确保柱子高度至少为minBarHeight
+            return chartHeight - yScale(+d[yField]);
+        })
+        .attr("fill", (d, i) => `url(#barGradient-${i})`) // 使用渐变填充
+        .attr("rx", 4) // 圆角
+        .attr("ry", 4);
+    
+    // 创建线条生成器，连接各个数据点
+    const line = d3.line()
+        .x(d => xScale(d[xField]) + xScale.bandwidth()/2)
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear);
+    
+    // 添加连接线
+    g.append("path")
+        .datum(chartData)
+        .attr("fill", "none")
+        .attr("stroke", barColor)
+        .attr("stroke-width", 2)
+        .attr("d", line);
+    
+    // 添加数据点圆圈和标签
+    const circleRadius = 8; // 更小的圆圈
+    
+    // 添加数据点圆圈
+    g.selectAll(".data-point")
+        .data(chartData)
+        .enter()
+        .append("circle")
+        .attr("class", "data-point")
+        .attr("cx", d => xScale(d[xField]) + xScale.bandwidth()/2)
+        .attr("cy", d => yScale(+d[yField]))
+        .attr("r", circleRadius)
+        .attr("fill", "white")
+        .attr("stroke", barColor)
+        .attr("stroke-width", 2);
+    
+    // 添加数据标签，使用正确的单位
+    g.selectAll(".value-text")
+        .data(chartData)
+        .enter()
+        .append("text")
+        .attr("x", d => xScale(d[xField]) + xScale.bandwidth()/2)
+        .attr("y", d => yScale(+d[yField]) - circleRadius - 5) // 放在圆圈上方
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#333")
+        .style("font-size", "12px")
+        .style("font-weight", "bold")
+        .text(d => `${chartUtils.format.autoText(+d[yField])}${yUnit}`);
+    
+    // 添加图标，使用images对象中的base64数据
+    // 放在柱状图底部，宽度与柱状图相同，减少空隙
+    g.selectAll(".icon")
+        .data(chartData)
+        .enter()
+        .append("image")
+        .attr("x", d => xScale(d[xField])) // 与柱状图左边缘对齐
+        .attr("y", chartHeight - xScale.bandwidth()) // 紧贴柱状图底部
+        .attr("width", xScale.bandwidth()) // 宽度与柱状图相同
+        .attr("height", xScale.bandwidth()) 
+        .attr("xlink:href", d => {
+            // 从images.field获取对应的图标base64数据
+            if (images && images.field && images.field[d[xField]]) {
+                return images.field[d[xField]];
+            }
+            // 如果没有找到对应的图标，返回null
+            return null;
+        });
+    
+    // 计算x轴标签是否需要换行和合适的字体大小
+    const calculateLabelFormat = () => {
+        // 创建临时canvas用于测量文本宽度
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        
+        // 初始字体大小
+        let fontSize = 12;
+        const minFontSize = 8; // 最小字体大小
+        const padding = 5; // 标签之间的最小间距
+        let needsWordWrap = false;
+        
+        // 测试字体大小是否会导致标签重叠
+        while (fontSize >= minFontSize) {
+            context.font = `${fontSize}px sans-serif`;
+            
+            let isOverlapping = false;
+            
+            // 计算每个标签的宽度
+            const labelWidths = categories.map(category => {
+                return chartUtils.text.contextWidth(context, category);
+            });
+            
+            // 检查相邻标签是否重叠
+            for (let i = 0; i < categories.length - 1; i++) {
+                const leftLabelWidth = labelWidths[i] / 2;
+                const rightLabelWidth = labelWidths[i + 1] / 2;
+                
+                const leftCenter = xScale(categories[i]) + xScale.bandwidth() / 2;
+                const rightCenter = xScale(categories[i + 1]) + xScale.bandwidth() / 2;
+                
+                const distance = rightCenter - leftCenter;
+                
+                if (leftLabelWidth + rightLabelWidth + padding > distance) {
+                    isOverlapping = true;
+                    break;
+                }
+            }
+            
+            // 如果不重叠，无需继续减小字体
+            if (!isOverlapping) {
+                break;
+            }
+            
+            // 减小字体大小
+            fontSize -= 1;
+        }
+        
+        // 检查是否需要换行（达到最小字体仍然重叠）
+        if (fontSize < minFontSize) {
+            fontSize = minFontSize;
+            needsWordWrap = true;
+        }
+        
+        return { fontSize, needsWordWrap };
+    };
+    
+    // 将文本分成多行
+    const wrapText = (text, bandWidth) => {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        context.font = `${minFontSize}px sans-serif`;
+        
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = words[0];
+        
+        for (let i = 1; i < words.length; i++) {
+            const word = words[i];
+            const width = chartUtils.text.contextWidth(context, currentLine + ' ' + word);
+            
+            if (width < bandWidth * 0.8) { // 保留一些边距
+                currentLine += ' ' + word;
+            } else {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        lines.push(currentLine);
+        
+        return lines;
+    };
+    
+    // 获取合适的标签格式
+    const { fontSize, needsWordWrap } = calculateLabelFormat();
+    const minFontSize = 8; // 定义为常量，供wrapText使用
+    
+    // 添加x轴标签，调整位置使其靠近柱状图底部
+    const labelYPosition = chartHeight + 25; // 减少与柱状图底部的间距
+    
+    if (!needsWordWrap) {
+        // 单行标签
+        g.selectAll(".x-label")
+            .data(chartData)
+            .enter()
+            .append("text")
+            .attr("x", d => xScale(d[xField]) + xScale.bandwidth()/2)
+            .attr("y", labelYPosition)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#333")
+            .style("font-size", `${fontSize}px`)
+            .text(d => d[xField]);
+    } else {
+        // 多行标签
+        chartData.forEach((d, i) => {
+            const lines = wrapText(d[xField], xScale.bandwidth());
+            const x = xScale(d[xField]) + xScale.bandwidth()/2;
+            
+            // 添加每一行文本
+            lines.forEach((line, lineIndex) => {
+                g.append("text")
+                    .attr("x", x)
+                    .attr("y", labelYPosition + lineIndex * (minFontSize + 2)) // 每行之间添加2px的间距
+                    .attr("text-anchor", "middle")
+                    .attr("fill", "#333")
+                    .style("font-size", `${minFontSize}px`)
+                    .text(line);
+            });
+        });
+    }
+    
+    // y轴标签 - 仅当确实存在单位时才绘制 (避免显示 sentinel "none")
+    if (yUnit) {
+        g.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -chartHeight / 2)
+            .attr("y", -30)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#333")
+            .style("font-size", "14px")
+            .text(yUnit);
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/new_line_chart_02.js

@@ -0,0 +1,332 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Line Graph",
+    "chart_name": "vertical_bar_chart_new_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[4, 12], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "trend"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 获取y轴单位
+    const yUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 20, right: 30, bottom: 80, left: 50 };
+    
+    // 创建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})`);
+
+    // 创建x轴比例尺 - 使用band scale来显示柱状图
+    const categories = chartData.map(d => d[xField]);
+    const xScale = d3.scaleBand()
+        .domain(categories)
+        .range([0, chartWidth])
+        .padding(0.3);
+    
+    // 获取y值范围
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 最小柱子高度
+    const minBarHeight = 50;
+    
+    // 创建y轴比例尺 - 调整range使小值也有足够高度
+    const effectiveHeight = chartHeight - minBarHeight; // 减去最小柱高
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax * 1.2]) // 为标签留出空间
+        .range([effectiveHeight, 0]); // 调整可用高度范围
+    
+    // 获取柱状图颜色 - 使用colorResolver.other("primary").value
+    const barColor = colorResolver.other("primary").value;
+    
+    // 创建渐变定义
+    const defs = svg.append("defs");
+    
+    // 为每个柱子创建唯一的渐变ID
+    chartData.forEach((d, i) => {
+        const gradientId = `barGradient-${i}`;
+        
+        // 创建线性渐变
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%") // 顶部
+            .attr("x2", "0%")
+            .attr("y2", "100%"); // 底部
+        
+        // 添加渐变停止点
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", barColor)
+            .attr("stop-opacity", 0.25); // 顶部透明度
+        
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", "white")
+            .attr("stop-opacity", 1.0); // 底部透明度
+    });
+    
+    // 添加柱状图
+    g.selectAll(".bar")
+        .data(chartData)
+        .enter()
+        .append("rect")
+        .attr("class", "bar")
+        .attr("x", d => xScale(d[xField]))
+        .attr("y", d => yScale(+d[yField]))
+        .attr("width", xScale.bandwidth())
+        .attr("height", d => {
+            // 确保柱子高度至少为minBarHeight
+            return chartHeight - yScale(+d[yField]);
+        })
+        .attr("fill", (d, i) => `url(#barGradient-${i})`) // 使用渐变填充
+        .attr("rx", 4) // 圆角
+        .attr("ry", 4);
+    
+    // 创建线条生成器，连接各个数据点
+    const line = d3.line()
+        .x(d => xScale(d[xField]) + xScale.bandwidth()/2)
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear);
+    
+    // 添加连接线
+    g.append("path")
+        .datum(chartData)
+        .attr("fill", "none")
+        .attr("stroke", barColor)
+        .attr("stroke-width", 2)
+        .attr("d", line);
+    
+    // 添加数据点圆圈和标签
+    const circleRadius = 8; // 更小的圆圈
+    
+    // 添加数据点圆圈
+    g.selectAll(".data-point")
+        .data(chartData)
+        .enter()
+        .append("circle")
+        .attr("class", "data-point")
+        .attr("cx", d => xScale(d[xField]) + xScale.bandwidth()/2)
+        .attr("cy", d => yScale(+d[yField]))
+        .attr("r", circleRadius)
+        .attr("fill", "white")
+        .attr("stroke", barColor)
+        .attr("stroke-width", 2);
+    
+    // 添加数据标签，使用正确的单位
+    g.selectAll(".value-text")
+        .data(chartData)
+        .enter()
+        .append("text")
+        .attr("x", d => xScale(d[xField]) + xScale.bandwidth()/2)
+        .attr("y", d => yScale(+d[yField]) - circleRadius - 5) // 放在圆圈上方
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "white")
+        .style("font-size", "12px")
+        .style("font-weight", "bold")
+        .text(d => `${chartUtils.format.autoText(+d[yField])}`);
+    
+    // 添加图标，使用images对象中的base64数据
+    // 放在柱状图底部，宽度与柱状图相同，减少空隙
+    g.selectAll(".icon")
+        .data(chartData)
+        .enter()
+        .append("image")
+        .attr("x", d => xScale(d[xField])) // 与柱状图左边缘对齐
+        .attr("y", chartHeight - xScale.bandwidth()) // 紧贴柱状图底部
+        .attr("width", xScale.bandwidth()) // 宽度与柱状图相同
+        .attr("height", xScale.bandwidth()) 
+        .attr("xlink:href", d => {
+            // 从images.field获取对应的图标base64数据
+            if (images && images.field && images.field[d[xField]]) {
+                return images.field[d[xField]];
+            }
+            // 如果没有找到对应的图标，返回null
+            return null;
+        });
+    
+    // 计算x轴标签是否需要换行和合适的字体大小
+    const calculateLabelFormat = () => {
+        // 创建临时canvas用于测量文本宽度
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        
+        // 初始字体大小
+        let fontSize = 12;
+        const minFontSize = 8; // 最小字体大小
+        const padding = 5; // 标签之间的最小间距
+        let needsWordWrap = false;
+        
+        // 测试字体大小是否会导致标签重叠
+        while (fontSize >= minFontSize) {
+            context.font = `${fontSize}px sans-serif`;
+            
+            let isOverlapping = false;
+            
+            // 计算每个标签的宽度
+            const labelWidths = categories.map(category => {
+                return chartUtils.text.contextWidth(context, category);
+            });
+            
+            // 检查相邻标签是否重叠
+            for (let i = 0; i < categories.length - 1; i++) {
+                const leftLabelWidth = labelWidths[i] / 2;
+                const rightLabelWidth = labelWidths[i + 1] / 2;
+                
+                const leftCenter = xScale(categories[i]) + xScale.bandwidth() / 2;
+                const rightCenter = xScale(categories[i + 1]) + xScale.bandwidth() / 2;
+                
+                const distance = rightCenter - leftCenter;
+                
+                if (leftLabelWidth + rightLabelWidth + padding > distance) {
+                    isOverlapping = true;
+                    break;
+                }
+            }
+            
+            // 如果不重叠，无需继续减小字体
+            if (!isOverlapping) {
+                break;
+            }
+            
+            // 减小字体大小
+            fontSize -= 1;
+        }
+        
+        // 检查是否需要换行（达到最小字体仍然重叠）
+        if (fontSize < minFontSize) {
+            fontSize = minFontSize;
+            needsWordWrap = true;
+        }
+        
+        return { fontSize, needsWordWrap };
+    };
+    
+    // 将文本分成多行
+    const wrapText = (text, bandWidth) => {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        context.font = `${minFontSize}px sans-serif`;
+        
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = words[0];
+        
+        for (let i = 1; i < words.length; i++) {
+            const word = words[i];
+            const width = chartUtils.text.contextWidth(context, currentLine + ' ' + word);
+            
+            if (width < bandWidth * 0.8) { // 保留一些边距
+                currentLine += ' ' + word;
+            } else {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        lines.push(currentLine);
+        
+        return lines;
+    };
+    
+    // 获取合适的标签格式
+    const { fontSize, needsWordWrap } = calculateLabelFormat();
+    const minFontSize = 8; // 定义为常量，供wrapText使用
+    
+    // 添加x轴标签，调整位置使其靠近柱��图底部
+    const labelYPosition = chartHeight + 25; // 减少与柱状图底部的间距
+    
+    if (!needsWordWrap) {
+        // 单行标签
+        g.selectAll(".x-label")
+            .data(chartData)
+            .enter()
+            .append("text")
+            .attr("x", d => xScale(d[xField]) + xScale.bandwidth()/2)
+            .attr("y", labelYPosition)
+            .attr("text-anchor", "middle")
+            .attr("fill", "white")
+            .style("font-size", `${fontSize}px`)
+            .text(d => d[xField]);
+    } else {
+        // 多行标签
+        chartData.forEach((d, i) => {
+            const lines = wrapText(d[xField], xScale.bandwidth());
+            const x = xScale(d[xField]) + xScale.bandwidth()/2;
+            
+            // 添加每一行文本
+            lines.forEach((line, lineIndex) => {
+                g.append("text")
+                    .attr("x", x)
+                    .attr("y", labelYPosition + lineIndex * (minFontSize + 2)) // 每行之间添加2px的间距
+                    .attr("text-anchor", "middle")
+                    .attr("fill", "white")
+                    .style("font-size", `${minFontSize}px`)
+                    .text(line);
+            });
+        });
+    }
+    
+    // y轴标签 - 仅当确实存在单位时才绘制 (避免显示 sentinel "none")
+    if (yUnit) {
+        g.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -chartHeight / 2)
+            .attr("y", -30)
+            .attr("text-anchor", "middle")
+            .attr("fill", "white")
+            .style("font-size", "14px")
+            .text(yUnit);
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/slope_chart_01.js

@@ -0,0 +1,550 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Slope Chart",
+    "chart_name": "slope_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], ["-inf", "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 60, right: 30, bottom: 60, left: 60 };
+    
+    // 创建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 groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 使用数据的实际范围
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 为了美观，稍微扩展Y轴范围
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.max(0, yMin - yPadding); // 确保下限不小于0
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 创建颜色比例尺 - 使用提供的颜色或默认颜色
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "category10" }).value;
+    
+    // 获取实际的Y轴刻度
+    const yTicks = yScale.ticks(5);
+    
+    // 添加水平网格线 - 包括刻度之间的额外网格线
+    // 首先添加主要刻度的网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#dddddd")
+            .attr("stroke-width", 1)
+            .attr("class", "background");
+    });
+    
+    // 添加刻度之间的额外网格线
+    if (yTicks.length > 1) {
+        for (let i = 0; i < yTicks.length - 1; i++) {
+            const currentTick = yTicks[i];
+            const nextTick = yTicks[i + 1];
+            const midValue = (currentTick + nextTick) / 2;
+            
+            g.append("line")
+                .attr("x1", 0)
+                .attr("y1", yScale(midValue))
+                .attr("x2", chartWidth)
+                .attr("y2", yScale(midValue))
+                .attr("stroke", "#dddddd")
+                .attr("stroke-width", 1)
+                .attr("class", "background");
+        }
+    }
+    
+    // 添加Y轴刻度文本 - 保留0位小数，不带百分号
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(chartUtils.format.integer(tick).text); // 四舍五入到整数，不带百分号
+    });
+    
+    // 添加X轴刻度文本
+    xTicks.forEach(tick => {
+        
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    // 添加X轴线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#aaa")
+        .attr("stroke-width", 1);
+    
+    // 定义线条粗细
+    const lineWidth = 4;
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear); // 改为折线
+    
+    // 收集需要标注的数据点 - 只收集起点和终点
+    const startPoints = [];
+    const endPoints = [];
+    
+    groupedData.forEach((values, group) => {
+        // 确保数据按日期排序
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        
+        // 只获取第一个和最后一个点
+        const firstPoint = values[0];
+        const lastPoint = values[values.length - 1];
+        
+        // 创建只包含首尾两点的数据
+        const slopeData = [firstPoint, lastPoint];
+        
+        // 绘制线条
+        g.append("path")
+            .datum(slopeData)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", lineWidth)
+            .attr("d", line);
+        
+        // 收集需要标注的点
+        // 起点
+        startPoints.push({
+            x: xScale(chartUtils.format.parseDate(firstPoint[xField])),
+            y: yScale(+firstPoint[yField]),
+            value: chartUtils.format.integer(firstPoint[yField]).text,
+            color: color,
+            group: group,
+            point: firstPoint
+        });
+        
+        // 终点
+        endPoints.push({
+            x: xScale(chartUtils.format.parseDate(lastPoint[xField])),
+            y: yScale(+lastPoint[yField]),
+            value: chartUtils.format.integer(lastPoint[yField]).text,
+            color: color,
+            group: group,
+            point: lastPoint
+        });
+    });
+    
+    // 分别对起点和终点应用动态规划 - 添加g参数
+    const startLabelPositions = placeLabelsDP(startPoints, yTicks.map(tick => yScale(tick)), "起点", chartHeight, chartWidth, g);
+    const endLabelPositions = placeLabelsDP(endPoints, yTicks.map(tick => yScale(tick)), "终点", chartHeight, chartWidth, g);
+    
+    // 绘制标签函数 - 保持multiple_line_graph_10的样式
+    function drawLabels(labelPositions) {
+        labelPositions.forEach(placement => {
+            const point = placement.point;
+            const labelY = placement.labelY;
+            
+            // 计算标签文本和宽度
+            const labelText = point.value;
+            const labelWidth = chartUtils.text.measure(null, labelText, { fontSize: 14, fontWeight: "bold" }).width + 10;
+            const labelHeight = 24;
+            
+            // 添加圆角矩形背景
+            g.append("rect")
+                .attr("x", point.x - labelWidth / 2)
+                .attr("y", labelY + labelHeight / 2)
+                .attr("width", labelWidth)
+                .attr("height", labelHeight)
+                .attr("rx", 5)
+                .attr("ry", 5)
+                .attr("fill", point.color);
+            
+            // 添加文本 - 白色粗体
+            g.append("text")
+                .attr("x", point.x)
+                .attr("y", labelY + labelHeight)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#fff")
+                .attr("font-weight", "bold")
+                .style("font-size", "14px")
+                .text(labelText);
+        });
+    }
+    
+    // 绘制所有标签 - 只绘制起点和终点
+    drawLabels(startLabelPositions);
+    drawLabels(endLabelPositions);
+    
+    const legendSize = chartUtils.legend.draw(g, groups, {
+        fontSize: 14,
+        fontWeight: "bold",
+        maxWidth: chartWidth,
+        markerShape: "line",
+        markerSize: 10,
+        strokeWidth: 4,
+        colorScale,
+    });
+
+    const maxYTickPosition = yScale(yTicks[yTicks.length - 1]);
+    
+    legendSize.group.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${maxYTickPosition - 50 - legendSize.height/2})`);
+    
+    return svg.node();
+}
+
+// 动态规划标签放置算法 - 添加g参数
+function placeLabelsDP(points, avoidYPositions = [], debugName = "", chartHeight, chartWidth, g) {
+    // 每个格点的高度（像素）
+    const GRID_SIZE = 3;
+    // 圆点周围的保护区域（格点数）
+    const PROTECTION_RADIUS = 3;
+    // 标签高度（格点数）
+    const LABEL_HEIGHT = 10; 
+    
+    // 离散化Y坐标，创建格点系统
+    const minY = 0;
+    const maxY = chartHeight; // 使用传入的chartHeight
+    const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+    
+    // 按照Y坐标排序点
+    points.sort((a, b) => a.y - b.y);
+    
+    // 创建格点占用标记
+    const occupied = new Array(gridCount).fill(false);
+    // 存储占用原因，用于可视化
+    const occupiedReason = new Array(gridCount).fill("");
+    
+    // 标记圆点周围的保护区域为已占用
+    points.forEach((point, idx) => {
+        const gridY = Math.floor(point.y / GRID_SIZE) - 3;
+        for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+            occupied[i] = true;
+            occupiedReason[i] = `数据点${idx + 1}保护区`;
+        }
+    });
+    
+    
+    // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+    const n = points.length;
+    const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+    const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+    
+    // 初始条件：第一个点的标签放置
+    const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+    
+    // 尝试将第一个点的标签放在可行的位置
+    for (let j = 0; j < gridCount; j++) {
+        // 检查是否可行（不在保护区域内且有足够空间放置标签）
+        if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+            // 检查标签是否会与其他标签重叠
+            let canPlace = true;
+            for (let k = 0; k < LABEL_HEIGHT; k++) {
+                if (j + k < gridCount && occupied[j + k]) {
+                    canPlace = false;
+                    break;
+                }
+            }
+            
+            if (canPlace) {
+                // 计算代价：与圆点位置的距离
+                const cost = Math.abs(j - firstPointGridY);
+                dp[0][j] = cost;
+            }
+        }
+    }
+    
+    // 填充dp表
+    for (let i = 1; i < n; i++) {
+        const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+        
+        for (let j = 0; j < gridCount; j++) {
+            // 检查当前位置是否可行
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                if (canPlace) {
+                    // 根据上一个点的标签位置计算当前最小代价
+                    for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                        if (dp[i-1][k] !== Infinity) {
+
+                            // 当前标签的代价
+                            const curCost = Math.abs(j - pointGridY);
+                            const totalCost = dp[i-1][k] + curCost;
+                            
+                            if (totalCost < dp[i][j]) {
+                                dp[i][j] = totalCost;
+                                prev[i][j] = k; // 记录前驱
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // 找出最后一个点的最优放置位置
+    let minCost = Infinity;
+    let bestPos = -1;
+    
+    for (let j = 0; j < gridCount; j++) {
+        if (dp[n-1][j] < minCost) {
+            minCost = dp[n-1][j];
+            bestPos = j;
+        }
+    }
+    
+    // 存储最终选择的标签位置（格点索引）
+    const selectedGridPositions = [];
+    
+    // 回溯构建结果
+    const labelPositions = [];
+    if (bestPos !== -1) {
+        // 从后向前回溯
+        let pos = bestPos;
+        
+        for (let i = n - 1; i >= 0; i--) {
+            labelPositions.unshift({
+                point: points[i],
+                labelY: pos * GRID_SIZE
+            });
+            
+            // 记录选择的位置
+            selectedGridPositions.unshift(pos);
+            
+            pos = prev[i][pos];
+        }
+    } else {
+        // 无可行解，退化为简单方案处理
+        let lastY = 0;
+        for (let i = 0; i < n; i++) {
+            const point = points[i];
+            // 确保标签不超过下一个圆点的位置
+            let maxY = chartHeight;
+            if (i < n - 1) {
+                maxY = points[i+1].y;
+            }
+            
+            const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+            
+            labelPositions.push({
+                point: point,
+                labelY: labelY
+            });
+            
+            lastY = labelY;
+        }
+    }
+
+    const debug = false;
+    
+    // 添加格子系统可视化
+    if (debug && points.length > 0) {
+        // 确定可视化的位置 - 使用数据点的X位���
+        const mainPointX = points.length > 0 ? points[0].x : 0; // 使用该组第一个点的X位置
+        const visX = mainPointX;
+        const visY = 10; // 从图表顶部开始
+        const visWidth = 50; // 减小宽度以免干扰图表
+        
+        // 创建一个组用于添加可视化元素，并在需要时应用剪切
+        const visGroup = g.append("g");
+        
+        // 限制可视化高度，避免太长
+        const maxVisHeight = chartHeight - 20;
+        const visibleGridCount = Math.min(gridCount, Math.floor(maxVisHeight / GRID_SIZE));
+        
+        // 添加半透明背景
+        visGroup.append("rect")
+            .attr("x", visX - 5)
+            .attr("y", visY - 15)
+            .attr("width", visWidth + 10)
+            .attr("height", visibleGridCount * GRID_SIZE + 50)
+            .attr("fill", "#fff")
+            .attr("opacity", 0.8)
+            .attr("rx", 5);
+        
+        // 添加标题
+        visGroup.append("text")
+            .attr("x", visX + visWidth/2)
+            .attr("y", visY - 5)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#333")
+            .style("font-size", "10px")
+            .text(debugName + "标签位置");
+        
+        // 绘制每个格子
+        for (let i = 0; i < visibleGridCount; i++) {
+            // 计算格子的颜色
+            let fillColor = "#ddd"; // 默认颜色 - 可用格子
+            
+            if (occupied[i]) {
+                fillColor = "#ffcccc"; // 不可用格子 - 红色
+            }
+            
+            // 标记最终选择的位置
+            const isSelected = selectedGridPositions.some(pos => {
+                // 检查格子是否在标签范围内
+                for (let j = 0; j < LABEL_HEIGHT; j++) {
+                    if (pos + j === i) return true;
+                }
+                return false;
+            });
+            
+            if (isSelected) {
+                fillColor = "#99ff99"; // 选中的格子 - 绿色
+            }
+            
+            // 绘制格子
+            visGroup.append("rect")
+                .attr("x", visX)
+                .attr("y", visY + i * GRID_SIZE)
+                .attr("width", visWidth)
+                .attr("height", GRID_SIZE)
+                .attr("fill", fillColor)
+                .attr("stroke", "#ccc")
+                .attr("stroke-width", 0.2);
+        }
+        
+        // 添加数据点位置标记 - 只显示该组的点
+        points.forEach((point, idx) => {
+            const gridY = Math.floor(point.y / GRID_SIZE);
+            
+            // 仅当点位置在可视范围内时添加
+            if (gridY < visibleGridCount) {
+                // 绘制数据点位置线
+                visGroup.append("line")
+                    .attr("x1", visX - 3)
+                    .attr("y1", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("x2", visX + visWidth)
+                    .attr("y2", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("stroke", point.color)
+                    .attr("stroke-width", 1)
+                    .attr("stroke-dasharray", "2,1");
+                
+                // 添加简短的数据点标识
+                visGroup.append("text")
+                    .attr("x", visX - 5)
+                    .attr("y", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("text-anchor", "end")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", point.color)
+                    .style("font-size", "8px")
+                    .text("点" + (idx + 1));
+            }
+        });
+        
+        // 在底部添加简化的图例
+        const legendY = visY + visibleGridCount * GRID_SIZE + 5;
+        const legendItems = [
+            { label: "可用", color: "#ddd" },
+            { label: "占用", color: "#ffcccc" },
+            { label: "选中", color: "#99ff99" }
+        ];
+        
+        legendItems.forEach((item, idx) => {
+            // 水平放置图例项
+            const itemX = visX + idx * (visWidth / 3);
+            
+            visGroup.append("rect")
+                .attr("x", itemX)
+                .attr("y", legendY)
+                .attr("width", 6)
+                .attr("height", 6)
+                .attr("fill", item.color);
+            
+            visGroup.append("text")
+                .attr("x", itemX + 8)
+                .attr("y", legendY + 3)
+                .attr("text-anchor", "start")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#333")
+                .style("font-size", "6px")
+                .text(item.label);
+        });
+    }
+    
+    return labelPositions;
+} 

modules/chart_engine/template/d3-js/line_graph/slope_chart_02.js

@@ -0,0 +1,551 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Slope Chart",
+    "chart_name": "slope_chart_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], ["-inf", "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 60, right: 30, bottom: 60, left: 60 };
+    
+    // 创建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 groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 使用数据的实际范围
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    
+    // 为了美观，稍微扩展Y轴范围
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.max(0, yMin - yPadding); // 确保下限不小于0
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 创建颜色比例尺 - 使用提供的颜色或默认颜色
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "category10" }).value;
+    
+    // 获取实际的Y轴刻度
+    const yTicks = yScale.ticks(5);
+    
+    // 添加水平网格线 - 包括刻度之间的额外网格线
+    // 首先添加主要刻度的网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#dddddd")
+            .attr("stroke-width", 1)
+            .attr("class", "background");
+    });
+    
+    // 添加刻度之间的额外网格线
+    if (yTicks.length > 1) {
+        for (let i = 0; i < yTicks.length - 1; i++) {
+            const currentTick = yTicks[i];
+            const nextTick = yTicks[i + 1];
+            const midValue = (currentTick + nextTick) / 2;
+            
+            g.append("line")
+                .attr("x1", 0)
+                .attr("y1", yScale(midValue))
+                .attr("x2", chartWidth)
+                .attr("y2", yScale(midValue))
+                .attr("stroke", "#dddddd")
+                .attr("stroke-width", 1)
+                .attr("class", "background");
+        }
+    }
+    
+    // 添加Y轴刻度文本 - 保留0位小数，不带百分号
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .style("font-size", "14px")
+            .text(chartUtils.format.integer(tick).text); // 四舍五入到整数，不带百分号
+    });
+    
+    // 添加X轴刻度文本
+    xTicks.forEach(tick => {
+        
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    // 添加X轴线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#aaa")
+        .attr("stroke-width", 1);
+    
+    // 定义线条粗细
+    const lineWidth = 4;
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveLinear); // 改为折线
+    
+    // 收集需要标注的数据点 - 只收集起点和终点
+    const startPoints = [];
+    const endPoints = [];
+    
+    groupedData.forEach((values, group) => {
+        // 确保数据按日期排序
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        
+        // 只获取第一个和最后一个点
+        const firstPoint = values[0];
+        const lastPoint = values[values.length - 1];
+        
+        // 创建只包含首尾两点的数据
+        const slopeData = [firstPoint, lastPoint];
+        
+        // 绘制线条
+        g.append("path")
+            .datum(slopeData)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", lineWidth)
+            .attr("d", line);
+        
+        // 收集需要标注的点
+        // 起点
+        startPoints.push({
+            x: xScale(chartUtils.format.parseDate(firstPoint[xField])),
+            y: yScale(+firstPoint[yField]),
+            value: chartUtils.format.integer(firstPoint[yField]).text,
+            color: color,
+            group: group,
+            point: firstPoint
+        });
+        
+        // 终点
+        endPoints.push({
+            x: xScale(chartUtils.format.parseDate(lastPoint[xField])),
+            y: yScale(+lastPoint[yField]),
+            value: chartUtils.format.integer(lastPoint[yField]).text,
+            color: color,
+            group: group,
+            point: lastPoint
+        });
+    });
+    
+    // 分别对起点和终点应用动态规划 - 添加g参数
+    const startLabelPositions = placeLabelsDP(startPoints, yTicks.map(tick => yScale(tick)), "起点", chartHeight, chartWidth, g);
+    const endLabelPositions = placeLabelsDP(endPoints, yTicks.map(tick => yScale(tick)), "终点", chartHeight, chartWidth, g);
+    
+    // 绘制标签函数 - 保持multiple_line_graph_10的样式
+    function drawLabels(labelPositions) {
+        labelPositions.forEach(placement => {
+            const point = placement.point;
+            const labelY = placement.labelY;
+            
+            // 计算标签文本和宽度
+            const labelText = point.value;
+            const labelWidth = chartUtils.text.measure(null, labelText, { fontSize: 14, fontWeight: "bold" }).width + 10;
+            const labelHeight = 24;
+            
+            // 添加圆角矩形背景
+            g.append("rect")
+                .attr("x", point.x - labelWidth / 2)
+                .attr("y", labelY + labelHeight / 2)
+                .attr("width", labelWidth)
+                .attr("height", labelHeight)
+                .attr("rx", 5)
+                .attr("ry", 5)
+                .attr("fill", point.color);
+            
+            // 添加文本 - 白色粗体
+            g.append("text")
+                .attr("x", point.x)
+                .attr("y", labelY + labelHeight)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .attr("font-weight", "bold")
+                .style("font-size", "14px")
+                .text(labelText);
+        });
+    }
+    
+    // 绘制所有标签 - 只绘制起点和终点
+    drawLabels(startLabelPositions);
+    drawLabels(endLabelPositions);
+    
+    const legendSize = chartUtils.legend.draw(g, groups, {
+        fontSize: 14,
+        fontWeight: "bold",
+        maxWidth: chartWidth,
+        markerShape: "line",
+        markerSize: 10,
+        strokeWidth: 4,
+        colorScale,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+    });
+
+    const maxYTickPosition = yScale(yTicks[yTicks.length - 1]);
+    
+    legendSize.group.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${maxYTickPosition - 50 - legendSize.height/2})`);
+    
+    return svg.node();
+}
+
+// 动态规划标签放置算法 - 添加g参数
+function placeLabelsDP(points, avoidYPositions = [], debugName = "", chartHeight, chartWidth, g) {
+    // 每个格点的高度（像素）
+    const GRID_SIZE = 3;
+    // 圆点周围的保护区��（格点数）
+    const PROTECTION_RADIUS = 3;
+    // 标签高度（格点数）
+    const LABEL_HEIGHT = 10; 
+    
+    // 离散化Y坐标，创建格点系统
+    const minY = 0;
+    const maxY = chartHeight; // 使用传入的chartHeight
+    const gridCount = Math.ceil((maxY - minY) / GRID_SIZE);
+    
+    // 按照Y坐标排序点
+    points.sort((a, b) => a.y - b.y);
+    
+    // 创建格点占用标记
+    const occupied = new Array(gridCount).fill(false);
+    // 存储占用原因，用于可视化
+    const occupiedReason = new Array(gridCount).fill("");
+    
+    // 标记圆点周围的保护区域为已占用
+    points.forEach((point, idx) => {
+        const gridY = Math.floor(point.y / GRID_SIZE) - 3;
+        for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+            occupied[i] = true;
+            occupiedReason[i] = `数据点${idx + 1}保护区`;
+        }
+    });
+    
+    
+    // 定义状态: dp[i][j] 表示前i个点，第i个点的标签放在第j个格点时的最小代价
+    const n = points.length;
+    const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+    const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+    
+    // 初始条件：第一个点的标签放置
+    const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+    
+    // 尝试将第一个点的标签放在可行的位置
+    for (let j = 0; j < gridCount; j++) {
+        // 检查是否可行（不在保护区域内且有足够空间放置标签）
+        if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+            // 检查标签是否会与其他标签重叠
+            let canPlace = true;
+            for (let k = 0; k < LABEL_HEIGHT; k++) {
+                if (j + k < gridCount && occupied[j + k]) {
+                    canPlace = false;
+                    break;
+                }
+            }
+            
+            if (canPlace) {
+                // 计算代价：与圆点位置的距离
+                const cost = Math.abs(j - firstPointGridY);
+                dp[0][j] = cost;
+            }
+        }
+    }
+    
+    // 填充dp表
+    for (let i = 1; i < n; i++) {
+        const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+        
+        for (let j = 0; j < gridCount; j++) {
+            // 检查当前位置是否可行
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                // 检查标签是否会与其他标签重叠
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                
+                if (canPlace) {
+                    // 根据上一个点的标签位置计算当前最小代价
+                    for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                        if (dp[i-1][k] !== Infinity) {
+
+                            // 当前标签的代价
+                            const curCost = Math.abs(j - pointGridY);
+                            const totalCost = dp[i-1][k] + curCost;
+                            
+                            if (totalCost < dp[i][j]) {
+                                dp[i][j] = totalCost;
+                                prev[i][j] = k; // 记录前驱
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // 找出最后一个点的最优放置位置
+    let minCost = Infinity;
+    let bestPos = -1;
+    
+    for (let j = 0; j < gridCount; j++) {
+        if (dp[n-1][j] < minCost) {
+            minCost = dp[n-1][j];
+            bestPos = j;
+        }
+    }
+    
+    // 存储最终选择的标签位置（格点索引）
+    const selectedGridPositions = [];
+    
+    // 回溯构建结果
+    const labelPositions = [];
+    if (bestPos !== -1) {
+        // 从后向前回溯
+        let pos = bestPos;
+        
+        for (let i = n - 1; i >= 0; i--) {
+            labelPositions.unshift({
+                point: points[i],
+                labelY: pos * GRID_SIZE
+            });
+            
+            // 记录选择的位置
+            selectedGridPositions.unshift(pos);
+            
+            pos = prev[i][pos];
+        }
+    } else {
+        // 无可行解，退化为简单方案处理
+        let lastY = 0;
+        for (let i = 0; i < n; i++) {
+            const point = points[i];
+            // 确保标签不超过下一个圆点的位置
+            let maxY = chartHeight;
+            if (i < n - 1) {
+                maxY = points[i+1].y;
+            }
+            
+            const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+            
+            labelPositions.push({
+                point: point,
+                labelY: labelY
+            });
+            
+            lastY = labelY;
+        }
+    }
+
+    const debug = false;
+    
+    // 添加格子系统可视化
+    if (debug && points.length > 0) {
+        // 确定可视化的位置 - 使用数据点的X位置
+        const mainPointX = points.length > 0 ? points[0].x : 0; // 使用该组第一个点的X位置
+        const visX = mainPointX;
+        const visY = 10; // 从图表顶部开始
+        const visWidth = 50; // 减小宽度以免干扰图表
+        
+        // 创建一个组用于添加可视化元素，并在需要时应用剪切
+        const visGroup = g.append("g");
+        
+        // 限制可视化高度，避免太长
+        const maxVisHeight = chartHeight - 20;
+        const visibleGridCount = Math.min(gridCount, Math.floor(maxVisHeight / GRID_SIZE));
+        
+        // 添加半透明背景
+        visGroup.append("rect")
+            .attr("x", visX - 5)
+            .attr("y", visY - 15)
+            .attr("width", visWidth + 10)
+            .attr("height", visibleGridCount * GRID_SIZE + 50)
+            .attr("fill", "#fff")
+            .attr("opacity", 0.8)
+            .attr("rx", 5);
+        
+        // 添加标题
+        visGroup.append("text")
+            .attr("x", visX + visWidth/2)
+            .attr("y", visY - 5)
+            .attr("text-anchor", "middle")
+            .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .style("font-size", "10px")
+            .text(debugName + "标签位置");
+        
+        // 绘制每个格子
+        for (let i = 0; i < visibleGridCount; i++) {
+            // 计算格子的颜色
+            let fillColor = "#ddd"; // 默认颜色 - 可用格子
+            
+            if (occupied[i]) {
+                fillColor = "#ffcccc"; // 不可用格子 - 红色
+            }
+            
+            // 标记最终选择的位置
+            const isSelected = selectedGridPositions.some(pos => {
+                // 检查格子是否在标签范围内
+                for (let j = 0; j < LABEL_HEIGHT; j++) {
+                    if (pos + j === i) return true;
+                }
+                return false;
+            });
+            
+            if (isSelected) {
+                fillColor = "#99ff99"; // 选中的格子 - 绿色
+            }
+            
+            // 绘制格子
+            visGroup.append("rect")
+                .attr("x", visX)
+                .attr("y", visY + i * GRID_SIZE)
+                .attr("width", visWidth)
+                .attr("height", GRID_SIZE)
+                .attr("fill", fillColor)
+                .attr("stroke", "#ccc")
+                .attr("stroke-width", 0.2);
+        }
+        
+        // 添加数据点位置标记 - 只显示该组的点
+        points.forEach((point, idx) => {
+            const gridY = Math.floor(point.y / GRID_SIZE);
+            
+            // 仅当点位置在可视范围内时添加
+            if (gridY < visibleGridCount) {
+                // 绘制数据点位置线
+                visGroup.append("line")
+                    .attr("x1", visX - 3)
+                    .attr("y1", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("x2", visX + visWidth)
+                    .attr("y2", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("stroke", point.color)
+                    .attr("stroke-width", 1)
+                    .attr("stroke-dasharray", "2,1");
+                
+                // 添加简短的数据点标识
+                visGroup.append("text")
+                    .attr("x", visX - 5)
+                    .attr("y", visY + gridY * GRID_SIZE + GRID_SIZE/2)
+                    .attr("text-anchor", "end")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+                    .style("font-size", "8px")
+                    .text("点" + (idx + 1));
+            }
+        });
+        
+        // 在底部添加简化的图例
+        const legendY = visY + visibleGridCount * GRID_SIZE + 5;
+        const legendItems = [
+            { label: "可用", color: "#ddd" },
+            { label: "占用", color: "#ffcccc" },
+            { label: "选中", color: "#99ff99" }
+        ];
+        
+        legendItems.forEach((item, idx) => {
+            // 水平放置图例项
+            const itemX = visX + idx * (visWidth / 3);
+            
+            visGroup.append("rect")
+                .attr("x", itemX)
+                .attr("y", legendY)
+                .attr("width", 6)
+                .attr("height", 6)
+                .attr("fill", item.color);
+            
+            visGroup.append("text")
+                .attr("x", itemX + 8)
+                .attr("y", legendY + 3)
+                .attr("text-anchor", "start")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .style("font-size", "6px")
+                .text(item.label);
+        });
+    }
+    
+    return labelPositions;
+} 

modules/chart_engine/template/d3-js/line_graph/small_multiple_line_graph_01.js

@@ -0,0 +1,564 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "small multiple line graph",
+    "chart_name": "small_multiple_line_graph_01",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 8]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["stroke", "spacing"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = (jsonData.data && 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 || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        title: { font_family: "Arial", font_size: "14px", font_weight: "bold" }
+    };
+    const sourceColors = jsonData.colors || {};
+    const colorField = sourceColors.field || {};
+    const colorOther = sourceColors.other || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const groupColumn = chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || {};
+    const xField = xColumn.name || "date";
+    const yField = yColumn.name || "value";
+    const groupField = groupColumn.name || "group";
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    const width = Number(variables.width) || 800;
+    const height = Number(variables.height) || 620;
+    const textColor = sourceColors.text_color || "#243041";
+    const primaryColor = colorOther.primary || "#2f7db7";
+    const secondaryColor = colorOther.secondary || "#5b8f69";
+    const canvasColor = "#eef7f4";
+    const panelColor = "#fffdf7";
+    const cardColor = "#ffffff";
+    const linePalette = ["#2f7db7", "#f07a2b", "#67a84f", "#d6a22b", "#7b68b2", "#bf5f8d", "#2d9c9c", "#5a6f8f"];
+    const labelTypography = typography.label || {};
+    const titleTypography = typography.title || labelTypography;
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const titleFamily = titleTypography.font_family || labelFamily;
+    const valueFamily = valueTypography.font_family || labelFamily;
+    const labelWeight = labelTypography.font_weight || "normal";
+    const titleWeight = titleTypography.font_weight || "700";
+    const valueWeight = valueTypography.font_weight || "600";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 11;
+    const baseTitleSize = parseFloat(titleTypography.font_size) || 13;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 11;
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    function parseTemporalDate(value) {
+        if (value instanceof Date && Number.isFinite(value.getTime())) return value;
+        const text = String(value ?? "").trim();
+        if (!text) return null;
+
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), 0, 1));
+
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) {
+            return new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3] || 1)));
+        }
+
+        match = text.match(/^Q([1-4])\s+(-?\d{4})$/i) || text.match(/^(-?\d{4})\s+Q([1-4])$/i);
+        if (match) {
+            const year = match[1].length === 4 ? Number(match[1]) : Number(match[2]);
+            const quarter = match[1].length === 4 ? Number(match[2]) : Number(match[1]);
+            return new Date(Date.UTC(year, (quarter - 1) * 3, 1));
+        }
+
+        const season = text.match(/^(spring|summer|fall|autumn|winter)\s+(-?\d{4})$/i);
+        if (season) {
+            const monthBySeason = { spring: 2, summer: 5, fall: 8, autumn: 8, winter: 11 };
+            return new Date(Date.UTC(Number(season[2]), monthBySeason[season[1].toLowerCase()], 1));
+        }
+
+        const parsed = new Date(text);
+        if (Number.isFinite(parsed.getTime())) {
+            return new Date(Date.UTC(parsed.getUTCFullYear(), parsed.getUTCMonth(), parsed.getUTCDate()));
+        }
+        return null;
+    }
+
+    function formatNumber(value) {
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue)) return String(value ?? "");
+        const absValue = Math.abs(numericValue);
+        if (absValue >= 1000000000) return `${d3.format(".3~g")(numericValue / 1000000000)}B`;
+        if (absValue >= 1000000) return `${d3.format(".3~g")(numericValue / 1000000)}M`;
+        if (absValue >= 1000) return `${d3.format(".3~g")(numericValue / 1000)}K`;
+        return d3.format(",.4~g")(numericValue);
+    }
+
+    function formatWithUnit(value, unit) {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "$") return `$${formatted}`;
+        if (unit === "%") return `${formatted}%`;
+        return `${formatted} ${unit}`;
+    }
+
+    function wrapText(text, maxChars) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        if (!words.length) return [String(text || "")];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (next.length <= maxChars) {
+                current = next;
+                return;
+            }
+            if (current) lines.push(current);
+            if (word.length <= maxChars) {
+                current = word;
+                return;
+            }
+            let chunk = "";
+            for (const char of word) {
+                if ((chunk + char).length > maxChars) {
+                    lines.push(`${chunk}-`);
+                    chunk = char;
+                } else {
+                    chunk += char;
+                }
+            }
+            current = chunk;
+        });
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(text || "")];
+    }
+
+    function selectEvenTicks(values, maxTicks) {
+        if (values.length <= maxTicks) return values;
+        const selected = [];
+        for (let i = 0; i < maxTicks; i += 1) {
+            const index = Math.round(i * (values.length - 1) / (maxTicks - 1));
+            const value = values[index];
+            if (!selected.includes(value)) selected.push(value);
+        }
+        return selected;
+    }
+
+    const parsedRows = chartData.map((d, index) => {
+        const date = parseTemporalDate(d[xField]);
+        const value = Number(d[yField]);
+        const group = String(d[groupField] ?? "");
+        return {
+            ...d,
+            __index: index,
+            __date: date,
+            __time: date ? date.getTime() : NaN,
+            __xLabel: String(d[xField] ?? ""),
+            __value: value,
+            __group: group
+        };
+    }).filter(d => d.__date && Number.isFinite(d.__time) && Number.isFinite(d.__value) && d.__group !== "");
+
+    if (!parsedRows.length) return;
+
+    const groups = [];
+    parsedRows.forEach(d => {
+        if (!groups.includes(d.__group)) groups.push(d.__group);
+    });
+    if (!groups.length) return;
+
+    const xLabelByTime = new Map();
+    parsedRows.forEach(d => {
+        if (!xLabelByTime.has(d.__time)) xLabelByTime.set(d.__time, d.__xLabel);
+    });
+
+    const groupSeries = groups.map(group => {
+        const byTime = new Map();
+        parsedRows.filter(d => d.__group === group).forEach(d => {
+            if (!byTime.has(d.__time)) {
+                byTime.set(d.__time, {
+                    date: d.__date,
+                    time: d.__time,
+                    label: d.__xLabel,
+                    valueSum: 0,
+                    count: 0
+                });
+            }
+            const entry = byTime.get(d.__time);
+            entry.valueSum += d.__value;
+            entry.count += 1;
+        });
+        const values = Array.from(byTime.values())
+            .map(d => ({
+                date: d.date,
+                time: d.time,
+                label: d.label,
+                value: d.valueSum / d.count
+            }))
+            .sort((a, b) => a.time - b.time);
+        return { group, values };
+    }).filter(d => d.values.length);
+
+    if (!groupSeries.length) return;
+
+    const xValues = Array.from(new Set(parsedRows.map(d => d.__time)))
+        .sort((a, b) => a - b)
+        .map(time => new Date(time));
+    const allValues = groupSeries.flatMap(series => series.values.map(d => d.value));
+    let yMin = d3.min(allValues);
+    let yMax = d3.max(allValues);
+    if (!Number.isFinite(yMin) || !Number.isFinite(yMax)) return;
+    const rawYMin = yMin;
+    const rawYMax = yMax;
+    if (yMin === yMax) {
+        const pad = Math.max(1, Math.abs(yMin) * 0.1);
+        yMin -= pad;
+        yMax += pad;
+    } else {
+        const pad = (yMax - yMin) * 0.1;
+        yMin -= pad;
+        yMax += pad;
+    }
+    if (rawYMin >= 0) yMin = Math.max(0, yMin);
+    if (rawYMax <= 0) yMax = Math.min(0, yMax);
+    if (yMin > 0 && (yMax - yMin) / Math.max(1, Math.abs(yMax)) > 0.55) yMin = 0;
+
+    const cols = groupSeries.length <= 2 ? groupSeries.length : (groupSeries.length <= 4 ? 2 : 3);
+    const rows = Math.ceil(groupSeries.length / cols);
+    const outer = { top: 20, right: 22, bottom: 26, left: 22 };
+    const gapX = variables.has_spacing === false ? 14 : 20;
+    const gapY = variables.has_spacing === false ? 18 : 24;
+    const panelWidth = (width - outer.left - outer.right - gapX * (cols - 1)) / cols;
+    const panelHeight = (height - outer.top - outer.bottom - gapY * (rows - 1)) / rows;
+    const plot = {
+        left: Math.min(50, Math.max(40, panelWidth * 0.18)),
+        right: 14,
+        top: 50,
+        bottom: 34
+    };
+    const innerWidth = Math.max(80, panelWidth - plot.left - plot.right);
+    const innerHeight = Math.max(70, panelHeight - plot.top - plot.bottom);
+    const tickCount = innerWidth < 145 ? 2 : (innerWidth < 230 ? 3 : 4);
+    const xTicks = selectEvenTicks(xValues, tickCount);
+
+    const xScale = d3.scaleUtc()
+        .domain(d3.extent(xValues))
+        .range([0, innerWidth]);
+    const yScale = d3.scaleLinear()
+        .domain([yMin, yMax])
+        .nice(4)
+        .range([innerHeight, 0]);
+    const yTicks = yScale.ticks(innerHeight < 95 ? 3 : 4);
+
+    const palette = d3.schemeTableau10 || d3.schemeCategory10;
+    const colorScale = d3.scaleOrdinal()
+        .domain(groups)
+        .range(groups.map((group, index) => {
+            if (colorField[group]) return colorField[group];
+            return linePalette[index % linePalette.length] || palette[index % palette.length] || primaryColor;
+        }));
+
+    function formatXTick(date) {
+        const label = xLabelByTime.get(date.getTime());
+        if (label) return label;
+        return d3.utcFormat("%Y")(date);
+    }
+
+    const yScaleNote = rawYMin >= 0
+        ? "Shared y-scale starts at zero for nonnegative data."
+        : "All panels use a shared y-scale from the original values.";
+
+    const line = d3.line()
+        .defined(d => Number.isFinite(d.value))
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    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");
+
+    const defs = svg.append("defs");
+    const panelGradient = defs.append("linearGradient")
+        .attr("id", "small_multiple_line_01_panel_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    panelGradient.append("stop").attr("offset", "0%").attr("stop-color", "#fffef9");
+    panelGradient.append("stop").attr("offset", "100%").attr("stop-color", panelColor);
+    const cardShadow = defs.append("filter")
+        .attr("id", "small_multiple_line_01_card_shadow")
+        .attr("x", "-12%")
+        .attr("y", "-18%")
+        .attr("width", "124%")
+        .attr("height", "140%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 1.4)
+        .attr("stdDeviation", 1.5)
+        .attr("flood-color", "#315d5a")
+        .attr("flood-opacity", 0.12);
+
+    svg.append("rect")
+        .attr("class", "chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", canvasColor);
+
+    svg.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", 9)
+        .attr("y", 9)
+        .attr("width", width - 18)
+        .attr("height", height - 18)
+        .attr("rx", 12)
+        .attr("ry", 12)
+        .attr("fill", "url(#small_multiple_line_01_panel_gradient)")
+        .attr("stroke", "rgba(95, 143, 120, 0.28)")
+        .attr("stroke-width", 1.1);
+
+    groupSeries.forEach((series, index) => {
+        const row = Math.floor(index / cols);
+        const col = index % cols;
+        const panelX = outer.left + col * (panelWidth + gapX);
+        const panelY = outer.top + row * (panelHeight + gapY);
+        const panel = svg.append("g")
+            .attr("class", "subplot")
+            .attr("data-group", series.group)
+            .attr("transform", `translate(${panelX}, ${panelY})`);
+
+        panel.append("rect")
+            .attr("class", "subplot-background subplot-card")
+            .attr("width", panelWidth)
+            .attr("height", panelHeight)
+            .attr("rx", 10)
+            .attr("ry", 10)
+            .attr("fill", cardColor)
+            .attr("stroke", "rgba(91, 134, 119, 0.16)")
+            .attr("stroke-width", 0.9)
+            .style("filter", "url(#small_multiple_line_01_card_shadow)");
+
+        panel.append("rect")
+            .attr("class", "subplot-accent")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", panelWidth)
+            .attr("height", 7)
+            .attr("rx", 10)
+            .attr("ry", 10)
+            .attr("fill", colorScale(series.group))
+            .attr("opacity", 0.9);
+
+        const titleLines = wrapText(series.group, Math.max(9, Math.floor((panelWidth - 20) / 7.2)));
+        panel.append("line")
+            .attr("class", "group-swatch")
+            .attr("x1", 14)
+            .attr("x2", 34)
+            .attr("y1", 23)
+            .attr("y2", 23)
+            .attr("stroke", colorScale(series.group))
+            .attr("stroke-width", 3.2)
+            .attr("stroke-linecap", "round");
+
+        const title = panel.append("text")
+            .attr("class", "label group-label")
+            .attr("data-group", series.group)
+            .attr("x", 42)
+            .attr("y", 20)
+            .attr("text-anchor", "start")
+            .style("font-family", titleFamily)
+            .style("font-size", `${Math.max(10, Math.min(baseTitleSize, 13))}px`)
+            .style("font-weight", titleWeight)
+            .style("fill", textColor);
+        titleLines.slice(0, 3).forEach((lineText, lineIndex) => {
+            title.append("tspan")
+                .attr("x", 42)
+                .attr("dy", lineIndex === 0 ? 0 : 12)
+                .text(lineText);
+        });
+
+        const chart = panel.append("g")
+            .attr("class", "panel-plot")
+            .attr("transform", `translate(${plot.left}, ${plot.top})`);
+
+        yTicks.forEach(tick => {
+            chart.append("line")
+                .attr("class", "gridline")
+                .attr("x1", 0)
+                .attr("x2", innerWidth)
+                .attr("y1", yScale(tick))
+                .attr("y2", yScale(tick))
+                .attr("stroke", rgba(secondaryColor, 0.14))
+                .attr("stroke-width", 1);
+            chart.append("text")
+                .attr("class", "axis-tick y-axis-tick")
+                .attr("x", -7)
+                .attr("y", yScale(tick))
+                .attr("text-anchor", "end")
+                .attr("dominant-baseline", "middle")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(8.5, Math.min(baseLabelSize, 10))}px`)
+                .style("font-weight", labelWeight)
+                .style("fill", rgba(textColor, 0.62))
+                .text(formatWithUnit(tick, yUnit));
+        });
+
+        chart.append("line")
+            .attr("class", "axis-line x-axis-line")
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", innerHeight)
+            .attr("y2", innerHeight)
+            .attr("stroke", rgba(textColor, 0.28))
+            .attr("stroke-width", 1);
+
+        xTicks.forEach(tick => {
+            chart.append("line")
+                .attr("class", "axis-tick-line")
+                .attr("x1", xScale(tick))
+                .attr("x2", xScale(tick))
+                .attr("y1", innerHeight)
+                .attr("y2", innerHeight + 4)
+                .attr("stroke", rgba(textColor, 0.36))
+                .attr("stroke-width", 1);
+            chart.append("text")
+                .attr("class", "axis-tick x-axis-tick")
+                .attr("x", xScale(tick))
+                .attr("y", innerHeight + 17)
+                .attr("text-anchor", "middle")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(8.2, Math.min(baseLabelSize, 9.5))}px`)
+                .style("font-weight", labelWeight)
+                .style("fill", rgba(textColor, 0.72))
+                .text(formatXTick(tick));
+        });
+
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "line mark")
+            .attr("data-group", series.group)
+            .attr("data-count", series.values.length)
+            .attr("data-latest-value", series.values[series.values.length - 1]?.value ?? "")
+            .attr("fill", "none")
+            .attr("stroke", colorScale(series.group))
+            .attr("stroke-width", variables.has_stroke === false ? 2.6 : 3.2)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("d", line);
+
+        chart.selectAll(".point")
+            .data(series.values)
+            .enter()
+            .append("circle")
+            .attr("class", "point mark")
+            .attr("data-group", series.group)
+            .attr("data-time", d => d.time)
+            .attr("data-label", d => d.label)
+            .attr("data-value", d => d.value)
+            .attr("cx", d => xScale(d.date))
+            .attr("cy", d => yScale(d.value))
+            .attr("r", 3)
+            .attr("fill", "#ffffff")
+            .attr("stroke", colorScale(series.group))
+            .attr("stroke-width", 1.7);
+
+        const lastPoint = series.values[series.values.length - 1];
+        if (lastPoint) {
+            const latestText = formatWithUnit(lastPoint.value, yUnit);
+            const latestFontSize = Math.max(8.5, Math.min(baseValueSize, 10.5));
+            const latestY = Math.max(9, Math.min(innerHeight - 5, yScale(lastPoint.value) - 8));
+            const pillWidth = Math.max(34, latestText.length * latestFontSize * 0.58 + 12);
+            chart.append("rect")
+                .attr("class", "latest-value-pill")
+                .attr("data-group", series.group)
+                .attr("x", innerWidth - pillWidth)
+                .attr("y", latestY - latestFontSize + 1)
+                .attr("width", pillWidth)
+                .attr("height", latestFontSize + 8)
+                .attr("rx", 7)
+                .attr("ry", 7)
+                .attr("fill", "#fffdf8")
+                .attr("stroke", rgba(colorScale(series.group), 0.32))
+                .attr("stroke-width", 0.9);
+            chart.append("text")
+                .attr("class", "value latest-value")
+                .attr("data-group", series.group)
+                .attr("data-time", lastPoint.time)
+                .attr("data-label", lastPoint.label)
+                .attr("data-value", lastPoint.value)
+                .attr("x", innerWidth)
+                .attr("y", latestY)
+                .attr("text-anchor", "end")
+                .style("font-family", valueFamily)
+                .style("font-size", `${latestFontSize}px`)
+                .style("font-weight", valueWeight)
+                .style("fill", colorScale(series.group))
+                .text(latestText);
+        }
+    });
+
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", width / 2)
+        .attr("y", height - 13)
+        .attr("text-anchor", "middle")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(8, Math.min(baseValueSize, 10))}px`)
+        .style("font-style", "italic")
+        .style("fill", rgba(textColor, 0.58))
+        .text(yScaleNote);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/line_graph/small_multiple_step_line_graph_01.js

@@ -0,0 +1,288 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Small Multiple Step Line Graph",
+    "chart_name": "small_multiple_step_line_graph_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [4, 4]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "side",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+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_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 20, right: 20, bottom: 20, left: 20 };
+    
+    // 计算子图布局 - 2x2布局或根据组数量调整
+    const rows = Math.ceil(groups.length / 2);
+    const cols = Math.min(groups.length, 2);
+    
+    // 子图尺寸
+    const subplotWidth = (width - margin.left - margin.right) / cols;
+    const subplotHeight = (height - margin.top - margin.bottom) / rows;
+    const subplotMargin = { top: 60, right: 20, bottom: 40, left: 50 };
+    const innerWidth = subplotWidth - subplotMargin.left - subplotMargin.right;
+    const innerHeight = subplotHeight - subplotMargin.top - subplotMargin.bottom;
+    
+    // 创建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");
+    
+    // 创建defs元素用于存放遮罩
+    const defs = svg.append("defs");
+    
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // 为每个组创建子图
+    groups.forEach((group, i) => {
+        const row = Math.floor(i / cols);
+        const col = i % cols;
+        
+        // 子图位置
+        const subplotX = margin.left + col * subplotWidth;
+        const subplotY = margin.top + row * subplotHeight;
+        
+        // 创建子图组
+        const subplot = svg.append("g")
+            .attr("class", "subplot")
+            .attr("transform", `translate(${subplotX}, ${subplotY})`);
+        
+        // 创建图表组
+        const g = subplot.append("g")
+            .attr("transform", `translate(${subplotMargin.left}, ${subplotMargin.top})`);
+        
+        // 获取当前组的数据
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 创建y轴比例尺 - 根据数据调整
+        const groupYMin = Math.min(0, d3.min(groupData, d => +d[yField]) * 1.4);
+        const groupYMax = d3.max(groupData, d => +d[yField]) * 1.1;
+        
+        const yScale = d3.scaleLinear()
+            .domain([groupYMin, groupYMax])
+            .range([innerHeight, 0]);
+        
+        // 添加网格线 - 减少刻度密度
+        const yTicks = yScale.ticks(4); // 从6减少到4
+        yTicks.forEach(tick => {
+            g.append("line")
+                .attr("x1", 0)
+                .attr("y1", yScale(tick))
+                .attr("x2", innerWidth)
+                .attr("y2", yScale(tick))
+                .attr("stroke", "#333")
+                .attr("stroke-width", 0.5);
+        });
+        
+        // 减少X轴刻度密度
+        xTicks.forEach(tick => {
+            g.append("line")
+                .attr("x1", xScale(tick))
+                .attr("y1", 0)
+                .attr("x2", xScale(tick))
+                .attr("y2", innerHeight)
+                .attr("stroke", "#333")
+                .attr("stroke-width", 0.5);
+        });
+        
+        // 添加X轴线条（绘制在0刻度处）
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(0))  // 使用0刻度的Y坐标
+            .attr("x2", innerWidth)
+            .attr("y2", yScale(0))  // 使用0���度的Y坐标
+            .attr("stroke", "#999999")
+            .attr("stroke-width", 1);
+
+        // 如果是最右侧的图表，在右侧也添加Y轴线
+        if (col === cols - 1) {
+            g.append("line")
+                .attr("x1", innerWidth)
+                .attr("y1", 0)
+                .attr("x2", innerWidth)
+                .attr("y2", innerHeight)
+                .attr("stroke", "#999999")
+                .attr("stroke-width", 1);
+        } else {
+            g.append("line")
+                .attr("x1", 0)
+                .attr("y1", 0)
+                .attr("x2", 0)
+                .attr("y2", innerHeight)
+                .attr("stroke", "#999999")
+                .attr("stroke-width", 1);
+        }
+        
+        // 添加标题和图片
+        subplot.append("text")
+            .attr("x", subplotMargin.left + 40)
+            .attr("y", 32)
+            .attr("text-anchor", "start")
+            .style("font-family", 'Impact')
+            .style("font-size", "24px")
+            // .style("font-weight", "bold")
+            .style("fill", "#FFFFFF")
+            .text(group);
+        
+        // 添加组图片（如果有）
+        if (images.field && images.field[group]) {
+            // 创建圆形遮罩
+            const maskId = `circle-mask-${i}`;
+            
+            // 添加圆形遮罩定义
+            defs.append("mask")
+                .attr("id", maskId)
+                .append("circle")
+                .attr("cx", 18)
+                .attr("cy", 18)
+                .attr("r", 19.5)
+                .attr("fill", "white");
+            
+            // 获取图片的base64数据
+            const imgData = images.field[group];
+            
+            // 创建图片容器组
+            const imgGroup = subplot.append("g")
+                .attr("transform", `translate(${subplotMargin.left}, 7)`);
+            
+            // 添加白色圆形边框
+            imgGroup.append("circle")
+                .attr("cx", 18)
+                .attr("cy", 18)
+                .attr("r", 19.5)
+                .attr("fill", "none")
+                .attr("stroke", "white")
+                .attr("stroke-width", 1);
+            
+            // 添加带遮罩的图片
+            imgGroup.append("image")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", 36)
+                .attr("height", 36)
+                .attr("mask", `url(#${maskId})`)
+                .attr("xlink:href", imgData);
+        }
+    
+        // 添加y轴刻度 - 根据位置决定显示左侧还是右侧
+        yTicks.forEach(tick => {
+            
+            // 右侧刻度 - 只有最右侧的图表显示
+            if (col === cols - 1) {
+                g.append("text")
+                    .attr("x", innerWidth + 10)
+                    .attr("y", yScale(tick))
+                    .attr("text-anchor", "start")
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", 'Arial Narrow')
+                    .style("font-size", "16px")
+                    .style("fill", "#d5d5d5")
+                    .text(tick);
+            } else {
+                // 左侧刻度
+                g.append("text")
+                    .attr("x", -10)
+                    .attr("y", yScale(tick))
+                    .attr("text-anchor", "end")
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", 'Arial Narrow')
+                    .style("font-size", "16px")
+                    .style("fill", "#d5d5d5")
+                    .text(tick);
+            }
+        });
+        
+        // 添加x轴刻度
+        xTicks.forEach(tick => {
+            g.append("text")
+                .attr("x", xScale(tick))
+                .attr("y", innerHeight + 25)
+                .attr("text-anchor", "middle")
+                .style("font-family", 'Arial Narrow')
+                .style("font-size", "16px")
+                .style("fill", "#d5d5d5")
+                .text(xFormat(tick));
+        });
+        
+        // 创建线条生成器
+        const line = d3.line()
+            .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+            .y(d => yScale(+d[yField]))
+            .curve(d3.curveStepAfter); // 使用阶梯曲线
+        
+        // 绘制线条
+        g.append("path")
+            .datum(groupData)
+            .attr("fill", "none")
+            .attr("stroke", colorResolver.field(group, 0, { fallbackKey: "primary" }).value) // 蓝色
+            .attr("stroke-width", 2.5)
+            .attr("d", line);
+        
+        // 添加最终利率值标签
+        if (groupData.length > 0) {
+            const lastPoint = groupData[groupData.length - 1];
+            const secondLastPoint = groupData[groupData.length - 2];
+            
+            // 判断最后一段是向上还是向下
+            const isGoingDown = +lastPoint[yField] < +secondLastPoint[yField];
+            
+            // 根据���向决定标签位置
+            const labelOffset = isGoingDown ? 20 : -10;
+
+            const labelXOffset = col === cols - 1 ? -17 : 0;
+            
+            g.append("text")
+                .attr("x", xScale(chartUtils.format.parseDate(lastPoint[xField])) + labelXOffset)
+                .attr("y", yScale(+lastPoint[yField]) + labelOffset)
+                .attr("text-anchor", "middle")
+                .style("font-family", 'Arial Narrow')
+                .style("font-size", "18px")
+                .style("fill", "#d5d5d5")
+                .text(chartUtils.format.fixed(+lastPoint[yField]).text);
+        }
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/spline_graph_01.js

@@ -0,0 +1,491 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Spline Graph",
+    "chart_name": "spline_graph_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 50], [-1000, 1000], [2, 2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "styled",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "comparison"
+}
+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 xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    const lineColor = colorResolver.other("primary", { fallback: "#8364ac" }).value;
+    const positiveColor = colorResolver.other("positive", { fallback: "#ef9522" }).value;
+    const negativeColor = colorResolver.other("negative", { fallback: "#9a8abe" }).value;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 60, right: 40, bottom: 60, left: 60 };
+    
+    // 创建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;
+
+    // 添加背景图片
+    svg.append("image")
+        .attr("xlink:href", 'https://www.yczddgj.com/infographic_assets/line_graph_01_BG.png')
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("preserveAspectRatio", "xMidYMid slice")
+        .attr("class", "background")
+        .attr("x", 0)
+        .attr("y", 0);
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);    
+    
+    // 分离两个组的数据
+    const groupNames = [...new Set(chartData.map(d => d[groupField]))];
+    const group1Data = chartData.filter(d => d[groupField] === groupNames[0]);
+    const group2Data = chartData.filter(d => d[groupField] === groupNames[1]);
+    
+    // 创建一个新的数据集，计算两组之间的差异
+    const diffData = [];
+    
+    // 确保两组数据按年份排序
+    group1Data.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    group2Data.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    
+    // 计算差异
+    for (let i = 0; i < group1Data.length; i++) {
+        const year = group1Data[i][xField];
+        const group1Value = group1Data[i][yField];
+        const group2Item = group2Data.find(d => d[xField] === year);
+        
+        if (group2Item) {
+            const group2Value = group2Item[yField];
+            const diff = group1Value - group2Value;
+            diffData.push({
+                [xField]: year,
+                [yField]: diff
+            });
+        }
+    }
+    
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(diffData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺
+    const yMin = d3.min(diffData, d => +d[yField]);
+    const yMax = d3.max(diffData, d => +d[yField]);
+    const yPadding = Math.max(Math.abs(yMin), Math.abs(yMax)) * 0.1;
+    
+    const yScale = d3.scaleLinear()
+        .domain([Math.min(yMin - yPadding, -5), Math.max(yMax + yPadding, 5)])
+        .range([chartHeight, 0]);
+    
+    // 添加水平网格线
+    const yTicks = d3.ticks(yScale.domain()[0], yScale.domain()[1], 10);
+    
+    // 添加y轴线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", yScale(yTicks[yTicks.length-1])) // 从最大刻度开始
+        .attr("x2", 0)
+        .attr("y2", yScale(yTicks[0])) // 到最小刻度结束
+        .attr("stroke", "#000000")
+        .attr("opacity", 0.1)
+        .attr("stroke-width", 1);
+
+    // 添加y轴刻度和标签
+    yTicks.forEach(tick => {
+        // 添加���度小横线
+        g.append("line")
+            .attr("x1", -5)
+            .attr("y1", yScale(tick))
+            .attr("x2", 0)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#000000")
+            .attr("opacity", 0.1)
+            .attr("stroke-width", 1);
+        
+        
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Century Gothic")
+            .style("font-size", tick === 0 ? "16px" : "12px")
+            .style("font-weight", tick === 0 ? "bold" : "normal") 
+            .style("fill", "#666666")
+            .text(tick + "%");
+    });
+    
+    // 添加x轴刻度和标签
+    xTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", yScale(0))
+            .attr("text-anchor", "middle")
+            .style("font-family", "Century Gothic")
+            .style("font-size", "12px")
+            .style("fill", "#666666")
+            .text(xFormat(tick));
+    });
+    
+    // 创建线条生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveMonotoneX);
+    
+    // 创建渐变定义
+    const defs = svg.append("defs");
+
+    // 创建线条渐变
+    const lineGradient = defs.append("linearGradient")
+        .attr("id", "lineGradient")
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", 0)
+        .attr("y1", yScale(yScale.domain()[1])) // 顶部位置
+        .attr("x2", 0)
+        .attr("y2", yScale(yScale.domain()[0])); // 底部位置
+
+    // 添加渐变色停止点
+    lineGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#e2922b"); // 橙色
+    
+    lineGradient.append("stop")
+        .attr("offset", `${((yScale(0) - 60) / chartHeight) * 100}%`)
+        .attr("stop-color", "#e2922b")
+        .attr("stop-opacity", 1);
+
+    lineGradient.append("stop")
+        .attr("offset", `${(yScale(0) / chartHeight) * 100}%`)
+        .attr("stop-color", "#e2922b")
+        .attr("stop-opacity", 0);
+
+    lineGradient.append("stop")
+        .attr("offset", `${(yScale(0) / chartHeight) * 100}%`)
+        .attr("stop-color", lineColor)
+        .attr("stop-opacity", 0);
+    
+        lineGradient.append("stop")
+        .attr("offset", `${((yScale(0) + 60) / chartHeight) * 100}%`)
+        .attr("stop-color", lineColor)
+        .attr("stop-opacity", 1);
+
+    lineGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", lineColor); // 紫色
+
+    // 绘制线条
+    g.append("path")
+        .datum(diffData)
+        .attr("fill", "none")
+        .attr("stroke", "url(#lineGradient)")
+        .attr("stroke-width", 3)
+        .attr("d", line);
+    
+    // 添加最大值和最小值标注
+    const maxPoint = diffData.reduce((max, p) => p[yField] > max[yField] ? p : max, diffData[0]);
+    g.append("circle")
+        .attr("cx", xScale(chartUtils.format.parseDate(maxPoint[xField])))
+        .attr("cy", yScale(maxPoint[yField]))
+        .attr("r", 6)
+        .attr("fill", "#ffffff")
+        .attr("stroke", positiveColor)
+        .attr("stroke-width", 2.5);
+
+    g.append("text")
+        .attr("x", xScale(chartUtils.format.parseDate(maxPoint[xField])))
+        .attr("y", yScale(maxPoint[yField]) - 15)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Century Gothic")
+        .style("font-size", "12px")
+        .style("font-weight", "bold")
+        .style("fill", positiveColor)
+        .text(chartUtils.format.percent(+maxPoint[yField], { digits: 0 }).text);
+
+    const minPoint = diffData.reduce((min, p) => p[yField] < min[yField] ? p : min, diffData[0]);
+    g.append("circle")
+        .attr("cx", xScale(chartUtils.format.parseDate(minPoint[xField])))
+        .attr("cy", yScale(minPoint[yField]))
+        .attr("r", 6)
+        .attr("fill", "#ffffff")
+        .attr("stroke", negativeColor)
+        .attr("stroke-width", 2.5);
+
+    g.append("text")
+        .attr("x", xScale(chartUtils.format.parseDate(minPoint[xField])))
+        .attr("y", yScale(minPoint[yField]) + 20)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Century Gothic")
+        .style("font-size", "12px")
+        .style("font-weight", "bold")
+        .style("fill", negativeColor)
+        .text(chartUtils.format.percent(+minPoint[yField], { digits: 0 }).text);
+
+    // 添加最新值标注
+    const lastPoint = diffData[diffData.length - 1];
+    if (lastPoint !== maxPoint && lastPoint !== minPoint) {
+        g.append("circle")
+            .attr("cx", xScale(chartUtils.format.parseDate(lastPoint[xField])))
+            .attr("cy", yScale(+lastPoint[yField]))
+            .attr("r", 6)
+            .attr("fill", "#ffffff")
+            .attr("stroke", +lastPoint[yField] >= 0 ? positiveColor : negativeColor)
+            .attr("stroke-width", 2.5);
+
+        g.append("text")
+            .attr("x", xScale(chartUtils.format.parseDate(lastPoint[xField])))
+            .attr("y", yScale(+lastPoint[yField]) + 20)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Century Gothic")
+            .style("font-size", "14px")
+            .style("font-weight", "bold")
+            .style("fill", +lastPoint[yField] >= 0 ? positiveColor : negativeColor)
+            .text(chartUtils.format.percent(+lastPoint[yField], { digits: 0 }).text);
+    }
+    
+    // 添加说明文本
+    const wrapText = (text, width) => {
+        const words = text.split(/\s+/);
+        let line = [];
+        let lines = [];
+        let currentWidth = 0;
+        
+        words.forEach(word => {
+            const wordWidth = chartUtils.text.measure(null, word, { fontSize: 14 }).width;
+            if (currentWidth + wordWidth > width) {
+                lines.push(line.join(' '));
+                line = [word];
+                currentWidth = wordWidth;
+            } else {
+                line.push(word);
+                currentWidth += wordWidth;
+            }
+        });
+        lines.push(line.join(' '));
+        return lines;
+    };
+
+    const nameLines = wrapText(chartUtils.schema.columnField(dataColumns, 1).toUpperCase() + " DIFFERENCE", 140);
+    nameLines.forEach((line, i) => {
+        g.append("text")
+            .attr("x", 20)
+            .attr("y", yScale(yMax) - 5 + i * 15) // 将第一行与最高刻度对齐
+            .attr("text-anchor", "start") 
+            .style("font-family", "Century Gothic")
+            .style("font-size", "12px")
+            .style("font-weight", "bold")
+            .style("fill", "#666666")
+            .text(line);
+    });
+
+    const descLines = wrapText(groupNames[0] + " and " + groupNames[1], 160);
+    descLines.forEach((line, i) => {
+        g.append("text")
+            .attr("x", 20)
+            .attr("y", yScale(yMax) - 5 + nameLines.length * 20 + i * 14) // 相应调整描述文本位置
+            .attr("text-anchor", "start")
+            .style("font-family", "Century Gothic") 
+            .style("font-size", "11px")
+            .style("fill", "#666666")
+            .text(line);
+    });
+
+    // 自动寻找最佳箭头位置
+    function findBestArrowPosition(isUpArrow) {
+        const zeroY = yScale(0);
+        const arrowSize = 100; // 箭头大小为100x100像素
+        const stepSize = 10; // 每10像素尝试一次
+        
+        let bestX = 0;
+        let bestY = 0;
+        let bestCenterDistance = Infinity;
+        
+        // 图表中心点
+        const centerX = chartWidth / 2;
+        const centerY = chartHeight / 2;
+        
+        // 遍历可能的位置
+        for (let x = 40; x <= chartWidth - arrowSize; x += stepSize) {
+            for (let y = 0; y <= chartHeight - arrowSize; y += stepSize) {
+                // 检查是否在正确的区域（上箭头在零线上方，下箭头在零线下方）
+                if ((isUpArrow && y + arrowSize + 20 > zeroY) || (!isUpArrow && y - 20 < zeroY)) {
+                    continue;
+                }
+                
+                // 检查是否与数据线重叠
+                let overlapsLine = false;
+                for (let testX = x; testX < x + arrowSize; testX += 10) {
+                    for (let testY = y; testY < y + arrowSize; testY += 10) {
+                        // 检查是否在数据线附近
+                        for (let i = 0; i < diffData.length - 1; i++) {
+                            const x1 = xScale(chartUtils.format.parseDate(diffData[i][xField]));
+                            const y1 = yScale(diffData[i][yField]);
+                            const x2 = xScale(chartUtils.format.parseDate(diffData[i + 1][xField]));
+                            const y2 = yScale(diffData[i + 1][yField]);
+                            
+                            // 检查测试点是否在线段的范围内
+                            if (testX >= Math.min(x1, x2) && testX <= Math.max(x1, x2)) {
+                                // 计算点到线段的距离
+                                const A = y2 - y1;
+                                const B = x1 - x2;
+                                const C = x2 * y1 - x1 * y2;
+                                
+                                const distance = Math.abs(A * testX + B * testY + C) / 
+                                               Math.sqrt(A * A + B * B);
+                                
+                                if (distance < 5) { // 如果距离小于20像素，认为重叠
+                                    overlapsLine = true;
+                                    break;
+                                }
+                            }
+                        }
+                        if (overlapsLine) break;
+                    }
+                    if (overlapsLine) break;
+                }
+                
+                if (isUpArrow) {
+                }
+                
+                if (!overlapsLine) {
+                    // 计算到中心点的距离
+                    const centerDistance = Math.sqrt(Math.pow(x + arrowSize/2 - centerX, 2) + 
+                                                   Math.pow(y + arrowSize/2 - centerY, 2));
+                    
+                    // 如果这个位置比之前找到的更好，更新最佳位置
+                    if (centerDistance < bestCenterDistance) {
+                        bestX = x;
+                        bestY = y;
+                        bestCenterDistance = centerDistance;
+                    }
+                }
+            }
+        }
+        
+        return { x: bestX, y: bestY };
+    }
+
+    // 获取最佳箭头位置
+    const upArrowPos = findBestArrowPosition(true);
+    const downArrowPos = findBestArrowPosition(false);
+
+    const leftOffset = 20;
+
+    // 添加向上的箭头和向下的箭头
+    g.append("image")
+        .attr("xlink:href", 'https://www.yczddgj.com/infographic_assets/line_graph_01_UpArrow.png')
+        .attr("width", "60")
+        .attr("height", "60")
+        .attr("x", upArrowPos.x + leftOffset)
+        .attr("y", upArrowPos.y);
+    
+    // 根据文本长度计算背景宽度
+    const upLabelWidth = Math.max(groupNames[0].toUpperCase().length * 8 + 5, 100); // 每个字符10px宽度,两边各加20px边距
+    
+    g.append("image")
+        .attr("xlink:href", 'https://www.yczddgj.com/infographic_assets/line_graph_01_UpLabelBG.png')
+        .attr("width", upLabelWidth)
+        .attr("height", "30") 
+        .attr("x", upArrowPos.x + leftOffset - upLabelWidth/2 + 30)
+        .attr("y", upArrowPos.y + 65)
+        .attr("preserveAspectRatio", "none");
+    g.append("text")
+        .attr("x", upArrowPos.x + leftOffset + 30)
+        .attr("y", upArrowPos.y + 85)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Century Gothic")
+        .style("font-size", "14px")
+        .style("font-weight", "bold")
+        .style("fill", "#111111")
+        .style("opacity", 0.8)
+        .text(groupNames[0].toUpperCase());
+    g.append("text")
+        .attr("x", upArrowPos.x + leftOffset + 30)
+        .attr("y", upArrowPos.y + 102)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Century Gothic")
+        .style("font-size", "12px")
+        .style("fill", "#111111")
+        .style("opacity", 0.8)
+        .text("outperform");
+    
+
+    g.append("image")
+        .attr("xlink:href", 'https://www.yczddgj.com/infographic_assets/line_graph_01_DownArrow.png')
+        .attr("width", "60")
+        .attr("height", "60")
+        .attr("x", downArrowPos.x + leftOffset)
+        .attr("y", downArrowPos.y);
+    
+    // 根据文本长度计算背景宽度
+    const downLabelWidth = Math.max(groupNames[1].toUpperCase().length * 8 + 5, 100); // 每个字符10px宽度,两边各加20px边距
+    g.append("image")
+        .attr("xlink:href", 'https://www.yczddgj.com/infographic_assets/line_graph_01_DownLabelBG.png')
+        .attr("width", downLabelWidth)
+        .attr("height", "30")
+        .attr("x", downArrowPos.x + leftOffset - downLabelWidth/2 + 30)
+        .attr("y", downArrowPos.y + 65)
+        .attr("preserveAspectRatio", "none");
+    g.append("text")
+        .attr("x", downArrowPos.x + leftOffset + 30)
+        .attr("y", downArrowPos.y + 85)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Century Gothic")
+        .style("font-size", "14px")
+        .style("font-weight", "bold")
+        .style("fill", "#111111")
+        .style("opacity", 0.8)
+        .text(groupNames[1].toUpperCase());
+    g.append("text")
+        .attr("x", downArrowPos.x + leftOffset + 30)
+        .attr("y", downArrowPos.y + 102)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Century Gothic")
+        .style("font-size", "12px")
+        .style("fill", "#111111")
+        .style("opacity", 0.8)
+        .text("outperform");
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/line_graph/step_line_graph_01.js

@@ -0,0 +1,590 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Step Line Graph",
+    "chart_name": "step_line_graph_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[4, 20], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "trend"
+}
+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 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 xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const readableName = value => String(value || "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+    const xLabel = readableName(xColumn.label || xColumn.name || "Time");
+    const yLabel = readableName(yColumn.label || yColumn.name || "Value");
+    const yUnit = (yColumn.unit || "").trim();
+
+    const width = Math.max(420, Number(variables.width) || 560);
+    const height = Math.max(460, Number(variables.height) || 560);
+    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 || "#0B2B62";
+    const mutedText = "#60728A";
+    const axisColor = "#7694B6";
+    const gridColor = "#C9DAEA";
+    const primary = sourceColors.other?.primary || sourceColors.primary || "#1E71D5";
+    const secondary = sourceColors.other?.secondary || "#D76E6E";
+    const cardStroke = "#D8E7F3";
+
+    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", "step-line-chart-root reference-layout");
+
+    if (!xField || !yField) {
+        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("Missing step-line fields");
+        return svg.node();
+    }
+
+    const plainNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 100 ? ",.0f" : abs >= 10 ? ",.1f" : abs >= 1 ? ",.2f" : ",.3f";
+        return d3.format(spec)(value).replace(/\.0$/, "").replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
+    };
+
+    const compactNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 100 ? ".0f" : abs >= 10 ? ".1f" : abs >= 1 ? ".2f" : ".3f";
+        if (abs >= 1000000000) return `${d3.format(spec)(value / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(spec)(value / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(spec)(value / 1000)}K`;
+        return d3.format(spec)(value).replace(/\.0$/, "").replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
+    };
+
+    const formatLocalValue = value => {
+        const currencyWithSuffix = yUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (yUnit === "%") return `${plainNumber(value)}%`;
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${plainNumber(value)}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(yUnit)) return `${yUnit}${compactNumber(value)}`;
+        if (yUnit) return `${compactNumber(value)} ${yUnit}`;
+        return compactNumber(value);
+    };
+
+    const shortLabel = (value, maxChars = 22) => {
+        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 chartData = sourceData
+        .map((d, index) => ({
+            ...d,
+            __sourceIndex: index,
+            __xDate: chartUtils.format.parseDate(d[xField]),
+            __xRaw: d[xField],
+            __value: Number(d[yField])
+        }))
+        .filter(d => !Number.isNaN(d.__xDate.getTime()) && Number.isFinite(d.__value))
+        .sort((a, b) => a.__xDate - b.__xDate)
+        .map((d, i) => ({ ...d, __rank: i + 1 }));
+
+    if (chartData.length < 2) {
+        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("Not enough data");
+        return svg.node();
+    }
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", "step-line-ref-bg")
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#F7FBFF");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#EAF5FD");
+    const areaGradient = defs.append("linearGradient")
+        .attr("id", "step-line-area-fill")
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    areaGradient.append("stop").attr("offset", "0%").attr("stop-color", primary).attr("stop-opacity", 0.22);
+    areaGradient.append("stop").attr("offset", "100%").attr("stop-color", primary).attr("stop-opacity", 0.03);
+
+    const root = svg.append("g")
+        .attr("class", "step-line-reference-panel")
+        .attr("data-tag", "chart");
+    root.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", 2)
+        .attr("y", 2)
+        .attr("width", width - 4)
+        .attr("height", height - 4)
+        .attr("rx", 18)
+        .attr("fill", "url(#step-line-ref-bg)");
+
+    const addIconSlot = (group, cx, cy, r, className, fill, glyph) => {
+        const icon = group.append("g").attr("class", className);
+        icon.append("circle")
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .attr("r", r)
+            .attr("fill", fill)
+            .attr("opacity", 0.95);
+        icon.append("text")
+            .attr("x", cx)
+            .attr("y", cy + 1)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#FFFFFF")
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(9, r * 0.72)}px`)
+            .style("font-weight", "900")
+            .text(glyph);
+        return icon;
+    };
+
+    const panelPad = Math.max(14, Math.min(24, width * 0.036));
+    const chipGap = 12;
+    const chipY = panelPad + 8;
+    const chipH = Math.max(54, Math.min(70, height * 0.12));
+    const chipW = (width - panelPad * 2 - chipGap) / 2;
+    const startDatum = chartData[0];
+    const endDatum = chartData[chartData.length - 1];
+    const delta = endDatum.__value - startDatum.__value;
+    const deltaText = `${delta >= 0 ? "+" : ""}${formatLocalValue(delta)}`;
+    const directionText = delta >= 0 ? "Increase" : "Decrease";
+    const formatDate = d => {
+        const xExtent = d3.extent(chartData, item => item.__xDate);
+        const dateSpanYears = (xExtent[1] - xExtent[0]) / (1000 * 60 * 60 * 24 * 365);
+        if (dateSpanYears > 2) return d3.timeFormat("%Y")(d);
+        if (dateSpanYears > 1) return `${d.getFullYear().toString().slice(-2)}Q${Math.floor(d.getMonth() / 3) + 1}`;
+        return d3.timeFormat("%b %Y")(d);
+    };
+
+    const addMetricChip = (x, color, glyph, title, value, subtitle, className) => {
+        const chip = root.append("g")
+            .attr("class", `metric-chip ${className}`)
+            .attr("transform", `translate(${x}, ${chipY})`);
+        chip.append("rect")
+            .attr("width", chipW)
+            .attr("height", chipH)
+            .attr("rx", 14)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", cardStroke)
+            .attr("stroke-width", 1);
+        addIconSlot(chip, 26, chipH / 2, 16, "metric-icon-slot decorative-icon-slot", color, glyph);
+        chip.append("text")
+            .attr("class", "metric-title")
+            .attr("x", 50)
+            .attr("y", 19)
+            .attr("fill", color)
+            .style("font-family", titleFontFamily)
+            .style("font-size", "9.5px")
+            .style("font-weight", "900")
+            .text(title);
+        chip.append("text")
+            .attr("class", "metric-value")
+            .attr("x", 50)
+            .attr("y", 39)
+            .attr("fill", textColor)
+            .style("font-family", titleFontFamily)
+            .style("font-size", "15px")
+            .style("font-weight", "900")
+            .text(shortLabel(value, Math.max(8, Math.floor((chipW - 58) / 7.5))));
+        chip.append("text")
+            .attr("class", "metric-subtitle")
+            .attr("x", 50)
+            .attr("y", chipH - 9)
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "8.5px")
+            .style("font-weight", "650")
+            .text(shortLabel(subtitle, Math.max(10, Math.floor((chipW - 58) / 5.2))));
+    };
+    addMetricChip(panelPad, primary, "1", "START", formatLocalValue(startDatum.__value), formatDate(startDatum.__xDate), "start-metric-chip");
+    addMetricChip(panelPad + chipW + chipGap, secondary, "2", "LATEST", formatLocalValue(endDatum.__value), formatDate(endDatum.__xDate), "end-metric-chip");
+
+    const footerH = Math.max(74, Math.min(96, height * 0.17));
+    const footerY = height - footerH - panelPad;
+    const plotX = Math.max(52, width * 0.12);
+    const plotY = chipY + chipH + Math.max(26, height * 0.045);
+    const plotW = width - plotX - Math.max(24, width * 0.055);
+    const plotH = Math.max(190, footerY - plotY - 56);
+
+    const xExtent = d3.extent(chartData, d => d.__xDate);
+    if (+xExtent[0] === +xExtent[1]) {
+        xExtent[0] = d3.timeYear.offset(xExtent[0], -1);
+        xExtent[1] = d3.timeYear.offset(xExtent[1], 1);
+    }
+    const xScale = d3.scaleTime()
+        .domain(xExtent)
+        .range([0, plotW]);
+
+    const yMin = d3.min(chartData, d => d.__value);
+    const yMax = d3.max(chartData, d => d.__value);
+    const ySpan = yMax - yMin;
+    const yPadding = ySpan > 0 ? ySpan * 0.16 : Math.max(Math.abs(yMax) * 0.1, 1);
+    let yDomainMin = yMin - yPadding;
+    if (yMin >= 0 && yDomainMin < 0) yDomainMin = 0;
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yMax + yPadding])
+        .range([plotH, 0])
+        .nice(5);
+
+    const maxXTicks = Math.max(3, Math.min(6, Math.floor(plotW / 85)));
+    const selectXTicks = values => {
+        const step = Math.max(1, Math.ceil(values.length / maxXTicks));
+        const selected = values.filter((_, i) => i % step === 0);
+        if (+selected[0] !== +values[0]) selected.unshift(values[0]);
+        if (+selected[selected.length - 1] !== +values[values.length - 1]) selected.push(values[values.length - 1]);
+        const seen = new Set();
+        return selected.filter(d => {
+            const key = formatDate(d);
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
+        });
+    };
+    const uniqueYTicks = ticks => {
+        const seen = new Set();
+        return ticks.filter(tick => {
+            const key = formatLocalValue(tick);
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
+        });
+    };
+    const xTicks = selectXTicks(chartData.map(d => d.__xDate));
+    const yTicks = uniqueYTicks(yScale.ticks(5));
+
+    const plot = root.append("g")
+        .attr("class", "plot-area step-line-plot-area")
+        .attr("transform", `translate(${plotX}, ${plotY})`);
+    plot.append("rect")
+        .attr("class", "plot-card chart-panel-background")
+        .attr("x", -12)
+        .attr("y", -12)
+        .attr("width", plotW + 24)
+        .attr("height", plotH + 24)
+        .attr("rx", 15)
+        .attr("fill", "#FFFFFF")
+        .attr("opacity", 0.78)
+        .attr("stroke", cardStroke);
+
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        plot.append("line")
+            .attr("class", "gridline y-gridline")
+            .attr("x1", 0)
+            .attr("y1", y)
+            .attr("x2", plotW)
+            .attr("y2", y)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", tick === 0 ? 1.3 : 0.9)
+            .attr("stroke-dasharray", "3 3")
+            .attr("opacity", 0.85);
+        plot.append("text")
+            .attr("class", "axis-tick y-axis-tick")
+            .attr("x", -10)
+            .attr("y", y)
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "9px")
+            .style("font-weight", "650")
+            .text(formatLocalValue(tick));
+    });
+
+    xTicks.forEach(tick => {
+        const x = xScale(tick);
+        plot.append("line")
+            .attr("class", "gridline x-gridline")
+            .attr("x1", x)
+            .attr("y1", 0)
+            .attr("x2", x)
+            .attr("y2", plotH)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 0.9)
+            .attr("stroke-dasharray", "3 3")
+            .attr("opacity", 0.55);
+        plot.append("text")
+            .attr("class", "axis-tick x-axis-tick")
+            .attr("x", x)
+            .attr("y", plotH + 23)
+            .attr("text-anchor", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "9px")
+            .style("font-weight", "650")
+            .text(formatDate(tick));
+    });
+
+    plot.append("line")
+        .attr("class", "axis x-axis-line")
+        .attr("x1", 0)
+        .attr("y1", plotH)
+        .attr("x2", plotW)
+        .attr("y2", plotH)
+        .attr("stroke", axisColor)
+        .attr("stroke-width", 1.1);
+    plot.append("line")
+        .attr("class", "axis y-axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", 0)
+        .attr("y2", plotH)
+        .attr("stroke", axisColor)
+        .attr("stroke-width", 1.1);
+
+    const line = d3.line()
+        .x(d => xScale(d.__xDate))
+        .y(d => yScale(d.__value))
+        .curve(d3.curveStepAfter);
+    const area = d3.area()
+        .x(d => xScale(d.__xDate))
+        .y0(plotH)
+        .y1(d => yScale(d.__value))
+        .curve(d3.curveStepAfter);
+
+    plot.append("path")
+        .datum(chartData)
+        .attr("class", "step-line-area")
+        .attr("fill", "url(#step-line-area-fill)")
+        .attr("d", area);
+    plot.append("path")
+        .datum(chartData)
+        .attr("class", "mark step-line-path")
+        .attr("data-point-count", chartData.length)
+        .attr("fill", "none")
+        .attr("stroke", primary)
+        .attr("stroke-width", 3.4)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("d", line);
+
+    const pointGroups = plot.append("g")
+        .attr("class", "step-line-point-layer")
+        .selectAll(".data-point")
+        .data(chartData)
+        .enter()
+        .append("g")
+        .attr("class", "data-point")
+        .attr("data-date", d => d.__xDate.toISOString())
+        .attr("data-raw-x", d => d.__xRaw)
+        .attr("data-value", d => d.__value)
+        .attr("data-source-index", d => d.__sourceIndex)
+        .attr("data-rank", d => d.__rank)
+        .attr("transform", d => `translate(${xScale(d.__xDate)}, ${yScale(d.__value)})`);
+
+    pointGroups.append("circle")
+        .attr("class", d => `mark step-line-point${d.__rank === 1 || d.__rank === chartData.length ? " endpoint-point" : ""}`)
+        .attr("data-date", d => d.__xDate.toISOString())
+        .attr("data-raw-x", d => d.__xRaw)
+        .attr("data-value", d => d.__value)
+        .attr("data-source-index", d => d.__sourceIndex)
+        .attr("data-rank", d => d.__rank)
+        .attr("r", d => d.__rank === 1 || d.__rank === chartData.length ? 5.2 : 3.5)
+        .attr("fill", d => d.__rank === 1 || d.__rank === chartData.length ? "#FFFFFF" : primary)
+        .attr("stroke", primary)
+        .attr("stroke-width", d => d.__rank === 1 || d.__rank === chartData.length ? 2.5 : 1.8);
+
+    const drawEndpointLabel = (d, side) => {
+        const x = xScale(d.__xDate);
+        const y = yScale(d.__value);
+        const label = formatLocalValue(d.__value);
+        const labelWidth = Math.max(50, Math.min(94, label.length * 6.7 + 19));
+        const labelHeight = 24;
+        const isLeft = side === "left";
+        const preferredX = isLeft ? x + 11 : x - labelWidth - 11;
+        const labelX = Math.max(4, Math.min(plotW - labelWidth - 4, preferredX));
+        const labelY = Math.max(4, Math.min(plotH - labelHeight - 4, y - labelHeight / 2));
+        const labelGroup = plot.append("g")
+            .attr("class", `endpoint-label ${isLeft ? "start" : "end"}-endpoint-label`)
+            .attr("data-date", d.__xDate.toISOString())
+            .attr("data-raw-x", d.__xRaw)
+            .attr("data-value", d.__value)
+            .attr("data-source-index", d.__sourceIndex)
+            .attr("data-rank", d.__rank);
+        labelGroup.append("line")
+            .attr("class", "endpoint-label-leader")
+            .attr("x1", x)
+            .attr("y1", y)
+            .attr("x2", isLeft ? labelX : labelX + labelWidth)
+            .attr("y2", labelY + labelHeight / 2)
+            .attr("stroke", primary)
+            .attr("stroke-width", 1)
+            .attr("opacity", 0.52);
+        labelGroup.append("rect")
+            .attr("class", "endpoint-label-card")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("width", labelWidth)
+            .attr("height", labelHeight)
+            .attr("rx", 8)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", primary)
+            .attr("stroke-width", 1);
+        labelGroup.append("text")
+            .attr("class", "endpoint-value-label value-label")
+            .attr("x", labelX + labelWidth / 2)
+            .attr("y", labelY + labelHeight / 2)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "10px")
+            .style("font-weight", "900")
+            .text(label);
+    };
+    drawEndpointLabel(startDatum, "left");
+    drawEndpointLabel(endDatum, "right");
+
+    plot.append("text")
+        .attr("class", "axis-title y-axis-title")
+        .attr("x", -4)
+        .attr("y", -20)
+        .attr("text-anchor", "start")
+        .attr("fill", textColor)
+        .style("font-family", titleFontFamily)
+        .style("font-size", "10.5px")
+        .style("font-weight", "900")
+        .text(shortLabel(yUnit ? `${yLabel} (${yUnit})` : yLabel, Math.max(16, Math.floor(plotW / 15))));
+    plot.append("text")
+        .attr("class", "axis-title x-axis-title")
+        .attr("x", plotW)
+        .attr("y", plotH + 43)
+        .attr("text-anchor", "end")
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .style("font-weight", "700")
+        .text(shortLabel(xLabel, Math.max(12, Math.floor(plotW / 17))));
+
+    const legend = root.append("g")
+        .attr("class", "series-legend")
+        .attr("transform", `translate(${plotX}, ${plotY - 24})`);
+    legend.append("line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", 30)
+        .attr("y2", 0)
+        .attr("stroke", primary)
+        .attr("stroke-width", 3.4)
+        .attr("stroke-linecap", "round");
+    legend.append("text")
+        .attr("x", 39)
+        .attr("y", 1)
+        .attr("dominant-baseline", "middle")
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .style("font-weight", "800")
+        .text(shortLabel(yLabel, Math.max(14, Math.floor((plotW - 42) / 6))));
+
+    const footerGap = 12;
+    const footerCardW = (width - panelPad * 2 - footerGap) / 2;
+    const addFooterCard = (x, color, glyph, title, value, className) => {
+        const card = root.append("g")
+            .attr("class", `footer-note-card ${className}`)
+            .attr("transform", `translate(${x}, ${footerY})`);
+        card.append("rect")
+            .attr("width", footerCardW)
+            .attr("height", footerH)
+            .attr("rx", 15)
+            .attr("fill", "#FFFFFF")
+            .attr("opacity", 0.82)
+            .attr("stroke", cardStroke);
+        addIconSlot(card, 25, footerH / 2, 15, "footer-icon-slot decorative-icon-slot", color, glyph);
+        card.append("text")
+            .attr("class", "footer-title")
+            .attr("x", 50)
+            .attr("y", footerH / 2 - 8)
+            .attr("fill", color)
+            .style("font-family", titleFontFamily)
+            .style("font-size", "9px")
+            .style("font-weight", "900")
+            .text(title);
+        card.append("text")
+            .attr("class", "footer-value")
+            .attr("x", 50)
+            .attr("y", footerH / 2 + 12)
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "10px")
+            .style("font-weight", "800")
+            .text(shortLabel(value, Math.max(12, Math.floor((footerCardW - 58) / 5.3))));
+    };
+    addFooterCard(panelPad, secondary, "D", "CHANGE", `${directionText} ${deltaText}`, "change-card");
+    addFooterCard(panelPad + footerCardW + footerGap, primary, "T", "PERIOD", `${formatDate(startDatum.__xDate)} to ${formatDate(endDatum.__xDate)}`, "period-card");
+
+    return svg.node();
+}