Changeset 6245

Timestamp:

12/07/2017 10:03:20 PM (6 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,
+                        }
+                      }
                 } );
             } );