MediaWiki:Common.js: Unterschied zwischen den Versionen

/* === ADOS Multi-Serien-Chart (Chart.js + Cargo-Table) ===================== */

/* Fügt unter der Legende automatisch "Gesamt: N" ein und kann die Roh-Tabelle

  ausblenden (data-hide-table="true" am Container).

  Nutzung im Wikitext:

  <div class="ados-chart-multi" data-type="line|bar" data-title="…" data-hide-table="true"></div>

  {{#cargo_query: … |fields=Erscheinungsjahr=Jahr, Serie, COUNT(*)=Anzahl |group by=Jahr,Serie |format=table}}

*/

 

   // ---- Chart.js Laden (als Promise) ---------------------------------------

     if (window.Chart) return Promise.resolve();

     return new Promise(function (resolve, reject) {

       s.src = 'https://cdn.jsdelivr.net/npm/chart.js';

       s.onload = () => resolve();

       s.onerror = () => reject(new Error('Chart.js konnte nicht geladen werden'));

   // ---- Farbpalette (gut unterscheidbar, auch mobil & dark mode) -----------

   const ADOS_COLORS = {

     'A Dream of Scotland':               '#C2410C', // Kupfer

     'A Dream of Ireland':               '#15803D', // Grün

     'A Dream of... – Der Rest der Welt': '#1D4ED8', // Blau

     'Friendly Mr. Z':                   '#9333EA', // Violett

     'Die Whisky Elfen':                 '#0891B2', // Türkis

     'The Fine Art of Whisky':           '#CA8A04'  // Gold

   const COLOR_CYCLE = ['#2563EB','#16A34A','#F97316','#DC2626','#A855F7','#0EA5E9','#F59E0B','#10B981'];

   function toYear(x) {

     const n = parseInt(String(x).replace(/[^\d]/g, ''), 10);

   function getColor(name, used) {

     const idx = used.size % COLOR_CYCLE.length;

     return COLOR_CYCLE[idx];

   // Tabelle -> {labels,datasets}

   function buildDatasetsFromTable(tbl) {

     const rows = Array.from(tbl.querySelectorAll('tr'));

     if (rows.length < 2) return { labels: [], datasets: [] };

     const years = new Set();

     const seriesMap = new Map(); // Serie -> Map(Jahr -> Wert)

     rows.slice(1).forEach(tr => {

       const tds = tr.querySelectorAll('td,th');

       const y = toYear(tds[0].textContent);

       const s = tds[1].textContent.trim();

       const v = parseFloat(String(tds[2].textContent).replace(',', '.')) || 0;

       years.add(y);

       if (!seriesMap.has(s)) seriesMap.set(s, new Map());

       seriesMap.get(s).set(y, v);

     const labels = Array.from(years).sort((a, b) => a - b).map(String);

     const used = new Set();

     const datasets = Array.from(seriesMap.entries()).map(([name, ym]) => {

       const c = getColor(name, used);

         data: labels.map(y => ym.get(+y) || 0),

         borderColor: c,

         backgroundColor: c + '80',

     return { labels, datasets };

   // ---- Zusatz: Gesamtzahl unter der Legende anzeigen ----------------------

  function addTotalBelowLegend(chart) {

      if (!chart || !chart.data || !chart.data.datasets?.length) return;

      const total = chart.data.datasets.reduce((sum, ds) => {

        const arr = Array.isArray(ds.data) ? ds.data : [];

        return sum + arr.reduce((a, b) => a + (parseFloat(b) || 0), 0);

 

      const container = chart.canvas.parentNode; // wrapper div

      let info = container.querySelector('.chart-total-info');

      if (!info) {

        info = document.createElement('div');

        info.className = 'chart-total-info';

        info.style.textAlign = 'center';

        info.style.fontWeight = 'bold';

        info.style.fontSize = '1.05em';

        info.style.marginTop = '0.4em';

        info.style.color = '#444';

        container.appendChild(info);

       }

      info.textContent = 'Gesamt: ' + total;

     } catch (e) {

       console.warn('[chart-total]', e);

   // ---- Einzel-Chart rendern -----------------------------------------------

    if (block.dataset.rendered === '1') return;

 

    while (tbl && tbl.tagName !== 'TABLE') tbl = tbl.nextElementSibling;

    if (!tbl) return;

 

    // Tabelle ggf. ausblenden (data-hide-table="true")

    const hide = (block.dataset.hideTable || '').toLowerCase() === 'true';

    if (hide) {

       tbl.setAttribute('aria-hidden', 'true');

    // Canvas-Wrapper

    const wrap = document.createElement('div');

    wrap.style.position = 'relative';

    wrap.style.width = '100%';

    wrap.style.height = window.matchMedia('(min-width: 768px)').matches ? '450px' : '320px';

 

    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 || '');

      const chart = new Chart(canvas.getContext('2d'), {

        data: { labels: out.labels, datasets: out.datasets },

          scales: {

            y: { beginAtZero: true, ticks: { precision: 0, font: { size: 12 } } }

            legend: { position: 'bottom', labels: { font: { size: 13 }, boxWidth: 20 } },

            title:  { display: !!title, text: title, font: { size: 16 } },

            tooltip:{ backgroundColor: 'rgba(0,0,0,0.8)', titleFont: {size:14}, bodyFont: {size:13} }

          elements: { line: { tension: 0.25, borderWidth: 2 }, point: { radius: 3 } }

        }

      addTotalBelowLegend(chart);

      if (window.ResizeObserver) {

        const obs = new ResizeObserver(() => addTotalBelowLegend(chart));

        obs.observe(chart.canvas);

      block.dataset.rendered = '1';

     }).catch(err => console.error('[ChartJS]', err));

     mw.hook('wikipage.content').add(function ($c) {

    });

     // Fallback, falls mw.hook nicht verfügbar ist

     document.addEventListener('DOMContentLoaded', function () {

       document.querySelectorAll('.ados-chart-multi').forEach(renderOne);

    });