MediaWiki:Common.js: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 897: / Zeile 897: @@
    }
 })();
+// -Einzelauflistung unsichtbar-
+// --- Diagramm-Renderer mit optionalem Tabellen-Hide -------------------------
+function renderMultiChart(block){
+  // nächste Tabelle NACH dem Container finden
+  let tbl = block.nextElementSibling;
+  while (tbl && tbl.tagName !== 'TABLE') tbl = tbl.nextElementSibling;
+  if (!tbl) return;
+  // Daten aus der Tabelle lesen
+  const { labels, datasets } = buildDatasetsFromTable(tbl);
+  if (!labels.length || !datasets.length) return;
+  // Tabelle verstecken, wenn data-hide-table="true"
+  const hide = (block.dataset.hideTable || '').toLowerCase() === 'true';
+  if (hide) {
+    tbl.setAttribute('aria-hidden','true');
+    tbl.style.display = 'none';
+  }
+  // Canvas einsetzen
+  const wrap = document.createElement('div');
+  wrap.style.position = 'relative';
+  // mobile/desktop auto: 320px mobil, 450px ab ~768px
+  wrap.style.height = (window.matchMedia('(min-width: 768px)').matches ? '450px' : '320px');
+  wrap.style.width = '100%';
+  const canvas = document.createElement('canvas');
+  wrap.appendChild(canvas);
+  block.innerHTML = '';
+  block.appendChild(wrap);
+  const type  = (block.dataset.type  || 'line').toLowerCase();  // "line" | "bar"
+  const title = (block.dataset.title || '');
+  // Lesbare Schriften & Legende für Mobile
+  const axisFont = { size: 12 };
+  const legendFont = { size: 13 };
+  const titleFont  = { size: 16 };
+  ensureChartJS(function(){
+    new Chart(canvas.getContext('2d'), {
+      type,
+      data: { labels, datasets },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: { mode: 'nearest', intersect: false },
+        scales: {
+          y: { beginAtZero: true, ticks: { precision: 0, font: axisFont } },
+          x: { ticks: { font: axisFont } }
+        },
+        plugins: {
+          legend: { position: 'bottom', labels: { font: legendFont, boxWidth: 20 } },
+          title:  { display: !!title, text: title, font: titleFont },
+          tooltip:{ backgroundColor: 'rgba(0,0,0,0.8)', titleFont: {size:14}, bodyFont: {size:13} }
+        },
+        elements: {
+          line:  { tension: 0.25, borderWidth: 2 },
+          point: { radius: 3 }
+        }
+      }
+    });
+  });
+}
+// --- Auto-Start auf jeder Seite --------------------------------------------
+mw.hook('wikipage.content').add(function ($c) {
+  const scope = ($c && $c[0]) ? $c[0] : document;
+  const blocks = scope.querySelectorAll('.ados-chart-multi');
+  if (!blocks.length) return;
+  blocks.forEach(renderMultiChart);
+});