Merge pull request #10 from Wtower/dashboard-graph

Dashboard graph

README.md

@@ -54,13 +54,22 @@ Automate the CRUD operations using gentelella's PNotify and default REST respons
 
 Provide a list paginator.
 
+### ga-progress
+
+Render a progress bar.
+
 ### ga-dashboard-counter
 
 Provide a large counter panel for dashboard as in 
 [Gentelella index2](https://colorlib.com/polygon/gentelella/index2.html). 
 
 [Example](https://github.com/Wtower/generator-makrina/blob/master/generators/angular-app/templates/dashboard/dashboard.template.html)
 
+### ga-dashboard-graph-flot
+
+Render a line graph panel as in 
+[Gentelella index](https://colorlib.com/polygon/gentelella/index.html). 
+
 ### form-field-text
 
 Render a standard gentelella form textbox.

gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.component.js

@@ -0,0 +1,105 @@
+// /**
+//  * Created by gkarak on 23/11/2016.
+//  */
+
+angular
+  .module('gaDashboardGraphFlot')
+  .component('gaDashboardGraphFlot', {
+    templateUrl: 'static/ng-gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.template.html',
+    bindings: {
+      graphTitle: '@',
+      graphSubTitle: '@',
+      graphRange: '@',
+      graphId: '@',
+      graphLegendTitle: '@',
+      graphData: '<'
+    },
+    transclude: true,
+    controller: [
+      function GaGraphFlotController() {
+        var self = this;
+
+        // Initialise
+        self.$onInit = function () {
+          if (!self.graphId) self.graphId = 'main-graph';
+          self.plotted = false;
+        };
+
+        // Run on every digest cycle
+        // The only suitable event, because the id in template is set after any other event
+        // 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) {
+
+            // Transform mongo data to flot data
+            var data = [];
+            self.graphData.forEach(function (row) {
+              var series = [];
+              row.forEach(function (val) {
+                series.push([
+                  gd(val._id.year, val._id.month, val._id.day),
+                  val.count
+                ]);
+              });
+              data.push(series);
+            });
+
+            function gd(year, month, day) {
+              return new Date(year, month - 1, day + 1).getTime();
+            }
+
+            // PLOT
+            // !self.plotted && self.graphData && canvas.length && $.plot(canvas, self.graphData, {
+            $.plot(canvas, data, {
+              series: {
+                lines: {
+                  show: false,
+                  fill: true
+                },
+                splines: {
+                  show: true,
+                  tension: 0.4,
+                  lineWidth: 1,
+                  fill: 0.4
+                },
+                points: {
+                  radius: 0,
+                  show: true
+                },
+                shadowSize: 2
+              },
+              grid: {
+                verticalLines: true,
+                hoverable: true,
+                clickable: true,
+                tickColor: "#d5d5d5",
+                borderWidth: 1,
+                color: '#fff'
+              },
+              colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
+              xaxis: {
+                tickColor: "rgba(51, 51, 51, 0.06)",
+                mode: "time",
+                tickSize: [1, "day"],
+                //tickLength: 10,
+                axisLabel: "Date",
+                axisLabelUseCanvas: true,
+                axisLabelFontSizePixels: 12,
+                axisLabelFontFamily: 'Verdana, Arial',
+                axisLabelPadding: 10
+              },
+              yaxis: {
+                ticks: 8,
+                tickColor: "rgba(51, 51, 51, 0.06)"
+              },
+              tooltip: false
+            });
+
+            self.plotted = true;
+          }
+        };
+      }
+    ]
+  });

gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.component.spec.js

@@ -0,0 +1,3 @@
+/**
+ * Created by gkarak on 23/11/2016.
+ */

gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.module.js

@@ -0,0 +1,6 @@
+/**
+ * Created by gkarak on 23/11/2016.
+ */
+
+angular.module('gaDashboardGraphFlot', [
+]);

gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.template.html

@@ -0,0 +1,30 @@
+<div class="dashboard_graph">
+  <div class="row x_title">
+    <div class="col-md-6">
+      <h3>{{ $ctrl.graphTitle }} <small>{{ $ctrl.graphSubTitle }}</small></h3>
+    </div>
+    <div class="col-md-6">
+      <div class="report-range pull-right">
+        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
+        <span>{{ $ctrl.graphRange }}</span> <b class="caret hidden"></b>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-9 col-sm-9 col-xs-12">
+    <div class="canvas-wrapper">
+      <div ng-class="$ctrl.graphId" class="demo-placeholder canvas"></div>
+    </div>
+  </div>
+  <div class="col-md-3 col-sm-3 col-xs-12 bg-white">
+    <div class="x_title">
+      <h2>{{ $ctrl.graphLegendTitle }}</h2>
+      <div class="clearfix"></div>
+    </div>
+
+    <div ng-transclude></div>
+  </div>
+
+  <div class="clearfix"></div>
+</div>
+<br>

gentelella/ga-progress/ga-progress.component.js

@@ -0,0 +1,13 @@
+/**
+ * Created by gkarak on 25/11/2016.
+ */
+
+angular
+  .module('gaProgress')
+  .component('gaProgress', {
+    templateUrl: 'static/ng-gentelella/ga-progress/ga-progress.template.html',
+    bindings: {
+      progressSize: '@',
+      progressValue: '<'
+    }
+  });

gentelella/ga-progress/ga-progress.component.spec.js

@@ -0,0 +1,3 @@
+/**
+ * Created by gkarak on 25/11/2016.
+ */

gentelella/ga-progress/ga-progress.module.js

@@ -0,0 +1,6 @@
+/**
+ * Created by gkarak on 25/11/2016.
+ */
+
+angular.module('gaProgress', [
+]);

gentelella/ga-progress/ga-progress.template.html

@@ -0,0 +1,6 @@
+<div class="progress progress_{{ $ctrl.progressSize || 'sm' }}">
+  <div class="progress-bar bg-green"
+       data-transitiongoal="{{ $ctrl.progressValue }}"
+       aria-valuenow="{{ $ctrl.progressValue }}"
+       ng-style="{width: $ctrl.progressValue + '%'}"></div>
+</div>

gentelella/gentelella.generic.sass

@@ -53,3 +53,20 @@ ga-paginate
     > .active > a, > .active > a:hover
       color: #2A3F54
       font-weight: 700
+
+ga-dashboard-graph-flot
+  .report-range
+    background: #fff
+    cursor: pointer
+    padding: 5px 10px
+    border: 1px solid #ccc
+
+  .canvas-wrapper
+    width: 100%
+
+  .canvas
+    height: 260px
+    width: 100%
+
+  ga-progress .progress
+    width: 76%

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-gentelella",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Angular admin interface based on Gentelella bootstrap theme markup",
   "repository": {
     "type": "git",