Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type36_range_area_chart/range_area_chart_icons_01.js

@@ -0,0 +1,580 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Range Area Chart",
+    "chart_name": "range_area_chart_icons_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 2]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "comparison"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const fontSize = chartUtils.text.fontSize;
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const yColumn = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField });
+    const yDescription = yColumn.description || yField;
+    const yUnit = yColumn.unit || "";
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    const width = variables.width || 600;
+    const height = variables.height || 600;
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+
+    const defs = svg.append("defs");
+    const shadowId = `range-panel-shadow-${Math.round(width)}-${Math.round(height)}`;
+    const shadow = defs.append("filter")
+        .attr("id", shadowId)
+        .attr("x", "-8%")
+        .attr("y", "-8%")
+        .attr("width", "116%")
+        .attr("height", "116%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 5)
+        .attr("flood-color", "#0b1b2e")
+        .attr("flood-opacity", 0.12);
+
+    const panel = {
+        x: width * 0.025,
+        y: height * 0.035,
+        w: width * 0.95,
+        h: height * 0.92
+    };
+    const rightLaneW = Math.max(78, panel.w * 0.16);
+    const plot = {
+        x: panel.x + panel.w * 0.075,
+        y: panel.y + panel.h * 0.31,
+        w: panel.w - panel.w * 0.075 - rightLaneW - panel.w * 0.045,
+        h: panel.h * 0.58
+    };
+    plot.bottom = plot.y + plot.h;
+    plot.right = plot.x + plot.w;
+
+    svg.append("rect")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.w)
+        .attr("height", panel.h)
+        .attr("rx", 16)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#d9e4e6")
+        .attr("stroke-width", 1)
+        .attr("filter", `url(#${shadowId})`);
+
+    const slot = svg.append("g")
+        .attr("class", "asset-slot panel-header-icon-slot")
+        .attr("data-asset-slot", "panel-header-icon")
+        .attr("data-asset-anchor", "panel-header-left")
+        .attr("data-asset-bbox", `${Math.round(panel.x + 21)},${Math.round(panel.y + 27)},52,52`)
+        .attr("data-collision-policy", "avoid-panel-title-legend-plot")
+        .attr("data-asset-source-policy", "neutral_placeholder")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+
+    slot.append("circle")
+        .attr("cx", panel.x + 47)
+        .attr("cy", panel.y + 53)
+        .attr("r", 26)
+        .attr("fill", "#078b8b")
+        .attr("opacity", 0.95);
+    slot.append("circle")
+        .attr("cx", panel.x + 47)
+        .attr("cy", panel.y + 53)
+        .attr("r", 16)
+        .attr("fill", "none")
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 2)
+        .attr("stroke-dasharray", "3 4")
+        .attr("opacity", 0.85);
+
+    const titleX = panel.x + 84;
+    const panelTitle = `${yDescription}`;
+    const years = chartData.map(d => chartUtils.format.parseDate(d[xField]).getFullYear()).filter(d => Number.isFinite(d));
+    const yearLabel = years.length ? `${d3.min(years)}-${d3.max(years)}` : "";
+
+    svg.append("text")
+        .attr("x", titleX)
+        .attr("y", panel.y + 46)
+        .attr("fill", "#071a33")
+        .style("font-family", "Arial, sans-serif")
+        .style("font-size", `${fontSize(14)}px`)
+        .style("font-weight", 800)
+        .text(panelTitle.toUpperCase());
+
+    if (yearLabel) {
+        svg.append("text")
+            .attr("x", panel.x + panel.w - 116)
+            .attr("y", panel.y + 46)
+            .attr("fill", "#324255")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(14)}px`)
+            .style("font-weight", 400)
+            .text(yearLabel);
+    }
+
+    const groupNames = [...new Set(chartData.map(d => d[groupField]))];
+    const groupAverages = groupNames.map(group => {
+        const groupRows = chartData.filter(d => d[groupField] === group);
+        return { group, avg: d3.mean(groupRows, d => +d[yField]) };
+    }).sort((a, b) => d3.descending(a.avg, b.avg));
+
+    const selectedGroups = groupAverages.slice(0, 2).map(d => d.group);
+    if (selectedGroups.length < 2) {
+        return svg.node();
+    }
+
+    const parseX = value => {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed;
+        if (Number.isFinite(+value)) return new Date(+value, 0, 1);
+        return new Date(value);
+    };
+
+    const grouped = selectedGroups.map(group => ({
+        group,
+        rows: chartData
+            .filter(d => d[groupField] === group)
+            .map(d => ({ ...d, __x: parseX(d[xField]), __y: +d[yField] }))
+            .filter(d => d.__x instanceof Date && !Number.isNaN(d.__x.getTime()) && Number.isFinite(d.__y))
+            .sort((a, b) => d3.ascending(a.__x, b.__x))
+    }));
+
+    const allRows = grouped.flatMap(d => d.rows);
+    const yMinRaw = d3.min(allRows, d => d.__y);
+    const yMaxRaw = d3.max(allRows, d => d.__y);
+    const yMin = Math.floor(yMinRaw / 5) * 5;
+    const yMax = Math.ceil(yMaxRaw / 5) * 5;
+    const yDomain = yMin === yMax ? [yMin - 1, yMax + 1] : [yMin, yMax];
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(allRows, d => d.__x))
+        .range([plot.x, plot.right]);
+    const yScale = d3.scaleLinear()
+        .domain(yDomain)
+        .nice(5)
+        .range([plot.bottom, plot.y]);
+
+    const warm = "#f2a000";
+    const teal = "#078b8b";
+    const series = [
+        {
+            ...grouped[0],
+            color: warm,
+            fill: "#f8d46b",
+            labelPosition: "above"
+        },
+        {
+            ...grouped[1],
+            color: teal,
+            fill: "#88d8d5",
+            labelPosition: "above"
+        }
+    ];
+
+    const legendY = panel.y + 88;
+    series.forEach((s, i) => {
+        const lx = titleX + i * Math.min(150, panel.w * 0.25);
+        svg.append("line")
+            .attr("x1", lx)
+            .attr("y1", legendY)
+            .attr("x2", lx + 28)
+            .attr("y2", legendY)
+            .attr("stroke", s.color)
+            .attr("stroke-width", 5)
+            .attr("stroke-linecap", "round");
+        svg.append("text")
+            .attr("x", lx + 38)
+            .attr("y", legendY + 5)
+            .attr("fill", "#102238")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(14)}px`)
+            .text(s.group);
+    });
+
+    const yAxisLabel = `${chartUtils.schema.columnField(dataColumns, 1)}${yUnit ? ` (${yUnit})` : ""}`;
+    svg.append("text")
+        .attr("x", plot.x - 34)
+        .attr("y", plot.y - 18)
+        .attr("fill", "#102238")
+        .style("font-family", "Arial, sans-serif")
+        .style("font-size", `${fontSize(12)}px`)
+        .text(yAxisLabel);
+
+    const yTicks = yScale.ticks(5);
+    yTicks.forEach(tick => {
+        svg.append("line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.right)
+            .attr("y1", yScale(tick))
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#d8e0e5")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "5 5");
+        svg.append("text")
+            .attr("x", plot.x - 11)
+            .attr("y", yScale(tick) + 4)
+            .attr("text-anchor", "end")
+            .attr("fill", "#102238")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(12)}px`)
+            .text(chartUtils.format.autoText(+tick) + (yUnit === "%" ? "%" : ""));
+    });
+
+    const xTicks = allRows.map(d => d.__x)
+        .filter((d, i, arr) => arr.findIndex(v => +v === +d) === i)
+        .sort((a, b) => d3.ascending(a, b));
+    const maxVisibleXTicks = 7;
+    const tickStep = xTicks.length > maxVisibleXTicks
+        ? Math.ceil((xTicks.length - 1) / (maxVisibleXTicks - 1))
+        : 1;
+    const visibleXTicks = xTicks.filter((tick, i) =>
+        i === 0 || i === xTicks.length - 1 || i % tickStep === 0
+    );
+    visibleXTicks.forEach(tick => {
+        const x = xScale(tick);
+        svg.append("line")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", plot.y)
+            .attr("y2", plot.bottom)
+            .attr("stroke", "#e2e8ec")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "5 5");
+        svg.append("text")
+            .attr("x", x)
+            .attr("y", plot.bottom + 24)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#102238")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(13)}px`)
+            .text(tick.getFullYear());
+    });
+
+    svg.append("line")
+        .attr("x1", plot.x)
+        .attr("x2", plot.right)
+        .attr("y1", plot.bottom)
+        .attr("y2", plot.bottom)
+        .attr("stroke", "#102238")
+        .attr("stroke-width", 1.4);
+    svg.append("line")
+        .attr("x1", plot.x)
+        .attr("x2", plot.x)
+        .attr("y1", plot.y)
+        .attr("y2", plot.bottom)
+        .attr("stroke", "#102238")
+        .attr("stroke-width", 1.4);
+
+    const area = d3.area()
+        .x(d => xScale(d.__x))
+        .y0(plot.bottom)
+        .y1(d => yScale(d.__y))
+        .curve(d3.curveLinear);
+    const line = d3.line()
+        .x(d => xScale(d.__x))
+        .y(d => yScale(d.__y))
+        .curve(d3.curveLinear);
+
+    series.forEach(s => {
+        svg.append("path")
+            .datum(s.rows)
+            .attr("d", area)
+            .attr("fill", s.fill)
+            .attr("opacity", 0.28);
+    });
+
+    series.forEach(s => {
+        svg.append("path")
+            .datum(s.rows)
+            .attr("d", line)
+            .attr("fill", "none")
+            .attr("stroke", s.color)
+            .attr("stroke-width", 4)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round");
+    });
+
+    const cardW = Math.max(72, rightLaneW * 0.78);
+    const cardH = 64;
+    const cardX = panel.x + panel.w - cardW - 13;
+    const markerR = 7;
+    const placedLabelBoxes = [];
+    const estimateLabelBox = (label, x, y, anchor) => {
+        const w = String(label).length * fontSize(14) * 0.62;
+        const h = fontSize(14) + 4;
+        const left = anchor === "end" ? x - w : anchor === "start" ? x : x - w / 2;
+        return { x0: left - 3, y0: y - h + 1, x1: left + w + 3, y1: y + 4 };
+    };
+    const boxesOverlap = (a, b) => !(a.x1 < b.x0 || a.x0 > b.x1 || a.y1 < b.y0 || a.y0 > b.y1);
+    const shouldHideDenseDuplicate = (rows, i, xPositions) => {
+        if (rows.length <= 10 || i === 0 || i === rows.length - 1) return false;
+        const value = Math.round(rows[i].__y);
+        const prevSame = Math.round(rows[i - 1].__y) === value;
+        const nextSame = Math.round(rows[i + 1].__y) === value;
+        const closePrev = Math.abs(xPositions[i] - xPositions[i - 1]) < 30;
+        const closeNext = Math.abs(xPositions[i + 1] - xPositions[i]) < 30;
+        return prevSame && nextSame && (closePrev || closeNext);
+    };
+    const placeValueLabel = (s, d, i, xPositions) => {
+        const label = Math.round(d.__y);
+        const x = xPositions[i];
+        const y = yScale(d.__y);
+        const isLast = i === s.rows.length - 1;
+        if (shouldHideDenseDuplicate(s.rows, i, xPositions)) return;
+
+        const anchor = isLast ? "end" : "middle";
+        const labelX = isLast ? x - 10 : x;
+        const candidates = [
+            Math.max(plot.y + 14, y - 15),
+            Math.max(plot.y + 14, y - 29),
+            Math.min(plot.bottom - 8, y + 25),
+            Math.max(plot.y + 14, y - 43)
+        ];
+        let chosen = null;
+        for (const candidateY of candidates) {
+            const box = estimateLabelBox(label, labelX, candidateY, anchor);
+            const insidePlot = box.x0 >= plot.x - 18 && box.x1 <= cardX - 6 && box.y0 >= plot.y - 4 && box.y1 <= plot.bottom + 2;
+            if (insidePlot && !placedLabelBoxes.some(other => boxesOverlap(box, other))) {
+                chosen = { y: candidateY, box };
+                break;
+            }
+        }
+        if (!chosen && (i === 0 || isLast || i % 2 === 0)) {
+            const fallbackY = candidates[0];
+            const box = estimateLabelBox(label, labelX, fallbackY, anchor);
+            if (!placedLabelBoxes.some(other => boxesOverlap(box, other))) {
+                chosen = { y: fallbackY, box };
+            }
+        }
+        if (!chosen) return;
+        placedLabelBoxes.push(chosen.box);
+
+        svg.append("text")
+            .attr("x", labelX)
+            .attr("y", chosen.y)
+            .attr("text-anchor", anchor)
+            .attr("fill", s.color)
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(14)}px`)
+            .style("font-weight", 800)
+            .text(label);
+    };
+
+    series.forEach(s => {
+        const xPositions = s.rows.map(d => xScale(d.__x));
+        s.rows.forEach((d, i) => {
+            const x = xScale(d.__x);
+            const y = yScale(d.__y);
+            svg.append("circle")
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", markerR)
+                .attr("fill", s.color)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 3);
+        });
+        s.rows.forEach((d, i) => placeValueLabel(s, d, i, xPositions));
+    });
+
+    const endpointLabelLines = label => {
+        const normalized = String(label)
+            .toUpperCase()
+            .replace(/\bMANAGEMENT\b/g, "MGMT")
+            .replace(/\bAND\b/g, "&");
+        const words = normalized.split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const trial = current ? `${current} ${word}` : word;
+            if (current && trial.length > 11) {
+                lines.push(current);
+                current = word;
+            } else {
+                current = trial;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length > 2) {
+            return [lines[0], lines.slice(1).join(" ")];
+        }
+        return lines.length ? lines : [normalized];
+    };
+    const lastItems = series.map(s => {
+        const point = s.rows[s.rows.length - 1];
+        return {
+            series: s,
+            point,
+            x: xScale(point.__x),
+            y: yScale(point.__y),
+            cardY: yScale(point.__y) - cardH / 2
+        };
+    }).sort((a, b) => d3.ascending(a.y, b.y));
+
+    const minGap = 18;
+    if (lastItems.length === 2 && lastItems[1].cardY < lastItems[0].cardY + cardH + minGap) {
+        const mid = (lastItems[0].cardY + lastItems[1].cardY + cardH) / 2;
+        lastItems[0].cardY = mid - cardH - minGap / 2;
+        lastItems[1].cardY = mid + minGap / 2;
+    }
+    lastItems.forEach(item => {
+        item.cardY = Math.max(panel.y + 104, Math.min(panel.y + panel.h - cardH - 18, item.cardY));
+        item.cardCenterY = item.cardY + cardH / 2;
+    });
+
+    lastItems.forEach(item => {
+        svg.append("line")
+            .attr("x1", item.x + markerR)
+            .attr("x2", cardX)
+            .attr("y1", item.y)
+            .attr("y2", item.cardCenterY)
+            .attr("stroke", item.series.color)
+            .attr("stroke-width", 2)
+            .attr("stroke-linecap", "round");
+
+        svg.append("rect")
+            .attr("x", cardX)
+            .attr("y", item.cardY)
+            .attr("width", cardW)
+            .attr("height", cardH)
+            .attr("rx", 10)
+            .attr("fill", item.series.color === warm ? "#fff7df" : "#e7fbfa")
+            .attr("stroke", item.series.color)
+            .attr("stroke-width", 2);
+
+        const labelLines = endpointLabelLines(item.series.group);
+        const labelFont = labelLines.some(line => line.length > 11) ? 7.2 : 8.2;
+        const labelGroup = svg.append("text")
+            .attr("x", cardX + cardW / 2)
+            .attr("y", item.cardY + (labelLines.length > 1 ? 11 : 16))
+            .attr("text-anchor", "middle")
+            .attr("fill", "#102238")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(labelFont)}px`)
+            .style("font-weight", 800);
+        labelLines.forEach((lineText, idx) => {
+            labelGroup.append("tspan")
+                .attr("x", cardX + cardW / 2)
+                .attr("dy", idx === 0 ? 0 : 9)
+                .attr("textLength", lineText.length > 12 ? cardW - 10 : null)
+                .attr("lengthAdjust", lineText.length > 12 ? "spacingAndGlyphs" : null)
+                .text(lineText);
+        });
+
+        svg.append("text")
+            .attr("x", cardX + cardW / 2)
+            .attr("y", item.cardY + (labelLines.length > 1 ? 43 : 40))
+            .attr("text-anchor", "middle")
+            .attr("fill", item.series.color)
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(25)}px`)
+            .style("font-weight", 900)
+            .text(`${Math.round(item.point.__y)}${yUnit === "%" ? "%" : ""}`);
+
+        svg.append("text")
+            .attr("x", cardX + cardW / 2)
+            .attr("y", item.cardY + 58)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#102238")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(10)}px`)
+            .text(`in ${item.point.__x.getFullYear()}`);
+    });
+
+    const topItem = lastItems[0];
+    const bottomItem = lastItems[lastItems.length - 1];
+    const ratio = bottomItem && topItem ? (topItem.point.__y / bottomItem.point.__y) : null;
+    if (ratio && Number.isFinite(ratio)) {
+        const guideX = cardX + cardW / 2;
+        const guideTop = topItem.cardY + cardH + 7;
+        const guideBottom = bottomItem.cardY - 7;
+        const badgeR = 24;
+        const badgeY = (guideTop + guideBottom) / 2;
+
+        if (guideBottom - guideTop > badgeR * 2.4) {
+            svg.append("line")
+                .attr("x1", guideX)
+                .attr("x2", guideX)
+                .attr("y1", guideTop)
+                .attr("y2", guideBottom)
+                .attr("stroke", "#87909a")
+                .attr("stroke-width", 2)
+                .attr("stroke-dasharray", "5 5");
+            svg.append("path")
+                .attr("d", `M${guideX - 5},${guideTop + 7} L${guideX},${guideTop} L${guideX + 5},${guideTop + 7}`)
+                .attr("fill", "none")
+                .attr("stroke", "#87909a")
+                .attr("stroke-width", 2)
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round");
+            svg.append("path")
+                .attr("d", `M${guideX - 5},${guideBottom - 7} L${guideX},${guideBottom} L${guideX + 5},${guideBottom - 7}`)
+                .attr("fill", "none")
+                .attr("stroke", "#87909a")
+                .attr("stroke-width", 2)
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round");
+            svg.append("circle")
+                .attr("cx", guideX)
+                .attr("cy", badgeY)
+                .attr("r", badgeR)
+                .attr("fill", "#ffffff")
+                .attr("stroke", "#d8e0e5")
+                .attr("stroke-width", 2);
+            svg.append("text")
+                .attr("x", guideX)
+                .attr("y", badgeY - 2)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#102238")
+                .style("font-family", "Arial, sans-serif")
+                .style("font-size", `${fontSize(20)}px`)
+                .style("font-weight", 900)
+                .text(ratio.toFixed(1));
+            svg.append("text")
+                .attr("x", guideX)
+                .attr("y", badgeY + 15)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#102238")
+                .style("font-family", "Arial, sans-serif")
+                .style("font-size", `${fontSize(10)}px`)
+                .style("font-weight", 800)
+                .text("RATIO");
+        }
+    }
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type36_range_area_chart/range_area_plain_chart_01.js

@@ -0,0 +1,564 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Range Area Chart",
+    "chart_name": "range_area_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 2]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "comparison"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const estimateTextWidth = (text, size, weight = 500) => String(text).length * size * (weight >= 700 ? 0.62 : 0.56);
+    const boxesOverlap = (a, b, pad = 0) => !(
+        a.x + a.width + pad < b.x ||
+        b.x + b.width + pad < a.x ||
+        a.y + a.height + pad < b.y ||
+        b.y + b.height + pad < a.y
+    );
+    const formatValueLabel = (value, digits = 0, suffix = "") => {
+        const rounded = Number(value);
+        if (!Number.isFinite(rounded)) return "";
+        return `${chartUtils.format.autoText(+rounded.toFixed(digits))}${suffix}`;
+    };
+
+    const createXAxisScaleAndTicks = (data, xField, rangeStart = 0, rangeEnd = 100) => {
+        const dates = data.map(d => chartUtils.format.parseDate(d[xField]));
+        const xExtent = d3.extent(dates);
+        const xRange = xExtent[1] - xExtent[0];
+        const xPadding = xRange * 0.05;
+        
+        const xScale = d3.scaleTime()
+            .domain([new Date(xExtent[0].getTime() - xPadding), new Date(xExtent[1].getTime() + xPadding)])
+            .range([rangeStart, rangeEnd]);
+        
+        const timeSpan = xExtent[1] - xExtent[0];
+        const yearSpan = timeSpan / (1000 * 60 * 60 * 24 * 365);
+        
+        let timeInterval, formatFunction;
+        if (yearSpan > 7) {
+            const maxTickCount = Math.max(5, Math.floor((rangeEnd - rangeStart) / 72));
+            const rawStep = yearSpan <= 16 ? 2 : Math.max(2, Math.ceil(yearSpan / maxTickCount));
+            const niceSteps = [2, 5, 10, 20, 25, 50, 100];
+            const step = niceSteps.find(candidate => candidate >= rawStep) || rawStep;
+            timeInterval = d3.timeYear.every(step);
+            formatFunction = d => chartUtils.format.date(d, { output: "%Y" }).text;
+        } else if (yearSpan > 2) {
+            timeInterval = d3.timeYear.every(1);
+            formatFunction = d => chartUtils.format.date(d, { output: "%Y" }).text;
+        } else {
+            timeInterval = d3.timeMonth.every(3);
+            formatFunction = d => chartUtils.format.date(d, { output: "%Y-%m" }).text;
+        }
+        
+        const xTicks = xScale.ticks(timeInterval);
+        if (xTicks.length > 0 && xTicks[xTicks.length - 1] < xExtent[1]) {
+            if (xTicks.length > 7) xTicks.pop();
+            xTicks.push(xExtent[1]);
+        }
+        
+        return { xScale, xTicks, xFormat: formatFunction };
+    };
+
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const fontSize = chartUtils.text.fontSize;
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const yDescription = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField }).description;
+    const yUnit = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField }).unit || "";
+    const valueSuffix = yUnit === "%" ? "%" : (yUnit ? ` ${yUnit}` : "");
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 104, right: 70, bottom: 76, left: 76 };
+    
+    // 创建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;");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+
+    const palette = {
+        upper: colorResolver.field(groupField, 0, { fallbackKey: "primary" }).value || "#0A7F97",
+        lower: colorResolver.field(groupField, 1, { fallbackKey: "secondary" }).value || "#5FA82D",
+        panel: "#F9FCFD",
+        panelStroke: "#D8E6EC",
+        grid: "#D2DEE3",
+        text: "#071833"
+    };
+
+    const defs = svg.append("defs");
+    const panelGradientId = `range-area-panel-${Math.random().toString(36).slice(2)}`;
+    defs.append("linearGradient")
+        .attr("id", panelGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%")
+        .selectAll("stop")
+        .data([
+            { offset: "0%", color: "#FFFFFF", opacity: 0.98 },
+            { offset: "100%", color: "#EFF8FA", opacity: 0.98 }
+        ])
+        .enter()
+        .append("stop")
+        .attr("offset", d => d.offset)
+        .attr("stop-color", d => d.color)
+        .attr("stop-opacity", d => d.opacity);
+
+    const areaGradientId = `range-area-fill-${Math.random().toString(36).slice(2)}`;
+    const areaGradient = defs.append("linearGradient")
+        .attr("id", areaGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+    areaGradient.append("stop").attr("offset", "0%").attr("stop-color", "#8AD4E5").attr("stop-opacity", 0.58);
+    areaGradient.append("stop").attr("offset", "100%").attr("stop-color", "#BEE7A5").attr("stop-opacity", 0.42);
+
+    const panelPad = 24;
+    const panelX = 18;
+    const panelY = 20;
+    const panelW = width - panelX * 2;
+    const panelH = height - panelY - 20;
+    svg.append("rect")
+        .attr("class", "range-area-chart-panel")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", 20)
+        .attr("fill", `url(#${panelGradientId})`)
+        .attr("stroke", palette.panelStroke)
+        .attr("stroke-width", 1.1)
+        .attr("filter", "drop-shadow(0 8px 14px rgba(22, 60, 75, 0.12))");
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 分离两个组的数据
+    const groupNames = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 计算每个组的平均值并排序
+    const groupAverages = groupNames.map(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        const avg = d3.mean(groupData, d => +d[yField]);
+        return { group, avg };
+    }).sort((a, b) => b.avg - a.avg);
+    
+    // 选择平均值最高和最低的组
+    const highestGroup = groupAverages[0].group;
+    const lowestGroup = groupAverages[groupAverages.length - 1].group;
+    
+    // 获取这两个组的数据并排序
+    const group1Data = chartData.filter(d => d[groupField] === highestGroup)
+        .sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    const group2Data = chartData.filter(d => d[groupField] === lowestGroup)
+        .sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    
+    const selectedGroupNames = [highestGroup, lowestGroup];
+    palette.upper = colorResolver.field(selectedGroupNames[0], 0, { fallback: "#087F98" }).value || "#087F98";
+    palette.lower = colorResolver.field(selectedGroupNames[1], 1, { fallback: "#5C9F2D" }).value || "#5C9F2D";
+
+    const { xScale, xTicks, xFormat } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺
+    const yMin = Math.max(0, d3.min(chartData, d => +d[yField]));
+    const yMax = d3.max(chartData, d => +d[yField]);
+    const yPadding = 0.3 * (yMax - yMin);
+    
+    const yScale = d3.scaleLinear()
+        .domain([yMin - yPadding, yMax + yPadding])
+        .range([chartHeight, 0]);
+    
+    // 添加水平网格线和y轴刻度
+    const yTicks = d3.ticks(yMin - yPadding, yMax + yPadding, 5);
+    yTicks.forEach(tick => {
+        if (tick > 0) {
+            g.append("line")
+                .attr("class", "gridline")
+                .attr("x1", 0)
+                .attr("y1", yScale(tick))
+                .attr("x2", chartWidth)
+                .attr("y2", yScale(tick))
+                .attr("stroke", palette.grid)
+                .attr("stroke-dasharray", "3 4")
+                .attr("stroke-width", 1);
+        }
+        
+        g.append("text")
+            .attr("class", "value")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${fontSize(12)}px`)
+            .style("fill", "#14233B")
+            .text(chartUtils.format.autoText(+(tick)));
+    });
+    
+    // 添加x轴刻度标签
+    xTicks.forEach(tick => {
+        g.append("text")
+            .attr("class", "value")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 15)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${fontSize(12)}px`)
+            .style("fill", "#14233B")
+            .text(xFormat(tick));
+    });
+
+    // 添加坐标轴
+    g.append("line")
+        .attr("class", "axis")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#60727D")
+        .attr("stroke-width", 1.2);
+    
+    g.append("line")
+        .attr("class", "axis")
+        .attr("x1", 0)
+        .attr("y1", yScale(d3.max(yTicks)))
+        .attr("x2", 0)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#60727D")
+        .attr("stroke-width", 1.2);
+    
+    // 添加y轴标题
+    g.append("text")
+        .attr("class", "text")
+        .attr("x", 0)
+        .attr("y", -58)
+        .attr("text-anchor", "start")
+        .style("font-family", "Arial, Helvetica, sans-serif")
+        .style("font-size", `${fontSize(15)}px`)
+        .style("font-weight", "800")
+        .style("fill", palette.text)
+        .text(`${yDescription} ${d3.min(chartData, d => chartUtils.format.parseDate(d[xField]).getFullYear())}-${d3.max(chartData, d => chartUtils.format.parseDate(d[xField]).getFullYear())}`);
+
+    g.append("text")
+        .attr("class", "text")
+        .attr("x", 0)
+        .attr("y", -30)
+        .attr("text-anchor", "start")
+        .style("font-family", "Arial, Helvetica, sans-serif")
+        .style("font-size", `${fontSize(12)}px`)
+        .style("font-weight", "600")
+        .style("fill", "#14233B")
+        .text(yUnit || yField);
+
+    const legendFontSize = fontSize(12);
+    const legendItems = selectedGroupNames.map((group, idx) => ({
+        group,
+        color: idx === 0 ? palette.upper : palette.lower,
+        width: 36 + estimateTextWidth(group, legendFontSize, 500) + 22
+    }));
+    const legendTotalWidth = d3.sum(legendItems, d => d.width);
+    const legend = g.append("g")
+        .attr("class", "legend")
+        .attr("transform", `translate(${clamp(chartWidth - legendTotalWidth, 0, chartWidth)}, ${-22})`);
+    let legendCursor = 0;
+    legendItems.forEach((item) => {
+        const itemX = legendCursor;
+        const group = item.group;
+        const color = item.color;
+        legend.append("line")
+            .attr("x1", itemX)
+            .attr("x2", itemX + 28)
+            .attr("y1", 7)
+            .attr("y2", 7)
+            .attr("stroke", color)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round");
+        legend.append("circle")
+            .attr("cx", itemX + 14)
+            .attr("cy", 7)
+            .attr("r", 5)
+            .attr("fill", color)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 1.6);
+        legend.append("text")
+            .attr("x", itemX + 36)
+            .attr("y", 11)
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${legendFontSize}px`)
+            .style("fill", "#14233B")
+            .text(group);
+        legendCursor += item.width;
+    });
+    
+    // 创建线条和面积生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]));
+    
+    const area = d3.area()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y0(d => yScale(d.group2Value))
+        .y1(d => yScale(d.group1Value));
+    
+    // 创建合并的数据集用于面积图
+    const areaData = [];
+    
+    // 找到共同的时间点
+    const commonDates = group1Data.map(d => d[xField]).filter(date => 
+        group2Data.some(d2 => d2[xField] === date)
+    );
+    
+    // 按时间排序构建面积数据
+    commonDates.sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b)).forEach(date => {
+        const group1Item = group1Data.find(d => d[xField] === date);
+        const group2Item = group2Data.find(d => d[xField] === date);
+        
+        if (group1Item && group2Item) {
+            areaData.push({
+                [xField]: date,
+                group1Value: group1Item[yField],
+                group2Value: group2Item[yField]
+            });
+        }
+    });
+    
+    // 绘制面积
+    g.append("path")
+        .attr("class", "mark")
+        .datum(areaData)
+        .attr("fill", `url(#${areaGradientId})`)
+        .attr("opacity", 0.95)
+        .attr("d", area);
+    
+    // 绘制线条1（高值组）
+    g.append("path")
+        .attr("class", "mark")
+        .datum(group1Data)
+        .attr("fill", "none")
+        .attr("stroke", palette.upper)
+        .attr("stroke-width", 4)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("d", line);
+    
+    // 绘制线条2（低值组）
+    g.append("path")
+        .attr("class", "mark")
+        .datum(group2Data)
+        .attr("fill", "none")
+        .attr("stroke", palette.lower)
+        .attr("stroke-width", 4)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("d", line);
+
+    const drawMarkers = (series, color) => {
+        g.selectAll(`.range-marker-${color.replace(/[^a-zA-Z0-9]/g, "")}`)
+            .data(series)
+            .enter()
+            .append("circle")
+            .attr("class", "mark range-area-point")
+            .attr("cx", d => xScale(chartUtils.format.parseDate(d[xField])))
+            .attr("cy", d => yScale(+d[yField]))
+            .attr("r", 4.9)
+            .attr("fill", color)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 2);
+    };
+    drawMarkers(group1Data, palette.upper);
+    drawMarkers(group2Data, palette.lower);
+    
+    // 添加组标签到线的左侧
+    const firstPoint1 = group1Data[0];
+    const firstPoint2 = group2Data[0];
+    const lastPoint1 = group1Data[group1Data.length - 1];
+    const lastPoint2 = group2Data[group2Data.length - 1];
+    
+    const labelBoxes = [];
+    const endpointDigits = point => yUnit === "%" ? 0 : (+point[yField] < 10 ? 1 : 0);
+    const endpointDisplayedValue = point => +(+point[yField]).toFixed(endpointDigits(point));
+    const drawValuePill = (point, color, side, preferredDy = 0) => {
+        const digits = endpointDigits(point);
+        const text = formatValueLabel(+point[yField], digits, valueSuffix);
+        const fs = fontSize(14);
+        const padX = 8;
+        const pillW = Math.max(38, estimateTextWidth(text, fs, 800) + padX * 2);
+        const pillH = 25;
+        const pointX = xScale(chartUtils.format.parseDate(point[xField]));
+        const pointY = yScale(+point[yField]);
+        let x = side === "left" ? pointX - pillW - 8 : pointX + 8;
+        let y = pointY - pillH / 2 + preferredDy;
+        x = clamp(x, 2, chartWidth - pillW - 2);
+        y = clamp(y, -8, chartHeight - pillH - 2);
+        const box = { x, y, width: pillW, height: pillH };
+        for (let i = 0; i < labelBoxes.length; i++) {
+            if (boxesOverlap(box, labelBoxes[i], 4)) {
+                y = clamp(y + (preferredDy >= 0 ? pillH + 4 : -pillH - 4), -8, chartHeight - pillH - 2);
+                box.y = y;
+            }
+        }
+        labelBoxes.push(box);
+        const pill = g.append("g")
+            .attr("class", "range-area-endpoint-pill")
+            .attr("transform", `translate(${x},${y})`)
+            .attr("data-anchor", `${side}-endpoint-point`)
+            .attr("data-collision-rule", "clamped-to-panel-and-staggered-from-neighbor-endpoint-pills");
+        pill.append("rect")
+            .attr("width", pillW)
+            .attr("height", pillH)
+            .attr("rx", 7)
+            .attr("fill", color)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 1.4);
+        pill.append("text")
+            .attr("x", pillW / 2)
+            .attr("y", pillH / 2 + 5)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${fs}px`)
+            .style("font-weight", "800")
+            .style("fill", "#FFFFFF")
+            .text(text);
+    };
+    drawValuePill(firstPoint1, palette.upper, "left", -10);
+    drawValuePill(firstPoint2, palette.lower, "left", 12);
+    drawValuePill(lastPoint1, palette.upper, "right", -6);
+    drawValuePill(lastPoint2, palette.lower, "right", 8);
+
+    const lineBoxes = areaData.flatMap(d => {
+        const x = xScale(chartUtils.format.parseDate(d[xField]));
+        return [
+            { x: x - 9, y: yScale(+d.group1Value) - 9, width: 18, height: 18 },
+            { x: x - 9, y: yScale(+d.group2Value) - 9, width: 18, height: 18 }
+        ];
+    });
+    const rawFinalGap = Math.abs(+lastPoint1[yField] - +lastPoint2[yField]);
+    const finalGap = yUnit === "%"
+        ? Math.abs(endpointDisplayedValue(lastPoint1) - endpointDisplayedValue(lastPoint2))
+        : rawFinalGap;
+    const gapDigits = yUnit === "%" ? (finalGap >= 10 ? 0 : 1) : (finalGap < 10 ? 1 : 0);
+    const gapUnit = yUnit === "%" ? "percentage" : (yUnit || "units");
+    const higherText = yUnit === "%" ? "points higher" : "higher";
+    const gapText = `${chartUtils.format.autoText(+finalGap.toFixed(gapDigits))} ${gapUnit}`;
+    const annotationCandidates = [
+        { x: chartWidth - 186, y: chartHeight - 136 },
+        { x: chartWidth - 186, y: 76 },
+        { x: 96, y: chartHeight - 136 },
+        { x: 96, y: 76 }
+    ];
+    const annotationBox = { width: 164, height: 92 };
+    const occupied = labelBoxes.concat(lineBoxes, [
+        { x: chartWidth - 210, y: -70, width: 210, height: 34 },
+        { x: 0, y: -72, width: 260, height: 52 }
+    ]);
+    const candidate = annotationCandidates.find(c => {
+        const box = { x: c.x, y: c.y, width: annotationBox.width, height: annotationBox.height };
+        return !occupied.some(o => boxesOverlap(box, o, 8));
+    });
+    if (candidate) {
+        const card = g.append("g")
+            .attr("class", "range-area-gap-annotation")
+            .attr("data-annotation", "final-year-gap")
+            .attr("data-anchor", "collision-aware-plot-relative-safe-area")
+            .attr("data-collision-rule", "tries lower-right upper-right lower-left upper-left; avoids lines markers endpoint labels legend and chart title")
+            .attr("transform", `translate(${candidate.x},${candidate.y})`);
+        card.append("rect")
+            .attr("width", annotationBox.width)
+            .attr("height", annotationBox.height)
+            .attr("rx", 14)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#C9DCE4")
+            .attr("stroke-width", 1.1)
+            .attr("filter", "drop-shadow(0 5px 10px rgba(16, 52, 70, 0.14))");
+        const iconSlot = card.append("g")
+            .attr("class", "reserved-asset-slot range-area-gap-icon-slot")
+            .attr("data-asset-slot", "range-area-gap-annotation-icon")
+            .attr("data-slot-policy", "neutral_placeholder_or_image2_asset")
+            .attr("data-asset-source-policy", "neutral_placeholder")
+            .attr("data-anchor", "annotation-card-left")
+            .attr("data-bbox", "14,18,42,42")
+            .attr("data-collision-rule", "must remain inside annotation card and avoid annotation text")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("transform", "translate(15,20)");
+        iconSlot.append("circle")
+            .attr("cx", 21)
+            .attr("cy", 21)
+            .attr("r", 20)
+            .attr("fill", "#0B85A0")
+            .attr("opacity", 0.92);
+        iconSlot.append("circle")
+            .attr("cx", 21)
+            .attr("cy", 21)
+            .attr("r", 9)
+            .attr("fill", "none")
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 2)
+            .attr("stroke-dasharray", "4 3")
+            .attr("opacity", 0.8);
+        card.append("text")
+            .attr("x", 70)
+            .attr("y", 30)
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${fontSize(11)}px`)
+            .style("fill", "#263448")
+            .text(`In ${chartUtils.format.parseDate(lastPoint1[xField]).getFullYear()},`);
+        card.append("text")
+            .attr("x", 70)
+            .attr("y", 51)
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${fontSize(15)}px`)
+            .style("font-weight", "800")
+            .style("fill", palette.upper)
+            .text(gapText);
+        card.append("text")
+            .attr("x", 70)
+            .attr("y", 70)
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${fontSize(11)}px`)
+            .style("fill", "#263448")
+            .text(higherText);
+    }
+    
+    
+    
+    return svg.node();
+}