MediaWiki:Common.js

// Replace Wikidata IDs with their [label, description]
$( '.wb-external-id' ).each( function() {
    if ( $( this ).attr( 'href' ).lastIndexOf( 'https://www.wikidata.org', 0 ) === 0 ) {
        var wikidataApi = new mw.ForeignApi( 'https://www.wikidata.org/w/api.php', {
                anonymous: true,
                parameters: { 'origin': '*' },
                ajax: { timeout: 10000 }
            } ),
            lang = mw.config.get( 'wgUserLanguage' ),
            node = $( this );
        wikidataApi.get( {
            'action': 'wbgetentities',
            'format': 'json',
            'ids': node.text(),
            'props': 'labels|descriptions',
            'languages': lang,
            'languagefallback': 1,
            'origin': '*'
        } ).then( function( data ) {
            var entity = data.entities[ node.text() ],
                label = entity.labels[ lang ].value,
                description = entity.descriptions[ lang ].value;
            
            node.html( label + ' <i>(' + node.text() + ')</i><br><small>' + description + '</small>' )
        } );
    }
} );

// Fetch and display DataViz results
const sparqlEndpoint = "https://v2.lingualibre.fr/bigdata/namespace/wdq/sparql";
mw.loader.using( 'jquery.tablesorter', function() {
    $( '.dataviz' ).each( function() {
        var node = $( this ),
            query = node.children( '.dataviz-query' ).text().replace(/\u00A0/g, ''),
            resultNode = node.children( '.dataviz-result' );

        $.post( sparqlEndpoint, { format: 'json', query: query } ).then( function( data ) {
            console.log( data );
            var order = [],
                theadTr = $( '<tr>' ),
                thead = $( '<thead>' ).append( theadTr ),
                tbody = $( '<tbody>' ),
                table = $( '<table>' )
            .addClass( 'wikitable sortable' )
            .append( thead ).append( tbody );

            for ( var i = 0; i < data.head.vars.length; i++ ) {
                var column = data.head.vars[ i ];
                theadTr.append( $( '<th>' ).text( column ) );
                order.push( column );
            }

            for ( var i=0; i < data.results.bindings.length; i++ ) {
                var row = data.results.bindings[ i ],
                    tr = $( '<tr>' ).appendTo( tbody );

                for ( var j=0; j < order.length; j++ ) {
                    var cell = row[ order[ j ] ];
                    if ( cell.type === 'uri' ) {
                        cell.value = $( '<a>' )
                            .attr( 'href', cell.value )
                            .text( cell.value.split( '/' ).pop() );
                    }
                    tr.append( $( '<td>' ).html( cell.value ) );
                }
            }

            resultNode.html( table );
            table.tablesorter();
        } ).fail( function( data ) {
            console.log( data.responseText );
            //TODO: manage errors
        } );
    } );
} );