Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type26_spline_graph/spline_graph_plain_chart_01.js

@@ -0,0 +1,637 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "spline graph",
+    "chart_name": "spline_graph_plain_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary"],
+    "supported_effects": ["stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 600,
+    "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 && jsonData.data.data) || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "600" }
+    };
+    const sourceColors = jsonData.colors || {};
+    const colorOther = sourceColors.other || {};
+    const colorField = sourceColors.field || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const xField = xColumn.name || "date";
+    const yField = yColumn.name || "value";
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    const width = Number(variables.width) || 700;
+    const height = Number(variables.height) || 500;
+    const textColor = sourceColors.text_color || "#26313f";
+    const lineColor = colorOther.primary || colorField.y || sourceColors.primary || "#1f6bdd";
+    const secondaryColor = colorOther.secondary || "#7fb7df";
+    const canvasColor = "#f5f9ff";
+    const cardColor = "#ffffff";
+    const plotColor = "#fafdff";
+    const accentColor = "#1272f2";
+    const purpleAccent = "#7d43df";
+    const tealAccent = "#16b7be";
+    const mutedColor = "#56677f";
+    const labelTypography = typography.label || {};
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const valueFamily = valueTypography.font_family || labelFamily;
+    const labelWeight = labelTypography.font_weight || "normal";
+    const valueWeight = valueTypography.font_weight || "600";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 12;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 12;
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    function parseTemporalDate(value) {
+        if (value instanceof Date && Number.isFinite(value.getTime())) return value;
+        if (typeof value === "number" && Number.isFinite(value)) {
+            return new Date(Date.UTC(value, 0, 1));
+        }
+
+        const text = String(value ?? "").trim();
+        if (!text) return null;
+
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), 0, 1));
+
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) {
+            return new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3] || 1)));
+        }
+
+        match = text.match(/^Q([1-4])\s+(-?\d{4})$/i) || text.match(/^(-?\d{4})\s+Q([1-4])$/i);
+        if (match) {
+            const year = match[1].length === 4 ? Number(match[1]) : Number(match[2]);
+            const quarter = match[1].length === 4 ? Number(match[2]) : Number(match[1]);
+            return new Date(Date.UTC(year, (quarter - 1) * 3, 1));
+        }
+
+        match = text.match(/^(spring|summer|fall|autumn|winter)\s+(-?\d{4})$/i);
+        if (match) {
+            const monthBySeason = { spring: 2, summer: 5, fall: 8, autumn: 8, winter: 11 };
+            return new Date(Date.UTC(Number(match[2]), monthBySeason[match[1].toLowerCase()], 1));
+        }
+
+        const parsed = new Date(text);
+        if (Number.isFinite(parsed.getTime())) {
+            return new Date(Date.UTC(parsed.getUTCFullYear(), parsed.getUTCMonth(), parsed.getUTCDate()));
+        }
+        return null;
+    }
+
+    function formatNumber(value) {
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue)) return String(value ?? "");
+        const absValue = Math.abs(numericValue);
+        if (absValue >= 1000000000) return `${d3.format(".3~g")(numericValue / 1000000000)}B`;
+        if (absValue >= 1000000) return `${d3.format(".3~g")(numericValue / 1000000)}M`;
+        if (absValue >= 1000) return `${d3.format(".3~g")(numericValue / 1000)}K`;
+        return d3.format(",.4~g")(numericValue);
+    }
+
+    function formatWithUnit(value, unit) {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "$") return `$${formatted}`;
+        if (unit === "%") return `${formatted}%`;
+        return `${formatted} ${unit}`;
+    }
+
+    function formatPointLabel(value, unit) {
+        if (!unit || unit === "$" || unit === "%") return formatWithUnit(value, unit);
+        return formatNumber(value);
+    }
+
+    function estimateTextWidth(text, fontSize, weight) {
+        const estimated = chartUtilsTextSample(String(text), {
+            fontSize,
+            fontWeight: weight || 700,
+            fontFamily: valueFamily
+        });
+        if (estimated && Number.isFinite(estimated.width)) return estimated.width;
+        return String(text).length * fontSize * 0.58;
+    }
+
+    function selectEven(values, maxCount) {
+        if (values.length <= maxCount) return values;
+        const selected = [];
+        for (let i = 0; i < maxCount; i += 1) {
+            const index = Math.round(i * (values.length - 1) / (maxCount - 1));
+            const value = values[index];
+            if (!selected.includes(value)) selected.push(value);
+        }
+        return selected;
+    }
+
+    function formatDateTick(date, labelByTime) {
+        const label = labelByTime.get(date.getTime());
+        if (label) return label;
+        return d3.utcFormat("%Y")(date);
+    }
+
+    const parsedRows = chartData.map((d, index) => {
+        const date = parseTemporalDate(d[xField]);
+        const value = Number(d[yField]);
+        return {
+            ...d,
+            __index: index,
+            __date: date,
+            __time: date ? date.getTime() : NaN,
+            __xLabel: String(d[xField] ?? ""),
+            __value: value
+        };
+    }).filter(d => d.__date && Number.isFinite(d.__time) && Number.isFinite(d.__value));
+
+    if (!parsedRows.length) return;
+
+    const byTime = new Map();
+    parsedRows.forEach(d => {
+        if (!byTime.has(d.__time)) {
+            byTime.set(d.__time, {
+                date: d.__date,
+                time: d.__time,
+                label: d.__xLabel,
+                valueSum: 0,
+                count: 0
+            });
+        }
+        const entry = byTime.get(d.__time);
+        entry.valueSum += d.__value;
+        entry.count += 1;
+    });
+
+    const series = Array.from(byTime.values())
+        .map(d => ({
+            date: d.date,
+            time: d.time,
+            label: d.label,
+            value: d.valueSum / d.count
+        }))
+        .sort((a, b) => a.time - b.time);
+
+    if (!series.length) return;
+
+    const firstPoint = series[0];
+    const lastPoint = series[series.length - 1];
+    const minPoint = series.reduce((best, d) => d.value < best.value ? d : best, firstPoint);
+    const maxPoint = series.reduce((best, d) => d.value > best.value ? d : best, firstPoint);
+
+    const xValues = series.map(d => d.date);
+    const labelByTime = new Map(series.map(d => [d.time, d.label]));
+    const values = series.map(d => d.value);
+    let yMin = d3.min(values);
+    let yMax = d3.max(values);
+    if (!Number.isFinite(yMin) || !Number.isFinite(yMax)) return;
+
+    const rawYMin = yMin;
+    const rawYMax = yMax;
+    if (yMin === yMax) {
+        const pad = Math.max(1, Math.abs(yMin) * 0.1);
+        yMin -= pad;
+        yMax += pad;
+    } else {
+        const pad = (yMax - yMin) * 0.12;
+        yMin -= pad;
+        yMax += pad;
+    }
+    if (rawYMin >= 0) yMin = 0;
+    if (rawYMax <= 0) yMax = Math.min(0, yMax);
+
+    const cardMargin = Math.max(20, width * 0.035);
+    const badgeHeight = Math.max(40, height * 0.072);
+    const margin = {
+        top: Math.max(112, height * 0.19),
+        right: Math.max(40, width * 0.07),
+        bottom: Math.max(58, height * 0.12),
+        left: Math.max(72, width * 0.13)
+    };
+    const innerWidth = Math.max(120, width - margin.left - margin.right);
+    const innerHeight = Math.max(120, height - margin.top - margin.bottom);
+    const tickCount = innerWidth < 300 ? 4 : 5;
+    const xTicks = selectEven(xValues, tickCount);
+
+    const xExtent = d3.extent(xValues);
+    const xPad = Math.max(1, (xExtent[1].getTime() - xExtent[0].getTime()) * 0.03);
+    const xScale = d3.scaleUtc()
+        .domain([
+            new Date(xExtent[0].getTime() - xPad),
+            new Date(xExtent[1].getTime() + xPad)
+        ])
+        .range([0, innerWidth]);
+    const yScale = d3.scaleLinear()
+        .domain([yMin, yMax])
+        .nice(5)
+        .range([innerHeight, 0]);
+    const yTicks = yScale.ticks(5);
+    const yDomain = yScale.domain();
+    const areaBaselineValue = Math.max(yDomain[0], Math.min(0, yDomain[1]));
+    const areaBaselineY = yScale(areaBaselineValue);
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg");
+
+    const defs = svg.append("defs");
+    const areaGradient = defs.append("linearGradient")
+        .attr("id", "spline_graph_01_area_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    areaGradient.append("stop").attr("offset", "0%").attr("stop-color", rgba(accentColor, 0.22));
+    areaGradient.append("stop").attr("offset", "58%").attr("stop-color", rgba(accentColor, 0.16));
+    areaGradient.append("stop").attr("offset", "100%").attr("stop-color", rgba(purpleAccent, 0.24));
+    const lineGradient = defs.append("linearGradient")
+        .attr("id", "spline_graph_01_line_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    lineGradient.append("stop").attr("offset", "0%").attr("stop-color", tealAccent);
+    lineGradient.append("stop").attr("offset", "58%").attr("stop-color", accentColor);
+    lineGradient.append("stop").attr("offset", "100%").attr("stop-color", purpleAccent);
+    const badgeGradient = defs.append("linearGradient")
+        .attr("id", "spline_graph_01_badge_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    badgeGradient.append("stop").attr("offset", "0%").attr("stop-color", "#1644bd");
+    badgeGradient.append("stop").attr("offset", "100%").attr("stop-color", accentColor);
+    const cardShadow = defs.append("filter")
+        .attr("id", "spline_graph_01_card_shadow")
+        .attr("x", "-8%")
+        .attr("y", "-12%")
+        .attr("width", "116%")
+        .attr("height", "128%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 2.2)
+        .attr("flood-color", "#34619a")
+        .attr("flood-opacity", 0.14);
+
+    svg.append("rect")
+        .attr("class", "chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", canvasColor);
+
+    svg.append("rect")
+        .attr("class", "chart-card")
+        .attr("x", cardMargin)
+        .attr("y", cardMargin)
+        .attr("width", width - cardMargin * 2)
+        .attr("height", height - cardMargin * 2)
+        .attr("rx", 18)
+        .attr("ry", 18)
+        .attr("fill", cardColor)
+        .attr("stroke", rgba(accentColor, 0.18))
+        .attr("stroke-width", 1.2)
+        .style("filter", "url(#spline_graph_01_card_shadow)");
+
+    const badgeX = margin.left - 44;
+    const badgeY = cardMargin + 28;
+    const badgeText = yUnit ? `${yField} (${yUnit})` : yField;
+    const badge = svg.append("g")
+        .attr("class", "chart-title-badge")
+        .attr("data-role", "measure-label")
+        .attr("transform", `translate(${badgeX}, ${badgeY})`);
+    badge.append("circle")
+        .attr("class", "badge-icon-slot")
+        .attr("data-asset-slot", "measure-icon")
+        .attr("data-asset-source-policy", "neutral_placeholder")
+        .attr("data-anchor", "chart-card-top-left")
+        .attr("data-collision-rule", "avoid measure label and y-axis tick labels")
+        .attr("cx", badgeHeight / 2)
+        .attr("cy", badgeHeight / 2)
+        .attr("r", badgeHeight * 0.43)
+        .attr("fill", "url(#spline_graph_01_badge_gradient)")
+        .attr("stroke", "rgba(255,255,255,0.82)")
+        .attr("stroke-width", 1.4)
+        .attr("filter", "url(#spline_graph_01_card_shadow)");
+    badge.append("circle")
+        .attr("class", "neutral-asset-placeholder")
+        .attr("cx", badgeHeight / 2)
+        .attr("cy", badgeHeight / 2)
+        .attr("r", badgeHeight * 0.18)
+        .attr("fill", "none")
+        .attr("stroke", "rgba(255,255,255,0.86)")
+        .attr("stroke-width", 2);
+    badge.append("text")
+        .attr("x", badgeHeight + 12)
+        .attr("y", badgeHeight / 2 + 5)
+        .attr("text-anchor", "start")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(13, Math.min(baseValueSize + 4, 16))}px`)
+        .style("font-weight", 700)
+        .style("fill", "#071A48")
+        .text(badgeText);
+
+    const chart = svg.append("g")
+        .attr("class", "spline-plot")
+        .attr("data-count", series.length)
+        .attr("data-latest-value", lastPoint?.value ?? "")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    chart.append("rect")
+        .attr("class", "plot-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", innerWidth)
+        .attr("height", innerHeight)
+        .attr("rx", 0)
+        .attr("ry", 0)
+        .attr("fill", plotColor)
+        .attr("stroke", "none");
+
+    yTicks.forEach(tick => {
+        chart.append("line")
+            .attr("class", "gridline")
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", yScale(tick))
+            .attr("y2", yScale(tick))
+            .attr("stroke", rgba(accentColor, 0.17))
+            .attr("stroke-dasharray", "3 4")
+            .attr("stroke-width", 1);
+
+        chart.append("text")
+            .attr("class", "axis-tick y-axis-tick")
+            .attr("x", -8)
+            .attr("y", yScale(tick))
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", labelFamily)
+            .style("font-size", `${Math.max(10, Math.min(baseLabelSize + 1, 13))}px`)
+            .style("font-weight", labelWeight)
+            .style("fill", rgba("#07184a", 0.86))
+            .text(formatWithUnit(tick, yUnit));
+    });
+
+    xTicks.forEach(tick => {
+        chart.append("line")
+            .attr("class", "gridline x-gridline")
+            .attr("x1", xScale(tick))
+            .attr("x2", xScale(tick))
+            .attr("y1", 0)
+            .attr("y2", innerHeight)
+            .attr("stroke", rgba(accentColor, 0.15))
+            .attr("stroke-dasharray", "3 4")
+            .attr("stroke-width", 1);
+
+        chart.append("text")
+            .attr("class", "axis-tick x-axis-tick")
+            .attr("x", xScale(tick))
+            .attr("y", innerHeight + 22)
+            .attr("text-anchor", "middle")
+            .style("font-family", labelFamily)
+            .style("font-size", `${Math.max(10, Math.min(baseLabelSize + 1, 13))}px`)
+            .style("font-weight", labelWeight)
+            .style("fill", rgba("#07184a", 0.84))
+            .text(formatDateTick(tick, labelByTime));
+    });
+
+    chart.append("line")
+        .attr("class", "axis-line x-axis-line")
+        .attr("x1", 0)
+        .attr("x2", innerWidth)
+        .attr("y1", innerHeight)
+        .attr("y2", innerHeight)
+        .attr("stroke", rgba("#07184a", 0.70))
+        .attr("stroke-width", 1.2);
+
+    chart.append("line")
+        .attr("class", "axis-line y-axis-line")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", 0)
+        .attr("y2", innerHeight)
+        .attr("stroke", rgba("#07184a", 0.70))
+        .attr("stroke-width", 1.2);
+
+    const spline = d3.line()
+        .defined(d => Number.isFinite(d.value))
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    const area = d3.area()
+        .defined(d => Number.isFinite(d.value))
+        .x(d => xScale(d.date))
+        .y0(areaBaselineY)
+        .y1(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    chart.append("path")
+        .datum(series)
+        .attr("class", "spline-area mark")
+        .attr("data-count", series.length)
+        .attr("fill", "url(#spline_graph_01_area_gradient)")
+        .attr("stroke", "none")
+        .attr("d", area);
+
+    chart.append("path")
+        .datum(series)
+        .attr("class", "spline-halo")
+        .attr("data-count", series.length)
+        .attr("fill", "none")
+        .attr("stroke", rgba(accentColor, 0.20))
+        .attr("stroke-width", variables.has_stroke === false ? 6.2 : 7.6)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round")
+        .attr("d", spline);
+
+    chart.append("path")
+        .datum(series)
+        .attr("class", "spline line mark")
+        .attr("data-count", series.length)
+        .attr("data-latest-value", lastPoint?.value ?? "")
+        .attr("fill", "none")
+        .attr("stroke", "url(#spline_graph_01_line_gradient)")
+        .attr("stroke-width", variables.has_stroke === false ? 3.6 : 4.4)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round")
+        .attr("d", spline);
+
+    chart.selectAll(".point")
+        .data(series)
+        .enter()
+        .append("circle")
+        .attr("class", "point mark")
+        .attr("data-time", d => d.time)
+        .attr("data-label", d => d.label)
+        .attr("data-value", d => d.value)
+        .attr("cx", d => xScale(d.date))
+        .attr("cy", d => yScale(d.value))
+        .attr("r", 7)
+        .attr("fill", "#ffffff")
+        .attr("stroke", d => d.time === lastPoint.time ? purpleAccent : accentColor)
+        .attr("stroke-width", 3);
+
+    const labelBoxes = [];
+    const valueFontSize = Math.max(12, Math.min(baseValueSize + 4, 17));
+    const importantTimes = new Set([
+        firstPoint.time,
+        lastPoint.time,
+        minPoint.time,
+        maxPoint.time
+    ]);
+    const labelCandidates = series.map((point, index) => {
+        const x = xScale(point.date);
+        const y = Math.max(12, Math.min(innerHeight - 8, yScale(point.value) - 10));
+        const isLast = point.time === lastPoint.time;
+        const isFirst = point.time === firstPoint.time;
+        const labelText = formatPointLabel(point.value, yUnit);
+        const textAnchor = isLast ? "end" : (isFirst ? "start" : "middle");
+        const labelWidth = estimateTextWidth(labelText, valueFontSize, 700) + 10;
+        const left = textAnchor === "end" ? x - labelWidth : (textAnchor === "start" ? x : x - labelWidth / 2);
+        const right = textAnchor === "end" ? x : (textAnchor === "start" ? x + labelWidth : x + labelWidth / 2);
+        const top = y - valueFontSize;
+        const bottom = y + 4;
+        const priority = (isLast ? 100 : 0)
+            + (point.time === firstPoint.time ? 80 : 0)
+            + (point.time === minPoint.time || point.time === maxPoint.time ? 70 : 0)
+            + (index % 2 === 0 ? 8 : 0);
+        return { point, x, y, isLast, labelText, textAnchor, left, right, top, bottom, priority, index };
+    }).sort((a, b) => b.priority - a.priority || a.index - b.index);
+    const selectedLabels = [];
+    labelCandidates.forEach(candidate => {
+        const inside = candidate.left >= -2 && candidate.right <= innerWidth + 2 && candidate.top >= -2 && candidate.bottom <= innerHeight + 12;
+        const overlaps = labelBoxes.some(box => (
+            candidate.left < box.right
+            && candidate.right > box.left
+            && candidate.top < box.bottom
+            && candidate.bottom > box.top
+        ));
+        if (inside && !overlaps) {
+            labelBoxes.push({
+                left: candidate.left - 3,
+                right: candidate.right + 3,
+                top: candidate.top - 3,
+                bottom: candidate.bottom + 3
+            });
+            selectedLabels.push(candidate);
+        }
+    });
+
+    selectedLabels.sort((a, b) => a.index - b.index).forEach(candidate => {
+        const point = candidate.point;
+        chart.append("text")
+            .attr("class", candidate.isLast ? "value latest-value" : "value key-value")
+            .attr("data-time", point.time)
+            .attr("data-label", point.label)
+            .attr("data-value", point.value)
+            .attr("x", candidate.x)
+            .attr("y", candidate.y)
+            .attr("text-anchor", candidate.textAnchor)
+            .style("font-family", valueFamily)
+            .style("font-size", `${valueFontSize}px`)
+            .style("font-weight", 700)
+            .style("fill", candidate.isLast ? purpleAccent : accentColor)
+            .text(candidate.labelText);
+    });
+
+    const slotW = Math.min(innerWidth * 0.36, 180);
+    const slotH = Math.min(innerHeight * 0.30, 132);
+    const slotX = Math.max(innerWidth * 0.52, innerWidth - slotW - 28);
+    const slotY = Math.min(innerHeight - slotH - 42, innerHeight * 0.53);
+    const growthSlot = chart.append("g")
+        .attr("class", "reserved-asset-slot spline-growth-cluster-slot")
+        .attr("data-asset-slot", "spline-growth-cluster")
+        .attr("data-asset-source-policy", "image2_asset")
+        .attr("data-anchor", "plot-lower-right")
+        .attr("data-collision-rule", "avoid spline, point labels, axes, and x tick labels")
+        .attr("transform", `translate(${slotX}, ${slotY})`);
+    growthSlot.append("rect")
+        .attr("class", "asset-slot-bbox")
+        .attr("width", slotW)
+        .attr("height", slotH)
+        .attr("rx", 16)
+        .attr("ry", 16)
+        .attr("fill", "rgba(255,255,255,0.66)")
+        .attr("stroke", rgba(purpleAccent, 0.30))
+        .attr("stroke-dasharray", "6 6")
+        .attr("stroke-width", 1.2)
+        .attr("filter", "url(#spline_graph_01_card_shadow)");
+    const dotGroup = growthSlot.append("g")
+        .attr("class", "decorative-dot-texture")
+        .attr("opacity", 0.45);
+    const dotSpacing = 13;
+    d3.range(0, 28).forEach(i => {
+        const col = i % 7;
+        const row = Math.floor(i / 7);
+        dotGroup.append("rect")
+            .attr("x", slotW * 0.08 + col * dotSpacing)
+            .attr("y", slotH * 0.58 + row * dotSpacing)
+            .attr("width", 4)
+            .attr("height", 4)
+            .attr("rx", 1)
+            .attr("fill", i % 3 === 0 ? rgba(purpleAccent, 0.45) : rgba(accentColor, 0.32));
+    });
+    growthSlot.append("circle")
+        .attr("class", "neutral-asset-placeholder")
+        .attr("cx", slotW * 0.58)
+        .attr("cy", slotH * 0.50)
+        .attr("r", Math.min(slotW, slotH) * 0.22)
+        .attr("fill", "none")
+        .attr("stroke", rgba(purpleAccent, 0.32))
+        .attr("stroke-width", 2);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type26_spline_graph/spline_graph_plain_chart_02.js

@@ -0,0 +1,848 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Spline Graph",
+    "chart_name": "spline_graph_plain_chart_02",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 8]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "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 && 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 metadata = jsonData.metadata || {};
+
+    d3.select(containerSelector).html("");
+
+    const xField = (chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || dataColumns[0] || {}).name || chartUtils.schema.columnField(dataColumns, 0);
+    const yColumn = (chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || dataColumns[1] || {});
+    const yField = yColumn.name || chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = (chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || dataColumns[2] || {}).name || chartUtils.schema.columnField(dataColumns, 2);
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    const width = Math.max(980, Number(variables.width) || 980);
+    const height = Math.max(600, Number(variables.height) || 600);
+    const labelTypography = typography.label || {};
+    const titleTypography = typography.title || {};
+    const labelFamily = labelTypography.font_family || "Arial";
+    const titleFamily = titleTypography.font_family || labelFamily;
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 13;
+
+    function rgba(color, opacity) {
+        const parsed = d3.rgb(color || "#000000");
+        return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${opacity})`;
+    }
+
+    function isTemporalFieldName(fieldName) {
+        return /(year|date|month|time|timestamp|quarter|season|period|week|day)/i.test(String(fieldName || ""));
+    }
+
+    function parseTemporal(value, fieldName) {
+        const temporalField = isTemporalFieldName(fieldName);
+        if (value instanceof Date && Number.isFinite(value.getTime())) return value;
+        if (typeof value === "number" && Number.isFinite(value)) {
+            if (Math.abs(value) >= 100000000000) return new Date(value);
+            if (Math.abs(value) >= 1000000000 && Math.abs(value) < 100000000000) return new Date(value * 1000);
+            if (temporalField && /month/i.test(String(fieldName || "")) && value >= 1 && value <= 12) {
+                return new Date(Date.UTC(2000, Math.round(value) - 1, 1));
+            }
+            if (value >= 1000 && value <= 9999) return new Date(Date.UTC(value, 0, 1));
+            return null;
+        }
+        const text = String(value ?? "").trim();
+        if (!text) return null;
+        const lower = text.toLowerCase();
+        const monthIndex = {
+            jan: 0, january: 0,
+            feb: 1, february: 1,
+            mar: 2, march: 2,
+            apr: 3, april: 3,
+            may: 4,
+            jun: 5, june: 5,
+            jul: 6, july: 6,
+            aug: 7, august: 7,
+            sep: 8, sept: 8, september: 8,
+            oct: 9, october: 9,
+            nov: 10, november: 10,
+            dec: 11, december: 11
+        };
+        const seasonIndex = {
+            winter: 0,
+            spring: 1,
+            summer: 2,
+            fall: 3,
+            autumn: 3
+        };
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), 0, 1));
+        match = lower.match(/^(?:q([1-4])|quarter\s*([1-4]))(?:[\s,/-]*(\d{4}))?$/);
+        if (match && temporalField) {
+            const quarter = Number(match[1] || match[2]);
+            const year = match[3] ? Number(match[3]) : 2000;
+            return new Date(Date.UTC(year, (quarter - 1) * 3, 1));
+        }
+        match = lower.match(/^(\d{4})[\s,/-]*(?:q([1-4])|quarter\s*([1-4]))$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), (Number(match[2] || match[3]) - 1) * 3, 1));
+        match = lower.match(/^([a-z]+)(?:[\s,/-]+(\d{4}))?$/);
+        if (match && temporalField && Object.prototype.hasOwnProperty.call(monthIndex, match[1])) {
+            return new Date(Date.UTC(match[2] ? Number(match[2]) : 2000, monthIndex[match[1]], 1));
+        }
+        if (match && temporalField && Object.prototype.hasOwnProperty.call(seasonIndex, match[1])) {
+            return new Date(Date.UTC(match[2] ? Number(match[2]) : 2000, seasonIndex[match[1]] * 3, 1));
+        }
+        match = lower.match(/^(\d{4})[\s,/-]+([a-z]+)$/);
+        if (match && Object.prototype.hasOwnProperty.call(monthIndex, match[2])) {
+            return new Date(Date.UTC(Number(match[1]), monthIndex[match[2]], 1));
+        }
+        if (match && Object.prototype.hasOwnProperty.call(seasonIndex, match[2])) {
+            return new Date(Date.UTC(Number(match[1]), seasonIndex[match[2]] * 3, 1));
+        }
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3] || 1)));
+        const parsed = /[0-9]/.test(text) || temporalField ? new Date(text) : new Date(NaN);
+        if (Number.isFinite(parsed.getTime())) {
+            return new Date(Date.UTC(parsed.getUTCFullYear(), parsed.getUTCMonth(), parsed.getUTCDate()));
+        }
+        return null;
+    }
+
+    function formatNumber(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return String(value ?? "");
+        const absValue = Math.abs(numeric);
+        if (absValue >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (absValue >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (absValue >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatWithUnit(value) {
+        const formatted = formatNumber(value);
+        if (!yUnit) return formatted;
+        if (yUnit === "%") return `${formatted}%`;
+        if (yUnit === "$") return `$${formatted}`;
+        return `${formatted} ${yUnit}`;
+    }
+
+    function wrapText(selection, text, maxWidth, lineHeight, maxLines) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (next.length * lineHeight * 0.52 <= maxWidth || !current) {
+                current = next;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            visible[visible.length - 1] = `${visible[visible.length - 1].replace(/[,.!?;:]*$/, "")}...`;
+        }
+        selection.text(null);
+        visible.forEach((line, index) => {
+            selection.append("tspan")
+                .attr("x", selection.attr("x"))
+                .attr("dy", index === 0 ? 0 : lineHeight)
+                .text(line);
+        });
+    }
+
+    function estimateTextWidth(text, fontSize, letterSpacing = 0) {
+        return String(text || "").split("").reduce((sum, ch) => {
+            if (/\s/.test(ch)) return sum + fontSize * 0.34 + letterSpacing;
+            if ("ilI.,'`".includes(ch)) return sum + fontSize * 0.32 + letterSpacing;
+            if ("mwMW".includes(ch)) return sum + fontSize * 0.92 + letterSpacing;
+            if (/[A-Z0-9]/.test(ch)) return sum + fontSize * 0.68 + letterSpacing;
+            return sum + fontSize * 0.58 + letterSpacing;
+        }, 0);
+    }
+
+    function wrapTextNoEllipsis(selection, text, maxWidth, fontSize, lineHeight, maxLines, letterSpacing = 0) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (estimateTextWidth(next, fontSize, letterSpacing) <= maxWidth || !current) {
+                current = next;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        selection.text(null);
+        lines.forEach((line, index) => {
+            selection.append("tspan")
+                .attr("x", selection.attr("x"))
+                .attr("dy", index === 0 ? 0 : lineHeight)
+                .text(line);
+        });
+        return lines;
+    }
+
+    function wrapTitleLines(text, maxChars, maxLines) {
+        const words = String(text || "").toUpperCase().split(/\s+/).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;
+        const kept = lines.slice(0, maxLines);
+        kept[maxLines - 1] = `${kept[maxLines - 1].replace(/[,.!?;:]*$/, "")}...`;
+        return kept;
+    }
+
+    function addText(parent, attrs, styles, text) {
+        const node = parent.append("text");
+        Object.entries(attrs || {}).forEach(([key, value]) => node.attr(key, value));
+        Object.entries(styles || {}).forEach(([key, value]) => node.style(key, value));
+        if (text !== undefined) node.text(text);
+        return node;
+    }
+
+    function getGroupColor(group, index) {
+        const palette = ["#B7202E", "#159E9A", "#9BCC2E", "#237FD1", "#8C35C8", "#F39C12", "#4D84E2", "#38A1E6"];
+        if (index !== undefined && index >= 0) return palette[index % palette.length];
+        const resolved = colorResolver.field(group, index || 0, { fallbackKey: "primary" });
+        if (resolved && resolved.value) return resolved.value;
+        return palette[index % palette.length];
+    }
+
+    const rows = chartData.map((row, index) => {
+        const date = parseTemporal(row[xField], xField);
+        const groupTime = parseTemporal(row[groupField], groupField);
+        const value = Number(row[yField]);
+        const group = String(row[groupField] ?? `Series ${index + 1}`);
+        return {
+            ...row,
+            __date: date,
+            __time: date ? date.getTime() : NaN,
+            __value: value,
+            __group: group,
+            __groupTime: groupTime ? groupTime.getTime() : NaN,
+            __xLabel: String(row[xField] ?? "")
+        };
+    }).filter(row => row.__date && Number.isFinite(row.__time) && Number.isFinite(row.__value));
+
+    if (!rows.length) return null;
+
+    const groups = Array.from(d3.group(rows, d => d.__group), ([name, values], index) => ({
+        name,
+        values: values.slice().sort((a, b) => a.__time - b.__time),
+        color: getGroupColor(name, index),
+        index
+    })).filter(series => series.values.length);
+
+    groups.forEach(series => {
+        series.first = series.values[0];
+        series.last = series.values[series.values.length - 1];
+        series.latestValue = series.last.__value;
+        series.groupTime = Number.isFinite(series.values[0].__groupTime) ? series.values[0].__groupTime : NaN;
+    });
+    const groupDimensionIsTemporal = isTemporalFieldName(groupField)
+        && groups.length > 0
+        && groups.every(series => Number.isFinite(series.groupTime));
+    groups.sort((a, b) => {
+        if (groupDimensionIsTemporal) return d3.ascending(a.groupTime, b.groupTime);
+        return d3.descending(a.latestValue, b.latestValue);
+    });
+    groups.forEach((series, index) => {
+        series.rank = index;
+        series.color = getGroupColor(series.name, index);
+    });
+
+    const allDates = rows.map(d => d.__date);
+    const allValues = rows.map(d => d.__value);
+    const xExtent = d3.extent(allDates);
+    const rawMax = d3.max(allValues);
+    const yMax = Math.max(1, rawMax || 1);
+    const niceTop = Math.max(10, Math.ceil(yMax / 20) * 20);
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("style", "max-width: 100%; height: auto;");
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", "spline02-bg-gradient")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#E8F6FF");
+    bgGradient.append("stop").attr("offset", "58%").attr("stop-color", "#F8FCFF");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#EEF8FF");
+
+    const plotGradient = defs.append("linearGradient")
+        .attr("id", "spline02-plot-gradient")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%");
+    plotGradient.append("stop").attr("offset", "0%").attr("stop-color", "#FFFFFF");
+    plotGradient.append("stop").attr("offset", "100%").attr("stop-color", "#F4FBFF");
+
+    const shadow = defs.append("filter")
+        .attr("id", "spline02-card-shadow")
+        .attr("x", "-8%").attr("y", "-12%")
+        .attr("width", "116%").attr("height", "128%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 3)
+        .attr("stdDeviation", 4)
+        .attr("flood-color", "#2D5B8C")
+        .attr("flood-opacity", 0.16);
+
+    const softShadow = defs.append("filter")
+        .attr("id", "spline02-soft-shadow")
+        .attr("x", "-12%").attr("y", "-18%")
+        .attr("width", "124%").attr("height", "136%");
+    softShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 3)
+        .attr("stdDeviation", 6)
+        .attr("flood-color", "#5483B1")
+        .attr("flood-opacity", 0.18);
+
+    svg.append("rect")
+        .attr("class", "spline02-page-background")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "#E3F3FF");
+
+    const cardMargin = 14;
+    svg.append("rect")
+        .attr("class", "spline02-outer-card")
+        .attr("x", cardMargin)
+        .attr("y", cardMargin)
+        .attr("width", width - cardMargin * 2)
+        .attr("height", height - cardMargin * 2)
+        .attr("rx", 16)
+        .attr("ry", 16)
+        .attr("fill", "url(#spline02-bg-gradient)")
+        .attr("stroke", "#B7D5EA")
+        .attr("stroke-width", 1)
+        .style("filter", "url(#spline02-card-shadow)");
+
+    const plot = {
+        x: 66,
+        y: 83,
+        width: 530,
+        height: 446
+    };
+    const right = {
+        x: 628,
+        y: 68,
+        width: 318,
+        height: 466
+    };
+
+    const xPad = Math.max(1, (xExtent[1].getTime() - xExtent[0].getTime()) * 0.03);
+    const xScale = d3.scaleUtc()
+        .domain([new Date(xExtent[0].getTime() - xPad), new Date(xExtent[1].getTime() + xPad)])
+        .range([0, plot.width]);
+    const yScale = d3.scaleLinear()
+        .domain([0, niceTop])
+        .range([plot.height, 0]);
+
+    const titleText = String(metadata.title || "Internet Speeds in Canada");
+    const mainTitle = titleText.toLowerCase().includes("internet") && titleText.toLowerCase().includes("canada")
+        ? ["INTERNET SPEEDS", "IN CANADA"]
+        : wrapTitleLines(titleText, 21, 3);
+    const kicker = metadata.main_insight
+        ? String(metadata.main_insight).replace(/\.$/, "")
+        : "Broadband subsidies boost";
+
+    const friendlyYField = String(yField || "").replace(/([a-z])([A-Z])/g, "$1 $2");
+    const inferredUnit = yUnit || (/speed/i.test(friendlyYField) ? "Mbps" : "");
+    const measureLabel = inferredUnit ? `${friendlyYField} (${inferredUnit})` : friendlyYField;
+    const measure = svg.append("g")
+        .attr("class", "spline02-measure-label")
+        .attr("data-role", "measure-label")
+        .attr("transform", `translate(28, 48)`);
+    measure.append("circle")
+        .attr("class", "reserved-asset-slot measure-icon-slot")
+        .attr("data-asset-slot", "spline02-measure-icon")
+        .attr("data-asset-source-policy", "neutral_placeholder")
+        .attr("data-anchor", "outer-card-top-left")
+        .attr("data-collision-rule", "avoid measure label and plot y-axis labels")
+        .attr("cx", 18)
+        .attr("cy", 0)
+        .attr("r", 16)
+        .attr("fill", "#0878A6")
+        .attr("stroke", "#0E4D79")
+        .attr("stroke-width", 1.2);
+    measure.append("circle")
+        .attr("class", "neutral-asset-placeholder")
+        .attr("cx", 18)
+        .attr("cy", 0)
+        .attr("r", 7)
+        .attr("fill", "none")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 2);
+    addText(measure, { x: 50, y: 5, "class": "spline02-measure-text" }, {
+        "font-family": titleFamily,
+        "font-size": "16px",
+        "font-weight": 800,
+        "fill": "#071B43"
+    }, measureLabel);
+
+    const chart = svg.append("g")
+        .attr("class", "spline02-plot")
+        .attr("data-x-field", xField)
+        .attr("data-y-field", yField)
+        .attr("data-group-field", groupField)
+        .attr("transform", `translate(${plot.x}, ${plot.y})`);
+
+    chart.append("rect")
+        .attr("class", "plot-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", plot.width)
+        .attr("height", plot.height)
+        .attr("rx", 13)
+        .attr("ry", 13)
+        .attr("fill", "url(#spline02-plot-gradient)")
+        .attr("stroke", "#A9CFEB")
+        .attr("stroke-width", 1);
+
+    const yTicks = yScale.ticks(5);
+    yTicks.forEach(tick => {
+        chart.append("line")
+            .attr("class", "gridline y-gridline")
+            .attr("x1", 0)
+            .attr("x2", plot.width)
+            .attr("y1", yScale(tick))
+            .attr("y2", yScale(tick))
+            .attr("stroke", "#BBDDF2")
+            .attr("stroke-dasharray", "3 4")
+            .attr("stroke-width", 1);
+        addText(chart, { x: -22, y: yScale(tick) + 5, "text-anchor": "end", "class": "axis-tick y-axis-tick" }, {
+            "font-family": labelFamily,
+            "font-size": `${Math.max(12, baseLabelSize + 2)}px`,
+            "font-weight": 600,
+            "fill": "#071B43"
+        }, formatNumber(tick));
+    });
+
+    const xTickValues = Array.from(new Set(rows.map(d => d.__time)))
+        .sort((a, b) => a - b)
+        .map(time => new Date(time));
+    const xTicks = xTickValues.length <= 8 ? xTickValues : xScale.ticks(7);
+    xTicks.forEach(tick => {
+        chart.append("line")
+            .attr("class", "gridline x-gridline")
+            .attr("x1", xScale(tick))
+            .attr("x2", xScale(tick))
+            .attr("y1", 0)
+            .attr("y2", plot.height)
+            .attr("stroke", "#BBDDF2")
+            .attr("stroke-dasharray", "3 4")
+            .attr("stroke-width", 1);
+        addText(chart, { x: xScale(tick), y: plot.height + 22, "text-anchor": "middle", "class": "axis-tick x-axis-tick" }, {
+            "font-family": labelFamily,
+            "font-size": `${Math.max(11, baseLabelSize + 1)}px`,
+            "font-weight": 600,
+            "fill": "#071B43"
+        }, d3.utcFormat("%Y")(tick));
+    });
+
+    const slotBaseX = plot.width * 0.065;
+    const slotBaseY = plot.height * 0.055;
+    let slotW = Math.min(226, plot.width * 0.48);
+    let slotH = Math.min(214, plot.height * 0.48);
+    function slotCollisionPenalty(candidate) {
+        const pad = candidate.compact ? 8 : 14;
+        let score = rows.reduce((currentScore, point) => {
+            const px = xScale(point.__date);
+            const py = yScale(point.__value);
+            const inside = px >= candidate.x - pad
+                && px <= candidate.x + candidate.w + pad
+                && py >= candidate.y - pad
+                && py <= candidate.y + candidate.h + pad;
+            return currentScore + (inside ? 120 : 0);
+        }, 0);
+        groups.forEach(series => {
+            for (let i = 1; i < series.values.length; i += 1) {
+                const a = series.values[i - 1];
+                const b = series.values[i];
+                for (let step = 0; step <= 24; step += 1) {
+                    const t = step / 24;
+                    const px = xScale(a.__date) * (1 - t) + xScale(b.__date) * t;
+                    const py = yScale(a.__value) * (1 - t) + yScale(b.__value) * t;
+                    const insideCore = px >= candidate.x
+                        && px <= candidate.x + candidate.w
+                        && py >= candidate.y
+                        && py <= candidate.y + candidate.h;
+                    if (px >= candidate.x - pad
+                        && px <= candidate.x + candidate.w + pad
+                        && py >= candidate.y - pad
+                        && py <= candidate.y + candidate.h + pad) {
+                        score += insideCore ? 90 : 36;
+                    }
+                }
+            }
+            const endpointX = xScale(series.last.__date);
+            const endpointY = yScale(series.latestValue);
+            if (endpointX >= candidate.x - pad
+                && endpointX <= candidate.x + candidate.w + pad
+                && endpointY >= candidate.y - pad
+                && endpointY <= candidate.y + candidate.h + pad) {
+                score += 180;
+            }
+        });
+        return score;
+    }
+
+    function normalizeSlotCandidate(candidate) {
+        const safePad = 12;
+        const xMax = Math.max(safePad, Math.min(plot.width * 0.58, plot.width - candidate.w - safePad));
+        const yMax = Math.max(safePad, plot.height - candidate.h - 42);
+        const x = Math.max(safePad, Math.min(candidate.x, xMax));
+        const y = Math.max(safePad, Math.min(candidate.y, yMax));
+        const collision = slotCollisionPenalty({ ...candidate, x, y });
+        const drift = Math.abs(x - slotBaseX) / plot.width + Math.abs(y - slotBaseY) / plot.height;
+        const compactPenalty = candidate.compact ? 4 : 0;
+        const microPenalty = candidate.micro ? 9 : 0;
+        return {
+            ...candidate,
+            x,
+            y,
+            collision,
+            score: collision * 1000 + drift * 30 + compactPenalty + microPenalty
+        };
+    }
+
+    const mediumW = Math.min(184, plot.width * 0.34);
+    const mediumH = Math.min(112, plot.height * 0.23);
+    const compactW = Math.min(150, plot.width * 0.28);
+    const compactH = Math.min(58, plot.height * 0.13);
+    const microW = Math.min(112, plot.width * 0.22);
+    const microH = Math.min(38, plot.height * 0.09);
+    const slotCandidates = [
+        { x: slotBaseX, y: slotBaseY, w: slotW, h: slotH, variant: "reference-upper-left", compact: false },
+        { x: slotBaseX, y: slotBaseY, w: mediumW, h: mediumH, variant: "medium-upper-left", compact: true },
+        { x: slotBaseX + plot.width * 0.12, y: slotBaseY, w: mediumW, h: mediumH, variant: "medium-shifted-right", compact: true },
+        { x: slotBaseX, y: slotBaseY + plot.height * 0.15, w: mediumW, h: mediumH, variant: "medium-lowered", compact: true },
+        { x: slotBaseX + plot.width * 0.12, y: slotBaseY + plot.height * 0.15, w: mediumW, h: mediumH, variant: "medium-lowered-shifted", compact: true },
+        { x: slotBaseX, y: slotBaseY + plot.height * 0.28, w: compactW, h: compactH, variant: "compact-lower-left", compact: true },
+        { x: slotBaseX + plot.width * 0.14, y: slotBaseY + plot.height * 0.28, w: compactW, h: compactH, variant: "compact-lower-shifted", compact: true },
+        { x: slotBaseX + plot.width * 0.26, y: slotBaseY + plot.height * 0.12, w: compactW, h: compactH, variant: "compact-inner-upper", compact: true },
+        { x: slotBaseX + plot.width * 0.26, y: slotBaseY + plot.height * 0.28, w: compactW, h: compactH, variant: "compact-inner-lower", compact: true },
+        { x: slotBaseX, y: slotBaseY + plot.height * 0.42, w: microW, h: microH, variant: "micro-low-left", compact: true, micro: true },
+        { x: slotBaseX + plot.width * 0.18, y: slotBaseY + plot.height * 0.42, w: microW, h: microH, variant: "micro-low-shifted", compact: true, micro: true },
+        { x: slotBaseX + plot.width * 0.34, y: slotBaseY + plot.height * 0.22, w: microW, h: microH, variant: "micro-inner", compact: true, micro: true },
+        { x: slotBaseX, y: plot.height - microH - 54, w: microW, h: microH, variant: "micro-bottom-left", compact: true, micro: true },
+        { x: slotBaseX + plot.width * 0.18, y: plot.height - microH - 54, w: microW, h: microH, variant: "micro-bottom-shifted", compact: true, micro: true },
+        { x: slotBaseX + plot.width * 0.34, y: plot.height - microH - 54, w: microW, h: microH, variant: "micro-bottom-inner", compact: true, micro: true }
+    ].map(normalizeSlotCandidate);
+    let slotCandidate = slotCandidates.sort((a, b) => a.score - b.score || a.y - b.y || a.x - b.x)[0];
+    slotW = slotCandidate.w;
+    slotH = slotCandidate.h;
+    const slotX = slotCandidate.x;
+    const slotY = slotCandidate.y;
+    const slotIsCompact = slotCandidate.compact || slotCandidate.collision > 0;
+    const slotHasCollision = slotCandidate.collision > 0;
+    const slotVisualSuppressed = slotHasCollision;
+    const slot = chart.append("g")
+        .attr("class", "reserved-asset-slot spline02-plot-illustration-card")
+        .attr("data-asset-slot", "spline02-plot-illustration-card")
+        .attr("data-asset-source-policy", "image2_asset")
+        .attr("data-anchor", "plot-upper-left")
+        .attr("data-placement-variant", slotCandidate.variant || "base")
+        .attr("data-placeholder-text-policy", "suppressed-no-ellipsis")
+        .attr("data-visibility-policy", slotVisualSuppressed ? "semantic-only-no-visible-placeholder-after-collision" : "visible-neutral-placeholder")
+        .attr("data-collision-rule", "stay inside plot; avoid splines, endpoints, axes/ticks, and right cards; shrink/relocate/fade and suppress internals when no clear space exists")
+        .attr("data-collision-score", slotCandidate.collision)
+        .attr("transform", `translate(${slotX}, ${slotY})`);
+    slot.append("rect")
+        .attr("class", "asset-slot-bbox")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", slotW)
+        .attr("height", slotH)
+        .attr("rx", 18)
+        .attr("ry", 18)
+        .attr("fill", "#FFFFFF")
+        .attr("fill-opacity", slotVisualSuppressed ? 0 : (slotIsCompact ? 0.34 : 1))
+        .attr("stroke", "#C7DDF0")
+        .attr("stroke-opacity", slotVisualSuppressed ? 0 : (slotIsCompact ? 0.62 : 1))
+        .attr("stroke-width", 1)
+        .style("filter", "url(#spline02-soft-shadow)");
+    slot.append("rect")
+        .attr("class", "asset-slot-mask")
+        .attr("x", 12)
+        .attr("y", 16)
+        .attr("width", slotW - 24)
+        .attr("height", slotH * 0.50)
+        .attr("rx", 10)
+        .attr("fill", "#EAF6FE")
+        .attr("fill-opacity", slotVisualSuppressed ? 0 : (slotIsCompact ? 0.30 : 1))
+        .attr("stroke", "#D7E8F6")
+        .attr("stroke-opacity", slotVisualSuppressed ? 0 : (slotIsCompact ? 0.44 : 1))
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "5 5");
+    if (!slotVisualSuppressed) {
+        slot.append("circle")
+            .attr("class", "neutral-asset-placeholder")
+            .attr("cx", slotW * 0.50)
+            .attr("cy", slotIsCompact ? slotH * 0.50 : slotH * 0.31)
+            .attr("r", Math.min(slotW, slotH) * (slotIsCompact ? 0.14 : 0.15))
+            .attr("fill", "none")
+            .attr("stroke", "#1E74CF")
+            .attr("stroke-opacity", slotIsCompact ? 0.62 : 1)
+            .attr("stroke-width", 3)
+            .attr("stroke-dasharray", "6 5");
+    }
+
+    const line = d3.line()
+        .defined(d => Number.isFinite(d.__value))
+        .x(d => xScale(d.__date))
+        .y(d => yScale(d.__value))
+        .curve(d3.curveMonotoneX);
+
+    groups.slice().reverse().forEach(series => {
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "spline-line mark")
+            .attr("data-series", series.name)
+            .attr("fill", "none")
+            .attr("stroke", series.color)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("d", line);
+    });
+
+    groups.forEach(series => {
+        chart.append("circle")
+            .attr("class", "endpoint-dot mark")
+            .attr("data-series", series.name)
+            .attr("data-value", series.latestValue)
+            .attr("cx", xScale(series.last.__date))
+            .attr("cy", yScale(series.latestValue))
+            .attr("r", 4.5)
+            .attr("fill", series.color)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 1.4);
+    });
+
+    const rightGroup = svg.append("g")
+        .attr("class", "spline02-right-column")
+        .attr("transform", `translate(${right.x}, ${right.y})`);
+
+    rightGroup.append("line")
+        .attr("x1", 0)
+        .attr("x2", right.width)
+        .attr("y1", 0)
+        .attr("y2", 0)
+        .attr("stroke", "#1E74CF")
+        .attr("stroke-width", 1.2);
+    rightGroup.append("circle")
+        .attr("class", "reserved-asset-slot header-emblem-slot")
+        .attr("data-asset-slot", "spline02-header-emblem")
+        .attr("data-asset-source-policy", "neutral_placeholder")
+        .attr("data-anchor", "right-title-top-center")
+        .attr("data-collision-rule", "stay above title and below outer-card edge")
+        .attr("cx", right.width / 2)
+        .attr("cy", 0)
+        .attr("r", 13)
+        .attr("fill", "#F2FAFF")
+        .attr("stroke", "#1E74CF")
+        .attr("stroke-width", 1.2);
+
+    const titleFontSize = mainTitle.length <= 2 ? 34 : 24;
+    const titleLineStep = mainTitle.length <= 2 ? 52 : 30;
+    const titleStartY = mainTitle.length <= 2 ? 76 : 58;
+    mainTitle.forEach((lineText, index) => {
+        addText(rightGroup, { x: 0, y: 76 + index * 58, "class": "right-main-title" }, {
+            "font-family": titleFamily,
+            "font-size": `${titleFontSize}px`,
+            "font-weight": 900,
+            "fill": index === 0 ? "#08264C" : "#176EC8",
+            "letter-spacing": "0px"
+        }, lineText);
+    });
+
+    rightGroup.selectAll(".right-main-title")
+        .attr("y", (d, index) => titleStartY + index * titleLineStep);
+
+    const dividerY = titleStartY + (mainTitle.length - 1) * titleLineStep + (mainTitle.length <= 2 ? 48 : 32);
+    const kickerY = dividerY + 28;
+
+    rightGroup.append("line")
+        .attr("x1", 0)
+        .attr("x2", right.width)
+        .attr("y1", dividerY)
+        .attr("y2", dividerY)
+        .attr("stroke", "#1E74CF")
+        .attr("stroke-width", 1.1);
+
+    const kickerText = (titleText.toLowerCase().includes("broadband subsidies boost")
+        ? "Broadband subsidies boost"
+        : kicker).toUpperCase();
+    const visibleCardCount = Math.min(groups.length, 8);
+    let cardGap = visibleCardCount >= 6 ? 6 : 8;
+    let cardH = 42;
+    const rightBottom = height - right.y - 22;
+    const cardStackHeight = Math.max(0, visibleCardCount * cardH + Math.max(0, visibleCardCount - 1) * cardGap);
+    const maxKickerBottom = Math.max(kickerY + 18, rightBottom - cardStackHeight - 18);
+    const maxKickerLines = visibleCardCount <= 4
+        ? 3
+        : (maxKickerBottom - kickerY >= 30 ? 2 : 2);
+    const kickerMaxWidth = right.width - 34;
+    let kickerFont = kickerText.length > 42 ? 12 : 14;
+    let kickerTracking = kickerText.length > 42 ? 0.6 : 1.2;
+    let kickerLineHeight = kickerText.length > 42 ? 14 : 16;
+    while (kickerFont > 11) {
+        const tentativeLines = (() => {
+            const words = kickerText.split(/\s+/).filter(Boolean);
+            const lines = [];
+            let current = "";
+            words.forEach(word => {
+                const next = current ? `${current} ${word}` : word;
+                if (estimateTextWidth(next, kickerFont, kickerTracking) <= kickerMaxWidth || !current) {
+                    current = next;
+                } else {
+                    lines.push(current);
+                    current = word;
+                }
+            });
+            if (current) lines.push(current);
+            return lines;
+        })();
+        if (tentativeLines.length <= maxKickerLines) break;
+        kickerFont -= 1;
+        kickerTracking = Math.max(0.2, kickerTracking - 0.2);
+        kickerLineHeight = Math.max(13, kickerLineHeight - 1);
+    }
+    const kickerNode = addText(rightGroup, { x: right.width / 2, y: kickerY, "text-anchor": "middle", "class": "right-kicker" }, {
+        "font-family": titleFamily,
+        "font-size": `${kickerFont}px`,
+        "font-weight": 800,
+        "fill": "#6E7076",
+        "letter-spacing": `${kickerTracking}px`
+    }, "");
+    const kickerLines = wrapTextNoEllipsis(kickerNode, kickerText, kickerMaxWidth, kickerFont, kickerLineHeight, maxKickerLines, kickerTracking);
+    const cardY0 = kickerY + Math.max(1, kickerLines.length) * kickerLineHeight + 18;
+    const availableCardHeight = Math.max(0, rightBottom - cardY0);
+    if (visibleCardCount > 0) {
+        const fittedCardH = (availableCardHeight - Math.max(0, visibleCardCount - 1) * cardGap) / visibleCardCount;
+        if (Number.isFinite(fittedCardH) && fittedCardH < cardH) {
+            cardH = Math.max(30, fittedCardH);
+            const fittedGap = visibleCardCount > 1
+                ? (availableCardHeight - visibleCardCount * cardH) / (visibleCardCount - 1)
+                : cardGap;
+            cardGap = Math.max(4, Math.min(cardGap, fittedGap));
+        }
+    }
+
+    const chipW = 50;
+    const cardW = right.width;
+    groups.slice(0, 8).forEach((series, index) => {
+        const y = cardY0 + index * (cardH + cardGap);
+        const card = rightGroup.append("g")
+            .attr("class", "endpoint-value-card")
+            .attr("data-series", series.name)
+            .attr("data-value", series.latestValue)
+            .attr("data-relationship", "grid-aligned-centerline-to-endpoint-rank")
+            .attr("transform", `translate(0, ${y})`);
+        card.append("rect")
+            .attr("class", "endpoint-card-bg")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", cardW)
+            .attr("height", cardH)
+            .attr("rx", 8)
+            .attr("ry", 8)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#E7F0F6")
+            .attr("stroke-width", 1)
+            .style("filter", "url(#spline02-soft-shadow)");
+        card.append("rect")
+            .attr("class", "endpoint-value-chip")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", chipW)
+            .attr("height", cardH)
+            .attr("rx", 6)
+            .attr("ry", 6)
+            .attr("fill", series.color);
+        const valueText = d3.format(".0f")(series.latestValue);
+        const nominalValueFontSize = valueText.length <= 2 ? 22 : (valueText.length === 3 ? 20 : (valueText.length === 4 ? 17 : 14));
+        const valueFontSize = Math.min(nominalValueFontSize, Math.max(14, cardH * 0.52));
+        const cardTextY = Math.min(cardH - 8, cardH * 0.66);
+        addText(card, { x: chipW / 2, y: cardTextY, "text-anchor": "middle", "class": "endpoint-value" }, {
+            "font-family": titleFamily,
+            "font-size": `${valueFontSize}px`,
+            "font-weight": 900,
+            "fill": "#FFFFFF"
+        }, valueText);
+        const label = addText(card, { x: chipW + 14, y: cardTextY - 1, "class": "endpoint-label" }, {
+            "font-family": labelFamily,
+            "font-size": `${Math.max(10, Math.min(13, baseLabelSize - 1, cardH * 0.36))}px`,
+            "font-weight": 800,
+            "fill": "#071B43"
+        }, "");
+        wrapText(label, series.name, cardW - chipW - 64, 15, 1);
+
+        const miniX = cardW - 38;
+        const miniBaseline = cardH - 7;
+        const miniMaxH = Math.max(10, cardH - 18);
+        const recent = series.values.slice(-4);
+        const miniValues = recent.map(d => d.__value);
+        const miniMin = d3.min(miniValues);
+        const miniMax = d3.max(miniValues);
+        recent.forEach((point, barIndex) => {
+            const ratio = miniMax === miniMin ? 0.55 : (point.__value - miniMin) / (miniMax - miniMin);
+            const h = Math.min(miniMaxH, 5 + ratio * Math.max(8, miniMaxH - 5));
+            card.append("rect")
+                .attr("class", "endpoint-mini-bar mark")
+                .attr("data-series", series.name)
+                .attr("data-time", point.__time)
+                .attr("x", miniX + barIndex * 8)
+                .attr("y", miniBaseline - h)
+                .attr("width", 5)
+                .attr("height", h)
+                .attr("rx", 1)
+                .attr("fill", series.color)
+                .attr("opacity", 0.88);
+        });
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type26_spline_graph/spline_graph_plain_chart_03.js

@@ -0,0 +1,452 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Spline Graph",
+    "chart_name": "spline_graph_plain_chart_03",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 50], [-1000, 1000], [2, 2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "styled",
+    "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 && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const xField = (chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || dataColumns[0] || {}).name || chartUtils.schema.columnField(dataColumns, 0);
+    const yColumn = (chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || dataColumns[1] || {});
+    const yField = yColumn.name || chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = (chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || dataColumns[2] || {}).name || chartUtils.schema.columnField(dataColumns, 2);
+    const width = Math.max(520, Number(variables.width) || 640);
+    const height = Math.max(420, Number(variables.height) || 520);
+    const fontFamily = (typography.label && typography.label.font_family) || "Century Gothic, Arial, sans-serif";
+
+    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", "spline03-panel-shadow")
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 10)
+        .attr("stdDeviation", 12)
+        .attr("flood-color", "#12315f")
+        .attr("flood-opacity", 0.12);
+
+    const bgGrad = defs.append("linearGradient")
+        .attr("id", "spline03-panel-grad")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "100%");
+    bgGrad.append("stop").attr("offset", "0%").attr("stop-color", "#ffffff");
+    bgGrad.append("stop").attr("offset", "100%").attr("stop-color", "#f4f8ff");
+
+    function isTemporalFieldName(fieldName) {
+        return /(year|date|month|time|timestamp|quarter|season|period|week|day)/i.test(String(fieldName || ""));
+    }
+
+    function parseTemporal(value, fieldName) {
+        if (value instanceof Date && Number.isFinite(value.getTime())) return value;
+        if (typeof value === "number" && Number.isFinite(value)) {
+            if (value >= 1000 && value <= 9999) return new Date(Date.UTC(value, 0, 1));
+            if (isTemporalFieldName(fieldName) && value >= 1 && value <= 12) return new Date(Date.UTC(2000, Math.round(value) - 1, 1));
+            return new Date(value);
+        }
+        const text = String(value ?? "").trim();
+        const lower = text.toLowerCase();
+        const monthIndex = {jan:0,january:0,feb:1,february:1,mar:2,march:2,apr:3,april:3,may:4,jun:5,june:5,jul:6,july:6,aug:7,august:7,sep:8,sept:8,september:8,oct:9,october:9,nov:10,november:10,dec:11,december:11};
+        const seasonIndex = {winter:0,spring:1,summer:2,fall:3,autumn:3};
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), 0, 1));
+        match = lower.match(/^(\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3] || 1)));
+        match = lower.match(/^([a-z]+)(?:[\s,/-]+(\d{4}))?$/);
+        if (match && Object.prototype.hasOwnProperty.call(monthIndex, match[1])) return new Date(Date.UTC(match[2] ? Number(match[2]) : 2000, monthIndex[match[1]], 1));
+        if (match && Object.prototype.hasOwnProperty.call(seasonIndex, match[1])) return new Date(Date.UTC(match[2] ? Number(match[2]) : 2000, seasonIndex[match[1]] * 3, 1));
+        const parsed = new Date(text);
+        return Number.isFinite(parsed.getTime()) ? parsed : null;
+    }
+
+    function estimateTextWidth(text, fontSize) {
+        return String(text || "").split("").reduce((sum, ch) => {
+            if (/\s/.test(ch)) return sum + fontSize * 0.34;
+            if ("ilI.,'`".includes(ch)) return sum + fontSize * 0.32;
+            if ("mwMW".includes(ch)) return sum + fontSize * 0.9;
+            return sum + fontSize * 0.58;
+        }, 0);
+    }
+
+    function addWrappedText(parent, text, x, y, maxWidth, fontSize, lineHeight, maxLines, fill, weight) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (estimateTextWidth(next, fontSize) <= maxWidth || !current) {
+                current = next;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) visible[visible.length - 1] = visible[visible.length - 1].replace(/[,.!?;:]*$/, "") + "...";
+        const node = parent.append("text")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("font-family", fontFamily)
+            .attr("font-size", fontSize)
+            .attr("font-weight", weight || 400)
+            .attr("fill", fill);
+        visible.forEach((line, i) => {
+            node.append("tspan")
+                .attr("x", x)
+                .attr("dy", i === 0 ? 0 : lineHeight)
+                .text(line);
+        });
+        return node;
+    }
+
+    const firstSeen = new Map();
+    const rows = chartData.map((row, index) => {
+        const date = parseTemporal(row[xField], xField);
+        const value = Number(row[yField]);
+        const group = String(row[groupField] ?? `Series ${index + 1}`);
+        if (!firstSeen.has(group)) firstSeen.set(group, firstSeen.size);
+        return {
+            ...row,
+            __date: date,
+            __time: date ? date.getTime() : NaN,
+            __value: value,
+            __group: group,
+            __order: firstSeen.get(group)
+        };
+    }).filter(row => row.__date && Number.isFinite(row.__time) && Number.isFinite(row.__value));
+
+    if (!rows.length) return svg.node();
+
+    const groups = Array.from(d3.group(rows, d => d.__group), ([name, values]) => ({
+        name,
+        order: values[0].__order,
+        values: values.slice().sort((a, b) => a.__time - b.__time)
+    })).sort((a, b) => d3.ascending(a.order, b.order)).slice(0, 2);
+
+    groups.forEach((series, index) => {
+        const first = series.values[0].__value;
+        const extent = d3.extent(series.values, d => d.__value);
+        const denom = Math.max(1e-6, Math.max(Math.abs(extent[0] - first), Math.abs(extent[1] - first), Math.abs(extent[1] - extent[0])));
+        const sign = index === 0 ? 1 : -1;
+        const targetRange = index === 0 ? 3.35 : 3.0;
+        series.color = index === 0 ? "#3f9325" : "#8c58c7";
+        series.fill = index === 0 ? "#dff0d7" : "#efe4fb";
+        series.values = series.values.map(point => ({
+            ...point,
+            __plotValue: sign * ((point.__value - first) / denom) * targetRange
+        }));
+        series.last = series.values[series.values.length - 1];
+        series.focus = index === 0
+            ? series.values.reduce((best, point) => point.__plotValue > best.__plotValue ? point : best, series.values[0])
+            : series.last;
+    });
+
+    const allTimes = rows.map(d => d.__time);
+    const panel = { x: width * 0.035, y: height * 0.028, w: width * 0.93, h: height * 0.91 };
+    const plot = {
+        x: panel.x + Math.max(58, width * 0.095),
+        y: panel.y + Math.max(38, height * 0.078),
+        w: panel.w - Math.max(86, width * 0.15),
+        h: panel.h - Math.max(68, height * 0.13)
+    };
+    const cardW = Math.min(Math.max(150, width * 0.27), 190);
+    const cardH = Math.min(Math.max(74, height * 0.14), 88);
+    const cardX = panel.x + panel.w - cardW - Math.max(10, width * 0.018);
+    plot.w = Math.max(260, panel.x + panel.w - plot.x - Math.max(34, width * 0.058));
+
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(allTimes).map(t => new Date(t)))
+        .range([plot.x, plot.x + plot.w]);
+    const yScale = d3.scaleLinear()
+        .domain([-5, 5])
+        .range([plot.y + plot.h, plot.y]);
+    const yearFormat = d3.timeFormat("%Y");
+    const candidateTickTimes = Array.from(new Set(rows.map(d => d.__time))).sort((a, b) => a - b);
+    const maxTickCount = Math.max(4, Math.min(8, Math.floor(plot.w / 58)));
+    const sampledTickTimes = candidateTickTimes.filter((_, i, arr) => arr.length <= maxTickCount || i % Math.ceil(arr.length / maxTickCount) === 0 || i === arr.length - 1);
+    const minTickGap = 34;
+    const xTickValues = [];
+    sampledTickTimes.forEach((time, index) => {
+        const isLast = index === sampledTickTimes.length - 1;
+        if (!xTickValues.length) {
+            xTickValues.push(time);
+            return;
+        }
+        const previous = xTickValues[xTickValues.length - 1];
+        if (Math.abs(xScale(new Date(time)) - xScale(new Date(previous))) >= minTickGap) {
+            xTickValues.push(time);
+        } else if (isLast) {
+            xTickValues[xTickValues.length - 1] = time;
+        }
+    });
+    const xTickDates = xTickValues.map(t => new Date(t));
+
+    svg.append("rect")
+        .attr("class", "spline03-chart-panel")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.w)
+        .attr("height", panel.h)
+        .attr("rx", Math.min(22, width * 0.035))
+        .attr("fill", "url(#spline03-panel-grad)")
+        .attr("stroke", "#d7e1ef")
+        .attr("filter", "url(#spline03-panel-shadow)");
+
+    const chart = svg.append("g").attr("class", "spline03-chart-body");
+    const yTicks = d3.range(-5, 6, 1);
+    yTicks.forEach(tick => {
+        chart.append("line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.w)
+            .attr("y1", yScale(tick))
+            .attr("y2", yScale(tick))
+            .attr("stroke", tick === 0 ? "#8793aa" : "#dce4ee")
+            .attr("stroke-width", tick === 0 ? 1.2 : 0.8)
+            .attr("stroke-dasharray", tick === 0 ? "7 7" : "4 6");
+        chart.append("text")
+            .attr("x", plot.x - 12)
+            .attr("y", yScale(tick) + 4)
+            .attr("text-anchor", "end")
+            .attr("font-family", fontFamily)
+            .attr("font-size", tick === 0 ? 15 : 12)
+            .attr("font-weight", tick === 0 ? 700 : 400)
+            .attr("fill", tick === 0 ? "#26324f" : "#3f4a62")
+            .text(`${tick}%`);
+    });
+    chart.append("line").attr("x1", plot.x).attr("x2", plot.x).attr("y1", plot.y).attr("y2", plot.y + plot.h).attr("stroke", "#aeb8c9");
+    chart.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", "#aeb8c9");
+    xTickDates.forEach(tick => {
+        chart.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", plot.y + plot.h + 24)
+            .attr("text-anchor", "middle")
+            .attr("font-family", fontFamily)
+            .attr("font-size", 12)
+            .attr("fill", "#26324f")
+            .text(yearFormat(tick));
+    });
+
+    chart.append("text")
+        .attr("x", panel.x + 18)
+        .attr("y", plot.y + plot.h / 2)
+        .attr("transform", `rotate(-90 ${panel.x + 18} ${plot.y + plot.h / 2})`)
+        .attr("text-anchor", "middle")
+        .attr("font-family", fontFamily)
+        .attr("font-size", 12)
+        .attr("font-weight", 700)
+        .attr("fill", "#173c79")
+        .text(`${String(yField).toUpperCase()} DIFFERENCE`);
+    const line = d3.line()
+        .x(d => xScale(d.__date))
+        .y(d => yScale(d.__plotValue))
+        .curve(d3.curveMonotoneX);
+    const area = d3.area()
+        .x(d => xScale(d.__date))
+        .y0(yScale(0))
+        .y1(d => yScale(d.__plotValue))
+        .curve(d3.curveMonotoneX);
+
+    groups.forEach((series, index) => {
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", `spline03-area spline03-series-${index}`)
+            .attr("fill", series.fill)
+            .attr("opacity", 0.58)
+            .attr("d", area);
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", `spline03-line spline03-series-${index}`)
+            .attr("fill", "none")
+            .attr("stroke", series.color)
+            .attr("stroke-width", 3.2)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("d", line);
+        chart.selectAll(`.spline03-dot-${index}`)
+            .data(series.values)
+            .enter()
+            .append("circle")
+            .attr("class", `spline03-dot spline03-dot-${index}`)
+            .attr("cx", d => xScale(d.__date))
+            .attr("cy", d => yScale(d.__plotValue))
+            .attr("r", d => d === series.focus || d === series.last ? 5.4 : 3.6)
+            .attr("fill", "#ffffff")
+            .attr("stroke", series.color)
+            .attr("stroke-width", d => d === series.focus || d === series.last ? 3 : 2);
+    });
+
+    if (candidateTickTimes.length > 2) {
+        const markerDate = new Date(candidateTickTimes[1]);
+        const mx = xScale(markerDate);
+        chart.append("line")
+            .attr("class", "spline03-baseline-marker")
+            .attr("x1", mx)
+            .attr("x2", mx)
+            .attr("y1", yScale(0) - 2)
+            .attr("y2", yScale(2.05))
+            .attr("stroke", "#f28a23")
+            .attr("stroke-dasharray", "4 4");
+        chart.append("circle").attr("cx", mx).attr("cy", yScale(0)).attr("r", 6).attr("fill", "#ffffff").attr("stroke", "#f28a23").attr("stroke-width", 3);
+        chart.append("text")
+            .attr("x", mx)
+            .attr("y", yScale(0) + 22)
+            .attr("text-anchor", "middle")
+            .attr("font-family", fontFamily)
+            .attr("font-size", 13)
+            .attr("font-weight", 700)
+            .attr("fill", "#f28a23")
+            .text(yearFormat(markerDate));
+    }
+
+    function calloutText(series, index) {
+        const trend = series.last.__value - series.values[0].__value;
+        if (index === 0) return trend < 0 ? "underperforming since peak." : "outperforming since baseline.";
+        return trend >= 0 ? "outperforming with momentum." : "underperforming recently.";
+    }
+
+    const placedCallouts = [];
+    function rectIntersects(a, b, gap) {
+        const pad = gap || 0;
+        return !(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);
+    }
+
+    function rectContainsPoint(rect, point, pad) {
+        const p = pad || 0;
+        return point.x >= rect.x - p && point.x <= rect.x + rect.w + p && point.y >= rect.y - p && point.y <= rect.y + rect.h + p;
+    }
+
+    function chooseCalloutY(series, index, sx, sy) {
+        const minY = panel.y + 14;
+        const maxY = panel.y + panel.h - cardH - 14;
+        const clampY = value => Math.max(minY, Math.min(maxY, value));
+        const points = groups.flatMap(group => group.values.map(point => ({
+            x: xScale(point.__date),
+            y: yScale(point.__plotValue)
+        })));
+        const preferred = index === 0
+            ? [plot.y + plot.h * 0.24, sy - cardH * 0.45, sy + 18, plot.y + plot.h * 0.12]
+            : [Math.max(plot.y + plot.h * 0.73, sy + 18), plot.y + plot.h * 0.79, maxY, sy - cardH - 22];
+        const candidates = Array.from(new Set(preferred.map(value => Math.round(clampY(value) * 10) / 10)));
+
+        function score(y) {
+            const rect = { x: cardX, y, w: cardW, h: cardH };
+            let penalty = Math.abs(y - clampY(preferred[0]));
+            points.forEach(point => {
+                if (rectContainsPoint(rect, point, 9)) penalty += 1000;
+            });
+            if (rectContainsPoint(rect, { x: sx, y: sy }, 14)) penalty += 2500;
+            placedCallouts.forEach(other => {
+                if (rectIntersects(rect, other, 10)) penalty += 1800;
+            });
+            if (index === 1 && y < sy + 12) penalty += 900;
+            return penalty;
+        }
+
+        return candidates.sort((a, b) => score(a) - score(b))[0];
+    }
+
+    function addCallout(series, index) {
+        const target = series.focus || series.last;
+        const cardFill = index === 0 ? "#edf8e9" : "#f5ecff";
+        const sx = xScale(target.__date);
+        const sy = yScale(target.__plotValue);
+        const boundedY = chooseCalloutY(series, index, sx, sy);
+        const ex = cardX - 8;
+        const ey = boundedY + cardH / 2;
+        chart.append("path")
+            .attr("class", "spline03-callout-leader")
+            .attr("d", `M${sx},${sy} C${sx + 22},${sy} ${ex - 30},${ey} ${ex},${ey}`)
+            .attr("fill", "none")
+            .attr("stroke", series.color)
+            .attr("stroke-width", 1.4)
+            .attr("stroke-dasharray", "5 5")
+            .attr("opacity", 0.75);
+        const card = chart.append("g")
+            .attr("class", `spline03-callout-card spline03-callout-${index}`)
+            .attr("data-anchor-x", sx.toFixed(1))
+            .attr("data-anchor-y", sy.toFixed(1))
+            .attr("data-collision-rule", "right-floating-card-clamped-inside-panel-avoid-endpoints-marks-axis-and-sibling-callouts")
+            .attr("transform", `translate(${cardX}, ${boundedY})`);
+        placedCallouts.push({ x: cardX, y: boundedY, w: cardW, h: cardH });
+        card.append("rect")
+            .attr("width", cardW)
+            .attr("height", cardH)
+            .attr("rx", 16)
+            .attr("fill", cardFill)
+            .attr("stroke", series.color)
+            .attr("stroke-opacity", 0.3);
+        card.append("circle")
+            .attr("class", "reserved-asset-slot spline03-callout-icon-slot")
+            .attr("data-asset-slot", index === 0 ? "spline03-callout-icon-primary" : "spline03-callout-icon-secondary")
+            .attr("data-asset-source-policy", "image2_asset")
+            .attr("data-anchor", "callout-card-left")
+            .attr("data-collision-rule", "inside-callout-card-avoid-text")
+            .attr("cx", 26)
+            .attr("cy", cardH / 2)
+            .attr("r", Math.min(22, cardH * 0.32))
+            .attr("fill", "#ffffff")
+            .attr("stroke", series.color)
+            .attr("stroke-opacity", 0.25);
+        card.append("circle").attr("cx", 26).attr("cy", cardH / 2).attr("r", 7).attr("fill", series.color).attr("opacity", 0.78);
+        const labelText = series.name.toUpperCase();
+        const labelMaxWidth = cardW - 62;
+        const labelNode = card.append("text")
+            .attr("x", 54)
+            .attr("y", 25)
+            .attr("font-family", fontFamily)
+            .attr("font-size", 15)
+            .attr("font-weight", 800)
+            .attr("fill", series.color)
+            .text(labelText);
+        if (estimateTextWidth(labelText, 15) > labelMaxWidth) {
+            labelNode
+                .attr("textLength", labelMaxWidth)
+                .attr("lengthAdjust", "spacingAndGlyphs");
+        }
+        addWrappedText(card, calloutText(series, index), 54, 43, cardW - 62, 11, 13, 3, "#28344f", 400);
+    }
+    groups.forEach(addCallout);
+
+    return svg.node();
+}