Making WordPress.org

Changeset 5428


Ignore:
Timestamp:
04/29/2017 02:34:10 PM (7 years ago)
Author:
ocean90
Message:

Plugin Directory: Use the new library loader for Google Charts.

Prevents a warning in Chrome about the use of document.write, see https://www.chromestatus.com/feature/5718547946799104.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php

    r5403 r5428  
    7777
    7878    if ( get_query_var( 'plugin_advanced' ) ) {
    79         wp_enqueue_script( 'google-jsapi', 'https://www.google.com/jsapi', array(), false, true );
    80         wp_enqueue_script( 'wporg-plugins-stats', get_template_directory_uri() . '/js/stats.js', array( 'jquery', 'google-jsapi' ), '20170328', true );
     79        wp_enqueue_script( 'google-charts-loader', 'https://www.gstatic.com/charts/loader.js', array(), false, true );
     80        wp_enqueue_script( 'wporg-plugins-stats', get_template_directory_uri() . '/js/stats.js', array( 'jquery', 'google-charts-loader' ), '20170328', true );
    8181
    8282        wp_localize_script( 'wporg-plugins-stats', 'pluginStats', array(
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/stats.js

    r5188 r5428  
    11/* globals google:object */
    2 google.load( 'visualization', '1', { packages: ['corechart'] } );
     2google.charts.load( 'current', {
     3    packages: [ 'corechart' ]
     4});
    35
    46( function( $, settings ) {
    57    $( function () {
    68        $.getJSON('https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=' + settings.slug + '&limit=267&callback=?', function( downloads ) {
    7             var data = new google.visualization.DataTable(),
    8                 count = 0,
    9                 sml;
     9            google.charts.setOnLoadCallback( function() {
     10                var data = new google.visualization.DataTable(),
     11                    count = 0,
     12                    sml;
    1013
    11             data.addColumn( 'date', settings.l10n.date );
    12             data.addColumn( 'number', settings.l10n.downloads );
     14                data.addColumn( 'date', settings.l10n.date );
     15                data.addColumn( 'number', settings.l10n.downloads );
    1316
    14             $.each( downloads, function( key, value ) {
    15                 data.addRow();
    16                 data.setValue( count, 0, new Date( key ) );
    17                 data.setValue( count, 1, Number( value ) );
    18                 count++;
    19             } );
     17                $.each( downloads, function( key, value ) {
     18                    data.addRow();
     19                    data.setValue( count, 0, new Date( key ) );
     20                    data.setValue( count, 1, Number( value ) );
     21                    count++;
     22                } );
    2023
    21             sml = data.getNumberOfRows() < 225;
     24                sml = data.getNumberOfRows() < 225;
    2225
    23             new google.visualization.LineChart( document.getElementById( 'plugin-download-stats' ) ).draw( data, {
    24                 colors: ['#253578'],
    25                 legend: { position: 'none' },
    26                 titlePosition: 'in',
    27                 axisTitlesPosition: 'in',
    28                 chartArea: {
    29                     height: 280,
    30                     left: ( sml ? 50 : 0 ),
    31                     width: ( sml ? 482 : '100%' )
    32                 },
    33                 hAxis: {
    34                     textStyle: { color: 'black', fontSize: 9 },
    35                     format: 'MMM y'
    36                 },
    37                 vAxis: {
    38                     format: '###,###',
    39                     textPosition: ( sml ? 'out' : 'in' ),
    40                     viewWindowMode: 'explicit',
    41                     viewWindow: { min: 0 }
    42                 },
    43                 bar: { groupWidth: ( data.getNumberOfRows() > 100 ? '100%' : null ) },
    44                 height: 350,
    45                 width: 532,
    46                 curveType: 'function'
     26                new google.visualization.LineChart( document.getElementById( 'plugin-download-stats' ) ).draw( data, {
     27                    colors: ['#253578'],
     28                    legend: { position: 'none' },
     29                    titlePosition: 'in',
     30                    axisTitlesPosition: 'in',
     31                    chartArea: {
     32                        height: 280,
     33                        left: ( sml ? 50 : 0 ),
     34                        width: ( sml ? 482 : '100%' )
     35                    },
     36                    hAxis: {
     37                        textStyle: { color: 'black', fontSize: 9 },
     38                        format: 'MMM y'
     39                    },
     40                    vAxis: {
     41                        format: '###,###',
     42                        textPosition: ( sml ? 'out' : 'in' ),
     43                        viewWindowMode: 'explicit',
     44                        viewWindow: { min: 0 }
     45                    },
     46                    bar: { groupWidth: ( data.getNumberOfRows() > 100 ? '100%' : null ) },
     47                    height: 350,
     48                    width: 532,
     49                    curveType: 'function'
     50                } );
    4751            } );
    4852        } );
     
    7276            }
    7377
    74             var barHeaders  = [ '' ],
    75                 barValues   = [ '' ],
    76                 versionList = [],
    77                 index       = 0,
    78                 data, formatter;
     78            google.charts.setOnLoadCallback( function() {
     79                var barHeaders  = [ '' ],
     80                    barValues   = [ '' ],
     81                    versionList = [],
     82                    index       = 0,
     83                    data, formatter;
    7984
    80             // Gather and sort the list of versions.
    81             $.each( versions, function( version ) {
    82                 versionList.push( version );
    83             } );
     85                // Gather and sort the list of versions.
     86                $.each( versions, function( version ) {
     87                    versionList.push( version );
     88                } );
    8489
    85             // Sort the version list by version.
    86             versionList.sort( function( a, b ) {
    87                 a = a.split( '.' );
    88                 b = b.split( '.' );
    89                 return ( a[0] !== b[0] ) ? a[0]-b[0] : a[1]-b[1];
    90             } );
     90                // Sort the version list by version.
     91                versionList.sort( function( a, b ) {
     92                    a = a.split( '.' );
     93                    b = b.split( '.' );
     94                    return ( a[0] !== b[0] ) ? a[0]-b[0] : a[1]-b[1];
     95                } );
    9196
    92             // Move 'other' versions to the beginning.
    93             if ( 'other' === versionList[ versionList.length - 1 ] ) {
    94                 versionList.unshift( versionList.pop() );
    95             }
     97                // Move 'other' versions to the beginning.
     98                if ( 'other' === versionList[ versionList.length - 1 ] ) {
     99                    versionList.unshift( versionList.pop() );
     100                }
    96101
    97             // Add all the versions
    98             versionList.forEach( function( version ) {
    99                 barHeaders.push( version );
    100                 barValues.push( versions[ version ] );
    101             } );
     102                // Add all the versions
     103                versionList.forEach( function( version ) {
     104                    barHeaders.push( version );
     105                    barValues.push( versions[ version ] );
     106                } );
    102107
    103             data = google.visualization.arrayToDataTable([
    104                 barHeaders,
    105                 barValues
    106             ]);
     108                data = google.visualization.arrayToDataTable([
     109                    barHeaders,
     110                    barValues
     111                ]);
    107112
    108             // Format it as percentages
    109             formatter = new google.visualization.NumberFormat( {
    110                 fractionDigits: 1,
    111                 suffix: '%'
    112             } );
     113                // Format it as percentages
     114                formatter = new google.visualization.NumberFormat( {
     115                    fractionDigits: 1,
     116                    suffix: '%'
     117                } );
    113118
    114             $.each( barValues, function( value ) {
    115                 if ( barValues[ value ] ) {
    116                     formatter.format( data, ++index );
    117                 }
    118             } );
     119                $.each( barValues, function( value ) {
     120                    if ( barValues[ value ] ) {
     121                        formatter.format( data, ++index );
     122                    }
     123                } );
    119124
    120             new google.visualization.BarChart( document.getElementById( 'plugin-version-stats' ) ).draw( data, {
    121                 legend: {
    122                     position: 'bottom'
    123                 },
    124                 chartArea: {
    125                     left: '0',
    126                     width: '100%',
    127                     height: '80%',
    128                     top: '10%'
    129                 },
    130                 hAxis: {
    131                     gridlines: {
    132                         color: 'transparent'
    133                     }
    134                 },
    135                 isStacked: true
     125                new google.visualization.BarChart( document.getElementById( 'plugin-version-stats' ) ).draw( data, {
     126                    legend: {
     127                        position: 'bottom'
     128                    },
     129                    chartArea: {
     130                        left: '0',
     131                        width: '100%',
     132                        height: '80%',
     133                        top: '10%'
     134                    },
     135                    hAxis: {
     136                        gridlines: {
     137                            color: 'transparent'
     138                        }
     139                    },
     140                    isStacked: true
     141                } );
    136142            } );
    137143        } );
Note: See TracChangeset for help on using the changeset viewer.