Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type27_stepped_line_graph/stepped_line_graph_plain_chart_01.js

@@ -0,0 +1,651 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Stepped Line Graph",
+    "chart_name": "stepped_line_graph_plain_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[4, 20], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes",
+    "chart_for": "trend"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    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 sourceData = jsonData.data.data || [];
+
+    d3.select(containerSelector).html("");
+
+    const xField = chartUtils.schema.column(dataColumns, 0).key;
+    const yField = chartUtils.schema.column(dataColumns, 1).key;
+    const readableName = value => String(value || "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+    const xLabel = readableName(chartUtils.schema.column(dataColumns, 0).rawLabel || chartUtils.schema.column(dataColumns, 0).key);
+    const yLabel = readableName(chartUtils.schema.column(dataColumns, 1).rawLabel || chartUtils.schema.column(dataColumns, 1).key);
+    const yUnit = (chartUtils.schema.column(dataColumns, 1).unit || "").trim();
+
+    const width = Number(variables.width) || 600;
+    const height = Math.max(Number(variables.height) || 600, 560);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const textColor = sourceColors.text_color || "#262626";
+    const canvasColor = "#f8fbff";
+    const panelColor = "#ffffff";
+    const plotColor = "#fbfdff";
+    const navyColor = "#071a3d";
+    const mutedText = "#6b7280";
+    const axisColor = "#0b2a52";
+    const gridColor = "#d9e3ef";
+    const lineColor = d3.interpolateRgb(sourceColors.other?.primary || "#3f9829", "#3f9829")(0.78);
+    const positiveColor = "#2f8c28";
+    const negativeColor = "#c93448";
+    const greenWash = "#e9f5e5";
+
+    const plainNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 100 ? ",.0f" : abs >= 10 ? ",.1f" : ".2f";
+        return d3.format(spec)(value).replace(/\.0$/, "");
+    };
+
+    const compactNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 100 ? ".0f" : abs >= 10 ? ".1f" : ".2f";
+        if (abs >= 1000000000) return `${d3.format(spec)(value / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(spec)(value / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(spec)(value / 1000)}K`;
+        return d3.format(spec)(value).replace(/\.0$/, "");
+    };
+
+    const formatLocalValue = value => {
+        const currencyWithSuffix = yUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (yUnit === "%") return `${plainNumber(value)}%`;
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${plainNumber(value)}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(yUnit)) return `${yUnit}${compactNumber(value)}`;
+        if (yUnit) return `${compactNumber(value)} ${yUnit}`;
+        return compactNumber(value);
+    };
+
+    const formatDelta = value => {
+        const sign = value >= 0 ? "+" : "-";
+        const absValue = Math.abs(value);
+        if (yUnit === "%") return `${sign}${plainNumber(absValue)} points`;
+        const currencyWithSuffix = yUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (currencyWithSuffix) return `${sign}${currencyWithSuffix[1]}${plainNumber(absValue)}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(yUnit)) return `${sign}${yUnit}${compactNumber(absValue)}`;
+        if (yUnit) return `${sign}${compactNumber(absValue)} ${yUnit}`;
+        return `${sign}${compactNumber(absValue)}`;
+    };
+
+    const chartData = sourceData
+        .map(d => ({
+            ...d,
+            __xDate: chartUtils.format.parseDate(d[xField]),
+            __value: Number(d[yField])
+        }))
+        .filter(d => !Number.isNaN(d.__xDate.getTime()) && Number.isFinite(d.__value))
+        .sort((a, b) => a.__xDate - b.__xDate);
+
+    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", "stepped-line-chart-root");
+
+    const defs = svg.append("defs");
+    const cardShadow = defs.append("filter")
+        .attr("id", "stepped_line_plain_01_card_shadow")
+        .attr("x", "-8%")
+        .attr("y", "-10%")
+        .attr("width", "116%")
+        .attr("height", "124%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 2.3)
+        .attr("flood-color", "#4c6074")
+        .attr("flood-opacity", 0.13);
+
+    const areaGradient = defs.append("linearGradient")
+        .attr("id", "stepped_line_plain_01_area_gradient")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+    areaGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", lineColor)
+        .attr("stop-opacity", 0.22);
+    areaGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", lineColor)
+        .attr("stop-opacity", 0.04);
+
+    if (chartData.length < 2) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Not enough data");
+        return svg.node();
+    }
+
+    const firstDatum = chartData[0];
+    const lastDatum = chartData[chartData.length - 1];
+    const deltaValue = lastDatum.__value - firstDatum.__value;
+    const deltaColor = deltaValue >= 0 ? positiveColor : negativeColor;
+    const cardX = Math.max(14, Math.min(22, width * 0.035));
+    const cardY = 14;
+    const cardWidth = width - cardX * 2;
+    const cardHeight = height - cardY * 2;
+    const headerHeight = 56;
+    const footerHeight = 70;
+    const margin = {
+        top: cardY + headerHeight + 36,
+        right: Math.max(36, width * 0.06),
+        bottom: cardY + footerHeight + 58,
+        left: Math.max(72, width * 0.12)
+    };
+    const chartWidth = Math.max(280, width - margin.left - margin.right - cardX);
+    const chartHeight = Math.max(250, height - margin.top - margin.bottom);
+    const plotX = margin.left;
+    const plotY = margin.top;
+
+    function fitTextSize(text, maxWidth, startSize, minSize) {
+        let fontSize = startSize;
+        const temp = svg.append("text")
+            .attr("visibility", "hidden")
+            .style("font-family", fontFamily)
+            .style("font-weight", "700")
+            .text(text);
+        while (fontSize > minSize) {
+            temp.style("font-size", `${fontSize}px`);
+            const bboxWidth = temp.node() ? temp.node().textContent.length * 7 : String(text).length * fontSize * 0.56;
+            if (bboxWidth <= maxWidth) break;
+            fontSize -= 0.5;
+        }
+        temp.remove();
+        return fontSize;
+    }
+
+    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-style-panel")
+        .attr("x", cardX)
+        .attr("y", cardY)
+        .attr("width", cardWidth)
+        .attr("height", cardHeight)
+        .attr("rx", 8)
+        .attr("ry", 8)
+        .attr("fill", panelColor)
+        .attr("stroke", "#dce8f3")
+        .attr("stroke-width", 1)
+        .attr("filter", "url(#stepped_line_plain_01_card_shadow)");
+
+    const fieldText = yLabel || readableName(yField);
+    const fieldPillX = cardX + 22;
+    const fieldPillY = cardY + 18;
+    const fieldPillWidth = Math.min(cardWidth - 44, Math.max(168, fieldText.length * 8.2 + 58));
+    const fieldFontSize = fitTextSize(fieldText, fieldPillWidth - 52, 13, 8.5);
+    svg.append("rect")
+        .attr("class", "field-pill")
+        .attr("x", fieldPillX)
+        .attr("y", fieldPillY)
+        .attr("width", fieldPillWidth)
+        .attr("height", 29)
+        .attr("rx", 14.5)
+        .attr("ry", 14.5)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#d8e3ef")
+        .attr("stroke-width", 1);
+    svg.append("line")
+        .attr("class", "field-pill-line")
+        .attr("x1", fieldPillX + 17)
+        .attr("x2", fieldPillX + 46)
+        .attr("y1", fieldPillY + 14.5)
+        .attr("y2", fieldPillY + 14.5)
+        .attr("stroke", lineColor)
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+    svg.append("circle")
+        .attr("class", "field-pill-dot")
+        .attr("cx", fieldPillX + 31.5)
+        .attr("cy", fieldPillY + 14.5)
+        .attr("r", 5.2)
+        .attr("fill", "#ffffff")
+        .attr("stroke", lineColor)
+        .attr("stroke-width", 3);
+    svg.append("text")
+        .attr("class", "field-pill-label")
+        .attr("x", fieldPillX + 58)
+        .attr("y", fieldPillY + 14.5)
+        .attr("dominant-baseline", "middle")
+        .style("font-family", fontFamily)
+        .style("font-size", `${fieldFontSize}px`)
+        .style("font-weight", "700")
+        .style("fill", navyColor)
+        .text(fieldText);
+
+    const sortNote = `${xLabel || readableName(xField)} chronological`;
+    svg.append("text")
+        .attr("class", "sort-note")
+        .attr("x", cardX + cardWidth - 24)
+        .attr("y", fieldPillY + 15)
+        .attr("text-anchor", "end")
+        .attr("dominant-baseline", "middle")
+        .style("font-family", fontFamily)
+        .style("font-size", `${fitTextSize(sortNote, Math.max(92, cardWidth - fieldPillWidth - 82), 10, 7.5)}px`)
+        .style("fill", mutedText)
+        .text(sortNote);
+
+    svg.append("rect")
+        .attr("class", "plot-card")
+        .attr("x", plotX - 22)
+        .attr("y", plotY - 22)
+        .attr("width", chartWidth + 42)
+        .attr("height", chartHeight + 58)
+        .attr("rx", 10)
+        .attr("ry", 10)
+        .attr("fill", plotColor)
+        .attr("stroke", "#e3edf7")
+        .attr("stroke-width", 1);
+
+    const g = svg.append("g")
+        .attr("class", "plot-area")
+        .attr("data-count", chartData.length)
+        .attr("data-sort-mode", "temporal")
+        .attr("data-min-value", d3.min(chartData, d => d.__value))
+        .attr("data-max-value", d3.max(chartData, d => d.__value))
+        .attr("transform", `translate(${plotX}, ${plotY})`);
+
+    const xExtent = d3.extent(chartData, d => d.__xDate);
+    if (+xExtent[0] === +xExtent[1]) {
+        xExtent[0] = d3.timeYear.offset(xExtent[0], -1);
+        xExtent[1] = d3.timeYear.offset(xExtent[1], 1);
+    }
+
+    const xScale = d3.scaleTime()
+        .domain(xExtent)
+        .range([0, chartWidth]);
+
+    const yMin = d3.min(chartData, d => d.__value);
+    const yMax = d3.max(chartData, d => d.__value);
+    const ySpan = yMax - yMin;
+    const yPadding = ySpan > 0 ? ySpan * 0.16 : Math.max(Math.abs(yMax) * 0.1, 1);
+    const yScale = d3.scaleLinear()
+        .domain([yMin - yPadding, yMax + yPadding])
+        .range([chartHeight, 0])
+        .nice(5);
+
+    const dateSpanYears = (xExtent[1] - xExtent[0]) / (1000 * 60 * 60 * 24 * 365);
+    const formatDate = d => {
+        if (dateSpanYears > 2) return d3.timeFormat("%Y")(d);
+        if (dateSpanYears > 1) return `${d.getFullYear().toString().slice(-2)}Q${Math.floor(d.getMonth() / 3) + 1}`;
+        return d3.timeFormat("%b %Y")(d);
+    };
+
+    const maxXTicks = Math.max(4, Math.min(8, Math.floor(chartWidth / 90)));
+    const selectXTicks = values => {
+        const step = Math.max(1, Math.ceil(values.length / maxXTicks));
+        const selected = values.filter((_, i) => i % step === 0);
+        if (+selected[0] !== +values[0]) selected.unshift(values[0]);
+        if (+selected[selected.length - 1] !== +values[values.length - 1]) selected.push(values[values.length - 1]);
+        const seen = new Set();
+        return selected.filter(d => {
+            const key = formatDate(d);
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
+        });
+    };
+    const xTicks = selectXTicks(chartData.map(d => d.__xDate));
+    const yTicks = yScale.ticks(5);
+
+    g.append("rect")
+        .attr("class", "chart-panel-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", chartWidth)
+        .attr("height", chartHeight)
+        .attr("fill", "#ffffff")
+        .attr("opacity", 0.55);
+
+    xTicks.slice(0, -1).forEach((tick, index) => {
+        if (index % 2 !== 0) return;
+        const nextTick = xTicks[index + 1];
+        const x = xScale(tick);
+        const nextX = xScale(nextTick);
+        g.append("rect")
+            .attr("class", "plot-band")
+            .attr("x", x)
+            .attr("y", 0)
+            .attr("width", Math.max(0, nextX - x))
+            .attr("height", chartHeight)
+            .attr("fill", "#f0f7ff")
+            .attr("opacity", 0.55);
+    });
+
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        g.append("line")
+            .attr("class", "gridline y-gridline")
+            .attr("x1", 0)
+            .attr("y1", y)
+            .attr("x2", chartWidth)
+            .attr("y2", y)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", tick === 0 ? 1.4 : 1)
+            .attr("stroke-dasharray", tick === 0 ? null : "4,5");
+
+        g.append("text")
+            .attr("class", "axis-tick y-axis-tick")
+            .attr("x", -12)
+            .attr("y", y)
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", navyColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "12px")
+            .text(formatLocalValue(tick));
+    });
+
+    xTicks.forEach(tick => {
+        const x = xScale(tick);
+        g.append("line")
+            .attr("class", "gridline x-gridline")
+            .attr("x1", x)
+            .attr("y1", 0)
+            .attr("x2", x)
+            .attr("y2", chartHeight)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1)
+            .attr("opacity", 0.42);
+
+        g.append("text")
+            .attr("class", "axis-tick x-axis-tick")
+            .attr("x", x)
+            .attr("y", chartHeight + 28)
+            .attr("text-anchor", "middle")
+            .attr("fill", navyColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "12px")
+            .text(formatDate(tick));
+    });
+
+    g.append("line")
+        .attr("class", "axis x-axis-line")
+        .attr("x1", 0)
+        .attr("y1", chartHeight)
+        .attr("x2", chartWidth)
+        .attr("y2", chartHeight)
+        .attr("stroke", axisColor)
+        .attr("stroke-width", 1.5);
+
+    g.append("line")
+        .attr("class", "axis y-axis-line")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", 0)
+        .attr("y2", chartHeight)
+        .attr("stroke", axisColor)
+        .attr("stroke-width", 1.5);
+
+    const line = d3.line()
+        .x(d => xScale(d.__xDate))
+        .y(d => yScale(d.__value))
+        .curve(d3.curveStepAfter);
+
+    const area = d3.area()
+        .x(d => xScale(d.__xDate))
+        .y0(chartHeight)
+        .y1(d => yScale(d.__value))
+        .curve(d3.curveStepAfter);
+
+    g.append("path")
+        .datum(chartData)
+        .attr("class", "stepped-line-area")
+        .attr("data-count", chartData.length)
+        .attr("data-sort-mode", "temporal")
+        .attr("fill", "url(#stepped_line_plain_01_area_gradient)")
+        .attr("d", area);
+
+    g.append("path")
+        .datum(chartData)
+        .attr("class", "mark stepped-line-path")
+        .attr("data-count", chartData.length)
+        .attr("data-sort-mode", "temporal")
+        .attr("data-first-value", firstDatum.__value)
+        .attr("data-last-value", lastDatum.__value)
+        .attr("fill", "none")
+        .attr("stroke", lineColor)
+        .attr("stroke-width", 4.2)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("d", line);
+
+    chartData.forEach((d, i) => {
+        const isEndpoint = i === 0 || i === chartData.length - 1;
+        g.append("circle")
+            .attr("class", `mark stepped-line-point${isEndpoint ? " endpoint-point" : ""}`)
+            .attr("data-label", formatDate(d.__xDate))
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-sort-mode", "temporal")
+            .attr("cx", xScale(d.__xDate))
+            .attr("cy", yScale(d.__value))
+            .attr("r", isEndpoint ? 5.8 : 4.2)
+            .attr("fill", isEndpoint ? "#ffffff" : lineColor)
+            .attr("stroke", lineColor)
+            .attr("stroke-width", isEndpoint ? 3 : 2);
+    });
+
+    const drawEndpointLabel = (d, anchor) => {
+        const x = xScale(d.__xDate);
+        const y = yScale(d.__value);
+        const label = formatLocalValue(d.__value);
+        const labelWidth = Math.max(50, label.length * 7.6 + 20);
+        const labelHeight = 25;
+        const isLeft = anchor === "start";
+        const labelX = Math.max(0, Math.min(chartWidth - labelWidth, isLeft ? x + 12 : x - labelWidth - 12));
+        const labelY = Math.max(0, Math.min(chartHeight - labelHeight, y - labelHeight / 2));
+
+        const labelGroup = g.append("g")
+            .attr("class", `endpoint-label ${anchor}-endpoint-label`)
+            .attr("data-label", formatDate(d.__xDate))
+            .attr("data-value", d.__value)
+            .attr("data-anchor", anchor);
+
+        labelGroup.append("line")
+            .attr("x1", x)
+            .attr("y1", y)
+            .attr("x2", isLeft ? labelX : labelX + labelWidth)
+            .attr("y2", labelY + labelHeight / 2)
+            .attr("stroke", lineColor)
+            .attr("stroke-width", 1.2)
+            .attr("opacity", 0.7);
+
+        labelGroup.append("rect")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("width", labelWidth)
+            .attr("height", labelHeight)
+            .attr("rx", 6)
+            .attr("ry", 6)
+            .attr("fill", lineColor)
+            .attr("stroke", lineColor)
+            .attr("stroke-width", 1.2);
+
+        labelGroup.append("text")
+            .attr("x", labelX + labelWidth / 2)
+            .attr("y", labelY + labelHeight / 2)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#ffffff")
+            .style("font-family", fontFamily)
+            .style("font-size", "12px")
+            .style("font-weight", "700")
+            .text(label);
+    };
+
+    drawEndpointLabel(chartData[0], "start");
+    drawEndpointLabel(chartData[chartData.length - 1], "end");
+
+    svg.append("text")
+        .attr("class", "axis-title y-axis-title")
+        .attr("transform", `translate(${plotX - 58}, ${plotY + chartHeight / 2}) rotate(-90)`)
+        .attr("text-anchor", "middle")
+        .attr("fill", navyColor)
+        .style("font-family", fontFamily)
+        .style("font-size", "12px")
+        .style("font-weight", "700")
+        .text(yUnit ? `${yLabel} (${yUnit})` : yLabel);
+
+    svg.append("text")
+        .attr("class", "axis-title x-axis-title")
+        .attr("x", plotX + chartWidth)
+        .attr("y", plotY + chartHeight + 47)
+        .attr("text-anchor", "end")
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "12px")
+        .text(xLabel);
+
+    const summaryY = cardY + cardHeight - footerHeight + 12;
+    const summaryX = cardX + 22;
+    const summaryWidth = cardWidth - 44;
+    const summaryHeight = 46;
+    svg.append("rect")
+        .attr("class", "scale-note-band takeaway-card")
+        .attr("x", summaryX)
+        .attr("y", summaryY)
+        .attr("width", summaryWidth)
+        .attr("height", summaryHeight)
+        .attr("rx", 8)
+        .attr("ry", 8)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#d8e3ef")
+        .attr("stroke-width", 1);
+    svg.append("rect")
+        .attr("class", "takeaway-accent")
+        .attr("x", summaryX)
+        .attr("y", summaryY)
+        .attr("width", 4)
+        .attr("height", summaryHeight)
+        .attr("rx", 2)
+        .attr("fill", lineColor);
+    svg.append("circle")
+        .attr("class", "takeaway-icon")
+        .attr("cx", summaryX + 30)
+        .attr("cy", summaryY + summaryHeight / 2)
+        .attr("r", 15)
+        .attr("fill", greenWash)
+        .attr("stroke", lineColor)
+        .attr("stroke-width", 1.4);
+    svg.append("path")
+        .attr("class", "takeaway-icon-line")
+        .attr("d", `M ${summaryX + 20} ${summaryY + 28} L ${summaryX + 27} ${summaryY + 22} L ${summaryX + 34} ${summaryY + 25} L ${summaryX + 41} ${summaryY + 17}`)
+        .attr("fill", "none")
+        .attr("stroke", lineColor)
+        .attr("stroke-width", 2.5)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+    svg.append("text")
+        .attr("class", "takeaway-title")
+        .attr("x", summaryX + 58)
+        .attr("y", summaryY + 17)
+        .style("font-family", fontFamily)
+        .style("font-size", "12px")
+        .style("font-weight", "800")
+        .style("fill", navyColor)
+        .text("Key takeaway");
+    const noteText = `${formatLocalValue(firstDatum.__value)} to ${formatLocalValue(lastDatum.__value)} from ${formatDate(firstDatum.__xDate)} to ${formatDate(lastDatum.__xDate)}.`;
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", summaryX + 58)
+        .attr("y", summaryY + 34)
+        .style("font-family", fontFamily)
+        .style("font-size", `${fitTextSize(noteText, summaryWidth * 0.55, 10.5, 7.5)}px`)
+        .style("fill", mutedText)
+        .text(noteText);
+    svg.append("line")
+        .attr("class", "takeaway-divider")
+        .attr("x1", summaryX + summaryWidth * 0.68)
+        .attr("x2", summaryX + summaryWidth * 0.68)
+        .attr("y1", summaryY + 10)
+        .attr("y2", summaryY + summaryHeight - 10)
+        .attr("stroke", "#d8e3ef")
+        .attr("stroke-width", 1);
+    svg.append("text")
+        .attr("class", "delta-label")
+        .attr("x", summaryX + summaryWidth * 0.72)
+        .attr("y", summaryY + 16)
+        .style("font-family", fontFamily)
+        .style("font-size", "10px")
+        .style("fill", mutedText)
+        .text(`Change ${formatDate(firstDatum.__xDate)}-${formatDate(lastDatum.__xDate)}`);
+    svg.append("text")
+        .attr("class", "delta-value")
+        .attr("data-value", deltaValue)
+        .attr("x", summaryX + summaryWidth * 0.72)
+        .attr("y", summaryY + 35)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(15, Math.min(24, summaryWidth / 24))}px`)
+        .style("font-weight", "800")
+        .style("fill", deltaColor)
+        .text(formatDelta(deltaValue));
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type27_stepped_line_graph/stepped_line_graph_plain_chart_02.js

@@ -0,0 +1,459 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Stepped Line Graph",
+    "chart_name": "stepped_line_graph_plain_chart_02",
+    "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": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+// 分组step_line_graph_plain_chart_02
+function makeChart(containerSelector, data) {
+    // ---------- 辅助函数 ----------
+    // 创建智能日期比例尺和刻度
+    const createXAxisScaleAndTicks = (data, xField, rangeStart, rangeEnd) => {
+        const dates = data.map(d => chartUtils.format.parseDate(d[xField]));
+        const xExtent = d3.extent(dates);
+        const xScale = d3.scaleTime().domain(xExtent).range([rangeStart, rangeEnd]);
+        
+        const timeSpan = xExtent[1] - xExtent[0];
+        const yearSpan = timeSpan / (1000 * 60 * 60 * 24 * 365);
+        
+        let timeInterval, formatFunction;
+        if (yearSpan > 2) {
+            timeInterval = d3.timeYear.every(1);
+            formatFunction = d => chartUtils.format.date(d, { output: "%Y" }).text;
+        } else if (yearSpan > 1) {
+            timeInterval = d3.timeMonth.every(3);
+            formatFunction = d => `${d.getFullYear().toString().slice(-2)}Q${Math.floor(d.getMonth() / 3) + 1}`;
+        } else {
+            timeInterval = d3.timeMonth.every(1);
+            formatFunction = d => chartUtils.format.date(d, { output: "%m %Y" }).text;
+        }
+        
+        const xTicks = xScale.ticks(timeInterval);
+        return { xScale, xTicks, xFormat: formatFunction };
+    };
+
+    // 格式化数值
+
+    // 智能排版图例
+    const layoutLegend = (g, groups, colors, options = {}) => {
+        const defaults = {
+            maxWidth: 500, x: 0, y: 0, itemHeight: 20, itemSpacing: 20,
+            rowSpacing: 10, symbolSize: 10, textColor: "#333", fontSize: 12,
+            fontWeight: "normal", align: "left", shape: "circle"
+        };
+        
+        const opts = {...defaults, ...options};
+        
+        const itemWidths = groups.map(group => opts.symbolSize * 2 + chartUtils.text.measure(g, group, {
+            fontSize: opts.fontSize,
+            fontWeight: opts.fontWeight
+        }).width + 5);
+        
+        const rows = [];
+        let currentRow = [];
+        let currentRowWidth = 0;
+        
+        itemWidths.forEach((width, i) => {
+            if (currentRow.length === 0 || currentRowWidth + width + opts.itemSpacing <= opts.maxWidth) {
+                currentRow.push(i);
+                currentRowWidth += width + (currentRow.length > 1 ? opts.itemSpacing : 0);
+            } else {
+                rows.push(currentRow);
+                currentRow = [i];
+                currentRowWidth = width;
+            }
+        });
+        
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
+        }
+        
+        const totalHeight = rows.length * opts.itemHeight + (rows.length - 1) * opts.rowSpacing;
+        const maxRowWidth = Math.max(...rows.map(row => {
+            return row.reduce((sum, i, idx) => {
+                return sum + itemWidths[i] + (idx > 0 ? opts.itemSpacing : 0);
+            }, 0);
+        }));
+        
+        rows.forEach((row, rowIndex) => {
+            const rowWidth = row.reduce((sum, i, idx) => {
+                return sum + itemWidths[i] + (idx > 0 ? opts.itemSpacing : 0);
+            }, 0);
+            
+            let rowStartX = opts.align === "center" ? opts.x + (opts.maxWidth - rowWidth) / 2 :
+                           opts.align === "right" ? opts.x + opts.maxWidth - rowWidth : opts.x;
+            
+            let currentX = rowStartX;
+            row.forEach(i => {
+                const group = groups[i];
+                const color = colorResolver.field(group, i, { palette: "category10" }).value;
+                    
+                const legendGroup = g.append("g")
+                    .attr("transform", `translate(${currentX}, ${opts.y + rowIndex * (opts.itemHeight + opts.rowSpacing)})`);
+                
+                if (opts.shape === "line") {
+                    legendGroup.append("line")
+                        .attr("x1", 0).attr("y1", opts.itemHeight / 2)
+                        .attr("x2", opts.symbolSize).attr("y2", opts.itemHeight / 2)
+                        .attr("stroke", color).attr("stroke-width", 4)
+                        .attr("class", "mark");
+                } else {
+                    legendGroup.append("circle")
+                        .attr("cx", opts.symbolSize / 2).attr("cy", opts.itemHeight / 2)
+                        .attr("r", opts.symbolSize / 2).attr("fill", color)
+                        .attr("class", "mark");
+                }
+                
+                legendGroup.append("text")
+                    .attr("x", opts.symbolSize * 1.5).attr("y", opts.itemHeight / 2)
+                    .attr("dominant-baseline", "middle").attr("fill", opts.textColor)
+                    .attr("class", "label")
+                    .style("font-size", `${opts.fontSize}px`)
+                    .style("font-weight", opts.fontWeight)
+                    .text(group);
+                
+                currentX += itemWidths[i] + opts.itemSpacing;
+            });
+        });
+        
+        return { width: maxRowWidth, height: totalHeight };
+    };
+
+    // 动态规划标签放置算法
+    const placeLabelsDP = (points, avoidYPositions, chartHeight) => {
+        const GRID_SIZE = 3;
+        const PROTECTION_RADIUS = 3;
+        const LABEL_HEIGHT = 10;
+        
+        const gridCount = Math.ceil(chartHeight / GRID_SIZE);
+        points.sort((a, b) => a.y - b.y);
+        
+        const occupied = new Array(gridCount).fill(false);
+        
+        // 标记数据点保护区域
+        points.forEach(point => {
+            const gridY = Math.floor(point.y / GRID_SIZE) - 3;
+            for (let i = Math.max(0, gridY - PROTECTION_RADIUS); i <= Math.min(gridCount - 1, gridY + PROTECTION_RADIUS); i++) {
+                occupied[i] = true;
+            }
+        });
+        
+        const n = points.length;
+        const dp = Array(n).fill().map(() => Array(gridCount).fill(Infinity));
+        const prev = Array(n).fill().map(() => Array(gridCount).fill(-1));
+        
+        // 初始化第一个点
+        const firstPointGridY = Math.floor(points[0].y / GRID_SIZE);
+        for (let j = 0; j < gridCount; j++) {
+            if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                let canPlace = true;
+                for (let k = 0; k < LABEL_HEIGHT; k++) {
+                    if (j + k < gridCount && occupied[j + k]) {
+                        canPlace = false;
+                        break;
+                    }
+                }
+                if (canPlace) {
+                    dp[0][j] = Math.abs(j - firstPointGridY);
+                }
+            }
+        }
+        
+        // 动态规划填表
+        for (let i = 1; i < n; i++) {
+            const pointGridY = Math.floor(points[i].y / GRID_SIZE);
+            
+            for (let j = 0; j < gridCount; j++) {
+                if (!occupied[j] && j + LABEL_HEIGHT <= gridCount) {
+                    let canPlace = true;
+                    for (let k = 0; k < LABEL_HEIGHT; k++) {
+                        if (j + k < gridCount && occupied[j + k]) {
+                            canPlace = false;
+                            break;
+                        }
+                    }
+                    
+                    if (canPlace) {
+                        for (let k = 0; k + LABEL_HEIGHT <= j; k++) {
+                            if (dp[i-1][k] !== Infinity) {
+                                const curCost = Math.abs(j - pointGridY);
+                                const totalCost = dp[i-1][k] + curCost;
+                                
+                                if (totalCost < dp[i][j]) {
+                                    dp[i][j] = totalCost;
+                                    prev[i][j] = k;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        
+        // 找最优解并回溯
+        let minCost = Infinity;
+        let bestPos = -1;
+        
+        for (let j = 0; j < gridCount; j++) {
+            if (dp[n-1][j] < minCost) {
+                minCost = dp[n-1][j];
+                bestPos = j;
+            }
+        }
+        
+        const labelPositions = [];
+        if (bestPos !== -1) {
+            let pos = bestPos;
+            for (let i = n - 1; i >= 0; i--) {
+                labelPositions.unshift({
+                    point: points[i],
+                    labelY: pos * GRID_SIZE
+                });
+                pos = prev[i][pos];
+            }
+        } else {
+            // 退化方案
+            let lastY = 0;
+            for (let i = 0; i < n; i++) {
+                const point = points[i];
+                let maxY = chartHeight;
+                if (i < n - 1) {
+                    maxY = points[i+1].y;
+                }
+                const labelY = Math.min(Math.max(point.y + 20, lastY + 25), maxY - 5);
+                labelPositions.push({ point: point, labelY: labelY });
+                lastY = labelY;
+            }
+        }
+        
+        return labelPositions;
+    };
+
+    // ---------- 主要代码 ----------
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 60, right: 30, bottom: 60, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 获取唯一的组值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const groupedData = d3.group(chartData, d => d[groupField]);
+
+    const { xScale, xTicks, xFormat } = createXAxisScaleAndTicks(chartData, xField, 0, chartWidth);
+    
+    // 创建y轴比例尺
+    const yMin = d3.min(chartData, d => +d[yField]);
+    const yMax = d3.max(chartData, d => +d[yField]);
+    const yPadding = (yMax - yMin) * 0.3;
+    const yDomainMax = yMax + yPadding;
+    const yDomainMin = Math.min(0, yMin - yPadding);
+    
+    const yScale = d3.scaleLinear()
+        .domain([yDomainMin, yDomainMax])
+        .range([chartHeight, 0]);
+    
+    // 颜色函数
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "category10" }).value;
+    
+    const yTicks = yScale.ticks(5);
+    
+    // 添加水平网格线
+    yTicks.forEach(tick => {
+        g.append("line")
+            .attr("x1", 0).attr("y1", yScale(tick))
+            .attr("x2", chartWidth).attr("y2", yScale(tick))
+            .attr("stroke", "#dddddd").attr("stroke-width", 1)
+            .attr("class", "gridline");
+    });
+    
+    // 添加刻度之间的额外网格线
+    if (yTicks.length > 1) {
+        for (let i = 0; i < yTicks.length - 1; i++) {
+            const midValue = (yTicks[i] + yTicks[i + 1]) / 2;
+            g.append("line")
+                .attr("x1", 0).attr("y1", yScale(midValue))
+                .attr("x2", chartWidth).attr("y2", yScale(midValue))
+                .attr("stroke", "#dddddd").attr("stroke-width", 1)
+                .attr("class", "gridline");
+        }
+    }
+    
+    // Y轴刻度文本
+    yTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", -10).attr("y", yScale(tick))
+            .attr("text-anchor", "end").attr("dominant-baseline", "middle")
+            .attr("class", "value")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(chartUtils.format.autoText(tick));
+    });
+    
+    // X轴刻度文本
+    xTicks.forEach(tick => {
+        g.append("text")
+            .attr("x", xScale(tick)).attr("y", chartHeight + 20)
+            .attr("text-anchor", "middle")
+            .attr("class", "label")
+            .attr("fill", "#666")
+            .style("font-size", "14px")
+            .text(xFormat(tick));
+    });
+    
+    // X轴线
+    g.append("line")
+        .attr("x1", 0).attr("y1", chartHeight)
+        .attr("x2", chartWidth).attr("y2", chartHeight)
+        .attr("stroke", "#aaa").attr("stroke-width", 1)
+        .attr("class", "axis");
+    
+    // 创建阶梯线生成器
+    const line = d3.line()
+        .x(d => xScale(chartUtils.format.parseDate(d[xField])))
+        .y(d => yScale(+d[yField]))
+        .curve(d3.curveStepAfter);
+    
+    // 收集标注数据点
+    const startPoints = [];
+    const middlePoints = [];
+    const endPoints = [];
+    
+    groupedData.forEach((values, group) => {
+        values.sort((a, b) => chartUtils.format.parseDate(a[xField]) - chartUtils.format.parseDate(b[xField]));
+        const color = colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        
+        // 绘制阶梯线
+        g.append("path")
+            .datum(values)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 4)
+            .attr("class", "mark")
+            .attr("d", line);
+        
+        const middleIndex = Math.floor(values.length / 2);
+        
+        values.forEach((d, i) => {
+            const pointData = {
+                x: xScale(chartUtils.format.parseDate(d[xField])),
+                y: yScale(+d[yField]),
+                value: d[yField],
+                color: color,
+                group: group,
+                point: d
+            };
+            
+            if (i === 0) {
+                startPoints.push(pointData);
+            } else if (i === values.length - 1) {
+                endPoints.push(pointData);
+            } else if (i === middleIndex) {
+                middlePoints.push(pointData);
+            }
+        });
+    });
+    
+    // 应用动态规划算法
+    const startLabelPositions = placeLabelsDP(startPoints, yTicks.map(tick => yScale(tick)), chartHeight);
+    const middleLabelPositions = placeLabelsDP(middlePoints, yTicks.map(tick => yScale(tick)), chartHeight);
+    const endLabelPositions = placeLabelsDP(endPoints, yTicks.map(tick => yScale(tick)), chartHeight);
+    
+    // 绘制标签函数
+    const drawLabels = (labelPositions) => {
+        labelPositions.forEach(placement => {
+            const point = placement.point;
+            const labelY = placement.labelY;
+            
+            const labelText = chartUtils.format.autoText(point.value);
+            const labelWidth = labelText.toString().length * 10 + 10;
+            const labelHeight = 24;
+            
+            // 圆角矩形背景
+            g.append("rect")
+                .attr("x", point.x - labelWidth / 2)
+                .attr("y", labelY + labelHeight / 2)
+                .attr("width", labelWidth).attr("height", labelHeight)
+                .attr("rx", 5).attr("ry", 5)
+                .attr("fill", point.color)
+                .attr("class", "mark");
+            
+            // 标签文本
+            g.append("text")
+                .attr("x", point.x)
+                .attr("y", labelY + labelHeight)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("fill", "#fff").attr("font-weight", "bold")
+                .attr("class", "value")
+                .style("font-size", "14px")
+                .text(labelText);
+        });
+    };
+    
+    // 绘制所有标签
+    drawLabels(startLabelPositions);
+    drawLabels(middleLabelPositions);
+    drawLabels(endLabelPositions);
+    
+    // 添加图例
+    const legendGroup = g.append("g");
+    
+    const legendSize = chartUtils.legend.draw(legendGroup, groups, colors, {
+        x: 0, y: 0, fontSize: 14, fontWeight: "bold",
+        align: "left", maxWidth: chartWidth, shape: "line"
+    });
+
+    const maxYTickPosition = yScale(yTicks[yTicks.length - 1]);
+    legendGroup.attr("transform", `translate(${(chartWidth - legendSize.width) / 2}, ${maxYTickPosition - 50 - legendSize.height/2})`);
+    
+    return svg.node();
+}