MediaWiki:Common.js: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 736: / Zeile 736: @@
    }
 });
+// -------------------------------------------------
+function isFlagTrue(v){
+  if (v == null) return false;
+  v = String(v).trim().toLowerCase();
+  return v === 'true' || v === '1' || v === 'yes';
+}
+// Gesamtzahl unter der Legende einfügen (im Diagramm-Block, nicht im Canvas!)
+function addTotalBelowLegend(chart, block) {
+  try {
+    if (!chart || !block) return;
+    // Summe aller Werte berechnen
+    const total = chart.data.datasets.reduce((sum, ds) =>
+      sum + (ds.data || []).reduce((a, b) => a + (parseFloat(b) || 0), 0)
+    , 0);
+    // Bestehende Anzeige entfernen (falls Neurender)
+    const oldInfo = block.querySelector(':scope > .chart-total-info');
+    if (oldInfo) oldInfo.remove();
+    // Neue Anzeige einfügen
+    const info = document.createElement('div');
+    info.className = 'chart-total-info';
+    info.textContent = 'Gesamt: ' + total;
+    info.style.textAlign = 'center';
+    info.style.fontWeight = 'bold';
+    info.style.fontSize = '1.05em';
+    info.style.marginTop = '0.5rem';
+    info.style.marginBottom = '0.5rem';
+    info.style.color = '#444';
+    block.appendChild(info);
+  } catch(e) { console.warn('[addTotalBelowLegend]', e); }
+}
@@ Zeile 890: / Zeile 928: @@
    }
-  ensureChartJS().then(function(){
+ensureChartJS().then(function(){
-    new Chart(canvas.getContext('2d'), {
+  const chart = new Chart(canvas.getContext('2d'), {
-      type: type,
+    type: type,
-      data: { labels: out.labels, datasets: out.datasets },
+    data: { labels: out.labels, datasets: out.datasets },
-      options: {
+    options: {
-        responsive: true,
+      responsive: true,
-        maintainAspectRatio: false,
+      maintainAspectRatio: false,
-        interaction: { mode: 'nearest', intersect: false },
+      interaction: { mode: 'nearest', intersect: false },
-        plugins: {
+      plugins: {
-          legend: { position: 'bottom', labels: { font: { size: 13 }, boxWidth: 20 } },
+        legend: { position: 'bottom', labels: { font: { size: 13 }, boxWidth: 20 } },
-          title:  { display: !!title, text: title, font: { size: 16 } },
+        title:  { display: !!title, text: title, font: { size: 16 } },
-          tooltip:{ backgroundColor: 'rgba(0,0,0,0.8)', titleFont: {size:14}, bodyFont: {size:13} }
+        tooltip:{ backgroundColor: 'rgba(0,0,0,0.8)', titleFont: {size:14}, bodyFont: {size:13} }
-        },
+      },
-        scales: {
+      scales: {
-          x: { ticks: { font: { size: 12 } } },
+        x: { ticks: { font: { size: 12 } } },
-          y: { beginAtZero: true, ticks: { precision: 0, font: { size: 12 } } }
+        y: { beginAtZero: true, ticks: { precision: 0, font: { size: 12 } } }
-        }
        }
-     });
+     }
+  });
+  // --- NEU ---
+  const hideTotal = (block.dataset.hideTotal || '').toLowerCase() === 'true';
+  // existierende Anzeige entfernen (falls Seite neu gerendert wird)
+  const oldInfo = block.querySelector(':scope > .chart-total-info');
+  if (oldInfo) oldInfo.remove();
+  if (!hideTotal) {
+    // Gesamtzahl einfügen
+    addTotalBelowLegend(chart, block);
+    // bei Größenänderung (mobil <-> desktop) neu berechnen
+    if (window.ResizeObserver) {
+      const obs = new ResizeObserver(() => addTotalBelowLegend(chart, block));
+      obs.observe(chart.canvas);
+      chart.$adosTotalObserver = obs;
+    }
+  }
+  block.dataset.rendered = '1';
+});
-    // markiere als gerendert (verhindert Doppelaufbau)
-    block.dataset.rendered = '1';
-  });
 }