Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type32_area_chart/area_plain_chart_01.js

@@ -0,0 +1,447 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_plain_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_title": "yes",
+    "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 variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    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 fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFont = typography.title?.font_family || fontFamily;
+
+    const width = Math.max(1536, Number(variables.width) || 1536);
+    const height = Math.max(864, Number(variables.height) || Math.round(width * 0.5625));
+    const bgTop = "#030A17";
+    const bgBottom = "#071426";
+    const panelStroke = "#2E3D54";
+    const gridColor = "#536178";
+    const textPrimary = "#F8FAFF";
+    const textMuted = "#C7CDD8";
+    const accent = colorResolver.other("primary", { fallback: "#FF7FA5" }).value || "#FF7FA5";
+    const accentSoft = "#FF9FBC";
+    const accentDark = "#6F2543";
+    const idSuffix = String(containerSelector || "area-plain-01").replace(/[^a-zA-Z0-9_-]/g, "").slice(0, 24);
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "area-plain-chart-01-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", textPrimary)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    };
+
+    if (!xField || !yField) return addEmptyState("Missing area chart fields");
+
+    const parseDate = value => {
+        const raw = String(value ?? "").trim();
+        if (/^-?\d{1,6}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        const helper = chartUtils.format.parseDate(value);
+        if (helper instanceof Date && Number.isFinite(helper.getTime())) return helper;
+        const parsed = Date.parse(raw);
+        return Number.isFinite(parsed) ? new Date(parsed) : null;
+    };
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+    const wrapWords = (value, maxChars, maxLines = 3) => {
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (next.length <= maxChars || !current) current = next;
+            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 wrapWordsByPx = (value, maxPx, fontPx, maxLines = 3, charFactor = 0.56) => {
+        const approxCharPx = fontPx * charFactor;
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        const widthOf = text => text.length * approxCharPx;
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (widthOf(next) <= maxPx || !current) current = next;
+            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 ellipsizeByPx = (value, maxPx, fontPx, charFactor = 0.55) => {
+        const text = String(value ?? "").replace(/\s+/g, " ").trim();
+        const approxCharPx = fontPx * charFactor;
+        const maxChars = Math.max(4, Math.floor(maxPx / approxCharPx));
+        if (text.length <= maxChars) return text;
+        return `${text.slice(0, Math.max(1, maxChars - 1)).trimEnd()}…`;
+    };
+    const formatYear = date => date instanceof Date ? String(date.getFullYear()) : "";
+    const formatValue = value => {
+        const numberValue = Number(value);
+        if (!Number.isFinite(numberValue)) return String(value ?? "");
+        return d3.format(",.2f")(numberValue).replace(/\.00$/, ".00");
+    };
+    const formatUnit = unit => {
+        const clean = String(unit ?? "").trim();
+        if (!clean) return "";
+        if (clean === "£m") return "million £";
+        return clean;
+    };
+    const conciseMetricName = column => {
+        const fromName = readableName(column?.label || column?.name || "");
+        const base = (fromName || readableName(column?.description || "")).replace(/^Total\s+/i, "");
+        const unit = formatUnit(column?.unit);
+        return unit ? `${base} (${unit})` : base;
+    };
+
+    const rows = chartData.map((row, index) => {
+        const date = parseDate(row[xField]);
+        const value = Number(row[yField]);
+        return { raw: row, date, value, index };
+    }).filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.index - b.index);
+    if (rows.length < 2) return addEmptyState("Area chart needs at least two points");
+
+    const defs = svg.append("defs");
+    const bgId = `area-plain-01-bg-${idSuffix}`;
+    const bg = defs.append("linearGradient").attr("id", bgId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", bgTop);
+    bg.append("stop").attr("offset", "65%").attr("stop-color", bgBottom);
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#010612");
+
+    const fillId = `area-plain-01-fill-${idSuffix}`;
+    const fill = defs.append("linearGradient").attr("id", fillId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+    fill.append("stop").attr("offset", "0%").attr("stop-color", accent).attr("stop-opacity", 0.78);
+    fill.append("stop").attr("offset", "55%").attr("stop-color", accentDark).attr("stop-opacity", 0.58);
+    fill.append("stop").attr("offset", "100%").attr("stop-color", "#080D18").attr("stop-opacity", 0.12);
+
+    const glowId = `area-plain-01-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", 3).attr("result", "blur");
+    glow.append("feMerge").selectAll("feMergeNode").data(["blur", "SourceGraphic"]).enter().append("feMergeNode").attr("in", d => d);
+
+    svg.append("rect").attr("class", "chart-style-background").attr("width", width).attr("height", height).attr("fill", `url(#${bgId})`);
+
+    const rawTitle = String(titles.main_title || metadata.title || readableName(yField)).trim();
+    const titleWords = rawTitle.split(/\s+/).filter(Boolean);
+    const kicker = titleWords.slice(0, Math.min(4, titleWords.length)).join(" ").toUpperCase();
+    const rest = titleWords.slice(Math.min(4, titleWords.length));
+    const emphasis = rest.length > 1 ? rest[rest.length - 1] : "Upward";
+    const headline = rest.length > 1 ? rest.slice(0, -1).join(" ") : rawTitle;
+    const subtitle = String(titles.sub_title || metadata.description || `${readableName(yField)} over time.`).trim();
+
+    const leftX = width * 0.045;
+    const leftColumnRight = width * 0.305;
+    const leftColumnW = leftColumnRight - leftX;
+    const titleG = svg.append("g")
+        .attr("class", "header-title-art-slot")
+        .attr("data-reserved-slot", "header_title_art_slot")
+        .attr("transform", `translate(${leftX}, ${height * 0.13})`);
+    const kickerFont = Math.max(16, Math.min(width * 0.017, leftColumnW / Math.max(12, kicker.length) * 1.35));
+    const kickerLines = wrapWordsByPx(kicker, leftColumnW, kickerFont, 2, 0.62);
+    kickerLines.forEach((lineText, i) => {
+        titleG.append("text")
+            .attr("class", "title-kicker chart-text")
+            .attr("x", 0)
+            .attr("y", i * kickerFont * 1.15)
+            .attr("fill", accentSoft)
+            .style("font-family", fontFamily)
+            .style("font-size", `${kickerFont}px`)
+            .style("font-weight", "900")
+            .style("letter-spacing", "2px")
+            .text(lineText);
+    });
+
+    const headlineLines = wrapWords(headline, 15, 2);
+    const headlineFont = Math.max(44, width * 0.041);
+    const headlineStartY = height * 0.08 + Math.max(0, kickerLines.length - 1) * kickerFont * 1.1;
+    headlineLines.forEach((lineText, i) => {
+        titleG.append("text")
+            .attr("class", "title-headline chart-text")
+            .attr("x", 0)
+            .attr("y", headlineStartY + i * headlineFont * 1.08)
+            .attr("fill", textPrimary)
+            .style("font-family", titleFont)
+            .style("font-size", `${headlineFont}px`)
+            .style("font-weight", "900")
+            .text(lineText);
+    });
+    const emphasisY = headlineStartY + headlineLines.length * headlineFont * 1.08;
+    titleG.append("text")
+        .attr("class", "title-emphasis chart-text")
+        .attr("x", 0)
+        .attr("y", emphasisY)
+        .attr("fill", accentSoft)
+        .style("font-family", titleFont)
+        .style("font-size", `${headlineFont}px`)
+        .style("font-weight", "900")
+        .text(`${emphasis} ↗`);
+    titleG.append("line")
+        .attr("x1", 0)
+        .attr("x2", width * 0.085)
+        .attr("y1", emphasisY + height * 0.048)
+        .attr("y2", emphasisY + height * 0.048)
+        .attr("stroke", accentSoft)
+        .attr("stroke-width", 3)
+        .attr("stroke-linecap", "round");
+    wrapWordsByPx(subtitle, leftColumnW * 0.90, Math.max(18, width * 0.018), 4, 0.46).forEach((lineText, i) => {
+        titleG.append("text")
+            .attr("class", "title-subtitle chart-text")
+            .attr("x", 0)
+            .attr("y", emphasisY + height * 0.115 + i * Math.max(23, height * 0.035))
+            .attr("fill", textMuted)
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(18, width * 0.018)}px`)
+            .style("font-weight", "500")
+            .text(lineText);
+    });
+
+    const slotX = leftX + width * 0.04;
+    const slotY = height * 0.60;
+    const slotW = width * 0.21;
+    const slotH = height * 0.26;
+    const illustrationSlot = svg.append("g")
+        .attr("class", "left-illustration-slot decorative-image-slot")
+        .attr("data-reserved-slot", "left_illustration_slot")
+        .attr("data-asset-owner", "image2")
+        .attr("transform", `translate(${slotX}, ${slotY})`);
+    illustrationSlot.append("rect")
+        .attr("width", slotW)
+        .attr("height", slotH)
+        .attr("rx", 10)
+        .attr("fill", accent)
+        .attr("fill-opacity", 0.04)
+        .attr("stroke", accentSoft)
+        .attr("stroke-opacity", 0.18);
+    illustrationSlot.append("line")
+        .attr("x1", slotW * 0.12)
+        .attr("x2", slotW * 0.88)
+        .attr("y1", slotH * 0.82)
+        .attr("y2", slotH * 0.82)
+        .attr("stroke", accentSoft)
+        .attr("stroke-width", 2)
+        .attr("stroke-opacity", 0.35)
+        .attr("stroke-linecap", "round");
+
+    const panel = {
+        x: width * 0.335,
+        y: height * 0.065,
+        w: width * 0.62,
+        h: height * 0.86
+    };
+    svg.append("rect")
+        .attr("class", "chart-panel")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.w)
+        .attr("height", panel.h)
+        .attr("rx", 18)
+        .attr("fill", "#071121")
+        .attr("fill-opacity", 0.58)
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1.2);
+
+    const legend = svg.append("g").attr("class", "legend-pill").attr("transform", `translate(${panel.x + 28}, ${panel.y + 30})`);
+    const legendText = conciseMetricName(yColumn);
+    const legendW = Math.min(panel.w * 0.42, Math.max(230, legendText.length * 8.2 + 68));
+    const fittedLegendText = ellipsizeByPx(legendText, legendW - 58, 17, 0.45);
+    legend.append("rect").attr("width", legendW).attr("height", 40).attr("rx", 15).attr("fill", "#111A2B").attr("stroke", panelStroke);
+    legend.append("circle").attr("cx", 24).attr("cy", 20).attr("r", 7).attr("fill", accent);
+    legend.append("text").attr("x", 42).attr("y", 26).attr("fill", textPrimary).style("font-family", fontFamily).style("font-size", "17px").text(fittedLegendText);
+
+    const plot = {
+        x: panel.x + panel.w * 0.07,
+        y: panel.y + panel.h * 0.19,
+        w: panel.w * 0.89,
+        h: panel.h * 0.70
+    };
+    const xInset = Math.min(78, Math.max(34, plot.w * 0.075));
+    const xScale = d3.scaleTime().domain(d3.extent(rows, d => d.date)).range([plot.x + xInset, plot.x + plot.w - xInset * 0.55]);
+    const maxY = d3.max(rows, d => d.value) || 1;
+    const yScale = d3.scaleLinear().domain([0, maxY * 1.03]).nice(6).range([plot.y + plot.h, plot.y]);
+    const yTicks = yScale.ticks(6);
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        svg.append("line")
+            .attr("class", "y-grid-line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.w)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "4 4")
+            .attr("opacity", 0.45);
+        svg.append("text")
+            .attr("class", "y-axis-label chart-text")
+            .attr("x", plot.x - 14)
+            .attr("y", y + 5)
+            .attr("text-anchor", "end")
+            .attr("fill", textMuted)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(d3.format(",")(tick));
+    });
+    svg.append("line").attr("x1", plot.x).attr("x2", plot.x).attr("y1", plot.y).attr("y2", plot.y + plot.h).attr("stroke", textMuted).attr("opacity", 0.7);
+    svg.append("line").attr("x1", plot.x).attr("x2", plot.x + plot.w).attr("y1", plot.y + plot.h).attr("y2", plot.y + plot.h).attr("stroke", textMuted).attr("opacity", 0.7);
+
+    const area = d3.area()
+        .x(d => xScale(d.date))
+        .y0(plot.y + plot.h)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveLinear);
+    const line = d3.line()
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveLinear);
+
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-fill data-area")
+        .attr("d", area)
+        .attr("fill", `url(#${fillId})`);
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-line-underlay")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", accentSoft)
+        .attr("stroke-width", 8)
+        .attr("opacity", 0.28)
+        .attr("filter", `url(#${glowId})`);
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-line data-line")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", accentSoft)
+        .attr("stroke-width", 3.2);
+
+    const labelStep = Math.max(1, Math.ceil(rows.length / 8));
+    const labelRows = rows.filter((row, i) => i % labelStep === 0 || i === rows.length - 1);
+    const placedLabelBoxes = [];
+    const overlaps = (a, b, pad = 4) => !(a.x + a.w + pad <= b.x || b.x + b.w + pad <= a.x || a.y + a.h + pad <= b.y || b.y + b.h + pad <= a.y);
+    labelRows.forEach(row => {
+        const x = xScale(row.date);
+        const y = yScale(row.value);
+        svg.append("circle").attr("class", "point-marker").attr("cx", x).attr("cy", y).attr("r", 7).attr("fill", textPrimary).attr("stroke", accent).attr("stroke-width", 3);
+        const labelText = formatValue(row.value);
+        const labelW = Math.max(64, labelText.length * 9.2 + 20);
+        const labelH = 31;
+        const lx = Math.max(plot.x + 4, Math.min(plot.x + plot.w - labelW - 4, x - labelW / 2));
+        const baseLy = Math.max(plot.y + 4, y - labelH - 26);
+        const candidateYs = [
+            baseLy,
+            baseLy - 34,
+            baseLy + 34,
+            baseLy - 68,
+            baseLy + 68
+        ].map(candidate => Math.max(plot.y + 4, Math.min(plot.y + plot.h - labelH - 8, candidate)));
+        let ly = candidateYs[0];
+        let bestScore = Number.POSITIVE_INFINITY;
+        candidateYs.forEach(candidateY => {
+            const box = { x: lx, y: candidateY, w: labelW, h: labelH };
+            const overlapPenalty = placedLabelBoxes.reduce((sum, placed) => sum + (overlaps(box, placed, 5) ? 10000 : 0), 0);
+            const pointPenalty = Math.abs(candidateY + labelH - y) * 0.4;
+            const score = overlapPenalty + pointPenalty + Math.abs(candidateY - baseLy) * 0.2;
+            if (score < bestScore) {
+                bestScore = score;
+                ly = candidateY;
+            }
+        });
+        placedLabelBoxes.push({ x: lx, y: ly, w: labelW, h: labelH });
+        const pointerX = Math.max(10, Math.min(labelW - 10, x - lx));
+        const label = svg.append("g")
+            .attr("class", "point-value-label")
+            .attr("data-x", row.raw[xField])
+            .attr("data-value", row.value)
+            .attr("transform", `translate(${lx}, ${ly})`);
+        label.append("rect").attr("width", labelW).attr("height", labelH).attr("rx", 7).attr("fill", accent).attr("opacity", 0.95);
+        label.append("path").attr("d", `M ${pointerX - 8} ${labelH - 1} L ${pointerX + 8} ${labelH - 1} L ${pointerX} ${labelH + 13} Z`).attr("fill", accent).attr("opacity", 0.95);
+        label.append("text")
+            .attr("x", labelW / 2)
+            .attr("y", labelH * 0.64)
+            .attr("text-anchor", "middle")
+            .attr("fill", textPrimary)
+            .style("font-family", fontFamily)
+            .style("font-size", "15px")
+            .style("font-weight", "900")
+            .text(labelText);
+        svg.append("circle").attr("class", "x-axis-dot").attr("cx", x).attr("cy", plot.y + plot.h).attr("r", 4).attr("fill", accent);
+    });
+
+    const tickYears = rows.filter((row, i) => i % Math.max(1, Math.ceil(rows.length / 7)) === 0 || i === rows.length - 1);
+    tickYears.forEach(row => {
+        svg.append("text")
+            .attr("class", "x-axis-label chart-text")
+            .attr("x", xScale(row.date))
+            .attr("y", plot.y + plot.h + 42)
+            .attr("text-anchor", "middle")
+            .attr("fill", textMuted)
+            .style("font-family", fontFamily)
+            .style("font-size", "18px")
+            .text(formatYear(row.date));
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type32_area_chart/area_plain_chart_02.js

@@ -0,0 +1,482 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_plain_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": 900,
+    "min_width": 650,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_title": "yes",
+    "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 variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const fontSans = typography.label?.font_family || "Arial, sans-serif";
+    const fontSerif = typography.title?.font_family || "Georgia, 'Times New Roman', serif";
+    const referenceSerif = "Georgia, 'Times New Roman', serif";
+
+    const width = Math.max(1080, Number(variables.width) || 1080);
+    const height = Math.max(1440, Number(variables.height) || Math.round(width * 1.333));
+    const blue = colorResolver.other("positive", { fallback: "#1267D8" }).value || "#1267D8";
+    const green = "#63AF48";
+    const pink = "#EF4774";
+    const ink = "#172033";
+    const muted = "#5B6472";
+    const grid = "#CDD5DF";
+    const idSuffix = String(containerSelector || "area-plain-02").replace(/[^a-zA-Z0-9_-]/g, "").slice(0, 24);
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "area-plain-chart-02-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect").attr("width", width).attr("height", height).attr("fill", "#F8FAFD");
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", ink)
+            .style("font-family", fontSans)
+            .style("font-size", "18px")
+            .text(message);
+        return svg.node();
+    };
+    if (!xField || !yField) return addEmptyState("Missing area chart fields");
+
+    const parseDate = value => {
+        const raw = String(value ?? "").trim();
+        if (/^-?\d{1,6}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        const helper = chartUtils.format.parseDate(value);
+        if (helper instanceof Date && Number.isFinite(helper.getTime())) return helper;
+        const parsed = Date.parse(raw);
+        return Number.isFinite(parsed) ? new Date(parsed) : null;
+    };
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+    const wrapWordsByPx = (value, maxPx, fontPx, maxLines = 3, charFactor = 0.54) => {
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        const widthOf = text => text.length * fontPx * charFactor;
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (widthOf(next) <= maxPx || !current) current = next;
+            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 formatYear = date => date instanceof Date ? String(date.getFullYear()) : "";
+    const formatValue = value => {
+        const n = Number(value);
+        if (!Number.isFinite(n)) return String(value ?? "");
+        const suffix = String(yColumn.unit || "").trim() === "%" ? "%" : "";
+        return `${d3.format(",.2f")(n)}${suffix}`;
+    };
+    const metricName = () => {
+        const base = readableName(yColumn.label || yColumn.name || yColumn.description || "Value");
+        const unit = String(yColumn.unit || "").trim();
+        return unit && !base.includes(unit) ? `${base} (${unit})` : base;
+    };
+
+    const rows = chartData.map((row, index) => {
+        const date = parseDate(row[xField]);
+        const value = Number(row[yField]);
+        return { raw: row, date, value, index };
+    }).filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.index - b.index);
+    if (rows.length < 2) return addEmptyState("Area chart needs at least two points");
+
+    const defs = svg.append("defs");
+    const bgId = `area-plain-02-bg-${idSuffix}`;
+    const bg = defs.append("linearGradient").attr("id", bgId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#FFFFFF");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#F4F7FA");
+    const fillId = `area-plain-02-fill-${idSuffix}`;
+    const fill = defs.append("linearGradient").attr("id", fillId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+    fill.append("stop").attr("offset", "0%").attr("stop-color", blue).attr("stop-opacity", 0.82);
+    fill.append("stop").attr("offset", "62%").attr("stop-color", "#8EC5FF").attr("stop-opacity", 0.58);
+    fill.append("stop").attr("offset", "100%").attr("stop-color", "#EAF4FF").attr("stop-opacity", 0.22);
+    const shadowId = `area-plain-02-shadow-${idSuffix}`;
+    const shadow = defs.append("filter").attr("id", shadowId).attr("x", "-20%").attr("y", "-20%").attr("width", "140%").attr("height", "150%");
+    shadow.append("feDropShadow").attr("dx", 0).attr("dy", 6).attr("stdDeviation", 8).attr("flood-color", "#718096").attr("flood-opacity", 0.18);
+
+    svg.append("rect").attr("width", width).attr("height", height).attr("fill", `url(#${bgId})`);
+
+    const illustration = svg.append("g")
+        .attr("class", "header-illustration-slot decorative-image-slot")
+        .attr("data-reserved-slot", "header_illustration_slot")
+        .attr("data-asset-owner", "image2")
+        .attr("transform", `translate(${width * 0.07}, ${height * 0.035})`);
+    const slotSize = width * 0.17;
+    illustration.append("circle")
+        .attr("cx", slotSize / 2)
+        .attr("cy", slotSize / 2)
+        .attr("r", slotSize / 2)
+        .attr("fill", "#EAF4FF")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 10)
+        .attr("filter", `url(#${shadowId})`);
+    illustration.append("circle")
+        .attr("cx", slotSize / 2)
+        .attr("cy", slotSize / 2)
+        .attr("r", slotSize * 0.31)
+        .attr("fill", blue)
+        .attr("fill-opacity", 0.10)
+        .attr("stroke", blue)
+        .attr("stroke-opacity", 0.22)
+        .attr("stroke-width", 3);
+
+    const rawTitle = readableName(titles.main_title || metadata.title || yField);
+    const subtitle = String(titles.sub_title || metadata.description || `${metricName()} over time.`).trim();
+    const titleG = svg.append("g")
+        .attr("class", "header-title-art-slot")
+        .attr("data-reserved-slot", "header_title_art_slot")
+        .attr("transform", `translate(${width * 0.27}, ${height * 0.075})`);
+    const titleFont = Math.max(42, width * 0.055);
+    const titleLines = wrapWordsByPx(rawTitle, width * 0.65, titleFont, 3, 0.45);
+    const drawRichLine = (line, y) => {
+        const words = line.split(/\s+/).filter(Boolean);
+        const text = titleG.append("text")
+            .attr("x", 0)
+            .attr("y", y)
+            .style("font-family", referenceSerif)
+            .style("font-size", `${titleFont}px`)
+            .style("font-weight", "800");
+        words.forEach((word, i) => {
+            const normalized = word.toLowerCase().replace(/[^a-z]/g, "");
+            const color = /surge|rise|recover|growth|increase|upward/.test(normalized)
+                ? green
+                : /decline|drop|loss|fall|decrease/.test(normalized)
+                    ? pink
+                    : ink;
+            text.append("tspan")
+                .attr("fill", color)
+                .text(`${word}${i < words.length - 1 ? " " : ""}`);
+        });
+    };
+    titleLines.forEach((line, i) => drawRichLine(line, i * titleFont * 1.02));
+    wrapWordsByPx(subtitle, width * 0.58, Math.max(21, width * 0.025), 2, 0.47).forEach((line, i) => {
+        titleG.append("text")
+            .attr("x", 0)
+            .attr("y", titleLines.length * titleFont * 1.02 + 34 + i * 34)
+            .attr("fill", muted)
+            .style("font-family", referenceSerif)
+            .style("font-size", `${Math.max(21, width * 0.025)}px`)
+            .style("font-style", "italic")
+            .text(line);
+    });
+
+    const plot = {
+        x: width * 0.075,
+        y: height * 0.265,
+        w: width * 0.87,
+        h: height * 0.56
+    };
+    const xInset = Math.max(18, plot.w * 0.02);
+    const xScale = d3.scaleTime().domain(d3.extent(rows, d => d.date)).range([plot.x + xInset, plot.x + plot.w - xInset]);
+    const minValue = d3.min(rows, d => d.value);
+    const maxValue = d3.max(rows, d => d.value);
+    const yMin = minValue < 0 ? minValue * 1.12 : 0;
+    const yMax = maxValue > 0 ? maxValue * 1.08 : 0;
+    const yScale = d3.scaleLinear().domain([yMin, yMax]).nice(6).range([plot.y + plot.h, plot.y]);
+    const zeroY = yScale(0);
+
+    const yTicks = yScale.ticks(10);
+    svg.append("text")
+        .attr("x", plot.x - 40)
+        .attr("y", plot.y - 36)
+        .attr("fill", "#4A5568")
+        .style("font-family", fontSans)
+        .style("font-size", "17px")
+        .style("font-weight", "800")
+        .style("letter-spacing", "0.5px")
+        .text(metricName().toUpperCase());
+
+    const autoTicks = rows.length <= 8 ? rows.map(d => d.date) : xScale.ticks(Math.min(6, rows.length));
+    const xTicks = [rows[0].date, ...autoTicks, rows[rows.length - 1].date]
+        .filter((tick, index, ticks) => ticks.findIndex(other => +other === +tick) === index)
+        .sort((a, b) => a - b);
+    if (xTicks.length >= 2) {
+        const last = xTicks[xTicks.length - 1];
+        const previous = xTicks[xTicks.length - 2];
+        if (xScale(last) - xScale(previous) < 120 && +previous !== +rows[0].date) {
+            xTicks.splice(xTicks.length - 2, 1);
+        }
+    }
+    xTicks.forEach((tick, i) => {
+        if (i % 2 !== 0 || i >= xTicks.length - 1) return;
+        const x1 = Math.max(plot.x, xScale(tick));
+        const x2 = Math.min(plot.x + plot.w, xScale(xTicks[i + 1]));
+        svg.append("rect")
+            .attr("x", x1)
+            .attr("y", plot.y)
+            .attr("width", Math.max(0, x2 - x1))
+            .attr("height", plot.h)
+            .attr("fill", "#EDF2F7")
+            .attr("opacity", 0.55);
+    });
+
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        svg.append("line")
+            .attr("class", "y-grid-line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.w)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", grid)
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "5 4");
+        svg.append("text")
+            .attr("class", "y-axis-label chart-text")
+            .attr("x", plot.x - 16)
+            .attr("y", y + 7)
+            .attr("text-anchor", "end")
+            .attr("fill", "#2D3748")
+            .style("font-family", fontSans)
+            .style("font-size", "25px")
+            .text(d3.format(",~g")(tick));
+    });
+    svg.append("line")
+        .attr("x1", plot.x)
+        .attr("x2", plot.x + plot.w + 12)
+        .attr("y1", zeroY)
+        .attr("y2", zeroY)
+        .attr("stroke", "#1F2937")
+        .attr("stroke-width", 3);
+
+    const area = d3.area()
+        .x(d => xScale(d.date))
+        .y0(zeroY)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveLinear);
+    const line = d3.line()
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveLinear);
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-fill data-area")
+        .attr("d", area)
+        .attr("fill", `url(#${fillId})`);
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-line-shadow")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", blue)
+        .attr("stroke-width", 10)
+        .attr("opacity", 0.18);
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-line data-line")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", blue)
+        .attr("stroke-width", 5.5)
+        .attr("stroke-linejoin", "round");
+
+    xTicks.forEach(tick => {
+        svg.append("text")
+            .attr("class", "x-axis-label chart-text")
+            .attr("x", xScale(tick))
+            .attr("y", plot.y + plot.h + 38)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#1F2937")
+            .style("font-family", fontSans)
+            .style("font-size", "23px")
+            .style("font-weight", "700")
+            .text(formatYear(tick));
+    });
+
+    const marker = (point, stroke = blue, r = 10) => {
+        svg.append("circle")
+            .attr("class", "point-marker")
+            .attr("cx", xScale(point.date))
+            .attr("cy", yScale(point.value))
+            .attr("r", r)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", stroke)
+            .attr("stroke-width", 5);
+    };
+    const addSmallCallout = (point, opts) => {
+        const x = xScale(point.date);
+        const y = yScale(point.value);
+        const w = opts.w || 145;
+        const h = opts.h || 86;
+        const cx = Math.max(plot.x + 12, Math.min(plot.x + plot.w - w - 8, x + (opts.dx || 16)));
+        const cy = Math.max(plot.y + 12, Math.min(plot.y + plot.h - h - 8, y + (opts.dy || -112)));
+        const g = svg.append("g")
+            .attr("class", "point-callout endpoint-callout")
+            .attr("data-x", point.raw[xField])
+            .attr("data-value", point.value)
+            .attr("transform", `translate(${cx}, ${cy})`);
+        g.append("rect")
+            .attr("width", w)
+            .attr("height", h)
+            .attr("rx", 11)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#D6DEE8")
+            .attr("filter", `url(#${shadowId})`);
+        const pointerX = Math.max(16, Math.min(w - 16, x - cx));
+        const pointerY = y > cy + h ? h : 0;
+        if (pointerY === h) {
+            g.append("path").attr("d", `M ${pointerX - 12} ${h - 1} L ${pointerX + 12} ${h - 1} L ${pointerX} ${h + 18} Z`).attr("fill", "#FFFFFF").attr("stroke", "#D6DEE8");
+        }
+        g.append("text")
+            .attr("x", w / 2)
+            .attr("y", 38)
+            .attr("text-anchor", "middle")
+            .attr("fill", opts.color || blue)
+            .style("font-family", fontSans)
+            .style("font-size", "28px")
+            .style("font-weight", "900")
+            .text(formatValue(point.value));
+        g.append("text")
+            .attr("x", w / 2)
+            .attr("y", 66)
+            .attr("text-anchor", "middle")
+            .attr("fill", muted)
+            .style("font-family", fontSerif)
+            .style("font-size", "18px")
+            .text(`in ${formatYear(point.date)}`);
+    };
+    const addLeaderCard = (point, opts) => {
+        const x = xScale(point.date);
+        const y = yScale(point.value);
+        const w = opts.w || 178;
+        const h = opts.h || 116;
+        const cx = Math.max(plot.x + 12, Math.min(plot.x + plot.w - w - 12, x + (opts.dx || -w / 2)));
+        const rawCy = y + (opts.dy || -210);
+        const separatedCy = Math.min(rawCy, y - h - 42);
+        const topLimit = opts.allowAbovePlot ? plot.y - 70 : plot.y + 10;
+        const cy = Math.max(topLimit, Math.min(plot.y + plot.h - h - 18, separatedCy));
+        const leaderX = Math.max(cx + 26, Math.min(cx + w - 26, x));
+        svg.append("line")
+            .attr("class", "callout-leader")
+            .attr("x1", leaderX)
+            .attr("x2", x)
+            .attr("y1", cy + h + 5)
+            .attr("y2", y - 12)
+            .attr("stroke", opts.color)
+            .attr("stroke-width", 2.4)
+            .attr("stroke-dasharray", "4 5");
+        const g = svg.append("g")
+            .attr("class", "leader-callout")
+            .attr("data-x", point.raw[xField])
+            .attr("data-value", point.value)
+            .attr("transform", `translate(${cx}, ${cy})`);
+        g.append("rect")
+            .attr("width", w)
+            .attr("height", h)
+            .attr("rx", 12)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", opts.color)
+            .attr("stroke-opacity", 0.55)
+            .attr("filter", `url(#${shadowId})`);
+        g.append("circle")
+            .attr("cx", w / 2)
+            .attr("cy", -2)
+            .attr("r", 34)
+            .attr("fill", opts.color);
+        g.append("text")
+            .attr("x", w / 2)
+            .attr("y", 4)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#FFFFFF")
+            .style("font-family", fontSans)
+            .style("font-size", "34px")
+            .style("font-weight", "900")
+            .text(opts.symbol);
+        g.append("text")
+            .attr("x", w / 2)
+            .attr("y", 52)
+            .attr("text-anchor", "middle")
+            .attr("fill", ink)
+            .style("font-family", fontSerif)
+            .style("font-size", "22px")
+            .text(opts.label);
+        g.append("text")
+            .attr("x", w / 2)
+            .attr("y", 85)
+            .attr("text-anchor", "middle")
+            .attr("fill", opts.color)
+            .style("font-family", fontSans)
+            .style("font-size", "31px")
+            .style("font-weight", "900")
+            .text(formatValue(point.value));
+        g.append("text")
+            .attr("x", w / 2)
+            .attr("y", 108)
+            .attr("text-anchor", "middle")
+            .attr("fill", muted)
+            .style("font-family", fontSerif)
+            .style("font-size", "17px")
+            .text(`in ${formatYear(point.date)}`);
+    };
+
+    const first = rows[0];
+    const last = rows[rows.length - 1];
+    const min = rows.reduce((best, row) => row.value < best.value ? row : best, rows[0]);
+    const max = rows.reduce((best, row) => row.value > best.value ? row : best, rows[0]);
+    const keyPoints = [];
+    [first, min, max, last].forEach(point => {
+        if (!keyPoints.some(existing => existing.index === point.index)) keyPoints.push(point);
+    });
+    keyPoints.forEach(point => marker(point, point.index === min.index ? green : blue, point.index === max.index ? 11 : 10));
+    addSmallCallout(first, { color: blue, dx: 12, dy: -118, w: 145 });
+    if (min.index !== first.index && min.index !== last.index) {
+        addLeaderCard(min, { color: green, label: "Low of", symbol: "v", dx: -70, dy: -210, w: 150, h: 116 });
+    }
+    if (max.index !== first.index && max.index !== last.index) {
+        addLeaderCard(max, { color: blue, label: "High of", symbol: "^", dx: -120, dy: -240, w: 168, h: 118, allowAbovePlot: true });
+    }
+    if (last.index !== first.index) {
+        addSmallCallout(last, { color: blue, dx: -120, dy: 36, w: 128, h: 76 });
+    }
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type32_area_chart/area_plain_chart_03.js

@@ -0,0 +1,488 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_plain_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": 900,
+    "min_width": 650,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_title": "yes",
+    "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 variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = dataColumns[0] || {};
+    const yColumn = dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const fontSans = typography.label?.font_family || "Arial, sans-serif";
+    const referenceSans = "Inter, Arial, sans-serif";
+    const blue = colorResolver.other("primary", { fallback: "#1E6FE5" }).value || "#1E6FE5";
+    const lightBlue = "#9AD5FF";
+    const ink = "#071A3D";
+    const muted = "#2F3F5C";
+    const grid = "#C9DDF2";
+    const idSuffix = String(containerSelector || "area-plain-03").replace(/[^a-zA-Z0-9_-]/g, "").slice(0, 24);
+
+    const width = Math.max(1080, Number(variables.width) || 1080);
+    const height = Math.max(1536, Number(variables.height) || Math.round(width * 1.42));
+    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-plain-chart-03-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect").attr("width", width).attr("height", height).attr("fill", "#F4FAFF");
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", ink)
+            .style("font-family", fontSans)
+            .style("font-size", "20px")
+            .text(message);
+        return svg.node();
+    };
+    if (!xField || !yField) return addEmptyState("Missing area chart fields");
+
+    const parseDate = value => {
+        const raw = String(value ?? "").trim();
+        if (/^-?\d{1,6}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        const helper = chartUtils.format.parseDate(value);
+        if (helper instanceof Date && Number.isFinite(helper.getTime())) return helper;
+        const parsed = Date.parse(raw);
+        return Number.isFinite(parsed) ? new Date(parsed) : null;
+    };
+    const readableName = value => String(value ?? "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+    const wrapWordsByPx = (value, maxPx, fontPx, maxLines = 2, charFactor = 0.52) => {
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        const widthOf = text => text.length * fontPx * charFactor;
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (widthOf(next) <= maxPx || !current) current = next;
+            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 formatYear = date => date instanceof Date ? String(date.getFullYear()) : "";
+    const metricName = () => {
+        const base = readableName(yColumn.label || yColumn.name || yColumn.description || "Value");
+        const unit = String(yColumn.unit || "").trim();
+        if (/\bbillion/i.test(base)) return base.replace(/\s*\(\$?b\)\s*/i, "").replace(/\s*\(\$?\)\s*/i, "");
+        if (unit === "$" && !/\bbillion/i.test(base)) return `${base} (in billions)`;
+        return unit && !base.includes(unit) && unit !== "$" ? `${base} (${unit})` : base;
+    };
+    const hasCurrency = String(yColumn.unit || "").trim() === "$" || /\$|sales|revenue|cost|price/i.test(metricName());
+    const formatValue = value => {
+        const n = Number(value);
+        if (!Number.isFinite(n)) return String(value ?? "");
+        if (hasCurrency) return `$${d3.format(",.2f")(n)}B`;
+        const suffix = String(yColumn.unit || "").trim() === "%" ? "%" : "";
+        return `${d3.format(",.2f")(n)}${suffix}`;
+    };
+
+    const rows = chartData.map((row, index) => {
+        const date = parseDate(row[xField]);
+        const value = Number(row[yField]);
+        return { raw: row, date, value, index };
+    }).filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.index - b.index);
+    if (rows.length < 2) return addEmptyState("Area chart needs at least two points");
+
+    const defs = svg.append("defs");
+    const bgId = `area-plain-03-bg-${idSuffix}`;
+    const bg = defs.append("linearGradient").attr("id", bgId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#FFFFFF");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#EAF7FF");
+    const fillId = `area-plain-03-fill-${idSuffix}`;
+    const fill = defs.append("linearGradient").attr("id", fillId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+    fill.append("stop").attr("offset", "0%").attr("stop-color", blue).attr("stop-opacity", 0.92);
+    fill.append("stop").attr("offset", "58%").attr("stop-color", "#75BEFF").attr("stop-opacity", 0.62);
+    fill.append("stop").attr("offset", "100%").attr("stop-color", "#DDF3FF").attr("stop-opacity", 0.46);
+    const shadowId = `area-plain-03-shadow-${idSuffix}`;
+    const shadow = defs.append("filter").attr("id", shadowId).attr("x", "-20%").attr("y", "-20%").attr("width", "140%").attr("height", "150%");
+    shadow.append("feDropShadow").attr("dx", 0).attr("dy", 10).attr("stdDeviation", 15).attr("flood-color", "#6D8FB3").attr("flood-opacity", 0.18);
+    const softShadowId = `area-plain-03-soft-shadow-${idSuffix}`;
+    const softShadow = defs.append("filter").attr("id", softShadowId).attr("x", "-18%").attr("y", "-18%").attr("width", "136%").attr("height", "150%");
+    softShadow.append("feDropShadow").attr("dx", 0).attr("dy", 6).attr("stdDeviation", 9).attr("flood-color", "#7D9ABB").attr("flood-opacity", 0.16);
+
+    svg.append("rect").attr("width", width).attr("height", height).attr("fill", `url(#${bgId})`);
+
+    const rawTitle = readableName(titles.main_title || metadata.title || yField);
+    const titleWords = rawTitle.split(/\s+/).filter(Boolean);
+    const headlineCount = Math.min(3, Math.max(2, Math.ceil(titleWords.length * 0.45)));
+    const eyebrowText = titleWords.length > headlineCount ? titleWords.slice(0, -headlineCount).join(" ") : "";
+    const headlineText = titleWords.length > headlineCount ? titleWords.slice(-headlineCount).join(" ") : rawTitle;
+    const subtitle = String(titles.sub_title || metadata.description || `${metricName()} over time.`).trim();
+
+    const titleSlot = svg.append("g")
+        .attr("class", "header-title-art-slot")
+        .attr("data-reserved-slot", "header_title_art_slot")
+        .attr("transform", `translate(${width / 2}, ${height * 0.085})`);
+    if (eyebrowText) {
+        titleSlot.append("text")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("text-anchor", "middle")
+            .attr("fill", ink)
+            .style("font-family", referenceSans)
+            .style("font-size", `${Math.max(34, width * 0.047)}px`)
+            .style("font-weight", "800")
+            .text(eyebrowText);
+    }
+    const headlineFont = Math.max(50, width * 0.070);
+    const headlineLines = wrapWordsByPx(headlineText, width * 0.84, headlineFont, 2, 0.50);
+    const headlineStartY = eyebrowText ? 92 : 28;
+    headlineLines.forEach((line, i) => {
+        titleSlot.append("text")
+            .attr("x", 0)
+            .attr("y", headlineStartY + i * headlineFont * 0.98)
+            .attr("text-anchor", "middle")
+            .attr("fill", blue)
+            .style("font-family", referenceSans)
+            .style("font-size", `${headlineFont}px`)
+            .style("font-weight", "900")
+            .text(line);
+    });
+    const underlineY = headlineStartY + (headlineLines.length - 1) * headlineFont * 0.98 + headlineFont * 0.62 + 4;
+    titleSlot.append("line")
+        .attr("x1", -52)
+        .attr("x2", 52)
+        .attr("y1", underlineY)
+        .attr("y2", underlineY)
+        .attr("stroke", blue)
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+    wrapWordsByPx(subtitle, width * 0.60, 25, 2, 0.48).forEach((line, i) => {
+        titleSlot.append("text")
+            .attr("x", 0)
+            .attr("y", underlineY + 52 + i * 32)
+            .attr("text-anchor", "middle")
+            .attr("fill", muted)
+            .style("font-family", referenceSans)
+            .style("font-size", "25px")
+            .text(line);
+    });
+
+    const first = rows[0];
+    const last = rows[rows.length - 1];
+    const min = rows.reduce((best, row) => row.value < best.value ? row : best, rows[0]);
+    const max = rows.reduce((best, row) => row.value > best.value ? row : best, rows[0]);
+    const growth = first.value !== 0 ? ((last.value - first.value) / Math.abs(first.value)) * 100 : null;
+
+    const titleOverflowShift = Math.max(0, headlineLines.length - 1) * 58;
+    const metricBand = { x: width * 0.06, y: height * 0.258 + titleOverflowShift, w: width * 0.88, h: height * 0.095 };
+    const metricG = svg.append("g").attr("class", "summary-metric-card-row");
+    metricG.append("rect")
+        .attr("x", metricBand.x)
+        .attr("y", metricBand.y)
+        .attr("width", metricBand.w)
+        .attr("height", metricBand.h)
+        .attr("rx", 16)
+        .attr("fill", "#FFFFFF")
+        .attr("stroke", "#D7E5F4")
+        .attr("filter", `url(#${softShadowId})`);
+    const metricItems = [
+        {
+            slot: "growth_metric_icon_slot",
+            value: growth == null ? "n/a" : `${growth >= 0 ? "+" : ""}${d3.format(".0f")(growth >= 0 ? Math.floor(growth) : Math.ceil(growth))}%`,
+            label: "Total Growth",
+            detail: `${formatYear(first.date)}-${formatYear(last.date)}`
+        },
+        {
+            slot: "latest_value_metric_icon_slot",
+            value: formatValue(last.value),
+            label: `Sales in ${formatYear(last.date)}`,
+            detail: ""
+        },
+        {
+            slot: "start_value_metric_icon_slot",
+            value: formatValue(first.value),
+            label: `Sales in ${formatYear(first.date)}`,
+            detail: ""
+        }
+    ];
+    metricItems.forEach((item, i) => {
+        const cellX = metricBand.x + metricBand.w * i / 3;
+        const cellW = metricBand.w / 3;
+        if (i > 0) {
+            metricG.append("line")
+                .attr("x1", cellX)
+                .attr("x2", cellX)
+                .attr("y1", metricBand.y + 34)
+                .attr("y2", metricBand.y + metricBand.h - 34)
+                .attr("stroke", "#C5D7EA")
+                .attr("stroke-width", 1.5);
+        }
+        const icon = metricG.append("g")
+            .attr("class", "metric-icon-slot decorative-icon-slot")
+            .attr("data-reserved-slot", item.slot)
+            .attr("data-asset-owner", "image2")
+            .attr("transform", `translate(${cellX + 74}, ${metricBand.y + metricBand.h / 2})`);
+        icon.append("circle")
+            .attr("r", 44)
+            .attr("fill", "#E6F4FF");
+        icon.append("circle")
+            .attr("r", 25)
+            .attr("fill", "none")
+            .attr("stroke", blue)
+            .attr("stroke-opacity", 0.28)
+            .attr("stroke-width", 4);
+        metricG.append("text")
+            .attr("x", cellX + 150)
+            .attr("y", metricBand.y + 56)
+            .attr("fill", "#0B3EB5")
+            .style("font-family", referenceSans)
+            .style("font-size", "31px")
+            .style("font-weight", "900")
+            .text(item.value);
+        metricG.append("text")
+            .attr("x", cellX + 150)
+            .attr("y", metricBand.y + 89)
+            .attr("fill", ink)
+            .style("font-family", referenceSans)
+            .style("font-size", "19px")
+            .text(item.label);
+        if (item.detail) {
+            metricG.append("text")
+                .attr("x", cellX + 150)
+                .attr("y", metricBand.y + 116)
+                .attr("fill", ink)
+                .style("font-family", referenceSans)
+                .style("font-size", "19px")
+                .text(item.detail);
+        }
+    });
+
+    const panel = { x: width * 0.06, y: height * 0.368 + titleOverflowShift, w: width * 0.88, h: height * 0.575 };
+    svg.append("rect")
+        .attr("class", "chart-panel")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.w)
+        .attr("height", panel.h)
+        .attr("rx", 20)
+        .attr("fill", "#FFFFFF")
+        .attr("stroke", "#D7E5F4")
+        .attr("filter", `url(#${shadowId})`);
+
+    const plot = {
+        x: panel.x + panel.w * 0.08,
+        y: panel.y + panel.h * 0.115,
+        w: panel.w * 0.84,
+        h: panel.h * 0.77
+    };
+    svg.append("text")
+        .attr("x", panel.x + 30)
+        .attr("y", panel.y + 52)
+        .attr("fill", ink)
+        .style("font-family", referenceSans)
+        .style("font-size", "21px")
+        .style("font-weight", "700")
+        .text(metricName());
+
+    const xScale = d3.scaleTime().domain(d3.extent(rows, d => d.date)).range([plot.x, plot.x + plot.w]);
+    const minValue = d3.min(rows, d => d.value);
+    const maxValue = d3.max(rows, d => d.value);
+    const yStep = d3.tickStep(minValue, maxValue, 5) || 1;
+    const yMin = Math.max(0, Math.floor(minValue / yStep) * yStep);
+    const yMax = Math.ceil(maxValue / yStep) * yStep;
+    const yScale = d3.scaleLinear().domain([yMin, yMax]).range([plot.y + plot.h, plot.y]);
+    const yBase = yScale(yScale.domain()[0]);
+    const xTicks = xScale.ticks(Math.min(8, rows.length))
+        .filter((tick, index, ticks) => ticks.findIndex(other => +other === +tick) === index);
+    if (!xTicks.some(t => +t === +rows[0].date)) xTicks.unshift(rows[0].date);
+    if (!xTicks.some(t => +t === +rows[rows.length - 1].date)) xTicks.push(rows[rows.length - 1].date);
+    xTicks.sort((a, b) => a - b);
+    if (xTicks.length >= 2) {
+        const lastTick = xTicks[xTicks.length - 1];
+        const previousTick = xTicks[xTicks.length - 2];
+        if (xScale(lastTick) - xScale(previousTick) < 95 && +previousTick !== +rows[0].date) {
+            xTicks.splice(xTicks.length - 2, 1);
+        }
+    }
+    const yTicks = d3.range(yMin, yMax + yStep * 0.5, yStep);
+
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        svg.append("line")
+            .attr("class", "y-grid-line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.w)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", grid)
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "4 4");
+        svg.append("text")
+            .attr("class", "y-axis-label chart-text")
+            .attr("x", plot.x - 17)
+            .attr("y", y + 7)
+            .attr("text-anchor", "end")
+            .attr("fill", ink)
+            .style("font-family", referenceSans)
+            .style("font-size", "21px")
+            .text(d3.format(",.1f")(tick));
+    });
+    xTicks.forEach(tick => {
+        const x = xScale(tick);
+        svg.append("line")
+            .attr("class", "x-grid-line")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", plot.y)
+            .attr("y2", plot.y + plot.h)
+            .attr("stroke", "#D8EBFB")
+            .attr("stroke-width", 1)
+            .attr("opacity", 0.5);
+        svg.append("text")
+            .attr("class", "x-axis-label chart-text")
+            .attr("x", x)
+            .attr("y", plot.y + plot.h + 42)
+            .attr("text-anchor", "middle")
+            .attr("fill", ink)
+            .style("font-family", referenceSans)
+            .style("font-size", "23px")
+            .style("font-weight", "700")
+            .text(formatYear(tick));
+    });
+
+    const illustration = svg.append("g")
+        .attr("class", "plot-illustration-slot decorative-image-slot")
+        .attr("data-reserved-slot", "plot_shopping_globe_illustration_slot")
+        .attr("data-asset-owner", "image2")
+        .attr("transform", `translate(${plot.x + plot.w * 0.08}, ${plot.y + plot.h * 0.055})`);
+    const slotW = plot.w * 0.40;
+    const slotH = plot.h * 0.52;
+    illustration.append("rect")
+        .attr("x", 0)
+        .attr("y", slotH * 0.34)
+        .attr("width", slotW)
+        .attr("height", slotH * 0.58)
+        .attr("rx", 18)
+        .attr("fill", "#FFE49A")
+        .attr("opacity", 0.44)
+        .attr("stroke", "#F2B849")
+        .attr("stroke-opacity", 0.42);
+    illustration.append("circle")
+        .attr("cx", slotW * 0.48)
+        .attr("cy", slotH * 0.32)
+        .attr("r", slotW * 0.24)
+        .attr("fill", lightBlue)
+        .attr("opacity", 0.36)
+        .attr("stroke", blue)
+        .attr("stroke-opacity", 0.25);
+
+    const area = d3.area()
+        .x(d => xScale(d.date))
+        .y0(yBase)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveLinear);
+    const line = d3.line()
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveLinear);
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-fill data-area")
+        .attr("d", area)
+        .attr("fill", `url(#${fillId})`);
+    svg.append("path")
+        .datum(rows)
+        .attr("class", "area-line data-line")
+        .attr("d", line)
+        .attr("fill", "none")
+        .attr("stroke", blue)
+        .attr("stroke-width", 6)
+        .attr("stroke-linejoin", "round");
+    const markerYears = new Set(xTicks.map(tick => formatYear(tick)));
+    rows.filter(point => markerYears.has(formatYear(point.date))).forEach(point => {
+        svg.append("circle")
+            .attr("class", "point-marker")
+            .attr("cx", xScale(point.date))
+            .attr("cy", yScale(point.value))
+            .attr("r", 8)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", blue)
+            .attr("stroke-width", 5);
+    });
+
+    const addEndpointPill = (point, side) => {
+        const x = xScale(point.date);
+        const y = yScale(point.value);
+        const w = Math.max(108, formatValue(point.value).length * 14);
+        const h = 50;
+        const desiredX = side === "left" ? x - w * 0.52 : x - w * 0.48;
+        const px = Math.max(panel.x + 60, Math.min(panel.x + panel.w - w - 12, desiredX));
+        const py = Math.max(panel.y + 30, y - h - 34);
+        const g = svg.append("g")
+            .attr("class", "endpoint-value-pill")
+            .attr("data-x", point.raw[xField])
+            .attr("data-value", point.value)
+            .attr("transform", `translate(${px}, ${py})`);
+        g.append("rect")
+            .attr("width", w)
+            .attr("height", h)
+            .attr("rx", 7)
+            .attr("fill", blue)
+            .attr("filter", `url(#${softShadowId})`);
+        const pointerX = Math.max(13, Math.min(w - 13, x - px));
+        g.append("path")
+            .attr("d", `M ${pointerX - 12} ${h - 1} L ${pointerX + 12} ${h - 1} L ${pointerX} ${h + 18} Z`)
+            .attr("fill", blue);
+        g.append("text")
+            .attr("x", w / 2)
+            .attr("y", 32)
+            .attr("text-anchor", "middle")
+            .attr("fill", "#FFFFFF")
+            .style("font-family", referenceSans)
+            .style("font-size", "23px")
+            .style("font-weight", "900")
+            .text(formatValue(point.value));
+    };
+    addEndpointPill(first, "left");
+    if (last.index !== first.index) addEndpointPill(last, "right");
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type32_area_chart/area_plain_chart_04.js

@@ -0,0 +1,257 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Area Chart",
+    "chart_name": "area_plain_chart_04",
+    "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": 900,
+    "min_width": 650,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_title": "yes",
+    "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 variables = jsonData.variables || {};
+    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(1080, Number(variables.width) || 1080);
+    const height = Math.max(1536, Number(variables.height) || Math.round(width * 1.42));
+    const navy = "#08275A";
+    const blue = "#155BB8";
+    const red = "#E3422D";
+    const muted = "#1B2E4E";
+    const grid = "#BBD5EF";
+    const referenceSans = "'Arial Narrow', Impact, Arial, sans-serif";
+    const bodySans = "Inter, Arial, sans-serif";
+    const idSuffix = String(containerSelector || "area-plain-04").replace(/[^a-zA-Z0-9_-]/g, "").slice(0, 24);
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("class", "area-plain-chart-04-reference-layout");
+
+    const addEmptyState = message => {
+        svg.append("rect").attr("width", width).attr("height", height).attr("fill", "#F2FAFF");
+        svg.append("text").attr("x", width / 2).attr("y", height / 2).attr("text-anchor", "middle").attr("fill", navy).style("font-family", bodySans).style("font-size", "20px").text(message);
+        return svg.node();
+    };
+    if (!xField || !yField) return addEmptyState("Missing area chart fields");
+
+    const parseDate = value => {
+        const raw = String(value ?? "").trim();
+        if (/^-?\d{1,6}$/.test(raw)) return new Date(Number(raw), 0, 1);
+        const helper = chartUtils.format.parseDate(value);
+        if (helper instanceof Date && Number.isFinite(helper.getTime())) return helper;
+        const parsed = Date.parse(raw);
+        return Number.isFinite(parsed) ? new Date(parsed) : null;
+    };
+    const readableName = value => String(value ?? "").replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim();
+    const wrapWords = (value, maxChars, maxLines = 3) => {
+        const words = String(value ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (next.length <= maxChars || !current) current = next;
+            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 formatYear = date => date instanceof Date ? String(date.getFullYear()) : "";
+    const formatValue = value => {
+        const n = Number(value);
+        if (!Number.isFinite(n)) return String(value ?? "");
+        const suffix = String(yColumn.unit || "").trim() === "%" || /percent|frequency|rate/i.test(yColumn.name || "") ? "%" : "";
+        return `${d3.format(".1f")(n)}${suffix}`;
+    };
+    const axisTitle = (() => {
+        const base = readableName(yColumn.label || yColumn.name || yColumn.description || "Value");
+        const unit = String(yColumn.unit || "").trim();
+        if (unit && !base.includes(unit)) return `${base} (${unit})`;
+        if (!base.includes("%") && /frequency|rate|delay/i.test(base)) return `${base} (%)`;
+        return base;
+    })();
+
+    const rows = chartData.map((row, index) => {
+        const date = parseDate(row[xField]);
+        const value = Number(row[yField]);
+        return { raw: row, date, value, index };
+    }).filter(row => row.date && Number.isFinite(row.date.getTime()) && Number.isFinite(row.value))
+        .sort((a, b) => a.date - b.date || a.index - b.index);
+    if (rows.length < 2) return addEmptyState("Area chart needs at least two points");
+
+    const defs = svg.append("defs");
+    const bgId = `area-plain-04-bg-${idSuffix}`;
+    const bg = defs.append("linearGradient").attr("id", bgId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#FFFFFF");
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#E4F7FF");
+    const fillId = `area-plain-04-fill-${idSuffix}`;
+    const fill = defs.append("linearGradient").attr("id", fillId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+    fill.append("stop").attr("offset", "0%").attr("stop-color", "#1D6BD2").attr("stop-opacity", 0.94);
+    fill.append("stop").attr("offset", "100%").attr("stop-color", "#DDF4FF").attr("stop-opacity", 0.35);
+    const shadowId = `area-plain-04-shadow-${idSuffix}`;
+    const shadow = defs.append("filter").attr("id", shadowId).attr("x", "-20%").attr("y", "-20%").attr("width", "140%").attr("height", "150%");
+    shadow.append("feDropShadow").attr("dx", 0).attr("dy", 8).attr("stdDeviation", 14).attr("flood-color", "#73A7D8").attr("flood-opacity", 0.17);
+
+    svg.append("rect").attr("width", width).attr("height", height).attr("fill", `url(#${bgId})`);
+
+    const rawTitle = readableName(titles.main_title || metadata.title || yField);
+    const subtitle = String(titles.sub_title || metadata.description || `${axisTitle} over time.`).trim();
+    const titleG = svg.append("g")
+        .attr("class", "header-title-art-slot")
+        .attr("data-reserved-slot", "header_title_art_slot")
+        .attr("transform", `translate(${width * 0.055}, ${height * 0.064})`);
+    const titleFont = 60;
+    wrapWords(rawTitle.toUpperCase(), 23, 3).forEach((line, i) => {
+        titleG.append("text")
+            .attr("x", 0)
+            .attr("y", i * 74)
+            .attr("fill", i === 0 ? navy : blue)
+            .style("font-family", referenceSans)
+            .style("font-size", `${titleFont}px`)
+            .style("font-weight", "900")
+            .text(line);
+    });
+    titleG.append("line")
+        .attr("x1", 0).attr("x2", 138)
+        .attr("y1", 226).attr("y2", 226)
+        .attr("stroke", "#F0C319").attr("stroke-width", 5);
+    wrapWords(subtitle, 48, 3).forEach((line, i) => {
+        titleG.append("text")
+            .attr("x", 0)
+            .attr("y", 278 + i * 36)
+            .attr("fill", muted)
+            .style("font-family", bodySans)
+            .style("font-size", "25px")
+            .text(line);
+    });
+
+    const asset = svg.append("g")
+        .attr("class", "header-aviation-illustration-slot decorative-image-slot")
+        .attr("data-reserved-slot", "header_aviation_illustration_slot")
+        .attr("data-asset-owner", "image2")
+        .attr("transform", `translate(${width * 0.64}, ${height * 0.075})`);
+    asset.append("circle").attr("cx", 155).attr("cy", 160).attr("r", 145).attr("fill", "#9ED8FF").attr("opacity", 0.32);
+    asset.append("ellipse").attr("cx", 170).attr("cy", 245).attr("rx", 170).attr("ry", 45).attr("fill", "#FFFFFF").attr("opacity", 0.42);
+    asset.append("path").attr("d", "M65,110 L165,150 L308,112 L320,134 L190,198 L78,164 Z").attr("fill", "#FFFFFF").attr("stroke", blue).attr("stroke-opacity", 0.28);
+
+    const plot = { x: width * 0.11, y: height * 0.40, w: width * 0.82, h: height * 0.39 };
+    const minValue = d3.min(rows, d => d.value);
+    const maxValue = d3.max(rows, d => d.value);
+    const yStep = d3.tickStep(0, maxValue, 5) || 1;
+    const yMax = Math.ceil(maxValue / yStep) * yStep;
+    const yScale = d3.scaleLinear().domain([0, yMax]).range([plot.y + plot.h, plot.y]);
+    const xScale = d3.scaleTime().domain(d3.extent(rows, d => d.date)).range([plot.x + 44, plot.x + plot.w - 12]);
+    const xTicks = rows.filter((_, i) => i % Math.ceil(rows.length / 8) === 0 || i === rows.length - 1);
+    const yTicks = d3.range(0, yMax + yStep * 0.5, yStep);
+    const baselineY = yScale(0);
+
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        svg.append("line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.w)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", grid)
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "5 5");
+        svg.append("text")
+            .attr("x", plot.x - 13)
+            .attr("y", y + 7)
+            .attr("text-anchor", "end")
+            .attr("fill", navy)
+            .style("font-family", bodySans)
+            .style("font-size", "24px")
+            .style("font-weight", "700")
+            .text(`${d3.format("~g")(tick)}${String(yColumn.unit || "").trim() === "%" ? "%" : ""}`);
+    });
+    svg.append("text")
+        .attr("transform", `translate(${plot.x - 72}, ${plot.y + plot.h / 2}) rotate(-90)`)
+        .attr("text-anchor", "middle")
+        .attr("fill", "#44648B")
+        .style("font-family", bodySans)
+        .style("font-size", "25px")
+        .style("font-weight", "800")
+        .style("letter-spacing", "2px")
+        .text(axisTitle.toUpperCase());
+
+    const area = d3.area().x(d => xScale(d.date)).y0(baselineY).y1(d => yScale(d.value)).curve(d3.curveLinear);
+    const line = d3.line().x(d => xScale(d.date)).y(d => yScale(d.value)).curve(d3.curveLinear);
+    svg.append("path").datum(rows).attr("class", "area-fill data-area").attr("d", area).attr("fill", `url(#${fillId})`);
+    svg.append("path").datum(rows).attr("d", line).attr("fill", "none").attr("stroke", blue).attr("stroke-width", 8).attr("stroke-linejoin", "round");
+    svg.append("path").datum(rows).attr("d", line).attr("fill", "none").attr("stroke", "#083E91").attr("stroke-width", 3.5);
+
+    xTicks.forEach(point => {
+        const x = xScale(point.date);
+        const y = yScale(point.value);
+        svg.append("line")
+            .attr("x1", x).attr("x2", x)
+            .attr("y1", y + 12).attr("y2", baselineY)
+            .attr("stroke", "#D6E6F6")
+            .attr("stroke-width", 1.4)
+            .attr("stroke-dasharray", "4 5");
+        svg.append("circle").attr("cx", x).attr("cy", y).attr("r", 8.5).attr("fill", "#FFFFFF").attr("stroke", blue).attr("stroke-width", 4);
+        svg.append("text")
+            .attr("x", x)
+            .attr("y", y - 36)
+            .attr("text-anchor", "middle")
+            .attr("fill", navy)
+            .style("font-family", bodySans)
+            .style("font-size", "20px")
+            .style("font-weight", "900")
+            .text(formatYear(point.date));
+        svg.append("text")
+            .attr("x", x)
+            .attr("y", y - 8)
+            .attr("text-anchor", "middle")
+            .attr("fill", red)
+            .style("font-family", bodySans)
+            .style("font-size", "25px")
+            .style("font-weight", "900")
+            .text(formatValue(point.value));
+        svg.append("text")
+            .attr("x", x)
+            .attr("y", baselineY + 42)
+            .attr("text-anchor", "middle")
+            .attr("fill", navy)
+            .style("font-family", bodySans)
+            .style("font-size", "22px")
+            .style("font-weight", "800")
+            .text(formatYear(point.date));
+    });
+    svg.append("line").attr("x1", plot.x).attr("x2", plot.x + plot.w).attr("y1", baselineY).attr("y2", baselineY).attr("stroke", navy).attr("stroke-width", 3);
+
+    return svg.node();
+}