Add Google Analytics to samples and update badges (#4734)

Inject the GA tracking snippet for all samples, including the index page. Also update README.md badges using the shields.io service for consistency with flat-square style and cache, and add release badges to the installation documentation page.

diff --git a/README.md b/README.md
index 1a6e61e637871a9efa878d0c6a569185646375d0..767950b88bc8927ac618eb4984b2cdea3a72fc8c 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,8 +1,6 @@
 # Chart.js
 
-[![Build Status](https://travis-ci.org/chartjs/Chart.js.svg?branch=master)](https://travis-ci.org/chartjs/Chart.js) [![Code Climate](https://codeclimate.com/github/chartjs/Chart.js/badges/gpa.svg)](https://codeclimate.com/github/chartjs/Chart.js) [![Coverage Status](https://coveralls.io/repos/github/chartjs/Chart.js/badge.svg?branch=master)](https://coveralls.io/github/chartjs/Chart.js?branch=master)
-
-[![Chart.js on Slack](https://img.shields.io/badge/slack-Chart.js-blue.svg)](https://chart-js-automation.herokuapp.com/)
+[![travis](https://img.shields.io/travis/chartjs/Chart.js.svg?style=flat-square&maxAge=60)](https://travis-ci.org/chartjs/Chart.js) [![codeclimate](https://img.shields.io/codeclimate/github/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://codeclimate.com/github/chartjs/Chart.js) [![coveralls](https://img.shields.io/coveralls/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://coveralls.io/github/chartjs/Chart.js?branch=master) [![slack](https://img.shields.io/badge/slack-Chart.js-blue.svg?style=flat-square&maxAge=3600)](https://chart-js-automation.herokuapp.com/)
 
 *Simple HTML5 Charts using the canvas element* [chartjs.org](http://www.chartjs.org)
 

diff --git a/docs/README.md b/docs/README.md
index aa5872211124a005a6e4b248fdd94b41b2f14246..5a0e9f355798dbd6beb59d6556f32cb296a425af 100644 (file)
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,6 +1,6 @@
 # Chart.js
 
-[![Chart.js on Slack](https://img.shields.io/badge/slack-Chart.js-blue.svg)](https://chart-js-automation.herokuapp.com/)
+[![slack](https://img.shields.io/badge/slack-Chart.js-blue.svg?style=flat-square&maxAge=600)](https://chart-js-automation.herokuapp.com/)
 
 ## Installation
 

diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index 4a3df6eab183ada2884bde77b32b46a4d2e072c9..dd8cfa4a7908e16d40294eaf7f88a1614d30b455 100644 (file)
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -2,22 +2,27 @@
 Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way.
 
 ## npm
+[![npm](https://img.shields.io/npm/v/chart.js.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chart.js)
 
 ```bash
 npm install chart.js --save
 ```
 
 ## Bower
+[![bower](https://img.shields.io/bower/v/chartjs.svg?style=flat-square&maxAge=600)](https://libraries.io/bower/chartjs)
 
 ```bash
 bower install chart.js --save
 ```
 
 ## CDN
-or just use these [Chart.js CDN](https://cdnjs.com/libraries/Chart.js) links.
+[![cdn](https://img.shields.io/cdnjs/v/Chart.js.svg?label=cdn&style=flat-square&maxAge=600)](https://cdnjs.com/libraries/Chart.js)
 
+or just use these [Chart.js CDN](https://cdnjs.com/libraries/Chart.js) links.
 
 ## Github
+[![github](https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://github.com/chartjs/Chart.js/releases/latest)
+
 You can download the latest version of [Chart.js on GitHub](https://github.com/chartjs/Chart.js/releases/latest).
 
 If you download or clone the repository, you must [build](../developers/contributing.md#building-chartjs) Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is **strongly** advised.
@@ -38,4 +43,4 @@ Files:
 * `dist/Chart.bundle.js`
 * `dist/Chart.bundle.min.js`
 
-The bundled version includes Moment.js built into the same file. This version should be used if you wish to use time axes and want a single file to include. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.
\ No newline at end of file
+The bundled version includes Moment.js built into the same file. This version should be used if you wish to use time axes and want a single file to include. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.

diff --git a/samples/charts/area/line-boundaries.html b/samples/charts/area/line-boundaries.html
index 6f1f927a920ac22a08c0a762a12834c1e070c15f..edadc781c54ff3f3ae61858490625b6e7ffe4d4c 100644 (file)
--- a/samples/charts/area/line-boundaries.html
+++ b/samples/charts/area/line-boundaries.html
@@ -35,11 +35,11 @@
                };
 
                function generateData(config) {
-                       return utils.numbers(utils.merge(inputs, config || {}));
+                       return utils.numbers(Chart.helpers.merge(inputs, config || {}));
                }
 
                function generateLabels(config) {
-                       return utils.months(utils.merge({
+                       return utils.months(Chart.helpers.merge({
                                count: inputs.count,
                                section: 3
                        }, config || {}));
@@ -85,7 +85,7 @@
                                                fill: boundary
                                        }]
                                },
-                               options: utils.merge(options, {
+                               options: Chart.helpers.merge(options, {
                                        title: {
                                                text: 'fill: ' + boundary,
                                                display: true

diff --git a/samples/index.html b/samples/index.html
index d7c6793430105eb11a04b85bc3587b94fb98a465..d855662f093efba2882ba134761b69a972fb8fa6 100644 (file)
--- a/samples/index.html
+++ b/samples/index.html
@@ -7,6 +7,7 @@
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" href="favicon.ico">
        <script src="samples.js"></script>
+       <script src="utils.js"></script>
        <title>Chart.js samples</title>
 </head>
 <body>

diff --git a/samples/utils.js b/samples/utils.js
index 0b31703a1f1564bb53031ad4789b3ad69526ce0e..50bb81c0c1bf632539e31e69c70d13127272eb4d 100644 (file)
--- a/samples/utils.js
+++ b/samples/utils.js
@@ -1,5 +1,3 @@
-/* global Chart */
-
 'use strict';
 
 window.chartColors = {
@@ -41,6 +39,8 @@ window.chartColors = {
        ];
 
        var Samples = global.Samples || (global.Samples = {});
+       var Color = global.Color;
+
        Samples.utils = {
                // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
                srand: function(seed) {
@@ -119,18 +119,29 @@ window.chartColors = {
 
                transparentize: function(color, opacity) {
                        var alpha = opacity === undefined ? 0.5 : 1 - opacity;
-                       return Chart.helpers.color(color).alpha(alpha).rgbString();
-               },
-
-               merge: Chart.helpers.configMerge
+                       return Color(color).alpha(alpha).rgbString();
+               }
        };
 
-       Samples.utils.srand(Date.now());
-
        // DEPRECATED
        window.randomScalingFactor = function() {
                return Math.round(Samples.utils.rand(-100, 100));
        };
 
-}(this));
+       // INITIALIZATION
+
+       Samples.utils.srand(Date.now());
 
+       // Google Analytics
+       /* eslint-disable */
+       if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
+               (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+               (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+               m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+               })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+               ga('create', 'UA-28909194-3', 'auto');
+               ga('send', 'pageview');
+       }
+       /* eslint-enable */
+
+}(this));