Merge pull request #1706 from ushahidi/switch-to-chartjs

Using chart.js instead of d3
ushahidi · Sep 20, 2021 · d58434f · d58434f
2 parents 3d37e42 + d052fbd
commit d58434f
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 229 deletions.
diff --git a/app/app.js b/app/app.js
@@ -11,9 +11,6 @@ require('angular-local-storage');
 require('checklist-model');
 require('ngGeolocation/ngGeolocation');
 require('ng-showdown');
-window.d3 = require('d3'); // Required for nvd3
-require('./common/wrapper/nvd3-wrapper');
-require('angular-nvd3/src/angular-nvd3');
 require('angular-cache');
 require('angular-linkify');
 require('ngtweet');
@@ -24,11 +21,18 @@ require('./main/main-module.js');
 require('./settings/settings.module.js');
 import ravenModule from './common/raven/raven';
 import * as UshahidiSdk from 'ushahidi-platform-sdk/build/src/index';
+
+import { Chart, registerables } from 'chart.js';
+
+// Change to https://gitlab.com/mmillerbkg/chartjs-adapter-dayjs/-/tree/master once moment is exchanged to dayjs
+import 'chartjs-adapter-dayjs';
+
 // Load platform-pattern-library CSS
 require('ushahidi-platform-pattern-library/assets/fonts/Lato/css/fonts.css');
 require('ushahidi-platform-pattern-library/assets/css/style.min.css');
 require('../sass/vendor.scss');
 
+
 // Make sure we have a window.ushahidi object
 window.ushahidi = window.ushahidi || {};
 
@@ -73,7 +77,6 @@ angular.module('app',
         'angular.filter',
         'ng-showdown',
         'ngGeolocation',
-        'nvd3',
         'angular-cache',
         'linkify',
         ravenModule,
@@ -125,8 +128,9 @@ angular.module('app',
     .factory('_', function () {
         return require('underscore/underscore');
     })
-    .factory('d3', function () {
-        return window.d3;
+    .factory('Chart', function () {
+        Chart.register(...registerables);
+        return Chart;
     })
     .factory('URI', function () {
         return require('URIjs/src/URI.js');

diff --git a/app/common/wrapper/nvd3-wrapper.js b/app/common/wrapper/nvd3-wrapper.js
diff --git a/app/main/activity/bar-chart.directive.js b/app/main/activity/bar-chart.directive.js
@@ -11,62 +11,20 @@ function ActivityBarChart() {
     };
 }
 
-ActivityBarChartController.$inject = ['$scope', '$translate', 'PostEndpoint', 'd3', '_', 'PostFilters'];
-function ActivityBarChartController($scope, $translate, PostEndpoint, d3, _, PostFilters) {
-    $scope.data = [{
-        values: []
-    }];
+ActivityBarChartController.$inject = ['$scope', '$translate', 'PostEndpoint', 'Chart', '_', 'PostFilters'];
+function ActivityBarChartController($scope, $translate, PostEndpoint, Chart, _, PostFilters) {
+    $scope.data = [];
 
     $scope.groupByOptions = {
-        'tags' : 'nav.categories',
+        'status' : 'post.status',
         'form' : 'app.surveys',
-        'status' : 'post.status'
+        'tags' : 'nav.categories'
     };
 
     $scope.groupBy = {
-        value: 'tags'
+        value: 'status'
     };
 
-    $scope.options = {
-        chart: {
-            type: 'multiBarHorizontalChart',
-            height: 450,
-            margin: {
-                top: 0,
-                right: 40,
-                bottom: 40,
-                left: 5
-            },
-            x: function (d) {
-                return d.label;
-            },
-            y: function (d) {
-                return d.total;
-            },
-            showValues: false,
-            showControls: false,
-            valueFormat: d3.format('d'),
-            transitionDuration: 500,
-            xAxis: {
-                axisLabel: $translate.instant('post.categories'),
-                tickPadding: -10,
-                axisLabelDistance: 0
-            },
-            yAxis: {
-                axisLabel: $translate.instant('graph.post_count'),
-                tickFormat: d3.format('d')
-            },
-            tooltip : {
-                contentGenerator: function (data) {
-                    return '<h3>' + data.value + '</h3>' +
-                        '<p>' +  data.data.total + '</p>';
-                }
-            },
-            forceY: 0,
-            barColor: d3.scale.category20().range(),
-            noData: $translate.instant('graph.no_data')
-        }
-    };
 
     $scope.reload = getPostStats;
 
@@ -89,13 +47,87 @@ function ActivityBarChartController($scope, $translate, PostEndpoint, d3, _, Pos
 
         $scope.isLoading = true;
         PostEndpoint.stats(postQuery).$promise.then(function (results) {
-            $scope.options.chart.xAxis.axisLabel = $translate.instant($scope.groupByOptions[$scope.groupBy.value]);
-            if (results.totals[0]) {
-                results.totals[0].key = $scope.options.chart.yAxis.axisLabel;
-            }
             $scope.data = results.totals;
+            generateGraph();
             $scope.isLoading = false;
         });
     }
 
+    function getRandomColour() {
+        let letters = '0123456789ABCDEF'.split('');
+        let colour = '#';
+        for (let i = 0; i < 6; i++) {
+            colour += letters[Math.floor(Math.random() * 16)];
+        }
+        return colour;
+    }
+
+    function extractDatasets () {
+        // extracting data from response
+        let colour = [];
+        return _.map($scope.data, data => {
+            let values = _.map(data.values, value => {
+                colour.push(getRandomColour());
+                return {x: value.label, y: value.total} ;
+            });
+
+            return {
+                label: data.key,
+                data: values,
+                borderColor: colour,
+                backgroundColor: colour
+            };
+        });
+    }
+
+    function generateGraph() {
+        if ($scope.barChart) {
+            $scope.barChart.destroy();
+        }
+        let el = document.getElementById('bar-chart');
+        let config = {
+            type: 'bar',
+            data: {datasets: extractDatasets()},
+            options: {
+                plugins: {
+                    legend:{
+                        display: false
+                    },
+                    tooltip: {
+                        enabled: true,
+                        // colours corresponds to Pattern Library basic colours.
+                        backgroundColor: '#FAFAFA',
+                        borderColor: '#1D232A',
+                        titleColor: '#1D232A',
+                        bodyColor: '#1D232A',
+                        displayColors: false,
+                        // creating tooltip-content
+                        callbacks: {
+                            title: function(context) {
+                                return context[0].label;
+                            },
+                            label: function (context) {
+                                let text = context.parsed.y > 1 ? 'posts' : 'post';
+                                return `${context.formattedValue} ${text}`;
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y:{
+                        ticks: {
+                            precision: 0
+                        },
+                        beginAtZero : true,
+                        title: {
+                            display: true,
+                            text: $translate.instant('graph.post_count')
+                        }
+                    }
+                }
+            }
+        }
+        $scope.barChart = new Chart(el, config);
+
+    }
 }
diff --git a/app/main/activity/bar-chart.html b/app/main/activity/bar-chart.html
@@ -17,5 +17,6 @@
         </div>
     </fieldset>
 
-    <nvd3 options='options' data='data'></nvd3>
+    <p translate ng-show="!data || data.length < 1"> graph.no_data</p>
+    <canvas ng-show="data.length > 0" id="bar-chart"></canvas>
 </div>