WordPress.org

Making WordPress.org

Changeset 6245


Ignore:
Timestamp:
12/07/2017 10:03:20 PM (7 months ago)
Author:
tellyworth
Message:

Plugin directory: add JS for active install growth chart.

Also add a trend line to the downloads chart.

See #3016

File:
1 edited

Legend:

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

    r5428 r6245  
    4747                    height: 350,
    4848                    width: 532,
    49                     curveType: 'function'
     49                    curveType: 'function',
     50                    trendlines: {
     51                        0: {
     52                          type: 'linear',
     53                          color: '#ffc733',
     54                          lineWidth: 1,
     55                          opacity: 0.4,
     56                          showR2: false,
     57                          visibleInLegend: false,
     58                          tooltip: false,
     59                        }
     60                      }
     61                } );
     62            } );
     63        } );
     64
     65        $.getJSON('https://api.wordpress.org/stats/plugin/1.0/active-installs.php?slug=' + settings.slug + '&limit=267&callback=?', function( downloads ) {
     66            google.charts.setOnLoadCallback( function() {
     67                var data = new google.visualization.DataTable(),
     68                    count = 0,
     69                    sml;
     70
     71                data.addColumn( 'date', settings.l10n.date );
     72                data.addColumn( 'number', settings.l10n.growth );
     73
     74                $.each( downloads, function( key, value ) {
     75                    data.addRow();
     76                    data.setValue( count, 0, new Date( key ) );
     77                    data.setValue( count, 1, Number( value ) );
     78                    count++;
     79                } );
     80
     81                var formatter = new google.visualization.NumberFormat({pattern: '#,###.##\'%\''});
     82                formatter.format(data, 1); // format column 1
     83
     84                sml = data.getNumberOfRows() < 36;
     85
     86                new google.visualization.LineChart( document.getElementById( 'plugin-growth-stats' ) ).draw( data, {
     87                    colors: ['#253578'],
     88                    legend: { position: 'none' },
     89                    titlePosition: 'in',
     90                    axisTitlesPosition: 'in',
     91                    chartArea: {
     92                        height: 280,
     93                        left: ( sml ? 50 : 0 ),
     94                        width: ( sml ? 482 : '100%' )
     95                    },
     96                    hAxis: {
     97                        textStyle: { color: 'black', fontSize: 9 },
     98                        format: 'MMM y'
     99                    },
     100                    vAxis: {
     101                        format: '#.##\'%\'',
     102                        textPosition: ( sml ? 'out' : 'in' ),
     103                        viewWindowMode: 'pretty',
     104                    },
     105                    bar: { groupWidth: ( data.getNumberOfRows() > 100 ? '100%' : null ) },
     106                    height: 350,
     107                    width: 532,
     108                    curveType: 'function',
     109                    trendlines: {
     110                        0: {
     111                          type: 'linear',
     112                          color: '#ffc733',
     113                          lineWidth: 1,
     114                          opacity: 0.4,
     115                          showR2: false,
     116                          visibleInLegend: false,
     117                          tooltip: false,
     118                        }
     119                      }
    50120                } );
    51121            } );
Note: See TracChangeset for help on using the changeset viewer.