29:null 2a:["$","title",null,{"children":"Test legende interactive pour carte | Marc Thevenin | Observable"}] 2f:T3655,function legendClasses(source, { length = 300, // longueur de la rampe (axe principal, selon orientation) thickness = 16, // épaisseur des rectangles de couleur tickSize = 5, decimals = 0, // nombre de décimales (0 à 3), ignoré si "format" fourni decimalSeparator = ".", // "." ou ",", ignoré si "format" fourni format = null, // si fourni, prend le dessus sur decimals/decimalSeparator minLabelSpacing = 6, // marge de respiration mini entre labels (en plus de leur largeur mesurée) title = null, orientation = "horizontal", // "horizontal" | "vertical" labelReserve = 34, // espace réservé aux labels en mode vertical noData = null, // { label, color, show, stroke, strokeWidth }. Si null, auto-détecté depuis "source" (geoviz) cssWidth = null, // --- sélection groupée ("tout sélectionner / tout désélectionner") --- selectAll = false, // affiche le bouton tout sélectionner/désélectionner lang = "fr", // "fr" | "en" | "jp" labels = {}, // surcharge ponctuelle du dictionnaire de traduction (ex: { selectAll: "..." }) // --- options esthétiques --- fontSize = null, // taille des labels : nombre (px) OU chaîne CSS ("clamp(9px, 1vw, 12px)"...). null = défaut CSS (10px) titleFontSize = null, // taille du titre : nombre (px) OU chaîne CSS. null = calc(fontSize * 1.2) fontFamily = null, // police des labels/titre. null = défaut CSS (sans-serif) strokeColor = "#fff", // couleur du contour entre les classes de la rampe strokeWidth = 0.5, // épaisseur du contour entre les classes de la rampe deselectedColor = null, // couleur unie pour les classes désélectionnées. null = comportement par défaut (opacité réduite) deselectedOpacity = 0.25 // opacité appliquée aux classes désélectionnées si deselectedColor n'est pas fourni } = {}) { const isVertical = orientation === "vertical"; const width = length; // alias interne, garde le corps de fonction lisible const height = thickness; // --- dictionnaire de traduction, même principe que legend() --- const dict = { fr: { selectAll: "Tout sélectionner", deselectAll: "Tout désélectionner" }, en: { selectAll: "Select all", deselectAll: "Select none" }, jp: { selectAll: "すべて選択", deselectAll: "すべて選択を解除" } }; const t = { ...(dict[lang] ?? dict.fr), ...labels }; const iconAllOn = ``; const iconAllOff = ``; // format construit à partir de decimals/decimalSeparator, sauf si "format" est fourni const fmt = format || ((v) => { const s = d3.format(`.${decimals}f`)(v); return decimalSeparator === "," ? s.replace(".", ",") : s; }); // --- résolution de la source : scale d3 classique OU objet { breaks, colors } (type geoviz choro()) --- const isD3Scale = typeof source?.range === "function" && typeof source?.invertExtent === "function"; const isBreaksColors = Array.isArray(source?.breaks) && Array.isArray(source?.colors); let colors, classes, colorize, autoNoData = null; if (isD3Scale) { colors = source.range(); classes = colors.map((color, i) => { const [x0, x1] = source.invertExtent(color); return { index: i, x0, x1, color }; }); colorize = (value) => colors.indexOf(source(value)); } else if (isBreaksColors) { const breaks = source.breaks; colors = source.colors; classes = colors.map((color, i) => ({ index: i, x0: breaks[i], x1: breaks[i + 1], color })); colorize = typeof source.colorize === "function" ? (value) => classes.findIndex(c => c.color === source.colorize(value)) : (value) => { if (value == null || Number.isNaN(value)) return -1; for (let i = 0; i < classes.length; i++) { const { x0, x1 } = classes[i]; const inRange = i === classes.length - 1 ? (value >= x0 && value <= x1) : (value >= x0 && value < x1); if (inRange) return i; } return -1; }; if (source.missing) { autoNoData = { label: "Pas de données", color: source.missing_fill || "#ccc", show: true }; } } else { throw new Error( "legendClasses: source non reconnue. Attendu : une échelle d3 (.range()/.invertExtent()) ou un objet { breaks, colors }." ); } const n = colors.length; const segSize = width / n; const active = new Set(classes.map(c => c.index)); // --- config "pas de données" : fusion entre l'auto-détection (geoviz) et les surcharges explicites --- const resolvedNoData = (autoNoData || noData) ? { ...autoNoData, ...noData } : null; const showNoData = !!(resolvedNoData && resolvedNoData.show !== false); const noDataColor = (resolvedNoData && resolvedNoData.color) || "#ccc"; const noDataLabel = (resolvedNoData && resolvedNoData.label) || "Pas de données"; const noDataStroke = (resolvedNoData && resolvedNoData.stroke) || "#999"; const noDataStrokeWidth = (resolvedNoData && resolvedNoData.strokeWidth) ?? strokeWidth; const noDataWidth = isVertical ? height : segSize; const noDataHeight = height; const noDataGap = 10; // --- dimensions totales du SVG (viewBox) --- let svgWidth, svgHeight; if (!isVertical) { svgWidth = width; svgHeight = height + tickSize + 16 + (showNoData ? noDataGap + noDataHeight : 0); } else { svgWidth = Math.max(height + tickSize + labelReserve, showNoData ? noDataWidth + 90 : 0); svgHeight = width + (showNoData ? noDataGap + noDataHeight : 0); } // --- DOM --- const root = html`

`; root.style.width = "100%"; if (fontSize !== null) { root.style.setProperty("--legend-font-size", typeof fontSize === "number" ? `${fontSize}px` : fontSize); } if (titleFontSize !== null) { root.style.setProperty("--legend-title-font-size", typeof titleFontSize === "number" ? `${titleFontSize}px` : titleFontSize); } if (fontFamily !== null) { root.style.setProperty("--legend-font-family", fontFamily); } if (cssWidth) { root.style.maxWidth = "none"; root.style.width = cssWidth; } else if (!isVertical) { root.style.maxWidth = `${width}px`; } else { root.style.maxWidth = `${svgWidth}px`; } // --- header : titre + bouton "tout sélectionner/désélectionner", même agencement que legend() --- let selectAllBtn = null; if (title || selectAll) { const header = html`

`; if (title) { header.appendChild(html`

${title}

`); } if (selectAll) { selectAllBtn = html`