update

app/src/content/embeds/d3-line.html

@@ -119,19 +119,18 @@
         display: 'flex',
         gap: '16px',
         alignItems: 'center',
-        justifyContent: 'flex-start',
+        justifyContent: 'space-between',
         width: '100%'
       });
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px'
+        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
       Object.assign(selectMetric.style, { fontSize: '12px' });
       labelMetric.appendChild(selectMetric);
-      controls.appendChild(labelMetric);
 
       // Inline legend on the right of the select
       const legendInline = document.createElement('div');
@@ -141,9 +140,11 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px'
+        fontSize: '11px',
+        marginLeft: '8px'
       });
       controls.appendChild(legendInline);
+      controls.appendChild(labelMetric);
 
       // Create SVG
       const svg = d3.select(container).append('svg')
@@ -224,11 +225,20 @@
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
+        // Compute integer ticks for Y
+        const yDomain = yScale.domain();
+        const yMin = Math.min(yDomain[0], yDomain[1]);
+        const yMax = Math.max(yDomain[0], yDomain[1]);
+        let yStep = Math.max(1, Math.round((yMax - yMin) / 6));
+        if (!isFinite(yStep) || yStep <= 0) yStep = 1;
+        let yIntTicks = [];
+        for (let v = Math.ceil(yMin); v <= Math.floor(yMax); v += yStep) { yIntTicks.push(v); }
+        if (yIntTicks.length === 0) { yIntTicks = [Math.round(yMin), Math.round(yMax)]; }
+
         // Grid (horizontal)
         gGrid.selectAll('*').remove();
-        const yTicks = yScale.ticks(6);
         gGrid.selectAll('line')
-          .data(yTicks)
+          .data(yIntTicks)
           .join('line')
           .attr('x1', 0)
           .attr('x2', innerWidth)
@@ -241,7 +251,7 @@
         // Axes
         gAxes.selectAll('*').remove();
         const xAxis = d3.axisBottom(xScale).ticks(8).tickSizeOuter(0);
-        const yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0).tickFormat(d3.format('.2f'));
+        const yAxis = d3.axisLeft(yScale).tickValues(yIntTicks).tickSizeOuter(0).tickFormat(d3.format('d'));
         gAxes.append('g')
           .attr('transform', `translate(0,${innerHeight})`)
           .call(xAxis)
@@ -268,7 +278,7 @@
         gAxes.append('text')
           .attr('class', 'axis-label axis-label--y')
           .attr('text-anchor', 'middle')
-          .attr('transform', `translate(${-52},${innerHeight/2}) rotate(-90)`) 
+          .attr('transform', `translate(${-44},${innerHeight/2}) rotate(-90)`) 
           .style('font-size', '12px')
           .style('fill', tickColor)
           .text('Value');

app/src/content/embeds/d3-pie.html

@@ -77,20 +77,20 @@
       }));
 
       // Layout
-      let width=800, height=460; const margin = { top: 8, right: 24, bottom: 60, left: 24 };
+      let width=800, height=450; const margin = { top: 0, right: 24, bottom: 32, left: 24 };
       const CAPTION_GAP = 28;   // espace entre titre et donut (augmenté)
       const LEGEND_GAP = 8;     // espace entre donut et légende (réduit)
       const updateSize = () => {
         width = container.clientWidth || 800;
-        height = Math.max(320, Math.round(width/2.5));
+        height = Math.max(260, Math.round(width/3.4));
         svg.attr('width', width).attr('height', height);
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
         return { innerWidth: width - margin.left - margin.right, innerHeight: height - margin.top - margin.bottom };
       };
 
-      function renderLegend(categories, colorOf, innerWidth, innerHeight){
+      function renderLegend(categories, colorOf, innerWidth, legendY){
         const legendHeight = 60;
-        gLegend.attr('x', 0).attr('y', innerHeight + LEGEND_GAP).attr('width', innerWidth).attr('height', legendHeight);
+        gLegend.attr('x', 0).attr('y', legendY).attr('width', innerWidth).attr('height', legendHeight);
         const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
         root.html(`<div class="items">${categories.map(c => `<div class="item"><span class="swatch" style="background:${colorOf(c)}"></span><span style="font-weight:500">${c}</span></div>`).join('')}</div>`);
       }
@@ -116,7 +116,7 @@
           return pool[idx % pool.length] || primary;
         };
 
-        renderLegend(categories, colorOf, innerWidth, innerHeight);
+        // Legend will be positioned after radius is known
 
         // Clear plots
         gPlots.selectAll('*').remove();
@@ -133,6 +133,11 @@
         const arc = d3.arc().innerRadius(innerR).outerRadius(radius).cornerRadius(3);
         const arcLabel = d3.arc().innerRadius((innerR + radius) / 2).outerRadius((innerR + radius) / 2);
 
+        // Now that radius is known, position legend just beneath donuts
+        const tempCy = innerHeight / 2;
+        const legendY = tempCy + radius + (CAPTION_GAP * 2);
+        renderLegend(categories, colorOf, innerWidth, legendY);
+
         const captions = new Map(METRICS.map(m => [m.key, `${m.title}`]));
 
         METRICS.forEach((metric, idx) => {