Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/radar/multiple_radar_chart_01.js

@@ -0,0 +1,238 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Radar Chart",
+    "chart_name": "multiple_radar_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 7], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, 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 radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别和分组
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    
+    // 计算每个分组的平均值并按降序排序
+    const groupAvgs = [...new Set(chartData.map(d => d[groupField]))]
+        .map(group => ({
+            group,
+            avg: d3.mean(chartData.filter(d => d[groupField] === group), d => +d[valueField])
+        }))
+        .sort((a, b) => b.avg - a.avg);
+    
+    const groups = groupAvgs.map(d => d.group);
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "tableau10" }).value;
+    
+    // 创建角度比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    // 创建半径比例尺
+    const allValues = chartData.map(d => +d[valueField]);
+    const minValue = Math.min(0, d3.min(allValues));
+    const maxValue = d3.max(allValues);
+    
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制背景圆环
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆
+    g.selectAll(".circle-axis")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "circle-axis")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis-line")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", (d, i) => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", (d, i) => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".category-label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "category-label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle < Math.PI ? "hanging" : "auto";
+        })
+        .attr("fill", "#333")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => chartUtils.format.category(d).text);
+    
+    // 添加刻度值标签
+    g.selectAll(".tick-label")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "tick-label")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d))
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#666")
+        .text(d => chartUtils.format.number(d).text);
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+    
+    // 创建折线生成器
+    const lineGenerator = d => {
+        const points = categories.map(cat => {
+            const point = d.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                return [
+                    distance * Math.cos(angle),
+                    distance * Math.sin(angle)
+                ];
+            }
+            return [0, 0]; // 如果没有数据，默认为中心点
+        });
+        
+        return d3.line()(points) + "Z"; // 闭合路径
+    };
+    
+    // 绘制每个组的雷达折线
+    groupedData.forEach((values, group) => {
+        // 绘制折线
+        g.append("path")
+            .datum(values)
+            .attr("class", `radar-line-${group}`)
+            .attr("d", lineGenerator)
+            .attr("fill", colorScale(group))
+            .attr("fill-opacity", 0.2)
+            .attr("stroke", colorScale(group))
+            .attr("stroke-width", 2)
+            .attr("stroke-linejoin", "miter"); // 使用尖角连接，强调折线效果
+        
+        // 绘制数据点
+        categories.forEach(cat => {
+            const point = values.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                
+                g.append("circle")
+                    .attr("class", `radar-point-${group}`)
+                    .attr("cx", distance * Math.cos(angle))
+                    .attr("cy", distance * Math.sin(angle))
+                    .attr("r", 4)
+                    .attr("fill", colorScale(group))
+                    .attr("stroke", "#fff")
+                    .attr("stroke-width", 1);
+            }
+        });
+    });
+    
+    // 添加图例
+    const legendGroup = svg.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}, ${-20 - legendSize.height/2})`);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/radar/multiple_radar_chart_03.js

@@ -0,0 +1,239 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Radar Chart",
+    "chart_name": "multiple_radar_chart_03",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 7], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "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 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 categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, 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 radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别和分组
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    
+    // 计算每个分组的平均值并按降序排序
+    const groupAvgs = [...new Set(chartData.map(d => d[groupField]))]
+        .map(group => ({
+            group,
+            avg: d3.mean(chartData.filter(d => d[groupField] === group), d => +d[valueField])
+        }))
+        .sort((a, b) => b.avg - a.avg);
+    
+    const groups = groupAvgs.map(d => d.group);
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "tableau10" }).value;
+    
+    // 创建角度比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    // 创建半径比例尺
+    const allValues = chartData.map(d => +d[valueField]);
+    const minValue = Math.min(0, d3.min(allValues));
+    const maxValue = d3.max(allValues);
+    
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制背景圆环
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆
+    g.selectAll(".circle-axis")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "circle-axis")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis-line")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", (d, i) => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", (d, i) => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".category-label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "category-label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle < Math.PI ? "hanging" : "auto";
+        })
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => chartUtils.format.category(d).text);
+    
+    // 添加刻度值标签
+    g.selectAll(".tick-label")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "tick-label")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d))
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#ddd")
+        .text(d => chartUtils.format.number(d).text);
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+    
+    // 创建折线生成器
+    const lineGenerator = d => {
+        const points = categories.map(cat => {
+            const point = d.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                return [
+                    distance * Math.cos(angle),
+                    distance * Math.sin(angle)
+                ];
+            }
+            return [0, 0]; // 如果没有数据，默认为中心点
+        });
+        
+        return d3.line()(points) + "Z"; // 闭合路径
+    };
+    
+    // 绘制每个组的雷达折线
+    groupedData.forEach((values, group) => {
+        // 绘制折线
+        g.append("path")
+            .datum(values)
+            .attr("class", `radar-line-${group}`)
+            .attr("d", lineGenerator)
+            .attr("fill", colorScale(group))
+            .attr("fill-opacity", 0.2)
+            .attr("stroke", colorScale(group))
+            .attr("stroke-width", 2)
+            .attr("stroke-linejoin", "miter"); // 使用尖角连接，强调折线效果
+        
+        // 绘制数据点
+        categories.forEach(cat => {
+            const point = values.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                
+                g.append("circle")
+                    .attr("class", `radar-point-${group}`)
+                    .attr("cx", distance * Math.cos(angle))
+                    .attr("cy", distance * Math.sin(angle))
+                    .attr("r", 4)
+                    .attr("fill", colorScale(group))
+                    .attr("stroke", "#fff")
+                    .attr("stroke-width", 1);
+            }
+        });
+    });
+    
+    // 添加图例
+    const legendGroup = svg.append("g");
+    
+    const legendSize = chartUtils.legend.draw(legendGroup, groups, colors, {
+        x: 0,
+        y: 0,
+        fontSize: 14,
+        fontWeight: "bold",
+        align: "left",
+        maxWidth: chartWidth,
+        textColor: "#fff",
+        shape: "circle",
+    });
+    
+    // 居中legend
+    legendGroup.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${-20 - legendSize.height/2})`);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/radar/multiple_radar_line_chart_03.js

@@ -0,0 +1,471 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Radar Line Chart",
+    "chart_name": "multiple_radar_line_chart_03",
+    "is_composite": false,
+    "required_fields": ["group", "x", "y"],
+    "required_fields_type": [["categorical"], ["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 7], [3, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "stroke"],
+    "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 sourceData = jsonData.data?.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || jsonData.colors_dark || {};
+    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 }
+    });
+
+    d3.select(containerSelector).html("");
+
+    const roleColumn = role => Array.from(dataColumns).find(col => col.role === role);
+    const categoryColumn = roleColumn("x") || dataColumns[0];
+    const valueColumn = roleColumn("y") || dataColumns[1];
+    const groupColumn = roleColumn("group") || dataColumns[2];
+    const categoryField = categoryColumn?.name;
+    const valueField = valueColumn?.name;
+    const groupField = groupColumn?.name;
+    const categoryType = categoryColumn?.data_type || "categorical";
+    const valueUnit = (valueColumn?.unit || "").trim();
+
+    const width = variables.width || 600;
+    const height = variables.height || 600;
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFont = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#64748b";
+    const panelBg = "#f5fbfd";
+    const cardBg = "#ffffff";
+    const panelStroke = "#d8ebef";
+    const gridColor = "rgba(92, 126, 142, 0.22)";
+    const primary = sourceColors.other?.primary || sourceColors.primary || "#2c7fb8";
+
+    const readableName = value => String(value || "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const shortLabel = (value, maxChars = 22) => {
+        const label = readableName(value);
+        if (label.length <= maxChars) return label;
+        const parts = label.split(/[\s/,-]+/).filter(Boolean);
+        if (parts.length > 1) {
+            const initials = parts.map(part => part[0]).join("").toUpperCase();
+            if (initials.length >= 2 && initials.length <= maxChars) return initials;
+        }
+        return `${label.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+
+    const blendWithWhite = (colorValue, amount = 0.86) => {
+        const color = d3.color(colorValue);
+        if (!color) return colorValue;
+        return d3.interpolateRgb(color.formatHex(), "#ffffff")(amount);
+    };
+
+    const compactNumber = value => {
+        const abs = Math.abs(value);
+        if (abs >= 1000000000) return `${d3.format(".2~f")(value / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".2~f")(value / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".2~f")(value / 1000)}K`;
+        if (abs >= 100) return d3.format(",.0f")(value);
+        if (abs >= 10) return d3.format(",.1f")(value).replace(/\.0$/, "");
+        if (abs >= 1) return d3.format(",.2f")(value).replace(/\.?0+$/, "");
+        return d3.format(",.3f")(value).replace(/\.?0+$/, "");
+    };
+
+    const formatLocalValue = value => {
+        const formatted = compactNumber(value);
+        const currencyWithSuffix = valueUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (valueUnit === "%") return `${formatted}%`;
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${formatted}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(valueUnit)) return `${valueUnit}${formatted}`;
+        if (valueUnit) return `${formatted} ${valueUnit}`;
+        return formatted;
+    };
+
+    const monthOrder = {
+        jan: 1, january: 1, feb: 2, february: 2, mar: 3, march: 3, apr: 4, april: 4,
+        may: 5, jun: 6, june: 6, jul: 7, july: 7, aug: 8, august: 8,
+        sep: 9, sept: 9, september: 9, oct: 10, october: 10, nov: 11, november: 11, dec: 12, december: 12
+    };
+
+    const categoryRank = value => {
+        const label = String(value || "").trim();
+        const lower = label.toLowerCase();
+        if (monthOrder[lower] != null) return monthOrder[lower];
+        const year = label.match(/^\d{4}$/);
+        if (year) return Number(label);
+        const yearMonth = label.match(/^(\d{4})[-/](\d{1,2})$/);
+        if (yearMonth) return Number(yearMonth[1]) * 100 + Number(yearMonth[2]);
+        return null;
+    };
+
+    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", "multiple-radar-line-chart-root");
+
+    if (!categoryField || !valueField || !groupField) {
+        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 radar fields");
+        return svg.node();
+    }
+
+    const rows = sourceData
+        .map((d, index) => ({
+            sourceIndex: index,
+            group: String(d[groupField]),
+            category: String(d[categoryField]),
+            rawCategory: d[categoryField],
+            value: Number(d[valueField])
+        }))
+        .filter(d => d.group && d.category && Number.isFinite(d.value) && d.value >= 0);
+
+    if (rows.length === 0) {
+        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 groups = Array.from(new Set(rows.map(d => d.group)));
+    const categoryValues = Array.from(new Set(rows.map(d => d.category)));
+    const rankedCategories = categoryValues.map(label => ({ label, rank: categoryRank(label) }));
+    const orderedCategories = rankedCategories.every(d => d.rank != null)
+        ? rankedCategories.sort((a, b) => d3.ascending(a.rank, b.rank)).map(d => d.label)
+        : categoryValues.sort((a, b) => d3.ascending(a, b));
+
+    const groupData = groups.map(group => {
+        const values = orderedCategories.map(category => {
+            const match = rows.find(d => d.group === group && d.category === category);
+            return {
+                category,
+                value: match ? match.value : 0,
+                sourceIndex: match ? match.sourceIndex : -1
+            };
+        });
+        return {
+            group,
+            values,
+            maxValue: d3.max(values, d => d.value) || 0,
+            meanValue: d3.mean(values, d => d.value) || 0,
+            sourceIndexes: values.map(d => d.sourceIndex).filter(index => index >= 0)
+        };
+    }).sort((a, b) => d3.descending(a.meanValue, b.meanValue) || d3.ascending(a.group, b.group));
+    groupData.forEach((series, index) => {
+        series.rank = index + 1;
+    });
+
+    const allValues = rows.map(d => d.value);
+    const maxValue = d3.max(allValues) || 1;
+    const radiusScaleDomainMax = d3.scaleLinear().domain([0, maxValue]).nice(5).domain()[1];
+
+    const chartCount = groupData.length;
+    const columns = chartCount <= 3 ? chartCount : Math.ceil(chartCount / 2);
+    const gridRows = Math.ceil(chartCount / columns);
+    const outerPad = Math.max(14, Math.min(22, width * 0.03));
+    const headerH = 44;
+    const footerH = 58;
+    const margin = { top: outerPad + headerH, right: outerPad + 12, bottom: outerPad + footerH, left: outerPad + 12 };
+    const gridWidth = width - margin.left - margin.right;
+    const gridHeight = height - margin.top - margin.bottom;
+    const cellWidth = gridWidth / columns;
+    const cellHeight = gridHeight / gridRows;
+    const cardGap = Math.max(10, Math.min(16, width * 0.022));
+    const radius = Math.max(44, Math.min(cellWidth - cardGap * 2, cellHeight - cardGap * 2 - 38) * 0.34);
+    const labelRadius = radius + (orderedCategories.length > 8 ? 14 : 12);
+    const categoryDense = orderedCategories.length > 8;
+    const palette = sourceColors.available_colors || d3.schemeTableau10 || d3.schemeCategory10;
+    const groupColors = d3.scaleOrdinal()
+        .domain(groupData.map(d => d.group))
+        .range(groupData.map((d, index) => sourceColors.field?.[d.group] || palette[index % palette.length] || primary));
+
+    const angleForIndex = index => (index / orderedCategories.length) * Math.PI * 2 - Math.PI / 2;
+    const radiusScale = d3.scaleLinear()
+        .domain([0, radiusScaleDomainMax])
+        .range([0, radius]);
+    const ticks = radiusScale.ticks(4).filter(tick => tick > 0);
+
+    const polygonPoints = values => orderedCategories.map((category, index) => {
+        const point = values.find(d => d.category === category);
+        const distance = radiusScale(point ? point.value : 0);
+        const angle = angleForIndex(index);
+        return [distance * Math.cos(angle), distance * Math.sin(angle)];
+    });
+
+    const line = d3.line().curve(d3.curveLinearClosed);
+
+    const panel = svg.append("g")
+        .attr("class", "chart-style-panel")
+        .attr("data-chart-layout", "light-radar-card-grid");
+
+    panel.append("rect")
+        .attr("x", outerPad / 2)
+        .attr("y", outerPad / 2)
+        .attr("width", width - outerPad)
+        .attr("height", height - outerPad)
+        .attr("rx", 18)
+        .attr("fill", panelBg)
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1.1);
+
+    panel.append("circle")
+        .attr("class", "header-icon-dot")
+        .attr("cx", outerPad + 12)
+        .attr("cy", outerPad + 16)
+        .attr("r", 8)
+        .attr("fill", blendWithWhite(primary, 0.35));
+
+    panel.append("text")
+        .attr("class", "chart-kicker")
+        .attr("x", outerPad + 28)
+        .attr("y", outerPad + 20)
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .style("font-weight", "700")
+        .style("letter-spacing", "0px")
+        .text(`${chartCount} radar cards`);
+
+    groupData.forEach((series, index) => {
+        const row = Math.floor(index / columns);
+        const col = index % columns;
+        const rowCount = row === gridRows - 1 ? chartCount - row * columns : columns;
+        const rowOffset = (columns - rowCount) * cellWidth / 2;
+        const color = groupColors(series.group);
+        const cardX = margin.left + rowOffset + col * cellWidth + cardGap / 2;
+        const cardY = margin.top + row * cellHeight + cardGap / 2;
+        const cardW = cellWidth - cardGap;
+        const cardH = cellHeight - cardGap;
+        const cx = cardX + cardW / 2;
+        const cy = cardY + cardH / 2 + 7;
+
+        const card = svg.append("g")
+            .attr("class", "radar-card")
+            .attr("data-group", series.group)
+            .attr("data-source-indexes", series.sourceIndexes.join(","))
+            .attr("data-rank", series.rank);
+
+        card.append("rect")
+            .attr("x", cardX)
+            .attr("y", cardY)
+            .attr("width", cardW)
+            .attr("height", cardH)
+            .attr("rx", 14)
+            .attr("fill", cardBg)
+            .attr("stroke", blendWithWhite(color, 0.45))
+            .attr("stroke-width", 1.2);
+
+        card.append("rect")
+            .attr("x", cardX + 12)
+            .attr("y", cardY + 12)
+            .attr("width", 22)
+            .attr("height", 6)
+            .attr("rx", 3)
+            .attr("fill", color)
+            .attr("opacity", 0.78);
+
+        const chart = svg.append("g")
+            .attr("class", "radar-small-multiple")
+            .attr("data-group", series.group)
+            .attr("data-source-indexes", series.sourceIndexes.join(","))
+            .attr("data-rank", series.rank)
+            .attr("transform", `translate(${cx}, ${cy})`);
+
+        ticks.forEach(tick => {
+            chart.append("circle")
+                .attr("class", "radar-grid-ring")
+                .attr("r", radiusScale(tick))
+                .attr("fill", "none")
+                .attr("stroke", gridColor)
+                .attr("stroke-width", 1);
+        });
+
+        orderedCategories.forEach((category, categoryIndex) => {
+            const angle = angleForIndex(categoryIndex);
+            const outerX = radius * Math.cos(angle);
+            const outerY = radius * Math.sin(angle);
+
+            chart.append("line")
+                .attr("class", "radar-axis-line")
+                .attr("x1", 0)
+                .attr("y1", 0)
+                .attr("x2", outerX)
+                .attr("y2", outerY)
+                .attr("stroke", gridColor)
+                .attr("stroke-width", 1);
+
+            const showDenseCategory = categoryDense
+                ? categoryIndex % Math.ceil(orderedCategories.length / 6) === 0
+                : true;
+            if (showDenseCategory) {
+                const labelX = labelRadius * Math.cos(angle);
+                const labelY = labelRadius * Math.sin(angle);
+                const cos = Math.cos(angle);
+                const sin = Math.sin(angle);
+                chart.append("text")
+                    .attr("class", "radar-category-label")
+                    .attr("data-category", category)
+                    .attr("x", labelX)
+                    .attr("y", labelY)
+                    .attr("text-anchor", Math.abs(cos) < 0.2 ? "middle" : (cos > 0 ? "start" : "end"))
+                    .attr("dominant-baseline", Math.abs(sin) < 0.2 ? "middle" : (sin > 0 ? "hanging" : "auto"))
+                    .attr("fill", mutedText)
+                    .style("font-family", fontFamily)
+                    .style("font-size", categoryDense ? "7.6px" : "8.8px")
+                    .style("font-weight", "650")
+                    .text(shortLabel(category, categoryDense ? 6 : 10));
+            }
+        });
+
+        chart.append("path")
+            .attr("class", "mark radar-line")
+            .attr("data-tag", "mark")
+            .attr("data-group", series.group)
+            .attr("data-source-indexes", series.sourceIndexes.join(","))
+            .attr("data-rank", series.rank)
+            .attr("d", line(polygonPoints(series.values)))
+            .attr("fill", color)
+            .attr("fill-opacity", 0.16)
+            .attr("stroke", color)
+            .attr("stroke-width", 2.2)
+            .attr("stroke-linejoin", "round");
+
+        series.values.forEach((point, pointIndex) => {
+            const angle = angleForIndex(pointIndex);
+            const distance = radiusScale(point.value);
+            chart.append("circle")
+                .attr("class", "radar-point")
+                .attr("data-tag", "mark")
+                .attr("data-group", series.group)
+                .attr("data-category", point.category)
+                .attr("data-value", point.value)
+                .attr("data-source-index", point.sourceIndex)
+                .attr("data-rank", series.rank)
+                .attr("cx", distance * Math.cos(angle))
+                .attr("cy", distance * Math.sin(angle))
+                .attr("r", 2.6)
+                .attr("fill", color)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 1.2);
+        });
+
+        chart.append("text")
+            .attr("class", "radar-group-label")
+            .attr("x", 0)
+            .attr("y", -radius - (categoryDense ? 28 : 24))
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", titleFont)
+            .style("font-size", "10.5px")
+            .style("font-weight", "800")
+            .text(shortLabel(series.group, Math.max(12, Math.floor(cardW / 8))));
+
+        chart.append("text")
+            .attr("class", "radar-group-value-label")
+            .attr("data-group", series.group)
+            .attr("data-value", series.maxValue)
+            .attr("x", 0)
+            .attr("y", radius + (categoryDense ? 40 : 30))
+            .attr("text-anchor", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "8.5px")
+            .style("font-weight", "700")
+            .text(`max ${formatLocalValue(series.maxValue)}`);
+    });
+
+    const legend = svg.append("g")
+        .attr("class", "radar-scale-key")
+        .attr("transform", `translate(${outerPad + 12}, ${height - outerPad - footerH + 13})`);
+
+    svg.insert("rect", ".radar-scale-key")
+        .attr("class", "radar-summary-strip")
+        .attr("x", outerPad + 8)
+        .attr("y", height - outerPad - footerH + 2)
+        .attr("width", width - outerPad * 2 - 16)
+        .attr("height", footerH - 12)
+        .attr("rx", 13)
+        .attr("fill", "#ffffff")
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1);
+
+    legend.append("text")
+        .attr("class", "radar-scale-title")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .style("font-weight", "700")
+        .text(`${readableName(valueColumn?.label || valueColumn?.name || valueField)} scale: 0-${formatLocalValue(radiusScaleDomainMax)}`);
+
+    const categoryKey = svg.append("g")
+        .attr("class", "radar-category-key")
+        .attr("transform", `translate(${Math.max(outerPad + 12, width - outerPad - 260)}, ${height - outerPad - footerH + 13})`);
+
+    categoryKey.append("text")
+        .attr("class", "radar-category-key-label")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .text(`${readableName(categoryColumn?.label || categoryColumn?.name || categoryField)} order: ${shortLabel(orderedCategories[0], 10)} to ${shortLabel(orderedCategories[orderedCategories.length - 1], 10)}`);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/radar/multiple_radar_spline_chart_01.js

@@ -0,0 +1,242 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Radar Spline Chart",
+    "chart_name": "multiple_radar_spline_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 7], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, 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 radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别和分组
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    
+    // 计算每个分组的平均值并按降序排序
+    const groupAvgs = [...new Set(chartData.map(d => d[groupField]))]
+        .map(group => ({
+            group,
+            avg: d3.mean(chartData.filter(d => d[groupField] === group), d => +d[valueField])
+        }))
+        .sort((a, b) => b.avg - a.avg);
+    
+    const groups = groupAvgs.map(d => d.group);
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "tableau10" }).value;
+    
+    // 创建角度比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    // 创建半径比例尺
+    const allValues = chartData.map(d => +d[valueField]);
+    const minValue = Math.min(0, d3.min(allValues));
+    const maxValue = d3.max(allValues);
+    
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue * 1.2])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制背景圆环
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆
+    g.selectAll(".circle-axis")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "circle-axis")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis-line")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", (d, i) => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", (d, i) => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".category-label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "category-label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle < Math.PI ? "hanging" : "auto";
+        })
+        .attr("fill", "#333")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => chartUtils.format.category(d).text);
+    
+    // 添加刻度值标签
+    g.selectAll(".tick-label")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "tick-label")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d))
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#666")
+        .text(d => chartUtils.format.number(d).text);
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+    
+    // 创建样条曲线生成器
+    const lineGenerator = d => {
+        const points = categories.map(cat => {
+            const point = d.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                return [
+                    distance * Math.cos(angle),
+                    distance * Math.sin(angle)
+                ];
+            }
+            return [0, 0]; // 如果没有数据，默认为中心点
+        });
+        
+        // 为了闭合曲线，我们需要复制第一个点到最后
+        const closedPoints = [...points];
+        
+        // 使用基本的曲线插值器,但降低tension值使曲线更平滑
+        return d3.line()
+            .curve(d3.curveCatmullRomClosed.alpha(0.5))(closedPoints);
+    };
+    
+    // 绘制每个组的雷达曲线
+    groupedData.forEach((values, group) => {
+        // 绘制曲线
+        g.append("path")
+            .datum(values)
+            .attr("class", `radar-line-${group}`)
+            .attr("d", lineGenerator)
+            .attr("fill", colorScale(group))
+            .attr("fill-opacity", 0)
+            .attr("stroke", colorScale(group))
+            .attr("stroke-width", 4);
+        
+        // 绘制数据点
+        categories.forEach(cat => {
+            const point = values.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                
+                g.append("circle")
+                    .attr("class", `radar-point-${group}`)
+                    .attr("cx", distance * Math.cos(angle))
+                    .attr("cy", distance * Math.sin(angle))
+                    .attr("r", 6)
+                    .attr("fill", colorScale(group))
+                    .attr("stroke", "#fff")
+                    .attr("stroke-width", 2);
+            }
+        });
+    });
+    
+    // 添加图例
+    const legendGroup = svg.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}, ${-20 - legendSize.height/2})`);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/radar/multiple_radar_spline_chart_02.js

@@ -0,0 +1,243 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Radar Spline Chart",
+    "chart_name": "multiple_radar_spline_chart_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 7], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "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 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 categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, 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 radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别和分组
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    
+    // 计算每个分组的平均值并按降序排序
+    const groupAvgs = [...new Set(chartData.map(d => d[groupField]))]
+        .map(group => ({
+            group,
+            avg: d3.mean(chartData.filter(d => d[groupField] === group), d => +d[valueField])
+        }))
+        .sort((a, b) => b.avg - a.avg);
+    
+    const groups = groupAvgs.map(d => d.group);
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "tableau10" }).value;
+    
+    // 创建角度比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    // 创建半径比例尺
+    const allValues = chartData.map(d => +d[valueField]);
+    const minValue = Math.min(0, d3.min(allValues));
+    const maxValue = d3.max(allValues);
+    
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue * 1.2])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制背景圆环
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆
+    g.selectAll(".circle-axis")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "circle-axis")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis-line")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", (d, i) => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", (d, i) => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".category-label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "category-label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle < Math.PI ? "hanging" : "auto";
+        })
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => chartUtils.format.category(d).text);
+    
+    // 添加刻度值标签
+    g.selectAll(".tick-label")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "tick-label")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d))
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#ddd")
+        .text(d => chartUtils.format.number(d).text);
+    
+    // 按组分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+    
+    // 创建样条曲线生成器
+    const lineGenerator = d => {
+        const points = categories.map(cat => {
+            const point = d.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                return [
+                    distance * Math.cos(angle),
+                    distance * Math.sin(angle)
+                ];
+            }
+            return [0, 0]; // 如果没有数据，默认为中心点
+        });
+        
+        // 为了闭合曲线，我们需要复制第一个点到最后
+        const closedPoints = [...points];
+        
+        // 使用基本的曲线插值器,但降低tension值使曲线更平滑
+        return d3.line()
+            .curve(d3.curveCatmullRomClosed.alpha(0.5))(closedPoints);
+    };
+    
+    // 绘制每个组的雷达曲线
+    groupedData.forEach((values, group) => {
+        // 绘制曲线
+        g.append("path")
+            .datum(values)
+            .attr("class", `radar-line-${group}`)
+            .attr("d", lineGenerator)
+            .attr("fill", colorScale(group))
+            .attr("fill-opacity", 0)
+            .attr("stroke", colorScale(group))
+            .attr("stroke-width", 4);
+        
+        // 绘制数据点
+        categories.forEach(cat => {
+            const point = values.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                
+                g.append("circle")
+                    .attr("class", `radar-point-${group}`)
+                    .attr("cx", distance * Math.cos(angle))
+                    .attr("cy", distance * Math.sin(angle))
+                    .attr("r", 6)
+                    .attr("fill", colorScale(group))
+                    .attr("stroke", "#fff")
+                    .attr("stroke-width", 2);
+            }
+        });
+    });
+    
+    // 添加图例
+    const legendGroup = svg.append("g");
+    
+    const legendSize = chartUtils.legend.draw(legendGroup, groups, colors, {
+        x: 0,
+        y: 0,
+        fontSize: 14,
+        fontWeight: "bold",
+        align: "left",
+        maxWidth: chartWidth,
+        textColor: "#fff",
+        shape: "circle",
+    });
+    
+    // 居中legend
+    legendGroup.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${-20 - legendSize.height/2})`);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/radar/multiple_radar_spline_chart_03.js

@@ -0,0 +1,639 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Radar Spline Chart",
+    "chart_name": "multiple_radar_spline_chart_03",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 7], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const sourceData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors_light || jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const roleColumn = role => Array.from(dataColumns).find(col => col.role === role);
+    const categoryColumn = roleColumn("x") || dataColumns[0] || {};
+    const valueColumn = roleColumn("y") || dataColumns[1] || {};
+    const groupColumn = roleColumn("group") || dataColumns[2] || {};
+    const categoryField = categoryColumn.name;
+    const valueField = valueColumn.name;
+    const groupField = groupColumn.name;
+    const valueUnit = (valueColumn.unit || "").trim();
+
+    const width = Number(variables.width) || 600;
+    const height = Number(variables.height) || 600;
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFamily = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#64748b";
+    const panelBg = "#f5fbfd";
+    const panelStroke = "#d8ebef";
+    const plotCardFill = "#ffffff";
+    const gridColor = "rgba(92, 126, 142, 0.2)";
+    const axisColor = "rgba(71, 85, 105, 0.28)";
+
+    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", "multiple-radar-spline-chart-root");
+
+    if (!categoryField || !valueField || !groupField) {
+        svg.append("text")
+            .attr("class", "chart-message")
+            .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 radar fields");
+        return svg.node();
+    }
+
+    function readableLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function compactNumber(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return String(value ?? "");
+        const abs = Math.abs(numeric);
+        if (abs >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatLocalValue(value, includeUnit = true) {
+        const formatted = compactNumber(value);
+        if (!includeUnit || !valueUnit || valueUnit === "none") return formatted;
+        if (valueUnit === "%") return `${formatted}%`;
+        const currencyWithSuffix = valueUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${formatted}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(valueUnit)) return `${valueUnit}${formatted}`;
+        return `${formatted} ${valueUnit}`;
+    }
+
+    function parseTemporalRank(value) {
+        const text = String(value ?? "").trim();
+        const lower = text.toLowerCase();
+        const monthOrder = {
+            jan: 1, january: 1, feb: 2, february: 2, mar: 3, march: 3, apr: 4, april: 4,
+            may: 5, jun: 6, june: 6, jul: 7, july: 7, aug: 8, august: 8,
+            sep: 9, sept: 9, september: 9, oct: 10, october: 10, nov: 11, november: 11, dec: 12, december: 12
+        };
+        if (monthOrder[lower] != null) return monthOrder[lower];
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return Number(match[1]) * 10000;
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return Number(match[1]) * 10000 + Number(match[2]) * 100 + 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 && match[1].length === 1) return Number(match[2]) * 10 + Number(match[1]);
+        if (match) return Number(match[1]) * 10 + Number(match[2]);
+        return NaN;
+    }
+
+    function parseOrdinalRank(value) {
+        const text = String(value ?? "").trim().toLowerCase();
+        let match = text.match(/^(\d+(?:\.\d+)?)\s*(?:-|to|–|—)\s*\d+(?:\.\d+)?/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(\d+(?:\.\d+)?)\s*\+$/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(\d+)(?:st|nd|rd|th)\b/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(-?\d+(?:\.\d+)?)/);
+        if (match) return Number(match[1]);
+
+        const sizeRanks = [
+            [/very\s+small|micro|tiny/, 1],
+            [/town|village/, 1.5],
+            [/small\s+city|small/, 2],
+            [/mid[-\s]?sized|medium/, 3],
+            [/regional\s+hub/, 4],
+            [/very\s+large/, 6],
+            [/large\b/, 5],
+            [/metro|metropolis|mega/, 7]
+        ];
+        for (const [pattern, rank] of sizeRanks) {
+            if (pattern.test(text)) return rank;
+        }
+        return NaN;
+    }
+
+    function splitLabel(label, maxChars = 17, maxLines = 2) {
+        const text = readableLabel(label);
+        if (text.length <= maxChars) return [text];
+        const parts = text
+            .replace(/\//g, "/ ")
+            .replace(/,/g, ", ")
+            .split(/\s+/)
+            .filter(Boolean);
+        const lines = [];
+        let current = "";
+        parts.forEach(part => {
+            if (!current) {
+                current = part;
+            } else if (`${current} ${part}`.length <= maxChars) {
+                current = `${current} ${part}`;
+            } else {
+                lines.push(current);
+                current = part;
+            }
+        });
+        if (current) lines.push(current);
+
+        const expanded = [];
+        lines.forEach(line => {
+            if (line.length <= maxChars) {
+                expanded.push(line);
+            } else {
+                for (let i = 0; i < line.length; i += maxChars) {
+                    expanded.push(line.slice(i, i + maxChars));
+                }
+            }
+        });
+        if (expanded.length <= maxLines) return expanded;
+        const kept = expanded.slice(0, maxLines);
+        kept[maxLines - 1] = expanded.slice(maxLines - 1).join(" ");
+        return kept;
+    }
+
+    function shortLabel(value, maxChars = 18) {
+        const label = readableLabel(value);
+        if (label.length <= maxChars) return label;
+        const parts = label.split(/[\s/,-]+/).filter(Boolean);
+        if (parts.length > 1) {
+            const initials = parts.map(part => part[0]).join("").toUpperCase();
+            if (initials.length >= 2 && initials.length <= maxChars) return initials;
+        }
+        return `${label.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    }
+
+    function blendWithWhite(colorValue, amount = 0.86) {
+        const color = d3.color(colorValue);
+        if (!color) return colorValue;
+        return d3.interpolateRgb(color.formatHex(), "#ffffff")(amount);
+    }
+
+    function appendWrappedText(selection, lines, options = {}) {
+        const {
+            x = 0,
+            y = 0,
+            anchor = "middle",
+            lineHeight = 12,
+            fill = textColor,
+            fontSize = 11,
+            fontWeight = "600",
+            family = fontFamily
+        } = options;
+        const text = selection.append("text")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", anchor)
+            .attr("fill", fill)
+            .style("font-family", family)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", fontWeight);
+        const yOffset = -((lines.length - 1) * lineHeight) / 2;
+        lines.forEach((line, index) => {
+            text.append("tspan")
+                .attr("x", x)
+                .attr("dy", index === 0 ? yOffset : lineHeight)
+                .text(line);
+        });
+        return text;
+    }
+
+    function safeId(value) {
+        return String(value ?? "")
+            .replace(/[^a-zA-Z0-9_-]+/g, "-")
+            .replace(/^-+|-+$/g, "")
+            .slice(0, 40) || "series";
+    }
+
+    const rows = sourceData
+        .map((d, index) => ({
+            index,
+            group: readableLabel(d[groupField]),
+            category: readableLabel(d[categoryField]),
+            rawCategory: d[categoryField],
+            value: Number(d[valueField])
+        }))
+        .filter(d => d.group && d.category && Number.isFinite(d.value) && d.value >= 0);
+
+    const categoryValues = Array.from(new Set(rows.map(d => d.category)));
+    const groupValues = Array.from(new Set(rows.map(d => d.group)));
+
+    if (categoryValues.length < 3 || groupValues.length < 1 || rows.length < 3) {
+        svg.append("text")
+            .attr("class", "chart-message")
+            .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 for radar spline");
+        return svg.node();
+    }
+
+    const categoryStats = categoryValues.map(category => {
+        const categoryRows = rows.filter(d => d.category === category);
+        return {
+            category,
+            temporalRank: parseTemporalRank(categoryRows[0]?.rawCategory ?? category),
+            ordinalRank: parseOrdinalRank(categoryRows[0]?.rawCategory ?? category),
+            meanValue: d3.mean(categoryRows, d => d.value) || 0
+        };
+    });
+    const allTemporal = categoryStats.every(d => Number.isFinite(d.temporalRank));
+    const allOrdinal = !allTemporal && categoryStats.every(d => Number.isFinite(d.ordinalRank));
+    const sortMode = allTemporal ? "chronological" : (allOrdinal ? "ordered category" : "mean value");
+    const orderedCategories = [...categoryStats]
+        .sort((a, b) => {
+            if (allTemporal) return d3.ascending(a.temporalRank, b.temporalRank);
+            if (allOrdinal) return d3.ascending(a.ordinalRank, b.ordinalRank);
+            return d3.descending(a.meanValue, b.meanValue) || d3.ascending(a.category, b.category);
+        })
+        .map(d => d.category);
+
+    const aggregated = new Map();
+    rows.forEach(d => {
+        const key = `${d.group}\u0000${d.category}`;
+        const current = aggregated.get(key) || { group: d.group, category: d.category, values: [], sourceIndexes: [] };
+        current.values.push(d.value);
+        current.sourceIndexes.push(d.index);
+        aggregated.set(key, current);
+    });
+
+    const groups = groupValues.map(group => {
+        const values = orderedCategories.map(category => {
+            const entry = aggregated.get(`${group}\u0000${category}`);
+            return {
+                category,
+                value: entry ? d3.mean(entry.values) : 0,
+                sourceIndexes: entry ? entry.sourceIndexes : []
+            };
+        });
+        return {
+            group,
+            values,
+            meanValue: d3.mean(values, d => d.value) || 0,
+            maxValue: d3.max(values, d => d.value) || 0,
+            sourceIndexes: values.flatMap(d => d.sourceIndexes)
+        };
+    }).sort((a, b) => d3.descending(a.meanValue, b.meanValue) || d3.ascending(a.group, b.group));
+    groups.forEach((series, index) => {
+        series.rank = index + 1;
+    });
+
+    const groupColor = group => {
+        if (sourceColors.field && sourceColors.field[group]) return sourceColors.field[group];
+        const originalGroup = rows.find(d => d.group === group)?.group;
+        if (originalGroup && sourceColors.field && sourceColors.field[originalGroup]) return sourceColors.field[originalGroup];
+        const palette = sourceColors.available_colors || d3.schemeTableau10 || d3.schemeCategory10;
+        return palette[groups.findIndex(d => d.group === group) % palette.length];
+    };
+
+    const maxValue = Math.max(1, d3.max(rows, d => d.value) || 1);
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .nice(5);
+    const domainMax = radiusScale.domain()[1];
+
+    const outerPad = Math.max(14, Math.min(22, width * 0.03));
+    const footerH = Math.max(74, groups.length > 3 ? 92 : 76);
+    const margin = { top: outerPad + 52, right: 82, bottom: outerPad + footerH + 18, left: 82 };
+    const centerX = width / 2;
+    const centerY = margin.top + (height - margin.top - margin.bottom) * 0.5;
+    const radius = Math.max(
+        88,
+        Math.min(
+            (width - margin.left - margin.right) / 2,
+            centerY - margin.top - 12,
+            height - margin.bottom - centerY - 14
+        )
+    );
+    radiusScale.range([0, radius]);
+
+    const labelRadius = radius + 26;
+    const tickValues = radiusScale.ticks(5).filter(tick => tick > 0);
+    const angleForIndex = index => (index / orderedCategories.length) * Math.PI * 2 - Math.PI / 2;
+    const pointFor = (categoryIndex, value) => {
+        const angle = angleForIndex(categoryIndex);
+        const distance = radiusScale(value);
+        return [distance * Math.cos(angle), distance * Math.sin(angle)];
+    };
+    const splineLine = d3.line()
+        .curve(d3.curveCatmullRomClosed.alpha(0.55));
+
+    const defs = svg.append("defs");
+    const panel = svg.append("g")
+        .attr("class", "chart-style-panel")
+        .attr("data-chart-layout", "light-single-radar-reference");
+
+    panel.append("rect")
+        .attr("x", outerPad / 2)
+        .attr("y", outerPad / 2)
+        .attr("width", width - outerPad)
+        .attr("height", height - outerPad)
+        .attr("rx", 18)
+        .attr("fill", panelBg)
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1.1);
+
+    panel.append("circle")
+        .attr("class", "header-icon-dot")
+        .attr("cx", outerPad + 12)
+        .attr("cy", outerPad + 16)
+        .attr("r", 8)
+        .attr("fill", blendWithWhite(groupColor(groups[0].group), 0.35));
+
+    panel.append("text")
+        .attr("class", "chart-kicker")
+        .attr("x", outerPad + 28)
+        .attr("y", outerPad + 20)
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .style("font-weight", "700")
+        .style("letter-spacing", "0px")
+        .text(`${groups.length} spline series`);
+
+    svg.append("rect")
+        .attr("class", "radar-plot-card")
+        .attr("x", outerPad + 16)
+        .attr("y", margin.top - 32)
+        .attr("width", width - (outerPad + 16) * 2)
+        .attr("height", height - margin.top - margin.bottom + 72)
+        .attr("rx", 18)
+        .attr("fill", plotCardFill)
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1);
+
+    const plot = svg.append("g")
+        .attr("class", "radar-spline-plot")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    plot.append("circle")
+        .attr("class", "radar-plot-background")
+        .attr("r", radius + 8)
+        .attr("fill", "rgba(240, 249, 252, 0.76)")
+        .attr("stroke", "rgba(148, 163, 184, 0.16)")
+        .attr("stroke-width", 1);
+
+    tickValues.forEach(tick => {
+        plot.append("circle")
+            .attr("class", "radar-grid-ring gridline")
+            .attr("r", radiusScale(tick))
+            .attr("fill", "none")
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1);
+
+        plot.append("text")
+            .attr("class", "radar-tick-label axis-tick")
+            .attr("x", 7)
+            .attr("y", -radiusScale(tick) + 3)
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "9px")
+            .style("font-weight", "500")
+            .text(formatLocalValue(tick, false));
+    });
+
+    orderedCategories.forEach((category, index) => {
+        const angle = angleForIndex(index);
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const axisEnd = pointFor(index, domainMax);
+
+        plot.append("line")
+            .attr("class", "radar-axis-line")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", axisEnd[0])
+            .attr("y2", axisEnd[1])
+            .attr("stroke", axisColor)
+            .attr("stroke-width", 1);
+
+        const labelX = labelRadius * cos;
+        const labelY = labelRadius * sin;
+        const anchor = Math.abs(cos) < 0.18 ? "middle" : (cos > 0 ? "start" : "end");
+        appendWrappedText(plot, splitLabel(category, orderedCategories.length > 6 ? 14 : 17, 2), {
+            x: labelX,
+            y: labelY,
+            anchor,
+            lineHeight: orderedCategories.length > 6 ? 10 : 11,
+            fill: textColor,
+            fontSize: orderedCategories.length > 6 ? 9.5 : 10.5,
+            fontWeight: "650",
+            family: fontFamily
+        }).attr("class", "radar-category-label category-label");
+    });
+
+    groups.forEach((series, seriesIndex) => {
+        const color = groupColor(series.group);
+        const points = series.values.map((point, pointIndex) => pointFor(pointIndex, point.value));
+        const gradientId = `radar-spline-fill-${seriesIndex}-${safeId(series.group)}`;
+        const gradient = defs.append("radialGradient")
+            .attr("id", gradientId)
+            .attr("cx", "50%")
+            .attr("cy", "50%")
+            .attr("r", "58%");
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", color)
+            .attr("stop-opacity", 0.16);
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", color)
+            .attr("stop-opacity", 0.04);
+
+        const seriesGroup = plot.append("g")
+            .attr("class", "radar-series")
+            .attr("data-group", series.group)
+            .attr("data-source-indexes", series.sourceIndexes.join(","))
+            .attr("data-rank", series.rank);
+
+        seriesGroup.append("path")
+            .attr("class", "radar-area")
+            .attr("data-group", series.group)
+            .attr("data-source-indexes", series.sourceIndexes.join(","))
+            .attr("data-rank", series.rank)
+            .attr("d", splineLine(points))
+            .attr("fill", `url(#${gradientId})`)
+            .attr("stroke", "none")
+            .attr("pointer-events", "none");
+
+        seriesGroup.append("path")
+            .attr("class", "mark radar-spline-line")
+            .attr("data-tag", "mark")
+            .attr("data-group", series.group)
+            .attr("data-source-indexes", series.sourceIndexes.join(","))
+            .attr("data-rank", series.rank)
+            .attr("d", splineLine(points))
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 2.4)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("opacity", seriesIndex < 4 ? 0.96 : 0.86);
+
+        series.values.forEach((point, pointIndex) => {
+            const [x, y] = pointFor(pointIndex, point.value);
+            seriesGroup.append("circle")
+                .attr("class", "radar-point data-point")
+                .attr("data-tag", "mark")
+                .attr("data-category", point.category)
+                .attr("data-group", series.group)
+                .attr("data-value", point.value)
+                .attr("data-source-indexes", point.sourceIndexes.join(","))
+                .attr("data-rank", series.rank)
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", 3.5)
+                .attr("fill", color)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 1.2);
+        });
+    });
+
+    svg.append("text")
+        .attr("class", "scale-note axis-title")
+        .attr("x", outerPad + 16)
+        .attr("y", outerPad + 40)
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "11px")
+        .style("font-weight", "600")
+        .text(`${readableLabel(valueColumn.label || valueField)} scale: 0-${formatLocalValue(domainMax)}`);
+
+    const legendColumns = groups.length <= 3 ? groups.length : 3;
+    const legendItemWidth = (width - 70) / Math.max(legendColumns, 1);
+    const footerY = height - outerPad - footerH + 8;
+    svg.append("rect")
+        .attr("class", "radar-summary-strip")
+        .attr("x", outerPad + 10)
+        .attr("y", footerY)
+        .attr("width", width - outerPad * 2 - 20)
+        .attr("height", footerH - 12)
+        .attr("rx", 14)
+        .attr("fill", "#ffffff")
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1);
+
+    const legend = svg.append("g")
+        .attr("class", "radar-legend")
+        .attr("transform", `translate(${outerPad + 28}, ${footerY + 16})`);
+
+    groups.forEach((series, index) => {
+        const col = index % legendColumns;
+        const row = Math.floor(index / legendColumns);
+        const item = legend.append("g")
+            .attr("class", "legend-item")
+            .attr("data-group", series.group)
+            .attr("data-source-indexes", series.sourceIndexes.join(","))
+            .attr("data-rank", series.rank)
+            .attr("transform", `translate(${col * legendItemWidth}, ${row * 23})`);
+        const color = groupColor(series.group);
+
+        item.append("line")
+            .attr("x1", 0)
+            .attr("y1", 7)
+            .attr("x2", 20)
+            .attr("y2", 7)
+            .attr("stroke", color)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round");
+        item.append("circle")
+            .attr("cx", 10)
+            .attr("cy", 7)
+            .attr("r", 3)
+            .attr("fill", color)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 1);
+        item.append("text")
+            .attr("class", "legend-label")
+            .attr("x", 28)
+            .attr("y", 10)
+            .attr("fill", textColor)
+            .style("font-family", titleFamily)
+            .style("font-size", "11px")
+            .style("font-weight", "700")
+            .text(shortLabel(series.group, 18));
+        item.append("text")
+            .attr("class", "legend-value")
+            .attr("data-group", series.group)
+            .attr("data-value", series.meanValue)
+            .attr("x", 28)
+            .attr("y", 22)
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "8.5px")
+            .text(`avg ${formatLocalValue(series.meanValue)}`);
+    });
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", width / 2)
+        .attr("y", height - outerPad - 8)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .text(`${readableLabel(categoryColumn.label || categoryField)} order: ${sortMode}`);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/radar/radar_line_chart_01.js

@@ -0,0 +1,232 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radar Line Chart",
+    "chart_name": "radar_line_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, 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 radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    
+    // 获取主色调
+    const mainColor = colorResolver.other("primary", { fallback: "#1f77b4" }).value;
+    
+    // 创建角度比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    // 创建半径比例尺
+    const allValues = chartData.map(d => +d[valueField]);
+    const minValue = Math.min(0, d3.min(allValues));
+    const maxValue = d3.max(allValues);
+    
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue * 1.2])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制背景圆环
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆
+    g.selectAll(".circle-axis")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "circle-axis")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis-line")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", (d, i) => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", (d, i) => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".category-label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "category-label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle < Math.PI ? "hanging" : "auto";
+        })
+        .attr("fill", "#333")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => d);
+    
+    // 添加刻度值标签
+    g.selectAll(".tick-label")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "tick-label")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d))
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#666")
+        .text(d => d);
+    
+    // 创建折线生成器
+    const lineGenerator = () => {
+        const points = categories.map(cat => {
+            const point = chartData.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                return [
+                    distance * Math.cos(angle),
+                    distance * Math.sin(angle)
+                ];
+            }
+            return [0, 0]; // 如果没有数据，默认为中心点
+        });
+        
+        // 使用折线连接点
+        return d3.line()(points) + "Z"; // 闭合路径
+    };
+    
+    // 绘制雷达折线
+    g.append("path")
+        .attr("class", "radar-line")
+        .attr("d", lineGenerator())
+        .attr("fill", mainColor)
+        .attr("fill-opacity", 0.2)
+        .attr("stroke", mainColor)
+        .attr("stroke-width", 6)
+        .attr("stroke-linejoin", "miter"); // 使用尖角连接，强调折线效果
+    
+    // 绘制数据点
+    categories.forEach((cat, index) => {
+        const point = chartData.find(item => item[categoryField] === cat);
+        if (point) {
+            const angle = angleScale(cat) - Math.PI/2;
+            const distance = radiusScale(+point[valueField]);
+            
+            g.append("circle")
+                .attr("class", "radar-point")
+                .attr("cx", distance * Math.cos(angle))
+                .attr("cy", distance * Math.sin(angle))
+                .attr("r", 6)
+                .attr("fill", mainColor)
+                .attr("stroke", "#fff")
+                .attr("stroke-width", 3);
+
+            // 添加数值标签背景
+            const labelText = chartUtils.format.number(point[valueField]).text;
+            const textWidth = chartUtils.text.measure(null, labelText, { fontSize: 14 }).width;
+
+            const textX = index === 0 ? (distance + 30) * Math.cos(angle) - 20 : (distance + 30) * Math.cos(angle);
+            const textY = index === 0 ? (distance + 15) * Math.sin(angle) : (distance + 30) * Math.sin(angle);
+
+            g.append("rect")
+                .attr("class", "value-label-bg")
+                .attr("x", textX - textWidth/2 - 4)
+                .attr("y", textY - 8)
+                .attr("width", textWidth + 8)
+                .attr("height", 16)
+                .attr("fill", colorResolver.other("primary").value)
+                .attr("rx", 3);
+
+            // 添加数值标签
+            g.append("text")
+                .attr("class", "value-label")
+                .attr("x", textX)
+                .attr("y", textY)
+                .attr("text-anchor", "middle") 
+                .attr("dominant-baseline", "middle")
+                .attr("font-size", "14px")
+                .attr("fill", "#fff")
+                .text(labelText);
+        }
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/radar/radar_line_chart_03.js

@@ -0,0 +1,232 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radar Line Chart",
+    "chart_name": "radar_line_chart_03",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "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 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 categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, 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 radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    
+    // 获取主色调
+    const mainColor = colorResolver.other("primary", { fallback: "#1f77b4" }).value;
+    
+    // 创建角度比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    // 创建半径比例尺
+    const allValues = chartData.map(d => +d[valueField]);
+    const minValue = Math.min(0, d3.min(allValues));
+    const maxValue = d3.max(allValues);
+    
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue * 1.2])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制背景圆环
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆
+    g.selectAll(".circle-axis")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "circle-axis")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis-line")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", (d, i) => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", (d, i) => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".category-label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "category-label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) {
+                return "middle";
+            }
+            return angle < Math.PI ? "hanging" : "auto";
+        })
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => d);
+    
+    // 添加刻度值标签
+    g.selectAll(".tick-label")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "tick-label")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d))
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#ddd")
+        .text(d => d);
+    
+    // 创建折线生成器
+    const lineGenerator = () => {
+        const points = categories.map(cat => {
+            const point = chartData.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - Math.PI/2;
+                const distance = radiusScale(+point[valueField]);
+                return [
+                    distance * Math.cos(angle),
+                    distance * Math.sin(angle)
+                ];
+            }
+            return [0, 0]; // 如果没有数据，默认为中心点
+        });
+        
+        // 使用折线连接点
+        return d3.line()(points) + "Z"; // 闭合路径
+    };
+    
+    // 绘制雷达折线
+    g.append("path")
+        .attr("class", "radar-line")
+        .attr("d", lineGenerator())
+        .attr("fill", mainColor)
+        .attr("fill-opacity", 0.2)
+        .attr("stroke", mainColor)
+        .attr("stroke-width", 6)
+        .attr("stroke-linejoin", "miter"); // 使用尖角连接，强调折线效果
+    
+    // 绘制数据点
+    categories.forEach((cat, index) => {
+        const point = chartData.find(item => item[categoryField] === cat);
+        if (point) {
+            const angle = angleScale(cat) - Math.PI/2;
+            const distance = radiusScale(+point[valueField]);
+            
+            g.append("circle")
+                .attr("class", "radar-point")
+                .attr("cx", distance * Math.cos(angle))
+                .attr("cy", distance * Math.sin(angle))
+                .attr("r", 6)
+                .attr("fill", mainColor)
+                .attr("stroke", "#fff")
+                .attr("stroke-width", 3);
+
+            // 添加数值标签背景
+            const labelText = chartUtils.format.number(point[valueField]).text;
+            const textWidth = chartUtils.text.measure(null, labelText, { fontSize: 14 }).width;
+
+            const textX = index === 0 ? (distance + 30) * Math.cos(angle) - 20 : (distance + 30) * Math.cos(angle);
+            const textY = index === 0 ? (distance + 15) * Math.sin(angle) : (distance + 30) * Math.sin(angle);
+
+            g.append("rect")
+                .attr("class", "value-label-bg")
+                .attr("x", textX - textWidth/2 - 4)
+                .attr("y", textY - 8)
+                .attr("width", textWidth + 8)
+                .attr("height", 16)
+                .attr("fill", colorResolver.other("primary").value)
+                .attr("rx", 3);
+
+            // 添加数值标签
+            g.append("text")
+                .attr("class", "value-label")
+                .attr("x", textX)
+                .attr("y", textY)
+                .attr("text-anchor", "middle") 
+                .attr("dominant-baseline", "middle")
+                .attr("font-size", "14px")
+                .attr("fill", "#fff")
+                .text(labelText);
+        }
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/radar/radar_spline_chart_01.js

@@ -0,0 +1,516 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radar Spline Chart",
+    "chart_name": "radar_spline_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const sourceData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const roleColumn = role => Array.from(dataColumns).find(col => col.role === role);
+    const categoryColumn = roleColumn("x") || dataColumns[0] || {};
+    const valueColumn = roleColumn("y") || dataColumns[1] || {};
+    const categoryField = categoryColumn.name;
+    const valueField = valueColumn.name;
+    const valueUnit = (valueColumn.unit || "").trim();
+
+    const width = Number(variables.width) || 600;
+    const height = Number(variables.height) || 600;
+    const primaryColor = sourceColors.other?.primary || sourceColors.primary || "#2563eb";
+    const textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#64748b";
+    const gridColor = "rgba(100, 116, 139, 0.28)";
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const annotationFamily = typography.annotation?.font_family || fontFamily;
+    const labelWeight = typography.label?.font_weight || "600";
+    const annotationWeight = typography.annotation?.font_weight || "600";
+    const baseLabelSize = parseFloat(typography.label?.font_size) || 12;
+    const baseValueSize = parseFloat(typography.annotation?.font_size) || 11;
+
+    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", "radar-spline-chart-root");
+
+    if (!categoryField || !valueField) {
+        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 radar fields");
+        return svg.node();
+    }
+
+    function readableLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function compactNumber(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return String(value ?? "");
+        const abs = Math.abs(numeric);
+        if (abs >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatLocalValue(value, includeUnit = true) {
+        const formatted = compactNumber(value);
+        if (!includeUnit || !valueUnit || valueUnit === "none") return formatted;
+        if (valueUnit === "%") return `${formatted}%`;
+        const currencyWithSuffix = valueUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${formatted}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(valueUnit)) return `${valueUnit}${formatted}`;
+        return `${formatted} ${valueUnit}`;
+    }
+
+    function parseTemporalRank(value) {
+        const text = String(value ?? "").trim();
+        const lower = text.toLowerCase();
+        const monthOrder = {
+            jan: 1, january: 1, feb: 2, february: 2, mar: 3, march: 3, apr: 4, april: 4,
+            may: 5, jun: 6, june: 6, jul: 7, july: 7, aug: 8, august: 8,
+            sep: 9, sept: 9, september: 9, oct: 10, october: 10, nov: 11, november: 11, dec: 12, december: 12
+        };
+        if (monthOrder[lower] != null) return monthOrder[lower];
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return Number(match[1]) * 10000;
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return Number(match[1]) * 10000 + Number(match[2]) * 100 + 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 && match[1].length === 1) return Number(match[2]) * 10 + Number(match[1]);
+        if (match) return Number(match[1]) * 10 + Number(match[2]);
+        return NaN;
+    }
+
+    function parseOrdinalRank(value) {
+        const text = String(value ?? "").trim().toLowerCase();
+        let match = text.match(/^(\d+(?:\.\d+)?)\s*(?:-|to|–|—)\s*\d+(?:\.\d+)?/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(\d+(?:\.\d+)?)\s*\+$/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(-?\d+(?:\.\d+)?)/);
+        if (match) return Number(match[1]);
+
+        const sizeRanks = [
+            [/very\s+small|micro|tiny/, 1],
+            [/town|village/, 1.5],
+            [/small\s+city|small/, 2],
+            [/mid[-\s]?sized|medium/, 3],
+            [/regional\s+hub/, 4],
+            [/very\s+large/, 6],
+            [/large\b/, 5],
+            [/metro|metropolis|mega/, 7]
+        ];
+        for (const [pattern, rank] of sizeRanks) {
+            if (pattern.test(text)) return rank;
+        }
+        return NaN;
+    }
+
+    const rows = sourceData
+        .map((d, index) => ({
+            raw: d,
+            index,
+            label: readableLabel(d[categoryField]),
+            rawLabel: d[categoryField],
+            value: Number(d[valueField])
+        }))
+        .filter(d => d.label && Number.isFinite(d.value) && d.value >= 0);
+
+    if (rows.length < 3) {
+        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 for radar spline");
+        return svg.node();
+    }
+
+    const temporalRanks = rows.map(d => parseTemporalRank(d.rawLabel));
+    const ordinalRanks = rows.map(d => parseOrdinalRank(d.rawLabel));
+    const allTemporal = temporalRanks.every(Number.isFinite);
+    const allOrdinal = !allTemporal && ordinalRanks.every(Number.isFinite);
+    const sortMode = allTemporal ? "chronological" : (allOrdinal ? "ordered category" : "value ranked");
+    const sortedData = [...rows].sort((a, b) => {
+        if (allTemporal) return parseTemporalRank(a.rawLabel) - parseTemporalRank(b.rawLabel);
+        if (allOrdinal) return parseOrdinalRank(a.rawLabel) - parseOrdinalRank(b.rawLabel);
+        return d3.descending(a.value, b.value) || d3.ascending(a.label, b.label);
+    }).map((d, index) => ({ ...d, rank: index + 1 }));
+
+    const measureGroup = svg.append("g").attr("visibility", "hidden");
+    function measureLabelText(text, fontSize, family = fontFamily, weight = labelWeight) {
+        const node = measureGroup.append("text")
+            .style("font-family", family)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", weight)
+            .text(String(text ?? ""))
+            .node();
+        const measured = node ? node.textContent.length * 7 : 0;
+        measureGroup.selectAll("text").remove();
+        return Math.max(measured || 0, String(text ?? "").length * fontSize * 0.52);
+    }
+
+    function truncateText(text, maxWidth, fontSize, family = fontFamily, weight = labelWeight) {
+        const full = String(text ?? "");
+        if (measureLabelText(full, fontSize, family, weight) <= maxWidth) return full;
+        if (full.length <= 3) return full;
+        let lo = 1;
+        let hi = full.length;
+        let best = full.slice(0, 1);
+        while (lo <= hi) {
+            const mid = Math.floor((lo + hi) / 2);
+            const candidate = `${full.slice(0, mid).trim()}...`;
+            if (measureLabelText(candidate, fontSize, family, weight) <= maxWidth) {
+                best = candidate;
+                lo = mid + 1;
+            } else {
+                hi = mid - 1;
+            }
+        }
+        return best;
+    }
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    const n = sortedData.length;
+    const legendWidth = Math.max(176, Math.min(222, width * 0.36));
+    const legendX = width - legendWidth - 18;
+    const legendY = 62;
+    const legendBottom = height - 54;
+    const legendHeight = legendBottom - legendY;
+    const rowGap = Math.max(22, Math.min(34, legendHeight / Math.max(n, 1)));
+    const keyFontSize = Math.max(8.5, Math.min(baseLabelSize, rowGap * 0.42));
+    const keyValueSize = Math.max(8, Math.min(baseValueSize, rowGap * 0.38));
+    const valueColumnWidth = Math.max(
+        48,
+        ...sortedData.map(d => measureLabelText(formatLocalValue(d.value, false), keyValueSize, annotationFamily, annotationWeight))
+    );
+    const labelMaxWidth = Math.max(78, legendWidth - valueColumnWidth - 38);
+    const plotRight = legendX - 24;
+    const centerX = Math.max(145, plotRight / 2);
+    const centerY = Math.max(170, Math.min(height - 150, height * 0.49));
+    const radius = Math.max(92, Math.min(centerX - 44, plotRight - centerX - 16, centerY - 48, height - centerY - 78));
+    const axisNumberRadius = radius + 19;
+    const pointRadius = Math.max(4.2, Math.min(6.5, radius / 28));
+
+    const maxValue = Math.max(1, d3.max(sortedData, d => d.value) || 1);
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .nice(4)
+        .range([0, radius]);
+    const domainMax = radiusScale.domain()[1];
+    const ticks = radiusScale.ticks(4).filter(tick => tick > 0);
+    const angleForIndex = index => (index / n) * Math.PI * 2 - Math.PI / 2;
+
+    const plot = svg.append("g")
+        .attr("class", "radar-spline-plot")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    ticks.forEach(tick => {
+        plot.append("circle")
+            .attr("class", "radar-grid-ring gridline")
+            .attr("r", radiusScale(tick))
+            .attr("fill", "none")
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3,4");
+
+        plot.append("text")
+            .attr("class", "radar-grid-label axis-tick")
+            .attr("x", 7)
+            .attr("y", -radiusScale(tick))
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(8, keyValueSize * 0.9)}px`)
+            .style("font-weight", annotationWeight)
+            .text(formatLocalValue(tick, false));
+    });
+
+    sortedData.forEach((d, index) => {
+        const angle = angleForIndex(index);
+        const axisX = radius * Math.cos(angle);
+        const axisY = radius * Math.sin(angle);
+        const labelX = axisNumberRadius * Math.cos(angle);
+        const labelY = axisNumberRadius * Math.sin(angle);
+
+        plot.append("line")
+            .attr("class", "radar-axis-line")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", axisX)
+            .attr("y2", axisY)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1);
+
+        plot.append("circle")
+            .attr("class", "radar-axis-index-dot")
+            .attr("cx", labelX)
+            .attr("cy", labelY)
+            .attr("r", 10)
+            .attr("fill", "#ffffff")
+            .attr("stroke", rgba(primaryColor, 0.45))
+            .attr("stroke-width", 1.2);
+
+        plot.append("text")
+            .attr("class", "radar-axis-index category-label")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "central")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(8, keyFontSize * 0.88)}px`)
+            .style("font-weight", "700")
+            .text(d.rank);
+    });
+
+    const points = sortedData.map((d, index) => {
+        const angle = angleForIndex(index);
+        const distance = radiusScale(d.value);
+        return {
+            ...d,
+            angle,
+            x: distance * Math.cos(angle),
+            y: distance * Math.sin(angle)
+        };
+    });
+    const spline = d3.line()
+        .x(d => d.x)
+        .y(d => d.y)
+        .curve(d3.curveCatmullRomClosed.alpha(0.55));
+
+    plot.append("path")
+        .attr("class", "radar-spline-area")
+        .attr("d", spline(points))
+        .attr("fill", primaryColor)
+        .attr("fill-opacity", 0.12)
+        .attr("stroke", "none");
+
+    plot.append("path")
+        .attr("class", "mark radar-spline-line")
+        .attr("data-tag", "mark")
+        .attr("d", spline(points))
+        .attr("fill", "none")
+        .attr("stroke", primaryColor)
+        .attr("stroke-width", Math.max(3, Math.min(5, radius / 40)))
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+
+    const pointGroups = plot.selectAll(".radar-point-group")
+        .data(points)
+        .enter()
+        .append("g")
+        .attr("class", "radar-point-group data-point")
+        .attr("transform", d => `translate(${d.x}, ${d.y})`);
+
+    pointGroups.append("circle")
+        .attr("class", "mark radar-point")
+        .attr("data-tag", "mark")
+        .attr("r", pointRadius)
+        .attr("fill", primaryColor)
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 2.4);
+
+    pointGroups.append("text")
+        .attr("class", "radar-point-label")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "central")
+        .attr("fill", "#ffffff")
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(6.5, pointRadius * 1.35)}px`)
+        .style("font-weight", "700")
+        .text(d => d.rank);
+
+    plot.append("circle")
+        .attr("class", "radar-origin")
+        .attr("r", 2.4)
+        .attr("fill", mutedText)
+        .attr("opacity", 0.75);
+
+    svg.append("text")
+        .attr("class", "axis-title")
+        .attr("x", centerX)
+        .attr("y", Math.max(20, centerY - radius - 36))
+        .attr("text-anchor", "middle")
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(11, baseLabelSize)}px`)
+        .style("font-weight", "700")
+        .text(`${readableLabel(valueField)} radial scale`);
+
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", centerX)
+        .attr("y", Math.min(height - 24, centerY + radius + 44))
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8.5, keyValueSize)}px`)
+        .style("font-weight", annotationWeight)
+        .text(`0 to ${formatLocalValue(domainMax)}; categories sorted by ${sortMode}`);
+
+    const key = svg.append("g")
+        .attr("class", "radar-spline-key")
+        .attr("transform", `translate(${legendX}, ${legendY})`);
+
+    key.append("text")
+        .attr("class", "key-title")
+        .attr("x", 0)
+        .attr("y", -18)
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(11, baseLabelSize)}px`)
+        .style("font-weight", "700")
+        .text("Axis key");
+
+    key.append("line")
+        .attr("class", "key-rule")
+        .attr("x1", 0)
+        .attr("x2", legendWidth)
+        .attr("y1", -7)
+        .attr("y2", -7)
+        .attr("stroke", rgba(textColor, 0.18))
+        .attr("stroke-width", 1);
+
+    const rowsGroup = key.selectAll(".legend-row")
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "legend-row")
+        .attr("transform", (d, i) => `translate(0, ${i * rowGap})`);
+
+    rowsGroup.append("circle")
+        .attr("class", "legend-index-dot")
+        .attr("cx", 9)
+        .attr("cy", 0)
+        .attr("r", 8.5)
+        .attr("fill", "#ffffff")
+        .attr("stroke", rgba(primaryColor, 0.5))
+        .attr("stroke-width", 1.1);
+
+    rowsGroup.append("text")
+        .attr("class", "legend-index")
+        .attr("x", 9)
+        .attr("y", 0)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "central")
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(8, keyFontSize * 0.82)}px`)
+        .style("font-weight", "700")
+        .text(d => d.rank);
+
+    rowsGroup.append("text")
+        .attr("class", "category-label")
+        .attr("x", 24)
+        .attr("y", -3)
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${keyFontSize}px`)
+        .style("font-weight", labelWeight)
+        .text(d => truncateText(d.label, labelMaxWidth, keyFontSize, fontFamily, labelWeight));
+
+    rowsGroup.append("text")
+        .attr("class", "value-label")
+        .attr("x", legendWidth)
+        .attr("y", -3)
+        .attr("text-anchor", "end")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${keyValueSize}px`)
+        .style("font-weight", annotationWeight)
+        .text(d => formatLocalValue(d.value, false));
+
+    rowsGroup.append("line")
+        .attr("class", "legend-row-rule")
+        .attr("x1", 24)
+        .attr("x2", legendWidth)
+        .attr("y1", rowGap * 0.43)
+        .attr("y2", rowGap * 0.43)
+        .attr("stroke", rgba(textColor, 0.1))
+        .attr("stroke-width", 1);
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", legendX)
+        .attr("y", height - 22)
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, keyValueSize * 0.9)}px`)
+        .style("font-weight", annotationWeight)
+        .text("Numbers on the spline map to categories in the key.");
+
+    measureGroup.remove();
+    return svg.node();
+}

modules/chart_engine/template/d3-js/radar/radar_spline_chart_03.js

@@ -0,0 +1,374 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radar Spline Chart",
+    "chart_name": "radar_spline_chart_03",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 440,
+    "min_width": 440,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, dataJSON) {
+    const jsonData = dataJSON || {};
+    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 dataBlock = jsonData.data || {};
+    const sourceRows = dataBlock.data || [];
+    const columns = dataBlock.columns || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const categoryColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const valueColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const categoryField = categoryColumn.name;
+    const valueField = valueColumn.name;
+    const valueUnit = valueColumn.unit === "none" ? "" : (valueColumn.unit || "");
+
+    const width = Math.max(440, Number(variables.width) || 560);
+    const height = Math.max(440, Number(variables.height) || 560);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const annotationFamily = typography.annotation?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#64748b";
+    const gridColor = "rgba(100, 116, 139, 0.25)";
+    const labelSize = Math.max(8.5, Math.min(11, parseFloat(typography.label?.font_size) || 10.5));
+    const valueSize = Math.max(8, Math.min(10, parseFloat(typography.annotation?.font_size) || 9.5));
+    const labelWeight = typography.label?.font_weight || "700";
+    const valueWeight = typography.annotation?.font_weight || "650";
+
+    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", "radar-spline-chart");
+
+    function message(text) {
+        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(text);
+        return svg.node();
+    }
+
+    if (!categoryField || !valueField) return message("Missing radar spline fields");
+
+    function readableLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function parseTemporalRank(value) {
+        const text = String(value ?? "").trim();
+        const lower = text.toLowerCase();
+        const months = {
+            jan: 1, january: 1, feb: 2, february: 2, mar: 3, march: 3, apr: 4, april: 4,
+            may: 5, jun: 6, june: 6, jul: 7, july: 7, aug: 8, august: 8,
+            sep: 9, sept: 9, september: 9, oct: 10, october: 10, nov: 11, november: 11, dec: 12, december: 12
+        };
+        const seasons = { winter: 1, spring: 2, summer: 3, fall: 4, autumn: 4 };
+        if (months[lower] != null) return months[lower];
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return Number(match[1]) * 10000;
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return Number(match[1]) * 10000 + Number(match[2]) * 100 + 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 && text.toUpperCase().startsWith("Q")) return Number(match[2]) * 10 + Number(match[1]);
+        if (match) return Number(match[1]) * 10 + Number(match[2]);
+        match = text.match(/^(winter|spring|summer|fall|autumn)\s+(-?\d{4})$/i);
+        if (match) return Number(match[2]) * 10 + seasons[match[1].toLowerCase()];
+        match = text.match(/^(-?\d{4})\s+(winter|spring|summer|fall|autumn)$/i);
+        if (match) return Number(match[1]) * 10 + seasons[match[2].toLowerCase()];
+        return NaN;
+    }
+
+    function parseOrdinalRank(value) {
+        const text = String(value ?? "").trim().toLowerCase();
+        const named = {
+            primary: 1, elementary: 1, secondary: 2, college: 3, university: 3,
+            low: 1, lower: 1, medium: 2, moderate: 2, high: 3, higher: 3,
+            children: 1, adolescents: 2, teens: 2, adults: 3, seniors: 4
+        };
+        if (named[text] != null) return named[text];
+        let match = text.match(/(?:less than|under)\s*[$]?\s*([\d,]+)/);
+        if (match) return Number(match[1].replace(/,/g, "")) - 0.5;
+        match = text.match(/(?:more than|over)\s*[$]?\s*([\d,]+)/);
+        if (match) return Number(match[1].replace(/,/g, "")) + 0.5;
+        match = text.match(/^[$]?\s*([\d,]+(?:\.\d+)?)\s*(?:-|to|–|—)/);
+        if (match) return Number(match[1].replace(/,/g, ""));
+        match = text.match(/^(-?\d+(?:\.\d+)?)/);
+        if (match) return Number(match[1]);
+        return NaN;
+    }
+
+    function compactNumber(value) {
+        const numeric = Number(value);
+        const abs = Math.abs(numeric);
+        if (abs >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatLocalValue(value, includeUnit = true) {
+        const formatted = compactNumber(value);
+        if (!includeUnit || !valueUnit) return formatted;
+        if (valueUnit === "%") return `${formatted}%`;
+        if (valueUnit.length <= 3 && /^[^A-Za-z0-9]+$/.test(valueUnit)) return `${valueUnit}${formatted}`;
+        return `${formatted} ${valueUnit}`;
+    }
+
+    function wrapText(value, maxChars, maxLines = 2) {
+        const words = readableLabel(value).split(/\s+/).filter(Boolean);
+        if (!words.length) return [""];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (next.length <= maxChars) {
+                current = next;
+            } else {
+                if (current) lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) return lines;
+        const kept = lines.slice(0, maxLines);
+        kept[maxLines - 1] = `${kept[maxLines - 1].slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+        return kept;
+    }
+
+    function polarPoint(angle, radius) {
+        return [Math.cos(angle - Math.PI / 2) * radius, Math.sin(angle - Math.PI / 2) * radius];
+    }
+
+    const aggregated = new Map();
+    sourceRows.forEach((row, index) => {
+        const category = readableLabel(row[categoryField]);
+        const value = Number(row[valueField]);
+        if (!category || !Number.isFinite(value) || value < 0) return;
+        if (!aggregated.has(category)) {
+            aggregated.set(category, {
+                category,
+                rawCategory: row[categoryField],
+                firstIndex: index,
+                value: 0,
+                count: 0
+            });
+        }
+        const entry = aggregated.get(category);
+        entry.value += value;
+        entry.count += 1;
+    });
+
+    const rows = Array.from(aggregated.values()).map(d => ({
+        ...d,
+        temporalRank: parseTemporalRank(d.rawCategory),
+        ordinalRank: parseOrdinalRank(d.rawCategory)
+    }));
+    if (rows.length < 3) return message("Not enough categories for radar spline");
+
+    const allTemporal = categoryColumn.data_type === "temporal" || rows.every(d => Number.isFinite(d.temporalRank));
+    const allOrdinal = !allTemporal && rows.every(d => Number.isFinite(d.ordinalRank));
+    const sortMode = allTemporal ? "chronological" : (allOrdinal ? "ordered category" : "largest to smallest");
+    rows.sort((a, b) => {
+        if (allTemporal) return d3.ascending(a.temporalRank, b.temporalRank) || d3.ascending(a.firstIndex, b.firstIndex);
+        if (allOrdinal) return d3.ascending(a.ordinalRank, b.ordinalRank) || d3.ascending(a.firstIndex, b.firstIndex);
+        return d3.descending(a.value, b.value) || d3.ascending(a.category, b.category);
+    });
+
+    const margin = { top: 54, right: 50, bottom: 52, left: 50 };
+    const radius = Math.max(110, Math.min(width - margin.left - margin.right, height - margin.top - margin.bottom) / 2 - 38);
+    const centerX = width / 2;
+    const centerY = height / 2 + 6;
+    const maxValue = d3.max(rows, d => d.value) || 1;
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue * 1.12])
+        .nice(4)
+        .range([0, radius]);
+    const domainMax = radiusScale.domain()[1];
+    const ticks = radiusScale.ticks(4).filter(tick => tick >= 0);
+    const mainColor = sourceColors.other?.primary || sourceColors.available_colors?.[0] || "#2563eb";
+    const fillColor = d3.color(mainColor)?.copy({ opacity: 0.14 }) || "rgba(37, 99, 235, 0.14)";
+
+    const plot = svg.append("g")
+        .attr("class", "radar-spline-plot")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    ticks.forEach(tick => {
+        plot.append("circle")
+            .attr("class", "gridline radar-grid-ring y-axis-tick")
+            .attr("r", radiusScale(tick))
+            .attr("fill", "none")
+            .attr("stroke", gridColor)
+            .attr("stroke-width", tick === 0 ? 1.2 : 1);
+        if (tick > 0) {
+            plot.append("text")
+                .attr("class", "axis-tick-label y-axis-tick")
+                .attr("x", 6)
+                .attr("y", -radiusScale(tick))
+                .attr("dominant-baseline", "middle")
+                .attr("fill", mutedText)
+                .style("font-family", annotationFamily)
+                .style("font-size", `${valueSize}px`)
+                .style("font-weight", valueWeight)
+                .text(formatLocalValue(tick, false));
+        }
+    });
+
+    const angleStep = (2 * Math.PI) / rows.length;
+    rows.forEach((row, index) => {
+        row.angle = index * angleStep;
+        row.radius = radiusScale(row.value);
+        const [x2, y2] = polarPoint(row.angle, radius);
+        const [labelX, labelY] = polarPoint(row.angle, radius + 24);
+        plot.append("line")
+            .attr("class", "axis-line")
+            .attr("data-category", row.category)
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", x2)
+            .attr("y2", y2)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1);
+        const label = plot.append("text")
+            .attr("class", "category-label")
+            .attr("data-category", row.category)
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", Math.abs(labelX) < 8 ? "middle" : (labelX > 0 ? "start" : "end"))
+            .attr("dominant-baseline", Math.abs(labelY) < 8 ? "middle" : (labelY > 0 ? "hanging" : "auto"))
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${labelSize}px`)
+            .style("font-weight", labelWeight);
+        wrapText(row.category, rows.length > 8 ? 9 : 12, 2).forEach((line, lineIndex) => {
+            label.append("tspan")
+                .attr("x", labelX)
+                .attr("dy", lineIndex === 0 ? 0 : labelSize + 1)
+                .text(line);
+        });
+    });
+
+    const lineRadial = d3.lineRadial()
+        .angle(d => d.angle)
+        .radius(d => d.radius)
+        .curve(d3.curveCatmullRomClosed.alpha(0.55));
+
+    plot.append("path")
+        .datum(rows)
+        .attr("class", "radar-area")
+        .attr("d", lineRadial)
+        .attr("fill", fillColor)
+        .attr("stroke", "none");
+
+    plot.append("path")
+        .datum(rows)
+        .attr("class", "radar-spline-line")
+        .attr("d", lineRadial)
+        .attr("fill", "none")
+        .attr("stroke", mainColor)
+        .attr("stroke-width", 2.4)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round");
+
+    rows.forEach((row, index) => {
+        const [x, y] = polarPoint(row.angle, row.radius);
+        const [valueX, valueY] = polarPoint(row.angle, row.radius + 14);
+        plot.append("circle")
+            .attr("class", "radar-point data-point")
+            .attr("data-tag", "mark")
+            .attr("data-category", row.category)
+            .attr("data-value", row.value)
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", 4.4)
+            .attr("fill", mainColor)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 1.2);
+        plot.append("text")
+            .attr("class", "value-label")
+            .attr("data-category", row.category)
+            .attr("x", valueX)
+            .attr("y", valueY)
+            .attr("text-anchor", Math.abs(valueX) < 8 ? "middle" : (valueX > 0 ? "start" : "end"))
+            .attr("dominant-baseline", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${valueSize}px`)
+            .style("font-weight", valueWeight)
+            .text(formatLocalValue(row.value, false));
+    });
+
+    svg.append("text")
+        .attr("class", "axis-title scale-note")
+        .attr("x", width / 2)
+        .attr("y", 22)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${valueSize}px`)
+        .style("font-weight", valueWeight)
+        .text(`${readableLabel(valueColumn.label || valueField)} radial scale: 0-${formatLocalValue(domainMax, true)}`);
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", width / 2)
+        .attr("y", height - 16)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, valueSize - 1)}px`)
+        .text(`${readableLabel(categoryColumn.label || categoryField)} order: ${sortMode}; radial positions are ordered categories, not elapsed-distance intervals`);
+
+    return svg.node();
+}