Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type14_histogram/histogram_plain_chart_01.js

@@ -0,0 +1,467 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Histogram",
+    "chart_name": "histogram_plain_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["temporal"], ["numerical"]],
+    "required_fields_range": [[15, 50], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary", "background"],
+    "supported_effects": ["gradient", "opacity"],
+    "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 colorResolver = chartUtils.color.resolver(data);
+    const jsonData = data;
+    const chartData = jsonData.data && Array.isArray(jsonData.data.data)
+        ? jsonData.data.data
+        : (Array.isArray(jsonData.data) ? jsonData.data : []);
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Georgia", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+
+    d3.select(containerSelector).html("");
+
+    const width = Number(variables.width) || 625;
+    const height = Number(variables.height) || 486;
+    const primary = colorResolver.other("primary").value || "#6EAD38";
+    const textColor = colorResolver.text({ fallback: "#1E3020" }).value || "#1E3020";
+    const labelFamily = (typography.label && typography.label.font_family) || "Arial";
+    const annotationFamily = (typography.annotation && typography.annotation.font_family) || labelFamily;
+
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+    const xField = xChannel.key || "period";
+    const yField = yChannel.key || "value";
+    const yUnit = yChannel.unit && yChannel.unit !== "none" ? yChannel.unit : "";
+
+    function parseTimeValue(value) {
+        const parsed = chartUtils.format.parseDate(value);
+        if (parsed instanceof Date && !Number.isNaN(parsed.getTime())) return parsed;
+        const match = String(value).match(/\d{4}/);
+        const year = match ? Number(match[0]) : NaN;
+        return Number.isFinite(year) ? new Date(year, 0, 1) : new Date(0);
+    }
+
+    function readableName(value) {
+        return String(value || "")
+            .replace(/[_-]+/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function wrapWords(text, maxChars, maxLines) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const next = line ? `${line} ${word}` : word;
+            if (next.length > maxChars && line) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = next;
+            }
+        });
+        if (line) lines.push(line);
+        return lines.slice(0, maxLines);
+    }
+
+    function intersects(a, b, pad = 0) {
+        return !(a.x + a.w + pad < b.x || b.x + b.w + pad < a.x ||
+            a.y + a.h + pad < b.y || b.y + b.h + pad < a.y);
+    }
+
+    function overlapArea(a, b, pad = 0) {
+        const x0 = Math.max(a.x - pad, b.x - pad);
+        const y0 = Math.max(a.y - pad, b.y - pad);
+        const x1 = Math.min(a.x + a.w + pad, b.x + b.w + pad);
+        const y1 = Math.min(a.y + a.h + pad, b.y + b.h + pad);
+        return Math.max(0, x1 - x0) * Math.max(0, y1 - y0);
+    }
+
+    const processedData = chartData
+        .map((d, i) => ({
+            raw: d,
+            time: parseTimeValue(d[xField]),
+            value: Number(d[yField]),
+            label: String(d[xField]),
+            order: i
+        }))
+        .filter(d => Number.isFinite(d.value));
+
+    processedData.sort((a, b) => a.time - b.time || a.order - b.order);
+    processedData.forEach((d, i) => { d.order = i; });
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const shadow = defs.append("filter")
+        .attr("id", "histogram-soft-panel-shadow")
+        .attr("x", "-10%")
+        .attr("y", "-10%")
+        .attr("width", "120%")
+        .attr("height", "120%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 3)
+        .attr("stdDeviation", 4)
+        .attr("flood-color", "#2f4a21")
+        .attr("flood-opacity", 0.13);
+
+    const barGradient = defs.append("linearGradient")
+        .attr("id", "histogram-green-square-bar-gradient")
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "100%")
+        .attr("y2", "0%");
+    barGradient.append("stop").attr("offset", "0%").attr("stop-color", d3.color(primary)?.darker(0.45) || "#57932E");
+    barGradient.append("stop").attr("offset", "58%").attr("stop-color", primary);
+    barGradient.append("stop").attr("offset", "100%").attr("stop-color", d3.color(primary)?.brighter(0.55) || "#9BD257");
+
+    const panelX = Math.max(8, width * 0.025);
+    const panelY = Math.max(8, height * 0.035);
+    const panelW = width - panelX * 2;
+    const panelH = height - panelY - Math.max(10, height * 0.025);
+
+    svg.append("rect")
+        .attr("class", "histogram-reference-panel")
+        .attr("x", panelX)
+        .attr("y", panelY)
+        .attr("width", panelW)
+        .attr("height", panelH)
+        .attr("rx", Math.min(28, width * 0.035))
+        .attr("fill", "#FFFDF2")
+        .attr("stroke", "#DDE9C8")
+        .attr("stroke-width", 1.1)
+        .attr("filter", "url(#histogram-soft-panel-shadow)");
+
+    const unitPillW = Math.min(230, Math.max(145, panelW * 0.34));
+    const unitPillH = Math.max(30, Math.min(42, height * 0.075));
+    const unitPillX = panelX + Math.max(18, panelW * 0.07);
+    const unitPillY = panelY + Math.max(12, panelH * 0.035);
+    const unitGroup = svg.append("g")
+        .attr("class", "histogram-unit-pill")
+        .attr("transform", `translate(${unitPillX}, ${unitPillY})`);
+    unitGroup.append("rect")
+        .attr("width", unitPillW)
+        .attr("height", unitPillH)
+        .attr("rx", unitPillH / 2)
+        .attr("fill", "#F6F8EE")
+        .attr("stroke", "#DFE8CD");
+    unitGroup.append("circle")
+        .attr("class", "reserved-asset-slot unit-symbol-slot")
+        .attr("data-asset-slot", "unit-symbol-neutral")
+        .attr("data-reserved-slot", "unit_symbol_neutral_slot")
+        .attr("data-asset-source-policy", "neutral_chart_primitive")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("data-anchor", "unit-pill-left")
+        .attr("data-collision-rule", "inside unit pill and left of text")
+        .attr("data-bbox-policy", "cx/cy/r define visible neutral unit slot bbox")
+        .attr("cx", unitPillH / 2)
+        .attr("cy", unitPillH / 2)
+        .attr("r", unitPillH * 0.38)
+        .attr("fill", primary);
+    unitGroup.append("text")
+        .attr("x", unitPillH / 2)
+        .attr("y", unitPillH / 2 + 1)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .style("font-family", "Georgia, serif")
+        .style("font-weight", "700")
+        .style("font-size", `${Math.max(16, unitPillH * 0.55)}px`)
+        .style("fill", "#FFFFFF")
+        .text("$");
+    unitGroup.append("text")
+        .attr("x", unitPillH + 12)
+        .attr("y", unitPillH / 2 + 1)
+        .attr("dominant-baseline", "middle")
+        .style("font-family", labelFamily)
+        .style("font-weight", "800")
+        .style("font-size", `${Math.max(13, unitPillH * 0.36)}px`)
+        .style("fill", "#18381C")
+        .text(yUnit || readableName(yField));
+
+    const margin = {
+        top: unitPillY + unitPillH - panelY + Math.max(18, height * 0.035),
+        right: Math.max(18, width * 0.035),
+        bottom: Math.max(54, height * 0.12),
+        left: Math.max(76, width * 0.13)
+    };
+    const plotX = panelX + margin.left;
+    const plotY = panelY + margin.top;
+    const plotW = Math.max(120, panelW - margin.left - margin.right);
+    const plotH = Math.max(120, panelH - margin.top - margin.bottom);
+
+    svg.append("g")
+        .attr("class", "reserved-asset-slot header-illustration-policy")
+        .attr("data-asset-slot", "header-illustration")
+        .attr("data-reserved-slot", "header_illustration_slot")
+        .attr("data-slot-policy", "image2_or_retrieval_asset_reserved_only")
+        .attr("data-asset-source-policy", "image2_or_retrieval_asset;not-template-hardcoded")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("data-bbox", `${(width * 0.58).toFixed(2)},${(height * 0.08).toFixed(2)},${(width * 0.34).toFixed(2)},${(height * 0.22).toFixed(2)}`)
+        .attr("data-bbox-policy", "reference-ratio header safe-area metadata only; outer infographic layer emits the visible reserved slot")
+        .attr("data-mask-policy", "downstream image2/retrieval may place topic art only inside reserved header bbox; template emits no raster")
+        .attr("data-anchor", "outer-header-right-safe-area")
+        .attr("data-collision-rule", "owned by title/image layer; avoid title subtitle chart panel axes callout and canvas edge; chart template does not embed copied reference art");
+
+    if (!processedData.length) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .style("font-family", labelFamily)
+            .style("fill", textColor)
+            .text("No numeric data");
+        return svg.node();
+    }
+
+    const xScale = d3.scaleLinear()
+        .domain([0, Math.max(0, processedData.length - 1)])
+        .range([0, plotW]);
+    const yMax = d3.max(processedData, d => d.value) || 1;
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax * 1.08])
+        .range([plotH, 0])
+        .nice();
+    const binWidth = processedData.length > 1 ? plotW / processedData.length : plotW;
+    const barWidth = Math.max(3, Math.min(12, binWidth * 0.42));
+
+    const chartGroup = svg.append("g")
+        .attr("class", "histogram-plot")
+        .attr("transform", `translate(${plotX}, ${plotY})`);
+
+    const yTicks = yScale.ticks(6);
+    chartGroup.append("g")
+        .attr("class", "histogram-grid")
+        .selectAll("line")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("x1", 0)
+        .attr("x2", plotW)
+        .attr("y1", d => yScale(d))
+        .attr("y2", d => yScale(d))
+        .attr("stroke", "#C9D8BA")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4 4")
+        .attr("opacity", 0.82);
+
+    chartGroup.append("line")
+        .attr("class", "y-axis-line")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", 0)
+        .attr("y2", plotH)
+        .attr("stroke", d3.color(primary)?.darker(0.75) || "#2F6123")
+        .attr("stroke-width", 1.4);
+
+    chartGroup.append("line")
+        .attr("class", "x-axis-baseline")
+        .attr("x1", 0)
+        .attr("x2", plotW)
+        .attr("y1", plotH)
+        .attr("y2", plotH)
+        .attr("stroke", "#18381C")
+        .attr("stroke-width", 1.8);
+
+    chartGroup.append("g")
+        .attr("class", "y-axis-labels")
+        .selectAll("text")
+        .data(yTicks)
+        .enter()
+        .append("text")
+        .attr("x", -12)
+        .attr("y", d => yScale(d) + 4)
+        .attr("text-anchor", "end")
+        .style("font-family", "Georgia, serif")
+        .style("font-size", `${Math.max(12, Math.min(20, height * 0.035))}px`)
+        .style("font-weight", "700")
+        .style("fill", "#245A24")
+        .text(d => `$${chartUtils.format.autoText(d)}`);
+
+    const maxTicks = Math.max(5, Math.min(9, Math.floor(plotW / 68)));
+    const indexStep = Math.max(1, Math.ceil(processedData.length / maxTicks));
+    const tickIndices = [];
+    for (let i = 0; i < processedData.length; i += indexStep) tickIndices.push(i);
+    if (tickIndices[tickIndices.length - 1] !== processedData.length - 1) tickIndices.push(processedData.length - 1);
+    const minTickGap = Math.max(46, Math.min(62, plotW / 8));
+    const filteredTickIndices = tickIndices.filter((i, idx) => {
+        if (idx === 0 || i === processedData.length - 1) return true;
+        const prev = tickIndices.slice(0, idx).reverse().find(j => Math.abs(xScale(i) - xScale(j)) >= minTickGap);
+        return prev !== undefined;
+    }).filter((i, idx, arr) => idx === 0 || Math.abs(xScale(i) - xScale(arr[idx - 1])) >= minTickGap || i === processedData.length - 1);
+
+    chartGroup.append("g")
+        .attr("class", "x-axis-labels")
+        .selectAll("text")
+        .data(filteredTickIndices)
+        .enter()
+        .append("text")
+        .attr("x", i => xScale(i))
+        .attr("y", plotH + Math.max(18, height * 0.045))
+        .attr("text-anchor", (i, idx) => idx === 0 ? "start" : (idx === filteredTickIndices.length - 1 ? "end" : "middle"))
+        .style("font-family", labelFamily)
+        .style("font-size", `${Math.max(11, Math.min(14, height * 0.03))}px`)
+        .style("font-weight", "700")
+        .style("fill", "#2E3B31")
+        .text(i => chartUtils.format.date(processedData[i].time, { output: "%Y" }).text);
+
+    const barBoxes = processedData.map(d => ({
+        datum: d,
+        x: plotX + xScale(d.order) - barWidth / 2,
+        y: plotY + yScale(d.value),
+        w: barWidth,
+        h: plotH - yScale(d.value)
+    }));
+
+    chartGroup.selectAll(".bar")
+        .data(processedData)
+        .enter()
+        .append("rect")
+        .attr("class", "bar histogram-square-flat-bar")
+        .attr("data-x-value", d => d.label)
+        .attr("data-y-value", d => d.value)
+        .attr("x", d => xScale(d.order) - barWidth / 2)
+        .attr("y", d => yScale(d.value))
+        .attr("width", barWidth)
+        .attr("height", d => Math.max(0, plotH - yScale(d.value)))
+        .attr("rx", 0)
+        .attr("ry", 0)
+        .attr("fill", "url(#histogram-green-square-bar-gradient)")
+        .attr("stroke", "none");
+
+    const values = processedData.map(d => d.value);
+    const minValue = d3.min(values);
+    const maxValue = d3.max(values);
+    const firstValue = processedData[0].value;
+    const lastValue = processedData[processedData.length - 1].value;
+    const direction = lastValue - firstValue >= 0 ? "higher" : "lower";
+    const calloutW = Math.min(Math.max(154, plotW * 0.25), 180);
+    const calloutH = Math.min(Math.max(88, plotH * 0.28), 108);
+    const calloutCandidates = [
+        { x: plotX + plotW * 0.025, y: plotY + plotH * 0.055, zone: "plot" },
+        { x: plotX + plotW - calloutW - plotW * 0.06, y: plotY + plotH * 0.07, zone: "plot" },
+        { x: plotX + plotW * 0.025, y: plotY + plotH * 0.50, zone: "plot" },
+        { x: plotX + plotW - calloutW - plotW * 0.06, y: plotY + plotH * 0.48, zone: "plot" },
+        { x: plotX + plotW * 0.025, y: unitPillY + unitPillH + 9, zone: "panel-safe-band" },
+        { x: plotX + plotW - calloutW - plotW * 0.06, y: unitPillY + unitPillH + 9, zone: "panel-safe-band" }
+    ];
+    const fixedAvoid = [
+        { x: panelX, y: panelY, w: panelW, h: unitPillY + unitPillH - panelY + 6 },
+        { x: plotX - margin.left, y: plotY + plotH + 2, w: panelW, h: panelY + panelH - (plotY + plotH) }
+    ];
+    const scoredCallouts = calloutCandidates.map(c => {
+        const box = { x: c.x, y: c.y, w: calloutW, h: calloutH };
+        const insidePlot = box.x >= plotX + 2 && box.y >= plotY + 2 &&
+            box.x + box.w <= plotX + plotW - 2 && box.y + box.h <= plotY + plotH - 2;
+        const insidePanel = box.x >= panelX + 10 && box.y >= panelY + 10 &&
+            box.x + box.w <= panelX + panelW - 10 && box.y + box.h <= panelY + panelH - 10;
+        const inside = c.zone === "plot" ? insidePlot : insidePanel;
+        const fixedOverlap = fixedAvoid.reduce((sum, avoid) => sum + overlapArea(box, avoid, 4), 0);
+        const barOverlap = barBoxes.reduce((sum, bar) => sum + overlapArea(box, bar, 3), 0);
+        const tallBarOverlap = barBoxes
+            .filter(bar => bar.h > plotH * 0.45)
+            .reduce((sum, bar) => sum + overlapArea(box, bar, 4), 0);
+        return { box, zone: c.zone, inside, fixedOverlap, barOverlap, tallBarOverlap };
+    }).filter(d => d.inside && d.fixedOverlap === 0)
+        .sort((a, b) => (a.tallBarOverlap - b.tallBarOverlap) || (a.barOverlap - b.barOverlap));
+    const plotChoices = scoredCallouts.filter(d => d.zone === "plot");
+    const safeChoices = scoredCallouts.filter(d => d.zone !== "plot");
+    const bestPlot = plotChoices.length ? plotChoices[0] : null;
+    const maxPlotOverlap = 0;
+    const calloutChoice = bestPlot && bestPlot.tallBarOverlap === 0 && bestPlot.barOverlap <= maxPlotOverlap
+        ? bestPlot
+        : (safeChoices[0] || bestPlot || null);
+    const calloutBox = calloutChoice ? calloutChoice.box : null;
+
+    if (calloutBox && plotW > 260 && plotH > 180) {
+        const callout = svg.append("g")
+            .attr("class", "plot-callout floating-plot-relative")
+            .attr("data-coordinate-relationship", calloutChoice.zone === "plot" ? "floating_plot_relative" : "panel_safe_band_fallback")
+            .attr("data-anchor", "plot-bbox-with-bar-collision-avoidance-and-panel-fallback")
+            .attr("transform", `translate(${calloutBox.x}, ${calloutBox.y})`);
+        callout.append("rect")
+            .attr("width", calloutW)
+            .attr("height", calloutH)
+            .attr("rx", 14)
+            .attr("fill", "#F8FAEC")
+            .attr("stroke", "#C9DCB3")
+            .attr("stroke-width", 1.1);
+        callout.append("circle")
+            .attr("class", "reserved-asset-slot callout-badge-slot")
+            .attr("data-asset-slot", "callout-neutral-badge")
+            .attr("data-reserved-slot", "callout_neutral_badge_slot")
+            .attr("data-asset-source-policy", "neutral_chart_primitive")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("data-anchor", "callout-card-left")
+            .attr("data-collision-rule", "inside callout card and left of callout text")
+            .attr("data-bbox-policy", "cx/cy/r inside callout group define visible neutral badge bbox")
+            .attr("cx", 28)
+            .attr("cy", 30)
+            .attr("r", 18)
+            .attr("fill", primary)
+            .attr("opacity", 0.92);
+        callout.append("circle")
+            .attr("cx", 28)
+            .attr("cy", 30)
+            .attr("r", 6)
+            .attr("fill", "#FFFDF2")
+            .attr("opacity", 0.95);
+        callout.append("text")
+            .attr("x", 55)
+            .attr("y", 26)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(12, Math.min(17, height * 0.032))}px`)
+            .style("font-weight", "800")
+            .style("fill", "#245A24")
+        .text("Range in motion");
+        const body = `${readableName(yField)}: ${chartUtils.format.autoText(minValue)} to ${chartUtils.format.autoText(maxValue)}${yUnit ? ` ${yUnit}` : ""}. Latest ${direction}.`;
+        wrapWords(body, Math.max(18, Math.floor((calloutW - 32) / 7.2)), 3).forEach((line, i) => {
+            callout.append("text")
+                .attr("x", 18)
+                .attr("y", 58 + i * Math.max(14, height * 0.028))
+                .style("font-family", annotationFamily)
+                .style("font-size", `${Math.max(10, Math.min(13, height * 0.026))}px`)
+                .style("font-weight", "500")
+                .style("fill", "#253029")
+                .text(line);
+        });
+    }
+
+    svg.append("g")
+        .attr("class", "ignored-bottom-wrapper-policy")
+        .attr("data-ignored-reference-element", "bottom_takeaway_source_footer_rating_replacement_prose")
+        .attr("data-policy", "not-rendered");
+
+    return svg.node();
+}