Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type25_line_graph/line_graph_plain_chart_01.js

@@ -0,0 +1,383 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Line Graph",
+    "chart_name": "line_graph_plain_chart_01",
+    "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/type25_line_graph/line_graph_plain_chart_02.js

@@ -0,0 +1,567 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Line Graph",
+    "chart_name": "line_graph_plain_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": "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 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: "line",
+    });
+
+    const maxYTickPosition = yScale(yTicks[yTicks.length - 1]);
+    
+    // 居中legend
+    legendGroup.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/type25_line_graph/line_graph_plain_chart_03.js

@@ -0,0 +1,754 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Line Graph",
+    "chart_name": "line_graph_plain_chart_03",
+    "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 colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+
+    const sourceTitle = (jsonData.titles && jsonData.titles.main_title) || jsonData.metadata?.title || "";
+    const sourceSubtitle = (jsonData.titles && jsonData.titles.sub_title) || jsonData.metadata?.description || "";
+    const sourceTitleMatch = String(sourceTitle).match(/\s+v(?:s\.?|ersus)\s+/i);
+    if (jsonData.titles && sourceTitleMatch) {
+        const lead = sourceTitle.slice(0, sourceTitleMatch.index).trim().toUpperCase();
+        const focus = sourceTitle.slice(sourceTitleMatch.index + sourceTitleMatch[0].length).trim().toUpperCase();
+        jsonData.titles.main_title = `${lead} vs. ${focus}`;
+        jsonData.titles.sub_title = String(sourceSubtitle).replace(/^"|"$/g, "");
+    }
+
+    d3.select(containerSelector).html("");
+
+    const width = variables.width;
+    const height = variables.height;
+    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 yUnit = yColumn.unit || "";
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const parsedRows = chartData
+        .map(d => ({
+            raw: d,
+            x: chartUtils.format.parseDate(d[xField]),
+            y: +d[yField],
+            group: d[groupField]
+        }))
+        .filter(d => Number.isFinite(d.x.getTime()) && Number.isFinite(d.y));
+
+    const groupSeries = groups.map(group => {
+        const values = parsedRows
+            .filter(d => d.group === group)
+            .sort((a, b) => a.x - b.x);
+        return { group, values };
+    }).filter(series => series.values.length > 0);
+
+    const getColor = (group) => colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+    const brighten = (hex, amount) => d3.color(hex).brighter(amount).formatHex();
+    const darken = (hex, amount) => d3.color(hex).darker(amount).formatHex();
+    const textFont = typography.label.font_family || "Arial";
+
+    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");
+
+    svg.append("style").text(`
+        svg > rect:first-of-type { fill: #011222 !important; }
+        image.image[data-type="image"] { display: none !important; }
+        .text[data-type="title"] {
+            display: none !important;
+        }
+        .text[data-type="title"] text:nth-of-type(1) {
+            fill: #f7fbff !important;
+            font-weight: 900 !important;
+            letter-spacing: 0 !important;
+        }
+        .text[data-type="title"] text:nth-of-type(2) {
+            fill: #a8fbf4 !important;
+            font-weight: 900 !important;
+            letter-spacing: 0 !important;
+            text-transform: uppercase;
+        }
+        .text[data-type="title"] text:nth-of-type(3) {
+            fill: #d7e5ee !important;
+            font-weight: 500 !important;
+        }
+        .line03-internal-title { display: inline !important; }
+    `);
+
+    const bg = defs.append("radialGradient")
+        .attr("id", "line03-bg")
+        .attr("cx", "58%")
+        .attr("cy", "20%")
+        .attr("r", "90%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#073e62");
+    bg.append("stop").attr("offset", "52%").attr("stop-color", "#021f35");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#011222");
+
+    const cyanGlow = defs.append("filter")
+        .attr("id", "line03-soft-glow")
+        .attr("x", "-30%")
+        .attr("y", "-30%")
+        .attr("width", "160%")
+        .attr("height", "160%");
+    cyanGlow.append("feGaussianBlur").attr("stdDeviation", 2.2).attr("result", "blur");
+    const merge = cyanGlow.append("feMerge");
+    merge.append("feMergeNode").attr("in", "blur");
+    merge.append("feMergeNode").attr("in", "SourceGraphic");
+
+    const contentLayer = svg.append("g")
+        .attr("class", "line03-content-layer")
+        .attr("data-layout", "full-poster-composition")
+        .attr("transform", "translate(-500,-1230)");
+
+    const poster = {
+        x: -50,
+        y: -43,
+        width: width + 720,
+        height: height + 1260
+    };
+
+    contentLayer.append("rect")
+        .attr("class", "line03-background-extension")
+        .attr("x", poster.x)
+        .attr("y", poster.y)
+        .attr("width", poster.width)
+        .attr("height", poster.height)
+        .attr("fill", "url(#line03-bg)");
+
+    contentLayer.append("rect")
+        .attr("class", "line03-poster-vignette")
+        .attr("x", poster.x + 8)
+        .attr("y", poster.y + 8)
+        .attr("width", poster.width - 16)
+        .attr("height", poster.height - 16)
+        .attr("rx", 18)
+        .attr("fill", "rgba(4,36,62,0.20)")
+        .attr("stroke", "rgba(99,221,232,0.10)");
+
+    const titleText = (jsonData.titles && jsonData.titles.main_title) || jsonData.metadata?.title || "";
+    const subtitleText = (jsonData.titles && jsonData.titles.sub_title) || jsonData.metadata?.description || "";
+    const titleMatch = String(titleText).match(/\s+v(?:s\.?|ersus)\s+/i);
+    const titleLead = titleMatch ? titleText.slice(0, titleMatch.index).trim() : titleText;
+    const titleFocus = titleMatch ? titleText.slice(titleMatch.index + titleMatch[0].length).trim() : "";
+    const titleMaxWidth = poster.width - 110;
+    const estimateTitleSize = (text, base, min) => Math.max(min, Math.min(base, titleMaxWidth / Math.max(1, String(text).length * 0.58)));
+    const focusLine = titleFocus ? `VS. ${String(titleFocus).toUpperCase()}` : "";
+
+    contentLayer.append("text")
+        .attr("class", "line03-internal-title line03-poster-title line03-title-lead")
+        .attr("x", poster.x + 72)
+        .attr("y", -320)
+        .style("font-family", textFont)
+        .style("font-size", `${estimateTitleSize(titleLead, focusLine ? 68 : 58, focusLine ? 42 : 28)}px`)
+        .style("font-weight", 900)
+        .style("fill", "#f7fbff")
+        .style("letter-spacing", "0")
+        .text(String(titleLead).toUpperCase());
+
+    if (focusLine) {
+        contentLayer.append("text")
+            .attr("class", "line03-internal-title line03-poster-title line03-title-focus")
+            .attr("x", poster.x + 72)
+            .attr("y", -220)
+            .style("font-family", textFont)
+            .style("font-size", `${estimateTitleSize(focusLine, 96, 58)}px`)
+            .style("font-weight", 900)
+            .style("fill", "#a8fbf4")
+            .style("letter-spacing", "0")
+            .text(focusLine);
+    }
+
+    contentLayer.append("line")
+        .attr("class", "line03-internal-title")
+        .attr("x1", poster.x + 88)
+        .attr("x2", poster.x + poster.width - 88)
+        .attr("y1", -130)
+        .attr("y2", -130)
+        .attr("stroke", "rgba(213,242,248,0.28)")
+        .attr("stroke-width", 1.2);
+
+    contentLayer.append("g")
+        .attr("class", "line03-internal-title reserved-asset-slot title-divider-slot")
+        .attr("data-asset-slot", "line03-title-divider-icon")
+        .attr("data-asset-source-policy", "neutral-placeholder")
+        .attr("data-anchor", "title-divider-center")
+        .attr("data-collision-rule", "between-title-and-subtitle-only")
+        .attr("data-bbox", `${poster.x + poster.width / 2 - 12},-142,24,24`)
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .append("circle")
+        .attr("cx", poster.x + poster.width / 2)
+        .attr("cy", -130)
+        .attr("r", 12)
+        .attr("fill", "#061f33")
+        .attr("stroke", "rgba(213,242,248,0.35)");
+
+    addWrappedText(contentLayer, String(subtitleText).replace(/^"|"$/g, ""), poster.x + poster.width / 2, -75, poster.width - 300, 27, 2, {
+        fontSize: "23px",
+        fontWeight: "500",
+        fill: "#d7e5ee",
+        textAnchor: "middle"
+    }).attr("class", "line03-internal-title line03-poster-subtitle");
+
+    const cardsTop = 65;
+    const cardGap = 26;
+    const cardWidth = (poster.width - 116 - cardGap) / 2;
+    const cardHeight = 180;
+
+    function addWrappedText(group, text, x, y, maxWidth, lineHeight, maxLines, attrs = {}) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        let line = [];
+        let lineNo = 0;
+        let tspan = group.append("text")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", attrs.textAnchor || "start")
+            .style("font-family", textFont)
+            .style("font-size", attrs.fontSize || "12px")
+            .style("font-weight", attrs.fontWeight || "400")
+            .style("fill", attrs.fill || "#eaf9ff")
+            .style("letter-spacing", attrs.letterSpacing || "0");
+
+        let current = tspan.append("tspan").attr("x", x).attr("dy", 0);
+        for (const word of words) {
+            line.push(word);
+            current.text(line.join(" "));
+            if (current.node().getComputedTextLength() > maxWidth && line.length > 1) {
+                line.pop();
+                current.text(line.join(" "));
+                line = [word];
+                lineNo += 1;
+                if (lineNo >= maxLines) {
+                    current.text(current.text().replace(/\s+\S*$/, "") + "...");
+                    break;
+                }
+                current = tspan.append("tspan")
+                    .attr("x", x)
+                    .attr("dy", lineHeight)
+                    .text(word);
+            }
+        }
+        return tspan;
+    }
+
+    function endpointText(value) {
+        const abs = Math.abs(value);
+        if (String(yUnit).toLowerCase().includes("m") || String(yLabel).toLowerCase().includes("million")) {
+            const rounded = abs < 0.5 ? 0 : Math.round(value);
+            return `${rounded}M`;
+        }
+        const rounded = abs >= 10 ? Math.round(value) : Math.round(value * 10) / 10;
+        return String(rounded);
+    }
+
+    function trendText(series) {
+        const first = series.values[0].y;
+        const last = series.values[series.values.length - 1].y;
+        const lastPhrase = Math.abs(last) < 0.5 && (String(yUnit).toLowerCase().includes("m") || String(yLabel).toLowerCase().includes("million"))
+            ? "near zero"
+            : endpointText(last);
+        if (last < first * 0.65) return `Profits steadily decline, reaching ${lastPhrase} by ${series.values[series.values.length - 1].raw[xField]}.`;
+        if (last > first * 1.35) return `Profits rise consistently, reaching ${endpointText(last)} by ${series.values[series.values.length - 1].raw[xField]}.`;
+        return `Profits remain near ${endpointText(last)} by ${series.values[series.values.length - 1].raw[xField]}.`;
+    }
+
+    function addIconSlot(parent, groupName, x, y, size) {
+        const slot = parent.append("g")
+            .attr("class", "reserved-asset-slot group-icon-slot")
+            .attr("data-asset-slot", `line03-group-icon-${String(groupName).toLowerCase().replace(/[^a-z0-9]+/g, "-")}`)
+            .attr("data-asset-source-policy", images.field && images.field[groupName] ? "input-provided" : "neutral-placeholder")
+            .attr("data-anchor", "top-metric-card")
+            .attr("data-collision-rule", "stay-inside-card-left-medallion")
+            .attr("data-bbox", `${x},${y},${size},${size}`)
+            .attr("data-no-copied-reference-art", "true");
+
+        if (!(images.field && images.field[groupName])) {
+            slot.attr("data-no-embedded-raster", "true");
+        }
+
+        slot.append("circle")
+            .attr("cx", x + size / 2)
+            .attr("cy", y + size / 2)
+            .attr("r", size / 2)
+            .attr("fill", "#eef8f5")
+            .attr("stroke", "rgba(255,255,255,0.75)")
+            .attr("stroke-width", 1.5);
+
+        if (images.field && images.field[groupName]) {
+            slot.append("clipPath")
+                .attr("id", `line03-icon-clip-${String(groupName).replace(/[^a-zA-Z0-9]/g, "-")}`)
+                .append("circle")
+                .attr("cx", x + size / 2)
+                .attr("cy", y + size / 2)
+                .attr("r", size / 2 - 3);
+            slot.append("image")
+                .attr("x", x + 3)
+                .attr("y", y + 3)
+                .attr("width", size - 6)
+                .attr("height", size - 6)
+                .attr("data-input-provided-asset", "true")
+                .attr("data-no-copied-reference-art", "true")
+                .attr("preserveAspectRatio", "xMidYMid slice")
+                .attr("clip-path", `url(#line03-icon-clip-${String(groupName).replace(/[^a-zA-Z0-9]/g, "-")})`)
+                .attr("xlink:href", images.field[groupName]);
+        } else {
+            slot.append("circle")
+                .attr("cx", x + size / 2)
+                .attr("cy", y + size / 2)
+                .attr("r", 8)
+                .attr("fill", "rgba(6,40,62,0.28)");
+        }
+    }
+
+    groupSeries.slice(0, 2).forEach((series, i) => {
+        const group = series.group;
+        const color = getColor(group);
+        const x = 24 + i * (cardWidth + cardGap);
+        const groupLabel = String(group).toUpperCase();
+        const groupFontSize = Math.max(15, Math.min(26, (cardWidth - 152) / Math.max(1, groupLabel.length * 0.62)));
+        const card = contentLayer.append("g")
+            .attr("class", "line03-metric-card")
+            .attr("data-series", group)
+            .attr("data-relationship", "independent-header-card")
+            .attr("data-anchor", "header-safe-area");
+
+        card.append("rect")
+            .attr("x", x)
+            .attr("y", cardsTop)
+            .attr("width", cardWidth)
+            .attr("height", cardHeight)
+            .attr("rx", 7)
+            .attr("fill", i === 0 ? "rgba(0,78,98,0.44)" : "rgba(45,25,88,0.42)")
+            .attr("stroke", color)
+            .attr("stroke-width", 1.2)
+            .attr("opacity", 0.95);
+
+        addIconSlot(card, group, x + 16, cardsTop + 26, 92);
+
+        card.append("text")
+            .attr("x", x + 124)
+            .attr("y", cardsTop + 49)
+            .style("font-family", textFont)
+            .style("font-size", `${groupFontSize}px`)
+            .style("font-weight", 800)
+            .style("fill", brighten(color, 0.55))
+            .style("letter-spacing", "0.03em")
+            .text(groupLabel);
+
+        addWrappedText(card, trendText(series), x + 124, cardsTop + 84, cardWidth - 144, 24, 2, {
+            fontSize: "20px",
+            fill: "#f4fbff"
+        });
+    });
+
+    const plot = {
+        x: poster.x + 84,
+        y: 405,
+        width: poster.width - 156,
+        height: 1065
+    };
+    const labelReserve = groupSeries.length > 2 ? 150 : 118;
+    const plotWidth = plot.width - labelReserve;
+    const plotHeight = plot.height;
+    const xExtent = d3.extent(parsedRows, d => d.x);
+    const yMinData = d3.min(parsedRows, d => d.y);
+    const yMaxData = d3.max(parsedRows, d => d.y);
+    const yMin = Math.min(0, yMinData);
+    const yMax = Math.ceil((yMaxData * 1.4) / 5) * 5;
+
+    const xScale = d3.scaleTime().domain(xExtent).range([0, plotWidth]);
+    const yScale = d3.scaleLinear().domain([yMin, yMax]).nice(5).range([plotHeight, 0]);
+    const uniqueDates = [...new Map(parsedRows.map(d => [+d.x, d.x])).values()].sort((a, b) => a - b);
+    const xTicks = uniqueDates.length <= 12
+        ? uniqueDates
+        : uniqueDates.filter((_, i) => i % Math.ceil(uniqueDates.length / 10) === 0 || i === uniqueDates.length - 1);
+    const yTicks = yScale.ticks(5).filter(d => d >= yMin && d <= yMax);
+    const xFormat = d3.timeFormat("%Y");
+    const yZero = yScale(0);
+
+    const chart = contentLayer.append("g")
+        .attr("class", "line03-plot")
+        .attr("data-relationship", "wide-chart-panel-below-header-cards")
+        .attr("transform", `translate(${plot.x},${plot.y})`);
+
+    chart.append("text")
+        .attr("x", -20)
+        .attr("y", -14)
+        .style("font-family", textFont)
+        .style("font-size", "13px")
+        .style("font-weight", 600)
+        .style("fill", "#eefbff")
+        .text(`${yLabel}${yUnit && !String(yLabel).includes(yUnit) ? ` (${String(yUnit).toLowerCase() === "$m" ? "millions" : yUnit})` : ""}`);
+
+    chart.append("rect")
+        .attr("class", "reserved-asset-slot plot-scenic-commercial")
+        .attr("data-asset-slot", "line03-plot-commercial-scenic-art")
+        .attr("data-asset-source-policy", "image2-generated")
+        .attr("data-anchor", "lower-left-under-commercial-series")
+        .attr("data-collision-rule", "behind-lines-and-below-data-labels")
+        .attr("data-bbox", `${8},${plotHeight * 0.58},${plotWidth * 0.36},${plotHeight * 0.32}`)
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("x", 8)
+        .attr("y", plotHeight * 0.58)
+        .attr("width", plotWidth * 0.36)
+        .attr("height", plotHeight * 0.32)
+        .attr("fill", "rgba(28,112,130,0.075)")
+        .attr("stroke", "rgba(70,210,218,0.13)")
+        .attr("stroke-dasharray", "4 8")
+        .attr("rx", 18);
+
+    chart.append("rect")
+        .attr("class", "reserved-asset-slot plot-scenic-ecotourism")
+        .attr("data-asset-slot", "line03-plot-ecotourism-scenic-art")
+        .attr("data-asset-source-policy", "image2-generated")
+        .attr("data-anchor", "lower-right-under-ecotourism-area")
+        .attr("data-collision-rule", "behind-lines-and-below-data-labels")
+        .attr("data-bbox", `${plotWidth * 0.48},${plotHeight * 0.42},${plotWidth * 0.48},${plotHeight * 0.40}`)
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("x", plotWidth * 0.48)
+        .attr("y", plotHeight * 0.42)
+        .attr("width", plotWidth * 0.48)
+        .attr("height", plotHeight * 0.40)
+        .attr("fill", "rgba(86,56,142,0.075)")
+        .attr("stroke", "rgba(184,119,255,0.13)")
+        .attr("stroke-dasharray", "4 8")
+        .attr("rx", 20);
+
+    chart.selectAll("line.grid-y")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("class", "grid-y")
+        .attr("x1", 0)
+        .attr("x2", plotWidth)
+        .attr("y1", d => yScale(d))
+        .attr("y2", d => yScale(d))
+        .attr("stroke", "rgba(190,218,232,0.18)")
+        .attr("stroke-dasharray", "1.5 3");
+
+    chart.selectAll("line.grid-x")
+        .data(xTicks)
+        .enter()
+        .append("line")
+        .attr("class", "grid-x")
+        .attr("x1", d => xScale(d))
+        .attr("x2", d => xScale(d))
+        .attr("y1", 0)
+        .attr("y2", plotHeight)
+        .attr("stroke", "rgba(190,218,232,0.14)")
+        .attr("stroke-dasharray", "1.5 3");
+
+    chart.append("line")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", 0)
+        .attr("y2", plotHeight)
+        .attr("stroke", "#eff8ff")
+        .attr("stroke-width", 1.1);
+
+    chart.append("line")
+        .attr("x1", 0)
+        .attr("x2", plotWidth)
+        .attr("y1", yZero)
+        .attr("y2", yZero)
+        .attr("stroke", "#eff8ff")
+        .attr("stroke-width", 1.1);
+
+    const area = d3.area()
+        .curve(d3.curveMonotoneX)
+        .x(d => xScale(d.x))
+        .y0(yZero)
+        .y1(d => yScale(d.y));
+
+    const line = d3.line()
+        .curve(d3.curveMonotoneX)
+        .x(d => xScale(d.x))
+        .y(d => yScale(d.y));
+
+    groupSeries.forEach((series, i) => {
+        const color = getColor(series.group);
+        const gradientId = `line03-area-${i}`;
+        const grad = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("x2", "0%")
+            .attr("y1", "0%")
+            .attr("y2", "100%");
+        grad.append("stop").attr("offset", "0%").attr("stop-color", color).attr("stop-opacity", 0.5);
+        grad.append("stop").attr("offset", "72%").attr("stop-color", color).attr("stop-opacity", 0.22);
+        grad.append("stop").attr("offset", "100%").attr("stop-color", color).attr("stop-opacity", 0.06);
+
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "line03-area")
+            .attr("data-series", series.group)
+            .attr("fill", `url(#${gradientId})`)
+            .attr("d", area)
+            .attr("opacity", 0.78);
+    });
+
+    groupSeries.forEach(series => {
+        const color = getColor(series.group);
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "line03-line-halo")
+            .attr("data-series", series.group)
+            .attr("fill", "none")
+            .attr("stroke", darken(color, 1.15))
+            .attr("stroke-width", 7)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("opacity", 0.9)
+            .attr("d", line);
+
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "line03-line")
+            .attr("data-series", series.group)
+            .attr("fill", "none")
+            .attr("stroke", brighten(color, 0.45))
+            .attr("stroke-width", 4)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("filter", "url(#line03-soft-glow)")
+            .attr("d", line);
+    });
+
+    chart.selectAll("text.y-tick")
+        .data(yTicks)
+        .enter()
+        .append("text")
+        .attr("class", "y-tick")
+        .attr("x", -9)
+        .attr("y", d => yScale(d) + 4)
+        .attr("text-anchor", "end")
+        .style("font-family", textFont)
+        .style("font-size", "13px")
+        .style("fill", "#f3f7fb")
+        .text(d => d);
+
+    chart.selectAll("text.x-tick")
+        .data(xTicks)
+        .enter()
+        .append("text")
+        .attr("class", "x-tick")
+        .attr("x", d => xScale(d))
+        .attr("y", plotHeight + 22)
+        .attr("text-anchor", "middle")
+        .style("font-family", textFont)
+        .style("font-size", "12px")
+        .style("fill", "#f3f7fb")
+        .text(d => xFormat(d));
+
+    chart.append("text")
+        .attr("x", plotWidth / 2)
+        .attr("y", plotHeight + 48)
+        .attr("text-anchor", "middle")
+        .style("font-family", textFont)
+        .style("font-size", "15px")
+        .style("font-weight", 700)
+        .style("fill", "#ffffff")
+        .text(xField);
+
+    const endpointLayouts = (() => {
+        const layouts = groupSeries.map(series => {
+            const last = series.values[series.values.length - 1];
+            return {
+                series,
+                pointY: yScale(last.y),
+                centerY: yScale(last.y)
+            };
+        }).sort((a, b) => a.centerY - b.centerY);
+
+        const minGap = Math.max(72, Math.min(96, plotHeight / Math.max(1, layouts.length) * 0.78));
+        layouts.forEach((layout, i) => {
+            const minYForIndex = 28 + i * minGap;
+            layout.centerY = Math.max(layout.centerY, minYForIndex);
+        });
+        for (let i = layouts.length - 2; i >= 0; i--) {
+            layouts[i].centerY = Math.min(layouts[i].centerY, layouts[i + 1].centerY - minGap);
+        }
+        layouts.forEach(layout => {
+            layout.centerY = Math.max(28, Math.min(plotHeight - 44, layout.centerY));
+        });
+
+        const byGroup = new Map();
+        layouts.forEach(layout => byGroup.set(layout.series.group, layout));
+        return byGroup;
+    })();
+
+    function addEndpointBadge(series) {
+        const color = getColor(series.group);
+        const last = series.values[series.values.length - 1];
+        const pointX = xScale(last.x);
+        const pointY = yScale(last.y);
+        const badgeW = groupSeries.length > 2 ? 64 : 76;
+        const badgeH = 42;
+        const badgeX = pointX + 30;
+        const layout = endpointLayouts.get(series.group) || { centerY: pointY };
+        const badgeY = layout.centerY - badgeH / 2;
+        const labelY = badgeY + badgeH + 18;
+        const badgeText = endpointText(last.y);
+
+        chart.append("circle")
+            .attr("class", "line03-endpoint-dot")
+            .attr("data-series", series.group)
+            .attr("cx", pointX)
+            .attr("cy", pointY)
+            .attr("r", 7)
+            .attr("fill", "#f4f5ff")
+            .attr("stroke", brighten(color, 0.35))
+            .attr("stroke-width", 4);
+
+        chart.append("path")
+            .attr("class", "line03-endpoint-leader")
+            .attr("data-series", series.group)
+            .attr("d", `M${pointX + 7},${pointY} L${badgeX - 6},${badgeY + badgeH / 2}`)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 2)
+            .attr("opacity", 0.92);
+
+        const badge = chart.append("g")
+            .attr("class", "line03-endpoint-badge")
+            .attr("data-series", series.group)
+            .attr("data-relationship", "leader-connected-to-terminal-point")
+            .attr("data-alignment-basis", "leader endpoint from final data point to badge left edge");
+
+        badge.append("rect")
+            .attr("x", badgeX)
+            .attr("y", badgeY)
+            .attr("width", badgeW)
+            .attr("height", badgeH)
+            .attr("rx", 5)
+            .attr("fill", d3.color(color).copy({ opacity: 0.62 }).formatRgb())
+            .attr("stroke", brighten(color, 0.45))
+            .attr("stroke-width", 1.2);
+
+        badge.append("text")
+            .attr("x", badgeX + badgeW / 2)
+            .attr("y", badgeY + 29)
+            .attr("text-anchor", "middle")
+            .style("font-family", textFont)
+            .style("font-size", groupSeries.length > 2 ? "19px" : "25px")
+            .style("font-weight", 900)
+            .style("fill", "#f7f5ff")
+            .text(badgeText);
+
+        addWrappedText(badge, `${series.group} ${yLabel}`, badgeX + 1, labelY, labelReserve - 8, 14, groupSeries.length > 2 ? 2 : 3, {
+            fontSize: groupSeries.length > 2 ? "10px" : "12px",
+            fill: "#dff6ff"
+        });
+    }
+
+    groupSeries.forEach(addEndpointBadge);
+
+    const legendBand = contentLayer.append("g")
+        .attr("class", "line03-bottom-legend-band")
+        .attr("data-relationship", "chart-owned-bottom-legend")
+        .attr("data-alignment-basis", "independent bottom band below plot, not a narrative takeaway");
+
+    const legendY = 1588;
+    const legendHeight = groupSeries.length > 2 ? 150 : 106;
+    legendBand.append("rect")
+        .attr("x", poster.x + 40)
+        .attr("y", legendY)
+        .attr("width", poster.width - 80)
+        .attr("height", legendHeight)
+        .attr("rx", 12)
+        .attr("fill", "rgba(7,48,76,0.58)")
+        .attr("stroke", "rgba(108,224,234,0.22)")
+        .attr("stroke-width", 1.4);
+
+    legendBand.append("text")
+        .attr("x", poster.x + 92)
+        .attr("y", legendY + 42)
+        .style("font-family", textFont)
+        .style("font-size", "29px")
+        .style("font-weight", 900)
+        .style("fill", "#f6fbff")
+        .text("LEGEND");
+
+    legendBand.append("text")
+        .attr("x", poster.x + 92)
+        .attr("y", legendY + 72)
+        .style("font-family", textFont)
+        .style("font-size", "16px")
+        .style("font-weight", 500)
+        .style("fill", "#bfe4ef")
+        .text(`${yLabel}${yUnit ? ` by ${xField}` : ""}`);
+
+    legendBand.append("line")
+        .attr("x1", poster.x + 500)
+        .attr("x2", poster.x + 500)
+        .attr("y1", legendY + 24)
+        .attr("y2", legendY + legendHeight - 24)
+        .attr("stroke", "rgba(213,242,248,0.28)")
+        .attr("stroke-width", 1.2);
+
+    const legendItemX = poster.x + 532;
+    const legendItemY = legendY + 32;
+    groupSeries.slice(0, 7).forEach((series, i) => {
+        const color = getColor(series.group);
+        const row = groupSeries.length <= 2 ? i : i;
+        const x = legendItemX;
+        const y = legendItemY + row * (groupSeries.length <= 2 ? 30 : 24);
+        const item = legendBand.append("g")
+            .attr("class", "line03-data-legend-item")
+            .attr("data-series", series.group);
+        item.append("line")
+            .attr("x1", x)
+            .attr("x2", x + 48)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", brighten(color, 0.42))
+            .attr("stroke-width", 7)
+            .attr("stroke-linecap", "round");
+        item.append("text")
+            .attr("x", x + 68)
+            .attr("y", y + 6)
+            .style("font-family", textFont)
+            .style("font-size", groupSeries.length > 2 ? "13px" : "15px")
+            .style("font-weight", 500)
+            .style("fill", "#edf7fb")
+            .text(groupSeries.length > 2 ? String(series.group) : `${series.group} ${yLabel}`);
+    });
+
+    return svg.node();
+}