WordPress.org

Making WordPress.org

Changeset 6245


Ignore:
Timestamp:
12/07/17 22:03:20 (6 weeks 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.