Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type9_radial_grouped_bar_chart/radial_grouped_bar_plain_chart_01.js

@@ -0,0 +1,175 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Grouped Bar Chart",
+    "chart_name": "radial_grouped_bar_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 6], [0, 100], [2, 4]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary", "background"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 数值单位规范
+    // 添加数值格式化函数
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    // 获取单位信息
+    let valueUnit = "";
+    const valueChannel = chartUtils.schema.channel(jsonData, "y");
+    if (valueChannel.unit) {
+        valueUnit = valueChannel.unit;
+    }
+
+    // 获取所有唯一的分组
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 创建颜色比例尺
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+
+    // 获取唯一的x值
+    const uniqueXValues = [...new Set(chartData.map(d => d[xField]))];
+    
+    // 按xField和groupField排序
+    chartData.sort((a, b) => {
+        // 首先按照xValue排序
+        if (a[xField] !== b[xField]) {
+            return String(a[xField]).localeCompare(String(b[xField]));
+        }
+        // xValue相同时按照group排序
+        return String(a[groupField]).localeCompare(String(b[groupField]));
+    });
+
+    // 尺寸
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 40, bottom: 40, left: 40 };
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxRadius = Math.min(chartWidth, chartHeight) / 2;
+
+    const nBars = chartData.length;
+    const minRadius = maxRadius * 0.2;
+    const maxBarRadius = maxRadius * 0.95;
+    const barWidth = (maxBarRadius - minRadius) / nBars * 0.7;
+    const barGap = (maxBarRadius - minRadius) / nBars * 0.3;
+
+    // 角度比例尺（最大270°）
+    const maxValue = d3.max(chartData, d => +d[yField]);
+    const angleScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .range([0, 1.5 * Math.PI]); // 270°
+
+    const g = svg.append("g")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    // 辅助线
+    const numTicks = 5;
+    const ticks = d3.range(0, maxValue + 1, maxValue / numTicks);
+    ticks.forEach(tick => {
+        g.append("path")
+            .attr("d", d3.arc()
+                .innerRadius(minRadius)
+                .outerRadius(maxBarRadius + barWidth * 0.5)
+                .startAngle(angleScale(tick))
+                .endAngle(angleScale(tick))
+            )
+            .attr("stroke", "#e0e0e0")
+            .attr("stroke-width", 1)
+            .attr("fill", "none");
+        g.append("text")
+            .attr("x", Math.cos(angleScale(tick) - Math.PI / 2) * (maxBarRadius + barWidth * 0.7))
+            .attr("y", Math.sin(angleScale(tick) - Math.PI / 2) * (maxBarRadius + barWidth * 0.7))
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#888")
+            .style("font-size", "12px")
+            .text(chartUtils.format.integer(tick, { unit: valueUnit }).text);
+    });
+
+    const labelPadding = 20;
+    // 条形
+    chartData.forEach((d, i) => {
+        const innerR = minRadius + i * (barWidth + barGap);
+        const outerR = innerR + barWidth;
+        const endAngle = angleScale(d[yField]);
+
+        g.append("path")
+            .attr("d", d3.arc()
+                .innerRadius(innerR)
+                .outerRadius(outerR)
+                .startAngle(0)
+                .endAngle(endAngle)
+            )
+            .attr("fill", colorScale(d[groupField]))
+            .attr("opacity", 0.85);
+
+        // 只给同一个x值的第一个条形添加标签
+        const isFirstBarWithThisX = chartData.findIndex(item => item[xField] === d[xField]) === i;
+        if (isFirstBarWithThisX) {
+            g.append("text")
+                .attr("x", Math.cos(-Math.PI / 2) * (innerR + barWidth / 2) - labelPadding)
+                .attr("y", Math.sin(-Math.PI / 2) * (innerR + barWidth / 2))
+                .attr("text-anchor", "end")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#222b44")
+                .style("font-size", "12px")
+                .style("font-weight", "bold")
+                .text(d[xField]);
+        }
+    });
+    chartUtils.legend.draw(svg, groups, {
+        colorScale,
+        colorResolver,
+        colors,
+    }, {
+        x: width - 150,
+        y: 20,
+        direction: "vertical",
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: 5,
+        rowGap: 5,
+        fontSize: 10,
+        textColor: colorResolver.text({ fallback: "#333" }).value,
+        itemHeight: 20,
+    });
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type9_radial_grouped_bar_chart/radial_grouped_bar_plain_chart_02.js

@@ -0,0 +1,268 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Grouped Bar Chart",
+    "chart_name": "radial_grouped_bar_plain_chart_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 6], [0, 100], [2, 4]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary", "background"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) { //Group Radial Bar Chart  plain chart#2 圆角
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 数值单位规范
+    // 添加数值格式化函数
+
+    // 生成圆角弧形路径的函数
+    const createRoundedArcPath = (innerRadius, outerRadius, startAngle, endAngle, cornerRadius) => {
+        const startAngleRad = startAngle - Math.PI / 2; // 调整起始角度，使0度在顶部
+        const endAngleRad = endAngle - Math.PI / 2;
+        
+        // 计算各个关键点的坐标
+        const innerStartX = innerRadius * Math.cos(startAngleRad);
+        const innerStartY = innerRadius * Math.sin(startAngleRad);
+        const innerEndX = innerRadius * Math.cos(endAngleRad);
+        const innerEndY = innerRadius * Math.sin(endAngleRad);
+        const outerStartX = outerRadius * Math.cos(startAngleRad);
+        const outerStartY = outerRadius * Math.sin(startAngleRad);
+        const outerEndX = outerRadius * Math.cos(endAngleRad);
+        const outerEndY = outerRadius * Math.sin(endAngleRad);
+        
+        // 计算圆角的控制点
+        const thickness = outerRadius - innerRadius;
+        const adjustedCornerRadius = Math.min(cornerRadius, thickness / 2, 
+            Math.abs(endAngle - startAngle) * innerRadius / 2);
+        
+        // 计算圆角在各个角的偏移
+        const startCornerOffset = adjustedCornerRadius / innerRadius;
+        const endCornerOffset = adjustedCornerRadius / innerRadius;
+        
+        // 内弧起始圆角点
+        const innerStartCornerAngle = startAngleRad + startCornerOffset;
+        const innerStartCornerX = innerRadius * Math.cos(innerStartCornerAngle);
+        const innerStartCornerY = innerRadius * Math.sin(innerStartCornerAngle);
+        
+        // 内弧结束圆角点
+        const innerEndCornerAngle = endAngleRad - endCornerOffset;
+        const innerEndCornerX = innerRadius * Math.cos(innerEndCornerAngle);
+        const innerEndCornerY = innerRadius * Math.sin(innerEndCornerAngle);
+        
+        // 外弧起始圆角点
+        const outerStartCornerAngle = startAngleRad + adjustedCornerRadius / outerRadius;
+        const outerStartCornerX = outerRadius * Math.cos(outerStartCornerAngle);
+        const outerStartCornerY = outerRadius * Math.sin(outerStartCornerAngle);
+        
+        // 外弧结束圆角点
+        const outerEndCornerAngle = endAngleRad - adjustedCornerRadius / outerRadius;
+        const outerEndCornerX = outerRadius * Math.cos(outerEndCornerAngle);
+        const outerEndCornerY = outerRadius * Math.sin(outerEndCornerAngle);
+        
+        const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+        
+        return `
+            M ${innerStartCornerX} ${innerStartCornerY}
+            A ${adjustedCornerRadius} ${adjustedCornerRadius} 0 0 1 ${outerStartCornerX} ${outerStartCornerY}
+            A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${outerEndCornerX} ${outerEndCornerY}
+            A ${adjustedCornerRadius} ${adjustedCornerRadius} 0 0 1 ${innerEndCornerX} ${innerEndCornerY}
+            A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStartCornerX} ${innerStartCornerY}
+            Z
+        `;
+    };
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    // 获取单位信息
+    let valueUnit = "";
+    const valueChannel = chartUtils.schema.channel(jsonData, "y");
+    if (valueChannel.unit) {
+        valueUnit = valueChannel.unit;
+    }
+
+    // 获取所有唯一的分组
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 创建颜色比例尺
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+
+    // 获取唯一的x值
+    const uniqueXValues = [...new Set(chartData.map(d => d[xField]))];
+    
+    // 按xField和groupField排序
+    chartData.sort((a, b) => {
+        // 首先按照xValue排序
+        if (a[xField] !== b[xField]) {
+            return String(a[xField]).localeCompare(String(b[xField]));
+        }
+        // xValue相同时按照group排序
+        return String(a[groupField]).localeCompare(String(b[groupField]));
+    });
+
+    // 尺寸
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 40, bottom: 40, left: 40 };
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxRadius = Math.min(chartWidth, chartHeight) / 2;
+
+    const nBars = chartData.length;
+    const minRadius = maxRadius * 0.2;
+    const maxBarRadius = maxRadius * 0.95;
+    const barWidth = (maxBarRadius - minRadius) / nBars * 0.7;
+    const barGap = (maxBarRadius - minRadius) / nBars * 0.3;
+
+    // 角度比例尺（最大270°）
+    const maxValue = d3.max(chartData, d => +d[yField]);
+    const angleScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .range([0, 1.5 * Math.PI]); // 270°
+
+    const g = svg.append("g")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    // 辅助线
+    const numTicks = 5;
+    const ticks = d3.range(0, maxValue + 1, maxValue / numTicks);
+    ticks.forEach(tick => {
+        g.append("path")
+            .attr("d", d3.arc()
+                .innerRadius(minRadius)
+                .outerRadius(maxBarRadius + barWidth * 0.5)
+                .startAngle(angleScale(tick))
+                .endAngle(angleScale(tick))
+            )
+            .attr("stroke", "#e0e0e0")
+            .attr("stroke-width", 1)
+            .attr("fill", "none");
+        g.append("text")
+            .attr("x", Math.cos(angleScale(tick) - Math.PI / 2) * (maxBarRadius + barWidth * 0.7))
+            .attr("y", Math.sin(angleScale(tick) - Math.PI / 2) * (maxBarRadius + barWidth * 0.7))
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#888")
+            .style("font-size", "12px")
+            .text(chartUtils.format.integer(tick, { unit: valueUnit }).text);
+    });
+
+    const labelPadding = 20;
+    // 条形
+    chartData.forEach((d, i) => {
+        const innerR = minRadius + i * (barWidth + barGap);
+        const outerR = innerR + barWidth;
+        const endAngle = angleScale(d[yField]);
+        const cornerRadius = barWidth / 2; // 圆角半径为宽度的一半
+
+        // 使用圆角弧形路径
+        g.append("path")
+            .attr("d", createRoundedArcPath(innerR, outerR, 0, endAngle, cornerRadius))
+            .attr("fill", colorScale(d[groupField]))
+            .attr("opacity", 0.85);
+
+        // 只给同一个x值的第一个条形添加标签
+        const isFirstBarWithThisX = chartData.findIndex(item => item[xField] === d[xField]) === i;
+        if (isFirstBarWithThisX) {
+            g.append("text")
+                .attr("x", Math.cos(-Math.PI / 2) * (innerR + barWidth / 2) - labelPadding)
+                .attr("y", Math.sin(-Math.PI / 2) * (innerR + barWidth / 2))
+                .attr("text-anchor", "end")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#222b44")
+                .style("font-size", "12px")
+                .style("font-weight", "bold")
+                .text(d[xField]);
+        }
+
+        // 数值标签（沿柱子末端弧线）
+        const valueText = chartUtils.format.autoText(+d[yField], { unit: valueUnit });
+        const valueRadius = innerR + barWidth / 2;
+        const valueAngle = endAngle;
+        const valueTextPathId = `valueTextPath-${i}`;
+        
+        // 根据数值大小动态计算文字路径长度
+        const valueTextLen = chartUtils.text.measure(null, valueText, { fontSize: 10 }).width;
+        const minAngle = 0.08; // 减小最小角度
+        const valueShiftAngle = Math.max(valueTextLen / valueRadius, minAngle);
+        
+        // 计算文字路径的起始和结束角度
+        const pathStartAngle = Math.max(0, valueAngle - valueShiftAngle);
+        const pathEndAngle = Math.min(1.7 * Math.PI, valueAngle + valueShiftAngle);
+
+        // 只有当弧长足够显示文字时才添加标签
+        if (endAngle > 0.2) { // 只有当角度足够大时才显示数值标签
+            g.append("path")
+                .attr("id", valueTextPathId)
+                .attr("d", d3.arc()({
+                    innerRadius: valueRadius,
+                    outerRadius: valueRadius,
+                    startAngle: pathStartAngle,
+                    endAngle: pathEndAngle
+                }))
+                .style("fill", "none")
+                .style("stroke", "none");
+
+            g.append("text")
+                .attr("font-size", "10px")
+                .attr("fill", "#333")
+                .attr("font-weight", "normal")
+                .append("textPath")
+                .attr("xlink:href", `#${valueTextPathId}`)
+                .attr("startOffset", "30%") 
+                .attr("text-anchor", "start")
+                .attr("dominant-baseline", "start")
+                .text(valueText);
+        }
+    });
+    chartUtils.legend.draw(svg, groups, {
+        colorScale,
+        colorResolver,
+        colors,
+    }, {
+        x: width - 150,
+        y: 20,
+        direction: "vertical",
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: 5,
+        rowGap: 5,
+        fontSize: 10,
+        textColor: colorResolver.text({ fallback: "#333" }).value,
+        itemHeight: 20,
+    });
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type9_radial_grouped_bar_chart/radial_grouped_bar_plain_chart_03.js

@@ -0,0 +1,535 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Grouped Bar Chart",
+    "chart_name": "radial_grouped_bar_plain_chart_03",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 20], [0, 100], [2,2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary", "background"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const 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 xColumn = roleColumn("x") || dataColumns[0] || {};
+    const yColumn = roleColumn("y") || dataColumns[1] || {};
+    const groupColumn = roleColumn("group") || dataColumns[2] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const groupField = groupColumn.name;
+    const yUnit = (yColumn.unit || "").trim();
+
+    const width = Math.max(820, Number(variables.width) || 820);
+    const height = Math.max(620, Number(variables.height) || 620);
+    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 textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#64748b";
+    const primaryColor = sourceColors.other?.primary || sourceColors.primary || "#2563eb";
+    const secondaryColor = sourceColors.other?.secondary || "#f97316";
+    const gridColor = "rgba(100, 116, 139, 0.24)";
+
+    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("class", "radial-grouped-bar-chart-root");
+
+    if (!xField || !yField || !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 radial grouped bar fields");
+        return svg.node();
+    }
+
+    function cleanLabel(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 || !yUnit || yUnit === "none") return formatted;
+        if (yUnit === "%") return `${formatted}%`;
+        if (yUnit === "$") return `$${formatted}`;
+        return `${formatted} ${yUnit}`;
+    }
+
+    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]);
+        return NaN;
+    }
+
+    const rows = sourceData
+        .map((d, index) => ({
+            index,
+            category: cleanLabel(d[xField]),
+            rawCategory: d[xField],
+            group: cleanLabel(d[groupField]),
+            rawGroup: d[groupField],
+            value: Number(d[yField])
+        }))
+        .filter(d => d.category && d.group && Number.isFinite(d.value) && d.value >= 0);
+
+    const categories = Array.from(new Set(rows.map(d => d.category)));
+    const groups = Array.from(new Set(rows.map(d => d.group))).slice(0, 2);
+    if (categories.length < 3 || groups.length < 2) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Not enough grouped radial data");
+        return svg.node();
+    }
+
+    const categoryStats = categories.map(category => {
+        const categoryRows = rows.filter(d => d.category === category);
+        const rawCategory = categoryRows[0]?.rawCategory;
+        const meanValue = d3.mean(categoryRows, d => d.value) || 0;
+        return {
+            category,
+            rawCategory,
+            meanValue,
+            temporalRank: parseTemporalRank(rawCategory),
+            ordinalRank: parseOrdinalRank(rawCategory)
+        };
+    });
+    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" : "average 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, index) => ({ ...d, rank: index + 1 }));
+
+    const valueByCategoryGroup = new Map();
+    rows.forEach(d => {
+        valueByCategoryGroup.set(`${d.category}|||${d.group}`, d.value);
+    });
+    const displayRows = orderedCategories.flatMap(categoryInfo => groups.map((group, groupIndex) => ({
+        category: categoryInfo.category,
+        rawCategory: categoryInfo.rawCategory,
+        rank: categoryInfo.rank,
+        group,
+        groupIndex,
+        value: valueByCategoryGroup.get(`${categoryInfo.category}|||${group}`) ?? 0
+    })));
+
+    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;
+        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 legendWidth = Math.max(286, Math.min(330, width * 0.38));
+    const plotLeft = 40;
+    const plotRight = width - legendWidth - 42;
+    const centerX = plotLeft + (plotRight - plotLeft) / 2;
+    const centerY = height * 0.5;
+    const outerRadius = Math.max(165, Math.min(plotRight - centerX - 24, centerX - plotLeft - 24, height / 2 - 64));
+    const innerRadius = Math.max(48, outerRadius * 0.28);
+    const categoryCount = orderedCategories.length;
+    const startAngle = -Math.PI * 0.92;
+    const endAngle = Math.PI * 1.08;
+    const fullAngle = endAngle - startAngle;
+    const categoryGap = Math.min(0.025, fullAngle / categoryCount * 0.14);
+    const groupGap = Math.min(0.012, fullAngle / categoryCount * 0.08);
+    const categoryBand = fullAngle / categoryCount;
+    const groupBand = (categoryBand - categoryGap * 2 - groupGap) / groups.length;
+
+    const maxValue = Math.max(1, d3.max(displayRows, d => d.value) || 1);
+    const radialScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .nice(4)
+        .range([0, outerRadius - innerRadius]);
+    const domainMax = radialScale.domain()[1];
+    const tickValues = radialScale.ticks(4).filter(tick => tick > 0);
+    const groupColors = d3.scaleOrdinal()
+        .domain(groups)
+        .range([primaryColor, secondaryColor]);
+
+    const plot = svg.append("g")
+        .attr("class", "radial-grouped-bar-plot")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    tickValues.forEach(tick => {
+        plot.append("circle")
+            .attr("class", "radial-grid-ring gridline")
+            .attr("r", innerRadius + radialScale(tick))
+            .attr("fill", "none")
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3,4");
+
+        plot.append("text")
+            .attr("class", "axis-tick radial-grid-label")
+            .attr("x", 6)
+            .attr("y", -(innerRadius + radialScale(tick)))
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(8, baseValueSize * 0.86)}px`)
+            .style("font-weight", annotationWeight)
+            .text(formatLocalValue(tick, false));
+    });
+
+    orderedCategories.forEach((categoryInfo, index) => {
+        const middleAngle = startAngle + index * categoryBand + categoryBand / 2;
+        const outerX = (outerRadius + 18) * Math.cos(middleAngle - Math.PI / 2);
+        const outerY = (outerRadius + 18) * Math.sin(middleAngle - Math.PI / 2);
+        const axisX = outerRadius * Math.cos(middleAngle - Math.PI / 2);
+        const axisY = outerRadius * Math.sin(middleAngle - Math.PI / 2);
+
+        plot.append("line")
+            .attr("class", "category-axis-line")
+            .attr("x1", innerRadius * Math.cos(middleAngle - Math.PI / 2))
+            .attr("y1", innerRadius * Math.sin(middleAngle - Math.PI / 2))
+            .attr("x2", axisX)
+            .attr("y2", axisY)
+            .attr("stroke", rgba(textColor, 0.11))
+            .attr("stroke-width", 1);
+
+        plot.append("circle")
+            .attr("class", "category-index-dot")
+            .attr("cx", outerX)
+            .attr("cy", outerY)
+            .attr("r", 9)
+            .attr("fill", "#ffffff")
+            .attr("stroke", rgba(textColor, 0.22))
+            .attr("stroke-width", 1);
+
+        plot.append("text")
+            .attr("class", "category-index category-label")
+            .attr("x", outerX)
+            .attr("y", outerY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "central")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(7, Math.min(10, baseLabelSize * 0.8))}px`)
+            .style("font-weight", "700")
+            .text(categoryInfo.rank);
+    });
+
+    const arc = d3.arc()
+        .innerRadius(innerRadius)
+        .outerRadius(d => innerRadius + Math.max(0, radialScale(d.value)))
+        .startAngle(d => startAngle + (d.rank - 1) * categoryBand + categoryGap + d.groupIndex * (groupBand + groupGap))
+        .endAngle(d => startAngle + (d.rank - 1) * categoryBand + categoryGap + d.groupIndex * (groupBand + groupGap) + groupBand)
+        .padAngle(0.002)
+        .cornerRadius(2.5);
+
+    plot.selectAll(".bar-row")
+        .data(displayRows)
+        .enter()
+        .append("path")
+        .attr("class", "mark radial-grouped-bar data-point")
+        .attr("data-tag", "mark")
+        .attr("data-category", d => d.category)
+        .attr("data-group", d => d.group)
+        .attr("d", d => arc(d))
+        .attr("fill", d => groupColors(d.group))
+        .attr("fill-opacity", d => d.value === 0 ? 0.18 : 0.86)
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 0.8);
+
+    plot.append("circle")
+        .attr("class", "radial-baseline")
+        .attr("r", innerRadius)
+        .attr("fill", "#ffffff")
+        .attr("stroke", rgba(textColor, 0.16))
+        .attr("stroke-width", 1.2);
+
+    plot.append("text")
+        .attr("class", "axis-title")
+        .attr("x", 0)
+        .attr("y", -8)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "central")
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(10, baseLabelSize * 0.95)}px`)
+        .style("font-weight", "700")
+        .text(cleanLabel(yField));
+
+    plot.append("text")
+        .attr("class", "axis-title axis-title-sub")
+        .attr("x", 0)
+        .attr("y", 12)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "central")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, baseValueSize * 0.9)}px`)
+        .style("font-weight", annotationWeight)
+        .text(`0 to ${formatLocalValue(domainMax)}`);
+
+    const legendX = width - legendWidth - 24;
+    const legendY = 64;
+    const rowGap = Math.max(17, Math.min(28, (height - legendY - 86) / categoryCount));
+    const keyFontSize = Math.max(8, Math.min(baseLabelSize, rowGap * 0.45));
+    const keyValueSize = Math.max(7.5, Math.min(baseValueSize, rowGap * 0.4));
+    const valueColumnWidth = Math.max(
+        42,
+        ...displayRows.map(d => measureLabelText(formatLocalValue(d.value, false), keyValueSize, annotationFamily, annotationWeight))
+    );
+    const valueGap = 10;
+    const groupValueWidth = Math.max(valueColumnWidth, 44);
+    const value2X = legendWidth;
+    const value1X = value2X - groupValueWidth - valueGap;
+    const labelMaxWidth = Math.max(72, value1X - 36);
+    const key = svg.append("g")
+        .attr("class", "radial-grouped-bar-key")
+        .attr("transform", `translate(${legendX}, ${legendY})`);
+
+    key.append("text")
+        .attr("class", "key-title")
+        .attr("x", 0)
+        .attr("y", -30)
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(11, baseLabelSize)}px`)
+        .style("font-weight", "700")
+        .text("Category key");
+
+    const groupLegend = key.selectAll(".group-legend-row")
+        .data(groups)
+        .enter()
+        .append("g")
+        .attr("class", "group-legend-row")
+        .attr("transform", (d, i) => `translate(${i * Math.min(138, legendWidth / 2)}, -12)`);
+
+    groupLegend.append("rect")
+        .attr("class", "group-swatch")
+        .attr("x", 0)
+        .attr("y", -8)
+        .attr("width", 10)
+        .attr("height", 10)
+        .attr("rx", 2)
+        .attr("fill", d => groupColors(d));
+
+    groupLegend.append("text")
+        .attr("class", "group-label")
+        .attr("x", 15)
+        .attr("y", 0)
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, keyValueSize)}px`)
+        .style("font-weight", annotationWeight)
+        .text(d => truncateText(d, Math.min(112, legendWidth / 2 - 20), Math.max(8, keyValueSize), annotationFamily, annotationWeight));
+
+    key.append("line")
+        .attr("class", "key-rule")
+        .attr("x1", 0)
+        .attr("x2", legendWidth)
+        .attr("y1", 6)
+        .attr("y2", 6)
+        .attr("stroke", rgba(textColor, 0.16))
+        .attr("stroke-width", 1);
+
+    const legendRows = key.selectAll(".legend-row")
+        .data(orderedCategories)
+        .enter()
+        .append("g")
+        .attr("class", "legend-row")
+        .attr("transform", (d, i) => `translate(0, ${18 + i * rowGap})`);
+
+    legendRows.append("text")
+        .attr("class", "legend-index")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${keyFontSize}px`)
+        .style("font-weight", "700")
+        .text(d => d.rank);
+
+    legendRows.append("text")
+        .attr("class", "category-label")
+        .attr("x", 20)
+        .attr("y", 0)
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${keyFontSize}px`)
+        .style("font-weight", labelWeight)
+        .text(d => truncateText(d.category, labelMaxWidth, keyFontSize, fontFamily, labelWeight));
+
+    groups.forEach((group, groupIndex) => {
+        legendRows.append("text")
+            .attr("class", "value-label")
+            .attr("x", groupIndex === 0 ? value1X : value2X)
+            .attr("y", 0)
+            .attr("text-anchor", "end")
+            .attr("fill", groupColors(group))
+            .style("font-family", annotationFamily)
+            .style("font-size", `${keyValueSize}px`)
+            .style("font-weight", annotationWeight)
+            .text(d => {
+                const value = valueByCategoryGroup.get(`${d.category}|||${group}`) ?? 0;
+                return formatLocalValue(value, false);
+            });
+    });
+
+    legendRows.append("line")
+        .attr("class", "legend-row-rule")
+        .attr("x1", 20)
+        .attr("x2", legendWidth)
+        .attr("y1", rowGap * 0.43)
+        .attr("y2", rowGap * 0.43)
+        .attr("stroke", rgba(textColor, 0.08))
+        .attr("stroke-width", 1);
+
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", centerX)
+        .attr("y", height - 26)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8.5, baseValueSize)}px`)
+        .style("font-weight", annotationWeight)
+        .text(`Bars radiate from the center; categories sorted by ${sortMode}.`);
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", legendX)
+        .attr("y", height - 26)
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, keyValueSize)}px`)
+        .style("font-weight", annotationWeight)
+        .text("Numbers around the ring map to the key.");
+
+    measureGroup.remove();
+    return svg.node();
+}