Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type30_small_multiples_spline_graphs/small_multiples_line_graphs_plain_chart_01.js

@@ -0,0 +1,582 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "small multiples of spline graphs",
+    "chart_name": "small_multiples_spline_graphs_plain_chart_01",
+    "is_composite": false,
+    "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": ["primary"],
+    "supported_effects": ["stroke", "spacing"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = (jsonData.data && 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: "normal" },
+        title: { font_family: "Arial", font_size: "14px", font_weight: "bold" }
+    };
+    const sourceColors = jsonData.colors || {};
+    const colorField = sourceColors.field || {};
+    const colorOther = sourceColors.other || {};
+
+    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 || "date";
+    const yField = yColumn.name || "value";
+    const groupField = groupColumn.name || "group";
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    const width = Number(variables.width) || 800;
+    const height = Number(variables.height) || 620;
+    const textColor = sourceColors.text_color || "#243041";
+    const primaryColor = colorOther.primary || "#2f7db7";
+    const secondaryColor = colorOther.secondary || "#6d9b45";
+    const canvasColor = "#f6fbf7";
+    const panelColor = "#fffef8";
+    const cardColor = "#ffffff";
+    const splinePalette = ["#f19a22", "#6fa843", "#2f7db7", "#d5533d", "#7f69b1", "#2d9c9c", "#c97a9b", "#5a6f8f"];
+    const labelTypography = typography.label || {};
+    const titleTypography = typography.title || labelTypography;
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const titleFamily = titleTypography.font_family || labelFamily;
+    const valueFamily = valueTypography.font_family || labelFamily;
+    const labelWeight = labelTypography.font_weight || "normal";
+    const titleWeight = titleTypography.font_weight || "700";
+    const valueWeight = valueTypography.font_weight || "600";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 11;
+    const baseTitleSize = parseFloat(titleTypography.font_size) || 13;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 11;
+
+    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;
+        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 season = text.match(/^(spring|summer|fall|autumn|winter)\s+(-?\d{4})$/i);
+        if (season) {
+            const monthBySeason = { spring: 2, summer: 5, fall: 8, autumn: 8, winter: 11 };
+            return new Date(Date.UTC(Number(season[2]), monthBySeason[season[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 wrapText(text, maxChars) {
+        const words = String(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;
+            }
+            let chunk = "";
+            for (const char of word) {
+                if ((chunk + char).length > maxChars) {
+                    lines.push(`${chunk}-`);
+                    chunk = char;
+                } else {
+                    chunk += char;
+                }
+            }
+            current = chunk;
+        });
+        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 = String(d[groupField] ?? "");
+        return {
+            ...d,
+            __index: index,
+            __date: date,
+            __time: date ? date.getTime() : NaN,
+            __xLabel: String(d[xField] ?? ""),
+            __value: value,
+            __group: group
+        };
+    }).filter(d => d.__date && Number.isFinite(d.__time) && Number.isFinite(d.__value) && d.__group !== "");
+
+    if (!parsedRows.length) return;
+
+    const groups = [];
+    parsedRows.forEach(d => {
+        if (!groups.includes(d.__group)) groups.push(d.__group);
+    });
+    if (!groups.length) return;
+
+    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 };
+    }).filter(d => d.values.length);
+
+    if (!groupSeries.length) return;
+
+    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 (!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.1;
+        yMin -= pad;
+        yMax += pad;
+    }
+    if (rawYMin >= 0) yMin = Math.max(0, yMin);
+    if (rawYMax <= 0) yMax = Math.min(0, yMax);
+    if (yMin > 0 && (yMax - yMin) / Math.max(1, Math.abs(yMax)) > 0.55) yMin = 0;
+
+    const cols = groupSeries.length <= 2 ? groupSeries.length : (groupSeries.length <= 4 ? 2 : 3);
+    const rows = Math.ceil(groupSeries.length / cols);
+    const outer = { top: 20, right: 22, bottom: 28, left: 22 };
+    const gapX = variables.has_spacing === false ? 14 : 20;
+    const gapY = variables.has_spacing === false ? 18 : 24;
+    const panelWidth = (width - outer.left - outer.right - gapX * (cols - 1)) / cols;
+    const panelHeight = (height - outer.top - outer.bottom - gapY * (rows - 1)) / rows;
+    const plot = {
+        left: Math.min(50, Math.max(40, panelWidth * 0.18)),
+        right: 14,
+        top: 52,
+        bottom: 36
+    };
+    const innerWidth = Math.max(80, panelWidth - plot.left - plot.right);
+    const innerHeight = Math.max(70, panelHeight - plot.top - plot.bottom);
+    const tickCount = innerWidth < 145 ? 2 : (innerWidth < 230 ? 3 : 4);
+    const xTicks = selectEvenTicks(xValues, tickCount);
+
+    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 < 95 ? 3 : 4);
+    const yDomain = yScale.domain();
+    const areaBaselineValue = Math.max(yDomain[0], Math.min(0, yDomain[1]));
+    const areaBaselineY = yScale(areaBaselineValue);
+
+    const palette = d3.schemeTableau10 || d3.schemeCategory10;
+    const colorScale = d3.scaleOrdinal()
+        .domain(groups)
+        .range(groups.map((group, index) => {
+            if (colorField[group]) return colorField[group];
+            return splinePalette[index % splinePalette.length] || palette[index % palette.length] || primaryColor;
+        }));
+
+    function formatXTick(date) {
+        const label = xLabelByTime.get(date.getTime());
+        if (label) return label;
+        return d3.utcFormat("%Y")(date);
+    }
+
+    const yScaleNote = rawYMin >= 0
+        ? "Shared y-scale starts at zero for nonnegative data."
+        : "All panels use a shared y-scale from the original values.";
+
+    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);
+
+    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 panelGradient = defs.append("linearGradient")
+        .attr("id", "small_multiples_spline_01_panel_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    panelGradient.append("stop").attr("offset", "0%").attr("stop-color", "#fffefb");
+    panelGradient.append("stop").attr("offset", "100%").attr("stop-color", panelColor);
+    const cardShadow = defs.append("filter")
+        .attr("id", "small_multiples_spline_01_card_shadow")
+        .attr("x", "-12%")
+        .attr("y", "-18%")
+        .attr("width", "124%")
+        .attr("height", "140%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 1.4)
+        .attr("stdDeviation", 1.5)
+        .attr("flood-color", "#456351")
+        .attr("flood-opacity", 0.12);
+
+    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", 9)
+        .attr("y", 9)
+        .attr("width", width - 18)
+        .attr("height", height - 18)
+        .attr("rx", 12)
+        .attr("ry", 12)
+        .attr("fill", "url(#small_multiples_spline_01_panel_gradient)")
+        .attr("stroke", "rgba(111, 168, 67, 0.28)")
+        .attr("stroke-width", 1.1);
+
+    groupSeries.forEach((series, 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 panel = svg.append("g")
+            .attr("class", "subplot")
+            .attr("data-group", series.group)
+            .attr("transform", `translate(${panelX}, ${panelY})`);
+
+        panel.append("rect")
+            .attr("class", "subplot-background subplot-card")
+            .attr("width", panelWidth)
+            .attr("height", panelHeight)
+            .attr("rx", 10)
+            .attr("ry", 10)
+            .attr("fill", cardColor)
+            .attr("stroke", rgba(colorScale(series.group), 0.22))
+            .attr("stroke-width", 0.9)
+            .style("filter", "url(#small_multiples_spline_01_card_shadow)");
+
+        panel.append("rect")
+            .attr("class", "subplot-accent")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", panelWidth)
+            .attr("height", 30)
+            .attr("rx", 10)
+            .attr("ry", 10)
+            .attr("fill", rgba(colorScale(series.group), 0.14))
+            .attr("stroke", rgba(colorScale(series.group), 0.36))
+            .attr("stroke-width", 0.8);
+
+        const titleLines = wrapText(series.group, Math.max(9, Math.floor((panelWidth - 20) / 7.2)));
+        panel.append("circle")
+            .attr("class", "group-swatch")
+            .attr("cx", 21)
+            .attr("cy", 15)
+            .attr("r", 6)
+            .attr("fill", colorScale(series.group))
+            .attr("opacity", 0.94);
+
+        const title = panel.append("text")
+            .attr("class", "label group-label")
+            .attr("data-group", series.group)
+            .attr("x", 34)
+            .attr("y", 19)
+            .attr("text-anchor", "start")
+            .style("font-family", titleFamily)
+            .style("font-size", `${Math.max(10, Math.min(baseTitleSize, 13))}px`)
+            .style("font-weight", titleWeight)
+            .style("fill", textColor);
+        titleLines.slice(0, 3).forEach((lineText, lineIndex) => {
+            title.append("tspan")
+                .attr("x", 34)
+                .attr("dy", lineIndex === 0 ? 0 : 12)
+                .text(lineText);
+        });
+
+        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")
+                .attr("x1", 0)
+                .attr("x2", innerWidth)
+                .attr("y1", yScale(tick))
+                .attr("y2", yScale(tick))
+                .attr("stroke", rgba(secondaryColor, 0.16))
+                .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")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(8.5, Math.min(baseLabelSize, 10))}px`)
+                .style("font-weight", labelWeight)
+                .style("fill", rgba(textColor, 0.62))
+                .text(formatWithUnit(tick, yUnit));
+        });
+
+        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.28))
+            .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.36))
+                .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")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(8.2, Math.min(baseLabelSize, 9.5))}px`)
+                .style("font-weight", labelWeight)
+                .style("fill", rgba(textColor, 0.72))
+                .text(formatXTick(tick));
+        });
+
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "spline-area mark")
+            .attr("data-group", series.group)
+            .attr("data-count", series.values.length)
+            .attr("fill", rgba(colorScale(series.group), 0.16))
+            .attr("stroke", "none")
+            .attr("d", area);
+
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "spline line mark")
+            .attr("data-group", series.group)
+            .attr("data-count", series.values.length)
+            .attr("data-latest-value", series.values[series.values.length - 1]?.value ?? "")
+            .attr("fill", "none")
+            .attr("stroke", colorScale(series.group))
+            .attr("stroke-width", variables.has_stroke === false ? 2.6 : 3.2)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("d", spline);
+
+        chart.selectAll(".point")
+            .data(series.values)
+            .enter()
+            .append("circle")
+            .attr("class", "point mark")
+            .attr("data-group", series.group)
+            .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", 3)
+            .attr("fill", "#ffffff")
+            .attr("stroke", colorScale(series.group))
+            .attr("stroke-width", 1.7);
+
+        const lastPoint = series.values[series.values.length - 1];
+        if (lastPoint) {
+            const latestText = formatWithUnit(lastPoint.value, yUnit);
+            const latestFontSize = Math.max(8.5, Math.min(baseValueSize, 10.5));
+            const latestY = Math.max(9, Math.min(innerHeight - 5, yScale(lastPoint.value) - 8));
+            const pillWidth = Math.max(34, latestText.length * latestFontSize * 0.58 + 12);
+            chart.append("rect")
+                .attr("class", "latest-value-pill")
+                .attr("data-group", series.group)
+                .attr("x", innerWidth - pillWidth)
+                .attr("y", latestY - latestFontSize + 1)
+                .attr("width", pillWidth)
+                .attr("height", latestFontSize + 8)
+                .attr("rx", 7)
+                .attr("ry", 7)
+                .attr("fill", "#fffdf8")
+                .attr("stroke", rgba(colorScale(series.group), 0.32))
+                .attr("stroke-width", 0.9);
+            chart.append("text")
+                .attr("class", "value latest-value")
+                .attr("data-group", series.group)
+                .attr("data-time", lastPoint.time)
+                .attr("data-label", lastPoint.label)
+                .attr("data-value", lastPoint.value)
+                .attr("x", innerWidth)
+                .attr("y", latestY)
+                .attr("text-anchor", "end")
+                .style("font-family", valueFamily)
+                .style("font-size", `${latestFontSize}px`)
+                .style("font-weight", valueWeight)
+                .style("fill", colorScale(series.group))
+                .text(latestText);
+        }
+    });
+
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", width / 2)
+        .attr("y", height - 13)
+        .attr("text-anchor", "middle")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(8, Math.min(baseValueSize, 10))}px`)
+        .style("font-style", "italic")
+        .style("fill", rgba(textColor, 0.58))
+        .text(yScaleNote);
+
+    return svg.node();
+}