Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type31_small_multiples_of_stepped_line_graphs/small_multiple_step_line_graph_icons_01.js

@@ -0,0 +1,384 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Small Multiple Step Line Graph",
+    "chart_name": "small_multiple_step_line_graph_icons_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], ["-inf", "inf"], [2, 6]],
+    "required_fields_icons": ["group"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, dataJSON) {
+    const jsonData = dataJSON || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const dataBlock = jsonData.data || {};
+    const sourceRows = dataBlock.data || [];
+    const columns = dataBlock.columns || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+
+    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 groupColumn = chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const groupField = groupColumn.name;
+    const yUnit = yColumn.unit === "none" ? "" : (yColumn.unit || "");
+
+    const width = Math.max(560, Number(variables.width) || 800);
+    const baseHeight = Math.max(420, Number(variables.height) || 560);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const annotationFamily = typography.annotation?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#64748b";
+    const gridColor = "rgba(100, 116, 139, 0.22)";
+    const palette = sourceColors.available_colors?.length
+        ? sourceColors.available_colors
+        : ["#2563eb", "#f97316", "#10b981", "#8b5cf6", "#ef4444", "#0f766e"];
+    const labelSize = Math.max(8.5, Math.min(11, parseFloat(typography.label?.font_size) || 10));
+    const valueSize = Math.max(8, Math.min(10, parseFloat(typography.annotation?.font_size) || 9));
+    const labelWeight = typography.label?.font_weight || "700";
+    const valueWeight = typography.annotation?.font_weight || "650";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .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", "small-multiple-step-line-graph");
+
+    function message(text) {
+        svg.attr("height", baseHeight).attr("viewBox", `0 0 ${width} ${baseHeight}`);
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", baseHeight / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(text);
+        return svg.node();
+    }
+
+    if (!xField || !yField || !groupField) return message("Missing small multiple step line fields");
+
+    function readableLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function parseDateLocal(value) {
+        if (value instanceof Date) return value;
+        if (typeof value === "number" && Number.isFinite(value)) return new Date(value, 0, 1);
+        const text = String(value ?? "").trim();
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return new Date(Number(match[1]), 0, 1);
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3] || 1));
+        match = text.match(/^Q([1-4])\s+(-?\d{4})$/i);
+        if (match) return new Date(Number(match[2]), (Number(match[1]) - 1) * 3, 1);
+        match = text.match(/^(-?\d{4})\s+Q([1-4])$/i);
+        if (match) return new Date(Number(match[1]), (Number(match[2]) - 1) * 3, 1);
+        const parsed = new Date(text);
+        return Number.isFinite(parsed.getTime()) ? parsed : null;
+    }
+
+    function compactNumber(value) {
+        const numeric = Number(value);
+        const abs = Math.abs(numeric);
+        if (abs >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatLocalValue(value, unit = "") {
+        const numeric = Number(value);
+        const formatted = compactNumber(numeric);
+        if (!unit) return formatted;
+        if (unit === "%") return `${formatted}%`;
+        if (unit.startsWith("$")) {
+            const sign = numeric < 0 ? "-" : "";
+            return `${sign}$${compactNumber(Math.abs(numeric))}${unit.slice(1)}`;
+        }
+        if (unit.length <= 3 && /^[^A-Za-z0-9]+$/.test(unit)) return `${unit}${formatted}`;
+        return `${formatted} ${unit}`;
+    }
+
+    function truncateText(text, maxChars) {
+        if (text.length <= maxChars) return text;
+        return `${text.slice(0, Math.max(1, maxChars - 3)).trim()}...`;
+    }
+
+    const rows = sourceRows.map((row, index) => {
+        const date = chartUtils.format.parseDate(row[xField]);
+        const value = Number(row[yField]);
+        const group = readableLabel(row[groupField]);
+        if (!date || !Number.isFinite(date.getTime()) || !Number.isFinite(value) || !group) return null;
+        return {
+            rawX: row[xField],
+            date,
+            value,
+            group,
+            rawGroup: row[groupField],
+            index
+        };
+    }).filter(Boolean);
+    if (!rows.length) return message("No valid data for small multiple step lines");
+
+    const groupMap = d3.group(rows, d => d.group);
+    const groups = Array.from(groupMap, ([group, values]) => {
+        values.sort((a, b) => d3.ascending(a.date, b.date) || d3.ascending(a.index, b.index));
+        return {
+            group,
+            values,
+            firstIndex: d3.min(values, d => d.index),
+            lastValue: values[values.length - 1]?.value ?? 0
+        };
+    }).sort((a, b) => d3.descending(a.lastValue, b.lastValue) || d3.ascending(a.firstIndex, b.firstIndex));
+
+    const cols = groups.length === 1 ? 1 : 2;
+    const panelRows = Math.ceil(groups.length / cols);
+    const outer = { top: 34, right: 28, bottom: 52, left: 42 };
+    const gapX = 42;
+    const gapY = 44;
+    const minPanelHeight = groups.length <= 2 ? 220 : 150;
+    const height = Math.max(420, outer.top + outer.bottom + panelRows * minPanelHeight + (panelRows - 1) * gapY);
+    svg.attr("height", height).attr("viewBox", `0 0 ${width} ${height}`);
+
+    const panelWidth = (width - outer.left - outer.right - gapX * (cols - 1)) / cols;
+    const panelHeight = (height - outer.top - outer.bottom - gapY * (panelRows - 1)) / panelRows;
+    const inner = { top: 24, right: 16, bottom: 30, left: 42 };
+    const innerWidth = Math.max(120, panelWidth - inner.left - inner.right);
+    const innerHeight = Math.max(80, panelHeight - inner.top - inner.bottom);
+
+    const xExtent = d3.extent(rows, d => d.date);
+    const xScaleBase = d3.scaleTime()
+        .domain(xExtent[0].getTime() === xExtent[1].getTime()
+            ? [d3.timeYear.offset(xExtent[0], -1), d3.timeYear.offset(xExtent[1], 1)]
+            : xExtent)
+        .range([0, innerWidth]);
+
+    const spanDays = (xScaleBase.domain()[1] - xScaleBase.domain()[0]) / 86400000;
+    const xTicks = spanDays > 365 * 10
+        ? xScaleBase.ticks(d3.timeYear.every(5))
+        : (spanDays > 365 * 4 ? xScaleBase.ticks(d3.timeYear.every(2)) : xScaleBase.ticks(Math.min(4, Math.max(2, Math.floor(innerWidth / 80)))));
+    const xFormat = spanDays > 365 * 2 ? d3.timeFormat("%Y") : d3.timeFormat("%b %Y");
+
+    const colorFor = (group, index) => sourceColors.field?.[group]
+        || sourceColors.field?.[groups[index]?.values[0]?.rawGroup]
+        || palette[index % palette.length];
+
+    groups.forEach((entry, index) => {
+        const row = Math.floor(index / cols);
+        const col = index % cols;
+        const panelX = outer.left + col * (panelWidth + gapX);
+        const panelY = outer.top + row * (panelHeight + gapY);
+        const color = colorFor(entry.group, index);
+
+        const panel = svg.append("g")
+            .attr("class", "small-multiple-panel")
+            .attr("data-group", entry.group)
+            .attr("transform", `translate(${panelX}, ${panelY})`);
+
+        panel.append("rect")
+            .attr("class", "panel-background")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", panelWidth)
+            .attr("height", panelHeight)
+            .attr("rx", 4)
+            .attr("fill", "rgba(255, 255, 255, 0.20)")
+            .attr("stroke", "rgba(100, 116, 139, 0.18)");
+
+        panel.append("text")
+            .attr("class", "panel-title")
+            .attr("x", inner.left)
+            .attr("y", 14)
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${labelSize}px`)
+            .style("font-weight", labelWeight)
+            .text(truncateText(entry.group, Math.max(16, Math.floor(panelWidth / 8))));
+
+        const g = panel.append("g")
+            .attr("class", "panel-plot")
+            .attr("transform", `translate(${inner.left}, ${inner.top})`);
+
+        const minY = d3.min(entry.values, d => d.value) ?? 0;
+        const maxY = d3.max(entry.values, d => d.value) ?? 0;
+        const spanY = Math.max(1, maxY - minY);
+        const yScale = d3.scaleLinear()
+            .domain([Math.min(0, minY - spanY * 0.12), maxY + spanY * 0.12])
+            .nice(3)
+            .range([innerHeight, 0]);
+
+        const yTicks = yScale.ticks(3);
+        yTicks.forEach(tick => {
+            const y = yScale(tick);
+            g.append("line")
+                .attr("class", "gridline y-axis-gridline")
+                .attr("x1", 0)
+                .attr("x2", innerWidth)
+                .attr("y1", y)
+                .attr("y2", y)
+                .attr("stroke", gridColor);
+            g.append("text")
+                .attr("class", "y-axis-tick")
+                .attr("x", -6)
+                .attr("y", y)
+                .attr("text-anchor", "end")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", mutedText)
+                .style("font-family", annotationFamily)
+                .style("font-size", `${valueSize}px`)
+                .style("font-weight", valueWeight)
+                .text(formatLocalValue(tick, yUnit));
+        });
+
+        xTicks.forEach(tick => {
+            const x = xScaleBase(tick);
+            g.append("line")
+                .attr("class", "gridline x-axis-gridline")
+                .attr("x1", x)
+                .attr("x2", x)
+                .attr("y1", 0)
+                .attr("y2", innerHeight)
+                .attr("stroke", gridColor);
+            g.append("text")
+                .attr("class", "x-axis-tick")
+                .attr("x", x)
+                .attr("y", innerHeight + 18)
+                .attr("text-anchor", "middle")
+                .attr("fill", mutedText)
+                .style("font-family", annotationFamily)
+                .style("font-size", `${Math.max(7.5, valueSize - 1)}px`)
+                .style("font-weight", valueWeight)
+                .text(xFormat(tick));
+        });
+
+        g.append("line")
+            .attr("class", "axis-line x-axis-line")
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", innerHeight)
+            .attr("y2", innerHeight)
+            .attr("stroke", "rgba(71, 85, 105, 0.50)");
+        g.append("line")
+            .attr("class", "axis-line y-axis-line")
+            .attr("x1", 0)
+            .attr("x2", 0)
+            .attr("y1", 0)
+            .attr("y2", innerHeight)
+            .attr("stroke", "rgba(71, 85, 105, 0.50)");
+
+        const line = d3.line()
+            .x(d => xScaleBase(d.date))
+            .y(d => yScale(d.value))
+            .curve(d3.curveStepAfter);
+
+        g.append("path")
+            .datum(entry.values)
+            .attr("class", "step-line")
+            .attr("data-group", entry.group)
+            .attr("d", line)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 2.4)
+            .attr("stroke-linejoin", "round")
+            .attr("stroke-linecap", "round");
+
+        entry.values.forEach(point => {
+            g.append("circle")
+                .attr("class", "data-point")
+                .attr("data-group", entry.group)
+                .attr("data-x", String(point.rawX))
+                .attr("data-value", point.value)
+                .attr("cx", xScaleBase(point.date))
+                .attr("cy", yScale(point.value))
+                .attr("r", 2.7)
+                .attr("fill", color)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 0.8);
+        });
+
+        const last = entry.values[entry.values.length - 1];
+        const labelX = Math.min(innerWidth - 2, xScaleBase(last.date) + 4);
+        const labelY = Math.max(valueSize, Math.min(innerHeight - 2, yScale(last.value) - 5));
+        g.append("text")
+            .attr("class", "endpoint-label value-label")
+            .attr("data-group", entry.group)
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", "end")
+            .attr("fill", textColor)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${valueSize}px`)
+            .style("font-weight", valueWeight)
+            .text(formatLocalValue(last.value, yUnit));
+    });
+
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", width / 2)
+        .attr("y", height - 28)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, valueSize)}px`)
+        .text(`${readableLabel(yColumn.label || yField)} uses local panel y-scales; x-axis is chronological`);
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", width / 2)
+        .attr("y", height - 12)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(7.5, valueSize - 1)}px`)
+        .text(`${readableLabel(groupColumn.label || groupField)} panels ordered by latest value; group icons removed`);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type31_small_multiples_of_stepped_line_graphs/small_multiple_step_line_graph_plain_chart_01.js

@@ -0,0 +1,516 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Small Multiple Stepped Line Graph",
+    "chart_name": "small_multiple_step_line_graph_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], ["-inf", "inf"], [2, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = jsonData.data?.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 || {};
+    const sourceColors = jsonData.colors || {};
+    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 groupColumn = chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const groupField = groupColumn.name;
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    const width = Number(variables.width) || 600;
+    const height = Number(variables.height) || 600;
+    const labelTypography = typography.label || {};
+    const titleTypography = typography.title || labelTypography;
+    const valueTypography = typography.annotation || labelTypography;
+    const fontFamily = labelTypography.font_family || titleTypography.font_family || "Arial, sans-serif";
+    const titleFamily = titleTypography.font_family || fontFamily;
+    const valueFamily = valueTypography.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#64748b";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 11;
+    const baseTitleSize = parseFloat(titleTypography.font_size) || 13;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 10.5;
+    const labelWeight = labelTypography.font_weight || "500";
+    const titleWeight = titleTypography.font_weight || "700";
+    const valueWeight = valueTypography.font_weight || "650";
+
+    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", "small-multiple-step-line-chart-root");
+
+    if (!xField || !yField || !groupField) {
+        svg.append("text")
+            .attr("class", "chart-message")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Missing stepped-line fields");
+        return svg.node();
+    }
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    function readableLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    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));
+        }
+
+        const parsed = new Date(text);
+        if (Number.isFinite(parsed.getTime())) {
+            return new Date(Date.UTC(parsed.getUTCFullYear(), parsed.getUTCMonth(), parsed.getUTCDate()));
+        }
+        return null;
+    }
+
+    function compactNumber(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return String(value ?? "");
+        const abs = Math.abs(numeric);
+        if (abs >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatLocalValue(value, includeUnit = true) {
+        const formatted = compactNumber(value);
+        if (!includeUnit || !yUnit) return formatted;
+        if (yUnit === "%") return `${formatted}%`;
+        const currencyWithSuffix = yUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${formatted}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(yUnit)) return `${yUnit}${formatted}`;
+        return `${formatted} ${yUnit}`;
+    }
+
+    function wrapText(text, maxChars) {
+        const words = readableLabel(text).split(/\s+/).filter(Boolean);
+        if (!words.length) return [String(text ?? "")];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const next = current ? `${current} ${word}` : word;
+            if (next.length <= maxChars) {
+                current = next;
+                return;
+            }
+            if (current) lines.push(current);
+            if (word.length <= maxChars) {
+                current = word;
+                return;
+            }
+            for (let i = 0; i < word.length; i += maxChars) {
+                lines.push(word.slice(i, i + maxChars));
+            }
+            current = "";
+        });
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(text ?? "")];
+    }
+
+    function selectEvenTicks(values, maxTicks) {
+        if (values.length <= maxTicks) return values;
+        const selected = [];
+        for (let i = 0; i < maxTicks; i += 1) {
+            const index = Math.round(i * (values.length - 1) / (maxTicks - 1));
+            const value = values[index];
+            if (!selected.includes(value)) selected.push(value);
+        }
+        return selected;
+    }
+
+    const parsedRows = chartData.map((d, index) => {
+        const date = parseTemporalDate(d[xField]);
+        const value = Number(d[yField]);
+        const group = readableLabel(d[groupField]);
+        return {
+            raw: d,
+            index,
+            date,
+            time: date ? date.getTime() : NaN,
+            xLabel: String(d[xField] ?? ""),
+            value,
+            group
+        };
+    }).filter(d => d.date && Number.isFinite(d.time) && Number.isFinite(d.value) && d.group);
+
+    if (parsedRows.length === 0) {
+        svg.append("text")
+            .attr("class", "chart-message")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Not enough temporal data");
+        return svg.node();
+    }
+
+    const groups = [];
+    parsedRows.forEach(d => {
+        if (!groups.includes(d.group)) groups.push(d.group);
+    });
+
+    const xLabelByTime = new Map();
+    parsedRows.forEach(d => {
+        if (!xLabelByTime.has(d.time)) xLabelByTime.set(d.time, d.xLabel);
+    });
+
+    const groupSeries = groups.map(group => {
+        const byTime = new Map();
+        parsedRows.filter(d => d.group === group).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 values = 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);
+        return {
+            group,
+            values,
+            latestValue: values[values.length - 1]?.value,
+            meanValue: d3.mean(values, d => d.value) || 0
+        };
+    }).filter(d => d.values.length >= 2);
+
+    if (groupSeries.length === 0) {
+        svg.append("text")
+            .attr("class", "chart-message")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Not enough points per group");
+        return svg.node();
+    }
+
+    const xValues = Array.from(new Set(parsedRows.map(d => d.time)))
+        .sort((a, b) => a - b)
+        .map(time => new Date(time));
+    const allValues = groupSeries.flatMap(series => series.values.map(d => d.value));
+    let yMin = d3.min(allValues);
+    let yMax = d3.max(allValues);
+    if (yMin === yMax) {
+        const pad = Math.max(1, Math.abs(yMin) * 0.12);
+        yMin -= pad;
+        yMax += pad;
+    } else {
+        const pad = (yMax - yMin) * 0.12;
+        yMin -= pad;
+        yMax += pad;
+    }
+    const rawMin = d3.min(allValues);
+    const rawMax = d3.max(allValues);
+    if (rawMin >= 0) yMin = Math.max(0, yMin);
+    if (rawMax <= 0) yMax = Math.min(0, yMax);
+
+    const columns = groupSeries.length <= 2 ? groupSeries.length : (groupSeries.length <= 4 ? 2 : 3);
+    const rows = Math.ceil(groupSeries.length / columns);
+    const outer = { top: 22, right: 28, bottom: 38, left: 30 };
+    const gapX = groupSeries.length > 4 ? 18 : 24;
+    const gapY = rows > 1 ? 26 : 18;
+    const panelWidth = (width - outer.left - outer.right - gapX * (columns - 1)) / columns;
+    const panelHeight = (height - outer.top - outer.bottom - gapY * (rows - 1)) / rows;
+    const plot = {
+        left: Math.min(54, Math.max(40, panelWidth * 0.2)),
+        right: 18,
+        top: 46,
+        bottom: 34
+    };
+    const innerWidth = Math.max(82, panelWidth - plot.left - plot.right);
+    const innerHeight = Math.max(70, panelHeight - plot.top - plot.bottom);
+
+    const xScale = d3.scaleUtc()
+        .domain(d3.extent(xValues))
+        .range([0, innerWidth]);
+    const yScale = d3.scaleLinear()
+        .domain([yMin, yMax])
+        .nice(4)
+        .range([innerHeight, 0]);
+    const yTicks = yScale.ticks(innerHeight < 92 ? 3 : 4);
+    const xTickCount = innerWidth < 135 ? 2 : (innerWidth < 220 ? 3 : 4);
+    const xTicks = selectEvenTicks(xValues, xTickCount);
+    const palette = sourceColors.available_colors || d3.schemeTableau10 || d3.schemeCategory10;
+    const colorForGroup = group => {
+        if (colorField[group]) return colorField[group];
+        const index = groupSeries.findIndex(d => d.group === group);
+        return palette[index % palette.length] || "#2563eb";
+    };
+
+    function formatXTick(date) {
+        const label = xLabelByTime.get(date.getTime());
+        if (label) return String(label);
+        return d3.utcFormat("%Y")(date);
+    }
+
+    const stepLine = d3.line()
+        .defined(d => Number.isFinite(d.value))
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveStepAfter);
+
+    svg.append("text")
+        .attr("class", "scale-note axis-title")
+        .attr("x", outer.left)
+        .attr("y", 12)
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .style("font-weight", "600")
+        .text(`Shared ${readableLabel(yColumn.label || yField)} scale: ${formatLocalValue(yScale.domain()[0])} to ${formatLocalValue(yScale.domain()[1])}`);
+
+    groupSeries.forEach((series, index) => {
+        const row = Math.floor(index / columns);
+        const col = index % columns;
+        const rowCount = row === rows - 1 ? groupSeries.length - row * columns : columns;
+        const rowOffset = (columns - rowCount) * (panelWidth + gapX) / 2;
+        const panelX = outer.left + rowOffset + col * (panelWidth + gapX);
+        const panelY = outer.top + row * (panelHeight + gapY);
+        const color = colorForGroup(series.group);
+
+        const panel = svg.append("g")
+            .attr("class", "subplot step-line-panel")
+            .attr("data-group", series.group)
+            .attr("transform", `translate(${panelX}, ${panelY})`);
+
+        panel.append("rect")
+            .attr("class", "subplot-background")
+            .attr("width", panelWidth)
+            .attr("height", panelHeight)
+            .attr("rx", 6)
+            .attr("fill", rgba(textColor, 0.025))
+            .attr("stroke", rgba(textColor, 0.08))
+            .attr("stroke-width", 1);
+
+        panel.append("line")
+            .attr("class", "group-swatch")
+            .attr("x1", 12)
+            .attr("x2", 32)
+            .attr("y1", 17)
+            .attr("y2", 17)
+            .attr("stroke", color)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round");
+
+        const titleLines = wrapText(series.group, Math.max(8, Math.floor((panelWidth - 50) / 7.2))).slice(0, 2);
+        const title = panel.append("text")
+            .attr("class", "group-label")
+            .attr("x", 40)
+            .attr("y", 14)
+            .attr("fill", textColor)
+            .style("font-family", titleFamily)
+            .style("font-size", `${Math.max(9.5, Math.min(baseTitleSize, 12.5))}px`)
+            .style("font-weight", titleWeight);
+        titleLines.forEach((line, lineIndex) => {
+            title.append("tspan")
+                .attr("x", 40)
+                .attr("dy", lineIndex === 0 ? 0 : 12)
+                .text(line);
+        });
+
+        const chart = panel.append("g")
+            .attr("class", "panel-plot")
+            .attr("transform", `translate(${plot.left}, ${plot.top})`);
+
+        yTicks.forEach(tick => {
+            chart.append("line")
+                .attr("class", "gridline y-gridline")
+                .attr("x1", 0)
+                .attr("x2", innerWidth)
+                .attr("y1", yScale(tick))
+                .attr("y2", yScale(tick))
+                .attr("stroke", rgba(textColor, 0.14))
+                .attr("stroke-width", 1);
+            chart.append("text")
+                .attr("class", "axis-tick y-axis-tick")
+                .attr("x", -7)
+                .attr("y", yScale(tick))
+                .attr("text-anchor", "end")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", rgba(textColor, 0.68))
+                .style("font-family", fontFamily)
+                .style("font-size", `${Math.max(8, Math.min(baseLabelSize, 9.5))}px`)
+                .style("font-weight", labelWeight)
+                .text(formatLocalValue(tick));
+        });
+
+        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(textColor, 0.34))
+            .attr("stroke-width", 1);
+
+        xTicks.forEach(tick => {
+            chart.append("line")
+                .attr("class", "axis-tick-line")
+                .attr("x1", xScale(tick))
+                .attr("x2", xScale(tick))
+                .attr("y1", innerHeight)
+                .attr("y2", innerHeight + 4)
+                .attr("stroke", rgba(textColor, 0.38))
+                .attr("stroke-width", 1);
+            chart.append("text")
+                .attr("class", "axis-tick x-axis-tick")
+                .attr("x", xScale(tick))
+                .attr("y", innerHeight + 17)
+                .attr("text-anchor", "middle")
+                .attr("fill", rgba(textColor, 0.72))
+                .style("font-family", fontFamily)
+                .style("font-size", `${Math.max(7.8, Math.min(baseLabelSize, 9.2))}px`)
+                .style("font-weight", labelWeight)
+                .text(formatXTick(tick));
+        });
+
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "mark step-line data-line")
+            .attr("data-tag", "mark")
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 2.6)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("d", stepLine);
+
+        chart.selectAll(".step-point")
+            .data(series.values)
+            .enter()
+            .append("circle")
+            .attr("class", "data-point step-point")
+            .attr("data-tag", "mark")
+            .attr("cx", d => xScale(d.date))
+            .attr("cy", d => yScale(d.value))
+            .attr("r", 2.8)
+            .attr("fill", "#ffffff")
+            .attr("stroke", color)
+            .attr("stroke-width", 1.4);
+
+        const lastPoint = series.values[series.values.length - 1];
+        if (lastPoint) {
+            chart.append("text")
+                .attr("class", "value-label latest-value")
+                .attr("x", innerWidth)
+                .attr("y", Math.max(8, Math.min(innerHeight - 6, yScale(lastPoint.value) - 8)))
+                .attr("text-anchor", "end")
+                .attr("fill", color)
+                .style("font-family", valueFamily)
+                .style("font-size", `${Math.max(8.2, Math.min(baseValueSize, 10.5))}px`)
+                .style("font-weight", valueWeight)
+                .text(formatLocalValue(lastPoint.value));
+        }
+    });
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", width / 2)
+        .attr("y", height - 8)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "9.5px")
+        .text(`${readableLabel(xColumn.label || xField)} order: chronological; panels share the same y scale`);
+
+    return svg.node();
+}