/* === Fig_R6_gapTrajectoriesCompact — gap trajectories comparison (EU vs MERCOSUR, compact layout) === */ Fig_R6_gapTrajectoriesCompact = (async function ( longData, countriesUE, countriesMCS, yearsAll, Inputs, Plotly, require, html, d3 ) { const P = typeof Plotly !== "undefined" ? Plotly : await require("plotly.js-dist-min"); const getGlobal = (name) => typeof globalThis !== "undefined" && Object.prototype.hasOwnProperty.call(globalThis, name) ? globalThis[name] : undefined; const globalGapMeasure = getGlobal("gapMeasure"); const globalExtMode = getGlobal("extMode"); // -------- helpers -------- const uniq = (a) => [...new Set(a)]; const asc = (a, b) => a - b; const unitFor = (flowName) => { const u = uniq( (longData || []) .filter((d) => d.flow === flowName) .map((d) => d.unit) .filter(Boolean) ); return u.length ? u[0] : ""; }; const mapFlow = (flowName) => { const M = new Map(); for (const d of longData || []) { if (d.flow !== flowName) continue; let m = M.get(d.country); if (!m) { m = new Map(); M.set(d.country, m); } m.set(+d.year, +d.value); } return M; }; // ---- flows & units ---- const useCap = typeof globalExtMode === "string" && /\/cap/i.test(globalExtMode); const MFf = useCap ? "MF/cap" : "MF"; const DMCf = useCap ? "DMC/cap" : "DMC"; const unitLbl = unitFor(MFf) || ""; const MFM = mapFlow(MFf); const DMCM = mapFlow(DMCf); const EU = Array.isArray(countriesUE) ? countriesUE : []; const MCS = Array.isArray(countriesMCS) ? countriesMCS : []; const buildRows = (countries) => { const rows = []; for (const c of countries) { const mmf = MFM.get(c) || new Map(); const mdmc = DMCM.get(c) || new Map(); const ys = uniq([...mmf.keys(), ...mdmc.keys()]).sort(asc); for (const y of ys) { const a = mmf.get(y), b = mdmc.get(y); if (!Number.isFinite(a) || !Number.isFinite(b)) continue; const gap_level = a - b; const gap_share = Number.isFinite(a) && a !== 0 ? (a - b) / a : NaN; rows.push({ country: c, year: y, gap_level, gap_share }); } } return rows; }; const ue = buildRows(EU); const mcs = buildRows(MCS); // -------- UI (compact: years on top, bloc left and measure right) -------- const yMin = yearsAll?.[0] ?? Math.min(...(longData || []).map((d) => d.year)); const yMax = yearsAll?.at?.(-1) ?? Math.max(...(longData || []).map((d) => d.year)); const startInp = Inputs.range([yMin, (yMax || 2024) - 1], { label: "Start year", value: Math.max(1994, yMin), step: 1 }); const endInp = Inputs.range([() => +startInp.value + 1, yMax || 2024], { label: "End year", value: Math.min(2024, yMax || 2024), step: 1 }); const blocInp = Inputs.radio(["EU", "MERCOSUR", "Both"], { label: "Bloc", value: "Both" }); const initialMode = typeof globalGapMeasure === "string" && /share/i.test(globalGapMeasure) ? "Share" : "Level"; const measInp = Inputs.radio(["Level", "Share"], { label: "Measure", value: initialMode }); // Two-row layout: years on top, bloc left and measure right const controls = html`

${startInp}

${endInp}

${blocInp} ${measInp}

`; const container = html`

`; const chartBox = html`

`; container.append(controls, chartBox); // -------- stats & drawing -------- const stat = (rows, yearsSel, key) => { const grouped = d3.group( rows.filter((d) => yearsSel.has(d.year)), (d) => d.year ); const YY = [...yearsSel].sort(asc); return YY.map((y) => { const vals = (grouped.get(y) || []) .map((d) => d[key]) .filter(Number.isFinite) .sort(asc); return { year: y, med: vals.length ? d3.median(vals) : NaN, q1: vals.length ? d3.quantileSorted(vals, 0.25) : NaN, q3: vals.length ? d3.quantileSorted(vals, 0.75) : NaN }; }); }; const addCountryRibbons = ( rows, label, yearsSel, traces, color, key, mode ) => { const byC = d3.group( rows.filter((d) => yearsSel.has(d.year)), (d) => d.country ); for (const [c, arr] of byC) { const xs = arr.map((d) => d.year).sort(asc); const map = new Map(arr.map((d) => [d.year, d[key]])); const ys = xs.map((x) => map.get(x)); if (!ys.some(Number.isFinite)) continue; traces.push({ x: xs, y: ys, type: "scatter", mode: "lines", line: { width: 1.5, color }, name: `${label} — ${c}`, legendgroup: label, showlegend: false, hovertemplate: `${label} · ${c}
Year %{x}` + `
${mode === "Share" ? "Gap share" : "Gap level"}: ` + `%{y:.3f}${ mode === "Share" ? "" : unitLbl ? " " + unitLbl : "" }` }); } }; const band = (S, fillColor, label, medColor, mode) => { const xs = S.map((d) => d.year); const q1 = S.map((d) => d.q1); const q3 = S.map((d) => d.q3); const med = S.map((d) => d.med); return [ { x: xs, y: q1, type: "scatter", mode: "lines", line: { width: 0 }, name: `${label} — IQR`, legendgroup: label, showlegend: false, hoverinfo: "skip" }, { x: xs, y: q3, type: "scatter", mode: "lines", fill: "tonexty", fillcolor: fillColor, line: { width: 0 }, name: `${label} — IQR`, legendgroup: label, showlegend: false, hoverinfo: "skip" }, { x: xs, y: med, type: "scatter", mode: "lines", line: { width: 3, color: medColor }, name: `${label} — median`, legendgroup: label, showlegend: true, hovertemplate: `${label} — median
Year %{x}` + `
${mode === "Share" ? "Gap share" : "Gap level"}: ` + `%{y:.3f}${ mode === "Share" ? "" : unitLbl ? " " + unitLbl : "" }` } ]; }; const colorCountryEU = "rgba(31,119,180,0.18)"; const colorCountryMCS = "rgba(255,127,14,0.18)"; const colorBandEU = "rgba(31,119,180,0.22)"; const colorBandMCS = "rgba(255,127,14,0.22)"; const colorMedEU = "#1f77b4"; const colorMedMCS = "#ff7f0e"; async function render() { const y0 = +startInp.value, y1 = +endInp.value; const yearsSel = new Set( uniq((longData || []).map((d) => d.year)) .filter((y) => y >= y0 && y <= y1) .sort(asc) ); const mode = measInp.value; const key = mode === "Share" ? "gap_share" : "gap_level"; const traces = []; // Conditional rendering based on bloc selection if (blocInp.value === "EU" || blocInp.value === "Both") { addCountryRibbons(ue, "EU", yearsSel, traces, colorCountryEU, key, mode); traces.push( ...band(stat(ue, yearsSel, key), colorBandEU, "EU", colorMedEU, mode) ); } if (blocInp.value === "MERCOSUR" || blocInp.value === "Both") { addCountryRibbons( mcs, "MERCOSUR", yearsSel, traces, colorCountryMCS, key, mode ); traces.push( ...band( stat(mcs, yearsSel, key), colorBandMCS, "MERCOSUR", colorMedMCS, mode ) ); } const yTitle = mode === "Share" ? "Externalisation gap (share of MF)" : `Externalisation gap (MF − DMC)${ unitLbl ? " [" + unitLbl + "]" : "" }`; const titleText = `Gap trajectories (bloc medians with country ribbons) — ${y0}–${y1}`; const shapes = []; if (y0 <= 2021 && y1 >= 2020) { shapes.push({ type: "rect", xref: "x", yref: "paper", x0: Math.max(2020, y0) - 0.5, x1: Math.min(2021, y1) + 0.5, y0: 0, y1: 1, fillcolor: "#000000", opacity: 0.1, line: { width: 0 } }); } const layout = { template: "plotly_white", title: { text: titleText, x: 0.5, xanchor: "center", font: { family: "inherit", size: 14 } }, margin: { t: 56, r: 18, b: 54, l: 68 }, xaxis: { title: "Year", range: [y0 - 0.25, y1 + 0.25], tickmode: "linear", dtick: y1 - y0 > 20 ? 5 : 1, gridcolor: "#eee" }, yaxis: { title: yTitle, zeroline: false, gridcolor: "#eee" }, legend: { orientation: "h", y: -0.12, x: 0, xanchor: "left" }, shapes, hovermode: "closest", hoverlabel: { namelength: -1 } }; const config = { displaylogo: false, responsive: true, modeBarButtonsToRemove: ["lasso2d", "select2d", "autoScale2d"] }; await P.newPlot(chartBox, traces, layout, config); } startInp.addEventListener("input", render); endInp.addEventListener("input", render); blocInp.addEventListener("input", render); measInp.addEventListener("input", render); await render(); if (invalidation) invalidation.then(() => { try { P.purge(chartBox); } catch {} }); return container; })( longData, countriesUE, countriesMCS, yearsAll, Inputs, Plotly, require, html, d3 )