Changeset 6245

Timestamp:

12/07/2017 10:03:20 PM (9 years 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:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/stats.js (modified) (1 diff)

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

@@ -47 +47 @@
                                         height: 350,
                                         width: 532,
-                                        curveType: 'function'
+                                        curveType: 'function',
+                                        trendlines: {
+                                                0: {
+                                                  type: 'linear',
+                                                  color: '#ffc733',
+                                                  lineWidth: 1,
+                                                  opacity: 0.4,
+                                                  showR2: false,
+                                                  visibleInLegend: false,
+                                                  tooltip: false,
+                                                }
+                                          }
+                                } );
+                        } );
+                } );
+
+                $.getJSON('https://api.wordpress.org/stats/plugin/1.0/active-installs.php?slug=' + settings.slug + '&limit=267&callback=?', function( downloads ) {
+                        google.charts.setOnLoadCallback( function() {
+                                var data = new google.visualization.DataTable(),
+                                        count = 0,
+                                        sml;
+
+                                data.addColumn( 'date', settings.l10n.date );
+                                data.addColumn( 'number', settings.l10n.growth );
+
+                                $.each( downloads, function( key, value ) {
+                                        data.addRow();
+                                        data.setValue( count, 0, new Date( key ) );
+                                        data.setValue( count, 1, Number( value ) );
+                                        count++;
+                                } );
+
+                                var formatter = new google.visualization.NumberFormat({pattern: '#,###.##\'%\''});
+                                formatter.format(data, 1); // format column 1
+
+                                sml = data.getNumberOfRows() < 36;
+
+                                new google.visualization.LineChart( document.getElementById( 'plugin-growth-stats' ) ).draw( data, {
+                                        colors: ['#253578'],
+                                        legend: { position: 'none' },
+                                        titlePosition: 'in',
+                                        axisTitlesPosition: 'in',
+                                        chartArea: {
+                                                height: 280,
+                                                left: ( sml ? 50 : 0 ),
+                                                width: ( sml ? 482 : '100%' )
+                                        },
+                                        hAxis: {
+                                                textStyle: { color: 'black', fontSize: 9 },
+                                                format: 'MMM y'
+                                        },
+                                        vAxis: {
+                                                format: '#.##\'%\'',
+                                                textPosition: ( sml ? 'out' : 'in' ),
+                                                viewWindowMode: 'pretty',
+                                        },
+                                        bar: { groupWidth: ( data.getNumberOfRows() > 100 ? '100%' : null ) },
+                                        height: 350,
+                                        width: 532,
+                                        curveType: 'function',
+                                        trendlines: {
+                                                0: {
+                                                  type: 'linear',
+                                                  color: '#ffc733',
+                                                  lineWidth: 1,
+                                                  opacity: 0.4,
+                                                  showR2: false,
+                                                  visibleInLegend: false,
+                                                  tooltip: false,
+                                                }
+                                          }
                                 } );
                         } );