Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/area_chart/area_chart_01.js

@@ -0,0 +1,713 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    const images = jsonData.images || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+
+    const width = Math.max(640, Number(variables.width) || 800);
+    const height = Math.max(950, Number(variables.height) || 600);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFontFamily = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#10214A";
+    const mutedText = "#5F6B7A";
+    const pageFill = "#F5FAFD";
+    const panelFill = "#FFFFFF";
+    const border = "#E2EAF3";
+    const blue = sourceColors.other?.primary || "#1E5CB8";
+    const teal = sourceColors.other?.secondary || "#24B897";
+    const green = "#2E9346";
+    const idSuffix = String(containerSelector || "area-chart-01")
+        .replace(/[^a-zA-Z0-9_-]/g, "")
+        .slice(0, 24) || "area01";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "area-chart-01-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", pageFill);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!xField || !yField) {
+        return addEmptyState("Missing area chart fields");
+    }
+
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const shortLabel = (value, maxChars = 28) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+    const truncateText = (value, maxChars = 28) => {
+        const clean = String(value ?? "").replace(/\s+/g, " ").trim();
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+
+    const parseTimeValue = value => {
+        const raw = String(value ?? "").trim();
+        if (!raw) return null;
+        if (/^\d{4}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        {
+            const parsedByHelper = chartUtils.format.parseDate(value);
+            if (parsedByHelper instanceof Date && Number.isFinite(parsedByHelper.getTime())) return parsedByHelper;
+        }
+        const parsed = Date.parse(raw);
+        if (Number.isFinite(parsed)) return new Date(parsed);
+        const numeric = Number(raw);
+        if (Number.isFinite(numeric)) return new Date(numeric, 0, 1);
+        return null;
+    };
+
+    const unitRaw = String(yColumn.unit || "").trim();
+    const unit = unitRaw.toLowerCase() === "none" ? "" : unitRaw;
+    const valueBaseTitle = readableName(yColumn.label || yField);
+    const valueTitle = shortLabel(`${valueBaseTitle}${unit ? ` (${unit})` : ""}`, 34);
+    const axisTitle = `${shortLabel(valueBaseTitle, unit ? 28 : 34).toUpperCase()}${unit ? ` (${unit})` : ""}`;
+    const formatNumber = value => {
+        const numberValue = Number(value) || 0;
+        const abs = Math.abs(numberValue);
+        const spec = abs >= 1000 ? ",.0f" : abs >= 100 ? ",.1f" : abs >= 10 ? ",.1f" : abs >= 1 ? ",.1f" : ",.3f";
+        return d3.format(spec)(numberValue)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+    const formatLocalValue = value => {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "%") return `${formatted}%`;
+        if (unit === "$" || unit.toLowerCase() === "usd") return `$${formatted}`;
+        if (unit.startsWith("$")) return `$${formatted}${unit.slice(1)}`;
+        return `${formatted} ${unit}`;
+    };
+    const formatLabelValueParts = value => {
+        const formatted = formatNumber(value);
+        if (!unit) return { valueText: formatted, unitText: "" };
+        if (unit === "%") return { valueText: `${formatted}%`, unitText: "" };
+        if (unit === "$" || unit.toLowerCase() === "usd") return { valueText: `$${formatted}`, unitText: "" };
+        if (unit.startsWith("$")) return { valueText: `$${formatted}${unit.slice(1)}`, unitText: "" };
+        return { valueText: formatted, unitText: unit };
+    };
+    const formatDateLabel = date => {
+        if (!(date instanceof Date) || !Number.isFinite(date.getTime())) return "";
+        const year = date.getFullYear();
+        return String(year);
+    };
+
+    const rows = chartData
+        .map((row, sourceIndex) => {
+            const date = parseTimeValue(row[xField]);
+            const value = Number(row[yField]);
+            return {
+                rawX: String(row[xField] ?? ""),
+                date,
+                value,
+                sourceIndex
+            };
+        })
+        .filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.sourceIndex - b.sourceIndex);
+
+    if (rows.length < 2) {
+        return addEmptyState("Area chart needs at least two valid points");
+    }
+
+    const minValue = Math.min(0, d3.min(rows, d => d.value) || 0);
+    const maxValue = d3.max(rows, d => d.value) || 1;
+    const valueRange = Math.max(0, maxValue - minValue);
+    const yPadding = valueRange === 0
+        ? Math.max(1, Math.abs(maxValue) * 0.12)
+        : Math.max(valueRange * 0.12, Math.abs(maxValue) * 0.04, 0.001);
+    const yTop = maxValue + yPadding;
+    const firstPoint = rows[0];
+    const lastPoint = rows[rows.length - 1];
+    const peakPoint = rows.reduce((max, row) => row.value > max.value ? row : max, rows[0]);
+    const troughPoint = rows.reduce((min, row) => row.value < min.value ? row : min, rows[0]);
+    const delta = lastPoint.value - firstPoint.value;
+    const deltaPct = firstPoint.value === 0 ? 0 : (delta / Math.abs(firstPoint.value)) * 100;
+    const trendWord = delta < 0 ? "reduction" : delta > 0 ? "increase" : "change";
+    const absDeltaPct = Math.abs(deltaPct);
+    const deltaText = Math.abs(firstPoint.value) < 1 || absDeltaPct > 999
+        ? `${delta >= 0 ? "+" : "-"}${formatLocalValue(Math.abs(delta))} ${trendWord}`
+        : `${absDeltaPct.toFixed(1).replace(/\.0$/, "")}% ${trendWord}`;
+
+    const panelX = -Math.max(104, width * 0.18);
+    const panelY = Math.max(18, height * 0.035);
+    const panelW = width - panelX * 2;
+    const footerH = 0;
+    const footerGap = 0;
+    const panelH = height - panelY * 2;
+
+    const chartPadX = Math.max(48, panelW * 0.085);
+    const chartPadRight = Math.max(28, panelW * 0.035);
+    const plotX = panelX + chartPadX;
+    const plotRight = panelX + panelW - chartPadRight;
+    const plotBottom = panelY + panelH - Math.max(52, panelH * 0.11);
+    const plotTop = panelY + Math.max(76, panelH * 0.17);
+    const plotW = Math.max(120, plotRight - plotX);
+    const plotH = Math.max(120, plotBottom - plotTop);
+    const labelFont = rows.length > 12 ? 10.5 : rows.length > 8 ? 11.5 : 14;
+    const valueFont = rows.length > 12 ? 12.5 : rows.length > 8 ? 15.5 : 25;
+    const unitFont = rows.length > 12 ? 9.5 : rows.length > 8 ? 10.5 : 14;
+    const calloutW = Math.min(260, Math.max(205, panelW * 0.32));
+    const calloutH = Math.max(52, Math.min(68, panelH * 0.14));
+    const calloutX = panelX + panelW - calloutW - Math.max(20, panelW * 0.03);
+    const calloutY = panelY + Math.max(16, panelH * 0.035);
+    const calloutAvoidBox = {
+        left: calloutX - 8,
+        right: calloutX + calloutW + 8,
+        top: calloutY - 8,
+        bottom: calloutY + calloutH + 10
+    };
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(rows, d => d.date))
+        .range([plotX, plotRight]);
+    const yScale = d3.scaleLinear()
+        .domain([minValue, yTop])
+        .nice(4)
+        .range([plotBottom, plotTop]);
+
+    const defs = svg.append("defs");
+    const shadow = defs.append("filter")
+        .attr("id", `area-chart-01-shadow-${idSuffix}`)
+        .attr("x", "-12%")
+        .attr("y", "-12%")
+        .attr("width", "124%")
+        .attr("height", "124%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 10)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#A8B7C8")
+        .attr("flood-opacity", 0.22);
+
+    const areaGradientId = `area-chart-01-fill-${idSuffix}`;
+    const areaGradient = defs.append("linearGradient")
+        .attr("id", areaGradientId)
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", plotX)
+        .attr("x2", plotRight)
+        .attr("y1", plotTop)
+        .attr("y2", plotBottom);
+    areaGradient.append("stop").attr("offset", "0%").attr("stop-color", blue).attr("stop-opacity", 0.98);
+    areaGradient.append("stop").attr("offset", "58%").attr("stop-color", "#218BD2").attr("stop-opacity", 0.90);
+    areaGradient.append("stop").attr("offset", "100%").attr("stop-color", teal).attr("stop-opacity", 0.94);
+
+    const lineGradientId = `area-chart-01-line-${idSuffix}`;
+    const lineGradient = defs.append("linearGradient")
+        .attr("id", lineGradientId)
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", plotX)
+        .attr("x2", plotRight);
+    lineGradient.append("stop").attr("offset", "0%").attr("stop-color", "#104CAD");
+    lineGradient.append("stop").attr("offset", "100%").attr("stop-color", "#219B66");
+
+    const dotPatternId = `area-chart-01-dot-pattern-${idSuffix}`;
+    const dotPattern = defs.append("pattern")
+        .attr("id", dotPatternId)
+        .attr("width", 7)
+        .attr("height", 7)
+        .attr("patternUnits", "userSpaceOnUse");
+    dotPattern.append("circle")
+        .attr("cx", 2)
+        .attr("cy", 2)
+        .attr("r", 0.85)
+        .attr("fill", "#FFFFFF")
+        .attr("opacity", 0.34);
+
+    const clipId = `area-chart-01-plot-clip-${idSuffix}`;
+    defs.append("clipPath")
+        .attr("id", clipId)
+        .append("rect")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", 18);
+
+    const area = d3.area()
+        .x(d => xScale(d.date))
+        .y0(plotBottom)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+    const line = d3.line()
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    const root = svg.append("g").attr("class", "area-chart-01-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-background")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", pageFill)
+        .attr("fill-opacity", 0);
+    root.append("rect")
+        .attr("class", "chart-style-panel chart-card-panel")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", 20)
+        .attr("fill", panelFill)
+        .attr("stroke", border)
+        .attr("filter", `url(#area-chart-01-shadow-${idSuffix})`);
+
+    const yTicks = yScale.ticks(5).filter(tick => tick >= minValue && tick <= yTop);
+    const gridLayer = root.append("g").attr("class", "plot-grid-layer");
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        gridLayer.append("line")
+            .attr("class", "y-grid-line")
+            .attr("x1", plotX)
+            .attr("x2", plotRight)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", "#E5EDF6")
+            .attr("stroke-width", 1);
+        gridLayer.append("text")
+            .attr("class", "y-axis-tick chart-text")
+            .attr("x", plotX - 10)
+            .attr("y", y + 4)
+            .attr("text-anchor", "end")
+            .attr("fill", "#39506B")
+            .style("font-family", fontFamily)
+            .style("font-size", "10px")
+            .text(formatNumber(tick));
+    });
+    root.append("text")
+        .attr("class", "y-axis-title chart-text")
+        .attr("transform", `translate(${panelX + 26}, ${plotTop + plotH / 2}) rotate(-90)`)
+        .attr("text-anchor", "middle")
+        .attr("fill", "#334660")
+        .style("font-family", titleFontFamily)
+        .style("font-size", "11px")
+        .style("font-weight", "900")
+        .style("letter-spacing", "0px")
+        .text(axisTitle);
+
+    const guideLayer = root.append("g").attr("class", "point-guide-lines");
+    rows.forEach(row => {
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        guideLayer.append("line")
+            .attr("class", "point-guide-line")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", y + 6)
+            .attr("y2", plotBottom)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 1.1)
+            .attr("stroke-dasharray", "4 5")
+            .attr("opacity", 0.65)
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value);
+    });
+
+    const plotLayer = root.append("g").attr("class", "area-plot-layer").attr("clip-path", `url(#${clipId})`);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-fill data-area")
+        .attr("d", area)
+        .attr("fill", `url(#${areaGradientId})`)
+        .attr("data-point-count", rows.length)
+        .attr("data-first-x", firstPoint.rawX)
+        .attr("data-first-value", firstPoint.value)
+        .attr("data-last-x", lastPoint.rawX)
+        .attr("data-last-value", lastPoint.value)
+        .attr("data-min-value", troughPoint.value)
+        .attr("data-max-value", peakPoint.value);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-dot-pattern decorative-pattern")
+        .attr("d", area)
+        .attr("fill", `url(#${dotPatternId})`)
+        .attr("opacity", 0.9);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line-underlay")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 5.2)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("opacity", 0.95);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line data-line")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", `url(#${lineGradientId})`)
+        .attr("stroke-width", 3)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round");
+
+    const pointLayer = root.append("g").attr("class", "area-data-points");
+    const labelIndexSet = new Set();
+    rows.forEach((_, index) => {
+        if (rows.length <= 10 || index === 0 || index === rows.length - 1 || index % Math.ceil(rows.length / 6) === 0) {
+            labelIndexSet.add(index);
+        }
+    });
+    labelIndexSet.add(rows.indexOf(peakPoint));
+    labelIndexSet.add(rows.indexOf(troughPoint));
+    const labelIndices = [...labelIndexSet].sort((a, b) => a - b);
+    const labelLayouts = new Map();
+    const estimateTextWidth = (text, fontSize, weightFactor = 0.58) => String(text || "").length * fontSize * weightFactor;
+    const labelBounds = layout => {
+        const bottomLineY = layout.unitText ? layout.unitY : layout.valueY;
+        return {
+            left: layout.x - layout.width / 2,
+            right: layout.x + layout.width / 2,
+            top: layout.yearY - labelFont - 2,
+            bottom: bottomLineY + 4
+        };
+    };
+    const boundsOverlap = (a, b, pad = 4) => a.left - pad < b.right
+        && a.right + pad > b.left
+        && a.top - pad < b.bottom
+        && a.bottom + pad > b.top;
+    const updateLabelLines = layout => {
+        layout.valueY = layout.yearY + valueFont + 2;
+        layout.unitY = layout.valueY + unitFont + 3;
+        layout.bounds = labelBounds(layout);
+    };
+    const createLabelLayout = index => {
+        const row = rows[index];
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        const { valueText: labelValueText, unitText } = formatLabelValueParts(row.value);
+        const yearText = formatDateLabel(row.date);
+        const progress = rows.length === 1 ? 0 : index / (rows.length - 1);
+        const widthEstimate = Math.max(
+            estimateTextWidth(yearText, labelFont, 0.62),
+            estimateTextWidth(labelValueText, valueFont, 0.64),
+            estimateTextWidth(unitText, unitFont, 0.56)
+        ) + 12;
+        const nearNeighbor = labelIndices.some(other => {
+            if (other === index) return false;
+            return Math.abs(xScale(rows[other].date) - x) < Math.max(58, widthEstimate * 0.9);
+        });
+        const edgeLabel = index === 0 || index === rows.length - 1;
+        const bottomReserve = valueFont + (unitText ? unitFont + 5 : 0) + 8;
+        const enoughBelow = y < plotBottom - bottomReserve - labelFont - 16;
+        let side = !edgeLabel && rows.length > 8 && index % 2 === 0 && nearNeighbor && enoughBelow
+            ? "below"
+            : "above";
+        const minYearY = panelY + labelFont + 18;
+        const maxYearY = plotBottom - bottomReserve;
+        const aboveClearance = valueFont + (unitText ? unitFont + 5 : 0) + 25;
+        let preferredYearY = side === "below"
+            ? y + Math.max(28, labelFont + 13)
+            : y - Math.max(aboveClearance, panelH * 0.088);
+        const layout = {
+            index,
+            row,
+            pointX: x,
+            pointY: y,
+            x: Math.max(panelX + 38 + widthEstimate / 2, Math.min(panelX + panelW - 38 - widthEstimate / 2, x)),
+            yearY: Math.max(minYearY, Math.min(maxYearY, preferredYearY)),
+            side,
+            width: widthEstimate,
+            yearText,
+            valueText: labelValueText,
+            unitText,
+            canMoveBelow: enoughBelow,
+            minYearY,
+            maxYearY,
+            color: d3.interpolateRgb("#124AA5", "#249747")(progress)
+        };
+        updateLabelLines(layout);
+        if (layout.side === "above" && enoughBelow && boundsOverlap(layout.bounds, calloutAvoidBox, 0)) {
+            layout.side = "below";
+            preferredYearY = y + Math.max(28, labelFont + 13);
+            layout.yearY = Math.max(minYearY, Math.min(maxYearY, preferredYearY));
+            updateLabelLines(layout);
+        }
+        return layout;
+    };
+    const layoutGroups = { above: [], below: [] };
+    labelIndices.forEach(index => {
+        const layout = createLabelLayout(index);
+        labelLayouts.set(index, layout);
+        layoutGroups[layout.side].push(layout);
+    });
+    Object.values(layoutGroups).forEach(group => {
+        group.sort((a, b) => a.x - b.x);
+        group.forEach((layout, groupIndex) => {
+            if (groupIndex === 0) return;
+            const previous = group[groupIndex - 1];
+            if (!boundsOverlap(layout.bounds, previous.bounds, 5)) return;
+
+            const targetX = previous.bounds.right + 7 + layout.width / 2;
+            const maxX = panelX + panelW - 38 - layout.width / 2;
+            if (targetX <= maxX) {
+                layout.x = targetX;
+            } else {
+                const laneShift = Math.max(18, layout.bounds.bottom - layout.bounds.top + 7);
+                layout.yearY += layout.side === "above" ? -laneShift : laneShift;
+                const bottomReserve = valueFont + (layout.unitText ? unitFont + 5 : 0) + 8;
+                layout.yearY = Math.max(panelY + labelFont + 18, Math.min(plotBottom - bottomReserve, layout.yearY));
+            }
+            updateLabelLines(layout);
+        });
+    });
+    labelLayouts.forEach(layout => {
+        if (layout.side !== "above" || !layout.canMoveBelow || !boundsOverlap(layout.bounds, calloutAvoidBox, 0)) return;
+        layout.side = "below";
+        layout.yearY = Math.max(
+            layout.minYearY,
+            Math.min(layout.maxYearY, layout.pointY + Math.max(28, labelFont + 13))
+        );
+        updateLabelLines(layout);
+    });
+
+    rows.forEach((row, index) => {
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        const progress = rows.length === 1 ? 0 : index / (rows.length - 1);
+        const pointColor = d3.interpolateRgb(blue, green)(progress);
+        const point = pointLayer.append("g")
+            .attr("class", "area-point")
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value)
+            .attr("transform", `translate(${x}, ${y})`);
+        point.append("circle")
+            .attr("class", "area-point-outer")
+            .attr("r", rows.length <= 7 ? 8.6 : 7.2)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#DDE8F3")
+            .attr("stroke-width", 0.7);
+        point.append("circle")
+            .attr("class", "area-point-inner")
+            .attr("r", rows.length <= 7 ? 6.0 : 5.1)
+            .attr("fill", pointColor);
+
+        if (!labelIndexSet.has(index)) return;
+
+        const labelLayout = labelLayouts.get(index);
+        const labelGroup = root.append("g")
+            .attr("class", "point-label-group")
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value);
+        labelGroup.append("text")
+            .attr("class", "point-year-label chart-text")
+            .attr("x", labelLayout.x)
+            .attr("y", labelLayout.yearY)
+            .attr("text-anchor", "middle")
+            .attr("fill", labelLayout.color)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 2.2)
+            .attr("paint-order", "stroke fill")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${labelFont}px`)
+            .style("font-weight", "900")
+            .text(labelLayout.yearText);
+        labelGroup.append("text")
+            .attr("class", "point-value-label chart-text")
+            .attr("x", labelLayout.x)
+            .attr("y", labelLayout.valueY)
+            .attr("text-anchor", "middle")
+            .attr("fill", labelLayout.color)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 2.4)
+            .attr("paint-order", "stroke fill")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${valueFont}px`)
+            .style("font-weight", "900")
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value)
+            .text(labelLayout.valueText);
+        if (labelLayout.unitText) {
+            labelGroup.append("text")
+                .attr("class", "point-unit-label chart-text")
+                .attr("x", labelLayout.x)
+                .attr("y", labelLayout.unitY)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#26394F")
+                .attr("stroke", "#FFFFFF")
+                .attr("stroke-width", 2)
+                .attr("paint-order", "stroke fill")
+                .style("font-family", fontFamily)
+                .style("font-size", `${unitFont}px`)
+                .style("font-weight", "700")
+                .attr("data-source-index", row.sourceIndex)
+                .attr("data-x", row.rawX)
+                .attr("data-value", row.value)
+                .text(labelLayout.unitText);
+        }
+    });
+
+    root.append("line")
+        .attr("class", "x-axis-line")
+        .attr("x1", plotX)
+        .attr("x2", plotRight)
+        .attr("y1", plotBottom)
+        .attr("y2", plotBottom)
+        .attr("stroke", "#9CAFC5")
+        .attr("stroke-width", 1.5);
+    root.append("line")
+        .attr("class", "y-axis-line")
+        .attr("x1", plotX)
+        .attr("x2", plotX)
+        .attr("y1", plotTop)
+        .attr("y2", plotBottom)
+        .attr("stroke", "#B8C7D7")
+        .attr("stroke-width", 1.2);
+
+    const xTickCount = rows.length <= 7 ? rows.length : 6;
+    const xTickDates = rows.length <= 7
+        ? rows.map(row => row.date)
+        : xScale.ticks(xTickCount);
+    xTickDates.forEach(tick => {
+        const x = xScale(tick);
+        root.append("line")
+            .attr("class", "x-axis-tick")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", plotBottom)
+            .attr("y2", plotBottom + 5)
+            .attr("stroke", "#9CAFC5")
+            .attr("stroke-width", 1);
+        root.append("text")
+            .attr("class", "x-axis-label chart-text")
+            .attr("x", x)
+            .attr("y", plotBottom + 22)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#0E2C6B")
+            .style("font-family", titleFontFamily)
+            .style("font-size", "11px")
+            .style("font-weight", "900")
+            .text(formatDateLabel(tick));
+    });
+
+    const callout = root.append("g")
+        .attr("class", "insight-callout")
+        .attr("transform", `translate(${calloutX}, ${calloutY})`);
+    callout.append("rect")
+        .attr("class", "insight-callout-card")
+        .attr("width", calloutW)
+        .attr("height", calloutH)
+        .attr("rx", 18)
+        .attr("fill", "#FFFFFF")
+        .attr("stroke", border)
+        .attr("filter", `url(#area-chart-01-shadow-${idSuffix})`);
+    const calloutIcon = callout.append("g").attr("class", "callout-icon-slot decorative-icon-slot");
+    calloutIcon.append("circle")
+        .attr("cx", 30)
+        .attr("cy", calloutH / 2)
+        .attr("r", 21)
+        .attr("fill", delta <= 0 ? green : blue);
+    calloutIcon.append("path")
+        .attr("d", delta <= 0 ? "M 24 25 L 30 32 L 38 20" : "M 23 34 L 30 25 L 38 31")
+        .attr("fill", "none")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round")
+        .attr("transform", `translate(0, ${calloutH / 2 - 28})`);
+    callout.append("text")
+        .attr("class", "callout-title chart-text")
+        .attr("x", 62)
+        .attr("y", calloutH / 2 - 5)
+        .attr("fill", textColor)
+        .style("font-family", titleFontFamily)
+        .style("font-size", "13px")
+        .style("font-weight", "900")
+        .text(delta <= 0 ? "Lower trend." : "Rising trend.");
+    callout.append("text")
+        .attr("class", "callout-subtitle chart-text")
+        .attr("x", 62)
+        .attr("y", calloutH / 2 + 13)
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "11px")
+        .text(truncateText(`${formatLocalValue(firstPoint.value)} to ${formatLocalValue(lastPoint.value)}`, 28));
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/area_chart_02.js

@@ -0,0 +1,576 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_chart_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[5, 30], [-100, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["positive", "negative"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "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 dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+
+    const width = Math.max(820, Number(variables.width) || 820);
+    const height = Math.max(1180, Number(variables.height) || 1180);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFontFamily = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#101A33";
+    const mutedText = "#34425B";
+    const pageFill = "#FFFFFF";
+    const panelFill = "#FFFFFF";
+    const border = "#D4DCE8";
+    const red = sourceColors.other?.primary || sourceColors.other?.positive || "#B3121C";
+    const blue = sourceColors.other?.secondary || sourceColors.other?.negative || "#B3121C";
+    const neutralLine = "#7F8EA3";
+    const idSuffix = String(containerSelector || "area-chart-02")
+        .replace(/[^a-zA-Z0-9_-]/g, "")
+        .slice(0, 24) || "area02";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "area-chart-02-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", pageFill);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!xField || !yField) {
+        return addEmptyState("Missing area chart fields");
+    }
+
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const wrapWords = (value, maxChars, maxLines = 2) => {
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        if (!words.length) return [""];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (candidate.length <= maxChars || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) return lines;
+        return lines.slice(0, maxLines - 1).concat(lines.slice(maxLines - 1).join(" "));
+    };
+
+    const parseTimeValue = value => {
+        const raw = String(value ?? "").trim();
+        if (!raw) return null;
+        if (/^-?\d{1,6}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        {
+            const parsedByHelper = chartUtils.format.parseDate(value);
+            if (parsedByHelper instanceof Date && Number.isFinite(parsedByHelper.getTime())) return parsedByHelper;
+        }
+        const parsed = Date.parse(raw);
+        if (Number.isFinite(parsed)) return new Date(parsed);
+        return null;
+    };
+
+    const unitRaw = String(yColumn.unit || "").trim();
+    const unit = unitRaw.toLowerCase() === "none" ? "" : unitRaw;
+    const valueBaseTitle = readableName(yColumn.label || yColumn.description || yField);
+    const axisDescriptor = readableName(yColumn.description || yColumn.label || yField);
+    let axisTitle = `${readableName(yField).toUpperCase()}${unit ? ` (${unit})` : ""}`;
+    if (/trust/i.test(axisDescriptor) && /\b0\s*-\s*100\b/.test(axisDescriptor)) {
+        axisTitle = "PUBLIC TRUST INDEX (0-100)";
+    } else if (axisDescriptor && axisDescriptor.length <= 34) {
+        axisTitle = `${axisDescriptor.toUpperCase()}${unit ? ` (${unit})` : ""}`;
+    }
+    const formatNumber = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        const abs = Math.abs(numberValue);
+        const spec = abs >= 1000 ? ".0f" : abs >= 100 ? ".1f" : abs >= 10 ? ".1f" : abs >= 1 ? ".2f" : ".3f";
+        return d3.format(spec)(numberValue)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+    const formatLocalValue = value => {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "%") return `${formatted}%`;
+        if (unit === "$" || unit.toLowerCase() === "usd") return `$${formatted}`;
+        if (unit.startsWith("$")) return `$${formatted}${unit.slice(1)}`;
+        return `${formatted} ${unit}`;
+    };
+    const formatCalloutValue = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        const formatted = d3.format(".2f")(numberValue);
+        if (!unit) return formatted;
+        if (unit === "%") return `${formatted}%`;
+        if (unit === "$" || unit.toLowerCase() === "usd") return `$${formatted}`;
+        if (unit.startsWith("$")) return `$${formatted}${unit.slice(1)}`;
+        return `${formatted} ${unit}`;
+    };
+    const formatDateLabel = date => {
+        if (!(date instanceof Date) || !Number.isFinite(date.getTime())) return "";
+        return String(date.getFullYear());
+    };
+
+    const rows = chartData
+        .map((row, sourceIndex) => {
+            const date = parseTimeValue(row[xField]);
+            const value = Number(row[yField]);
+            return {
+                rawX: String(row[xField] ?? ""),
+                date,
+                value,
+                sourceIndex
+            };
+        })
+        .filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.sourceIndex - b.sourceIndex);
+
+    if (rows.length < 2) {
+        return addEmptyState("Area chart needs at least two valid points");
+    }
+
+    const processedRows = [];
+    rows.forEach((row, index) => {
+        processedRows.push(row);
+        if (index >= rows.length - 1) return;
+        const next = rows[index + 1];
+        if (!((row.value >= 0 && next.value < 0) || (row.value < 0 && next.value >= 0))) return;
+        const ratio = Math.abs(row.value) / (Math.abs(row.value) + Math.abs(next.value));
+        const zeroTime = new Date(row.date.getTime() + ratio * (next.date.getTime() - row.date.getTime()));
+        processedRows.push({
+            rawX: `${row.rawX}-${next.rawX}`,
+            date: zeroTime,
+            value: 0,
+            sourceIndex: `zero-${index}`,
+            isZeroPoint: true
+        });
+    });
+
+    const minObserved = d3.min(rows, d => d.value) ?? 0;
+    const maxObserved = d3.max(rows, d => d.value) ?? 1;
+    const minValue = Math.min(0, minObserved);
+    const maxValue = Math.max(0, maxObserved);
+    const valueRange = Math.max(1, maxValue - minValue);
+    const yPadding = Math.max(valueRange * 0.08, 1);
+    const yDomain = [minValue - yPadding, maxValue + yPadding];
+    if (minObserved >= 0) yDomain[0] = 0;
+    if (maxObserved <= 0) yDomain[1] = 0;
+
+    const firstPoint = rows[0];
+    const lastPoint = rows[rows.length - 1];
+    const peakPoint = rows.reduce((max, row) => row.value > max.value ? row : max, rows[0]);
+    const troughPoint = rows.reduce((min, row) => row.value < min.value ? row : min, rows[0]);
+    const delta = lastPoint.value - firstPoint.value;
+    const trendColor = delta < 0 ? red : blue;
+    const trendWord = delta < 0 ? "declined" : delta > 0 ? "rebounded" : "held steady";
+
+    const panelX = Math.max(18, width * 0.018);
+    const panelY = Math.max(8, height * 0.012);
+    const panelW = width - panelX * 2;
+    const panelH = height - panelY * 2;
+    const plotX = panelX + Math.max(62, panelW * 0.075);
+    const plotRight = panelX + panelW - Math.max(12, panelW * 0.016);
+    const plotTop = panelY + Math.max(58, panelH * 0.082);
+    const plotBottom = panelY + panelH - Math.max(58, panelH * 0.082);
+    const plotW = Math.max(160, plotRight - plotX);
+    const plotH = Math.max(160, plotBottom - plotTop);
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(rows, d => d.date))
+        .range([plotX, plotRight]);
+    const yScale = d3.scaleLinear()
+        .domain(yDomain)
+        .nice(5)
+        .range([plotBottom, plotTop]);
+    const zeroY = yScale(0);
+
+    const defs = svg.append("defs");
+    const shadow = defs.append("filter")
+        .attr("id", `area-chart-02-shadow-${idSuffix}`)
+        .attr("x", "-12%")
+        .attr("y", "-12%")
+        .attr("width", "124%")
+        .attr("height", "124%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 9)
+        .attr("flood-color", "#B9C2CD")
+        .attr("flood-opacity", 0.20);
+
+    const positiveGradientId = `area-chart-02-positive-${idSuffix}`;
+    const positiveGradient = defs.append("linearGradient")
+        .attr("id", positiveGradientId)
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", plotTop)
+        .attr("y2", zeroY);
+    positiveGradient.append("stop").attr("offset", "0%").attr("stop-color", red).attr("stop-opacity", 0.98);
+    positiveGradient.append("stop").attr("offset", "54%").attr("stop-color", red).attr("stop-opacity", 0.74);
+    positiveGradient.append("stop").attr("offset", "100%").attr("stop-color", red).attr("stop-opacity", 0.08);
+
+    const negativeGradientId = `area-chart-02-negative-${idSuffix}`;
+    const negativeGradient = defs.append("linearGradient")
+        .attr("id", negativeGradientId)
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", zeroY)
+        .attr("y2", plotBottom);
+    negativeGradient.append("stop").attr("offset", "0%").attr("stop-color", red).attr("stop-opacity", 0.18);
+    negativeGradient.append("stop").attr("offset", "100%").attr("stop-color", red).attr("stop-opacity", 0.74);
+
+    const clipId = `area-chart-02-clip-${idSuffix}`;
+    defs.append("clipPath")
+        .attr("id", clipId)
+        .append("rect")
+        .attr("x", plotX)
+        .attr("y", plotTop)
+        .attr("width", plotW)
+        .attr("height", plotH);
+
+    const redArea = d3.area()
+        .x(d => xScale(d.date))
+        .y0(zeroY)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+    const dataLine = d3.line()
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    const root = svg.append("g").attr("class", "area-chart-02-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-background")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", pageFill)
+        .attr("fill-opacity", 0);
+    root.append("rect")
+        .attr("class", "chart-style-panel chart-card-panel")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", 0)
+        .attr("fill", panelFill)
+        .attr("fill-opacity", 0)
+        .attr("stroke", "none");
+
+    root.append("text")
+        .attr("class", "chart-axis-caption chart-text")
+        .attr("x", plotX)
+        .attr("y", plotTop - 22)
+        .attr("fill", mutedText)
+        .style("font-family", titleFontFamily)
+        .style("font-size", "16px")
+        .style("font-weight", "900")
+        .style("letter-spacing", "0px")
+        .text(axisTitle);
+
+    const niceYDomain = yScale.domain();
+    const yTicks = yScale.ticks(6).filter(tick => tick >= niceYDomain[0] && tick <= niceYDomain[1]);
+    const gridLayer = root.append("g").attr("class", "plot-grid-layer");
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        gridLayer.append("line")
+            .attr("class", "y-grid-line")
+            .attr("x1", plotX)
+            .attr("x2", plotRight)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", tick === 0 ? "#AEB9C8" : "#C9D0DC")
+            .attr("stroke-width", tick === 0 ? 1.2 : 1)
+            .attr("stroke-dasharray", tick === 0 ? null : "6 7")
+            .attr("opacity", tick === 0 ? 0.9 : 0.72);
+        gridLayer.append("text")
+            .attr("class", "y-axis-tick chart-text")
+            .attr("x", plotX - 22)
+            .attr("y", y + 6)
+            .attr("text-anchor", "end")
+            .attr("fill", "#31405A")
+            .style("font-family", fontFamily)
+            .style("font-size", "18px")
+            .style("font-weight", "700")
+            .text(formatNumber(tick));
+    });
+
+    const plotLayer = root.append("g")
+        .attr("class", "area-plot-layer")
+        .attr("clip-path", `url(#${clipId})`);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-fill data-area")
+        .attr("d", redArea)
+        .attr("fill", `url(#${positiveGradientId})`)
+        .attr("data-point-count", rows.length)
+        .attr("data-first-x", firstPoint.rawX)
+        .attr("data-first-value", firstPoint.value)
+        .attr("data-last-x", lastPoint.rawX)
+        .attr("data-last-value", lastPoint.value)
+        .attr("data-min-x", troughPoint.rawX)
+        .attr("data-min-value", troughPoint.value)
+        .attr("data-max-x", peakPoint.rawX)
+        .attr("data-max-value", peakPoint.value);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line-underlay")
+        .attr("d", dataLine)
+        .attr("fill", "none")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 4.8)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("opacity", 0.94);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line data-line")
+        .attr("d", dataLine)
+        .attr("fill", "none")
+        .attr("stroke", red)
+        .attr("stroke-width", 3.6)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round");
+
+    root.append("line")
+        .attr("class", "zero-line")
+        .attr("x1", plotX)
+        .attr("x2", plotRight)
+        .attr("y1", zeroY)
+        .attr("y2", zeroY)
+        .attr("stroke", neutralLine)
+        .attr("stroke-width", 1.2);
+    root.append("line")
+        .attr("class", "x-axis-line")
+        .attr("x1", plotX)
+        .attr("x2", plotRight)
+        .attr("y1", plotBottom)
+        .attr("y2", plotBottom)
+        .attr("stroke", "#BBC6D3")
+        .attr("stroke-width", 1.1);
+    root.append("line")
+        .attr("class", "y-axis-line")
+        .attr("x1", plotX)
+        .attr("x2", plotX)
+        .attr("y1", plotTop)
+        .attr("y2", plotBottom)
+        .attr("stroke", "#BBC6D3")
+        .attr("stroke-width", 1.1);
+
+    const tickMap = new Map();
+    xScale.ticks(6).concat([firstPoint.date, lastPoint.date]).forEach(tick => {
+        tickMap.set(formatDateLabel(tick), tick);
+    });
+    const xTickDates = Array.from(tickMap.values()).sort((a, b) => a - b);
+    xTickDates.forEach(tick => {
+        const x = xScale(tick);
+        root.append("text")
+            .attr("class", "x-axis-label chart-text")
+            .attr("x", x)
+            .attr("y", plotBottom + 34)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#26394F")
+            .style("font-family", fontFamily)
+            .style("font-size", "17px")
+            .style("font-weight", "600")
+            .text(formatDateLabel(tick));
+    });
+
+    const keyPointSourceIndices = new Set([firstPoint, troughPoint, lastPoint].map(row => String(row.sourceIndex)));
+    const pointLayer = root.append("g").attr("class", "area-data-points");
+    rows.forEach(row => {
+        if (!keyPointSourceIndices.has(String(row.sourceIndex))) return;
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        const pointColor = red;
+        const point = pointLayer.append("g")
+            .attr("class", "area-point")
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value)
+            .attr("transform", `translate(${x}, ${y})`);
+        point.append("circle")
+            .attr("class", "area-point-outer")
+            .attr("r", 7.2)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", pointColor)
+            .attr("stroke-width", 2.3);
+        point.append("circle")
+            .attr("class", "area-point-inner")
+            .attr("r", 4.2)
+            .attr("fill", pointColor);
+    });
+
+    const labelRows = [];
+    const addLabelRow = (row, role) => {
+        if (labelRows.some(item => item.row.sourceIndex === row.sourceIndex)) return;
+        labelRows.push({ row, role });
+    };
+    addLabelRow(firstPoint, "first");
+    addLabelRow(troughPoint, "min");
+    addLabelRow(lastPoint, "last");
+    labelRows.sort((a, b) => a.row.date - b.row.date);
+
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const boxFrom = (x, y, w, h) => ({ left: x, right: x + w, top: y, bottom: y + h, width: w, height: h });
+    const boxesOverlap = (a, b, pad = 0) => !(a.right + pad <= b.left || b.right + pad <= a.left || a.bottom + pad <= b.top || b.bottom + pad <= a.top);
+    const placedLabelBoxes = [];
+
+    const labelLayer = root.append("g").attr("class", "key-point-labels");
+    labelRows.forEach((item, index) => {
+        const row = item.row;
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        const valueText = formatCalloutValue(row.value);
+        const yearText = formatDateLabel(row.date);
+        const isMin = item.role === "min";
+        const labelW = Math.max(72, valueText.length * 13 + 28);
+        const labelH = isMin ? 42 : 40;
+        const referenceOffsets = isMin
+            ? [{ dx: -labelW - 14, dy: -54 }, { dx: -labelW / 2, dy: -62 }, { dx: 14, dy: -56 }, { dx: -labelW - 8, dy: 20 }]
+            : item.role === "first"
+                ? [{ dx: 14, dy: -52 }, { dx: 6, dy: -46 }, { dx: -labelW / 2, dy: -50 }]
+                : [{ dx: -labelW + 8, dy: -52 }, { dx: -labelW - 6, dy: -46 }, { dx: -labelW / 2, dy: -50 }];
+        let best = { tx: clamp(x + referenceOffsets[0].dx, plotX + 4, plotRight - labelW - 4), ty: clamp(y + referenceOffsets[0].dy, plotTop + 4, plotBottom - labelH - 4), score: Number.POSITIVE_INFINITY };
+        referenceOffsets.forEach(offset => {
+            const candidateX = clamp(x + offset.dx, plotX + 4, plotRight - labelW - 4);
+            const candidateY = clamp(y + offset.dy, plotTop + 4, plotBottom - labelH - 4);
+            const box = boxFrom(candidateX, candidateY, labelW, labelH);
+            const overlapPenalty = placedLabelBoxes.reduce((sum, placed) => sum + (boxesOverlap(box, placed, 5) ? 60000 : 0), 0);
+            const pointDx = Math.abs(candidateX + labelW / 2 - x);
+            const pointDy = Math.abs(candidateY + labelH / 2 - y);
+            const rolePenalty = isMin ? Math.abs(candidateY + labelH - (y - 18)) : Math.abs(candidateY + labelH - (y - 14));
+            const score = overlapPenalty + pointDx * 0.45 + pointDy * 0.15 + rolePenalty;
+            if (score < best.score) best = { tx: candidateX, ty: candidateY, score };
+        });
+        const tx = best.tx;
+        const ty = best.ty;
+        placedLabelBoxes.push(boxFrom(tx, ty, labelW, labelH));
+        const fillColor = isMin ? "#F8FAFD" : red;
+        const strokeColor = isMin ? "#25314A" : red;
+        const textFill = isMin ? "#25314A" : "#FFFFFF";
+        const label = labelLayer.append("g")
+            .attr("class", `key-point-label ${item.role}-point-label`)
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value)
+            .attr("transform", `translate(${tx}, ${ty})`);
+
+        if (isMin) {
+            const leaderStartX = x - tx;
+            const leaderStartY = y - ty;
+            const leaderEndX = labelW * 0.78;
+            const leaderEndY = labelH;
+            label.append("path")
+                .attr("class", "key-point-leader")
+                .attr("d", `M ${leaderEndX} ${leaderEndY} L ${leaderStartX} ${leaderStartY}`)
+                .attr("fill", "none")
+                .attr("stroke", strokeColor)
+                .attr("stroke-width", 1.4)
+                .attr("opacity", 0.92);
+        } else {
+            const notchX = clamp(x - tx, 12, labelW - 12);
+            label.append("path")
+                .attr("class", "key-point-label-notch")
+                .attr("d", `M ${notchX - 7} ${labelH - 1} L ${notchX} ${labelH + 10} L ${notchX + 7} ${labelH - 1} Z`)
+                .attr("fill", fillColor);
+        }
+        label.append("rect")
+            .attr("class", "key-point-label-bg")
+            .attr("width", labelW)
+            .attr("height", labelH)
+            .attr("rx", isMin ? 7 : 6)
+            .attr("fill", fillColor)
+            .attr("stroke", strokeColor)
+            .attr("stroke-width", isMin ? 1.4 : 0)
+            .attr("opacity", 0.98);
+        label.append("text")
+            .attr("class", "key-point-value chart-text")
+            .attr("x", labelW / 2)
+            .attr("y", isMin ? 27 : 27)
+            .attr("text-anchor", "middle")
+            .attr("fill", textFill)
+            .style("font-family", titleFontFamily)
+            .style("font-size", "21px")
+            .style("font-weight", "900")
+            .text(valueText);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/area_chart_03.js

@@ -0,0 +1,545 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_chart_03",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[5, 30], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "trend"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+
+    const width = Math.max(900, Number(variables.width) || 900);
+    const height = Math.max(1180, Number(variables.height) || 1180);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFontFamily = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#27313D";
+    const pageFill = "#F7FAFC";
+    const panelFill = "#FFFFFF";
+    const idSuffix = String(containerSelector || "area-chart-03")
+        .replace(/[^a-zA-Z0-9_-]/g, "")
+        .slice(0, 24) || "area03";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "area-chart-03-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", pageFill);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!xField || !yField) {
+        return addEmptyState("Missing area chart fields");
+    }
+
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const shortText = (value, maxChars = 32) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+
+    const wrapWords = (value, maxChars, maxLines = 2) => {
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        if (!words.length) return [""];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (candidate.length <= maxChars || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) return lines;
+        return lines.slice(0, maxLines - 1).concat(lines.slice(maxLines - 1).join(" "));
+    };
+
+    const parseTimeValue = value => {
+        const raw = String(value ?? "").trim();
+        if (!raw) return null;
+        if (/^-?\d{1,6}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        {
+            const parsedByHelper = chartUtils.format.parseDate(value);
+            if (parsedByHelper instanceof Date && Number.isFinite(parsedByHelper.getTime())) return parsedByHelper;
+        }
+        const parsed = Date.parse(raw);
+        if (Number.isFinite(parsed)) return new Date(parsed);
+        return null;
+    };
+
+    const unitRaw = String(yColumn.unit || "").trim();
+    const unit = unitRaw.toLowerCase() === "none" ? "" : unitRaw;
+    const valueTitle = readableName(yColumn.label || yField || yColumn.description);
+    const axisTitle = `${shortText(valueTitle, 34).toUpperCase()}${unit ? ` (${unit})` : ""}`;
+
+    const formatNumber = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        const abs = Math.abs(numberValue);
+        const spec = abs >= 100000 ? ",.0f" : abs >= 1000 ? ",.1f" : abs >= 100 ? ",.1f" : abs >= 10 ? ",.1f" : abs >= 1 ? ",.2f" : ",.3f";
+        return d3.format(spec)(numberValue)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+
+    const formatLocalValue = value => {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "%") return `${formatted}%`;
+        if (unit === "$" || unit.toLowerCase() === "usd") return `$${formatted}`;
+        if (unit.startsWith("$")) return `$${formatted}${unit.slice(1)}`;
+        return `${formatted} ${unit}`;
+    };
+
+    const formatCompactValue = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        const abs = Math.abs(numberValue);
+        const prefix = unit === "$" || unit.toLowerCase() === "usd" || unit.startsWith("$") ? "$" : "";
+        const suffix = unit === "%" ? "%" : "";
+        if (abs >= 1000000) return `${prefix}${d3.format(".2f")(numberValue / 1000000).replace(/\.00$/, "")}M${suffix}`;
+        if (abs >= 1000) return `${prefix}${d3.format(".2f")(numberValue / 1000).replace(/\.00$/, "")}K${suffix}`;
+        return `${prefix}${formatNumber(numberValue)}${suffix}`;
+    };
+
+    const formatDateLabel = date => {
+        if (!(date instanceof Date) || !Number.isFinite(date.getTime())) return "";
+        return String(date.getFullYear());
+    };
+
+    const rows = chartData
+        .map((row, sourceIndex) => {
+            const date = parseTimeValue(row[xField]);
+            const value = Number(row[yField]);
+            return {
+                rawX: String(row[xField] ?? ""),
+                date,
+                value,
+                sourceIndex
+            };
+        })
+        .filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.sourceIndex - b.sourceIndex);
+
+    if (rows.length < 2) {
+        return addEmptyState("Area chart needs at least two valid points");
+    }
+
+    const minObserved = d3.min(rows, d => d.value) ?? 0;
+    const maxObserved = d3.max(rows, d => d.value) ?? 1;
+    const rawRange = Math.max(maxObserved - minObserved, Math.abs(maxObserved) * 0.08, 1);
+    let yBottom = minObserved - rawRange * 0.22;
+    let yTop = maxObserved + rawRange * 0.14;
+    if (minObserved >= 0) yBottom = Math.max(0, yBottom);
+    if (minObserved === maxObserved) {
+        const pad = Math.max(Math.abs(maxObserved) * 0.12, 1);
+        yBottom = minObserved >= 0 ? Math.max(0, minObserved - pad) : minObserved - pad;
+        yTop = maxObserved + pad;
+    }
+
+    const firstPoint = rows[0];
+    const lastPoint = rows[rows.length - 1];
+    const peakPoint = rows.reduce((max, row) => row.value > max.value ? row : max, rows[0]);
+    const lowPoint = rows.reduce((min, row) => row.value < min.value ? row : min, rows[0]);
+    const delta = lastPoint.value - firstPoint.value;
+    const trendWord = delta < 0 ? "lower" : delta > 0 ? "higher" : "steady";
+    const changeNoun = delta < 0 ? "Decrease" : delta > 0 ? "Increase" : "Change";
+    const percentDelta = firstPoint.value !== 0 ? Math.abs(delta / firstPoint.value) * 100 : null;
+    const changeMetric = percentDelta === null ? formatLocalValue(Math.abs(delta)) : `${d3.format(".1f")(percentDelta)}%`;
+    const firstYear = formatDateLabel(firstPoint.date);
+    const lastYear = formatDateLabel(lastPoint.date);
+
+    const referenceBlue = "#0B72D9";
+    const referenceBlueDark = "#075CB5";
+    const referenceBlueLight = "#CFE8FF";
+    const referenceGreen = "#22A843";
+    const referenceGreenDark = "#0E7E24";
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+    const outerX = Math.max(28, width * 0.055);
+    const outerY = Math.max(18, height * 0.035);
+    const bottomRowH = 0;
+    const infoH = 0;
+    const infoGap = 0;
+    const infoY = height - outerY;
+    const chartCardX = outerX;
+    const chartCardY = Math.max(126, height * 0.21);
+    const chartCardW = width - outerX * 2;
+    const chartCardH = Math.max(300, infoY - chartCardY - Math.max(18, height * 0.035));
+    const plotX = chartCardX + Math.max(72, chartCardW * 0.115);
+    const plotRight = chartCardX + chartCardW - Math.max(36, chartCardW * 0.052);
+    const plotTop = chartCardY + Math.max(78, chartCardH * 0.19);
+    const plotBottom = chartCardY + chartCardH - Math.max(44, chartCardH * 0.12);
+    const plotW = Math.max(180, plotRight - plotX);
+    const plotH = Math.max(135, plotBottom - plotTop);
+    const baselineY = plotBottom;
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(rows, d => d.date))
+        .range([plotX, plotRight]);
+    const yScale = d3.scaleLinear()
+        .domain([yBottom, yTop])
+        .nice(5)
+        .range([plotBottom, plotTop]);
+
+    const defs = svg.append("defs");
+    const cardShadow = defs.append("filter")
+        .attr("id", `area-chart-03-card-shadow-${idSuffix}`)
+        .attr("x", "-10%")
+        .attr("y", "-10%")
+        .attr("width", "120%")
+        .attr("height", "120%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 7)
+        .attr("stdDeviation", 8)
+        .attr("flood-color", "#C9D8E6")
+        .attr("flood-opacity", 0.28);
+
+    const areaGradientId = `area-chart-03-fill-${idSuffix}`;
+    const areaGradient = defs.append("linearGradient")
+        .attr("id", areaGradientId)
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", plotTop)
+        .attr("y2", baselineY);
+    areaGradient.append("stop").attr("offset", "0%").attr("stop-color", referenceBlue).attr("stop-opacity", 0.42);
+    areaGradient.append("stop").attr("offset", "58%").attr("stop-color", referenceBlueLight).attr("stop-opacity", 0.42);
+    areaGradient.append("stop").attr("offset", "100%").attr("stop-color", "#F3FAFF").attr("stop-opacity", 0.88);
+
+    const lineGradientId = `area-chart-03-line-${idSuffix}`;
+    const lineGradient = defs.append("linearGradient")
+        .attr("id", lineGradientId)
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", plotX)
+        .attr("x2", plotRight)
+        .attr("y1", 0)
+        .attr("y2", 0);
+    lineGradient.append("stop").attr("offset", "0%").attr("stop-color", referenceBlueDark);
+    lineGradient.append("stop").attr("offset", "100%").attr("stop-color", referenceBlue);
+
+    const clipId = `area-chart-03-clip-${idSuffix}`;
+    defs.append("clipPath")
+        .attr("id", clipId)
+        .append("rect")
+        .attr("x", plotX)
+        .attr("y", plotTop)
+        .attr("width", plotW)
+        .attr("height", plotH);
+
+    const area = d3.area()
+        .x(d => xScale(d.date))
+        .y0(baselineY)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+    const line = d3.line()
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    const root = svg.append("g").attr("class", "area-chart-03-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-background")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "#F7FBFF")
+        .attr("fill-opacity", 0);
+    root.append("circle")
+        .attr("class", "soft-background-cloud decorative-shape")
+        .attr("cx", width * 0.60)
+        .attr("cy", Math.max(56, height * 0.115))
+        .attr("r", Math.max(24, width * 0.045))
+        .attr("fill", "#FFFFFF")
+        .attr("opacity", 0.86);
+    root.append("circle")
+        .attr("class", "soft-background-cloud decorative-shape")
+        .attr("cx", width * 0.48)
+        .attr("cy", Math.max(78, height * 0.145))
+        .attr("r", Math.max(18, width * 0.035))
+        .attr("fill", "#FFFFFF")
+        .attr("opacity", 0.76);
+
+    const decorW = Math.min(180, Math.max(142, width * 0.24));
+    root.append("rect")
+        .attr("class", "top-decorative-image-slot decorative-image-slot")
+        .attr("data-reserved-slot", "header_illustration_slot")
+        .attr("x", width - outerX - decorW)
+        .attr("y", Math.max(8, outerY * 0.45))
+        .attr("width", decorW)
+        .attr("height", decorW * 0.72)
+        .attr("fill", "none")
+        .attr("stroke", "none");
+
+    root.append("rect")
+        .attr("class", "chart-style-panel chart-card-panel")
+        .attr("x", chartCardX)
+        .attr("y", chartCardY)
+        .attr("width", chartCardW)
+        .attr("height", chartCardH)
+        .attr("rx", 14)
+        .attr("fill", panelFill)
+        .attr("stroke", "#E6EEF7")
+        .attr("filter", `url(#area-chart-03-card-shadow-${idSuffix})`);
+
+    root.append("text")
+        .attr("class", "chart-axis-caption chart-text")
+        .attr("x", chartCardX + 28)
+        .attr("y", chartCardY + 34)
+        .attr("fill", referenceBlueDark)
+        .style("font-family", titleFontFamily)
+        .style("font-size", "12px")
+        .style("font-weight", "900")
+        .style("letter-spacing", "0px")
+        .text(axisTitle);
+
+    const yTicks = yScale.ticks(5);
+    const gridLayer = root.append("g").attr("class", "plot-grid-layer");
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        gridLayer.append("line")
+            .attr("class", "y-grid-line")
+            .attr("x1", plotX)
+            .attr("x2", plotRight)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", "#D7E1EF")
+            .attr("stroke-width", 0.9)
+            .attr("stroke-dasharray", "4 5");
+        gridLayer.append("text")
+            .attr("class", "y-axis-tick chart-text")
+            .attr("x", plotX - 16)
+            .attr("y", y + 4)
+            .attr("text-anchor", "end")
+            .attr("fill", "#2F3B52")
+            .style("font-family", fontFamily)
+            .style("font-size", "12px")
+            .text(formatNumber(tick));
+    });
+
+    const plotLayer = root.append("g")
+        .attr("class", "area-plot-layer")
+        .attr("clip-path", `url(#${clipId})`);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-fill data-area positive-area-fill")
+        .attr("d", area)
+        .attr("fill", `url(#${areaGradientId})`)
+        .attr("data-point-count", rows.length)
+        .attr("data-first-x", firstPoint.rawX)
+        .attr("data-first-value", firstPoint.value)
+        .attr("data-last-x", lastPoint.rawX)
+        .attr("data-last-value", lastPoint.value)
+        .attr("data-min-x", lowPoint.rawX)
+        .attr("data-min-value", lowPoint.value)
+        .attr("data-max-x", peakPoint.rawX)
+        .attr("data-max-value", peakPoint.value);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line-underlay")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 7.5)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("opacity", 0.96);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line data-line")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", `url(#${lineGradientId})`)
+        .attr("stroke-width", 4)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round");
+
+    root.append("line")
+        .attr("class", "x-axis-line")
+        .attr("x1", plotX)
+        .attr("x2", plotRight)
+        .attr("y1", baselineY)
+        .attr("y2", baselineY)
+        .attr("stroke", "#BAC8D8")
+        .attr("stroke-width", 1.1);
+    root.append("line")
+        .attr("class", "y-axis-line")
+        .attr("x1", plotX)
+        .attr("x2", plotX)
+        .attr("y1", plotTop)
+        .attr("y2", plotBottom)
+        .attr("stroke", "#BAC8D8")
+        .attr("stroke-width", 1.1);
+
+    const tickKey = date => date instanceof Date ? date.getTime() : new Date(date).getTime();
+    const xTickDates = rows.length <= 5
+        ? rows.map(row => row.date)
+        : Array.from(
+            new Map(
+                [firstPoint.date, ...xScale.ticks(4), lastPoint.date]
+                    .filter(date => date >= firstPoint.date && date <= lastPoint.date)
+                    .map(date => [tickKey(date), date])
+            ).values()
+        ).sort((a, b) => a - b);
+    xTickDates.forEach(tick => {
+        const x = xScale(tick);
+        root.append("text")
+            .attr("class", "x-axis-label chart-text")
+            .attr("x", x)
+            .attr("y", baselineY + 26)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#0F1E38")
+            .style("font-family", fontFamily)
+            .style("font-size", "12px")
+            .text(formatDateLabel(tick));
+    });
+
+    const pointLayer = root.append("g").attr("class", "area-data-points");
+    rows.forEach(row => {
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        const point = pointLayer.append("g")
+            .attr("class", "area-point")
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value)
+            .attr("transform", `translate(${x}, ${y})`);
+        point.append("circle")
+            .attr("class", "area-point-outer")
+            .attr("r", 6.4)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", referenceBlue)
+            .attr("stroke-width", 3.1);
+        point.append("circle")
+            .attr("class", "area-point-inner")
+            .attr("r", 2.5)
+            .attr("fill", referenceBlue);
+    });
+
+    const labelLayer = root.append("g").attr("class", "key-point-labels");
+    [
+        { row: firstPoint, role: "first" },
+        { row: lastPoint, role: "last" }
+    ].filter((item, index, array) => array.findIndex(other => other.row.sourceIndex === item.row.sourceIndex) === index)
+        .forEach(item => {
+            const row = item.row;
+            const x = xScale(row.date);
+            const y = yScale(row.value);
+            const valueText = formatCompactValue(row.value);
+            const labelW = Math.max(58, valueText.length * 8.3 + 20);
+            const labelH = 27;
+            const tx = item["role"] === "first"
+                ? clamp(x - labelW * 0.18, plotX + 4, plotRight - labelW - 4)
+                : clamp(x - labelW * 0.72, plotX + 4, plotRight - labelW - 4);
+            const ty = clamp(y - labelH - 17, plotTop + 4, plotBottom - labelH - 8);
+            const pointerX = clamp(x - tx, 10, labelW - 10);
+            const label = labelLayer.append("g")
+                .attr("class", `key-point-label ${item.role}-point-label`)
+                .attr("data-source-index", row.sourceIndex)
+                .attr("data-x", row.rawX)
+                .attr("data-value", row.value)
+                .attr("transform", `translate(${tx}, ${ty})`);
+            label.append("rect")
+                .attr("class", "key-point-label-bg")
+                .attr("width", labelW)
+                .attr("height", labelH)
+                .attr("rx", 6)
+                .attr("fill", referenceBlue)
+                .attr("opacity", 0.98);
+            label.append("path")
+                .attr("class", "key-point-label-pointer")
+                .attr("d", `M ${pointerX - 6} ${labelH - 1} L ${pointerX + 6} ${labelH - 1} L ${pointerX} ${labelH + 8} Z`)
+                .attr("fill", referenceBlue)
+                .attr("opacity", 0.98);
+            label.append("text")
+                .attr("class", "key-point-value chart-text")
+                .attr("x", labelW / 2)
+                .attr("y", 18)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#FFFFFF")
+                .style("font-family", titleFontFamily)
+                .style("font-size", "13px")
+                .style("font-weight", "900")
+                .text(valueText);
+        });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/area_chart_04.js

@@ -0,0 +1,718 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_chart_04",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[5, 30], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_title": "yes",
+    "has_x_axis": "yes",
+    "has_y_axis": "no",
+    "chart_for": "trend"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors_dark || jsonData.colors || {};
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+
+    const width = Math.max(1200, Number(variables.width) || 1200);
+    const height = Math.max(800, Number(variables.height) || Math.round(width * 2 / 3));
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFontFamily = typography.title?.font_family || fontFamily;
+    const textColor = "#F5FBF8";
+    const mutedText = "#B7C4C8";
+    const bgTop = "#031522";
+    const bgBottom = "#071E26";
+    const primary = sourceColors.other?.primary || "#A5DEBE";
+    const primarySoft = "#9DE5B6";
+    const primaryMid = "#4FC98D";
+    const primaryDark = "#103B35";
+    const cyan = "#1FA6B0";
+    const idSuffix = String(containerSelector || "area-chart-04")
+        .replace(/[^a-zA-Z0-9_-]/g, "")
+        .slice(0, 24) || "area04";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "area-chart-04-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", bgTop);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!xField || !yField) {
+        return addEmptyState("Missing area chart fields");
+    }
+
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const shortText = (value, maxChars = 36) => {
+        const clean = readableName(value);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+
+    const wrapWords = (value, maxChars, maxLines = 2) => {
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        if (!words.length) return [""];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (candidate.length <= maxChars || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) return lines;
+        return lines.slice(0, maxLines - 1).concat(lines.slice(maxLines - 1).join(" "));
+    };
+
+    const parseTimeValue = value => {
+        const raw = String(value ?? "").trim();
+        if (!raw) return null;
+        if (/^-?\d{1,6}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        {
+            const parsedByHelper = chartUtils.format.parseDate(value);
+            if (parsedByHelper instanceof Date && Number.isFinite(parsedByHelper.getTime())) return parsedByHelper;
+        }
+        const parsed = Date.parse(raw);
+        if (Number.isFinite(parsed)) return new Date(parsed);
+        return null;
+    };
+
+    const unitRaw = String(yColumn.unit || "").trim();
+    const unit = unitRaw.toLowerCase() === "none" ? "" : unitRaw;
+    const valueTitle = readableName(yColumn.label || yField || yColumn.description);
+    const axisTitle = shortText(valueTitle, 38).toUpperCase();
+    const rawTitle = String(titles.main_title || metadata.title || `${valueTitle} on the Rise`).trim();
+    const titleMatch = rawTitle.match(/\bon\s+the\s+rise\b/i);
+    const titleKicker = titleMatch
+        ? rawTitle.slice(0, titleMatch.index).trim().toUpperCase()
+        : rawTitle.toUpperCase();
+    const titleEmphasis = titleMatch
+        ? rawTitle.slice(titleMatch.index).trim()
+        : "on the Rise";
+    const subtitleText = String(
+        titles.sub_title
+        || metadata.description
+        || `${valueTitle} over time.`
+    ).trim();
+
+    const formatNumber = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        const abs = Math.abs(numberValue);
+        const spec = abs >= 100000 ? ",.0f" : abs >= 1000 ? ",.1f" : abs >= 100 ? ",.1f" : abs >= 10 ? ",.1f" : abs >= 1 ? ",.2f" : ",.3f";
+        return d3.format(spec)(numberValue)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+
+    const formatLocalValue = value => {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "%") return `${formatted}%`;
+        if (unit === "$" || unit.toLowerCase() === "usd") return `$${formatted}`;
+        if (unit === "£") return `£${formatted}`;
+        if (unit.toLowerCase() === "£k") return `£${formatted}k`;
+        if (unit.startsWith("$")) return `$${formatted}${unit.slice(1)}`;
+        return `${formatted} ${unit}`;
+    };
+
+    const formatCompactValue = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        if (unit === "%") return `${formatNumber(numberValue)}%`;
+        if (unit === "£" || unit.toLowerCase() === "£k") {
+            return unit.toLowerCase() === "£k" ? `£${formatNumber(numberValue)}k` : `£${formatNumber(numberValue)}`;
+        }
+        const abs = Math.abs(numberValue);
+        const suffix = unit && unit !== "$" && unit.toLowerCase() !== "usd" ? ` ${unit}` : "";
+        const prefix = unit === "$" || unit.toLowerCase() === "usd" || unit.startsWith("$") ? "$" : "";
+        if (abs >= 1000000) return `${prefix}${d3.format(".2f")(numberValue / 1000000).replace(/\.00$/, "")}M${suffix}`;
+        if (abs >= 1000) return `${prefix}${d3.format(".2f")(numberValue / 1000).replace(/\.00$/, "")}K${suffix}`;
+        return `${prefix}${formatNumber(numberValue)}${suffix}`;
+    };
+    const formatPillValue = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        const prefix = unit === "$" || unit.toLowerCase() === "usd" || unit.startsWith("$") ? "$" : "";
+        if (Math.abs(numberValue) >= 1000) return `${prefix}${d3.format(".2f")(numberValue / 1000)}K`;
+        return `${prefix}${formatNumber(numberValue)}`;
+    };
+
+    const formatDateLabel = date => {
+        if (!(date instanceof Date) || !Number.isFinite(date.getTime())) return "";
+        return String(date.getFullYear());
+    };
+
+    const rows = chartData
+        .map((row, sourceIndex) => {
+            const date = parseTimeValue(row[xField]);
+            const value = Number(row[yField]);
+            return {
+                rawX: String(row[xField] ?? ""),
+                date,
+                value,
+                sourceIndex
+            };
+        })
+        .filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.sourceIndex - b.sourceIndex);
+
+    if (rows.length < 2) {
+        return addEmptyState("Area chart needs at least two valid points");
+    }
+
+    const minObserved = d3.min(rows, d => d.value) ?? 0;
+    const maxObserved = d3.max(rows, d => d.value) ?? 1;
+    const valueRange = Math.max(maxObserved - minObserved, Math.abs(maxObserved) * 0.08, 1);
+    const yTop = maxObserved + valueRange * 0.18;
+    const yBottom = minObserved >= 0 ? Math.max(0, minObserved - valueRange * 0.34) : minObserved - valueRange * 0.18;
+
+    const firstPoint = rows[0];
+    const lastPoint = rows[rows.length - 1];
+    const peakPoint = rows.reduce((max, row) => row.value > max.value ? row : max, rows[0]);
+    const lowPoint = rows.reduce((min, row) => row.value < min.value ? row : min, rows[0]);
+    const delta = lastPoint.value - firstPoint.value;
+    const trendWord = delta < 0 ? "lower" : delta > 0 ? "higher" : "steady";
+    const growthRatio = firstPoint.value !== 0 ? lastPoint.value / firstPoint.value : null;
+    const growthText = growthRatio && Number.isFinite(growthRatio)
+        ? `${d3.format(".1f")(Math.abs(growthRatio))}x`
+        : formatCompactValue(Math.abs(delta));
+    const firstYear = formatDateLabel(firstPoint.date);
+    const lastYear = formatDateLabel(lastPoint.date);
+
+    const padX = Math.max(42, width * 0.035);
+    const padY = Math.max(46, height * 0.055);
+    const plotLeft = padX;
+    const plotRight = width - Math.max(58, width * 0.056);
+    const plotTop = Math.max(260, height * 0.33);
+    const plotBottom = height - Math.max(96, height * 0.145);
+    const plotW = Math.max(260, plotRight - plotLeft);
+    const plotH = Math.max(170, plotBottom - plotTop);
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(rows, d => d.date))
+        .range([plotLeft, plotRight]);
+    const yScale = d3.scaleLinear()
+        .domain([yBottom, yTop])
+        .nice(5)
+        .range([plotBottom, plotTop]);
+
+    const defs = svg.append("defs");
+    const bgGradientId = `area-chart-04-bg-${idSuffix}`;
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", bgGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", bgTop);
+    bgGradient.append("stop").attr("offset", "58%").attr("stop-color", bgBottom);
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#010A12");
+
+    const glowId = `area-chart-04-glow-${idSuffix}`;
+    const glow = defs.append("filter")
+        .attr("id", glowId)
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    glow.append("feGaussianBlur")
+        .attr("stdDeviation", 4)
+        .attr("result", "blur");
+    glow.append("feMerge")
+        .selectAll("feMergeNode")
+        .data(["blur", "SourceGraphic"])
+        .enter()
+        .append("feMergeNode")
+        .attr("in", d => d);
+
+    const areaGradientId = `area-chart-04-fill-${idSuffix}`;
+    const areaGradient = defs.append("linearGradient")
+        .attr("id", areaGradientId)
+        .attr("gradientUnits", "userSpaceOnUse")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", plotTop)
+        .attr("y2", plotBottom);
+    areaGradient.append("stop").attr("offset", "0%").attr("stop-color", primarySoft).attr("stop-opacity", 0.88);
+    areaGradient.append("stop").attr("offset", "55%").attr("stop-color", primaryMid).attr("stop-opacity", 0.46);
+    areaGradient.append("stop").attr("offset", "100%").attr("stop-color", primaryDark).attr("stop-opacity", 0.10);
+
+    const clipId = `area-chart-04-clip-${idSuffix}`;
+    defs.append("clipPath")
+        .attr("id", clipId)
+        .append("rect")
+        .attr("x", plotLeft)
+        .attr("y", plotTop - 24)
+        .attr("width", plotW)
+        .attr("height", plotH + 24);
+
+    const area = d3.area()
+        .x(d => xScale(d.date))
+        .y0(plotBottom)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+    const line = d3.line()
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    const root = svg.append("g").attr("class", "area-chart-04-reference-panel");
+    root.append("rect")
+        .attr("class", "chart-style-background")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", `url(#${bgGradientId})`);
+
+    const titleSlot = root.append("g")
+        .attr("class", "header-title-art-slot")
+        .attr("data-reserved-slot", "header_title_art_slot")
+        .attr("transform", `translate(${padX}, ${padY + height * 0.02})`);
+    const titleKickerLines = wrapWords(titleKicker, 40, 2);
+    const titleKickerFont = Math.max(25, width * 0.026);
+    const titleKickerLineH = titleKickerFont * 1.18;
+    titleKickerLines.forEach((lineText, index) => {
+        titleSlot.append("text")
+            .attr("class", "reference-title-kicker chart-text")
+            .attr("x", 0)
+            .attr("y", index * titleKickerLineH)
+            .attr("fill", textColor)
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${titleKickerFont}px`)
+            .style("font-weight", "900")
+            .style("letter-spacing", "0px")
+            .text(lineText);
+    });
+    const titleEmphasisY = Math.max(72, height * 0.09) + (titleKickerLines.length - 1) * titleKickerLineH;
+    titleSlot.append("text")
+        .attr("class", "reference-title-emphasis chart-text")
+        .attr("x", 0)
+        .attr("y", titleEmphasisY)
+        .attr("fill", primarySoft)
+        .style("font-family", "Georgia, 'Times New Roman', serif")
+        .style("font-size", `${Math.max(58, width * 0.054)}px`)
+        .style("font-weight", "900")
+        .style("letter-spacing", "0px")
+        .text(titleEmphasis);
+    const subtitleLines = wrapWords(subtitleText, 44, 2);
+    const subtitleY = titleEmphasisY + Math.max(54, height * 0.068);
+    subtitleLines.forEach((lineText, index) => {
+        titleSlot.append("text")
+            .attr("class", "reference-subtitle chart-text")
+            .attr("x", 0)
+            .attr("y", subtitleY + index * Math.max(25, height * 0.029))
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(20, width * 0.018)}px`)
+            .style("font-weight", "500")
+            .style("letter-spacing", "0px")
+            .text(lineText);
+    });
+    titleSlot.append("line")
+        .attr("class", "reference-title-accent")
+        .attr("x1", 0)
+        .attr("x2", Math.max(50, width * 0.042))
+        .attr("y1", subtitleY + subtitleLines.length * Math.max(25, height * 0.029) + 22)
+        .attr("y2", subtitleY + subtitleLines.length * Math.max(25, height * 0.029) + 22)
+        .attr("stroke", primaryMid)
+        .attr("stroke-width", Math.max(4, width * 0.004))
+        .attr("stroke-linecap", "round");
+
+    root.append("path")
+        .attr("class", "stage-light decorative-shape")
+        .attr("d", `M ${width * 0.70} ${padY} L ${width * 0.84} ${padY} L ${width * 0.78} ${plotBottom + 52} Z`)
+        .attr("fill", cyan)
+        .attr("opacity", 0.10);
+    root.append("path")
+        .attr("class", "stage-light decorative-shape")
+        .attr("d", `M ${width * 0.86} ${padY} L ${width * 0.98} ${padY} L ${width * 0.82} ${plotBottom + 36} Z`)
+        .attr("fill", cyan)
+        .attr("opacity", 0.08);
+
+    const insightX = padX;
+    const insightY = Math.max(plotTop + 18, height * 0.39);
+    const insightW = Math.min(300, Math.max(248, width * 0.23));
+    const insightH = Math.max(142, height * 0.18);
+    const insight = root.append("g")
+        .attr("class", "insight-callout reference-insight-card")
+        .attr("transform", `translate(${insightX}, ${insightY})`);
+    insight.append("rect")
+        .attr("class", "insight-callout-card")
+        .attr("width", insightW)
+        .attr("height", insightH)
+        .attr("rx", 9)
+        .attr("fill", "#071C25")
+        .attr("stroke", "#5E9A78")
+        .attr("stroke-width", 1)
+        .attr("opacity", 0.72);
+    const calloutIcon = insight.append("g")
+        .attr("class", "callout-icon-slot decorative-icon-slot")
+        .attr("data-reserved-slot", "growth_icon_slot")
+        .attr("transform", `translate(${Math.max(63, insightW * 0.25)}, ${insightH * 0.47})`);
+    calloutIcon.append("circle")
+        .attr("r", Math.min(48, insightH * 0.28))
+        .attr("fill", "none")
+        .attr("stroke", "#8CCB8F")
+        .attr("stroke-width", 2.2)
+        .attr("opacity", 0.9);
+    const growthRounded = growthRatio && Number.isFinite(growthRatio)
+        ? `${Math.max(1, Math.round(Math.abs(growthRatio)))}x`
+        : growthText;
+    insight.append("text")
+        .attr("class", "callout-nearly chart-text")
+        .attr("x", insightW * 0.52)
+        .attr("y", insightH * 0.30)
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(18, width * 0.017)}px`)
+        .style("font-weight", "500")
+        .text(delta === 0 ? "Nearly" : "Nearly");
+    insight.append("text")
+        .attr("class", "callout-growth-value chart-text")
+        .attr("x", insightW * 0.52)
+        .attr("y", insightH * 0.63)
+        .attr("fill", primarySoft)
+        .style("font-family", "Georgia, 'Times New Roman', serif")
+        .style("font-size", `${Math.max(48, width * 0.049)}px`)
+        .style("font-weight", "900")
+        .style("letter-spacing", "0px")
+        .text(growthRounded);
+    ["growth in", `${Math.max(1, Number(lastYear) - Number(firstYear))} years`].forEach((lineText, lineIndex) => {
+        insight.append("text")
+            .attr("class", "callout-subtitle chart-text")
+            .attr("x", insightW * 0.52)
+            .attr("y", insightH * 0.76 + lineIndex * Math.max(22, height * 0.027))
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(18, width * 0.017)}px`)
+            .style("font-weight", "500")
+            .text(lineText);
+    });
+
+    const decorW = Math.min(width * 0.36, plotW * 0.42);
+    const decorH = Math.min(height * 0.30, plotH * 0.52);
+    const decor = root.append("g")
+        .attr("class", "venue-illustration-slot right-decorative-image-slot decorative-image-slot")
+        .attr("data-reserved-slot", "venue_illustration_slot")
+        .attr("data-asset-owner", "image2")
+        .attr("data-anchor", "plot-lower-right")
+        .attr("transform", `translate(${plotRight - decorW - width * 0.02}, ${plotBottom - decorH - height * 0.035})`)
+        .attr("opacity", 0.68);
+    decor.append("rect")
+        .attr("class", "venue-slot-bbox")
+        .attr("width", decorW)
+        .attr("height", decorH)
+        .attr("rx", 12)
+        .attr("fill", "#0B2C2A")
+        .attr("stroke", primarySoft)
+        .attr("stroke-width", 1.2)
+        .attr("stroke-opacity", 0.25)
+        .attr("fill-opacity", 0.16);
+    decor.append("path")
+        .attr("class", "venue-slot-arch semantic-placeholder")
+        .attr("d", `M ${decorW * 0.08} ${decorH * 0.66} C ${decorW * 0.26} ${decorH * 0.18}, ${decorW * 0.74} ${decorH * 0.18}, ${decorW * 0.92} ${decorH * 0.66}`)
+        .attr("fill", "none")
+        .attr("stroke", primarySoft)
+        .attr("stroke-width", 2.2)
+        .attr("stroke-opacity", 0.42)
+        .attr("stroke-linecap", "round");
+    decor.append("line")
+        .attr("class", "venue-slot-stage semantic-placeholder")
+        .attr("x1", decorW * 0.12)
+        .attr("x2", decorW * 0.88)
+        .attr("y1", decorH * 0.72)
+        .attr("y2", decorH * 0.72)
+        .attr("stroke", primarySoft)
+        .attr("stroke-width", 2)
+        .attr("stroke-opacity", 0.35)
+        .attr("stroke-linecap", "round");
+    d3.range(12).forEach(index => {
+        decor.append("circle")
+            .attr("class", "venue-slot-audience-dot semantic-placeholder")
+            .attr("cx", decorW * (0.14 + index * 0.065))
+            .attr("cy", decorH * (0.83 + (index % 2) * 0.045))
+            .attr("r", Math.max(3, width * 0.004))
+            .attr("fill", primarySoft)
+            .attr("fill-opacity", 0.18);
+    });
+
+    const plotLayer = root.append("g")
+        .attr("class", "area-plot-layer")
+        .attr("clip-path", `url(#${clipId})`);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-fill data-area positive-area-fill")
+        .attr("d", area)
+        .attr("fill", `url(#${areaGradientId})`)
+        .attr("data-point-count", rows.length)
+        .attr("data-first-x", firstPoint.rawX)
+        .attr("data-first-value", firstPoint.value)
+        .attr("data-last-x", lastPoint.rawX)
+        .attr("data-last-value", lastPoint.value)
+        .attr("data-min-x", lowPoint.rawX)
+        .attr("data-min-value", lowPoint.value)
+        .attr("data-max-x", peakPoint.rawX)
+        .attr("data-max-value", peakPoint.value);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line-underlay")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", "#E8FFF0")
+        .attr("stroke-width", 6)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round")
+        .attr("opacity", 0.88)
+        .attr("filter", `url(#${glowId})`);
+    plotLayer.append("path")
+        .datum(rows)
+        .attr("class", "area-line data-line")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", primarySoft)
+        .attr("stroke-width", 3.3)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+
+    root.append("line")
+        .attr("class", "x-axis-line")
+        .attr("x1", plotLeft)
+        .attr("x2", plotRight)
+        .attr("y1", plotBottom)
+        .attr("y2", plotBottom)
+        .attr("stroke", "#9AA8AD")
+        .attr("stroke-width", 1.2)
+        .attr("opacity", 0.78);
+
+    const chooseRowsByPosition = () => {
+        if (rows.length <= 5) return rows;
+        const indexes = [0, Math.round((rows.length - 1) * 0.25), Math.round((rows.length - 1) * 0.5), Math.round((rows.length - 1) * 0.75), rows.length - 1];
+        return indexes
+            .map(index => rows[index])
+            .filter((row, index, array) => array.findIndex(item => item.sourceIndex === row.sourceIndex) === index)
+            .sort((a, b) => a.date - b.date);
+    };
+    const labeledRows = chooseRowsByPosition();
+    const labeledIndexes = new Set(labeledRows.map(row => row.sourceIndex));
+
+    const guideLayer = root.append("g").attr("class", "point-guide-layer");
+    labeledRows.forEach(row => {
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        guideLayer.append("line")
+            .attr("class", "point-guide")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", y + 8)
+            .attr("y2", plotBottom)
+            .attr("stroke", "#A9DDBB")
+            .attr("stroke-width", 1.1)
+            .attr("stroke-dasharray", "4 5")
+            .attr("opacity", 0.54)
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value);
+        guideLayer.append("circle")
+            .attr("class", "x-axis-dot")
+            .attr("cx", x)
+            .attr("cy", plotBottom)
+            .attr("r", 2.8)
+            .attr("fill", mutedText)
+            .attr("opacity", 0.82);
+    });
+
+    const pointLayer = root.append("g").attr("class", "area-data-points");
+    rows.forEach(row => {
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        const point = pointLayer.append("g")
+            .attr("class", labeledIndexes.has(row.sourceIndex) ? "area-point labeled-area-point" : "area-point")
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value)
+            .attr("transform", `translate(${x}, ${y})`);
+        point.append("circle")
+            .attr("class", "area-point-outer")
+            .attr("r", labeledIndexes.has(row.sourceIndex) ? 6.3 : 3.1)
+            .attr("fill", bgTop)
+            .attr("stroke", "#F3FFF7")
+            .attr("stroke-width", labeledIndexes.has(row.sourceIndex) ? 3 : 1.5);
+        point.append("circle")
+            .attr("class", "area-point-inner")
+            .attr("r", labeledIndexes.has(row.sourceIndex) ? 2.5 : 1.4)
+            .attr("fill", primarySoft);
+    });
+
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const boxFrom = (x, y, w, h) => ({ left: x, right: x + w, top: y, bottom: y + h, width: w, height: h });
+    const boxesOverlap = (a, b, pad = 0) => !(a.right + pad <= b.left || b.right + pad <= a.left || a.bottom + pad <= b.top || b.bottom + pad <= a.top);
+    const placedLabelBoxes = [];
+    const labelLayer = root.append("g").attr("class", "key-point-labels");
+    labeledRows.forEach(row => {
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        const valueText = formatPillValue(row.value);
+        const labelW = Math.max(86, valueText.length * Math.max(8.2, width * 0.0068) + 28);
+        const labelH = Math.max(38, height * 0.046);
+        const xOptions = [
+            x - labelW / 2,
+            x - labelW * 0.18,
+            x - labelW * 0.82,
+            x + 8,
+            x - labelW - 8,
+            x + 26,
+            x - labelW - 26
+        ].map(value => clamp(value, padX + 6, width - padX - labelW - 6));
+        const yOptions = [
+            y - labelH - Math.max(28, height * 0.038),
+            y - labelH - Math.max(42, height * 0.056),
+            y - labelH - Math.max(58, height * 0.074),
+            plotTop + 4
+        ].map(value => clamp(value, padY + 8, Math.max(padY + 8, y - labelH - 8)));
+        let best = { tx: xOptions[0], ty: yOptions[0], score: Number.POSITIVE_INFINITY };
+        xOptions.forEach(candidateX => {
+            yOptions.forEach(candidateY => {
+                const box = boxFrom(candidateX, candidateY, labelW, labelH);
+                const overlapPenalty = placedLabelBoxes.reduce((sum, placed) => sum + (boxesOverlap(box, placed, 5) ? 50000 : 0), 0);
+                const pointDx = Math.abs(candidateX + labelW / 2 - x);
+                const pointDy = Math.abs(candidateY + labelH / 2 - y);
+                const abovePenalty = candidateY + labelH > y - 6 ? 10000 : 0;
+                const topPenalty = candidateY < plotTop - 90 ? 14 : 0;
+                const score = overlapPenalty + abovePenalty + pointDx * 2.4 + pointDy * 0.18 + topPenalty;
+                if (score < best.score) best = { tx: candidateX, ty: candidateY, score };
+            });
+        });
+        const tx = best.tx;
+        const ty = best.ty;
+        placedLabelBoxes.push(boxFrom(tx, ty, labelW, labelH));
+        const pointerX = clamp(x - tx, 10, labelW - 10);
+        const label = labelLayer.append("g")
+            .attr("class", "key-point-label")
+            .attr("data-source-index", row.sourceIndex)
+            .attr("data-x", row.rawX)
+            .attr("data-value", row.value)
+            .attr("transform", `translate(${tx}, ${ty})`);
+        label.append("rect")
+            .attr("class", "key-point-label-bg")
+            .attr("width", labelW)
+            .attr("height", labelH)
+            .attr("rx", 7)
+            .attr("fill", primarySoft)
+            .attr("opacity", 0.98);
+        label.append("path")
+            .attr("class", "key-point-label-pointer")
+            .attr("d", `M ${pointerX - 8} ${labelH - 1} L ${pointerX + 8} ${labelH - 1} L ${pointerX} ${labelH + 14} Z`)
+            .attr("fill", primarySoft)
+            .attr("opacity", 0.98);
+        label.append("text")
+            .attr("class", "key-point-value chart-text")
+            .attr("x", labelW / 2)
+            .attr("y", labelH * 0.64)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#06131A")
+            .style("font-family", titleFontFamily)
+            .style("font-size", `${Math.max(17, width * 0.015)}px`)
+            .style("font-weight", "900")
+            .text(valueText);
+    });
+
+    const tickKey = date => date instanceof Date ? date.getTime() : new Date(date).getTime();
+    const xTickDates = Array.from(
+        new Map(
+            [firstPoint.date, ...xScale.ticks(4), lastPoint.date]
+                .filter(date => date >= firstPoint.date && date <= lastPoint.date)
+                .map(date => [tickKey(date), date])
+        ).values()
+    ).sort((a, b) => a - b);
+    xTickDates.forEach(tick => {
+        const x = xScale(tick);
+        root.append("text")
+            .attr("class", "x-axis-label chart-text")
+            .attr("x", x)
+            .attr("y", plotBottom + 24)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#D6DEE0")
+            .style("font-family", fontFamily)
+            .style("font-size", "13px")
+            .text(formatDateLabel(tick));
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/layered_area_chart_03.js

@@ -0,0 +1,343 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Layered Area Chart",
+    "chart_name": "layered_area_chart_03",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    let chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    chartData = temporalFilter(chartData, xField);
+    if (chartData.length === 0) {
+        return;
+    }
+    
+    // 获取唯一的组值并按最后y值排序
+    const groups = [...new Set(chartData.map(d => d[groupField]))]
+        .sort((a, b) => {
+            const aLast = chartData.filter(d => d[groupField] === a).slice(-1)[0][yField];
+            const bLast = chartData.filter(d => d[groupField] === b).slice(-1)[0][yField];
+            return aLast - bLast;
+        });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 20, right: 60, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 (百分比)
+    const yScale = d3.scaleLinear()
+        .domain([0, d3.max(chartData, d => +d[yField]) * 1.5])
+        .range([chartHeight, 0]);
+
+    // 添加X轴线
+    g.append("line")
+        .attr("x1", -40)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#9badd3")
+        .attr("opacity", 0.6)
+        .attr("stroke-width", 1)
+    
+    // 添加水平网格线
+    const yTicks = d3.ticks(0, d3.max(chartData, d => +d[yField]) * 1.3, 5); // 根据实际数据生成刻度
+    
+    // 添加y轴刻度和标签
+    yTicks.forEach(tick => {
+        if (tick !== 0) { // 跳过0刻度
+            g.append("text")
+                .attr("x", -10)
+                .attr("y", yScale(tick) + 15)
+                .attr("text-anchor", "end")
+                .attr("dominant-baseline", "middle")
+                .style("font-family", "Arial")
+                .style("font-size", "16px")
+                .style("fill", "#87aac0")
+                .text(tick);
+        }
+    });
+    
+    // 添加x轴刻度和标签
+    xTicks.forEach((tick, i) => {
+        if (i === xTicks.length - 1) {
+            return;
+        }
+        // 添加刻度标签
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "16px")
+            .style("font-weight", "bold")
+            .style("fill", "#87aac0")
+            .text(xFormat(tick));
+    });
+    
+    // 创建面积生成器
+    const area = d3.area()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y0(chartHeight)
+        .y1(d => yScale(+d[yField]))
+        .curve(d3.curveLinear);
+    
+    // 创建渐变定义
+    const defs = svg.append("defs");
+
+    // 为每个组创建渐变
+    groups.forEach(group => {
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        const gradientId = `gradient-${group.replace(/\s+/g, '-')}`;
+        
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "100%");
+        
+        // 渐变起始颜色（原始颜色）
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", d3.color(color))
+            .attr("stop-opacity", 1);
+        
+        // 渐变结束颜色（偏白色）
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", chartUtils.color.variant(color, { mode: "brighter", amount: 1.0 })) // 使颜色更亮（偏白）
+            .attr("stop-opacity", 1);
+    });
+
+    // 创建阴影滤镜 - 修复截断问题
+    const filters = defs.append("filter")
+        .attr("id", "drop-shadow")
+        .attr("x", "-50%")    // 扩展滤镜区域左侧
+        .attr("y", "-100%")    // 扩展滤镜区域上方
+        .attr("width", "200%") // 扩展滤镜区域宽度
+        .attr("height", "200%"); // 扩展滤镜区域高度
+
+    // 调整阴影颜色和透明度
+    filters.append("feComponentTransfer")
+        .append("feFuncA")
+        .attr("type", "linear")
+        .attr("slope", 0.2); // 降低阴影不透明度，使其更加柔和
+
+    // 添加高斯模糊
+    filters.append("feGaussianBlur")
+        .attr("in", "SourceAlpha")
+        .attr("stdDeviation", 25) // 调整模糊程度，使阴影更加柔和
+        .attr("result", "blur");
+
+    // 添加偏移
+    filters.append("feOffset")
+        .attr("in", "blur")
+        .attr("dx", 0)
+        .attr("dy", 15)
+        .attr("result", "offsetBlur");
+
+    // 合并原始图形和阴影
+    const feMerge = filters.append("feMerge");
+    feMerge.append("feMergeNode")
+        .attr("in", "offsetBlur");
+    feMerge.append("feMergeNode")
+        .attr("in", "SourceGraphic");
+
+    // 绘制面积图
+    // 按照组的顺序反向绘制，确保第一个组在最上面
+    [...groups].reverse().forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        const gradientId = `gradient-${group.replace(/\s+/g, '-')}`;
+        
+        // 绘制面积
+        g.append("path")
+            .datum(groupData)
+            .attr("fill", `url(#${gradientId})`) // 使用渐变填充
+            .attr("opacity", 0.8)
+            .attr("d", area)
+            .style("filter", "url(#drop-shadow)"); // 添加阴影效果
+    });
+
+    // 添加网格背景
+    g.append("rect")
+        .attr("class", "background")
+        .attr("x", 0)
+        .attr("y", yScale(d3.max(yTicks)))
+        .attr("width", chartWidth)
+        .attr("height", chartHeight - yScale(d3.max(yTicks)))
+        .attr("fill", "#87aac0")
+        .attr("opacity", 0.1);
+
+    // 添加垂直网格线
+    xTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", xScale(tick))
+            .attr("y1", yScale(d3.max(yTicks))) // 从y轴最大刻度开始
+            .attr("x2", xScale(tick))
+            .attr("y2", chartHeight)
+            .attr("stroke", "#87aac0")
+            .attr("opacity", 0.2)
+            .attr("class", "background")
+            .attr("stroke-width", 1)
+    });
+    // 添加水平网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", -40)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#87aac0")
+            .attr("opacity", 0.2)
+            .attr("stroke-width", 1)
+            .attr("class", "background")
+    });
+
+    // 获取最后一个刻度的x值
+    const lastTickX = xScale(xTicks[xTicks.length - 1]);
+    
+    // 添加最后一年标注
+    g.append("text")
+        .attr("x", lastTickX)
+        .attr("y", yScale(d3.max(yTicks)) - 10) // 调整文本位置到y轴最大刻度上方
+        .attr("text-anchor", "middle")
+        .style("font-family", "Arial")
+        .style("font-size", "14px")
+        .style("fill", "#87aac0")
+        .text(xFormat(xTicks[xTicks.length - 1]));
+
+    // 添加倒置的蓝色小三角
+    g.append("path")
+        .attr("d", "M" + (lastTickX-5) + "," + yScale(d3.max(yTicks)) + " L" + (lastTickX+5) + "," + yScale(d3.max(yTicks)) + " L" + lastTickX + "," + (yScale(d3.max(yTicks))+5) + "Z")
+        .attr("fill", "#87aac0");
+    
+    // 添加垂直虚线指向最后一年
+    g.append("line")
+        .attr("x1", lastTickX)
+        .attr("y1", yScale(d3.max(yTicks))+5)
+        .attr("x2", lastTickX)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#87aac0")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "3,3");
+    
+    // 添加最终值标签
+    let prevLabelYBase = null; // 跟踪上一个标签的Y位置
+    const minLabelDistance = 50; // 最小标签间距
+
+    [...groups].forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        const lastPoint = groupData[groupData.length - 1];
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+
+        // 计算标签基础位置
+        let labelYBase = yScale(+lastPoint[yField]);
+        let labelXBase = xScale(chartUtils.format.parseDate(lastPoint[xField]));
+        
+        // 检查与上一个标签的距离，如果太近则调整位置
+        if (prevLabelYBase !== null && Math.abs(prevLabelYBase - labelYBase) < minLabelDistance) {
+            labelYBase = labelYBase - minLabelDistance;
+        }
+        
+        // 更新上一个标签位置
+        prevLabelYBase = labelYBase;
+        let textWidth = chartUtils.text.measure(null, group, { fontSize: 10 }).width * 1.3;
+        // 创建标签背景
+        const labelBg = g.append("rect")
+            .attr("x", labelXBase - textWidth / 2)
+            .attr("y", labelYBase - 50)
+            .attr("rx", 10)
+            .attr("ry", 10)
+            .attr("width", textWidth)
+            .attr("height", 40)
+            .attr("fill", color);
+        
+        // 添加倒三角
+        g.append("path")
+            .attr("d", `M${labelXBase}, ${labelYBase} 
+                       L${labelXBase - 10}, ${labelYBase - 15} 
+                       L${labelXBase + 10}, ${labelYBase - 15} Z`)
+            .attr("fill", color);
+        
+        // 添加组名（上部分文本）
+        g.append("text")
+            .attr("x", labelXBase)
+            .attr("y", labelYBase - 40)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "10px")
+            .style("fill", "#ffffff")
+            .style("opacity", 0.5)
+            .text(group);
+        
+        // 添加最终值（下部分文本）
+        g.append("text")
+            .attr("x", labelXBase)
+            .attr("y", labelYBase - 22)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "22px")
+            .style("font-weight", "bold")
+            .style("fill", "#ffffff")
+            .text(chartUtils.format.integer(lastPoint[yField]).text);
+        
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/area_chart/multiple_area_chart_01.js

@@ -0,0 +1,547 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Area Chart",
+    "chart_name": "multiple_area_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": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+
+    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 yLabel = yColumn.rawLabel || yField;
+    const yUnit = yColumn.unit || "";
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    let groups = [...new Set(chartData.map(d => d[groupField]))].slice(0, 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; background: #f8f0df;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    defs.append("linearGradient")
+        .attr("id", "multiple-area-paper")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#fff8e9");
+            grad.append("stop").attr("offset", "54%").attr("stop-color", "#f4ead6");
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#efe0c3");
+        });
+    defs.append("linearGradient")
+        .attr("id", "multiple-area-left-fill")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "0%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#d84a42").attr("stop-opacity", 0.9);
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#b9151f").attr("stop-opacity", 0.96);
+        });
+    defs.append("linearGradient")
+        .attr("id", "multiple-area-right-fill")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "0%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#6c934e").attr("stop-opacity", 0.96);
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#9eb776").attr("stop-opacity", 0.9);
+        });
+    defs.append("filter")
+        .attr("id", "multiple-area-soft-shadow")
+        .attr("x", "-20%").attr("y", "-20%")
+        .attr("width", "140%").attr("height", "140%")
+        .call(filter => {
+            filter.append("feDropShadow")
+                .attr("dx", 0)
+                .attr("dy", 2)
+                .attr("stdDeviation", 2)
+                .attr("flood-color", "#162233")
+                .attr("flood-opacity", 0.18);
+        });
+
+    svg.append("rect")
+        .attr("x", 8)
+        .attr("y", 8)
+        .attr("width", width - 16)
+        .attr("height", height - 16)
+        .attr("fill", "url(#multiple-area-paper)")
+        .attr("stroke", "#0e2134")
+        .attr("stroke-width", 1.25);
+
+    const fontFamily = "Georgia, 'Times New Roman', serif";
+    const sansFamily = (typography.label && typography.label.font_family) || "Arial, sans-serif";
+    const navy = "#0d2238";
+    const muted = "#4d463c";
+    const red = "#a51519";
+    const green = "#2d6830";
+    const portrait = height > width * 1.15;
+
+    function fitFont(text, maxWidth, start, min, weight, family) {
+        let size = start;
+        while (size > min && chartUtils.text.measure(null, String(text), {
+            fontFamily: family,
+            fontSize: size,
+            fontWeight: weight
+        }).width > maxWidth) {
+            size -= 1;
+        }
+        return size;
+    }
+
+    function wrapLines(text, maxWidth, fontSize, fontWeight, family, maxLines) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const test = current ? `${current} ${word}` : word;
+            const widthTest = chartUtils.text.measure(null, test, {
+                fontFamily: family,
+                fontSize,
+                fontWeight
+            }).width;
+            if (widthTest <= maxWidth || !current) {
+                current = test;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        return lines.slice(0, maxLines);
+    }
+
+    function drawTextBlock(parent, lines, x, y, options) {
+        const opts = Object.assign({
+            fill: navy,
+            fontSize: 12,
+            fontWeight: 400,
+            family: fontFamily,
+            anchor: "middle",
+            lineHeight: 1.18,
+            style: null
+        }, options || {});
+        const text = parent.append("text")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", opts.anchor)
+            .attr("fill", opts.fill)
+            .style("font-family", opts.family)
+            .style("font-size", `${opts.fontSize}px`)
+            .style("font-weight", opts.fontWeight);
+        if (opts.style) text.style("font-style", opts.style);
+        lines.forEach((line, i) => {
+            text.append("tspan")
+                .attr("x", x)
+                .attr("dy", i === 0 ? 0 : `${opts.fontSize * opts.lineHeight}px`)
+                .text(line);
+        });
+        return text;
+    }
+
+    function temporalNumber(value) {
+        if (value instanceof Date) return value.getTime();
+        const numeric = +value;
+        if (Number.isFinite(numeric)) return numeric;
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed.getTime();
+        const fallback = new Date(value);
+        return fallback instanceof Date && !Number.isNaN(fallback.getTime()) ? fallback.getTime() : 0;
+    }
+
+    function temporalLabel(value) {
+        const numeric = +value;
+        if (Number.isFinite(numeric) && numeric >= 1000 && numeric <= 3000) return String(Math.round(numeric));
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return String(parsed.getFullYear());
+        return String(value);
+    }
+
+    function niceValueMax(value) {
+        if (!Number.isFinite(value) || value <= 0) return 1;
+        const power = Math.pow(10, Math.floor(Math.log10(value)));
+        const scaled = value / power;
+        const step = scaled <= 1 ? 1 : scaled <= 2 ? 2 : scaled <= 5 ? 5 : 10;
+        return step * power;
+    }
+
+    function drawReservedSlot(parent, x, y, w, h, slotName, shape) {
+        const slot = parent.append("g")
+            .attr("class", "asset-slot")
+            .attr("data-asset-slot", slotName)
+            .attr("data-asset-source-policy", "image2_asset")
+            .attr("data-anchor", "header-safe-area")
+            .attr("data-collision-rule", "avoid-title-subtitle-category-labels-and-plot");
+        if (shape === "circle") {
+            slot.append("circle")
+                .attr("cx", x + w / 2)
+                .attr("cy", y + h / 2)
+                .attr("r", Math.min(w, h) / 2)
+                .attr("fill", "#eef0dc")
+                .attr("stroke", "#b9ad8e")
+                .attr("stroke-width", 1.2);
+            slot.append("circle")
+                .attr("cx", x + w / 2)
+                .attr("cy", y + h / 2)
+                .attr("r", Math.min(w, h) / 2 - 7)
+                .attr("fill", "none")
+                .attr("stroke", "#d2c6a4")
+                .attr("stroke-dasharray", "3 4");
+        } else {
+            slot.append("rect")
+                .attr("x", x)
+                .attr("y", y)
+                .attr("width", w)
+                .attr("height", h)
+                .attr("rx", 18)
+                .attr("fill", "#f1ead7")
+                .attr("stroke", "#bead85")
+                .attr("stroke-width", 1.1)
+                .attr("stroke-dasharray", "5 5")
+                .attr("opacity", 0.75);
+            slot.append("path")
+                .attr("d", `M${x + 14},${y + h - 14} C${x + w * 0.35},${y + h * 0.25} ${x + w * 0.62},${y + h * 0.76} ${x + w - 14},${y + 14}`)
+                .attr("fill", "none")
+                .attr("stroke", "#c7b891")
+                .attr("stroke-width", 1)
+                .attr("opacity", 0.8);
+        }
+        return slot;
+    }
+
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+    const titleText = titles.main_title || metadata.title || "Multiple Area Comparison";
+    const subtitleText = titles.sub_title || metadata.description || jsonData.description || "";
+    const titleSize = fitFont(titleText, width - 170, 35, 24, 700, fontFamily);
+    const titleLines = wrapLines(titleText, width - 170, titleSize, 700, fontFamily, 2);
+    drawTextBlock(svg, titleLines, width / 2, 48, {
+        fill: navy,
+        fontSize: titleSize,
+        fontWeight: 700,
+        family: fontFamily,
+        anchor: "middle",
+        lineHeight: 1.05
+    });
+    const titleBlockHeight = titleLines.length * titleSize * 1.05;
+    const subtitleSize = fitFont(subtitleText, width - 160, 18, 13, 500, fontFamily);
+    const subtitleLines = wrapLines(subtitleText, width - 168, subtitleSize, 500, fontFamily, 2);
+    drawTextBlock(svg, subtitleLines, width / 2, 52 + titleBlockHeight, {
+        fill: navy,
+        fontSize: subtitleSize,
+        fontWeight: 500,
+        family: fontFamily,
+        style: "italic",
+        anchor: "middle",
+        lineHeight: 1.15
+    });
+
+    const headerSlotY = portrait ? 124 : 55;
+    const headerSlotW = portrait ? 112 : 88;
+    const headerSlotH = portrait ? 72 : 56;
+    drawReservedSlot(svg, 25, headerSlotY, headerSlotW, headerSlotH, "header-left-illustration", "rect");
+    drawReservedSlot(svg, width - 25 - headerSlotW, headerSlotY, headerSlotW, headerSlotH, "header-right-illustration", "rect");
+
+    const deckY = portrait ? 224 : 122;
+    const deckText = metadata.main_insight || jsonData.description || "";
+    const deckX = portrait ? 166 : 150;
+    const deckW = portrait ? width - 332 : width - 300;
+    const deckFont = portrait ? 13 : 12;
+    const deckLines = wrapLines(deckText, deckW - 28, deckFont, 400, fontFamily, 2);
+    svg.append("rect")
+        .attr("x", deckX)
+        .attr("y", deckY - (portrait ? 24 : 19))
+        .attr("width", deckW)
+        .attr("height", Math.max(portrait ? 48 : 34, deckLines.length * (portrait ? 18 : 15) + 13))
+        .attr("rx", 8)
+        .attr("fill", "#f7eedb")
+        .attr("stroke", "#cfbd94")
+        .attr("opacity", 0.92);
+    drawTextBlock(svg, deckLines, width / 2, deckY, {
+        fill: muted,
+        fontSize: deckFont,
+        family: fontFamily,
+        anchor: "middle",
+        lineHeight: 1.2
+    });
+
+    const plot = {
+        x: portrait ? 52 : 45,
+        y: portrait ? 370 : 185,
+        width: width - (portrait ? 104 : 90),
+        height: portrait ? Math.min(420, height * 0.43) : 300
+    };
+    const centerX = width / 2;
+    const axisWidth = Math.max(48, width * 0.08);
+    const axisLeft = centerX - axisWidth / 2;
+    const axisRight = centerX + axisWidth / 2;
+    const leftAreaMinX = plot.x + 18;
+    const rightAreaMaxX = plot.x + plot.width - 18;
+
+    const grouped = groups.map((group, index) => {
+        const rows = chartData
+            .filter(d => d[groupField] === group)
+            .map(d => Object.assign({}, d, {
+                __time: temporalNumber(d[xField]),
+                __label: temporalLabel(d[xField]),
+                __value: Math.max(0, +d[yField] || 0)
+            }))
+            .sort((a, b) => a.__time - b.__time);
+        return { group, index, rows, maxValue: d3.max(rows, d => d.__value) || 1 };
+    });
+
+    const allTimes = [...new Set(grouped.flatMap(series => series.rows.map(d => d.__time)))].sort((a, b) => a - b);
+    const minTime = d3.min(allTimes);
+    const maxTime = d3.max(allTimes);
+    const yScale = d3.scaleLinear()
+        .domain([minTime, maxTime])
+        .range([plot.y + 18, plot.y + plot.height - 18]);
+
+    const leftScale = d3.scaleLinear()
+        .domain([0, grouped[0] ? grouped[0].maxValue : 1])
+        .range([axisLeft, leftAreaMinX]);
+    const rightScale = d3.scaleLinear()
+        .domain([0, grouped[1] ? grouped[1].maxValue : 1])
+        .range([axisRight, rightAreaMaxX]);
+
+    const tickValues = allTimes;
+    tickValues.forEach(time => {
+        const y = yScale(time);
+        svg.append("line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.width)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", "#b8afa0")
+            .attr("stroke-width", 0.8)
+            .attr("stroke-dasharray", "3 4")
+            .attr("opacity", 0.75);
+    });
+
+    const areaLeft = d3.area()
+        .x0(axisLeft)
+        .x1(d => leftScale(d.__value))
+        .y(d => yScale(d.__time))
+        .curve(d3.curveLinear);
+    const areaRight = d3.area()
+        .x0(axisRight)
+        .x1(d => rightScale(d.__value))
+        .y(d => yScale(d.__time))
+        .curve(d3.curveLinear);
+
+    if (grouped[0]) {
+        svg.append("path")
+            .datum(grouped[0].rows)
+            .attr("class", "series-area series-area-left")
+            .attr("data-series", grouped[0].group)
+            .attr("fill", "url(#multiple-area-left-fill)")
+            .attr("stroke", "#95121b")
+            .attr("stroke-width", 2)
+            .attr("d", areaLeft);
+    }
+    if (grouped[1]) {
+        svg.append("path")
+            .datum(grouped[1].rows)
+            .attr("class", "series-area series-area-right")
+            .attr("data-series", grouped[1].group)
+            .attr("fill", "url(#multiple-area-right-fill)")
+            .attr("stroke", "#315f2d")
+            .attr("stroke-width", 2)
+            .attr("d", areaRight);
+    }
+
+    const axisTop = plot.y - 26;
+    const axisHeight = plot.height + 45;
+    svg.append("rect")
+        .attr("class", "central-year-axis")
+        .attr("data-axis-role", "chronological-year-spine")
+        .attr("x", axisLeft)
+        .attr("y", axisTop)
+        .attr("width", axisWidth)
+        .attr("height", axisHeight)
+        .attr("rx", 11)
+        .attr("fill", "#0c3345")
+        .attr("filter", "url(#multiple-area-soft-shadow)");
+    svg.append("text")
+        .attr("x", centerX)
+        .attr("y", axisTop + 23)
+        .attr("text-anchor", "middle")
+        .attr("fill", "#ffffff")
+        .style("font-family", fontFamily)
+        .style("font-size", "15px")
+        .style("font-weight", 700)
+        .text("Year");
+
+    tickValues.forEach(time => {
+        const y = yScale(time);
+        const source = grouped[0] && grouped[0].rows.find(d => d.__time === time);
+        const label = source ? source.__label : String(time);
+        svg.append("text")
+            .attr("x", centerX)
+            .attr("y", y + 4)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#ffffff")
+            .style("font-family", sansFamily)
+            .style("font-size", "14px")
+            .text(label);
+        [axisLeft, axisRight].forEach(x => {
+            svg.append("circle")
+                .attr("class", "axis-edge-dot")
+                .attr("data-axis-row", label)
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", 3.5)
+                .attr("fill", "#f8f0df")
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 0.8);
+        });
+    });
+
+    function groupHeadingText(group) {
+        const cleaned = String(group || "").replace(/\s*\([^)]*\)\s*/g, "").trim();
+        return cleaned || String(group || "");
+    }
+
+    function drawSeriesHeading(series, side) {
+        if (!series) return;
+        const isLeft = side === "left";
+        const medallionSize = portrait ? 58 : 48;
+        const medallionY = plot.y - (portrait ? 93 : 42);
+        const medallionX = isLeft ? plot.x + 10 : plot.x + plot.width - medallionSize - 10;
+        const labelX = isLeft ? medallionX + medallionSize + 20 : medallionX - 20;
+        const headingY = medallionY + (portrait ? 21 : 14);
+        const anchor = isLeft ? "start" : "end";
+        const accent = isLeft ? red : green;
+        drawReservedSlot(svg, medallionX, medallionY, medallionSize, medallionSize, isLeft ? "series-left-medallion" : "series-right-medallion", "circle");
+        const heading = groupHeadingText(series.group);
+        const headingMaxWidth = portrait ? 220 : 190;
+        const headingSize = fitFont(heading, headingMaxWidth, portrait ? 22 : 18, 13, 700, fontFamily);
+        svg.append("text")
+            .attr("x", labelX)
+            .attr("y", headingY)
+            .attr("text-anchor", anchor)
+            .attr("fill", accent)
+            .style("font-family", fontFamily)
+            .style("font-size", `${headingSize}px`)
+            .style("font-weight", 700)
+            .text(heading);
+        const descriptor = `${yLabel}${yUnit ? ` (${yUnit})` : ""}`;
+        wrapLines(descriptor, headingMaxWidth, portrait ? 14 : 11, 400, fontFamily, 2).forEach((line, i) => {
+            svg.append("text")
+                .attr("x", labelX)
+                .attr("y", headingY + (portrait ? 24 : 17) + i * (portrait ? 17 : 14))
+                .attr("text-anchor", anchor)
+                .attr("fill", "#2f2c29")
+                .style("font-family", fontFamily)
+                .style("font-size", `${portrait ? 14 : 11}px`)
+                .text(line);
+        });
+    }
+    drawSeriesHeading(grouped[0], "left");
+    drawSeriesHeading(grouped[1], "right");
+
+    const sideDomain = niceValueMax(d3.max(grouped, s => s.maxValue) || 1);
+    const labelTicks = d3.ticks(0, sideDomain, 6).filter((_, i, arr) => i === 0 || i === arr.length - 1 || i % 1 === 0);
+    const leftLabelScale = d3.scaleLinear().domain([0, sideDomain]).range([axisLeft, leftAreaMinX]);
+    const rightLabelScale = d3.scaleLinear().domain([0, sideDomain]).range([axisRight, rightAreaMaxX]);
+    svg.append("line")
+        .attr("x1", leftAreaMinX)
+        .attr("x2", axisLeft)
+        .attr("y1", plot.y + plot.height + 8)
+        .attr("y2", plot.y + plot.height + 8)
+        .attr("stroke", "#9f8a60")
+        .attr("stroke-width", 1);
+    svg.append("line")
+        .attr("x1", axisRight)
+        .attr("x2", rightAreaMaxX)
+        .attr("y1", plot.y + plot.height + 8)
+        .attr("y2", plot.y + plot.height + 8)
+        .attr("stroke", "#9f8a60")
+        .attr("stroke-width", 1);
+    labelTicks.forEach(tick => {
+        const label = chartUtils.format.autoText(tick);
+        svg.append("text")
+            .attr("x", leftLabelScale(tick))
+            .attr("y", plot.y + plot.height + 26)
+            .attr("text-anchor", "middle")
+            .attr("fill", red)
+            .style("font-family", sansFamily)
+            .style("font-size", "12px")
+            .style("font-weight", 700)
+            .text(label);
+        svg.append("text")
+            .attr("x", rightLabelScale(tick))
+            .attr("y", plot.y + plot.height + 26)
+            .attr("text-anchor", "middle")
+            .attr("fill", green)
+            .style("font-family", sansFamily)
+            .style("font-size", "12px")
+            .style("font-weight", 700)
+            .text(label);
+    });
+
+    const leftCaption = `${yLabel}${yUnit ? ` (${yUnit})` : ""}`;
+    const rightCaption = leftCaption;
+    drawTextBlock(svg, wrapLines(leftCaption, 170, 12, 700, fontFamily, 1), centerX - 145, plot.y + plot.height + 52, {
+        fill: "#8e151a",
+        fontSize: 12,
+        fontWeight: 700,
+        family: fontFamily
+    });
+    drawTextBlock(svg, wrapLines(rightCaption, 170, 12, 700, fontFamily, 1), centerX + 145, plot.y + plot.height + 52, {
+        fill: "#27602e",
+        fontSize: 12,
+        fontWeight: 700,
+        family: fontFamily
+    });
+
+    svg.append("line")
+        .attr("x1", centerX - 236)
+        .attr("x2", centerX - 178)
+        .attr("y1", plot.y + plot.height + 48)
+        .attr("y2", plot.y + plot.height + 48)
+        .attr("stroke", "#a58d5e");
+    svg.append("line")
+        .attr("x1", centerX + 178)
+        .attr("x2", centerX + 236)
+        .attr("y1", plot.y + plot.height + 48)
+        .attr("y2", plot.y + plot.height + 48)
+        .attr("stroke", "#a58d5e");
+
+    svg.append("g")
+        .attr("class", "ignored-wrapper-region")
+        .attr("data-ignored-reference-element", "bottom-takeaway-source-footer")
+        .attr("data-policy", "no-bottom-narrative-wrapper");
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/range_area_chart_01.js

@@ -0,0 +1,475 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Range Area Chart",
+    "chart_name": "range_area_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 jsonData = data || {};
+    const rows = jsonData.data?.data || [];
+    const variables = jsonData.variables || {};
+    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 groupField = chartUtils.schema.columnField(dataColumns, 2);
+    const yColumn = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField });
+    const yDescription = yColumn.description || yField || "Value";
+    const yUnit = yColumn.unit || "";
+
+    const width = Number(variables.width) || 600;
+    const height = Number(variables.height) || 600;
+    const navy = "#0f2742";
+    const muted = "#6f766f";
+    const panelStroke = "#e8ded0";
+    const gridStroke = "#eadfce";
+    const orange = "#f28a13";
+    const green = "#5d8f3b";
+    const cream = "#fbf8f1";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "range-area-chart-01-reference-layout")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+
+    const empty = message => {
+        svg.append("rect").attr("width", width).attr("height", height).attr("fill", cream);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(14)}px`)
+            .style("fill", navy)
+            .text(message);
+        return svg.node();
+    };
+
+    if (!xField || !yField || !groupField || rows.length < 4) {
+        return empty("Missing range area fields");
+    }
+
+    const parseX = value => chartUtils.format.parseDate(value);
+    const validRows = rows
+        .map(d => ({ raw: d, x: parseX(d[xField]), y: +d[yField], group: d[groupField] }))
+        .filter(d => d.x instanceof Date && !Number.isNaN(d.x.getTime()) && Number.isFinite(d.y) && d.group != null);
+    const groups = Array.from(new Set(validRows.map(d => d.group)));
+    if (groups.length < 2) return empty("Need two groups");
+
+    const averages = groups
+        .map(group => {
+            const values = validRows.filter(d => d.group === group).map(d => d.y);
+            return { group, avg: d3.mean(values) };
+        })
+        .sort((a, b) => d3.descending(a.avg, b.avg));
+    const upperGroup = averages[0].group;
+    const lowerGroup = averages[averages.length - 1].group;
+
+    const byGroup = group => validRows
+        .filter(d => d.group === group)
+        .sort((a, b) => d3.ascending(a.x, b.x));
+    const upperData = byGroup(upperGroup);
+    const lowerData = byGroup(lowerGroup);
+    const lowerByTime = new Map(lowerData.map(d => [d.x.getTime(), d]));
+    const areaData = upperData
+        .map(top => ({ top, bottom: lowerByTime.get(top.x.getTime()) }))
+        .filter(d => d.bottom);
+    if (!areaData.length) return empty("No paired range values");
+
+    const allDates = validRows.map(d => d.x);
+    const xExtent = d3.extent(allDates);
+    const yExtent = d3.extent(validRows, d => d.y);
+    const yPad = Math.max(1, (yExtent[1] - yExtent[0]) * 0.18);
+    const yDomain = [Math.max(0, yExtent[0] - yPad), yExtent[1] + yPad];
+
+    const legendY = 22;
+    const panel = {
+        x: 56,
+        y: 76,
+        width: Math.max(420, width - 96),
+        height: Math.max(390, height - 138),
+        rx: 10
+    };
+    const margin = { top: 38, right: 42, bottom: 48, left: 56 };
+    const plot = {
+        x: panel.x + margin.left,
+        y: panel.y + margin.top,
+        width: panel.width - margin.left - margin.right,
+        height: panel.height - margin.top - margin.bottom
+    };
+
+    const xScale = d3.scaleTime().domain(xExtent).range([plot.x, plot.x + plot.width]);
+    const yScale = d3.scaleLinear().domain(yDomain).nice(4).range([plot.y + plot.height, plot.y]);
+
+    const uniqueDates = Array.from(new Map(validRows.map(d => [d.x.getTime(), d.x])).values())
+        .sort((a, b) => d3.ascending(a, b));
+    const targetTicks = Math.min(5, uniqueDates.length);
+    const xTicks = uniqueDates.filter((_, i) => {
+        if (i === 0 || i === uniqueDates.length - 1) return true;
+        const step = Math.max(1, Math.round((uniqueDates.length - 1) / (targetTicks - 1)));
+        return i % step === 0;
+    }).slice(0, 6);
+    if (xTicks[xTicks.length - 1]?.getTime() !== uniqueDates[uniqueDates.length - 1].getTime()) {
+        xTicks.push(uniqueDates[uniqueDates.length - 1]);
+    }
+    const yTicks = yScale.ticks(5).filter(t => t >= 0);
+    const yearFormat = d => chartUtils.format.date(d, { output: "%Y" }).text;
+    const valueText = value => chartUtils.format.autoText(+value).text || chartUtils.format.autoText(+value);
+    const valueWithUnit = value => `${valueText(value)}${yUnit && !String(valueText(value)).includes(yUnit) ? yUnit : ""}`;
+
+    const defs = svg.append("defs");
+    const fillGradientId = "rangeArea01Fill";
+    defs.append("linearGradient")
+        .attr("id", fillGradientId)
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "0%")
+        .attr("y2", "100%")
+        .selectAll("stop")
+        .data([
+            { offset: "0%", color: orange, opacity: 0.30 },
+            { offset: "58%", color: "#f5c57c", opacity: 0.18 },
+            { offset: "100%", color: green, opacity: 0.16 }
+        ])
+        .enter()
+        .append("stop")
+        .attr("offset", d => d.offset)
+        .attr("stop-color", d => d.color)
+        .attr("stop-opacity", d => d.opacity);
+
+    svg.append("rect")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.width)
+        .attr("height", panel.height)
+        .attr("rx", panel.rx)
+        .attr("fill", "#fffdf8")
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1.2)
+        .attr("filter", "drop-shadow(0px 1px 4px rgba(68, 42, 17, 0.12))");
+
+    const legendItems = [
+        { group: upperGroup, color: orange },
+        { group: lowerGroup, color: green }
+    ];
+    const legend = svg.append("g")
+        .attr("class", "legend-pills")
+        .attr("data-relationship", "independent-centered-row")
+        .attr("transform", `translate(${width / 2}, ${legendY})`);
+    const pillWidth = Math.min(188, Math.max(130, width * 0.28));
+    const pillGap = 14;
+    legendItems.forEach((item, i) => {
+        const x = (i - 0.5) * (pillWidth + pillGap) - pillWidth / 2;
+        const pill = legend.append("g").attr("transform", `translate(${x}, 0)`);
+        pill.append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", pillWidth)
+            .attr("height", 30)
+            .attr("rx", 15)
+            .attr("fill", "#fffefa")
+            .attr("stroke", panelStroke)
+            .attr("stroke-width", 1);
+        pill.append("circle")
+            .attr("cx", 16)
+            .attr("cy", 15)
+            .attr("r", 7)
+            .attr("fill", item.color);
+        pill.append("line")
+            .attr("x1", 32)
+            .attr("x2", 58)
+            .attr("y1", 15)
+            .attr("y2", 15)
+            .attr("stroke", item.color)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round");
+        pill.append("text")
+            .attr("x", 66)
+            .attr("y", 16)
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(10)}px`)
+            .style("font-weight", "700")
+            .style("fill", navy)
+            .text(`${String(item.group).slice(0, 25)}${yUnit ? ` (${yUnit})` : ""}`);
+    });
+
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        svg.append("line")
+            .attr("class", "gridline")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.width)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", gridStroke)
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2 4");
+        svg.append("text")
+            .attr("x", plot.x - 12)
+            .attr("y", y)
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(10)}px`)
+            .style("fill", muted)
+            .text(valueText(tick));
+    });
+
+    xTicks.forEach(tick => {
+        const x = xScale(tick);
+        svg.append("line")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", plot.y)
+            .attr("y2", plot.y + plot.height)
+            .attr("stroke", gridStroke)
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2 4");
+        svg.append("text")
+            .attr("x", x)
+            .attr("y", plot.y + plot.height + 24)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(11)}px`)
+            .style("fill", "#4f554e")
+            .text(yearFormat(tick));
+    });
+
+    svg.append("line")
+        .attr("x1", plot.x)
+        .attr("x2", plot.x + plot.width)
+        .attr("y1", plot.y + plot.height)
+        .attr("y2", plot.y + plot.height)
+        .attr("stroke", "#9a9a90")
+        .attr("stroke-width", 1.2);
+    svg.append("line")
+        .attr("x1", plot.x)
+        .attr("x2", plot.x)
+        .attr("y1", plot.y)
+        .attr("y2", plot.y + plot.height)
+        .attr("stroke", "#9a9a90")
+        .attr("stroke-width", 1.2);
+    svg.append("text")
+        .attr("x", plot.x)
+        .attr("y", panel.y + 20)
+        .style("font-family", "Arial, sans-serif")
+        .style("font-size", `${fontSize(10)}px`)
+        .style("font-weight", "700")
+        .style("fill", "#757a73")
+        .text(yDescription.length > 42 ? `${yDescription.slice(0, 39)}...` : yDescription);
+
+    const line = d3.line()
+        .x(d => xScale(d.x))
+        .y(d => yScale(d.y))
+        .curve(d3.curveMonotoneX);
+    const area = d3.area()
+        .x(d => xScale(d.top.x))
+        .y0(d => yScale(Math.min(d.top.y, d.bottom.y)))
+        .y1(d => yScale(Math.max(d.top.y, d.bottom.y)))
+        .curve(d3.curveMonotoneX);
+
+    svg.append("path")
+        .datum(areaData)
+        .attr("class", "range-area-fill")
+        .attr("d", area)
+        .attr("fill", `url(#${fillGradientId})`);
+    svg.append("path")
+        .datum(upperData)
+        .attr("class", "upper-range-boundary")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", orange)
+        .attr("stroke-width", 3)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+    svg.append("path")
+        .datum(lowerData)
+        .attr("class", "lower-range-boundary")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", green)
+        .attr("stroke-width", 3)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+
+    const endpointGroups = [
+        { role: "start-upper", d: upperData[0], color: orange, dx: 16, dy: -22, anchor: "start" },
+        { role: "end-upper", d: upperData[upperData.length - 1], color: orange, dx: 16, dy: -12, anchor: "start" },
+        { role: "start-lower", d: lowerData[0], color: green, dx: -16, dy: 4, anchor: "end" },
+        { role: "end-lower", d: lowerData[lowerData.length - 1], color: green, dx: 16, dy: 12, anchor: "start" }
+    ];
+    endpointGroups.forEach(item => {
+        const x = xScale(item.d.x);
+        const y = yScale(item.d.y);
+        svg.append("circle")
+            .attr("class", `endpoint-marker ${item.role}`)
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", 6)
+            .attr("fill", "#fffefa")
+            .attr("stroke", item.color)
+            .attr("stroke-width", 3);
+        svg.append("text")
+            .attr("class", `endpoint-label ${item.role}`)
+            .attr("x", Math.max(panel.x + 14, Math.min(panel.x + panel.width - 14, x + item.dx)))
+            .attr("y", Math.max(panel.y + 18, Math.min(panel.y + panel.height - 18, y + item.dy)))
+            .attr("text-anchor", item.anchor)
+            .attr("dominant-baseline", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(19)}px`)
+            .style("font-weight", "800")
+            .style("fill", item.color)
+            .text(valueWithUnit(item.d.y));
+    });
+
+    const drawCallout = (top, bottom, side) => {
+        const ratio = bottom.y === 0 ? null : top.y / bottom.y;
+        if (!ratio || !Number.isFinite(ratio)) return;
+        const anchorX = xScale(top.x);
+        const midY = (yScale(top.y) + yScale(bottom.y)) / 2;
+        const cardW = 68;
+        const cardH = 70;
+        const clampX = x => Math.max(panel.x + 8, Math.min(panel.x + panel.width - cardW - 8, x));
+        const clampY = y => Math.max(panel.y + 48, Math.min(panel.y + panel.height - cardH - 38, y));
+        const preferredX = side === "start" ? anchorX + 16 : anchorX - cardW - 16;
+        const gapTop = Math.min(yScale(top.y), yScale(bottom.y));
+        const gapBottom = Math.max(yScale(top.y), yScale(bottom.y));
+        const candidates = [
+            { x: clampX(preferredX), y: clampY(midY - cardH / 2) },
+            { x: clampX(preferredX), y: clampY(gapTop + 12) },
+            { x: clampX(preferredX), y: clampY(gapBottom - cardH - 12) },
+            { x: clampX(side === "start" ? anchorX + 32 : anchorX - cardW - 32), y: clampY(midY - cardH / 2) },
+            { x: clampX(side === "start" ? anchorX - cardW - 16 : anchorX + 16), y: clampY(midY - cardH / 2) }
+        ];
+        const linePoints = [];
+        const addLineSamples = series => {
+            const points = series.map(d => ({ x: xScale(d.x), y: yScale(d.y) }));
+            points.forEach(p => linePoints.push(p));
+            for (let i = 0; i < points.length - 1; i += 1) {
+                const a = points[i];
+                const b = points[i + 1];
+                const steps = Math.max(4, Math.ceil(Math.abs(b.x - a.x) / 18));
+                for (let j = 1; j < steps; j += 1) {
+                    const t = j / steps;
+                    linePoints.push({
+                        x: a.x + (b.x - a.x) * t,
+                        y: a.y + (b.y - a.y) * t
+                    });
+                }
+            }
+        };
+        addLineSamples(upperData);
+        addLineSamples(lowerData);
+        const markerPad = 10;
+        const scoreCandidate = c => {
+            const x0 = c.x - markerPad;
+            const x1 = c.x + cardW + markerPad;
+            const y0 = c.y - markerPad;
+            const y1 = c.y + cardH + markerPad;
+            const overlaps = linePoints.filter(p => p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1).length;
+            const edgePenalty = Math.abs(c.x - preferredX) * 0.01 + Math.abs((c.y + cardH / 2) - midY) * 0.01;
+            return overlaps * 1000 + edgePenalty;
+        };
+        const ranked = candidates
+            .map(c => ({ ...c, score: scoreCandidate(c) }))
+            .sort((a, b) => d3.ascending(a.score, b.score));
+        if (!ranked.length || ranked[0].score >= 1000) return;
+        const x = ranked[0].x;
+        const y = ranked[0].y;
+        const connectorX = side === "start" ? x : x + cardW;
+        const connectorY = y + cardH / 2;
+        svg.append("line")
+            .attr("class", "ratio-callout-leader")
+            .attr("x1", connectorX)
+            .attr("y1", connectorY)
+            .attr("x2", anchorX)
+            .attr("y2", midY)
+            .attr("stroke", "#e2a35e")
+            .attr("stroke-width", 1.3)
+            .attr("stroke-dasharray", "3 3");
+        const g = svg.append("g")
+            .attr("class", "ratio-callout")
+            .attr("data-relationship", "floating-gap-midpoint")
+            .attr("transform", `translate(${x}, ${y})`);
+        g.append("rect")
+            .attr("width", cardW)
+            .attr("height", cardH)
+            .attr("rx", 9)
+            .attr("fill", "#fffefa")
+            .attr("stroke", "#e7dccc")
+            .attr("stroke-width", 1.1);
+        g.append("text")
+            .attr("x", cardW / 2)
+            .attr("y", 20)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(18)}px`)
+            .style("font-weight", "800")
+            .style("fill", side === "start" ? orange : green)
+            .text(chartUtils.format.fixed(ratio, 1).text);
+        g.append("text")
+            .attr("x", cardW / 2)
+            .attr("y", 38)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(9)}px`)
+            .style("font-weight", "700")
+            .style("fill", "#4f554e")
+            .text("Ratio");
+        g.append("text")
+            .attr("x", cardW / 2)
+            .attr("y", 52)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, sans-serif")
+            .style("font-size", `${fontSize(7)}px`)
+            .style("fill", "#686d66")
+            .text("upper/lower");
+    };
+    drawCallout(upperData[0], lowerByTime.get(upperData[0].x.getTime()), "start");
+    drawCallout(upperData[upperData.length - 1], lowerByTime.get(upperData[upperData.length - 1].x.getTime()), "end");
+
+    svg.append("g")
+        .attr("class", "reserved-asset-slot title-art-slot")
+        .attr("data-type", "image-slot")
+        .attr("data-asset-slot", "range-area-title-art")
+        .attr("data-slot-policy", "image2_asset_or_neutral_placeholder")
+        .attr("data-asset-source-policy", "image2_asset_or_neutral_placeholder")
+        .attr("data-slot-anchor", "top-center-title-zone")
+        .attr("data-slot-collision", "stay-above-title-and-do-not-overlap-legend-or-chart-panel")
+        .attr("data-bbox", `${(width / 2 - 18).toFixed(1)},0,36,20`)
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("opacity", 0);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/small_multiple_area_chart_01.js

@@ -0,0 +1,220 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Small Multiple Area Chart",
+    "chart_name": "small_multiple_area_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 20]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["background"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 计算最长组名的宽度，用于动态调整左边距
+    const maxGroupNameWidth = d3.max(groups, group => chartUtils.text.measure(null, group, { fontSize: 14, fontWeight: "bold" }).width) || 0;
+    const dynamicLeftMargin = Math.max(120, maxGroupNameWidth + 40);
+    
+    // 设置尺寸和边距 - 动态调整左侧边距和右侧边距（为Y轴留出空间）
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { 
+        top: 60, 
+        right: 60, // 增加右边距为Y轴留出空间
+        bottom: 60, 
+        left: dynamicLeftMargin
+    };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 为每个组计算最大值
+    const groupMaxValues = {};
+    groups.forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        groupMaxValues[group] = d3.max(groupData, d => +d[yField]);
+    });
+    
+    // 计算每个组的垂直位置（上下错开）
+    const groupHeight = chartHeight / (groups.length * 1.5); // 每个组的高度，留出一些间距
+    const groupPositions = {};
+    groups.forEach((group, i) => {
+        groupPositions[group] = i * groupHeight * 1.5; // 乘以1.5是为了留出间距
+    });
+    
+    // 创建y轴比例尺（每个组有自己的比例尺）
+    const yScales = {};
+    groups.forEach(group => {
+        yScales[group] = d3.scaleLinear()
+            .domain([0, groupMaxValues[group]])
+            .range([groupHeight, 0]); // 从下到上
+    });
+    
+    // 添加网格线和x轴刻度
+    
+    // 添加垂直网格线
+    xTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", xScale(tick))
+            .attr("y1", 0)
+            .attr("x2", xScale(tick))
+            .attr("y2", chartHeight)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-opacity", 0.1)
+            .attr("stroke-width", 1);
+    });
+    
+    xTicks.forEach(tick => {
+        // 添加上方x轴年份标签
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", -10)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "bottom")
+            .attr("fill", "#ffffff")
+            .style("font-size", "12px")
+            .text(xFormat(tick));
+        
+        // 添加下方x轴年份标签
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 15)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "hanging")
+            .attr("fill", "#ffffff")
+            .style("font-size", "12px")
+            .text(xFormat(tick));
+    });
+    
+    // 创建面积生成器
+    const area = (group) => d3.area()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y0(groupPositions[group] + groupHeight) // 底部是固定的
+        .y1(d => groupPositions[group] + yScales[group](d[yField])) // 顶部根据数据变化
+        .curve(d3.curveBasis); // 使用平滑曲线
+    
+    // 为每个组创建面积图和Y轴
+    groups.forEach(group => {
+        // 过滤该组的数据
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 确保数据按日期排序
+        groupData.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        // 获取颜色
+        const color = colorResolver.field(group, groups.indexOf(group), { palette: "category10" }).value;
+        
+        // 添加0线 - 水平线位于组的底部位置，延伸到图表结束
+        g.append("line")
+            .attr("x1", -margin.left + 20) // 从左侧边缘开始
+            .attr("y1", groupPositions[group] + groupHeight) // y0位置
+            .attr("x2", chartWidth) // 延伸到图表区域结束
+            .attr("y2", groupPositions[group] + groupHeight)
+            .attr("stroke", color)
+            .attr("stroke-width", 1.5)
+            .attr("stroke-opacity", 0.8);
+        
+        // 绘制面积
+        g.append("path")
+            .datum(groupData)
+            .attr("fill", color)
+            .attr("d", area(group));
+        
+        // 添加组名标签 - 放在面积图左侧，距离更远
+        g.append("text")
+            .attr("x", -margin.left + 20) // 增加与图表的距离
+            .attr("y", groupPositions[group] + groupHeight - 10)
+            .attr("text-anchor", "start") // 左对齐
+            .attr("dominant-baseline", "middle")
+            .attr("fill", color)
+            .attr("font-weight", "bold")
+            .style("font-size", "14px")
+            .text(group);
+        
+        // 创建Y轴 - 在右侧
+        const yAxis = d3.axisRight(yScales[group])
+            .ticks(3) // 减少刻度数量，避免拥挤
+            .tickSize(0) // 不显示刻度线
+            .tickFormat(d => chartUtils.format.autoText(+(d))); // 使用简洁格式
+        
+        // 添加Y轴
+        const yAxisGroup = g.append("g")
+            .attr("transform", `translate(${chartWidth}, ${groupPositions[group]})`)
+            .call(yAxis);
+        
+        // 设置Y轴样式
+        yAxisGroup.selectAll("path")
+            .attr("stroke", color);
+        
+        yAxisGroup.selectAll("text")
+            .attr("fill", color)
+            .attr("font-size", "10px")
+            .attr("dx", "0.5em"); // 向右移动文本
+        
+        // 添加水平辅助线
+        yScales[group].ticks(3).forEach(tick => {
+            if (tick > 0) { // 跳过0线，因为已经单独添加了
+                g.append("line")
+                    .attr("x1", 0)
+                    .attr("y1", groupPositions[group] + yScales[group](tick))
+                    .attr("x2", chartWidth)
+                    .attr("y2", groupPositions[group] + yScales[group](tick))
+                    .attr("stroke", color)
+                    .attr("stroke-opacity", 0.2)
+                    .attr("stroke-width", 0.5)
+                    .attr("stroke-dasharray", "2,2"); // 虚线
+            }
+        });
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/area_chart/small_multiple_area_chart_02.js

@@ -0,0 +1,220 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Small Multiple Area Chart",
+    "chart_name": "small_multiple_area_chart_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 20]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["background"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 计算最长组名的宽度，用于动态调整左边距
+    const maxGroupNameWidth = d3.max(groups, group => chartUtils.text.measure(null, group, { fontSize: 14, fontWeight: "bold" }).width) || 0;
+    const dynamicLeftMargin = Math.max(120, maxGroupNameWidth + 40);
+    
+    // 设置尺寸和边距 - 动态调整左侧边距和右侧边距（为Y轴留出空间）
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { 
+        top: 60, 
+        right: 60, // 增加右边距为Y轴留出空间
+        bottom: 60, 
+        left: dynamicLeftMargin
+    };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 为每个组计算最大值
+    const groupMaxValues = {};
+    groups.forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        groupMaxValues[group] = d3.max(groupData, d => +d[yField]);
+    });
+    
+    // 计算每个组的垂直位置（上下错开）
+    const groupHeight = chartHeight / (groups.length * 1.5); // 每个组的高度，留出一些间距
+    const groupPositions = {};
+    groups.forEach((group, i) => {
+        groupPositions[group] = i * groupHeight * 1.5; // 乘以1.5是为了留出间距
+    });
+    
+    // 创建y轴比例尺（每个组有自己的比例尺）
+    const yScales = {};
+    groups.forEach(group => {
+        yScales[group] = d3.scaleLinear()
+            .domain([0, groupMaxValues[group]])
+            .range([groupHeight, 0]); // 从下到上
+    });
+    
+    // 添加网格线和x轴刻度
+    
+    // 添加垂直网格线
+    xTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", xScale(tick))
+            .attr("y1", 0)
+            .attr("x2", xScale(tick))
+            .attr("y2", chartHeight)
+            .attr("stroke", "#e0e0e0")  // 改为更明显的灰色网格线
+            .attr("stroke-opacity", 0.5)  // 增加不透明度
+            .attr("stroke-width", 1);
+    });
+    
+    xTicks.forEach(tick => {
+        // 添加上方x轴年份标签
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", -10)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "bottom")
+            .attr("fill", "#000000")  // 改为黑色文字
+            .style("font-size", "12px")
+            .text(xFormat(tick));
+        
+        // 添加下方x轴年份标签
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", chartHeight + 15)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "hanging")
+            .attr("fill", "#000000")  // 改为黑色文字
+            .style("font-size", "12px")
+            .text(xFormat(tick));
+    });
+    
+    // 创建面积生成器
+    const area = (group) => d3.area()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y0(groupPositions[group] + groupHeight) // 底部是固定的
+        .y1(d => groupPositions[group] + yScales[group](d[yField])) // 顶部根据数据变化
+        .curve(d3.curveBasis); // 使用平滑曲线
+    
+    // 为每个组创建面积图和Y轴
+    groups.forEach(group => {
+        // 过滤该组的数据
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 确保数据按日期排序
+        groupData.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        
+        // 获取颜色
+        const color = colorResolver.field(group, groups.indexOf(group), { palette: "category10" }).value;
+        
+        // 添加0线 - 水平线位于组的底部位置，延伸到图表结束
+        g.append("line")
+            .attr("x1", -margin.left + 20) // 从左侧边缘开始
+            .attr("y1", groupPositions[group] + groupHeight) // y0位置
+            .attr("x2", chartWidth) // 延伸到图表区域结束
+            .attr("y2", groupPositions[group] + groupHeight)
+            .attr("stroke", color)
+            .attr("stroke-width", 1.5)
+            .attr("stroke-opacity", 0.8);
+        
+        // 绘制面积
+        g.append("path")
+            .datum(groupData)
+            .attr("fill", color)
+            .attr("d", area(group));
+        
+        // 添加组名标签 - 放在面积图左侧，距离更远
+        g.append("text")
+            .attr("x", -margin.left + 20) // 增加与图表的距离
+            .attr("y", groupPositions[group] + groupHeight - 10)
+            .attr("text-anchor", "start") // 左对齐
+            .attr("dominant-baseline", "middle")
+            .attr("fill", color)
+            .attr("font-weight", "bold")
+            .style("font-size", "14px")
+            .text(group);
+        
+        // 创建Y轴 - 在右侧
+        const yAxis = d3.axisRight(yScales[group])
+            .ticks(3) // 减少刻度数量，避免拥挤
+            .tickSize(0) // 不显示刻度线
+            .tickFormat(d => chartUtils.format.autoText(+(d))); // 使用简洁格式
+        
+        // 添加Y轴
+        const yAxisGroup = g.append("g")
+            .attr("transform", `translate(${chartWidth}, ${groupPositions[group]})`)
+            .call(yAxis);
+        
+        // 设置Y轴样式
+        yAxisGroup.selectAll("path")
+            .attr("stroke", color);
+        
+        yAxisGroup.selectAll("text")
+            .attr("fill", "#000000")  // Y轴文字改为黑色
+            .attr("font-size", "10px")
+            .attr("dx", "0.5em"); // 向右移动文本
+        
+        // 添加水平辅助线
+        yScales[group].ticks(3).forEach(tick => {
+            if (tick > 0) { // 跳过0线，因为已经单独添加了
+                g.append("line")
+                    .attr("x1", 0)
+                    .attr("y1", groupPositions[group] + yScales[group](tick))
+                    .attr("x2", chartWidth)
+                    .attr("y2", groupPositions[group] + yScales[group](tick))
+                    .attr("stroke", color)
+                    .attr("stroke-opacity", 0.2)
+                    .attr("stroke-width", 0.5)
+                    .attr("stroke-dasharray", "2,2"); // 虚线
+            }
+        });
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/area_chart/spline_area_chart_01.js

@@ -0,0 +1,241 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Spline Area Chart",
+    "chart_name": "spline_area_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[5, 30], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": ["primary"],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "no",
+    "chart_for": "trend"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 120, right: 30, bottom: 120, left: 60 };
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表组
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 确保数据按日期排序
+    chartData.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    
+    // 创建x轴比例尺
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 从0开始
+    const yMax = d3.max(chartData, d => +d[yField]);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax * 1.4]) // 顶部留出10%的空间
+        .range([chartHeight, 0]);
+    
+    // 获取主色调
+    const primaryColor = colorResolver.other("primary", { fallback: "#a67eb7" }).value;
+    
+    // 创建渐变
+    const defs = svg.append("defs");
+    const gradientId = "area-gradient";
+    const gradient = defs.append("linearGradient")
+        .attr("id", gradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+    
+    gradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", primaryColor)
+        .attr("stop-opacity", 0.7);
+    
+    gradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", primaryColor)
+        .attr("stop-opacity", 0.0);
+    
+    
+    // 创建面积生成器
+    const area = d3.area()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y0(chartHeight)
+        .y1(d => yScale(+d[yField]))
+        .curve(d3.curveBasis);
+    
+    // 绘制面积
+    g.append("path")
+        .datum(chartData)
+        .attr("fill", `url(#${gradientId})`)
+        .attr("d", area);
+    
+    // 绘制线条
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveBasis);
+    
+    g.append("path")
+        .datum(chartData)
+        .attr("fill", "none")
+        .attr("stroke", primaryColor)
+        .attr("stroke-width", 3)
+        .attr("d", line);
+    
+    const sampleLabelIndex = sampleLabels(chartData.length);
+
+    // 添加数据点和标签 - 优化标签位置，包括首尾点
+    chartData.forEach((d, i) => {
+        if (!sampleLabelIndex.includes(i)) {
+            return;
+        }
+
+        const x = xScale(chartUtils.format.parseDate(d[xField]));
+        const y = yScale(+d[yField]);
+        
+        // 计算更好的标签位置，避免遮挡线条
+        let labelY = y;
+        
+        // 根据点的位置计算标签位置
+        if (i === 0) {
+            // 第一个点 - 考虑后一个点
+            if (chartData.length > 1) {
+                const nextPoint = chartData[i+1];
+                const nextY = yScale(nextPoint[yField]);
+                
+                // 计算向前20%的插值
+                const forwardY = y + (nextY - y) * 0.2;
+                
+                // 取���个值中的最小值
+                labelY = Math.min(y, forwardY) - 4;
+            }
+            // 确保标签至少在数据点上方30像素
+            labelY = Math.min(labelY, y - 4);
+        } else if (i === chartData.length - 1) {
+            // 最后一个点 - 考虑前一个点
+            const prevPoint = chartData[i-1];
+            const prevY = yScale(prevPoint[yField]);
+            
+            // 计算向后20%的插值
+            const backwardY = y + (prevY - y) * 0.2;
+            
+            // 取两个值中的最小值
+            labelY = Math.min(y, backwardY) - 4;
+            
+            // 确保标签至少在数据点上方30像素
+            labelY = Math.min(labelY, y - 4);
+        } else {
+            // 中间点 - 考虑前后两个点
+            const prevPoint = chartData[i-1];
+            const nextPoint = chartData[i+1];
+            
+            // 计算前一个点的y值
+            const prevY = yScale(prevPoint[yField]);
+            
+            // 计算后一个点的y值
+            const nextY = yScale(nextPoint[yField]);
+            
+            // 计算向前20%的插值
+            const forwardY = y + (nextY - y) * 0.2;
+            
+            // 计算向后20%的插值
+            const backwardY = y + (prevY - y) * 0.2;
+            
+            // 取三个值中的最小值（在SVG中，较小的y值表示较高的位置）
+            labelY = Math.min(y, forwardY, backwardY) - 4;
+            
+            // 确保标签至少在数据点上方30像素
+            labelY = Math.min(labelY, y - 4);
+        }
+        
+        // 添加标签背景
+        const labelValue = chartUtils.format.autoText(+d[yField]);
+        const labelWidth = chartUtils.text.measure(null, labelValue, { fontSize: 14 }).width + 20;
+        const labelHeight = 25;
+        
+        g.append("rect")
+            .attr("x", x - labelWidth / 2)
+            .attr("y", labelY - labelHeight - 15)
+            .attr("width", labelWidth)
+            .attr("height", labelHeight)
+            .attr("rx", 5)
+            .attr("ry", 5)
+            .attr("fill", primaryColor)
+            .attr("opacity", 0.9);
+        
+        // 添加标签文本
+        g.append("text")
+            .attr("x", x)
+            .attr("y", labelY - 15 - labelHeight / 2)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#fff")
+            .attr("font-weight", "bold")
+            .style("font-size", "14px")
+            .text(labelValue);
+        
+        // 添加倒三角形 - 连接到标签
+        const triangleSize = 8;
+        g.append("path")
+            .attr("d", `M${x-triangleSize/2},${labelY-15} L${x+triangleSize/2},${labelY-15} L${x},${labelY-15+triangleSize} Z`)
+            .attr("fill", primaryColor);
+    
+    });
+    
+    // 添加X轴刻度文本
+    xTicks.forEach(tick => {
+        const x = xScale(tick);
+            
+        g.append("text")
+            .attr("x", x)
+            .attr("y", chartHeight + 25)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#aaa")
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/area_chart/spline_area_chart_02.js

@@ -0,0 +1,241 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Spline Area Chart",
+    "chart_name": "spline_area_chart_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[5, 30], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": ["primary"],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "no",
+    "chart_for": "trend"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 120, right: 30, bottom: 120, left: 60 };
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表组
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 确保数据按日期排序
+    chartData.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+    
+    // 创建x轴比例尺
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺 - 从0开始
+    const yMax = d3.max(chartData, d => +d[yField]);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax * 1.4]) // 顶部留出10%的空间
+        .range([chartHeight, 0]);
+    
+    // 获取主色调
+    const primaryColor = colorResolver.other("primary", { fallback: "#a67eb7" }).value;
+    
+    // 创建渐变
+    const defs = svg.append("defs");
+    const gradientId = "area-gradient";
+    const gradient = defs.append("linearGradient")
+        .attr("id", gradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+    
+    gradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", primaryColor)
+        .attr("stop-opacity", 0.7);
+    
+    gradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", primaryColor)
+        .attr("stop-opacity", 0);
+    
+    
+    // 创建面积生成器
+    const area = d3.area()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y0(chartHeight)
+        .y1(d => yScale(+d[yField]))
+        .curve(d3.curveBasis);
+    
+    // 绘制面积
+    g.append("path")
+        .datum(chartData)
+        .attr("fill", `url(#${gradientId})`)
+        .attr("d", area);
+    
+    // 绘制线条
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveBasis);
+    
+    g.append("path")
+        .datum(chartData)
+        .attr("fill", "none")
+        .attr("stroke", primaryColor)
+        .attr("stroke-width", 3)
+        .attr("d", line);
+    
+    const sampleLabelIndex = sampleLabels(chartData.length);
+
+    // 添加数据点和标签 - 优化标签位置，包括首尾点
+    chartData.forEach((d, i) => {
+        if (!sampleLabelIndex.includes(i)) {
+            return;
+        }
+
+        const x = xScale(chartUtils.format.parseDate(d[xField]));
+        const y = yScale(+d[yField]);
+        
+        // 计算更好的标签位置，避免遮挡线条
+        let labelY = y;
+        
+        // 根据点的位置计算标签位置
+        if (i === 0) {
+            // 第一个点 - 考虑后一个点
+            if (chartData.length > 1) {
+                const nextPoint = chartData[i+1];
+                const nextY = yScale(nextPoint[yField]);
+                
+                // 计算向前20%的插值
+                const forwardY = y + (nextY - y) * 0.2;
+                
+                // 取两个���中的最小值
+                labelY = Math.min(y, forwardY) - 4;
+            }
+            // 确保标签至少在数据点上方30像素
+            labelY = Math.min(labelY, y - 4);
+        } else if (i === chartData.length - 1) {
+            // 最后一个点 - 考虑前一个点
+            const prevPoint = chartData[i-1];
+            const prevY = yScale(prevPoint[yField]);
+            
+            // 计算向后20%的插值
+            const backwardY = y + (prevY - y) * 0.2;
+            
+            // 取两个值中的最小值
+            labelY = Math.min(y, backwardY) - 4;
+            
+            // 确保标签至少在数据点上方30像素
+            labelY = Math.min(labelY, y - 4);
+        } else {
+            // 中间点 - 考虑前后两个点
+            const prevPoint = chartData[i-1];
+            const nextPoint = chartData[i+1];
+            
+            // 计算前一个点的y值
+            const prevY = yScale(prevPoint[yField]);
+            
+            // 计算后一个点的y值
+            const nextY = yScale(nextPoint[yField]);
+            
+            // 计算向前20%的插值
+            const forwardY = y + (nextY - y) * 0.2;
+            
+            // 计算向后20%的插值
+            const backwardY = y + (prevY - y) * 0.2;
+            
+            // 取三个值中的最小值（在SVG中，较小的y值表示较高的位置）
+            labelY = Math.min(y, forwardY, backwardY) - 4;
+            
+            // 确保标签至少在数据点上方30像素
+            labelY = Math.min(labelY, y - 4);
+        }
+        
+        // 添加标签背景
+        const labelValue = chartUtils.format.integer(d[yField]).text;
+        const labelWidth = chartUtils.text.measure(null, labelValue, { fontSize: 14 }).width + 20;
+        const labelHeight = 25;
+        
+        g.append("rect")
+            .attr("x", x - labelWidth / 2)
+            .attr("y", labelY - labelHeight - 15)
+            .attr("width", labelWidth)
+            .attr("height", labelHeight)
+            .attr("rx", 5)
+            .attr("ry", 5)
+            .attr("fill", primaryColor)
+            .attr("opacity", 0.9);
+        
+        // 添加标签文本
+        g.append("text")
+            .attr("x", x)
+            .attr("y", labelY - 15 - labelHeight / 2)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#fff")
+            .attr("font-weight", "bold")
+            .style("font-size", "14px")
+            .text(labelValue);
+        
+        // 添加倒三角形 - 连接到标签
+        const triangleSize = 8;
+        g.append("path")
+            .attr("d", `M${x-triangleSize/2},${labelY-15} L${x+triangleSize/2},${labelY-15} L${x},${labelY-15+triangleSize} Z`)
+            .attr("fill", primaryColor);
+    
+    });
+    
+    // 添加X轴刻度文本
+    xTicks.forEach(tick => {
+        const x = xScale(tick);
+            
+        g.append("text")
+            .attr("x", x)
+            .attr("y", chartHeight + 25)
+            .attr("text-anchor", "middle")
+            .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/area_chart/spline_layered_area_chart_01.js

@@ -0,0 +1,595 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Layered Area Chart",
+    "chart_name": "spline_layered_area_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const fontSize = chartUtils.text.fontSize;
+
+    d3.select(containerSelector).html("");
+
+    const columnName = column => column && (column.field || column.name || column.key);
+    let xField = chartUtils.schema.columnField(dataColumns, 0);
+    let yField = chartUtils.schema.columnField(dataColumns, 1);
+    let groupField = chartUtils.schema.columnField(dataColumns, 2);
+    if (!chartData.length || chartData[0][xField] === undefined) xField = columnName(dataColumns[0]);
+    if (!chartData.length || chartData[0][yField] === undefined) yField = columnName(dataColumns[1]);
+    if (!chartData.length || chartData[0][groupField] === undefined) groupField = columnName(dataColumns[2]);
+
+    const width = Math.max(620, +(variables.width || 650));
+    const height = Math.max(900, +(variables.height || 975));
+    const title = (jsonData.titles && jsonData.titles.main_title)
+        || (jsonData.metadata && jsonData.metadata.title)
+        || "";
+    const subtitle = (jsonData.titles && jsonData.titles.sub_title)
+        || (jsonData.metadata && (jsonData.metadata.description || jsonData.metadata.main_insight))
+        || "";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const bg = defs.append("radialGradient")
+        .attr("id", "spline-layered-bg")
+        .attr("cx", "54%")
+        .attr("cy", "32%")
+        .attr("r", "80%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#082748");
+    bg.append("stop").attr("offset", "58%").attr("stop-color", "#041A31");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#020B17");
+
+    const glowFilter = defs.append("filter")
+        .attr("id", "spline-layered-glow")
+        .attr("x", "-60%")
+        .attr("y", "-60%")
+        .attr("width", "220%")
+        .attr("height", "220%");
+    glowFilter.append("feGaussianBlur")
+        .attr("stdDeviation", 8)
+        .attr("result", "blur");
+    const glowMerge = glowFilter.append("feMerge");
+    glowMerge.append("feMergeNode").attr("in", "blur");
+    glowMerge.append("feMergeNode").attr("in", "SourceGraphic");
+
+    const shadowFilter = defs.append("filter")
+        .attr("id", "spline-layered-card-shadow")
+        .attr("x", "-40%")
+        .attr("y", "-40%")
+        .attr("width", "180%")
+        .attr("height", "180%");
+    shadowFilter.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 10)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#000000")
+        .attr("flood-opacity", 0.28);
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#spline-layered-bg)");
+    svg.append("circle")
+        .attr("cx", width * 0.82)
+        .attr("cy", height * 0.15)
+        .attr("r", width * 0.30)
+        .attr("fill", "#154D85")
+        .attr("opacity", 0.08);
+
+    const headerSlot = {
+        x: width * 0.055,
+        y: height * 0.045,
+        size: Math.min(150, width * 0.22)
+    };
+    const slot = svg.append("g")
+        .attr("class", "reserved-asset-slot spline-layered-header-topic-icon-slot")
+        .attr("data-asset-slot", "header_topic_icon_slot")
+        .attr("data-reserved-slot", "header_topic_icon_slot")
+        .attr("data-slot-policy", "image2_asset_or_input_provided")
+        .attr("data-asset-source-policy", "image2_asset_or_input_provided")
+        .attr("data-anchor", "upper-left-header")
+        .attr("data-collision-rule", "avoid title subtitle metric pill and chart panel")
+        .attr("data-bbox", `${headerSlot.x.toFixed(1)} ${headerSlot.y.toFixed(1)} ${headerSlot.size.toFixed(1)} ${headerSlot.size.toFixed(1)}`)
+        .attr("transform", `translate(${headerSlot.x},${headerSlot.y})`);
+    slot.append("circle")
+        .attr("cx", headerSlot.size / 2)
+        .attr("cy", headerSlot.size / 2)
+        .attr("r", headerSlot.size * 0.47)
+        .attr("fill", "#061B36")
+        .attr("stroke", "#3E8CFF")
+        .attr("stroke-width", 3)
+        .attr("opacity", 0.95)
+        .style("filter", "url(#spline-layered-glow)");
+    slot.append("circle")
+        .attr("cx", headerSlot.size / 2)
+        .attr("cy", headerSlot.size / 2)
+        .attr("r", headerSlot.size * 0.34)
+        .attr("fill", "none")
+        .attr("stroke", "#9DC8FF")
+        .attr("stroke-width", 2)
+        .attr("stroke-dasharray", "6 8")
+        .attr("opacity", 0.58);
+    slot.append("path")
+        .attr("class", "neutral-asset-placeholder")
+        .attr("d", `M${headerSlot.size * 0.31},${headerSlot.size * 0.60} L${headerSlot.size * 0.43},${headerSlot.size * 0.49} L${headerSlot.size * 0.52},${headerSlot.size * 0.56} L${headerSlot.size * 0.69},${headerSlot.size * 0.39}`)
+        .attr("fill", "none")
+        .attr("stroke", "#BFD9FF")
+        .attr("stroke-width", 5)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round")
+        .attr("opacity", 0.72);
+
+    function wrapText(text, maxChars, maxLines) {
+        const words = String(text || "").replace(/^\"|\"$/g, "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const test = line ? `${line} ${word}` : word;
+            if (test.length > maxChars && line) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = test;
+            }
+        });
+        if (line) lines.push(line);
+        if (lines.length > maxLines) {
+            const kept = lines.slice(0, maxLines);
+            const overflowWords = lines.slice(maxLines).join(" ").split(/\s+/).filter(Boolean);
+            while (overflowWords.length && `${kept[maxLines - 1]} ${overflowWords[0]}`.length <= maxChars) {
+                kept[maxLines - 1] = `${kept[maxLines - 1]} ${overflowWords.shift()}`;
+            }
+            return kept;
+        }
+        return lines.length ? lines : [""];
+    }
+
+    const titleX = width * 0.29;
+    const titleSafeWidth = width - titleX - 30;
+    const titleLines = wrapText(title, width < 660 ? 24 : 26, 3);
+    const titleSize = titleLines.length > 2 ? 33 : 39;
+    const titleGroup = svg.append("g")
+        .attr("class", "spline-layered-title-stack")
+        .attr("data-reserved-slot", "header-title-typography")
+        .attr("data-asset-source-policy", "input-text")
+        .attr("data-anchor", "top-right-header")
+        .attr("data-collision-rule", "stay right of header topic slot and above metric pill");
+    titleLines.forEach((line, i) => {
+        const isLast = i === titleLines.length - 1;
+        titleGroup.append("text")
+            .attr("x", titleX)
+            .attr("y", height * 0.075 + i * titleSize * 1.08)
+            .attr("font-family", "Georgia, 'Times New Roman', serif")
+            .attr("font-size", titleSize)
+            .attr("font-weight", 700)
+            .attr("fill", isLast ? "#74AFFF" : "#FFFFFF")
+            .attr("letter-spacing", 0)
+            .attr("textLength", Math.min(titleSafeWidth, Math.max(0, line.length * titleSize * 0.56)) || null)
+            .attr("lengthAdjust", "spacingAndGlyphs")
+            .text(line);
+    });
+
+    wrapText(subtitle, 45, 3).forEach((line, i) => {
+        titleGroup.append("text")
+            .attr("x", titleX)
+            .attr("y", height * 0.20 + i * 24)
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", 18)
+            .attr("font-weight", 400)
+            .attr("fill", "#C9D6E8")
+            .attr("opacity", 0.94)
+            .attr("textLength", Math.min(titleSafeWidth, Math.max(0, line.length * 18 * 0.54)) || null)
+            .attr("lengthAdjust", "spacingAndGlyphs")
+            .text(line);
+    });
+
+    const plot = {
+        x: width * 0.085,
+        y: height * 0.365,
+        width: width * 0.81,
+        height: height * 0.43
+    };
+    const metricW = width * 0.58;
+    const metricX = plot.x + (plot.width - metricW) / 2;
+    const metricY = plot.y - 58;
+    const yColumn = dataColumns.find(c => chartUtils.schema.columnField([c], 0) === yField) || dataColumns[1] || {};
+    const yLabel = yColumn.description || yField;
+    svg.append("rect")
+        .attr("class", "spline-layered-metric-pill")
+        .attr("x", metricX)
+        .attr("y", metricY)
+        .attr("width", metricW)
+        .attr("height", 40)
+        .attr("rx", 20)
+        .attr("fill", "#08264B")
+        .attr("stroke", "#1D68B7")
+        .attr("stroke-width", 1.4)
+        .attr("opacity", 0.94);
+    svg.append("text")
+        .attr("x", metricX + metricW / 2)
+        .attr("y", metricY + 18)
+        .attr("text-anchor", "middle")
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", 13)
+        .attr("font-weight", 800)
+        .attr("letter-spacing", 1.5)
+        .attr("fill", "#DDEBFF")
+        .attr("textLength", metricW - 34)
+        .attr("lengthAdjust", "spacingAndGlyphs")
+        .text(String(yLabel).toUpperCase().slice(0, 58));
+    svg.append("text")
+        .attr("x", metricX + metricW / 2)
+        .attr("y", metricY + 33)
+        .attr("text-anchor", "middle")
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", 12)
+        .attr("fill", "#B8C9DE")
+        .text(`(${yField})`);
+
+    const parseX = value => {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed;
+        const numeric = +value;
+        if (Number.isFinite(numeric)) return new Date(numeric, 0, 1);
+        return new Date(String(value));
+    };
+    const xValues = Array.from(new Set(chartData.map(d => d[xField])))
+        .map(value => ({ value, date: parseX(value) }))
+        .sort((a, b) => a.date - b.date);
+    const xValueByKey = new Map(xValues.map(d => [String(d.value), d]));
+    const xDomain = d3.extent(xValues, d => d.date);
+    const xScale = d3.scaleTime()
+        .domain(xDomain)
+        .range([plot.x, plot.x + plot.width]);
+
+    const grouped = d3.group(chartData, d => d[groupField]);
+    const groups = Array.from(grouped.keys()).map((group, idx) => {
+        const values = grouped.get(group)
+            .map(d => ({ ...d, __date: parseX(d[xField]), __y: +d[yField] }))
+            .sort((a, b) => a.__date - b.__date);
+        const latest = values[values.length - 1] || {};
+        return { group, idx, values, latestValue: +latest.__y || 0, latest };
+    }).sort((a, b) => b.latestValue - a.latestValue);
+
+    const maxY = d3.max(chartData, d => +d[yField]) || 1;
+    const yMax = Math.max(1, Math.ceil(maxY * 1.12 / 5) * 5);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax])
+        .range([plot.y + plot.height, plot.y]);
+
+    const palette = ["#3F8CFF", "#F25A9D", "#2FD0C6", "#FFC94A", "#8A7CFF", "#54E6A0"];
+    const colorFor = (group, idx) => {
+        if (idx < 2) return palette[idx];
+        return colorResolver.field(group, idx, { fallbackKey: "primary" }).value || palette[idx % palette.length];
+    };
+    const softColorFor = (group, idx) => {
+        const c = d3.color(colorFor(group, idx));
+        return c ? c.formatHex() : palette[idx % palette.length];
+    };
+
+    groups.forEach((series, idx) => {
+        const gradientId = `spline-layered-area-gradient-${idx}`;
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "100%");
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", softColorFor(series.group, idx))
+            .attr("stop-opacity", 0.88);
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", softColorFor(series.group, idx))
+            .attr("stop-opacity", 0.20);
+    });
+
+    const yTicks = d3.ticks(0, yMax, 6);
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        svg.append("line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.width)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", "#55718F")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", tick === 0 ? null : "3 5")
+            .attr("opacity", tick === 0 ? 0.80 : 0.28);
+        svg.append("text")
+            .attr("x", plot.x - 16)
+            .attr("y", y + 5)
+            .attr("text-anchor", "end")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", 17)
+            .attr("font-weight", tick === 0 ? 700 : 500)
+            .attr("fill", "#B2C2D8")
+            .attr("opacity", tick === 0 ? 0.94 : 0.86)
+            .text(tick);
+    });
+
+    const preferredTickIndexes = new Set();
+    const targetTickCount = xValues.length > 8 ? 6 : xValues.length;
+    const tickStep = Math.max(1, Math.ceil(xValues.length / targetTickCount));
+    xValues.forEach((_, i) => {
+        if (i % tickStep === 0) preferredTickIndexes.add(i);
+    });
+    preferredTickIndexes.add(0);
+    preferredTickIndexes.add(xValues.length - 1);
+    const xTickLabelIndexes = [];
+    const minTickLabelGap = 58;
+    Array.from(preferredTickIndexes).sort((a, b) => a - b).forEach(i => {
+        const x = xScale(xValues[i].date);
+        const previousIndex = xTickLabelIndexes[xTickLabelIndexes.length - 1];
+        if (previousIndex === undefined) {
+            xTickLabelIndexes.push(i);
+            return;
+        }
+        const previousX = xScale(xValues[previousIndex].date);
+        if (x - previousX >= minTickLabelGap) {
+            xTickLabelIndexes.push(i);
+            return;
+        }
+        if (i === xValues.length - 1 && previousIndex !== 0) {
+            xTickLabelIndexes[xTickLabelIndexes.length - 1] = i;
+        }
+    });
+    const xTickLabelIndexSet = new Set(xTickLabelIndexes);
+
+    xValues.forEach((tick, i) => {
+        const x = xScale(tick.date);
+        svg.append("line")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", plot.y)
+            .attr("y2", plot.y + plot.height)
+            .attr("stroke", "#55718F")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "4 5")
+            .attr("opacity", 0.24);
+        if (xTickLabelIndexSet.has(i)) {
+            svg.append("text")
+                .attr("x", x)
+                .attr("y", plot.y + plot.height + 31)
+                .attr("text-anchor", "middle")
+                .attr("font-family", "Arial, Helvetica, sans-serif")
+                .attr("font-size", 18)
+                .attr("font-weight", 800)
+                .attr("fill", i === xValues.length - 1 ? "#54A2FF" : "#C7D3E5")
+                .text(tick.date instanceof Date && !Number.isNaN(tick.date.getTime()) && /^\d{4}$/.test(String(tick.value))
+                    ? String(tick.value)
+                    : String(tick.value == null ? "" : tick.value));
+        }
+    });
+
+    svg.append("line")
+        .attr("x1", plot.x)
+        .attr("y1", plot.y)
+        .attr("x2", plot.x)
+        .attr("y2", plot.y + plot.height)
+        .attr("stroke", "#D9E7F9")
+        .attr("stroke-width", 1.2)
+        .attr("opacity", 0.72);
+    svg.append("line")
+        .attr("x1", plot.x)
+        .attr("y1", plot.y + plot.height)
+        .attr("x2", plot.x + plot.width)
+        .attr("y2", plot.y + plot.height)
+        .attr("stroke", "#D9E7F9")
+        .attr("stroke-width", 1.2)
+        .attr("opacity", 0.72);
+
+    const area = d3.area()
+        .x(d => xScale(d.__date))
+        .y0(plot.y + plot.height)
+        .y1(d => yScale(d.__y))
+        .curve(d3.curveMonotoneX);
+
+    groups.forEach((series, idx) => {
+        svg.append("path")
+            .datum(series.values)
+            .attr("class", "spline-layered-area-mark")
+            .attr("data-series", series.group)
+            .attr("fill", `url(#spline-layered-area-gradient-${idx})`)
+            .attr("stroke", colorFor(series.group, idx))
+            .attr("stroke-width", 2.4)
+            .attr("stroke-linejoin", "round")
+            .attr("opacity", idx === 0 ? 0.92 : 0.86)
+            .attr("d", area)
+            .style("filter", "url(#spline-layered-card-shadow)");
+    });
+
+    const visibleSeries = groups.slice(0, Math.min(2, groups.length));
+    visibleSeries.forEach((series, idx) => {
+        const color = colorFor(series.group, idx);
+        series.values.forEach((d, pointIdx) => {
+            const x = xScale(d.__date);
+            const y = yScale(d.__y);
+            svg.append("circle")
+                .attr("class", "spline-layered-point-marker")
+                .attr("data-series", series.group)
+                .attr("data-x", d[xField])
+                .attr("data-y", d[yField])
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", 5.6)
+                .attr("fill", color)
+                .attr("stroke", "#EAF4FF")
+                .attr("stroke-width", 2.2)
+                .style("filter", "url(#spline-layered-glow)");
+            const showEvery = series.values.length > 8 ? Math.ceil(series.values.length / 5) : 1;
+            if (pointIdx % showEvery === 0 || pointIdx === series.values.length - 1) {
+                svg.append("text")
+                    .attr("x", x)
+                    .attr("y", y - 14 - idx * 2)
+                    .attr("text-anchor", "middle")
+                    .attr("font-family", "Arial, Helvetica, sans-serif")
+                    .attr("font-size", 16)
+                    .attr("font-weight", 900)
+                    .attr("fill", color)
+                    .text(chartUtils.format.integer(d.__y).text);
+            }
+        });
+    });
+
+    const lastX = xScale(xValues[xValues.length - 1].date);
+    svg.append("line")
+        .attr("x1", lastX)
+        .attr("x2", lastX)
+        .attr("y1", plot.y)
+        .attr("y2", plot.y + plot.height)
+        .attr("stroke", "#D6E8FF")
+        .attr("stroke-width", 1.2)
+        .attr("stroke-dasharray", "4 5")
+        .attr("opacity", 0.72);
+
+    const placedCallouts = [];
+    visibleSeries.forEach((series, idx) => {
+        const d = series.latest;
+        const color = colorFor(series.group, idx);
+        const pointX = xScale(d.__date);
+        const pointY = yScale(d.__y);
+        const labelText = String(series.group).toUpperCase();
+        const boxW = Math.min(142, Math.max(92, 48 + labelText.length * 4.2));
+        const boxH = 58;
+        let boxX = Math.min(width - boxW - 22, pointX + 18);
+        let boxY = pointY - (idx === 0 ? 57 : -22);
+        placedCallouts.forEach(prev => {
+            if (Math.abs((boxY + boxH / 2) - (prev.y + prev.h / 2)) < boxH + 8) {
+                boxY = prev.y + prev.h + 12;
+            }
+        });
+        boxY = Math.max(plot.y + 8, Math.min(plot.y + plot.height - boxH - 8, boxY));
+        placedCallouts.push({ x: boxX, y: boxY, w: boxW, h: boxH });
+
+        svg.append("path")
+            .attr("class", "spline-layered-endpoint-leader")
+            .attr("data-series", series.group)
+            .attr("d", `M${pointX},${pointY} L${boxX},${boxY + boxH * 0.50} L${boxX},${boxY + boxH * 0.68} Z`)
+            .attr("fill", color)
+            .attr("opacity", 0.92);
+        svg.append("rect")
+            .attr("class", "spline-layered-endpoint-callout")
+            .attr("data-series", series.group)
+            .attr("x", boxX)
+            .attr("y", boxY)
+            .attr("width", boxW)
+            .attr("height", boxH)
+            .attr("rx", 10)
+            .attr("fill", color)
+            .attr("stroke", "#BBD8FF")
+            .attr("stroke-width", idx === 0 ? 1.6 : 1.0)
+            .style("filter", "url(#spline-layered-card-shadow)");
+        const labelFontSize = Math.min(12, Math.max(8, (boxW - 16) / Math.max(1, labelText.length) * 1.55));
+        const shouldFitLabel = labelText.length * labelFontSize * 0.62 > boxW - 16;
+        const label = svg.append("text")
+            .attr("x", boxX + boxW / 2)
+            .attr("y", boxY + 18)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", labelFontSize)
+            .attr("font-weight", 800)
+            .attr("fill", "#FFFFFF")
+            .attr("opacity", 0.92);
+        if (shouldFitLabel) {
+            label.attr("textLength", boxW - 16)
+                .attr("lengthAdjust", "spacingAndGlyphs");
+        }
+        label.text(labelText);
+        svg.append("text")
+            .attr("x", boxX + boxW / 2)
+            .attr("y", boxY + 48)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", 29)
+            .attr("font-weight", 900)
+            .attr("fill", "#FFFFFF")
+            .text(chartUtils.format.integer(d.__y).text);
+    });
+
+    if (visibleSeries.length >= 2 && visibleSeries[1].latestValue > 0) {
+        const gain = Math.round(((visibleSeries[0].latestValue - visibleSeries[1].latestValue) / visibleSeries[1].latestValue) * 100);
+        const topY = yScale(visibleSeries[0].latestValue);
+        const lowY = yScale(visibleSeries[1].latestValue);
+        const gainR = 58;
+        const candidates = [
+            { x: plot.x + plot.width * 0.88, y: (topY + lowY) / 2 },
+            { x: plot.x + plot.width * 0.78, y: plot.y + plot.height * 0.48 },
+            { x: plot.x + plot.width * 0.72, y: plot.y + plot.height * 0.32 }
+        ];
+        const collides = c => placedCallouts.some(b =>
+            c.x + gainR > b.x && c.x - gainR < b.x + b.w && c.y + gainR > b.y && c.y - gainR < b.y + b.h
+        );
+        const chosen = candidates.find(c => !collides(c)) || candidates[candidates.length - 1];
+        svg.append("g")
+            .attr("class", "spline-layered-gain-callout")
+            .attr("data-annotation", "latest-relative-gain")
+            .attr("data-anchor", "latest-series-gap")
+            .attr("data-collision-rule", "avoid endpoint callouts markers axes metric pill and plot edge")
+            .attr("transform", `translate(${chosen.x},${chosen.y})`)
+            .call(gainG => {
+                gainG.append("circle")
+                    .attr("r", gainR)
+                    .attr("fill", "#082349")
+                    .attr("stroke", "#3F8CFF")
+                    .attr("stroke-width", 3)
+                    .style("filter", "url(#spline-layered-glow)");
+                gainG.append("circle")
+                    .attr("r", gainR - 10)
+                    .attr("fill", "none")
+                    .attr("stroke", "#75B4FF")
+                    .attr("stroke-width", 1.3)
+                    .attr("opacity", 0.65);
+                gainG.append("text")
+                    .attr("x", 0)
+                    .attr("y", 2)
+                    .attr("text-anchor", "middle")
+                    .attr("font-family", "Arial, Helvetica, sans-serif")
+                    .attr("font-size", String(gain).length > 3 ? 28 : 37)
+                    .attr("font-weight", 900)
+                    .attr("fill", "#FFFFFF")
+                    .text(`${gain >= 0 ? "+" : ""}${gain}%`);
+                gainG.append("text")
+                    .attr("x", 0)
+                    .attr("y", 28)
+                    .attr("text-anchor", "middle")
+                    .attr("font-family", "Arial, Helvetica, sans-serif")
+                    .attr("font-size", 11)
+                    .attr("font-weight", 700)
+                    .attr("fill", "#DDEBFF")
+                    .text("LATEST GAP");
+            });
+    }
+
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/area_chart/spline_multiple_area_chart_01.js

@@ -0,0 +1,572 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Multiple Area Chart",
+    "chart_name": "spline_multiple_area_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": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const colors = jsonData.colors_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const yColumn = chartUtils.schema.column(dataColumns, 1, { fallbackKey: yField });
+    const yLabel = yColumn.rawLabel || yField;
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    let groups = [...new Set(chartData.map(d => d[groupField]))].slice(0, 2);
+    if (groups.length < 2) {
+        groups = groups.concat(["Series B"]).slice(0, 2);
+    }
+
+    const width = +variables.width || 800;
+    const inputHeight = +variables.height || 600;
+    const height = Math.max(inputHeight, Math.round(width * 1.15));
+    const uid = `spline-area-${Math.floor(Math.random() * 1e9)}`;
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    defs.append("linearGradient")
+        .attr("id", `${uid}-panel`)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "100%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#052742");
+            grad.append("stop").attr("offset", "56%").attr("stop-color", "#062033");
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#031524");
+        });
+
+    defs.append("radialGradient")
+        .attr("id", `${uid}-light`)
+        .attr("cx", "82%")
+        .attr("cy", "0%")
+        .attr("r", "80%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#2ed1d0").attr("stop-opacity", 0.28);
+            grad.append("stop").attr("offset", "46%").attr("stop-color", "#0b4264").attr("stop-opacity", 0.16);
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#00101f").attr("stop-opacity", 0);
+        });
+
+    defs.append("radialGradient")
+        .attr("id", `${uid}-slotFill`)
+        .attr("cx", "50%")
+        .attr("cy", "42%")
+        .attr("r", "58%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#1a8195").attr("stop-opacity", 0.44);
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#06293e").attr("stop-opacity", 0.22);
+        });
+
+    defs.append("linearGradient")
+        .attr("id", `${uid}-leftArea`)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#bdf5eb");
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#7fe4d6");
+        });
+
+    defs.append("linearGradient")
+        .attr("id", `${uid}-rightArea`)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%")
+        .call(grad => {
+            grad.append("stop").attr("offset", "0%").attr("stop-color", "#28d5cf");
+            grad.append("stop").attr("offset", "100%").attr("stop-color", "#1aabae");
+        });
+
+    defs.append("filter")
+        .attr("id", `${uid}-softGlow`)
+        .attr("x", "-18%")
+        .attr("y", "-18%")
+        .attr("width", "136%")
+        .attr("height", "136%")
+        .call(filter => {
+            filter.append("feGaussianBlur").attr("stdDeviation", 3).attr("result", "blur");
+            const merge = filter.append("feMerge");
+            merge.append("feMergeNode").attr("in", "blur");
+            merge.append("feMergeNode").attr("in", "SourceGraphic");
+        });
+
+    svg.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("rx", 0)
+        .attr("fill", `url(#${uid}-panel)`)
+        .attr("fill-opacity", 0.28);
+
+    svg.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", `url(#${uid}-light)`);
+
+    const margin = {
+        top: Math.max(62, height * 0.09),
+        right: Math.max(34, width * 0.06),
+        bottom: Math.max(128, height * 0.20),
+        left: Math.max(34, width * 0.06)
+    };
+
+    const plot = {
+        x: margin.left,
+        y: margin.top,
+        w: width - margin.left - margin.right,
+        h: Math.max(230, height - margin.top - margin.bottom)
+    };
+
+    const centerX = plot.x + plot.w / 2;
+    const centerWidth = Math.max(54, Math.min(78, plot.w * 0.13));
+    const halfCenter = centerWidth / 2;
+    const leftBase = centerX - halfCenter;
+    const rightBase = centerX + halfCenter;
+    const leftOuter = plot.x + Math.max(6, plot.w * 0.015);
+    const rightOuter = plot.x + plot.w - Math.max(6, plot.w * 0.015);
+
+    const parseTemporal = value => {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(+parsed)) return parsed;
+        const numeric = Number(value);
+        if (Number.isFinite(numeric)) return new Date(numeric, 0, 1);
+        return new Date(String(value));
+    };
+
+    const prepared = chartData
+        .filter(d => groups.includes(d[groupField]))
+        .map((d, index) => ({
+            raw: d,
+            index,
+            group: d[groupField],
+            date: parseTemporal(d[xField]),
+            value: Math.max(0, +d[yField] || 0)
+        }))
+        .filter(d => d.date instanceof Date && !Number.isNaN(+d.date));
+
+    const allDates = [...new Map(prepared.map(d => [+d.date, d.date])).values()]
+        .sort((a, b) => +a - +b);
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(allDates))
+        .range([plot.y + 2, plot.y + plot.h - 2]);
+
+    const maxValue = d3.max(prepared, d => d.value) || 1;
+    const step = niceStep(maxValue);
+    const niceMax = Math.max(step, Math.ceil(maxValue / step) * step);
+
+    const leftScale = d3.scaleLinear()
+        .domain([0, niceMax])
+        .range([leftBase, leftOuter]);
+
+    const rightScale = d3.scaleLinear()
+        .domain([0, niceMax])
+        .range([rightBase, rightOuter]);
+
+    const panel = svg.append("g").attr("class", "spline-multiple-area-panel");
+
+    for (let i = 0; i < 10; i++) {
+        panel.append("path")
+            .attr("d", wavePath(width, height, i))
+            .attr("fill", "none")
+            .attr("stroke", "#2db7c2")
+            .attr("stroke-opacity", i % 2 ? 0.06 : 0.038)
+            .attr("stroke-width", 1);
+    }
+
+    for (let i = 0; i < 6; i++) {
+        panel.append("circle")
+            .attr("class", "ambient-bubble")
+            .attr("cx", width * (0.08 + i * 0.16))
+            .attr("cy", height * (0.18 + (i % 3) * 0.18))
+            .attr("r", 2.4 + (i % 2) * 1.6)
+            .attr("fill", "#9EECEF")
+            .attr("fill-opacity", 0.10 + (i % 2) * 0.05);
+    }
+
+    const tickDates = chooseTemporalTicks(allDates);
+    const yearFormat = d3.timeFormat("%Y");
+
+    panel.append("rect")
+        .attr("class", "center-year-band")
+        .attr("x", leftBase)
+        .attr("y", plot.y - 1)
+        .attr("width", centerWidth)
+        .attr("height", plot.h + 2)
+        .attr("rx", 3)
+        .attr("fill", "#061a2d")
+        .attr("fill-opacity", 0.88)
+        .attr("stroke", "#4ea9cb")
+        .attr("stroke-opacity", 0.35);
+
+    tickDates.forEach(date => {
+        const y = xScale(date);
+        panel.append("line")
+            .attr("class", "year-guide year-guide--left")
+            .attr("x1", leftOuter)
+            .attr("x2", leftBase - 2)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", "#8ac8df")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2 4")
+            .attr("stroke-opacity", 0.42);
+        panel.append("line")
+            .attr("class", "year-guide year-guide--right")
+            .attr("x1", rightBase + 2)
+            .attr("x2", rightOuter)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", "#8ac8df")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2 4")
+            .attr("stroke-opacity", 0.42);
+        panel.append("text")
+            .attr("class", "center-year-label")
+            .attr("x", centerX)
+            .attr("y", y)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#f2fbff")
+            .style("font-size", `${Math.max(11, Math.min(14, height * 0.022))}px`)
+            .style("font-weight", 700)
+            .text(yearFormat(date));
+    });
+
+    const areaGroups = groups.map((group, i) => {
+        const series = prepared
+            .filter(d => d.group === group)
+            .sort((a, b) => +a.date - +b.date);
+        return { group, index: i, series };
+    });
+
+    areaGroups.forEach(({ group, index, series }) => {
+        const isLeft = index === 0;
+        const scale = isLeft ? leftScale : rightScale;
+        const baseX = isLeft ? leftBase : rightBase;
+        const gradientId = isLeft ? `${uid}-leftArea` : `${uid}-rightArea`;
+        const stroke = isLeft ? "#c9fff4" : "#66f6ec";
+
+        const area = d3.area()
+            .x0(baseX)
+            .x1(d => scale(d.value))
+            .y(d => xScale(d.date))
+            .curve(d3.curveBasis);
+
+        panel.append("path")
+            .datum(series)
+            .attr("class", `area-mark area-mark--${isLeft ? "left" : "right"}`)
+            .attr("data-chart-mark", "spline-area")
+            .attr("data-series", group)
+            .attr("fill", `url(#${gradientId})`)
+            .attr("fill-opacity", 0.96)
+            .attr("stroke", stroke)
+            .attr("stroke-width", 2)
+            .attr("stroke-linejoin", "round")
+            .attr("filter", `url(#${uid}-softGlow)`)
+            .attr("d", area);
+    });
+
+    drawUnitBadge(panel, centerX, Math.max(16, plot.y - 48), yLabel, yColumn.unit || "");
+    drawBottomAxis(panel, plot, leftOuter, leftBase, rightBase, rightOuter, niceMax, yLabel, yColumn.unit || "");
+    drawGroupCallouts(panel, plot, groups, colorResolver);
+    drawLegend(panel, plot, groups, colorResolver);
+
+    return svg.node();
+
+    function drawUnitBadge(root, x, y, label, unit) {
+        const badgeW = Math.min(166, Math.max(112, chartUtils.text.measure(null, label, { fontSize: 12, fontWeight: "bold" }).width + 44));
+        root.append("rect")
+            .attr("class", "unit-badge")
+            .attr("x", x - badgeW / 2)
+            .attr("y", y)
+            .attr("width", badgeW)
+            .attr("height", 42)
+            .attr("rx", 8)
+            .attr("fill", "#082b48")
+            .attr("fill-opacity", 0.86)
+            .attr("stroke", "#57cae1")
+            .attr("stroke-opacity", 0.64);
+        root.append("text")
+            .attr("x", x)
+            .attr("y", y + 17)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#f6fbff")
+            .style("font-size", "13px")
+            .style("font-weight", 800)
+            .style("letter-spacing", "1px")
+            .text(label.toUpperCase());
+        root.append("text")
+            .attr("x", x)
+            .attr("y", y + 33)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#d7edf4")
+            .style("font-size", "12px")
+            .text(unit ? `(${unit})` : "");
+    }
+
+    function drawBottomAxis(root, plotBox, leftStart, leftEnd, rightStart, rightEnd, axisMax, label, unit) {
+        const axisY = plotBox.y + plotBox.h + 16;
+        const ticks = d3.ticks(0, axisMax, 5);
+
+        root.append("line")
+            .attr("x1", leftStart)
+            .attr("x2", leftEnd)
+            .attr("y1", axisY)
+            .attr("y2", axisY)
+            .attr("stroke", "#d9f6ff")
+            .attr("stroke-width", 1.2)
+            .attr("stroke-opacity", 0.82);
+        root.append("line")
+            .attr("x1", rightStart)
+            .attr("x2", rightEnd)
+            .attr("y1", axisY)
+            .attr("y2", axisY)
+            .attr("stroke", "#d9f6ff")
+            .attr("stroke-width", 1.2)
+            .attr("stroke-opacity", 0.82);
+
+        ticks.forEach(tick => {
+            const lx = leftScale(tick);
+            const rx = rightScale(tick);
+            [lx, rx].forEach(x => {
+                root.append("circle")
+                    .attr("cx", x)
+                    .attr("cy", axisY)
+                    .attr("r", 3)
+                    .attr("fill", "#d9f6ff")
+                    .attr("fill-opacity", 0.9);
+                root.append("line")
+                    .attr("x1", x)
+                    .attr("x2", x)
+                    .attr("y1", axisY - 8)
+                    .attr("y2", axisY + 8)
+                    .attr("stroke", "#d9f6ff")
+                    .attr("stroke-opacity", 0.65);
+            });
+            root.append("text")
+                .attr("x", lx)
+                .attr("y", axisY + 28)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#e9f6fb")
+                .style("font-size", "12px")
+                .text(formatTick(tick));
+            root.append("text")
+                .attr("x", rx)
+                .attr("y", axisY + 28)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#e9f6fb")
+                .style("font-size", "12px")
+                .text(formatTick(tick));
+        });
+
+        root.append("text")
+            .attr("x", centerX)
+            .attr("y", axisY + 47)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#f5fbff")
+            .style("font-size", "15px")
+            .style("font-weight", 800)
+            .style("letter-spacing", "1px")
+            .text(`${label.toUpperCase()}${unit ? ` (${unit.toUpperCase()})` : ""}`);
+    }
+
+    function drawGroupCallouts(root, plotBox, labels, resolver) {
+        const calloutY = plotBox.y + plotBox.h * 0.58;
+        const slotY = calloutY - 63;
+        const callouts = [
+            { label: labels[0], side: "left", x: plotBox.x + Math.min(30, plotBox.w * 0.06), textAnchor: "middle" },
+            { label: labels[1], side: "right", x: plotBox.x + plotBox.w - Math.min(42, plotBox.w * 0.08), textAnchor: "middle" }
+        ];
+
+        callouts.forEach((item, i) => {
+            const w = Math.min(154, Math.max(102, plotBox.w * 0.25));
+            const h = 48;
+            const x = clamp(item.x - w / 2, plotBox.x + 2, plotBox.x + plotBox.w - w - 2);
+            const color = resolver.field(item.label, i, { palette: "category10" }).value;
+
+            root.append("circle")
+                .attr("class", `reserved-asset-slot reserved-asset-slot--side-${item.side}`)
+                .attr("data-asset-slot", `side_callout_pictogram_${item.side}`)
+                .attr("data-anchor", `${item.side}-group-callout`)
+                .attr("data-bbox", `${Math.round(item.x - 24)},${Math.round(slotY - 24)},48,48`)
+                .attr("data-collision-rule", "avoid area marks, group label, center year axis, bottom axis, and legend")
+                .attr("data-slot-policy", "neutral_placeholder_or_image2_asset")
+                .attr("data-asset-source-policy", "neutral_placeholder")
+                .attr("cx", item.x)
+                .attr("cy", slotY)
+                .attr("r", 24)
+                .attr("fill", `url(#${uid}-slotFill)`)
+                .attr("fill-opacity", 0.92)
+                .attr("stroke", color)
+                .attr("stroke-width", 2)
+                .attr("stroke-dasharray", "5 5")
+                .attr("stroke-opacity", 0.82);
+
+            root.append("rect")
+                .attr("class", "group-callout-box")
+                .attr("x", x)
+                .attr("y", calloutY - h / 2)
+                .attr("width", w)
+                .attr("height", h)
+                .attr("rx", 7)
+                .attr("fill", "#dff8f8")
+                .attr("fill-opacity", 0.88)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-opacity", 0.55);
+
+            const text = root.append("text")
+                .attr("class", "group-callout-label")
+                .attr("x", x + w / 2)
+                .attr("y", calloutY - 7)
+                .attr("text-anchor", item.textAnchor)
+                .attr("fill", "#07304a")
+                .style("font-size", "13px")
+                .style("font-weight", 800);
+            wrapText(text, item.label, w - 16, 15, 2);
+        });
+    }
+
+    function drawLegend(root, plotBox, labels, resolver) {
+        const legendY = height - Math.max(30, height * 0.052);
+        const itemW = Math.min(220, plotBox.w * 0.42);
+        const legendW = itemW * 2 + 24;
+        const legendX = clamp(centerX - legendW / 2, 14, width - legendW - 14);
+
+        root.append("rect")
+            .attr("class", "chart-owned-legend")
+            .attr("x", legendX)
+            .attr("y", legendY - 24)
+            .attr("width", legendW)
+            .attr("height", 48)
+            .attr("rx", 8)
+            .attr("fill", "#05243d")
+            .attr("fill-opacity", 0.72)
+            .attr("stroke", "#3fa9c9")
+            .attr("stroke-opacity", 0.35);
+
+        labels.forEach((label, i) => {
+            const x = legendX + 16 + i * itemW;
+            const color = i === 0 ? "#9eece1" : "#21c6c2";
+            root.append("rect")
+                .attr("x", x)
+                .attr("y", legendY - 12)
+                .attr("width", 24)
+                .attr("height", 24)
+                .attr("rx", 4)
+                .attr("fill", color)
+                .attr("stroke", "#d7fffb")
+                .attr("stroke-opacity", 0.7);
+            const text = root.append("text")
+                .attr("x", x + 34)
+                .attr("y", legendY + 4)
+                .attr("fill", "#f6fbff")
+                .style("font-size", "13px")
+                .style("font-weight", 600);
+            wrapText(text, label, itemW - 48, 14, 2);
+        });
+    }
+
+    function chooseTemporalTicks(dates) {
+        if (dates.length <= 8) return dates;
+        const stride = Math.ceil(dates.length / 8);
+        const picked = dates.filter((_, i) => i % stride === 0);
+        const last = dates[dates.length - 1];
+        if (+picked[picked.length - 1] !== +last) picked.push(last);
+        return picked;
+    }
+
+    function niceStep(value) {
+        if (value <= 1) return 0.2;
+        const exponent = Math.floor(Math.log10(value));
+        const base = Math.pow(10, exponent);
+        const scaled = value / base;
+        if (scaled <= 2) return base / 5;
+        if (scaled <= 5) return base / 2;
+        return base;
+    }
+
+    function formatTick(value) {
+        if (Math.abs(value) >= 1000) return d3.format(".2s")(value).replace("G", "B");
+        if (Math.abs(value) < 1 && value !== 0) return d3.format(".2f")(value);
+        return d3.format("~g")(value);
+    }
+
+    function wavePath(w, h, i) {
+        const y = h * (0.16 + i * 0.095);
+        const amp = 10 + i * 2;
+        return `M ${-20} ${y} C ${w * 0.18} ${y - amp}, ${w * 0.28} ${y + amp}, ${w * 0.48} ${y} S ${w * 0.82} ${y - amp}, ${w + 20} ${y + amp * 0.35}`;
+    }
+
+    function wrapText(selection, text, maxWidth, lineHeight, maxLines) {
+        const words = String(text).split(/\s+/).filter(Boolean);
+        const x = +selection.attr("x");
+        const y = +selection.attr("y");
+        selection.text(null);
+        let line = [];
+        let lineNumber = 0;
+        let tspan = selection.append("tspan").attr("x", x).attr("y", y);
+
+        words.forEach(word => {
+            line.push(word);
+            tspan.text(line.join(" "));
+            if (tspan.node().getComputedTextLength() > maxWidth && line.length > 1) {
+                line.pop();
+                tspan.text(line.join(" "));
+                line = [word];
+                lineNumber += 1;
+                if (lineNumber >= maxLines) {
+                    tspan.text(`${tspan.text()}...`);
+                    return;
+                }
+                tspan = selection.append("tspan")
+                    .attr("x", x)
+                    .attr("y", y + lineNumber * lineHeight)
+                    .text(word);
+            }
+        });
+    }
+
+    function clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+}

modules/chart_engine/template/d3-js/area_chart/spline_stacked_area_chart_01.js

@@ -0,0 +1,631 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Stacked Area Chart",
+    "chart_name": "spline_stacked_area_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 6]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "dark",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const rawRows = jsonData.data.data || [];
+    const variables = jsonData.variables || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || {};
+    const fontSize = chartUtils.text.fontSize;
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    const width = variables.width || 600;
+    const height = Math.max(720, Math.round((variables.height || 600) * 1.2));
+    const uid = `splineStackedArea${Math.random().toString(36).slice(2)}`;
+
+    const parseTemporal = value => {
+        if (value instanceof Date) return value;
+        if (typeof value === "number" || /^[0-9]{3,4}$/.test(String(value))) {
+            return new Date(Number(value), 0, 1);
+        }
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !isNaN(parsed)) return parsed;
+        const fallback = new Date(value);
+        return isNaN(fallback) ? new Date(0) : fallback;
+    };
+
+    const formatYear = date => {
+        const parsed = date instanceof Date ? date : parseTemporal(date);
+        return chartUtils.format.date(parsed, { output: "%Y" }).text;
+    };
+
+    const rows = rawRows
+        .map((d, index) => ({
+            ...d,
+            __index: index,
+            __date: parseTemporal(d[xField]),
+            __value: Math.max(0, +d[yField] || 0),
+            __group: String(d[groupField])
+        }))
+        .sort((a, b) => a.__date - b.__date);
+
+    const groupStats = Array.from(d3.group(rows, d => d.__group), ([group, values]) => {
+        const ordered = values.slice().sort((a, b) => a.__date - b.__date);
+        const latest = ordered[ordered.length - 1];
+        return {
+            group,
+            values: ordered,
+            latestValue: latest ? latest.__value : 0,
+            avgValue: d3.mean(ordered, d => d.__value) || 0
+        };
+    });
+
+    const groups = groupStats
+        .slice()
+        .sort((a, b) => a.avgValue - b.avgValue)
+        .map(d => d.group);
+
+    const distinctDates = Array.from(new Map(rows.map(d => [+d.__date, d.__date])).values())
+        .sort((a, b) => a - b);
+
+    const stackData = distinctDates.map(date => {
+        const entry = { date };
+        groups.forEach(group => {
+            const row = rows.find(d => +d.__date === +date && d.__group === group);
+            entry[group] = row ? row.__value : 0;
+        });
+        return entry;
+    });
+
+    const latestDate = distinctDates[distinctDates.length - 1];
+    const latestYear = latestDate ? formatYear(latestDate) : "";
+    const latestTotal = d3.sum(groups, group => {
+        const stat = groupStats.find(d => d.group === group);
+        return stat ? stat.latestValue : 0;
+    });
+
+    const safeText = value => String(value == null ? "" : value);
+    const title = safeText(jsonData.titles && jsonData.titles.main_title ? jsonData.titles.main_title : jsonData.metadata && jsonData.metadata.title ? jsonData.metadata.title : "");
+    const subtitle = safeText(jsonData.titles && jsonData.titles.sub_title ? jsonData.titles.sub_title : jsonData.description || "").replace(/^"|"$/g, "");
+
+    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; font-family: Arial, 'Liberation Sans', sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("radialGradient")
+        .attr("id", `${uid}-bg`)
+        .attr("cx", "58%")
+        .attr("cy", "48%")
+        .attr("r", "78%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#092445");
+    bgGradient.append("stop").attr("offset", "58%").attr("stop-color", "#04162b");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#010915");
+
+    const panelGradient = defs.append("linearGradient")
+        .attr("id", `${uid}-panel`)
+        .attr("x1", "0%").attr("x2", "100%").attr("y1", "0%").attr("y2", "100%");
+    panelGradient.append("stop").attr("offset", "0%").attr("stop-color", "#06172c");
+    panelGradient.append("stop").attr("offset", "100%").attr("stop-color", "#082a4c");
+
+    const glow = defs.append("filter")
+        .attr("id", `${uid}-glow`)
+        .attr("x", "-30%").attr("y", "-30%")
+        .attr("width", "160%").attr("height", "160%");
+    glow.append("feGaussianBlur").attr("stdDeviation", 3.2).attr("result", "blur");
+    const merge = glow.append("feMerge");
+    merge.append("feMergeNode").attr("in", "blur");
+    merge.append("feMergeNode").attr("in", "SourceGraphic");
+
+    const cardShadow = defs.append("filter")
+        .attr("id", `${uid}-cardShadow`)
+        .attr("x", "-20%").attr("y", "-20%")
+        .attr("width", "140%").attr("height", "150%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 7)
+        .attr("stdDeviation", 8)
+        .attr("flood-color", "#000814")
+        .attr("flood-opacity", 0.45);
+
+    const starData = [
+        [22, 58, 1.4], [82, 38, 1.1], [505, 52, 1.3], [558, 88, 1.0],
+        [70, 292, 0.8], [518, 310, 1.0], [138, 392, 0.8], [500, 557, 1.2],
+        [430, 102, 1.2], [40, 175, 0.9], [548, 210, 0.8]
+    ];
+    svg.selectAll(".decor-star")
+        .data(starData)
+        .join("circle")
+        .attr("class", "decor-star")
+        .attr("cx", d => d[0])
+        .attr("cy", d => d[1])
+        .attr("r", d => d[2])
+        .attr("fill", d => d[0] % 2 ? "#99d8ff" : "#b9ff62")
+        .attr("opacity", 0.75);
+
+    const splitTitle = value => {
+        const words = value.split(/\s+/).filter(Boolean);
+        if (words.length <= 4) return { top: value, highlight: "" };
+        const leadIndex = words.findIndex(w => /^lead/i.test(w));
+        if (leadIndex > 1 && leadIndex < words.length - 1) {
+            return {
+                top: words.slice(0, leadIndex).join(" "),
+                highlight: words.slice(leadIndex).join(" ")
+            };
+        }
+        const split = Math.ceil(words.length / 2);
+        return {
+            top: words.slice(0, split).join(" "),
+            highlight: words.slice(split).join(" ")
+        };
+    };
+
+    const fitSize = (value, maxChars, large, small) => {
+        const len = value.length;
+        if (len <= maxChars) return large;
+        return Math.max(small, large - (len - maxChars) * 0.8);
+    };
+
+    const groupCardY = 25;
+    const groupCardH = 76;
+    const visibleGroups = groupStats
+        .slice()
+        .sort((a, b) => b.latestValue - a.latestValue)
+        .slice(0, Math.min(groups.length, 3));
+    const cardGap = 10;
+    const cardW = visibleGroups.length === 2 ? 232 : (width - 72 - cardGap * (visibleGroups.length - 1)) / visibleGroups.length;
+    const groupCardsX = visibleGroups.length === 2 ? (width - cardW * 2 - cardGap) / 2 : 36;
+
+    const basePalette = ["#a9f33e", "#43a7ff", "#f1d46b", "#f1844a", "#a782ff", "#57dab7"];
+    const colorForGroup = (group, index) => {
+        const lowered = group.toLowerCase();
+        if (lowered.includes("space") || lowered.includes("potassium")) return "#43a7ff";
+        if (lowered.includes("ground") || lowered.includes("nitrogen")) return "#a9f33e";
+        const resolved = colorResolver.field(group, index, { fallbackKey: "primary" }).value;
+        return resolved || basePalette[index % basePalette.length];
+    };
+    const groupColors = new Map(groups.map((group, i) => [group, colorForGroup(group, i)]));
+
+    const wrapText = (selection, text, maxChars, maxLines) => {
+        const words = safeText(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (candidate.length > maxChars && line) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = candidate;
+            }
+        });
+        if (line) lines.push(line);
+        lines.slice(0, maxLines).forEach((value, i) => {
+            selection.append("tspan")
+                .attr("x", selection.attr("data-x"))
+                .attr("dy", i === 0 ? 0 : 15)
+                .text(i === maxLines - 1 && lines.length > maxLines ? `${value.slice(0, Math.max(0, maxChars - 1))}...` : value);
+        });
+    };
+
+    const groupCard = svg.selectAll(".top-group-card")
+        .data(visibleGroups)
+        .join("g")
+        .attr("class", "top-group-card")
+        .attr("transform", (d, i) => `translate(${groupCardsX + i * (cardW + cardGap)}, ${groupCardY})`);
+
+    groupCard.append("rect")
+        .attr("width", cardW)
+        .attr("height", groupCardH)
+        .attr("rx", 18)
+        .attr("fill", "#061a32")
+        .attr("stroke", d => d3.color(groupColors.get(d.group)).copy({ opacity: 0.42 }))
+        .attr("stroke-width", 1.2)
+        .attr("filter", `url(#${uid}-cardShadow)`);
+
+    groupCard.each(function(d, i) {
+        const g = d3.select(this);
+        const color = groupColors.get(d.group);
+        const clipId = `${uid}-topSlot-${i}`;
+        defs.append("clipPath")
+            .attr("id", clipId)
+            .append("circle")
+            .attr("cx", 38)
+            .attr("cy", 38)
+            .attr("r", 25);
+
+        g.append("circle")
+            .attr("cx", 38)
+            .attr("cy", 38)
+            .attr("r", 27)
+            .attr("fill", d3.color(color).copy({ opacity: 0.22 }))
+            .attr("stroke", color)
+            .attr("stroke-width", 2)
+            .attr("data-asset-slot", "top_group_image_slot")
+            .attr("data-bbox", `${groupCardsX + i * (cardW + cardGap) + 11},${groupCardY + 11},54,54`)
+            .attr("data-anchor", `top-card:${d.group}`)
+            .attr("data-collision-rule", "inside card icon circle; avoid card text, subtitle, neighboring cards, and chart panel")
+            .attr("data-asset-source-policy", "neutral-placeholder-or-downstream-image2")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+
+        g.append("circle")
+            .attr("cx", 38)
+            .attr("cy", 38)
+            .attr("r", 19)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 1.4)
+            .attr("stroke-dasharray", "4 4")
+            .attr("opacity", 0.58)
+            .attr("data-asset-slot", "top_group_image_slot")
+            .attr("data-anchor", `top-card:${d.group}`)
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+
+        g.append("text")
+            .attr("x", 38)
+            .attr("y", 43)
+            .attr("text-anchor", "middle")
+            .attr("fill", color)
+            .attr("font-size", fontSize(18))
+            .attr("font-weight", 800)
+            .attr("data-asset-slot", "top_group_image_slot")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .text(d.group.slice(0, 1).toUpperCase());
+
+        const textX = visibleGroups.length === 3 ? 72 : 80;
+        g.append("text")
+            .attr("x", textX)
+            .attr("y", 29)
+            .attr("fill", color)
+            .attr("font-size", fontSize(visibleGroups.length === 3 ? 12 : 14))
+            .attr("font-weight", 800)
+            .text(d.group);
+
+        const share = latestTotal ? Math.round(d.latestValue / latestTotal * 100) : 0;
+        const detail = `${chartUtils.format.autoText(d.latestValue).text || chartUtils.format.autoText(d.latestValue)} ${yField} by ${latestYear} (${share}% share)`;
+        const detailText = g.append("text")
+            .attr("data-x", textX)
+            .attr("x", textX)
+            .attr("y", 49)
+            .attr("fill", "#f3f8ff")
+            .attr("font-size", fontSize(visibleGroups.length === 3 ? 10 : 12))
+            .attr("font-weight", 500);
+        wrapText(detailText, detail, visibleGroups.length === 3 ? 18 : 26, 2);
+    });
+
+    const panel = { x: 32, y: 105, w: width - 64, h: height - 195 };
+    const plot = {
+        x: panel.x + 66,
+        y: panel.y + 28,
+        w: panel.w - 106,
+        h: panel.h - 82
+    };
+
+    const stack = d3.stack()
+        .keys(groups)
+        .order(d3.stackOrderNone)
+        .offset(d3.stackOffsetNone);
+    const stackedData = stack(stackData);
+
+    const maxTotal = d3.max(stackData, d => d3.sum(groups, group => d[group] || 0)) || 1;
+    const roundBase = maxTotal > 250 ? 50 : maxTotal > 100 ? 25 : maxTotal > 30 ? 10 : 5;
+    const yMax = Math.max(roundBase, Math.ceil(maxTotal * 1.1 / roundBase) * roundBase);
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(distinctDates))
+        .range([0, plot.w]);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax])
+        .range([plot.h, 0]);
+
+    const chartG = svg.append("g")
+        .attr("transform", `translate(${plot.x}, ${plot.y})`);
+
+    const yTicks = yScale.ticks(6);
+    yTicks.forEach(tick => {
+        chartG.append("line")
+            .attr("x1", 0)
+            .attr("x2", plot.w)
+            .attr("y1", yScale(tick))
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#8fb7df")
+            .attr("stroke-width", 0.7)
+            .attr("stroke-dasharray", "4 5")
+            .attr("opacity", 0.26);
+
+        chartG.append("text")
+            .attr("x", -14)
+            .attr("y", yScale(tick) + 4)
+            .attr("text-anchor", "end")
+            .attr("fill", "#edf5ff")
+            .attr("font-size", fontSize(12))
+            .attr("font-weight", 600)
+            .text(chartUtils.format.autoText(tick).text || chartUtils.format.autoText(tick));
+    });
+
+    chartG.append("line")
+        .attr("x1", 0)
+        .attr("x2", plot.w)
+        .attr("y1", plot.h)
+        .attr("y2", plot.h)
+        .attr("stroke", "#d9efff")
+        .attr("stroke-width", 1.2);
+
+    chartG.append("line")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", 0)
+        .attr("y2", plot.h)
+        .attr("stroke", "#d9efff")
+        .attr("stroke-width", 1.2);
+
+    const xTickDates = distinctDates.length <= 7
+        ? distinctDates
+        : distinctDates.filter((d, i) => i === 0 || i === distinctDates.length - 1 || i % Math.ceil(distinctDates.length / 5) === 0);
+    xTickDates.forEach(date => {
+        chartG.append("text")
+            .attr("x", xScale(date))
+            .attr("y", plot.h + 28)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#edf5ff")
+            .attr("font-size", fontSize(12))
+            .attr("font-weight", 600)
+            .text(formatYear(date));
+    });
+
+    svg.append("text")
+        .attr("transform", `translate(${panel.x + 22}, ${plot.y + plot.h / 2}) rotate(-90)`)
+        .attr("text-anchor", "middle")
+        .attr("fill", "#edf5ff")
+        .attr("font-size", fontSize(12))
+        .attr("font-weight", 800)
+        .attr("letter-spacing", 1.2)
+        .text(yField.toUpperCase());
+
+    groups.forEach((group, i) => {
+        const color = groupColors.get(group);
+        const grad = defs.append("linearGradient")
+            .attr("id", `${uid}-area-${i}`)
+            .attr("x1", "0%")
+            .attr("x2", "0%")
+            .attr("y1", "0%")
+            .attr("y2", "100%");
+        grad.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", d3.color(color).brighter(0.8))
+            .attr("stop-opacity", 0.96);
+        grad.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", d3.color(color).darker(0.8))
+            .attr("stop-opacity", 0.74);
+    });
+
+    const area = d3.area()
+        .x(d => xScale(d.data.date))
+        .y0(d => yScale(d[0]))
+        .y1(d => yScale(d[1]))
+        .curve(d3.curveBasis);
+
+    const topLine = d3.line()
+        .x(d => xScale(d.data.date))
+        .y(d => yScale(d[1]))
+        .curve(d3.curveBasis);
+
+    const areaLayer = chartG.append("g").attr("class", "stacked-area-layers");
+    areaLayer.selectAll("path.area-fill")
+        .data(stackedData)
+        .join("path")
+        .attr("class", "area-fill")
+        .attr("d", area)
+        .attr("fill", (d, i) => `url(#${uid}-area-${i})`)
+        .attr("stroke", "none")
+        .attr("opacity", 0.96)
+        .attr("data-series", d => d.key);
+
+    areaLayer.selectAll("path.area-glow")
+        .data(stackedData)
+        .join("path")
+        .attr("class", "area-glow")
+        .attr("d", topLine)
+        .attr("fill", "none")
+        .attr("stroke", d => groupColors.get(d.key))
+        .attr("stroke-width", 5.5)
+        .attr("stroke-opacity", 0.22)
+        .attr("filter", `url(#${uid}-glow)`);
+
+    areaLayer.selectAll("path.area-outline")
+        .data(stackedData)
+        .join("path")
+        .attr("class", "area-outline")
+        .attr("d", topLine)
+        .attr("fill", "none")
+        .attr("stroke", d => d3.color(groupColors.get(d.key)).brighter(0.8))
+        .attr("stroke-width", 1.8)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+
+    const usedSlots = [];
+    stackedData.forEach((series, i) => {
+        const middleIndex = Math.floor(series.length * 0.68);
+        const point = series[middleIndex];
+        if (!point) return;
+        const segmentHeight = Math.abs(yScale(point[0]) - yScale(point[1]));
+        if (segmentHeight < 52 || i > 1) return;
+        const slotSize = Math.min(54, segmentHeight * 0.58);
+        const slotX = Math.min(plot.w - slotSize - 10, Math.max(10, xScale(point.data.date) - slotSize / 2));
+        const slotY = yScale((point[0] + point[1]) / 2) - slotSize / 2;
+        const overlapsUsed = usedSlots.some(slot => Math.abs(slot.x - slotX) < slotSize && Math.abs(slot.y - slotY) < slotSize);
+        if (overlapsUsed) return;
+        usedSlots.push({ x: slotX, y: slotY });
+        const slot = chartG.append("g")
+            .attr("class", "reserved-asset-slot plot-area-neutral-image-slot")
+            .attr("transform", `translate(${slotX},${slotY})`)
+            .attr("opacity", 0.18)
+            .attr("data-asset-slot", "plot_area_decorative_image_slot")
+            .attr("data-series", series.key)
+            .attr("data-bbox", `${plot.x + slotX},${plot.y + slotY},${slotSize},${slotSize}`)
+            .attr("data-anchor", `series-interior:${series.key}`)
+            .attr("data-collision-rule", "omit or keep translucent only when inside a large segment and away from endpoint cards, labels, and axes")
+            .attr("data-asset-source-policy", "neutral-placeholder-or-downstream-image2")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        slot.append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", slotSize)
+            .attr("height", slotSize)
+            .attr("rx", Math.max(6, slotSize * 0.16))
+            .attr("fill", "none")
+            .attr("stroke", groupColors.get(series.key))
+            .attr("stroke-width", 1.4)
+            .attr("stroke-dasharray", "5 5");
+        slot.append("line")
+            .attr("x1", slotSize * 0.25)
+            .attr("y1", slotSize * 0.50)
+            .attr("x2", slotSize * 0.75)
+            .attr("y2", slotSize * 0.50)
+            .attr("stroke", groupColors.get(series.key))
+            .attr("stroke-width", 1.2);
+    });
+
+    const endpointData = stackedData.map((series, index) => {
+        const anchorIndex = Math.max(0, series.length - 2);
+        const anchor = series[anchorIndex];
+        const stat = groupStats.find(d => d.group === series.key);
+        const share = latestTotal && stat ? Math.round(stat.latestValue / latestTotal * 100) : 0;
+        return {
+            group: series.key,
+            value: stat ? stat.latestValue : 0,
+            share,
+            x: xScale(anchor.data.date),
+            y: yScale((anchor[0] + anchor[1]) / 2),
+            color: groupColors.get(series.key),
+            layerIndex: index
+        };
+    }).sort((a, b) => a.y - b.y);
+
+    const endpointCardW = Math.min(130, plot.w * 0.34);
+    const endpointCardH = 62;
+    const endpointMinY = plot.y + 8;
+    const endpointMaxY = plot.y + plot.h - endpointCardH - 8;
+    const endpointGap = 8;
+    endpointData.forEach(d => {
+        d.cardX = plot.x + plot.w * 0.58;
+        if (d.layerIndex === 0) d.cardX = plot.x + plot.w * 0.60;
+        d.cardX = Math.min(plot.x + plot.w - endpointCardW - 54, Math.max(plot.x + plot.w * 0.48, d.cardX));
+        d.preferredCardY = Math.max(endpointMinY, Math.min(endpointMaxY, plot.y + d.y - endpointCardH / 2));
+    });
+
+    let nextCardY = endpointMinY;
+    endpointData.forEach(d => {
+        d.cardY = Math.max(nextCardY, d.preferredCardY);
+        nextCardY = d.cardY + endpointCardH + endpointGap;
+    });
+    const bottomOverflow = nextCardY - endpointGap - (endpointMaxY + endpointCardH);
+    if (bottomOverflow > 0) {
+        endpointData.forEach(d => {
+            d.cardY -= bottomOverflow;
+        });
+    }
+    const topUnderflow = endpointMinY - (endpointData[0] ? endpointData[0].cardY : endpointMinY);
+    if (topUnderflow > 0) {
+        endpointData.forEach(d => {
+            d.cardY += topUnderflow;
+        });
+    }
+    for (let i = endpointData.length - 2; i >= 0; i -= 1) {
+        const next = endpointData[i + 1];
+        const current = endpointData[i];
+        if (current.cardY + endpointCardH + endpointGap > next.cardY) {
+            current.cardY = Math.max(endpointMinY, next.cardY - endpointCardH - endpointGap);
+        }
+    }
+
+    const endpointLayer = svg.append("g").attr("class", "endpoint-annotations");
+    endpointData.forEach(d => {
+        const dotX = Math.min(plot.x + plot.w - 18, Math.max(d.cardX + endpointCardW + 18, plot.x + d.x + 30));
+        const dotY = plot.y + d.y;
+        const leaderStartX = d.cardX + endpointCardW;
+        const leaderY = Math.max(d.cardY + 18, Math.min(d.cardY + endpointCardH - 18, dotY));
+
+        endpointLayer.append("circle")
+            .attr("cx", dotX)
+            .attr("cy", dotY)
+            .attr("r", 4.8)
+            .attr("fill", d.color)
+            .attr("stroke", "#e9fbff")
+            .attr("stroke-width", 1.4)
+            .attr("filter", `url(#${uid}-glow)`);
+
+        endpointLayer.append("path")
+            .attr("d", `M${leaderStartX},${leaderY} L${dotX - 16},${leaderY} Q${dotX - 10},${leaderY} ${dotX - 10},${dotY} L${dotX - 5},${dotY}`)
+            .attr("fill", "none")
+            .attr("stroke", d.color)
+            .attr("stroke-width", 1.2)
+            .attr("stroke-linecap", "round")
+            .attr("opacity", 0.88);
+
+        endpointLayer.append("rect")
+            .attr("x", d.cardX)
+            .attr("y", d.cardY)
+            .attr("width", endpointCardW)
+            .attr("height", endpointCardH)
+            .attr("rx", 10)
+            .attr("fill", "#061d36")
+            .attr("stroke", d.color)
+            .attr("stroke-width", 1.1)
+            .attr("stroke-opacity", 0.8)
+            .attr("filter", `url(#${uid}-cardShadow)`);
+
+        endpointLayer.append("text")
+            .attr("x", d.cardX + 10)
+            .attr("y", d.cardY + 19)
+            .attr("fill", d.color)
+            .attr("font-size", fontSize(11))
+            .attr("font-weight", 800)
+            .text(d.group.length > 12 ? `${d.group.slice(0, 11)}...` : d.group);
+
+        endpointLayer.append("text")
+            .attr("x", d.cardX + 10)
+            .attr("y", d.cardY + 42)
+            .attr("fill", "#eaf8ff")
+            .attr("font-size", fontSize(12))
+            .attr("font-weight", 700)
+            .text(`${chartUtils.format.autoText(d.value).text || chartUtils.format.autoText(d.value)} by ${latestYear}`);
+
+        endpointLayer.append("text")
+            .attr("x", d.cardX + 11)
+            .attr("y", d.cardY + 56)
+            .attr("fill", "#dbe8f4")
+            .attr("font-size", fontSize(10))
+            .attr("font-weight", 500)
+            .text(`~${d.share}% of total`);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/stacked_area_chart_01.js

@@ -0,0 +1,450 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Stacked Area Chart",
+    "chart_name": "stacked_area_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 50], [0, "inf"], [2, 10]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData, { colors: sourceColors });
+    const fontSize = chartUtils.text.fontSize;
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const groupColumn = dataColumns[2] || {};
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    const width = Math.max(600, Number(variables.width) || 600);
+    const height = Math.max(600, Number(variables.height) || 600);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, Helvetica, sans-serif";
+    const textColor = sourceColors.text_color || "#0B2B4D";
+    const mutedText = "#657B8F";
+    const axisColor = "#2E506E";
+    const gridColor = "#B8D6E6";
+    const pageFill = "transparent";
+    const referenceAreaPalette = [
+        { base: "#F7D94A", top: "#FFF2A5", bottom: "#F3CF25" },
+        { base: "#22BBA4", top: "#30D0B7", bottom: "#169C91" },
+        { base: "#1EB06E", top: "#29C881", bottom: "#098E59" },
+        { base: "#82E2BF", top: "#A7F0D8", bottom: "#55CAA9" },
+        { base: "#BDEB68", top: "#D7F58F", bottom: "#A8DF4C" },
+        { base: "#6DD2E6", top: "#A8E8F3", bottom: "#3DB9D1" },
+        { base: "#8ED36E", top: "#BBE99B", bottom: "#65B955" }
+    ];
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "stacked-area-chart-01-reference-layout")
+        .attr("data-reference-layout", "selected-reference-sample00-v03")
+        .attr("data-temporal-order", "chronological");
+
+    const showMessage = message => {
+        svg.append("rect")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", pageFill);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${fontSize(16)}px`)
+            .text(message);
+        return svg.node();
+    };
+
+    if (!xField || !yField || !groupField) {
+        return showMessage("Missing stacked area fields");
+    }
+
+    const parseTimeValue = value => {
+        const raw = String(value ?? "").trim();
+        if (!raw) return null;
+        if (/^\d{4}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        const helperParsed = chartUtils.format.parseDate(value);
+        if (helperParsed instanceof Date && Number.isFinite(helperParsed.getTime())) return helperParsed;
+        const parsed = Date.parse(raw);
+        if (Number.isFinite(parsed)) return new Date(parsed);
+        const numeric = Number(raw);
+        if (Number.isFinite(numeric)) return new Date(numeric, 0, 1);
+        return null;
+    };
+
+    const formatYear = date => {
+        if (!(date instanceof Date) || !Number.isFinite(date.getTime())) return "";
+        return String(date.getFullYear());
+    };
+
+    const cleanLabel = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const truncate = (value, maxChars = 24) => {
+        const clean = cleanLabel(value);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    };
+
+    const formatValue = value => {
+        const num = Number(value) || 0;
+        const abs = Math.abs(num);
+        const spec = abs >= 1000 ? ",.0f" : abs >= 100 ? ",.0f" : abs >= 10 ? ",.1f" : ",.2f";
+        return d3.format(spec)(num)
+            .replace(/\.0$/, "")
+            .replace(/(\.\d*?)0+$/, "$1")
+            .replace(/\.$/, "");
+    };
+
+    const rows = chartData
+        .map((row, sourceIndex) => {
+            const date = parseTimeValue(row[xField]);
+            const value = Number(row[yField]);
+            return {
+                raw: row,
+                sourceIndex,
+                date,
+                xKey: date && Number.isFinite(date.getTime()) ? String(date.getTime()) : String(row[xField] ?? ""),
+                value: Number.isFinite(value) ? value : 0,
+                group: String(row[groupField] ?? "")
+            };
+        })
+        .filter(row => row.date && Number.isFinite(row.date.getTime()) && row.group);
+
+    if (rows.length < 2) {
+        return showMessage("Not enough data for stacked area");
+    }
+
+    const groups = [...new Set(rows.map(row => row.group))]
+        .sort((a, b) => {
+            const avgA = d3.mean(rows.filter(row => row.group === a), row => row.value) || 0;
+            const avgB = d3.mean(rows.filter(row => row.group === b), row => row.value) || 0;
+            return avgA - avgB || a.localeCompare(b);
+        });
+
+    const dates = [...new Map(rows
+        .sort((a, b) => a.date - b.date || a.sourceIndex - b.sourceIndex)
+        .map(row => [row.xKey, row.date])).values()];
+
+    const valuesByDate = d3.group(rows, row => row.xKey);
+    const stackData = dates.map(date => {
+        const key = String(date.getTime());
+        const values = valuesByDate.get(key) || [];
+        const obj = { date };
+        groups.forEach(group => {
+            const match = values.find(row => row.group === group);
+            obj[group] = match ? Math.max(0, Number(match.value) || 0) : 0;
+        });
+        return obj;
+    });
+
+    const stack = d3.stack()
+        .keys(groups)
+        .order(d3.stackOrderNone)
+        .offset(d3.stackOffsetNone);
+    const stackedData = stack(stackData);
+
+    const yMaxRaw = d3.max(stackedData, layer => d3.max(layer, point => point[1])) || 1;
+    const yMax = yMaxRaw * 1.08;
+
+    const margin = {
+        top: Math.max(12, height * 0.025),
+        right: Math.max(128, width * 0.22),
+        bottom: Math.max(58, height * 0.095),
+        left: Math.max(70, width * 0.118)
+    };
+    const chartWidth = Math.max(260, width - margin.left - margin.right);
+    const chartHeight = Math.max(330, height - margin.top - margin.bottom);
+    const plotX = margin.left;
+    const plotY = margin.top;
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(dates))
+        .range([0, chartWidth]);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax])
+        .nice(5)
+        .range([chartHeight, 0]);
+
+    const defs = svg.append("defs");
+    const clipId = `stacked-area-01-plot-${Math.random().toString(36).slice(2, 9)}`;
+    defs.append("clipPath")
+        .attr("id", clipId)
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", chartWidth)
+        .attr("height", chartHeight);
+
+    const g = svg.append("g")
+        .attr("class", "stacked-area-plot")
+        .attr("data-role", "chart-panel-plot-area")
+        .attr("data-reference-local-geometry", "endpoint labels attach to final-year band midpoints")
+        .attr("transform", `translate(${plotX}, ${plotY})`);
+
+    svg.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", pageFill);
+
+    const yTicks = yScale.ticks(5);
+    g.append("g")
+        .attr("class", "grid-layer")
+        .selectAll("line")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("x1", 0)
+        .attr("x2", chartWidth)
+        .attr("y1", d => yScale(d))
+        .attr("y2", d => yScale(d))
+        .attr("stroke", gridColor)
+        .attr("stroke-opacity", 0.58)
+        .attr("stroke-width", 0.9)
+        .attr("stroke-dasharray", "2 5");
+
+    const area = d3.area()
+        .x(d => xScale(d.data.date))
+        .y0(d => yScale(d[0]))
+        .y1(d => yScale(d[1]))
+        .curve(d3.curveLinear);
+
+    const layerGroup = g.append("g")
+        .attr("clip-path", `url(#${clipId})`);
+
+    const gradientIds = new Map();
+    stackedData.forEach((layer, index) => {
+        const palette = referenceAreaPalette[index % referenceAreaPalette.length];
+        const gradientId = `stacked-area-01-fill-${index}-${Math.random().toString(36).slice(2, 8)}`;
+        gradientIds.set(layer.key, gradientId);
+        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", palette.top);
+        gradient.append("stop")
+            .attr("offset", "58%")
+            .attr("stop-color", palette.base);
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", palette.bottom);
+    });
+
+    layerGroup.selectAll("path.area-layer")
+        .data(stackedData)
+        .enter()
+        .append("path")
+        .attr("class", "area-layer")
+        .attr("data-series", d => d.key)
+        .attr("data-mark-type", "stacked-area-polygon")
+        .attr("data-rectangular-end-cap", "not-applicable-continuous-area")
+        .attr("fill", d => `url(#${gradientIds.get(d.key)})`)
+        .attr("fill-opacity", 0.9)
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-opacity", 0.56)
+        .attr("stroke-width", 0.8)
+        .attr("d", area);
+
+    g.append("line")
+        .attr("x1", 0)
+        .attr("x2", chartWidth)
+        .attr("y1", chartHeight)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#8DB4CA")
+        .attr("stroke-width", 1);
+
+    g.selectAll("text.y-tick")
+        .data(yTicks)
+        .enter()
+        .append("text")
+        .attr("class", "y-tick")
+        .attr("x", -10)
+        .attr("y", d => yScale(d))
+        .attr("text-anchor", "end")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", axisColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${fontSize(11)}px`)
+        .text(d => formatValue(d));
+
+    const xTicks = dates.length <= 6 ? dates : xScale.ticks(Math.min(6, dates.length));
+    g.selectAll("text.x-tick")
+        .data(xTicks)
+        .enter()
+        .append("text")
+        .attr("class", "x-tick")
+        .attr("x", d => xScale(d))
+        .attr("y", chartHeight + 24)
+        .attr("text-anchor", "middle")
+        .attr("fill", axisColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${fontSize(12)}px`)
+        .style("font-weight", 500)
+        .text(d => formatYear(d));
+
+    g.append("text")
+        .attr("class", "y-axis-title")
+        .attr("transform", "rotate(-90)")
+        .attr("y", -54)
+        .attr("x", -chartHeight / 2)
+        .attr("text-anchor", "middle")
+        .attr("fill", axisColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${fontSize(12)}px`)
+        .style("font-weight", 700)
+        .text(cleanLabel(yColumn.name || yField));
+
+    g.append("text")
+        .attr("class", "x-axis-title")
+        .attr("x", chartWidth / 2)
+        .attr("y", chartHeight + 46)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", `${fontSize(10)}px`)
+        .style("font-weight", 600)
+        .text(cleanLabel(xColumn.name || xField));
+
+    const finalIndex = stackData.length - 1;
+    const endpointRows = stackedData.map((layer, index) => {
+        const point = layer[finalIndex];
+        return {
+            group: layer.key,
+            index,
+            anchorY: (yScale(point[0]) + yScale(point[1])) / 2,
+            value: stackData[finalIndex][layer.key] || 0
+        };
+    }).sort((a, b) => a.anchorY - b.anchorY);
+
+    const minLabelGap = 56;
+    endpointRows.forEach((row, index) => {
+        const minY = index === 0 ? 18 : endpointRows[index - 1].packedY + minLabelGap;
+        row.packedY = Math.max(row.anchorY, minY);
+    });
+    const overflow = endpointRows.length
+        ? endpointRows[endpointRows.length - 1].packedY - (chartHeight - 22)
+        : 0;
+    if (overflow > 0) {
+        for (let i = endpointRows.length - 1; i >= 0; i--) {
+            const maxY = i === endpointRows.length - 1 ? chartHeight - 22 : endpointRows[i + 1].packedY - minLabelGap;
+            endpointRows[i].packedY = Math.min(endpointRows[i].packedY - overflow, maxY);
+        }
+    }
+
+    const endpointByGroup = new Map(endpointRows.map(row => [row.group, row]));
+    const endpointLayer = g.append("g")
+        .attr("class", "endpoint-label-layer")
+        .attr("data-role", "endpoint-series-labels")
+        .attr("data-relationship", "attached-centerline-aligned-to-final-year-band-midpoints")
+        .attr("data-alignment-basis", "final-year-band-midpoint-plus-collision-aware-vertical-packing");
+
+    const iconX = chartWidth + 24;
+    const textX = chartWidth + 56;
+    const endpointGroups = endpointLayer.selectAll("g.endpoint-label")
+        .data(stackedData.map(layer => endpointByGroup.get(layer.key)).filter(Boolean))
+        .enter()
+        .append("g")
+        .attr("class", "endpoint-label")
+        .attr("data-series", d => d.group)
+        .attr("data-anchor-y", d => d.anchorY.toFixed(2))
+        .attr("data-packed-y", d => d.packedY.toFixed(2));
+
+    endpointGroups.append("line")
+        .attr("x1", chartWidth - 1)
+        .attr("x2", iconX - 24)
+        .attr("y1", d => d.anchorY)
+        .attr("y2", d => d.packedY)
+        .attr("stroke", "#81AFC7")
+        .attr("stroke-width", 0.9)
+        .attr("stroke-opacity", 0.62);
+
+    endpointGroups.append("circle")
+        .attr("class", "endpoint-series-icon-slot")
+        .attr("cx", iconX)
+        .attr("cy", d => d.packedY)
+        .attr("r", 23)
+        .attr("fill", "#FFFFFF")
+        .attr("stroke", "#D7E8F2")
+        .attr("stroke-width", 1.2)
+        .attr("data-asset-slot", "endpoint-series-icon")
+        .attr("data-slot-policy", "reserved-semantic-slot-no-raster")
+        .attr("data-asset-source-policy", "none-in-source-data")
+        .attr("data-anchor", "final-year-stacked-area-band-midpoint")
+        .attr("data-bbox-policy", "circle-r23-centered-on-packed-endpoint-label")
+        .attr("data-collision-rule", "packed with endpoint labels inside right gutter")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+
+    endpointGroups.append("circle")
+        .attr("class", "endpoint-series-icon-slot-inner")
+        .attr("cx", iconX)
+        .attr("cy", d => d.packedY)
+        .attr("r", 15)
+        .attr("fill", "none")
+        .attr("stroke", "#A9CFE2")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "3 4")
+        .attr("opacity", 0.9)
+        .attr("data-asset-placeholder", "neutral-circular-slot")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+
+    endpointGroups.append("text")
+        .attr("x", textX)
+        .attr("y", d => d.packedY - 3)
+        .attr("text-anchor", "start")
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${fontSize(10.5)}px`)
+        .style("font-weight", 700)
+        .each(function(d) {
+            const label = truncate(d.group, 32);
+            const words = label.split(/\s+/);
+            const first = words.slice(0, Math.ceil(words.length / 2)).join(" ");
+            const second = words.slice(Math.ceil(words.length / 2)).join(" ");
+            const text = d3.select(this);
+            text.append("tspan").attr("x", textX).attr("dy", 0).text(first);
+            if (second) text.append("tspan").attr("x", textX).attr("dy", 12).text(second);
+        });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/area_chart/stacked_area_chart_02.js

@@ -0,0 +1,394 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Stacked Area Chart",
+    "chart_name": "stacked_area_chart_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 10], [0, "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    const parseTemporalValue = value => {
+        if (value instanceof Date) return value.getTime();
+        if (typeof value === "number" && Number.isFinite(value)) return value;
+        const text = String(value ?? "").trim();
+        if (/^\d{4}$/.test(text)) return +text;
+        const parsed = Date.parse(text);
+        return Number.isNaN(parsed) ? null : parsed;
+    };
+
+    const isTemporalX = (dataColumns[0] && dataColumns[0].data_type === "temporal")
+        || chartData.some(d => parseTemporalValue(d[xField]) !== null);
+
+    // Keep larger average groups lower in the stack, matching the selected reference.
+    const groups = [...new Set(chartData.map(d => d[groupField]))]
+        .sort((a, b) => {
+            const avgA = d3.mean(chartData.filter(d => d[groupField] === a), d => +d[yField]);
+            const avgB = d3.mean(chartData.filter(d => d[groupField] === b), d => +d[yField]); 
+            return avgB - avgA;
+        });
+    
+    // 找出所有组都有数据的x值
+    const xValuesByGroup = {};
+    groups.forEach(group => {
+        xValuesByGroup[group] = new Set(
+            chartData.filter(d => d[groupField] === group).map(d => d[xField])
+        );
+    });
+    
+    // 找出所有组共有的x值
+    let commonXValues = [...xValuesByGroup[groups[0]]];
+    for (let i = 1; i < groups.length; i++) {
+        commonXValues = commonXValues.filter(x => xValuesByGroup[groups[i]].has(x));
+    }
+    
+    // Temporal fields must render chronologically by default.
+    commonXValues.sort((a, b) => {
+        if (isTemporalX) {
+            const ta = parseTemporalValue(a);
+            const tb = parseTemporalValue(b);
+            if (ta !== null && tb !== null && ta !== tb) return ta - tb;
+        }
+        const aIndex = chartData.findIndex(d => d[xField] === a);
+        const bIndex = chartData.findIndex(d => d[xField] === b);
+        return aIndex - bIndex;
+    });
+    
+    // 过滤数据，只保留所有组都有的x值
+    const filteredData = chartData.filter(d => commonXValues.includes(d[xField]));
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 44, right: 22, bottom: 62, 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;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const shadow = defs.append("filter")
+        .attr("id", "stacked-area-02-legend-shadow")
+        .attr("x", "-15%")
+        .attr("y", "-70%")
+        .attr("width", "130%")
+        .attr("height", "240%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 6)
+        .attr("stdDeviation", 7)
+        .attr("flood-color", "#56708c")
+        .attr("flood-opacity", 0.22);
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 创建x轴比例尺 - 使用分类比例尺
+    const xScale = d3.scaleBand()
+        .domain(commonXValues)
+        .range([0, chartWidth])
+        .padding(0.28);
+    
+    // 为堆叠数据准备
+    const groupedData = d3.group(filteredData, d => d[xField]);
+    
+    // 转换为堆叠格式
+    const stackData = Array.from(groupedData, ([key, values]) => {
+        const obj = { category: key };
+        values.forEach(v => {
+            obj[v[groupField]] = v[yField];
+        });
+        return obj;
+    });
+    
+    // 确保所有组都有值（如果某些类别缺少某组的数据，填充为0）
+    stackData.forEach(d => {
+        groups.forEach(group => {
+            if (d[group] === undefined) {
+                d[group] = 0;
+            }
+        });
+    });
+    
+    // 按照原始x值顺序排序
+    stackData.sort((a, b) => {
+        return commonXValues.indexOf(a.category) - commonXValues.indexOf(b.category);
+    });
+    
+    // 计算每个类别的总和，并转换为百分比
+    stackData.forEach(d => {
+        const total = groups.reduce((sum, group) => sum + d[group], 0);
+        groups.forEach(group => {
+            d[group + "_original"] = d[group]; // 保存原始值
+            d[group] = (d[group] / total) * 100; // 转换为百分比
+        });
+    });
+    
+    // 创建堆叠生成器
+    const stack = d3.stack()
+        .keys(groups)
+        .order(d3.stackOrderNone)
+        .offset(d3.stackOffsetNone);
+    
+    // 生成堆叠数据
+    const stackedData = stack(stackData);
+    
+    // 创建y轴比例尺 (固定为0-100%)
+    const yScale = d3.scaleLinear()
+        .domain([0, 100])
+        .range([chartHeight, 0]);
+    
+    // 添加Y轴网格线
+    const yTicks = [0, 20, 40, 60, 80, 100];
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0)
+            .attr("y1", yScale(tick))
+            .attr("x2", chartWidth)
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#cfd8e3")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "4,4")
+            .attr("opacity", 0.88);
+        
+        g.append("text")
+            .attr("x", -10)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#26384f")
+            .attr("font-weight", "700")
+            .style("font-size", "14px")
+            .text(tick + "%");
+    });
+
+    g.append("text")
+        .attr("class", "y-axis-title")
+        .attr("x", -52)
+        .attr("y", chartHeight / 2)
+        .attr("text-anchor", "middle")
+        .attr("transform", `rotate(-90, -52, ${chartHeight / 2})`)
+        .attr("fill", "#21334f")
+        .attr("font-weight", "700")
+        .style("font-family", typography.label?.font_family || "Arial")
+        .style("font-size", "16px")
+        .text(dataColumns[1]?.name === yField ? yField.replace(/([a-z])([A-Z])/g, "$1 $2") : yField);
+    
+    // 添加X轴刻度和标签
+    commonXValues.forEach(category => {
+        g.append("text")
+            .attr("x", xScale(category) + xScale.bandwidth() / 2)
+            .attr("y", chartHeight + 25)
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial")
+            .style("font-size", "14px")
+            .style("font-weight", "700")
+            .style("fill", "#26384f")
+            .text(category);
+    });
+    
+    // 添加X轴线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", "#6d7d91")
+        .attr("stroke-width", 1.2);
+    
+    const markLayer = g.append("g").attr("class", "stacked-column-layer");
+
+    commonXValues.forEach((category, categoryIndex) => {
+        const barData = stackData.find(d => d.category === category);
+        if (!barData) return;
+        
+        const barX = xScale(category);
+        const barWidth = xScale.bandwidth();
+        const clipId = `stacked-area-02-rounded-column-${categoryIndex}`;
+        defs.append("clipPath")
+            .attr("id", clipId)
+            .append("rect")
+            .attr("x", barX)
+            .attr("y", 0)
+            .attr("width", barWidth)
+            .attr("height", chartHeight)
+            .attr("rx", Math.min(10, barWidth * 0.18))
+            .attr("ry", Math.min(10, barWidth * 0.18));
+
+        const barGroup = markLayer.append("g")
+            .attr("class", "stacked-column")
+            .attr("data-x-value", category)
+            .attr("data-mark-endcap", "rounded-outer-corners-flat-internal-joins")
+            .attr("clip-path", `url(#${clipId})`);
+
+        let cumulativeHeight = 0;
+        
+        groups.forEach((group, groupIndex) => {
+            const value = barData[group];
+            const height = (value / 100) * chartHeight;
+            const y = chartHeight - cumulativeHeight - height;
+            
+            const color = colorResolver.field(group, groupIndex, { palette: "category10" }).value;
+            const gradientId = `stacked-area-02-gradient-${categoryIndex}-${groupIndex}`;
+            const gradient = defs.append("linearGradient")
+                .attr("id", gradientId)
+                .attr("x1", "0%")
+                .attr("y1", "0%")
+                .attr("x2", "100%")
+                .attr("y2", "100%");
+            gradient.append("stop")
+                .attr("offset", "0%")
+                .attr("stop-color", chartUtils.color.scaleRgb(color, 1.08));
+            gradient.append("stop")
+                .attr("offset", "100%")
+                .attr("stop-color", chartUtils.color.scaleRgb(color, 0.92));
+            
+            barGroup.append("rect")
+                .attr("class", "stacked-segment")
+                .attr("data-series", group)
+                .attr("data-value", barData[group + "_original"])
+                .attr("data-percent", value)
+                .attr("data-stacked-join", groupIndex === 0 ? "baseline-rounded-by-column-clip" : "flat-internal-join")
+                .attr("x", barX)
+                .attr("y", y)
+                .attr("width", barWidth)
+                .attr("height", height)
+                .attr("fill", `url(#${gradientId})`);
+            
+            const minHeightForLabel = 34;
+            
+            if (height >= minHeightForLabel) {
+                const labelX = barX + barWidth / 2;
+                const labelY = y + height / 2;
+                const originalValue = barData[group + "_original"];
+                
+                g.append("text")
+                    .attr("class", "segment-label-percent")
+                    .attr("data-series", group)
+                    .attr("data-x-value", category)
+                    .attr("x", labelX)
+                    .attr("y", labelY - 7)
+                    .attr("text-anchor", "middle")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", "#fff")
+                    .attr("font-weight", "800")
+                    .style("font-size", "15px")
+                    .style("paint-order", "stroke")
+                    .style("stroke", "rgba(0,0,0,0.16)")
+                    .style("stroke-width", "1px")
+                    .style("stroke-linejoin", "round")
+                    .text(chartUtils.format.percent(value).text);
+                
+                g.append("text")
+                    .attr("class", "segment-label-raw")
+                    .attr("data-series", group)
+                    .attr("data-x-value", category)
+                    .attr("x", labelX)
+                    .attr("y", labelY + 8)
+                    .attr("text-anchor", "middle")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", "rgba(255,255,255,0.92)")
+                    .attr("font-weight", "700")
+                    .style("font-size", "12px")
+                    .style("paint-order", "stroke")
+                    .style("stroke", "rgba(0,0,0,0.18)")
+                    .style("stroke-width", "0.8px")
+                    .style("stroke-linejoin", "round")
+                    .text(`(${chartUtils.format.fixed(originalValue).text})`);
+            }
+
+            cumulativeHeight += height;
+        });
+    });
+    
+    const legendGroup = g.append("g")
+        .attr("class", "legend-pill")
+        .attr("data-coordinate-relationship", "independent-floating-card")
+        .attr("data-anchor", "between-subtitle-and-plot")
+        .attr("data-collision-rule", "avoid-title-subtitle-and-plot");
+
+    const titleWidth = chartUtils.text.measure(null, groupField, { fontSize: 16, fontWeight: "bold" }).width;
+    const titleMargin = 15;
+
+    const legendSize = chartUtils.legend.draw(legendGroup, groups, colors, {
+        x: titleWidth + titleMargin,
+        y: 0,
+        fontSize: 14,
+        fontWeight: "bold",
+        align: "left",
+        maxWidth: chartWidth - titleWidth - titleMargin,
+        shape: "rect",
+    });
+
+    legendGroup.append("text")
+        .attr("class", "legend-title")
+        .attr("x", 0)
+        .attr("y", legendSize.height / 2)
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#1e2b3e")
+        .style("font-size", "16px")
+        .style("font-weight", "800")
+        .text(groupField);
+
+    const legendBBox = legendGroup.node().getBBox();
+    const padX = 18;
+    const padY = 10;
+    legendGroup.insert("rect", ":first-child")
+        .attr("class", "legend-pill-bg")
+        .attr("x", legendBBox.x - padX)
+        .attr("y", legendBBox.y - padY)
+        .attr("width", legendBBox.width + padX * 2)
+        .attr("height", legendBBox.height + padY * 2)
+        .attr("rx", 18)
+        .attr("ry", 18)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "rgba(100,130,160,0.14)")
+        .attr("filter", "url(#stacked-area-02-legend-shadow)")
+        .attr("data-legend-relationship", "independent-floating-card");
+    
+    const legendTotalWidth = legendBBox.width + padX * 2;
+    legendGroup.attr("transform", `translate(${(chartWidth - legendTotalWidth) / 2 - legendBBox.x + padX}, ${-42 - legendSize.height/2})`);
+    
+    return svg.node();
+}