Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type11_circular_stacked_bar_chart/circular_stacked_bar_chart_icons_01.js

@@ -0,0 +1,274 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Circular Stacked Bar Chart",
+    "chart_name": "circular_stacked_bar_chart_icons_01",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 20], [0, "inf"], [2, 10]],
+    "required_fields_icons": ["x", "group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke"],
+    "min_height": 500,
+    "min_width": 500,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备阶段 ----------
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#333333",
+        other: { primary: "#084594" }
+    };
+    const images = jsonData.images || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 数值单位规范
+    // 添加数值格式化函数
+
+    // 视觉效果默认值
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_gradient = variables.has_gradient || false;
+    variables.has_stroke = variables.has_stroke || false;
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 尺寸和布局设置 ----------
+    const width = variables.width || 800;
+    const height = variables.height || 800;
+    const size = Math.min(width, height);
+
+    const margin = {
+        top: 90,
+        right: 50,
+        bottom: 60,
+        left: 50
+    };
+
+    const innerWidth = size - margin.left - margin.right;
+    const innerHeight = size - margin.top - margin.bottom;
+
+    const centerX = margin.left + innerWidth / 2;
+    const centerY = margin.top + innerHeight / 2;
+    const radius = Math.min(innerWidth, innerHeight) / 2;
+
+    // ---------- 3. 提取字段名和单位 ----------
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key || "category";
+    const valueField = chartUtils.schema.channel(jsonData, "y").key || "value";
+    const groupField = chartUtils.schema.channel(jsonData, "group").key || "group";
+
+    // 单位
+    let valueUnit = "";
+    const valueChannel = chartUtils.schema.channel(jsonData, "y");
+    if (valueChannel.unit) {
+        valueUnit = valueChannel.unit === "B" ? " B" : valueChannel.unit;
+    }
+
+    // ---------- 4. 数据处理 ----------
+    // 获取所有唯一的组
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 按类别分组并计算堆叠值
+    const groupedData = d3.group(chartData, d => d[dimensionField]);
+    const stackedData = Array.from(groupedData, ([category, values]) => {
+        const stack = {};
+        let total = 0;
+        groups.forEach(group => {
+            const groupValue = values.find(v => v[groupField] === group)?.[valueField] || 0;
+            stack[group] = {
+                start: total,
+                end: total + groupValue,
+                value: groupValue
+            };
+            total += groupValue;
+        });
+        return {
+            category,
+            stacks: stack,
+            total
+        };
+    });
+
+    // 按总值降序排序
+    stackedData.sort((a, b) => b.total - a.total);
+
+    const totalItems = stackedData.length;
+    if (totalItems === 0) return;
+
+    const anglePerItem = (2 * Math.PI) / totalItems;
+    const maxValue = d3.max(stackedData, d => d.total);
+
+    // ---------- 5. 创建SVG和效果定义 ----------
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", size)
+        .attr("viewBox", `0 0 ${size} ${size}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("x", -innerWidth/2)
+            .attr("y", -innerHeight/2)
+            .attr("width", innerWidth*2)
+            .attr("height", innerHeight*2);
+        filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", 4);
+        filter.append("feOffset").attr("dx", 3).attr("dy", 3).attr("result", "offsetblur");
+        filter.append("feFlood").attr("flood-color", "#000").attr("flood-opacity", 0.3);
+        filter.append("feComposite").attr("in2", "offsetblur").attr("operator", "in");
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+
+    // ---------- 6. 创建比例尺 ----------
+    const centralCircleRadius = radius * 0.25;
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .range([centralCircleRadius + 20, radius * 0.9]);
+
+    // 为每个组创建颜色
+    const groupColors = {};
+    groups.forEach((group, i) => {
+        const baseColor = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        groupColors[group] = colorResolver.field(group, 0, { fallbackKey: "primary" }).value
+    });
+
+    // ---------- 7. 创建中心圆和背景 ----------
+    svg.append("circle")
+        .attr("cx", centerX)
+        .attr("cy", centerY)
+        .attr("r", centralCircleRadius)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#aaaaaa")
+        .attr("stroke-width", 1.5);
+
+    // ---------- 8. 创建堆叠扇形 ----------
+    const sectorsGroup = svg.append("g")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    const labelsGroup = svg.append("g")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    stackedData.forEach((d, i) => {
+        const startAngle = i * anglePerItem;
+        const endAngle = startAngle + anglePerItem;
+        const midAngle = startAngle + anglePerItem / 2;
+
+        // 为每个组创建堆叠的扇形
+        groups.forEach(group => {
+            const stack = d.stacks[group];
+            if (stack.value > 0) {
+                const innerRadius = radiusScale(stack.start);
+                const outerRadius = radiusScale(stack.end);
+
+                const arcGenerator = d3.arc()
+                    .innerRadius(innerRadius)
+                    .outerRadius(outerRadius)
+                    .startAngle(startAngle)
+                    .endAngle(endAngle)
+                    .padAngle(0.02);
+
+                sectorsGroup.append("path")
+                    .attr("d", arcGenerator)
+                    .attr("fill", groupColors[group])
+                    .attr("stroke", variables.has_stroke ? colorResolver.variant(groupColors[group], { mode: "darker", amount: 0.5 }) : "none")
+                    .attr("stroke-width", variables.has_stroke ? 1 : 0)
+                    .attr("style", variables.has_shadow ? "filter: url(#shadow)" : null)
+            }
+        });
+
+        // 添加末端圆圈和标签
+        const outerRadius = radiusScale(d.total);
+        const endCircleX = Math.sin(midAngle) * outerRadius;
+        const endCircleY = -Math.cos(midAngle) * outerRadius;
+        const endCircleRadius = Math.max(12, Math.min(30, radius * 0.1));
+
+        sectorsGroup.append("circle")
+            .attr("cx", endCircleX)
+            .attr("cy", endCircleY)
+            .attr("r", endCircleRadius)
+            .attr("fill", "#ffffff")
+            .attr("stroke", "#aaaaaa")
+            .attr("stroke-width", 1);
+
+        // 添加总值标签
+        const valueText = `${chartUtils.format.autoText(d.total)}${valueUnit}`;
+        sectorsGroup.append("text")
+            .attr("x", endCircleX)
+            .attr("y", endCircleY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", typography.annotation.font_family)
+            .attr("font-size", `${endCircleRadius * 0.8}px`)
+            .attr("font-weight", "bold")
+            .attr("fill", "#333333")
+            .text(valueText);
+
+        // 添加类别标签
+        const iconSize = 30;
+        const labelPadding = 20;
+        const iconRadius = outerRadius + endCircleRadius + labelPadding;
+        const iconX = Math.sin(midAngle) * iconRadius;
+        const iconY = -Math.cos(midAngle) * iconRadius;
+
+        const iconUrl = images?.field?.[d.category];
+        if (iconUrl) {
+            labelsGroup.append("image")
+                .attr("xlink:href", iconUrl)
+                .attr("x", iconX - iconSize / 2)
+                .attr("y", iconY - iconSize / 2)
+                .attr("width", iconSize)
+                .attr("height", iconSize)
+                .attr("preserveAspectRatio", "xMidYMid meet");
+        }
+    });
+
+    chartUtils.legend.draw(svg, groups, {
+        color: group => groupColors[group],
+        colorResolver,
+        colors,
+    }, {
+        x: size - 150,
+        y: 50,
+        direction: "vertical",
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        rowGap: 10,
+        itemHeight: 25,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type11_circular_stacked_bar_chart/circular_stacked_bar_plain_chart_01.js

@@ -0,0 +1,732 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "circular stacked bar chart",
+    "chart_name": "circular_stacked_bar_plain_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 16], [0, "inf"], [2, 8]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 560,
+    "min_width": 720,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = (jsonData.data && jsonData.data.data) || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const sourceColors = jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const width = Number(variables.width) || 800;
+    const height = Number(variables.height) || 640;
+    const labelTypography = typography.label || {};
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const valueFamily = valueTypography.font_family || "Arial";
+    const labelWeight = labelTypography.font_weight || "normal";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 12;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 12;
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const groupColumn = chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || {};
+    const xField = xColumn.name || chartUtils.schema.column(dataColumns, 0).raw?.name || "dimension";
+    const yField = yColumn.name || chartUtils.schema.column(dataColumns, 1).raw?.name || "value";
+    const groupField = groupColumn.name || chartUtils.schema.column(dataColumns, 2).raw?.name || "group";
+    const xUnit = xColumn.unit && xColumn.unit !== "none" ? xColumn.unit : "";
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    const navy = "#071d4d";
+    const mutedText = "#54606f";
+    const greenText = "#2f7a43";
+    const canvasColor = "#fbfdff";
+    const badgeFill = "#eeeafb";
+    const referencePalette = [
+        "#1f63c5",
+        "#d866a9",
+        "#4baa68",
+        "#f3b23c",
+        "#4aa3df",
+        "#7b72cc",
+        "#ed7b45",
+        "#2d9b8b"
+    ];
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    function clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+
+    function parseTemporalSortValue(value) {
+        const text = String(value ?? "").trim();
+        const year = text.match(/^(-?\d{4})$/);
+        if (year) return Number(year[1]);
+        const date = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (date) {
+            return Number(date[1]) * 10000 + Number(date[2]) * 100 + Number(date[3] || 1);
+        }
+        const monthNames = {
+            jan: 1, feb: 2, mar: 3, apr: 4, may: 5, jun: 6,
+            jul: 7, aug: 8, sep: 9, oct: 10, nov: 11, dec: 12
+        };
+        const month = monthNames[text.slice(0, 3).toLowerCase()];
+        return month || NaN;
+    }
+
+    function formatNumber(value) {
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue)) return String(value ?? "");
+        const absValue = Math.abs(numericValue);
+        if (absValue >= 1000000000) return `${d3.format(".3~g")(numericValue / 1000000000)}B`;
+        if (absValue >= 1000000) return `${d3.format(".3~g")(numericValue / 1000000)}M`;
+        if (absValue >= 1000) return `${d3.format(".3~g")(numericValue / 1000)}K`;
+        return d3.format(",.4~g")(numericValue);
+    }
+
+    function formatWithUnit(value, unit) {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "$") return `$${formatted}`;
+        if (unit === "%") return `${formatted}%`;
+        return `${formatted} ${unit}`;
+    }
+
+    function formatDimension(value) {
+        return xUnit ? `${value} ${xUnit}` : String(value ?? "");
+    }
+
+    const rows = chartData.map((d, index) => ({
+        ...d,
+        __index: index,
+        __x: d[xField],
+        __label: formatDimension(d[xField]),
+        __group: String(d[groupField] ?? ""),
+        __value: Number(d[yField])
+    })).filter(d => Number.isFinite(d.__value) && d.__group !== "");
+
+    const groups = [];
+    rows.forEach(d => {
+        if (!groups.includes(d.__group)) groups.push(d.__group);
+    });
+
+    const categoryMap = new Map();
+    rows.forEach(d => {
+        const key = String(d.__x);
+        if (!categoryMap.has(key)) {
+            categoryMap.set(key, {
+                key,
+                raw: d.__x,
+                label: d.__label,
+                firstIndex: d.__index,
+                values: new Map(),
+                total: 0
+            });
+        }
+        const category = categoryMap.get(key);
+        const value = Math.max(0, d.__value);
+        category.values.set(d.__group, (category.values.get(d.__group) || 0) + value);
+        category.total += value;
+    });
+
+    const categories = Array.from(categoryMap.values());
+    const isTemporal = xColumn.data_type === "temporal" || (
+        categories.length > 0 && categories.every(d => Number.isFinite(parseTemporalSortValue(d.raw)))
+    );
+    categories.sort((a, b) => {
+        if (isTemporal) {
+            const aTime = parseTemporalSortValue(a.raw);
+            const bTime = parseTemporalSortValue(b.raw);
+            if (Number.isFinite(aTime) && Number.isFinite(bTime) && aTime !== bTime) {
+                return aTime - bTime;
+            }
+        } else {
+            const byTotal = b.total - a.total;
+            if (Math.abs(byTotal) > 1e-9) return byTotal;
+        }
+        return a.firstIndex - b.firstIndex;
+    });
+
+    if (!categories.length || !groups.length) return;
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg");
+
+    const defs = svg.append("defs");
+    const softShadow = defs.append("filter")
+        .attr("id", "circular_stacked_bar_plain_01_soft_shadow")
+        .attr("x", "-30%")
+        .attr("y", "-30%")
+        .attr("width", "160%")
+        .attr("height", "160%");
+    softShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 4)
+        .attr("flood-color", "#18315c")
+        .attr("flood-opacity", 0.13);
+
+    const lightShadow = defs.append("filter")
+        .attr("id", "circular_stacked_bar_plain_01_light_shadow")
+        .attr("x", "-35%")
+        .attr("y", "-35%")
+        .attr("width", "170%")
+        .attr("height", "170%");
+    lightShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 2.3)
+        .attr("flood-color", "#15315c")
+        .attr("flood-opacity", 0.12);
+
+    const bottomGradient = defs.append("linearGradient")
+        .attr("id", "circular_stacked_bar_plain_01_bottom_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    bottomGradient.append("stop").attr("offset", "0%").attr("stop-color", "#eef6ff");
+    bottomGradient.append("stop").attr("offset", "100%").attr("stop-color", "#f7fbff");
+
+    const badgeGradient = defs.append("radialGradient")
+        .attr("id", "circular_stacked_bar_plain_01_badge_gradient")
+        .attr("cx", "42%")
+        .attr("cy", "36%")
+        .attr("r", "66%");
+    badgeGradient.append("stop").attr("offset", "0%").attr("stop-color", "#ffffff");
+    badgeGradient.append("stop").attr("offset", "100%").attr("stop-color", badgeFill);
+
+    const measure = svg.append("g").attr("visibility", "hidden");
+    function measureLabelText(text, fontSize, family, weight) {
+        const node = measure.append("text")
+            .style("font-family", family)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", weight)
+            .text(text)
+            .node();
+        const measured = node ? node.textContent.length * 7 : String(text).length * fontSize * 0.55;
+        measure.selectAll("text").remove();
+        return measured;
+    }
+
+    function breakLongWord(word, maxWidth, fontSize, family, weight) {
+        const lines = [];
+        let current = "";
+        for (const char of String(word)) {
+            const next = current + char;
+            if (current && measureLabelText(next, fontSize, family, weight) > maxWidth) {
+                lines.push(current);
+                current = char;
+            } else {
+                current = next;
+            }
+        }
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(word)];
+    }
+
+    function wrapText(text, maxWidth, fontSize, family, weight) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        if (!words.length) return [String(text || "")];
+        const lines = [];
+        let current = "";
+        for (const word of words) {
+            const candidate = current ? `${current} ${word}` : word;
+            if (measureLabelText(candidate, fontSize, family, weight) <= maxWidth) {
+                current = candidate;
+                continue;
+            }
+            if (current) lines.push(current);
+            if (measureLabelText(word, fontSize, family, weight) <= maxWidth) {
+                current = word;
+            } else {
+                const broken = breakLongWord(word, maxWidth, fontSize, family, weight);
+                lines.push(...broken.slice(0, -1));
+                current = broken[broken.length - 1];
+            }
+        }
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(text || "")];
+    }
+
+    function addWrappedText(parent, lines, options) {
+        const text = parent.append("text")
+            .attr("class", options.className || null)
+            .attr("x", options.x)
+            .attr("y", options.y)
+            .attr("text-anchor", options.anchor || "middle")
+            .style("font-family", options.family || labelFamily)
+            .style("font-size", `${options.fontSize}px`)
+            .style("font-weight", options.weight || labelWeight)
+            .style("fill", options.fill || navy);
+        if (options.attrs) {
+            Object.entries(options.attrs).forEach(([key, value]) => text.attr(key, value));
+        }
+        lines.slice(0, options.maxLines || lines.length).forEach((line, lineIndex) => {
+            text.append("tspan")
+                .attr("x", options.x)
+                .attr("dy", lineIndex === 0 ? 0 : options.fontSize * 1.12)
+                .text(line);
+        });
+        return text;
+    }
+
+    function polarPoint(angle, radius, cx, cy) {
+        return {
+            x: cx + Math.sin(angle) * radius,
+            y: cy - Math.cos(angle) * radius
+        };
+    }
+
+    function drawBadgeIcon(parent, x, y, size, index) {
+        const icon = parent.append("g")
+            .attr("class", "category-icon-glyph")
+            .attr("transform", `translate(${x}, ${y})`)
+            .attr("stroke", navy)
+            .attr("stroke-width", Math.max(1.2, size * 0.075))
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("fill", "none");
+        const s = size / 22;
+        const pattern = index % 4;
+        if (pattern === 0) {
+            icon.append("path").attr("d", `M${-8 * s},${6 * s} L${-8 * s},${-3 * s} L0,${-8 * s} L${8 * s},${-3 * s} L${8 * s},${6 * s}`);
+            icon.append("path").attr("d", `M${-4 * s},${6 * s} L${-4 * s},${-1 * s} L${4 * s},${-1 * s} L${4 * s},${6 * s}`);
+            icon.append("path").attr("d", `M${-11 * s},${6 * s} L${11 * s},${6 * s}`);
+        } else if (pattern === 1) {
+            icon.append("path").attr("d", `M${-9 * s},${-1 * s} L0,${-7 * s} L${9 * s},${-1 * s} L0,${5 * s} Z`);
+            icon.append("path").attr("d", `M${-5 * s},${4 * s} C${-2 * s},${8 * s} ${2 * s},${8 * s} ${5 * s},${4 * s}`);
+            icon.append("path").attr("d", `M${8 * s},${0} L${8 * s},${7 * s}`);
+            icon.append("circle").attr("cx", 8 * s).attr("cy", 9 * s).attr("r", 1.5 * s);
+        } else if (pattern === 2) {
+            icon.append("rect")
+                .attr("x", -7 * s)
+                .attr("y", -8 * s)
+                .attr("width", 14 * s)
+                .attr("height", 16 * s)
+                .attr("rx", 1.5 * s);
+            icon.append("path").attr("d", `M${-4 * s},${-3 * s} H${4 * s}`);
+            icon.append("path").attr("d", `M${-4 * s},${2 * s} H${4 * s}`);
+            icon.append("circle").attr("cx", 4.5 * s).attr("cy", 7 * s).attr("r", 2.5 * s);
+        } else {
+            icon.append("path").attr("d", `M${-8 * s},${7 * s} V${-2 * s} L0,${-8 * s} L${8 * s},${-2 * s} V${7 * s}`);
+            icon.append("path").attr("d", `M${-3 * s},${7 * s} V${1 * s} H${3 * s} V${7 * s}`);
+            icon.append("path").attr("d", `M${-10 * s},${7 * s} H${10 * s}`);
+        }
+    }
+
+    function drawCenterIcon(parent, cx, cy, radius) {
+        const s = radius / 72;
+        const icon = parent.append("g")
+            .attr("class", "center-decorative-icon")
+            .attr("transform", `translate(${cx}, ${cy})`)
+            .attr("stroke", navy)
+            .attr("stroke-width", Math.max(2.5, radius * 0.055))
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("fill", "none");
+        icon.append("path")
+            .attr("d", `M${-35 * s},${-7 * s} L0,${-24 * s} L${35 * s},${-7 * s} L0,${10 * s} Z`);
+        icon.append("path")
+            .attr("d", `M${-20 * s},${4 * s} V${19 * s} C${-9 * s},${28 * s} ${9 * s},${28 * s} ${20 * s},${19 * s} V${4 * s}`);
+        icon.append("path").attr("d", `M${18 * s},${-1 * s} L${30 * s},${5 * s} V${24 * s}`);
+        icon.append("circle").attr("cx", 30 * s).attr("cy", 27 * s).attr("r", 2.8 * s);
+    }
+
+    function drawInsightIcon(parent, cx, cy, radius) {
+        const s = radius / 34;
+        const icon = parent.append("g")
+            .attr("class", "insight-icon")
+            .attr("transform", `translate(${cx}, ${cy})`);
+        icon.append("circle")
+            .attr("r", radius)
+            .attr("fill", referencePalette[0])
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", Math.max(3, radius * 0.16));
+        const lines = icon.append("g")
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", Math.max(2.2, radius * 0.09))
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("fill", "none");
+        lines.append("path").attr("d", `M${-14 * s},${9 * s} L${-5 * s},${2 * s} L${3 * s},${5 * s} L${13 * s},${-9 * s}`);
+        lines.append("path").attr("d", `M${7 * s},${-9 * s} H${13 * s} V${-3 * s}`);
+        [-12, -4, 4].forEach((x, i) => {
+            lines.append("rect")
+                .attr("x", x * s)
+                .attr("y", (10 - i * 5) * s)
+                .attr("width", 5 * s)
+                .attr("height", (5 + i * 5) * s)
+                .attr("fill", "#ffffff")
+                .attr("stroke", "none");
+        });
+    }
+
+    svg.append("rect")
+        .attr("class", "chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", canvasColor);
+
+    const groupColorScale = d3.scaleOrdinal()
+        .domain(groups)
+        .range(groups.map((group, index) => {
+            if (index < referencePalette.length) return referencePalette[index];
+            const t = groups.length <= 1 ? 0.5 : index / (groups.length - 1);
+            return d3.interpolateRgb(referencePalette[0], referencePalette[2])(t);
+        }));
+
+    const maxTotal = Math.max(1, d3.max(categories, d => d.total) || 1);
+    const categoryCount = categories.length;
+    const bottomCardHeight = clamp(height * 0.145, 76, 96);
+    const bottomCardY = height - bottomCardHeight - clamp(height * 0.032, 16, 24);
+    const legendRows = groups.length > 4 ? 2 : 1;
+    const legendY = clamp(height * 0.065, 28, 44);
+    const legendRowGap = clamp(height * 0.034, 18, 23);
+    const legendBottom = legendY + legendRows * legendRowGap + 10;
+    const centerX = width / 2;
+    const centerY = clamp((legendBottom + bottomCardY) / 2 + height * 0.018, height * 0.36, height * 0.57);
+    const labelAllowance = categoryCount > 10 ? 84 : 112;
+    const verticalAllowance = categoryCount > 10 ? 78 : 102;
+    const outerRadius = Math.max(
+        96,
+        Math.min(
+            width * (categoryCount > 10 ? 0.22 : 0.255),
+            (bottomCardY - legendBottom - verticalAllowance) * 0.5,
+            (width - labelAllowance * 2) * 0.5
+        )
+    );
+    const innerRadius = Math.max(44, outerRadius * 0.42);
+    const labelOrbit = Math.min(width * 0.43, outerRadius + (categoryCount > 10 ? 68 : 112));
+    const iconRadius = categoryCount > 10 ? 13 : categoryCount > 8 ? 16 : 22;
+    const labelFontSize = categoryCount > 10
+        ? Math.max(7.5, Math.min(9, baseLabelSize * 0.58))
+        : Math.max(9, Math.min(13, baseLabelSize * 0.78));
+    const valueFontSize = categoryCount > 10
+        ? Math.max(8, Math.min(10, baseValueSize * 0.82))
+        : Math.max(10, Math.min(14, baseValueSize * 1.0));
+
+    const chart = svg.append("g")
+        .attr("class", "circular-stacked-bar-plot")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxTotal])
+        .range([innerRadius, outerRadius]);
+    const angleScale = d3.scaleBand()
+        .domain(categories.map(d => d.key))
+        .range([0, Math.PI * 2])
+        .padding(categoryCount > 10 ? 0.035 : 0.08);
+
+    chart.append("circle")
+        .attr("class", "outer-wheel-halo")
+        .attr("r", outerRadius + 9)
+        .attr("fill", "#f8fbf4")
+        .attr("stroke", rgba(referencePalette[2], 0.22))
+        .attr("stroke-width", 1.1)
+        .style("filter", "url(#circular_stacked_bar_plain_01_light_shadow)");
+
+    const centerCircle = chart.append("circle")
+        .attr("class", "inner-ring")
+        .attr("r", innerRadius * 0.96)
+        .attr("fill", "#ffffff")
+        .attr("stroke", rgba(navy, 0.12))
+        .attr("stroke-width", 1.2)
+        .style("filter", "url(#circular_stacked_bar_plain_01_light_shadow)");
+
+    const segmentData = [];
+    categories.forEach(category => {
+        let start = 0;
+        groups.forEach(group => {
+            const value = category.values.get(group) || 0;
+            if (value <= 0) return;
+            const end = start + value;
+            segmentData.push({
+                category,
+                group,
+                value,
+                start,
+                end
+            });
+            start = end;
+        });
+    });
+
+    const arc = d3.arc()
+        .cornerRadius(variables.has_radius_corner === false ? 0 : 3)
+        .padAngle(categoryCount > 10 ? 0.004 : 0.008)
+        .padRadius(innerRadius);
+
+    chart.selectAll(".stack-segment")
+        .data(segmentData)
+        .enter()
+        .append("path")
+        .attr("class", "stack-segment mark")
+        .attr("data-category", d => d.category.label)
+        .attr("data-category-key", d => d.category.key)
+        .attr("data-group", d => d.group)
+        .attr("data-value", d => d.value)
+        .attr("data-start", d => d.start)
+        .attr("data-end", d => d.end)
+        .attr("data-total", d => d.category.total)
+        .attr("d", d => arc({
+            innerRadius: radiusScale(d.start),
+            outerRadius: radiusScale(d.end),
+            startAngle: angleScale(d.category.key),
+            endAngle: angleScale(d.category.key) + angleScale.bandwidth()
+        }))
+        .attr("fill", d => groupColorScale(d.group))
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", variables.has_stroke === false ? 1.6 : 2.4)
+        .style("filter", "url(#circular_stacked_bar_plain_01_light_shadow)");
+
+    drawCenterIcon(chart, 0, 0, innerRadius * 0.82);
+    centerCircle.raise();
+    chart.select(".center-decorative-icon").raise();
+
+    const labelLayer = svg.append("g").attr("class", "radial-label-layer");
+    const valueBubbleRadius = categoryCount > 10 ? 14 : 19;
+    categories.forEach((category, index) => {
+        const startAngle = angleScale(category.key);
+        const angle = startAngle + angleScale.bandwidth() / 2;
+        const outerPoint = polarPoint(angle, outerRadius + 10, centerX, centerY);
+        const bubblePoint = polarPoint(angle, outerRadius + valueBubbleRadius * 0.58, centerX, centerY);
+        const labelPointRaw = polarPoint(angle, labelOrbit, centerX, centerY);
+        const labelPoint = {
+            x: clamp(labelPointRaw.x, iconRadius + 42, width - iconRadius - 42),
+            y: clamp(
+                labelPointRaw.y,
+                legendBottom + iconRadius + 12,
+                bottomCardY - iconRadius - Math.max(36, labelFontSize * 3.1)
+            )
+        };
+        const elbowX = labelPoint.x + (labelPoint.x < centerX ? iconRadius + 13 : -iconRadius - 13);
+        const iconEdgeX = labelPoint.x + (labelPoint.x < centerX ? iconRadius : -iconRadius);
+
+        labelLayer.append("polyline")
+            .attr("class", "category-connector")
+            .attr("points", [
+                `${outerPoint.x},${outerPoint.y}`,
+                `${elbowX},${outerPoint.y}`,
+                `${iconEdgeX},${labelPoint.y}`
+            ].join(" "))
+            .attr("fill", "none")
+            .attr("stroke", rgba(referencePalette[0], 0.58))
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "3 4")
+            .attr("stroke-linecap", "round");
+
+        labelLayer.append("circle")
+            .attr("class", "category-icon-slot")
+            .attr("data-category", category.label)
+            .attr("data-category-key", category.key)
+            .attr("cx", labelPoint.x)
+            .attr("cy", labelPoint.y)
+            .attr("r", iconRadius)
+            .attr("fill", "url(#circular_stacked_bar_plain_01_badge_gradient)");
+        drawBadgeIcon(labelLayer, labelPoint.x, labelPoint.y, iconRadius * 1.18, index);
+
+        const labelLines = wrapText(category.label, categoryCount > 10 ? 70 : 106, labelFontSize, labelFamily, "600");
+        addWrappedText(labelLayer, labelLines, {
+            className: "label",
+            x: labelPoint.x,
+            y: labelPoint.y + iconRadius + labelFontSize * 0.95,
+            anchor: "middle",
+            family: labelFamily,
+            fontSize: labelFontSize,
+            weight: "600",
+            fill: navy,
+            maxLines: 2,
+            attrs: {
+                "data-category": category.label,
+                "data-category-key": category.key
+            }
+        });
+
+        labelLayer.append("circle")
+            .attr("class", "value-bubble")
+            .attr("cx", bubblePoint.x)
+            .attr("cy", bubblePoint.y)
+            .attr("r", valueBubbleRadius)
+            .attr("fill", "#ffffff")
+            .attr("stroke", rgba(navy, 0.09))
+            .attr("stroke-width", 0.9)
+            .style("filter", "url(#circular_stacked_bar_plain_01_soft_shadow)");
+
+        labelLayer.append("text")
+            .attr("class", "value total-value")
+            .attr("data-category", category.label)
+            .attr("data-category-key", category.key)
+            .attr("data-total", category.total)
+            .attr("x", bubblePoint.x)
+            .attr("y", bubblePoint.y + valueFontSize * 0.34)
+            .attr("text-anchor", "middle")
+            .style("font-family", valueFamily)
+            .style("font-size", `${valueFontSize}px`)
+            .style("font-weight", "700")
+            .style("fill", greenText)
+            .text(formatWithUnit(category.total, yUnit));
+    });
+
+    const legend = svg.append("g").attr("class", "group-legend");
+    const legendFontSize = Math.max(10, Math.min(14, baseLabelSize * 0.9));
+    const legendItems = groups.map(group => {
+        const textWidth = measureLabelText(group, legendFontSize, labelFamily, "700");
+        return { group, width: Math.max(68, textWidth + 34) };
+    });
+    const rowsForLegend = [];
+    if (legendRows === 1) {
+        rowsForLegend.push(legendItems);
+    } else {
+        const firstRowCount = Math.ceil(legendItems.length / 2);
+        rowsForLegend.push(legendItems.slice(0, firstRowCount));
+        rowsForLegend.push(legendItems.slice(firstRowCount));
+    }
+    rowsForLegend.forEach((rowItems, rowIndex) => {
+        const rowWidth = rowItems.reduce((sum, item) => sum + item.width, 0) + Math.max(0, rowItems.length - 1) * 8;
+        let x = (width - rowWidth) / 2;
+        rowItems.forEach(item => {
+            const itemGroup = legend.append("g")
+                .attr("class", "group-legend-item")
+                .attr("transform", `translate(${x}, ${legendY + rowIndex * legendRowGap})`);
+            itemGroup.append("circle")
+                .attr("class", "group-chip")
+                .attr("data-group", item.group)
+                .attr("cx", 8)
+                .attr("cy", 0)
+                .attr("r", 7)
+                .attr("fill", groupColorScale(item.group));
+            itemGroup.append("text")
+                .attr("class", "group-label")
+                .attr("data-group", item.group)
+                .attr("x", 24)
+                .attr("y", legendFontSize * 0.34)
+                .attr("text-anchor", "start")
+                .style("font-family", labelFamily)
+                .style("font-size", `${legendFontSize}px`)
+                .style("font-weight", "700")
+                .style("fill", navy)
+                .text(item.group);
+            x += item.width + 8;
+        });
+    });
+
+    const insightCardX = width * 0.10;
+    const insightCardW = width * 0.80;
+    svg.append("rect")
+        .attr("class", "bottom-insight-card")
+        .attr("x", insightCardX)
+        .attr("y", bottomCardY)
+        .attr("width", insightCardW)
+        .attr("height", bottomCardHeight)
+        .attr("rx", 16)
+        .attr("ry", 16)
+        .attr("fill", "url(#circular_stacked_bar_plain_01_bottom_gradient)");
+
+    const insightIconRadius = Math.min(27, bottomCardHeight * 0.38);
+    const insightIconX = insightCardX + insightIconRadius + 19;
+    const insightIconY = bottomCardY + bottomCardHeight / 2;
+    drawInsightIcon(svg, insightIconX, insightIconY, insightIconRadius);
+
+    svg.append("line")
+        .attr("class", "bottom-insight-rule")
+        .attr("x1", insightIconX + insightIconRadius + 19)
+        .attr("x2", insightIconX + insightIconRadius + 19)
+        .attr("y1", bottomCardY + 16)
+        .attr("y2", bottomCardY + bottomCardHeight - 16)
+        .attr("stroke", rgba(referencePalette[0], 0.24))
+        .attr("stroke-width", 1.1);
+
+    const insightTextX = insightIconX + insightIconRadius + 36;
+    const insightWidth = insightCardX + insightCardW - insightTextX - 18;
+    const metadata = jsonData.metadata || {};
+    const insightText = metadata.main_insight
+        || metadata.description
+        || jsonData.description
+        || `Stacked ${yField} totals compare ${groupField} by ${xField}.`;
+    const primaryInsight = String(insightText).replace(/\s+/g, " ").trim();
+    const insightTitleSize = Math.max(9.5, Math.min(12.5, baseLabelSize * 0.70));
+    const primaryLines = wrapText(primaryInsight, insightWidth, insightTitleSize, labelFamily, "700");
+    const insightTitleLineLimit = primaryLines.length > 2 ? 3 : 2;
+    addWrappedText(svg, primaryLines, {
+        className: "bottom-insight-title",
+        x: insightTextX,
+        y: bottomCardY + 23,
+        anchor: "start",
+        family: labelFamily,
+        fontSize: insightTitleSize,
+        weight: "700",
+        fill: navy,
+        maxLines: insightTitleLineLimit
+    });
+
+    const noteText = isTemporal
+        ? "Categories follow chronological order; radial length preserves original values."
+        : "Categories are ranked by total unless totals match original order.";
+    const noteLines = wrapText(noteText, insightWidth, Math.max(8, baseValueSize * 0.72), valueFamily, "400");
+    addWrappedText(svg, noteLines, {
+        className: "bottom-insight-note",
+        x: insightTextX,
+        y: bottomCardY + bottomCardHeight - 18,
+        anchor: "start",
+        family: valueFamily,
+        fontSize: Math.max(8, baseValueSize * 0.72),
+        weight: "400",
+        fill: mutedText,
+        maxLines: 1
+    });
+
+    measure.remove();
+    return svg.node();
+}