MediaWiki

CharacterDistribution.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

No edit summary
No edit summary
Line 1: Line 1:
console.log("wgPageName =", mw.config.get('wgPageName'));
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
     // Nur auf /Wiki/chardist ausführen
     // Prüfen, ob wir auf der richtigen Seite sind
     if (mw.config.get('wgPageName') !== 'https://illus.twainframe.org/Wiki/chardist') return;
     if (mw.config.get('wgPageName') !== 'Wiki/chardist') return;


     // Stelle sicher, dass der Platzhalter existiert
 
     // Container suchen
     const container = document.getElementById('chart-placeholder');
     const container = document.getElementById('chart-placeholder');
     if (!container) return;
     if (!container) {
        console.log("Kein chart-placeholder gefunden.");
        return;
    }


     // Canvas erzeugen und einfügen
     // Canvas hinzufügen
     const canvas = document.createElement('canvas');
     const canvas = document.createElement('canvas');
     canvas.id = 'lineChart';
     canvas.id = 'testChart';
     container.appendChild(canvas);
     container.appendChild(canvas);


     const ctx = canvas.getContext('2d');
     const ctx = canvas.getContext('2d');


     // --- Chart-Daten ---
     // Minimaler Test-Bar-Chart
     const data = {
     new Chart(ctx, {
        labels: ['Kemble (1885)', 'Schröder (1898)', 'Hirth (1920)', 'Trier (1936)', 'Harder (1938)', 'Kellerer (1938)', 'Busoni (1940)'],
        datasets: [
            {
                label: 'Huck',
                data: [47.40, 50.98, 72.22, 54.29, 93.10, 50.00, 54.10],
                backgroundColor: 'red',
                borderColor: 'red',
                borderWidth: 1
            },
            {
                label: 'Jim',
                data: [17.92, 29.41, 22.22, 28.57, 44.83, 18.18, 26.23],
                backgroundColor: 'blue',
                borderColor: 'blue',
                borderWidth: 1
            },
            {
                label: 'Pap Finn',
                data: [5.78, 7.84, 5.56, 5.71, 6.90, 9.09, 4.92],
                backgroundColor: 'green',
                borderColor: 'green',
                borderWidth: 1
            },
            {
                label: 'King/Duke',
                data: [13.29, 13.73, 16.67, 20.00, 17.24, 9.09, 16.39],
                backgroundColor: 'orange',
                borderColor: 'orange',
                borderWidth: 1
            },
            {
                label: 'Tom',
                data: [11.56, 7.84, 19.44, 11.43, 24.14, 9.09, 11.48],
                backgroundColor: 'black',
                borderColor: 'black',
                borderWidth: 1
            },
            {
                label: 'Others',
                data: [38.73, 29.41, 36.11, 31.43, 17.24, 31.82, 22.95],
                backgroundColor: 'pink',
                borderColor: 'pink',
                borderWidth: 1
            },
            {
                type: 'scatter',
                label: 'Total # of Illustrations',
                data: [173, 51, 36, 35, 29, 22, 61],
                borderColor: 'purple',
                borderWidth: 3,
                xAxisID: 'x2',
                pointStyle: 'cross',
                pointRadius: 8,
                pointHoverRadius: 10,
                showLine: false
            }
        ]
    };
 
    // --- Chart-Config ---
    const config = {
         type: 'bar',
         type: 'bar',
         data: data,
         data: {
            labels: ['A', 'B', 'C'],
            datasets: [{
                label: 'Test-Daten',
                data: [10, 20, 30],
                backgroundColor: ['red', 'green', 'blue']
            }]
        },
         options: {
         options: {
            indexAxis: 'y',
             responsive: true,
             responsive: true,
             plugins: {
             plugins: {
                 legend: { display: true },
                 legend: { display: true }
                tooltip: { mode: 'index', intersect: false }
            },
            interaction: { mode: 'nearest', axis: 'y', intersect: false },
            scales: {
                y: {
                    title: { display: true, text: 'Illustrator (Year)' },
                    barThickness: 30
                },
                x: {
                    title: { display: true, text: '% of Illustrations Featuring Character' },
                    min: 0,
                    max: 100,
                },
                x2: {
                    position: 'bottom',
                    title: { display: true, text: 'Total # of Illustrations' },
                    min: 0,
                    max: 180,
                    grid: { drawOnChartArea: false }
                }
             }
             }
         }
         }
     };
     });


     new Chart(ctx, config);
     console.log("Test-Chart initialisiert.");
});
});

Revision as of 18:57, 31 August 2025

console.log("wgPageName =", mw.config.get('wgPageName'));
document.addEventListener('DOMContentLoaded', () => {
    // Prüfen, ob wir auf der richtigen Seite sind
    if (mw.config.get('wgPageName') !== 'Wiki/chardist') return;


    // Container suchen
    const container = document.getElementById('chart-placeholder');
    if (!container) {
        console.log("Kein chart-placeholder gefunden.");
        return;
    }

    // Canvas hinzufügen
    const canvas = document.createElement('canvas');
    canvas.id = 'testChart';
    container.appendChild(canvas);

    const ctx = canvas.getContext('2d');

    // Minimaler Test-Bar-Chart
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['A', 'B', 'C'],
            datasets: [{
                label: 'Test-Daten',
                data: [10, 20, 30],
                backgroundColor: ['red', 'green', 'blue']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: true }
            }
        }
    });

    console.log("Test-Chart initialisiert.");
});