Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type21_horizontal_dot_bar_chart/horizontal_dot_bar_plain_chart_01.js

@@ -0,0 +1,797 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "horizontal dot bar chart",
+    "chart_name": "horizontal_dot_bar_plain_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"]],
+    "required_fields_range": [[2, 30], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "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 || {};
+    const colorOther = sourceColors.other || {};
+    const colorField = sourceColors.field || {};
+
+    d3.select(containerSelector).html("");
+
+    const width = Number(variables.width) || 800;
+    const baseHeight = Number(variables.height) || 600;
+    const rowCount = Math.max(chartData.length, 1);
+    const height = Math.max(baseHeight, rowCount * 43 + 222);
+
+    const labelTypography = typography.label || {};
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const labelWeight = labelTypography.font_weight || "normal";
+    const valueFamily = valueTypography.font_family || "Arial";
+    const valueWeight = valueTypography.font_weight || "normal";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 12;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 12;
+    const textColor = sourceColors.text_color || "#27323f";
+    const styleGreen = colorOther.primary || colorField.y || "#2f8f3a";
+    const primaryColor = d3.interpolateRgb("#2f8f3a", styleGreen)(0.22);
+    const palePrimary = "#b9e873";
+    const darkPrimary = "#155f2a";
+    const tableGreen = "#2f8f3a";
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    const axisColor = sourceColors.axis_color || rgba(textColor, 0.48);
+    const gridColor = sourceColors.grid_color || "rgba(47, 143, 58, 0.14)";
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const dimensionField = xColumn.name || chartUtils.schema.column(dataColumns, 0).raw?.name || "dimension";
+    const valueField = yColumn.name || chartUtils.schema.column(dataColumns, 1).raw?.name || "value";
+    const dimensionUnit = xColumn.unit && xColumn.unit !== "none" ? xColumn.unit : "";
+    const valueUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    function parseTemporalSortValue(value) {
+        const text = String(value ?? "").trim();
+        let match = text.match(/^(-?\d{1,6})$/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(-?\d{1,6})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) {
+            return Number(match[1]) * 10000 + Number(match[2]) * 100 + Number(match[3] || 1);
+        }
+        const dateValue = Date.parse(text);
+        return Number.isNaN(dateValue) ? NaN : dateValue;
+    }
+
+    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 dimensionLabel(d) {
+        const value = d[dimensionField];
+        return dimensionUnit ? `${value} ${dimensionUnit}` : String(value ?? "");
+    }
+
+    function prettifyHeader(value, fallback) {
+        const text = String(value || fallback || "").trim();
+        if (!text) return "";
+        return text
+            .replace(/[_-]+/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ");
+    }
+
+    const enrichedData = chartData.map((d, index) => ({
+        ...d,
+        __index: index,
+        __dimension: dimensionLabel(d),
+        __value: Number(d[valueField])
+    })).filter(d => Number.isFinite(d.__value));
+
+    const temporalValues = enrichedData.map(d => parseTemporalSortValue(d[dimensionField]));
+    const isTemporal = xColumn.data_type === "temporal" || (
+        temporalValues.length > 0 && temporalValues.every(Number.isFinite)
+    );
+
+    const sortedData = [...enrichedData].sort((a, b) => {
+        if (isTemporal) {
+            const aTime = parseTemporalSortValue(a[dimensionField]);
+            const bTime = parseTemporalSortValue(b[dimensionField]);
+            if (Number.isFinite(aTime) && Number.isFinite(bTime)) return aTime - bTime;
+        }
+        const byValue = b.__value - a.__value;
+        if (byValue !== 0) return byValue;
+        return String(a.__dimension).localeCompare(String(b.__dimension));
+    });
+
+    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 gradientId = "horizontal-dot-bar-gradient";
+    const gradient = defs.append("linearGradient")
+        .attr("id", gradientId)
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    gradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", palePrimary);
+    gradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", primaryColor);
+
+    if (variables.has_shadow) {
+        const shadow = defs.append("filter")
+            .attr("id", "dot-shadow")
+            .attr("x", "-40%")
+            .attr("y", "-40%")
+            .attr("width", "180%")
+            .attr("height", "180%");
+        shadow.append("feDropShadow")
+            .attr("dx", 0)
+            .attr("dy", 1)
+            .attr("stdDeviation", 1.4)
+            .attr("flood-color", "#000000")
+            .attr("flood-opacity", 0.18);
+    }
+
+    const measureSvg = svg.append("g").attr("visibility", "hidden");
+    function measureLabelText(text, fontSize, family, weight) {
+        const node = measureSvg.append("text")
+            .style("font-family", family)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", weight)
+            .text(text)
+            .node();
+        const width = node ? node.textContent.length * 7 : String(text).length * fontSize * 0.55;
+        measureSvg.selectAll("text").remove();
+        return width;
+    }
+
+    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 appendMiniIcon(parent, type, x, y, size, color, className) {
+        const g = parent.append("g")
+            .attr("class", className || "mini-icon")
+            .attr("transform", `translate(${x}, ${y})`);
+        const strokeWidth = Math.max(1.4, size * 0.11);
+
+        if (type === "calendar") {
+            g.append("rect")
+                .attr("x", 0)
+                .attr("y", size * 0.14)
+                .attr("width", size)
+                .attr("height", size * 0.78)
+                .attr("rx", size * 0.12)
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", strokeWidth);
+            g.append("line")
+                .attr("x1", 0)
+                .attr("x2", size)
+                .attr("y1", size * 0.38)
+                .attr("y2", size * 0.38)
+                .attr("stroke", color)
+                .attr("stroke-width", strokeWidth);
+            [0.28, 0.72].forEach(px => {
+                g.append("line")
+                    .attr("x1", size * px)
+                    .attr("x2", size * px)
+                    .attr("y1", 0)
+                    .attr("y2", size * 0.26)
+                    .attr("stroke", color)
+                    .attr("stroke-width", strokeWidth)
+                    .attr("stroke-linecap", "round");
+            });
+            return g;
+        }
+
+        if (type === "trend") {
+            [0.15, 0.38, 0.61].forEach((px, index) => {
+                const barHeight = size * (0.28 + index * 0.18);
+                g.append("rect")
+                    .attr("x", size * px)
+                    .attr("y", size * (0.88) - barHeight)
+                    .attr("width", size * 0.12)
+                    .attr("height", barHeight)
+                    .attr("fill", color);
+            });
+            g.append("path")
+                .attr("d", `M${size * 0.12},${size * 0.58} L${size * 0.38},${size * 0.38} L${size * 0.58},${size * 0.46} L${size * 0.86},${size * 0.18}`)
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", strokeWidth)
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round");
+            g.append("path")
+                .attr("d", `M${size * 0.74},${size * 0.18} L${size * 0.86},${size * 0.18} L${size * 0.86},${size * 0.31}`)
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", strokeWidth)
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round");
+            return g;
+        }
+
+        if (type === "pulse") {
+            g.append("path")
+                .attr("d", `M0,${size * 0.55} L${size * 0.18},${size * 0.55} L${size * 0.28},${size * 0.28} L${size * 0.42},${size * 0.78} L${size * 0.55},${size * 0.2} L${size * 0.68},${size * 0.55} L${size},${size * 0.55}`)
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", strokeWidth)
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round");
+            return g;
+        }
+
+        g.append("circle")
+            .attr("cx", size / 2)
+            .attr("cy", size / 2)
+            .attr("r", size * 0.36)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", strokeWidth);
+        return g;
+    }
+
+    function splitValueLabel(label, unit) {
+        const text = String(label || "");
+        if (unit && text.endsWith(` ${unit}`)) {
+            return [text.slice(0, -unit.length - 1), unit];
+        }
+        return [text, ""];
+    }
+
+    svg.append("rect")
+        .attr("class", "chart-style-background")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "#f6fbf1");
+
+    const cardX = Math.max(18, width * 0.035);
+    const cardY = 18;
+    const cardWidth = width - cardX * 2;
+    const cardHeight = height - cardY - 24;
+    const legendHeight = 82;
+    const legendGap = 20;
+    const headerHeight = 52;
+    const footerHeight = 44;
+    const footerGap = 20;
+    const tableY = cardY + legendHeight + legendGap;
+    const tableHeight = Math.max(
+        rowCount * 34 + headerHeight,
+        cardHeight - legendHeight - legendGap - footerHeight - footerGap
+    );
+    const innerHeight = Math.max(120, tableHeight - headerHeight);
+    const footerY = tableY + tableHeight + footerGap;
+    const labelMaxWidth = Math.min(230, cardWidth * 0.3);
+    const valueLabels = sortedData.map(d => formatWithUnit(d.__value, valueUnit));
+    const maxValueLabelWidth = Math.max(
+        46,
+        ...valueLabels.map(label => measureLabelText(label, baseValueSize, valueFamily, valueWeight))
+    );
+    const rightColumnWidth = Math.max(122, maxValueLabelWidth + 62);
+    const labelFontSize = Math.max(8, Math.min(baseLabelSize, innerHeight / rowCount * 0.34));
+    const wrappedLabels = sortedData.map(d => wrapText(d.__dimension, labelMaxWidth, labelFontSize, labelFamily, labelWeight));
+    const maxLabelLineWidth = Math.max(
+        54,
+        ...wrappedLabels.flat().map(line => measureLabelText(line, labelFontSize, labelFamily, labelWeight))
+    );
+    const leftColumnWidth = Math.max(132, Math.min(cardWidth * 0.36, maxLabelLineWidth + 66));
+    measureSvg.remove();
+
+    const innerWidth = Math.max(220, cardWidth - leftColumnWidth - rightColumnWidth);
+    const chartX = cardX + leftColumnWidth;
+    const chartY = tableY + headerHeight;
+    const yScale = d3.scaleBand()
+        .domain(sortedData.map(d => `${d.__dimension}__${d.__index}`))
+        .range([0, innerHeight])
+        .padding(0);
+
+    const values = sortedData.map(d => d.__value);
+    let minValue = Math.min(0, d3.min(values) ?? 0);
+    let maxValue = Math.max(0, d3.max(values) ?? 0);
+    if (minValue === maxValue) {
+        maxValue = maxValue === 0 ? 1 : maxValue * 1.1;
+        minValue = 0;
+    }
+    const xScale = d3.scaleLinear()
+        .domain([minValue, maxValue])
+        .nice(5)
+        .range([0, innerWidth]);
+    const zeroX = xScale(0);
+
+    const panel = svg.append("g")
+        .attr("class", "chart-style-panel");
+
+    panel.append("rect")
+        .attr("class", "legend-card")
+        .attr("x", cardX)
+        .attr("y", cardY)
+        .attr("width", cardWidth)
+        .attr("height", legendHeight)
+        .attr("rx", 8)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "rgba(47, 143, 58, 0.18)")
+        .attr("stroke-width", 1);
+
+    const legendTitle = `${prettifyHeader(yColumn.name, "Value")} Level`;
+    const legendTextColor = "#1f2937";
+    const legendY = cardY;
+    const legendSeparatorX = cardX + cardWidth * 0.66;
+    const legendSegments = 18;
+    const legendSegmentStart = cardX + Math.min(118, cardWidth * 0.18);
+    const legendSegmentWidth = Math.max(7, Math.min(10, cardWidth * 0.016));
+    const legendSegmentGap = Math.max(5, Math.min(8, cardWidth * 0.012));
+    const legendSegmentY = legendY + 48;
+
+    panel.append("text")
+        .attr("class", "legend-title")
+        .attr("x", cardX + 22)
+        .attr("y", legendY + 28)
+        .attr("text-anchor", "start")
+        .style("font-family", labelFamily)
+        .style("font-size", `${Math.max(12, baseLabelSize * 1.05)}px`)
+        .style("font-weight", 700)
+        .style("fill", legendTextColor)
+        .text(legendTitle);
+
+    panel.append("text")
+        .attr("class", "legend-low")
+        .attr("x", cardX + 22)
+        .attr("y", legendY + 60)
+        .attr("text-anchor", "start")
+        .style("font-family", labelFamily)
+        .style("font-size", `${Math.max(12, baseLabelSize * 1.05)}px`)
+        .style("font-weight", 700)
+        .style("fill", tableGreen)
+        .text("Low");
+
+    d3.range(legendSegments).forEach(index => {
+        panel.append("rect")
+            .attr("class", "legend-segment")
+            .attr("x", legendSegmentStart + index * (legendSegmentWidth + legendSegmentGap))
+            .attr("y", legendSegmentY)
+            .attr("width", legendSegmentWidth)
+            .attr("height", 24)
+            .attr("rx", legendSegmentWidth / 2)
+            .attr("fill", d3.interpolateRgb("#dff4bf", tableGreen)(index / Math.max(1, legendSegments - 1)));
+    });
+
+    panel.append("text")
+        .attr("class", "legend-high")
+        .attr("x", Math.min(legendSeparatorX - 44, legendSegmentStart + legendSegments * (legendSegmentWidth + legendSegmentGap) + 10))
+        .attr("y", legendY + 60)
+        .attr("text-anchor", "start")
+        .style("font-family", labelFamily)
+        .style("font-size", `${Math.max(12, baseLabelSize * 1.05)}px`)
+        .style("font-weight", 700)
+        .style("fill", darkPrimary)
+        .text("High");
+
+    panel.append("line")
+        .attr("class", "legend-separator")
+        .attr("x1", legendSeparatorX)
+        .attr("x2", legendSeparatorX)
+        .attr("y1", legendY + 22)
+        .attr("y2", legendY + legendHeight - 22)
+        .attr("stroke", "rgba(47, 143, 58, 0.18)")
+        .attr("stroke-width", 1.5);
+
+    panel.append("circle")
+        .attr("class", "legend-dot")
+        .attr("cx", legendSeparatorX + 34)
+        .attr("cy", legendY + 42)
+        .attr("r", 7)
+        .attr("fill", primaryColor)
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 2);
+
+    panel.append("text")
+        .attr("class", "legend-note")
+        .attr("x", legendSeparatorX + 58)
+        .attr("y", legendY + 35)
+        .attr("text-anchor", "start")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(10, baseValueSize * 0.9)}px`)
+        .style("font-weight", valueWeight)
+        .style("fill", "rgba(31, 41, 55, 0.82)")
+        .text("Each bar represents");
+    panel.append("text")
+        .attr("class", "legend-note")
+        .attr("x", legendSeparatorX + 58)
+        .attr("y", legendY + 58)
+        .attr("text-anchor", "start")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(10, baseValueSize * 0.9)}px`)
+        .style("font-weight", valueWeight)
+        .style("fill", "rgba(31, 41, 55, 0.82)")
+        .text("the relative level.");
+
+    panel.append("rect")
+        .attr("class", "plot-background")
+        .attr("x", cardX)
+        .attr("y", tableY)
+        .attr("width", cardWidth)
+        .attr("height", tableHeight)
+        .attr("rx", 8)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "rgba(47, 143, 58, 0.18)")
+        .attr("stroke-width", 1);
+
+    panel.append("rect")
+        .attr("class", "table-header")
+        .attr("x", cardX)
+        .attr("y", tableY)
+        .attr("width", cardWidth)
+        .attr("height", headerHeight)
+        .attr("rx", 8)
+        .attr("fill", tableGreen);
+
+    panel.append("rect")
+        .attr("x", cardX)
+        .attr("y", tableY + headerHeight - 8)
+        .attr("width", cardWidth)
+        .attr("height", 8)
+        .attr("fill", tableGreen);
+
+    [
+        cardX + leftColumnWidth,
+        cardX + leftColumnWidth + innerWidth
+    ].forEach(x => {
+        panel.append("line")
+            .attr("class", "column-separator")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", tableY)
+            .attr("y2", tableY + tableHeight)
+            .attr("stroke", "rgba(47, 143, 58, 0.18)")
+            .attr("stroke-width", 1);
+    });
+
+    const headerFontSize = Math.max(11, Math.min(15, baseLabelSize * 1.02));
+    const headerIconSize = Math.max(16, Math.min(22, headerHeight * 0.42));
+    const levelHeaderText = "Relative Level";
+    const headerLabels = [
+        {
+            text: prettifyHeader(xColumn.name, "Category"),
+            x: cardX + 58,
+            anchor: "start",
+            icon: isTemporal ? "calendar" : "circle",
+            iconX: cardX + 24
+        },
+        {
+            text: levelHeaderText,
+            x: chartX + innerWidth / 2 + 14,
+            anchor: "middle",
+            icon: "pulse",
+            iconX: chartX + innerWidth / 2 - 92
+        },
+        {
+            text: "Value",
+            x: cardX + cardWidth - 22,
+            anchor: "end",
+            icon: "trend",
+            iconX: cardX + cardWidth - rightColumnWidth + 22
+        }
+    ];
+    headerLabels.forEach(label => {
+        appendMiniIcon(
+            panel,
+            label.icon,
+            label.iconX,
+            tableY + headerHeight / 2 - headerIconSize / 2,
+            headerIconSize,
+            "#ffffff",
+            "table-header-icon"
+        );
+    });
+    panel.selectAll(".table-header-label")
+        .data(headerLabels)
+        .enter()
+        .append("text")
+        .attr("class", "table-header-label")
+        .attr("x", d => d.x)
+        .attr("y", tableY + headerHeight / 2)
+        .attr("dy", "0.35em")
+        .attr("text-anchor", d => d.anchor)
+        .style("font-family", labelFamily)
+        .style("font-size", `${headerFontSize}px`)
+        .style("font-weight", 700)
+        .style("fill", "#ffffff")
+        .text(d => d.text);
+
+    const plot = svg.append("g")
+        .attr("transform", `translate(${chartX}, ${chartY})`);
+
+    plot.selectAll(".row-separator")
+        .data(sortedData)
+        .enter()
+        .append("line")
+        .attr("class", "row-separator")
+        .attr("x1", -leftColumnWidth)
+        .attr("x2", innerWidth + rightColumnWidth)
+        .attr("y1", d => (yScale(`${d.__dimension}__${d.__index}`) || 0) + yScale.bandwidth())
+        .attr("y2", d => (yScale(`${d.__dimension}__${d.__index}`) || 0) + yScale.bandwidth())
+        .attr("stroke", "rgba(47, 143, 58, 0.13)")
+        .attr("stroke-width", 1);
+
+    const rowGroups = plot.selectAll(".row")
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "row")
+        .attr("transform", d => `translate(0, ${yScale(`${d.__dimension}__${d.__index}`)})`);
+
+    rowGroups.append("rect")
+        .attr("class", "row-band")
+        .attr("x", -leftColumnWidth)
+        .attr("y", 0)
+        .attr("width", cardWidth)
+        .attr("height", yScale.bandwidth())
+        .attr("fill", (d, i) => i % 2 === 0 ? "rgba(47, 143, 58, 0.035)" : "transparent");
+
+    const trackHeight = Math.max(5, Math.min(9, yScale.bandwidth() * 0.18));
+    const dotRadius = Math.max(4.5, Math.min(7.5, yScale.bandwidth() * 0.2));
+    const valueFontSize = Math.max(8, Math.min(baseValueSize, yScale.bandwidth() * 0.35));
+    const rowCenter = yScale.bandwidth() / 2;
+    const trackStart = xScale(Math.max(0, minValue));
+    const trackEnd = xScale(maxValue);
+
+    rowGroups.append("line")
+        .attr("class", "dot-bar-track")
+        .attr("x1", trackStart)
+        .attr("x2", trackEnd)
+        .attr("y1", rowCenter)
+        .attr("y2", rowCenter)
+        .attr("stroke", "rgba(47, 143, 58, 0.11)")
+        .attr("stroke-width", trackHeight)
+        .attr("stroke-linecap", "round");
+
+    rowGroups.append("line")
+        .attr("class", "dot-bar bar")
+        .attr("x1", zeroX)
+        .attr("x2", d => xScale(d.__value))
+        .attr("y1", rowCenter)
+        .attr("y2", rowCenter)
+        .attr("stroke", "transparent")
+        .attr("stroke-width", 1)
+        .attr("stroke-linecap", "round")
+        .attr("opacity", 0);
+
+    const segmentGap = Math.max(7.5, trackHeight * 1.05);
+    const segmentWidth = Math.max(2.6, trackHeight * 0.38);
+    const segmentHeight = Math.max(8, trackHeight * 1.22);
+    rowGroups.each(function(d) {
+        const valueX = xScale(d.__value);
+        const startX = Math.min(zeroX, valueX);
+        const endX = Math.max(zeroX, valueX);
+        const span = Math.max(1, endX - startX);
+        const segmentXs = d3.range(startX + segmentGap * 0.55, Math.max(startX + segmentGap, endX - dotRadius * 0.65), segmentGap);
+        d3.select(this).selectAll(".dot-segment")
+            .data(segmentXs)
+            .enter()
+            .append("rect")
+            .attr("class", "dot-segment")
+            .attr("x", x => x - segmentWidth / 2)
+            .attr("y", rowCenter - segmentHeight / 2)
+            .attr("width", segmentWidth)
+            .attr("height", segmentHeight)
+            .attr("rx", segmentWidth / 2)
+            .attr("fill", x => d3.interpolateRgb(palePrimary, primaryColor)(Math.min(1, Math.max(0, (x - startX) / span))))
+            .attr("opacity", 0.96);
+    });
+
+    rowGroups.append("circle")
+        .attr("class", "dot mark")
+        .attr("cx", d => xScale(d.__value))
+        .attr("cy", rowCenter)
+        .attr("r", dotRadius)
+        .attr("fill", primaryColor)
+        .attr("stroke", variables.has_stroke ? darkPrimary : "#ffffff")
+        .attr("stroke-width", variables.has_stroke ? 1.4 : 1.8)
+        .style("filter", variables.has_shadow ? "url(#dot-shadow)" : "none");
+
+    rowGroups.each(function(d, rowIndex) {
+        const lines = wrappedLabels[rowIndex] || [d.__dimension];
+        const lineHeight = labelFontSize * 1.08;
+        const startY = rowCenter - ((lines.length - 1) * lineHeight) / 2;
+        appendMiniIcon(
+            d3.select(this),
+            isTemporal ? "calendar" : "circle",
+            -leftColumnWidth + 22,
+            rowCenter - 8,
+            16,
+            tableGreen,
+            "row-icon"
+        );
+        const label = d3.select(this).append("text")
+            .attr("class", "label")
+            .attr("x", -leftColumnWidth + 50)
+            .attr("y", startY)
+            .attr("text-anchor", "start")
+            .style("font-family", labelFamily)
+            .style("font-size", `${labelFontSize}px`)
+            .style("font-weight", labelWeight)
+            .style("fill", textColor);
+        lines.forEach((line, lineIndex) => {
+            label.append("tspan")
+                .attr("x", -leftColumnWidth + 50)
+                .attr("dy", lineIndex === 0 ? "0.35em" : `${lineHeight}px`)
+                .text(line);
+        });
+    });
+
+    rowGroups.each(function(d) {
+        const [valueNumber, valueSuffix] = splitValueLabel(formatWithUnit(d.__value, valueUnit), valueUnit);
+        const value = d3.select(this).append("text")
+            .attr("class", "value")
+            .attr("x", innerWidth + rightColumnWidth - 22)
+            .attr("y", rowCenter)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "end")
+            .style("font-family", valueFamily)
+            .style("font-size", `${valueFontSize}px`)
+            .style("fill", textColor);
+        value.append("tspan")
+            .attr("class", "value-number")
+            .style("font-weight", 700)
+            .text(valueNumber);
+        if (valueSuffix) {
+            value.append("tspan")
+                .attr("class", "value-unit")
+                .style("font-weight", valueWeight)
+                .style("fill", "rgba(31, 41, 55, 0.72)")
+                .text(` ${valueSuffix}`);
+        }
+    });
+
+    panel.append("rect")
+        .attr("class", "source-footer")
+        .attr("x", cardX)
+        .attr("y", footerY)
+        .attr("width", cardWidth)
+        .attr("height", footerHeight)
+        .attr("rx", 8)
+        .attr("fill", "rgba(255, 255, 255, 0.74)")
+        .attr("stroke", "rgba(47, 143, 58, 0.14)")
+        .attr("stroke-width", 1);
+
+    panel.append("circle")
+        .attr("class", "source-footer-icon")
+        .attr("cx", cardX + 30)
+        .attr("cy", footerY + footerHeight / 2)
+        .attr("r", 10)
+        .attr("fill", primaryColor)
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 2);
+
+    panel.append("text")
+        .attr("class", "source-footer-label")
+        .attr("x", cardX + 30)
+        .attr("y", footerY + footerHeight / 2)
+        .attr("dy", "0.35em")
+        .attr("text-anchor", "middle")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(9, baseValueSize * 0.86)}px`)
+        .style("font-weight", 700)
+        .style("fill", "#ffffff")
+        .text("i");
+
+    panel.append("text")
+        .attr("class", "source-footer-text")
+        .attr("x", cardX + 56)
+        .attr("y", footerY + footerHeight / 2)
+        .attr("dy", "0.35em")
+        .attr("text-anchor", "start")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(9, baseValueSize * 0.86)}px`)
+        .style("font-weight", valueWeight)
+        .style("fill", "rgba(31, 41, 55, 0.72)")
+        .text("Data values are generated from the provided source sample.");
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type21_horizontal_dot_bar_chart/horizontal_dot_bar_plain_chart_02.js

@@ -0,0 +1,587 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Dot Bar Chart",
+    "chart_name": "horizontal_dot_bar_plain_chart_02",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[5, 30], [0, 20]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": ["shadow",  "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 百分比竖条图实现 - 使用D3.js
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备阶段 ----------
+    
+    // 提取数据和配置
+    const jsonData = data;                           // 完整的JSON数据对象
+    const chartData = jsonData.data.data                 // 实际数据点数组  
+    const variables = jsonData.variables || {};      // 图表配置
+    const typography = jsonData.typography || {      // 字体设置，如果不存在则使用默认值
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || { 
+        text_color: "#333333",
+        other: { primary: "#FFBB33" }  // 默认橙黄色
+    };  
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 设置视觉效果变量的默认值
+    variables.has_rounded_corners = variables.has_rounded_corners !== undefined ? variables.has_rounded_corners : true;
+    variables.has_shadow = variables.has_shadow !== undefined ? variables.has_shadow : false;
+    variables.has_gradient = true; // 确保渐变被启用
+    variables.has_stroke = variables.has_stroke !== undefined ? variables.has_stroke : false;
+    variables.has_spacing = variables.has_spacing !== undefined ? variables.has_spacing : true;
+    
+    // 数值格式化函数
+
+    // 计算类别label布局（统一字号+智能换行+测宽+margin.left计算）
+    const buildDimLabelLayout = (params) => {
+        const {
+            containerSelector,
+            labels,
+            fontConfig,
+            maxWidth,
+            maxHeight,
+            lineSpacing,
+            targetFontSize
+        } = params;
+
+        const tempMeasureSvg = d3.select(containerSelector)
+            .append("svg")
+            .attr("width", 0)
+            .attr("height", 0)
+            .style("visibility", "hidden");
+
+        const measureWidth = (text, fontSize) => chartUtils.text.measure(tempMeasureSvg, text, {
+            fontFamily: fontConfig.font_family,
+            fontSize,
+            fontWeight: fontConfig.font_weight
+        }).width;
+
+        const breakLongWord = (word, maxWidth, fontSize) => {
+            const lines = [];
+            let currentLine = "";
+            for (let i = 0; i < word.length; i++) {
+                const char = word[i];
+                const testWithChar = currentLine + char;
+                const testWithHyphen = currentLine + "-";
+                if (measureWidth(testWithChar, fontSize) > maxWidth && currentLine !== "") {
+                    lines.push(testWithHyphen);
+                    currentLine = char;
+                } else {
+                    currentLine = testWithChar;
+                }
+            }
+            if (currentLine !== "") lines.push(currentLine);
+            return lines.length > 0 ? lines : [word];
+        };
+
+        const breakWordIntoCurrentLine = (currentLine, word, maxWidth, fontSize) => {
+            const completedLines = [];
+            let chars = "";
+            for (let i = 0; i < word.length; i++) {
+                const char = word[i];
+                const testLine = currentLine + chars + char;
+                const testLineWithHyphen = currentLine + chars + "-";
+                if (measureWidth(testLine, fontSize) > maxWidth) {
+                    if (chars === "") {
+                        completedLines.push(currentLine);
+                        const brokenLines = breakLongWord(word, maxWidth, fontSize);
+                        return {
+                            completedLines: [...completedLines, ...brokenLines.slice(0, -1)],
+                            remaining: brokenLines[brokenLines.length - 1]
+                        };
+                    }
+                    completedLines.push(testLineWithHyphen);
+                    const remaining = word.substring(i);
+                    const remainingWidth = measureWidth(remaining, fontSize);
+                    if (remainingWidth > maxWidth) {
+                        const brokenLines = breakLongWord(remaining, maxWidth, fontSize);
+                        return {
+                            completedLines: [...completedLines, ...brokenLines.slice(0, -1)],
+                            remaining: brokenLines[brokenLines.length - 1]
+                        };
+                    }
+                    return { completedLines, remaining };
+                }
+                chars += char;
+            }
+            return { completedLines, remaining: currentLine + chars };
+        };
+
+        const wrapSmart = (text, maxWidth, fontSize) => {
+            const words = String(text || "").split(/\s+/).filter(w => w !== "");
+            if (words.length === 0) return [String(text || "")];
+
+            const lines = [];
+            let currentLine = "";
+
+            for (let i = 0; i < words.length; i++) {
+                const word = words[i];
+                const separator = currentLine === "" ? "" : " ";
+                const testLine = currentLine + separator + word;
+                if (measureWidth(testLine, fontSize) <= maxWidth) {
+                    currentLine = testLine;
+                    continue;
+                }
+
+                if (currentLine === "") {
+                    const broken = breakLongWord(word, maxWidth, fontSize);
+                    lines.push(...broken.slice(0, -1));
+                    currentLine = broken[broken.length - 1];
+                    continue;
+                }
+
+                const utilization = measureWidth(currentLine, fontSize) / maxWidth;
+                if (utilization < 0.5) {
+                    const result = breakWordIntoCurrentLine(currentLine, word, maxWidth, fontSize);
+                    lines.push(...result.completedLines);
+                    currentLine = result.remaining;
+                    continue;
+                }
+
+                lines.push(currentLine);
+                if (measureWidth(word, fontSize) > maxWidth) {
+                    const broken = breakLongWord(word, maxWidth, fontSize);
+                    lines.push(...broken.slice(0, -1));
+                    currentLine = broken[broken.length - 1];
+                } else {
+                    currentLine = word;
+                }
+            }
+
+            if (currentLine !== "") lines.push(currentLine);
+
+            const out = [...lines];
+            for (let i = 1; i < out.length; i++) {
+                const prevTrim = (out[i - 1] || "").trimEnd();
+                if (!prevTrim.endsWith("-")) continue;
+
+                const curTrim = String(out[i] || "").trim();
+                const match = curTrim.match(/^([A-Za-z])(\s+.*)?$/);
+                if (!match) continue;
+
+                const firstLetter = match[1];
+                const rest = (match[2] || "").trimStart();
+                const candidatePrev = prevTrim.slice(0, -1) + firstLetter;
+                if (measureWidth(candidatePrev, fontSize) > maxWidth) continue;
+
+                out[i - 1] = candidatePrev;
+                if (rest === "") {
+                    out.splice(i, 1);
+                    i -= 1;
+                } else {
+                    out[i] = rest;
+                }
+            }
+
+            return out.length > 0 ? out : [String(text || "")];
+        };
+
+        const fitsAll = (fontSize) => {
+            const lineHeight = fontSize * lineSpacing;
+            for (let i = 0; i < labels.length; i++) {
+                const labelText = String(labels[i] || "");
+                const lines = wrapSmart(labelText, maxWidth, fontSize);
+                const totalHeight = (lines.length <= 1)
+                    ? fontSize
+                    : ((lines.length - 1) * lineHeight + fontSize);
+                if (totalHeight > maxHeight) return false;
+            }
+            return true;
+        };
+
+        let low = 1;
+        let high = targetFontSize;
+        for (let i = 0; i < 18; i++) {
+            const mid = (low + high) / 2;
+            if (fitsAll(mid)) low = mid;
+            else high = mid;
+        }
+
+        const bestFontSize = low;
+        const lineHeight = bestFontSize * lineSpacing;
+        const dimLabelConfig = {};
+        let maxLabelWidth = 0;
+
+        for (let i = 0; i < labels.length; i++) {
+            const label = labels[i];
+            const labelText = String(label || "");
+            const lines = wrapSmart(labelText, maxWidth, bestFontSize);
+            dimLabelConfig[label] = {
+                fontSize: bestFontSize,
+                lineHeight: lineHeight,
+                lines: lines,
+                needsWrapping: lines.length > 1
+            };
+            for (let j = 0; j < lines.length; j++) {
+                maxLabelWidth = Math.max(maxLabelWidth, measureWidth(lines[j], bestFontSize));
+            }
+        }
+
+        tempMeasureSvg.remove();
+        return { dimLabelConfig, maxLabelWidth, fontSize: bestFontSize, lineHeight };
+    };
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距
+    const margin = {
+        top: 90,      // 顶部留出标题空间
+        right: 30,    // 右侧足够显示数值
+        bottom: 40,   // 底部边距
+        left: 100     // 左侧足够空间用于维度标签
+    };
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    // 根据数据列顺序提取字段名
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key || "dimension";
+    const valueField = chartUtils.schema.channel(jsonData, "y").key || "value";
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; // 默认为百分比
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit || "";
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit || "";
+    }
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 获取唯一维度值并按数值降序排列数据
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const maxValue_ = d3.max(chartData, d => Math.abs(+d[valueField]));
+    
+    // 计算每个棒子表示的单位数量
+    // 目标：最大值对应的棒子数量在20-50之间
+    const targetMaxBars = 35; // 选择目标范围(20-50)的中间值
+    const unitPerBar = Math.ceil(maxValue_ / targetMaxBars);
+    
+    // 为每个数据点计算应显示的棒子数量
+    chartData.forEach(d => {
+        // 原始数值保存在 valueField
+        // 转换后的棒子数量保存在 valueField_
+        d[`${valueField}_`] = Math.max(0.1, +d[valueField] / unitPerBar);
+    });
+    
+    // 按数值降序排序数据
+    const sortedData = [...chartData].sort((a, b) => +b[valueField] - +a[valueField]);
+    const sortedDimensions = sortedData.map(d => d[dimensionField]);
+
+    // ---------- 5. 布局计算和字体调整 ----------
+
+    const dimLabelMaxWidth = width * 0.25;
+    const dimLabelLineSpacing = 1.01;
+    const targetLabelFontSize = parseFloat(typography.label.font_size) || 12;
+
+    // 计算内部绘图区域尺寸（初始值）
+    let innerWidth = width - margin.left - margin.right;
+    let innerHeight = height - margin.top - margin.bottom;
+
+    // 计算行间距
+    const rowPadding = variables.has_spacing ? 0.3 : 0.2;
+
+    // Y轴比例尺（用于维度）
+    const yScale = d3.scaleBand()
+        .domain(sortedDimensions)
+        .range([0, innerHeight])
+        .padding(rowPadding);
+
+    const rowHeight = yScale.bandwidth();
+
+    // 调用智能换行布局计算
+    const dimLabelResult = buildDimLabelLayout({
+        containerSelector: containerSelector,
+        labels: sortedDimensions,
+        fontConfig: typography.label,
+        maxWidth: dimLabelMaxWidth,
+        maxHeight: rowHeight,
+        lineSpacing: dimLabelLineSpacing,
+        targetFontSize: targetLabelFontSize
+    });
+
+    const { dimLabelConfig, maxLabelWidth } = dimLabelResult;
+
+    // 根据标签宽度调整左边距
+    margin.left = maxLabelWidth + 15;
+
+    // 重新计算内部绘图区域尺寸
+    innerWidth = width - margin.left - margin.right;
+    innerHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 6. 创建SVG容器 ----------
+    
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    
+    // 添加defs用于视觉效果
+    const defs = svg.append("defs");
+    
+    // 添加阴影滤镜（如果启用）
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("width", "200%")
+            .attr("height", "200%");
+        
+        filter.append("feGaussianBlur")
+            .attr("in", "SourceAlpha")
+            .attr("stdDeviation", 2);
+        
+        filter.append("feOffset")
+            .attr("dx", 2)
+            .attr("dy", 2)
+            .attr("result", "offsetblur");
+        
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+    
+    // 获取主要颜色
+    const primaryColor = colorResolver.other("primary", { fallback: "#FFBB33" }).value;
+    
+    // 创建每10个棒子一组的渐变定义
+    const maxGroups = 10; // 假设最多10组（即最大100%）
+    for (let group = 0; group < maxGroups; group++) {
+        // 为每组创建渐变
+        const gradient = defs.append("linearGradient")
+            .attr("id", `bar-gradient-${group}`)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "0%");
+        
+        // 计算此组的亮度偏移
+        // 随着组号增加，整体颜色变深
+        const groupDarkenFactor = 0.2 * group;
+        
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(primaryColor, { mode: "brighter", amount: 1.0 - groupDarkenFactor }));
+        
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(primaryColor, { mode: "darker", amount: 0.0 + groupDarkenFactor }));
+    }
+
+    // ---------- 7. 创建比例尺 ----------
+
+    // 计算最大值，确保所有棒子能够显示
+    const maxValue = d3.max(chartData, d => +d[`${valueField}_`]);
+    
+    // 计算适合当前宽度的棒子尺寸
+    const availableWidth = innerWidth;
+    
+    // 计算合适的棒子尺寸，确保所有数据都能显示
+    // 默认值
+    const defaultBarWidth = 30;
+    const defaultBarSpacing = 5;
+    const largerGroupSpacing = 15; // 每10个棒子后的额外间距
+    
+    // 棒子组大小（每组10个）
+    const groupSize = 5;
+    
+    // 计算一组10个棒子需要的宽度（包括普通间距）
+    const groupBaseWidth = groupSize * defaultBarWidth + (groupSize - 1) * defaultBarSpacing;
+    
+    // 计算需要多少组
+    const requiredGroups = Math.ceil(maxValue / groupSize);
+    
+    // 计算总需要宽度（包括组间额外间距）
+    const requiredWidth = requiredGroups * groupBaseWidth + (requiredGroups - 1) * largerGroupSpacing;
+    
+    // 如果需要的宽度大于可用宽度，则缩放
+    let barWidth, barSpacing, groupSpacing;
+    
+    if (requiredWidth > availableWidth) {
+        const scaleFactor = availableWidth / requiredWidth;
+        barWidth = Math.max(3, Math.floor(defaultBarWidth * scaleFactor));
+        barSpacing = Math.max(1, Math.floor(defaultBarSpacing * scaleFactor));
+        groupSpacing = Math.max(3, Math.floor(largerGroupSpacing * scaleFactor));
+    } else {
+        barWidth = defaultBarWidth;
+        barSpacing = defaultBarSpacing;
+        groupSpacing = largerGroupSpacing;
+    }
+    
+    // ---------- 8. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    
+    
+    // ---------- 10. 绘制百分比竖条图和标签 ----------
+    
+    // 为每个维度绘制竖条组和标签
+    sortedDimensions.forEach(dimension => {
+        const dataPoint = chartData.find(d => d[dimensionField] === dimension);
+        
+        if (dataPoint) {
+            const rowHeight = yScale.bandwidth();
+            const barHeight = rowHeight;  // 竖条高度为行高
+            const barY = yScale(dimension) + (rowHeight - barHeight) / 2;  // 竖条垂直居中
+            const barCount = Math.floor(dataPoint[`${valueField}_`]);  // 向下取整到整数
+            const partialBar = dataPoint[`${valueField}_`] - barCount;  // 计算小数部分
+
+            // 绘制竖条组
+            for (let i = 0; i < barCount; i++) {
+                // 计算当前棒子所在的组（每5个一组）
+                const groupIndex = Math.floor(i / groupSize);
+                // 计算在当前组内的索引（0-4）
+                const inGroupIndex = i % groupSize;
+                
+                // 计算x位置（考虑组间的额外间距）
+                const barX = (groupIndex * (groupSize * (barWidth + barSpacing) + groupSpacing)) + 
+                            (inGroupIndex * (barWidth + barSpacing));
+                
+                // 获取当前组的渐变ID
+                const gradientId = `bar-gradient-${groupIndex}`;
+                
+                // 绘制单个竖条
+                g.append("image")
+                    .attr("x", barX)
+                    .attr("y", barY)
+                    .attr("width", barWidth)
+                    .attr("height", barHeight)
+                    .attr("xlink:href", jsonData.images.field[dataPoint[dimensionField]]);
+            }
+            
+            // 如果有小数部分，绘制部分宽度的最后一个竖条
+            if (partialBar > 0) {
+                const groupIndex = Math.floor(barCount / groupSize);
+                const inGroupIndex = barCount % groupSize;
+                
+                const barX = (groupIndex * (groupSize * (barWidth + barSpacing) + groupSpacing)) + 
+                            (inGroupIndex * (barWidth + barSpacing));
+                
+                // 使用SVG裁剪方式实现部分图像显示
+                const imageWidth = barWidth * partialBar;
+                
+                // 方法一：使用裁剪路径实现部分图像显示
+                // 创建唯一的裁剪路径ID
+                const clipPathId = `clip-path-${dimension.replace(/\s+/g, '-')}-${barCount}`;
+                
+                // 在defs中定义裁剪路径 - 注意：clipPath采用用户坐标系统
+                defs.append("clipPath")
+                    .attr("id", clipPathId)
+                    .attr("clipPathUnits", "userSpaceOnUse")  // 使用用户坐标系而非对象坐标系
+                    .append("rect")
+                    .attr("x", barX)  // 使用与图像相同的x坐标
+                    .attr("y", barY)  // 使用与图像相同的y坐标
+                    .attr("width", imageWidth)
+                    .attr("height", barHeight);
+                
+                // 使用裁剪路径显示部分图像
+                g.append("image")
+                    .attr("x", barX)
+                    .attr("y", barY)
+                    .attr("width", barWidth)  // 保持原始宽度
+                    .attr("height", barHeight)
+                    .attr("clip-path", `url(#${clipPathId})`)
+                    .attr("xlink:href", jsonData.images.field[dataPoint[dimensionField]]);
+            }
+
+            // 添加维度标签（支持多行）
+            const labelConfig = dimLabelConfig[dimension];
+            const centerY = yScale(dimension) + rowHeight / 2;
+            const labelGroup = g.append("text")
+                .attr("x", -10)
+                .attr("text-anchor", "end")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", `${labelConfig.fontSize}px`)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value);
+
+            if (labelConfig.needsWrapping) {
+                const lineHeight = labelConfig.lineHeight;
+                const startY = centerY - ((labelConfig.lines.length - 1) * lineHeight) / 2;
+                labelGroup.attr("y", startY);
+
+                labelConfig.lines.forEach((line, i) => {
+                    labelGroup.append("tspan")
+                        .attr("x", -10)
+                        .attr("dy", i === 0 ? "0.35em" : `${lineHeight}`)
+                        .text(line);
+                });
+            } else {
+                labelGroup
+                    .attr("y", centerY)
+                    .attr("dy", "0.35em")
+                    .text(labelConfig.lines[0]);
+            }
+
+            // 计算动态字体大小（条形高度的60%）
+            const dynamicFontSize = `${barHeight * 0.8}px`;
+            
+            // 计算最后一个棒子的位置，用于放置数值标签
+            const lastGroupIndex = Math.floor(barCount / groupSize);
+            const lastInGroupIndex = barCount % groupSize;
+            let lastBarX = (lastGroupIndex * (groupSize * (barWidth + barSpacing) + groupSpacing)) + 
+                           (lastInGroupIndex * (barWidth + barSpacing));
+            
+            // 如果有小数部分，调整标签位置
+            if (partialBar > 0) {
+                lastBarX += barWidth * partialBar;
+            } else {
+                lastBarX += barWidth;
+            }
+            
+            g.append("text")
+                .attr("x", lastBarX + 5)
+                .attr("y", yScale(dimension) + rowHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "start")
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", dynamicFontSize)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .text(valueUnit ? 
+                    `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` : 
+                    `${chartUtils.format.autoText(+dataPoint[valueField])}`);
+        }
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}