'Functional' play charts

Needs styling

app/Http/Controllers/Api/Web/StatsController.php

@@ -26,11 +26,80 @@ use Poniverse\Ponyfm\Models\Track;
 use Auth;
 use DB;
 use Response;
+use Carbon\Carbon;
 
 class StatsController extends ApiControllerBase
 {
     public function getTrackStatsHourly($id)
     {
+        // I know, raw SQL ugh. I'm not used to laravel's query system
+        $query = DB::select(DB::raw('
+            SELECT TIMESTAMP(created_at) AS `time`, COUNT(1) AS `plays`
+            FROM `resource_log_items`
+            WHERE `track_id` = :id AND `log_type` = 3 AND `created_at` > now() - INTERVAL 1 DAY
+            GROUP BY TIMESTAMP(created_at);'), array(
+            'id' => $id
+        ));
+
+        $now = Carbon::now();
+        $calcArray = array();
+        $output = array();
+
+        foreach($query as $item) {
+            $playDate = new Carbon($item->time);
+            $key = '-' . $playDate->diffInHours($now);
+            if (array_key_exists($key, $calcArray)) {
+                $calcArray[$key] += $item->plays;
+            } else {
+                $calcArray[$key] = $item->plays;
+            }
+        }
+
+        // Covert calcArray into output we can understand
+        foreach($calcArray as $hour => $plays) {
+            $set = array('hour' => $hour . 'hours', 'plays' => $plays);
+            array_push($output, $set);
+        }
+
+        return Response::json(['playStats' => $output], 200);
+    }
+
+    public function getTrackStatsDaily($id)
+    {
+        // I know, raw SQL ugh. I'm not used to laravel's query system
+        // Only go back 1 month for daily stuff, may change in the future
+        $query = DB::select(DB::raw('
+            SELECT TIMESTAMP(created_at) AS `time`, COUNT(1) AS `plays`
+            FROM `resource_log_items`
+            WHERE `track_id` = :id AND `log_type` = 3 AND `created_at` > now() - INTERVAL 1 MONTH
+            GROUP BY TIMESTAMP(created_at);'), array(
+            'id' => $id
+        ));
+
+        $now = Carbon::now();
+        $calcArray = array();
+        $output = array();
+
+        foreach($query as $item) {
+            $playDate = new Carbon($item->time);
+            $key = '-' . $playDate->diffInDays($now);
+            if (array_key_exists($key, $calcArray)) {
+                $calcArray[$key] += $item->plays;
+            } else {
+                $calcArray[$key] = $item->plays;
+            }
+        }
+
+        // Covert calcArray into output we can understand
+        foreach($calcArray as $days => $plays) {
+            $set = array('days' => $days . ' days', 'plays' => $plays);
+            array_push($output, $set);
+        }
+
+        return Response::json(['playStats' => $output], 200);
+    }
+
+    public function getTrackStats($id) {
         // Get track to check if it exists
         // and if we are allowed to view it.
         // In the future we could do something
@@ -45,22 +114,15 @@ class StatsController extends ApiControllerBase
         if (!$track->canView(Auth::user()))
             return $this->notFound('Track not found!');
 
-        // I know, raw SQL ugh. I'm not used to laravel's query system
+        // Run one of the functions depending on
-        $query = DB::select(DB::raw("
+        // how old the track is
-            SELECT HOUR(created_at) AS `hour`, COUNT(1) AS `plays`
+        $now = Carbon::now();
-            FROM `resource_log_items`
+        $trackDate = $track->published_at;
-            WHERE `track_id` = :id AND `log_type` = 3 AND `created_at` > now() - INTERVAL 1 DAY
-            GROUP BY HOUR(created_at);"), array(
-            'id' => $id
-        ));
 
-        $currentHour = intval(date("H"));
+        if ($trackDate->diffInDays($now) >= 1) {
-
+            return $this->getTrackStatsDaily($id);
-        foreach($query as $item) {
+        } else {
-            // Set hours to offsets of the current hour
+            return $this->getTrackStatsHourly($id);
-            $item->hour = $item->hour - $currentHour;
         }
-
-        return Response::json(['playsHourly' => $query], 200);
     }
 }

app/Http/routes.php

@@ -84,7 +84,7 @@ Route::group(['prefix' => 'api/web'], function() {
     Route::get('/tracks', 'Api\Web\TracksController@getIndex');
     Route::get('/tracks/{id}', 'Api\Web\TracksController@getShow')->where('id', '\d+');
     Route::get('/tracks/cached/{id}/{format}', 'Api\Web\TracksController@getCachedTrack')->where(['id' => '\d+', 'format' => '.+']);
-    Route::get('/tracks/{id}/stats', 'Api\Web\StatsController@getTrackStatsHourly')->where('id', '\d+');
+    Route::get('/tracks/{id}/stats', 'Api\Web\StatsController@getTrackStats')->where('id', '\d+');
 
     Route::get('/albums', 'Api\Web\AlbumsController@getIndex');
     Route::get('/albums/{id}', 'Api\Web\AlbumsController@getShow')->where('id', '\d+');

public/templates/tracks/stats.html

@@ -1 +1,8 @@
-<h1>THERE ARE NO STATS HERE BECAUSE I HAVEN'T CODED THAT YET BUT AT LEAST YOU'RE READING THIS WHICH MEANS NOT EVERYTHING IS BROKEN</h1>
+<a href="{{::track.url}}" class="btn chart-exit">Return to track</a>
+<h1>Geeky Stats For Geeky People (BETA)</h1>
+<h4>Plays over time</h4>
+<div class="chart-container">
+    <canvas id="line" class="chart chart-line" chart-data="playsData"
+        chart-labels="playsLabels" chart-legend="true" chart-series="series">
+    </canvas>
+</div>

resources/assets/scripts/app/app.coffee

@@ -40,6 +40,8 @@ require '../base/jquery.timeago'
 require '../base/jquery.viewport'
 require 'script!../base/marked'
 require 'script!../base/moment'
+require 'script!../base/chart'
+require '../base/angular-chart'
 require '../base/soundmanager2-nodebug'
 require 'script!../base/tumblr'
 require '../base/ui-bootstrap-tpls-0.4.0'
@@ -49,7 +51,7 @@ require '../shared/pfm-angular-sanitize'
 require '../shared/init.coffee'
 
 
-ponyfm = angular.module 'ponyfm', ['ui.bootstrap', 'ui.router', 'ui.date', 'ui.sortable', 'angularytics', 'ngSanitize', 'hc.marked']
+ponyfm = angular.module 'ponyfm', ['ui.bootstrap', 'ui.router', 'ui.date', 'ui.sortable', 'angularytics', 'ngSanitize', 'hc.marked', 'chart.js']
 window.pfm.preloaders = {}
 
 # Inspired by: https://stackoverflow.com/a/30652110/3225811

resources/assets/scripts/app/controllers/track-stats.coffee

@@ -23,5 +23,16 @@ module.exports = angular.module('ponyfm').controller "track-stats", [
         statsLoaded = (stats) ->
             console.log(stats)
 
+            labelArray = []
+            dataArray = []
+
+            for key, value of stats.playStats
+                labelArray.push value.hour || value.days
+                dataArray.push value.plays
+
+            $scope.playsLabels = labelArray
+            $scope.playsData = dataArray
+            $scope.series = ['Plays']
+
         statsService.loadStats($scope.trackId).done statsLoaded
 ]

resources/assets/scripts/base/angular-chart.js

@@ -0,0 +1,336 @@
+(function (factory) {
+  'use strict';
+  if (typeof exports === 'object') {
+    // Node/CommonJS
+    module.exports = factory(
+      typeof angular !== 'undefined' ? angular : require('angular'),
+      typeof Chart !== 'undefined' ? Chart : require('chart.js'));
+  }  else if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['angular', 'chart'], factory);
+  } else {
+    // Browser globals
+    if (typeof angular === 'undefined' || typeof Chart === 'undefined') throw new Error('Chart.js library needs to included, ' +
+      'see http://jtblin.github.io/angular-chart.js/');
+    factory(angular, Chart);
+  }
+}(function (angular, Chart) {
+  'use strict';
+
+  Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
+  Chart.defaults.global.elements.line.borderWidth = 2;
+  Chart.defaults.global.elements.rectangle.borderWidth = 2;
+  Chart.defaults.global.legend.display = false;
+  Chart.defaults.global.colors = [
+    '#97BBCD', // blue
+    '#DCDCDC', // light grey
+    '#F7464A', // red
+    '#46BFBD', // green
+    '#FDB45C', // yellow
+    '#949FB1', // grey
+    '#4D5360'  // dark grey
+  ];
+
+  var usingExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
+    window.G_vmlCanvasManager !== null &&
+    typeof window.G_vmlCanvasManager.initElement === 'function';
+
+  if (usingExcanvas) Chart.defaults.global.animation = false;
+
+  return angular.module('chart.js', [])
+    .provider('ChartJs', ChartJsProvider)
+    .factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
+    .directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }])
+    .directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('line'); }])
+    .directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bar'); }])
+    .directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('radar'); }])
+    .directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('doughnut'); }])
+    .directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('pie'); }])
+    .directive('chartPolarArea', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('polarArea'); }]);
+
+  /**
+   * Wrapper for chart.js
+   * Allows configuring chart js using the provider
+   *
+   * angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
+   *   ChartJsProvider.setOptions({ responsive: true });
+   *   ChartJsProvider.setOptions('Line', { responsive: false });
+   * })))
+   */
+  function ChartJsProvider () {
+    var options = {};
+    var ChartJs = {
+      Chart: Chart,
+      getOptions: function (type) {
+        var typeOptions = type && options[type] || {};
+        return angular.extend({}, options, typeOptions);
+      }
+    };
+
+    /**
+     * Allow to set global options during configuration
+     */
+    this.setOptions = function (type, customOptions) {
+      // If no type was specified set option for the global object
+      if (! customOptions) {
+        customOptions = type;
+        options = angular.extend(options, customOptions);
+        return;
+      }
+      // Set options for the specific chart
+      options[type] = angular.extend(options[type] || {}, customOptions);
+    };
+
+    this.$get = function () {
+      return ChartJs;
+    };
+  }
+
+  function ChartJsFactory (ChartJs, $timeout) {
+    return function chart (type) {
+      return {
+        restrict: 'CA',
+        scope: {
+          chartGetColor: '=?',
+          chartType: '=',
+          chartData: '=?',
+          chartLabels: '=?',
+          chartOptions: '=?',
+          chartSeries: '=?',
+          chartColors: '=?',
+          chartClick: '=?',
+          chartHover: '=?',
+          chartYAxes: '=?'
+        },
+        link: function (scope, elem/*, attrs */) {
+          var chart;
+
+          if (usingExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
+
+          // Order of setting "watch" matter
+
+          scope.$watch('chartData', function (newVal, oldVal) {
+            if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) {
+              destroyChart(chart, scope);
+              return;
+            }
+            var chartType = type || scope.chartType;
+            if (! chartType) return;
+
+            if (chart && canUpdateChart(newVal, oldVal))
+              return updateChart(chart, newVal, scope);
+
+            createChart(chartType);
+          }, true);
+
+          scope.$watch('chartSeries', resetChart, true);
+          scope.$watch('chartLabels', resetChart, true);
+          scope.$watch('chartOptions', resetChart, true);
+          scope.$watch('chartColors', resetChart, true);
+
+          scope.$watch('chartType', function (newVal, oldVal) {
+            if (isEmpty(newVal)) return;
+            if (angular.equals(newVal, oldVal)) return;
+            createChart(newVal);
+          });
+
+          scope.$on('$destroy', function () {
+            destroyChart(chart, scope);
+          });
+
+          function resetChart (newVal, oldVal) {
+            if (isEmpty(newVal)) return;
+            if (angular.equals(newVal, oldVal)) return;
+            var chartType = type || scope.chartType;
+            if (! chartType) return;
+
+            // chart.update() doesn't work for series and labels
+            // so we have to re-create the chart entirely
+            createChart(chartType);
+          }
+
+          function createChart (type) {
+            // TODO: check parent?
+            if (isResponsive(type, scope) && elem[0].clientHeight === 0) {
+              return $timeout(function () {
+                createChart(type);
+              }, 50, false);
+            }
+            if (! scope.chartData || ! scope.chartData.length) return;
+            scope.chartGetColor = typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
+            var colors = getColors(type, scope);
+            var cvs = elem[0], ctx = cvs.getContext('2d');
+            var data = Array.isArray(scope.chartData[0]) ?
+              getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartYAxes) :
+              getData(scope.chartLabels, scope.chartData, colors);
+
+            var options = angular.extend({}, ChartJs.getOptions(type), scope.chartOptions);
+            // Destroy old chart if it exists to avoid ghost charts issue
+            // https://github.com/jtblin/angular-chart.js/issues/187
+            destroyChart(chart, scope);
+
+            chart = new ChartJs.Chart(ctx, {
+              type: type,
+              data: data,
+              options: options
+            });
+            scope.$emit('chart-create', chart);
+
+            // Bind events
+            cvs.onclick = scope.chartClick ? getEventHandler(scope, chart, 'chartClick', false) : angular.noop;
+            cvs.onmousemove = scope.chartHover ? getEventHandler(scope, chart, 'chartHover', true) : angular.noop;
+          }
+        }
+      };
+    };
+
+    function canUpdateChart (newVal, oldVal) {
+      if (newVal && oldVal && newVal.length && oldVal.length) {
+        return Array.isArray(newVal[0]) ?
+        newVal.length === oldVal.length && newVal.every(function (element, index) {
+          return element.length === oldVal[index].length; }) :
+          oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false;
+      }
+      return false;
+    }
+
+    function sum (carry, val) {
+      return carry + val;
+    }
+
+    function getEventHandler (scope, chart, action, triggerOnlyOnChange) {
+      var lastState = null;
+      return function (evt) {
+        var atEvent = chart.getElementsAtEvent || chart.getPointsAtEvent;
+        if (atEvent) {
+          var activePoints = atEvent.call(chart, evt);
+          if (triggerOnlyOnChange === false || angular.equals(lastState, activePoints) === false) {
+            lastState = activePoints;
+            scope[action](activePoints, evt);
+          }
+        }
+      };
+    }
+
+    function getColors (type, scope) {
+      var colors = angular.copy(scope.chartColors ||
+        ChartJs.getOptions(type).chartColors ||
+        Chart.defaults.global.colors
+      );
+      var notEnoughColors = colors.length < scope.chartData.length;
+      while (colors.length < scope.chartData.length) {
+        colors.push(scope.chartGetColor());
+      }
+      // mutate colors in this case as we don't want
+      // the colors to change on each refresh
+      if (notEnoughColors) scope.chartColors = colors;
+      return colors.map(convertColor);
+    }
+
+    function convertColor (color) {
+      if (typeof color === 'object' && color !== null) return color;
+      if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
+      return getRandomColor();
+    }
+
+    function getRandomColor () {
+      var color = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
+      return getColor(color);
+    }
+
+    function getColor (color) {
+      return {
+        backgroundColor: rgba(color, 0.2),
+        borderColor: rgba(color, 1),
+        pointBackgroundColor: rgba(color, 1),
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: rgba(color, 0.8)
+      };
+    }
+
+    function getRandomInt (min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function rgba (color, alpha) {
+      if (usingExcanvas) {
+        // rgba not supported by IE8
+        return 'rgb(' + color.join(',') + ')';
+      } else {
+        return 'rgba(' + color.concat(alpha).join(',') + ')';
+      }
+    }
+
+    // Credit: http://stackoverflow.com/a/11508164/1190235
+    function hexToRgb (hex) {
+      var bigint = parseInt(hex, 16),
+        r = (bigint >> 16) & 255,
+        g = (bigint >> 8) & 255,
+        b = bigint & 255;
+
+      return [r, g, b];
+    }
+
+    function getDataSets (labels, data, series, colors, yaxis) {
+      return {
+        labels: labels,
+        datasets: data.map(function (item, i) {
+          var dataset = angular.extend({}, colors[i], {
+            label: series[i],
+            data: item
+          });
+          if (yaxis) {
+            dataset.yAxisID = yaxis[i];
+          }
+          return dataset;
+        })
+      };
+    }
+
+    function getData (labels, data, colors) {
+      return {
+        labels: labels,
+        datasets: [{
+          data: data,
+          backgroundColor: colors.map(function (color) {
+            return color.pointBackgroundColor;
+          }),
+          hoverBackgroundColor: colors.map(function (color) {
+            return color.backgroundColor;
+          })
+        }]
+      };
+    }
+
+    function updateChart (chart, values, scope) {
+      if (Array.isArray(scope.chartData[0])) {
+        chart.data.datasets.forEach(function (dataset, i) {
+          dataset.data = values[i];
+        });
+      } else {
+        chart.data.datasets[0].data = values;
+      }
+
+      chart.update();
+      scope.$emit('chart-update', chart);
+    }
+
+    function isEmpty (value) {
+      return ! value ||
+        (Array.isArray(value) && ! value.length) ||
+        (typeof value === 'object' && ! Object.keys(value).length);
+    }
+
+    function isResponsive (type, scope) {
+      var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.chartOptions);
+      return options.responsive;
+    }
+
+    function destroyChart(chart, scope) {
+      if(! chart) return;
+      chart.destroy();
+      scope.$emit('chart-destroy', chart);
+    }
+  }
+}));

resources/assets/styles/base/angular-chart.css

@@ -0,0 +1,49 @@
+.chart-legend,
+.bar-legend,
+.line-legend,
+.pie-legend,
+.radar-legend,
+.polararea-legend,
+.doughnut-legend {
+  list-style-type: none;
+  margin-top: 5px;
+  text-align: center;
+  /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
+  -webkit-padding-start: 0;
+  /* Webkit */
+  -moz-padding-start: 0;
+  /* Mozilla */
+  padding-left: 0;
+  /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
+}
+.chart-legend li,
+.bar-legend li,
+.line-legend li,
+.pie-legend li,
+.radar-legend li,
+.polararea-legend li,
+.doughnut-legend li {
+  display: inline-block;
+  white-space: nowrap;
+  position: relative;
+  margin-bottom: 4px;
+  border-radius: 5px;
+  padding: 2px 8px 2px 28px;
+  font-size: smaller;
+  cursor: default;
+}
+.chart-legend-icon,
+.bar-legend-icon,
+.line-legend-icon,
+.pie-legend-icon,
+.radar-legend-icon,
+.polararea-legend-icon,
+.doughnut-legend-icon {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+}

resources/assets/styles/layout.less

@@ -243,3 +243,12 @@ header {
 .file-over-notice {
   display: none;
 }
+
+.chart-container {
+    width: 500px;
+    height: 400px;
+}
+
+.chart-exit {
+    margin-bottom: 10px;
+}