Merge pull request #20 from Wtower/more-graphs

Wtower · web-flow · commit d24b38ed9eca · 2016-12-23T02:29:22.000+02:00
More graphs
diff --git a/docs/ga-dashboard-graph-bars.rst b/docs/ga-dashboard-graph-bars.rst
@@ -0,0 +1,38 @@
+ga-dashboard-graph-bars
+=======================
+
+Render a bars graph in panel as in `Gentelella index`_. The graph consists of ga-progress_ bars.
+
+.. _Gentelella index: https://colorlib.com/polygon/gentelella/index.html
+.. _ga-progress: ga-progress.html
+
+.. image:: images/ga-dashboard-graph-bars.png
+
+Binding reference
+-----------------
+
+- ``graph-title``: The graph panel title (string)
+- ``graph-sub-title``: The subtitle presented next to title in smaller font size (string)
+- ``graph-heading``: The heading in the content (string)
+- ``graph-data``: The main graph data (array)
+
+The graph data should follow the format:
+
+::
+
+  [{lower: 1, upper: 5, percentage: 15, count: 6}, ...]
+
+Transclude
+----------
+
+The component allows the transclude of further content below.
+
+Code sample
+-----------
+
+::
+
+    <ga-dashboard-graph-bars graph-title="Age distribution"
+                             graph-heading="Percentage per age class"
+                             graph-data="$ctrl.dashboard.ages"></ga-dashboard-graph-bars>
+
diff --git a/docs/ga-dashboard-graph-chart.rst b/docs/ga-dashboard-graph-chart.rst
@@ -0,0 +1,57 @@
+ga-dashboard-graph-chart
+========================
+
+Render a `chart.js`_ graph in panel as in `Gentelella index`_.
+
+.. _chart.js: http://www.chartjs.org/docs/
+.. _Gentelella index: https://colorlib.com/polygon/gentelella/index.html
+
+.. image:: images/ga-dashboard-graph-chart.png
+
+Binding reference
+-----------------
+
+- ``graph-title``: The graph panel title (string)
+- ``graph-sub-title``: The subtitle presented next to title in smaller font size (string)
+- ``graph-heading``: The heading or name of the series (string)
+- ``graph-id``: A unique HTML id for jquery reference, default ``main-graph`` (string)
+- ``graph-type``: The Chart.js type: line, bar, radar, pie, doughnut, bubble (string)
+- ``graph-max-values``: If the values provided are more than this number, the remaining will be added to the last.
+  For example, if the chart shows top 5 cities, and 6 are provided, the 6th value will be added to the 5th.
+  Default 5 (integer)
+- ``graph-max-ellipsis``: If the above parameter is used, the text to replace the last label with.
+  Default 'All others' (string)
+- ``graph-colours``: An array of strings with colours for the series, defaults to gentelella colours (array)
+- ``graph-data``: The main graph data (array)
+
+The graph data should follow the format:
+
+::
+
+  [{label: '', value: 0}, ...]
+
+Transclude
+----------
+
+The component allows the transclude of further content below.
+
+Controller
+----------
+
+The controller:
+
+- Groups the data to the specified maximum (if any).
+- Transforms the data from the above more common JSON format to Chart.js format.
+- Initializes the Chart.js graph appropriately.
+
+Code sample
+-----------
+
+::
+
+    <ga-dashboard-graph-chart graph-title="Top cities"
+                              graph-heading="City"
+                              graph-id="canvas2"
+                              graph-type="pie"
+                              graph-data="$ctrl.dashboard.cities"></ga-dashboard-graph-chart>
+
diff --git a/docs/ga-dashboard-graph-flot.rst b/docs/ga-dashboard-graph-flot.rst
@@ -15,6 +15,7 @@ Binding reference
 - ``graph-range``: The date range to present (string)
 - ``graph-id``: A unique HTML id for jquery reference, default ``main-graph`` (string)
 - ``graph-legend-title``: The title of the legent column (string)
+- ``graph-colours``: An array of strings with colours for the series, defaults to gentelella colours (array)
 - ``graph-data``: The main graph data (array)
 
 Regarding the graph data. Gentelella uses the `Flot`_ graph library that requires that data is sorted by date.
@@ -40,7 +41,10 @@ The component allows the transclude of markup for the legend column body.
 Controller
 ----------
 
-The controller calls initializes the Flot graph appropriately.
+The controller:
+
+- Transforms the data from the above more common JSON format to Flot format.
+- Initializes the Flot graph appropriately.
 
 Code sample
 -----------
diff --git a/docs/images/ga-dashboard-graph-bars.png b/docs/images/ga-dashboard-graph-bars.png
diff --git a/docs/images/ga-dashboard-graph-chart.png b/docs/images/ga-dashboard-graph-chart.png
diff --git a/docs/index.rst b/docs/index.rst
@@ -24,6 +24,8 @@ are based on the markup by `Gentelella`_ bootstrap template.
    ga-progress
    ga-dashboard-counter
    ga-dashboard-graph-flot
+   ga-dashboard-graph-bars
+   ga-dashboard-graph-chart
    form-field-text
    form-field-select
    form-field-checkbox
diff --git a/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.component.js b/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.component.js
@@ -0,0 +1,16 @@
+/**
+ * Created by gkarak on 22/12/2016.
+ */
+
+angular
+  .module('gaDashboardGraphBars')
+  .component('gaDashboardGraphBars', {
+    templateUrl: 'ng-gentelella/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.template.html',
+    bindings: {
+      graphTitle: '@',
+      graphSubTitle: '@',
+      graphHeading: '@',
+      graphData: '<'
+    },
+    transclude: true
+  });
diff --git a/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.component.spec.js b/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.component.spec.js
@@ -0,0 +1,3 @@
+/**
+ * Created by gkarak on 22/12/2016.
+ */
diff --git a/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.module.js b/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.module.js
@@ -0,0 +1,8 @@
+/**
+ * Created by gkarak on 22/12/2016.
+ */
+
+angular.module('gaDashboardGraphBars', [
+  'gaPanel',
+  'gaProgress'
+]);
diff --git a/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.template.html b/gentelella/ga-dashboard-graph-bars/ga-dashboard-graph-bars.template.html
@@ -0,0 +1,11 @@
+<ga-panel panel-title="{{ $ctrl.graphTitle }}" panel-sub-title="{{ $ctrl.graphSubTitle }}">
+  <h4>{{ $ctrl.graphHeading }}</h4>
+  <div class="widget_summary" ng-repeat="item in $ctrl.graphData">
+    <div class="w_left w_25">{{ item.lower }}-{{ item.upper }}</div>
+    <div class="w_center w_55">
+      <ga-progress progress-size="md" progress-value="{{ item.percent }}"></ga-progress>
+    </div>
+    <div class="w_right w_20 clearfix"><span>{{ item.count }}</span></div>
+  </div>
+  <div ng-transclude></div>
+</ga-panel>
diff --git a/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.component.js b/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.component.js
@@ -0,0 +1,102 @@
+/**
+ * Created by gkarak on 22/12/2016.
+ */
+
+angular
+  .module('gaDashboardGraphChart')
+  .component('gaDashboardGraphChart', {
+    templateUrl: 'ng-gentelella/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.template.html',
+    bindings: {
+      graphTitle: '@',
+      graphSubTitle: '@',
+      graphHeading: '@',
+      graphId: '@',
+      graphType: '@',
+      graphMaxValues: '@',
+      graphMaxEllipsis: '@',
+      graphColours: '<',
+      graphData: '<'
+    },
+    transclude: true,
+    controller: [
+      function GaGraphChartController() {
+        var self = this;
+
+        // helper function to convert hex/rgb colour to rgba
+        var rgba = function (colour, a) {
+          // first check if colour is rgb
+          var rgb = /^rgb\(([0-9]*),\s?([0-9]*),\s?([0-9]*)\)$/.exec(colour);
+          // or check if it is hex
+          if (!rgb) rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(colour);
+          if (!rgb) return colour;
+          for (var i = 0; i <= 3; i++) {
+            rgb[i] = parseInt(rgb[i], 16);
+          }
+          return 'rgba(' + rgb[1] + ', ' + rgb[2] + ', ' + rgb[3] + ', ' + a + ')';
+        };
+
+        // Initialise
+        self.$onInit = function () {
+          if (!self.graphId) self.graphId = 'main-graph';
+        };
+
+        // Reset plotted
+        self.onChanges = function () {
+          self.plotted = false;
+        };
+
+        // The only suitable event, because the id in template is set
+        // after any other event including onChanges
+        // This is why we call plot only once with self.plotted
+        self.$doCheck = function () {
+          var canvas = $('.' + self.graphId);
+          if (self.plotted || !self.graphData || !canvas.length) return;
+
+          // Parse bindings
+          if (!self.graphColours) self.graphColours = ['#3498DB', '#26B99A', '#9B59B6', '#BDC3C7', '#E74C3C'];
+          self.graphHoverColours = [];
+          for (var i = 0; i < self.graphColours.length; i++) {
+            self.graphHoverColours.push(rgba(self.graphColours[i], 0.8))
+          }
+          self.graphMaxValues = parseInt(self.graphMaxValues) || 5;
+
+          // Transform data: allow only a max number of values
+          var lastItem = self.graphData[self.graphMaxValues - 1];
+          for (i = self.graphMaxValues; 0 < i && i < self.graphData.length; i++) {
+            var item = self.graphData[i];
+            lastItem.label = self.graphMaxEllipsis || 'All other';
+            lastItem.value += item.value;
+            self.graphData.splice(i--, 1);
+          }
+
+          // Transform data: split into labels/data arrays for chart.js
+          var labels = [];
+          var data = [];
+          for (i = 0; i < self.graphData.length; i++) {
+            item = self.graphData[i];
+            if (!item.label) item.label = '?';
+            labels.push(item.label);
+            data.push(item.value);
+          }
+
+          new Chart(canvas[0], {
+            type: self.graphType,
+            tooltipFillColor: 'rgba(51, 51, 51, 0.55)',
+            data: {
+              labels: labels,
+              datasets: [{
+                data: data,
+                backgroundColor: self.graphColours,
+                hoverBackgroundColor: self.graphHoverColours
+              }]
+            },
+            options: {
+              legend: false,
+              responsive: false
+            }
+          });
+          self.plotted = true;
+        }
+      }
+    ]
+  });
diff --git a/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.component.spec.js b/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.component.spec.js
@@ -0,0 +1,3 @@
+/**
+ * Created by gkarak on 22/12/2016.
+ */
diff --git a/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.module.js b/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.module.js
@@ -0,0 +1,7 @@
+/**
+ * Created by gkarak on 22/12/2016.
+ */
+
+angular.module('gaDashboardGraphChart', [
+  'gaPanel'
+]);
diff --git a/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.template.html b/gentelella/ga-dashboard-graph-chart/ga-dashboard-graph-chart.template.html
@@ -0,0 +1,30 @@
+<ga-panel panel-title="{{ $ctrl.graphTitle }}" panel-sub-title="{{ $ctrl.graphSubTitle }}">
+  <table class="" style="width:100%">
+    <tbody><tr>
+      <th style="width:37%;">
+        <p>Top 5</p>
+      </th>
+      <th>
+        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
+          <p>{{ $ctrl.graphHeading }}</p>
+        </div>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <canvas ng-class="$ctrl.graphId" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
+      </td>
+      <td>
+        <table class="tile_info">
+          <tbody>
+          <tr ng-repeat="item in $ctrl.graphData | limitTo: $ctrl.graphMaxValues">
+            <td><p><i class="fa fa-square" ng-style="{color: $ctrl.graphColours[$index]}"></i>{{ item.label }}</p></td>
+            <td>{{ item.value }}</td>
+          </tr>
+          </tbody></table>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+  <div ng-transclude></div>
+</ga-panel>
diff --git a/gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.component.js b/gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.component.js
@@ -12,6 +12,7 @@ angular
       graphRange: '@',
       graphId: '@',
       graphLegendTitle: '@',
+      graphColours: '<',
       graphData: '<'
     },
     transclude: true,
@@ -22,17 +23,24 @@ angular
         // Initialise
         self.$onInit = function () {
           if (!self.graphId) self.graphId = 'main-graph';
+        };
+
+        // Reset plotted
+        self.onChanges = function () {
           self.plotted = false;
         };
 
-        // Run on every digest cycle
-        // The only suitable event, because the id in template is set after any other event
+        // The only suitable event, because the id in template is set
+        // after any other event including onChanges
         // This is why we call plot only once with self.plotted
         self.$doCheck = function () {
           var canvas = $('.' + self.graphId);
 
           if (!self.plotted && self.graphData && canvas.length) {
 
+            // Parse bindings
+            if (!self.graphColours) self.graphColours = ['rgba(38, 185, 154, 0.38)', 'rgba(3, 88, 106, 0.38)'];
+
             // Transform mongo data to flot data
             var data = [];
             self.graphData.forEach(function (row) {
@@ -74,25 +82,25 @@ angular
                 verticalLines: true,
                 hoverable: true,
                 clickable: true,
-                tickColor: "#d5d5d5",
+                tickColor: '#d5d5d5',
                 borderWidth: 1,
                 color: '#fff'
               },
-              colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
+              colors: self.graphColours,
               xaxis: {
-                tickColor: "rgba(51, 51, 51, 0.06)",
-                mode: "time",
-                tickSize: [1, "day"],
+                tickColor: 'rgba(51, 51, 51, 0.06)',
+                mode: 'time',
+                tickSize: [1, 'day'],
                 //tickLength: 10,
-                axisLabel: "Date",
+                axisLabel: 'Date',
                 axisLabelUseCanvas: true,
                 axisLabelFontSizePixels: 12,
                 axisLabelFontFamily: 'Verdana, Arial',
                 axisLabelPadding: 10
               },
               yaxis: {
                 ticks: 8,
-                tickColor: "rgba(51, 51, 51, 0.06)"
+                tickColor: 'rgba(51, 51, 51, 0.06)'
               },
               tooltip: false
             });
diff --git a/gentelella/ga-paginate/ga-paginate.component.js b/gentelella/ga-paginate/ga-paginate.component.js
diff --git a/gentelella/ga-paginate/ga-paginate.template.html b/gentelella/ga-paginate/ga-paginate.template.html
diff --git a/gentelella/gentelella.generic.sass b/gentelella/gentelella.generic.sass

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/**`
	`2`	`+ * Created by gkarak on 22/12/2016.`
	`3`	`+ */`