Milestone 04

ADDING-NEW-CHART-TYPE.md

@@ -0,0 +1,44 @@
+# Adding New Chart Type
+**Global Chart Factory** have generic chart model and each chart library have it is own factory and it is extended the Global Chart Factory. So all Supporting  chart is listed can be found in it's own factory. 
+
+##Pre-request
+Chart Factory is needed to define correctly.
+
+##Steps to be followed
+1. Supporting chart types need to define in ChartList array as below. You can add new hart types in there. If you need any data level transformation for chart you can define it in `Factory`. 
+```javascript
+var ChartList = {
+  'Bar': 'BarChart',
+  'Line': 'LineChart'
+};
+```
+  1.2. Develop the rest of method you need from you charting library
+
+2. Update the configure file for new chart type. Update 'chartTypes' as below.
+```javascript
+  'chartTypes': ['Line', 'Bar']
+```
+Make sure you add same key for `ChartList` in chart library factory.
+
+#### If chart Data Model is considerable different (Need to introduce new model for chart), If there is a huge differnt you can extend the factory (In Sub Library model)
+
+##Build, Test and Run
+ * `npm install` first, If you hav not run it before.
+ * `bower install` will download new library for application.
+
+### Build the application
+
+`./grunt build`
+
+Run `grunt build` for building 
+
+### Preview Web application
+
+`./grunt serve` 
+
+This will launch a WebApplication on port **9000** and update on code changes.
+
+### Testing
+
+`./grunt test` 
+

ADDING-NEW-CHARTING-LIBRARY.md

@@ -0,0 +1,71 @@
+# Adding New Chart Library
+**Global Chart Factory** have generic chart model and each chart library have it is own factory. Therefore when you adding new chart library you have to extended the Global Chart Factory.
+
+##Pre-request
+Need to add new JS charting library for the project or application.
+
+ * `bower install <library name> --save`
+
+This command update your bower.json and index html
+
+##Steps to be followed
+1. Create a new factory inside the **chart-factory** with extending Global Chart Factory.
+
+```javascript
+angular.module('apacheZeppelinGsocApp').factory('MyNewChartFactory', function(
+  ChartFactory) {
+
+  //extending common chart model
+  var MyNewChartFactory = new ChartFactory('NewChartLibraryName', newChart);
+
+  //To-Do Implement or add new chart 
+});
+```
+  1.1. Supporting chart types need to define in ChartList array as below
+```javascript
+var ChartList = {
+  'Bar': 'BarChart',
+  'Line': 'LineChart'
+};
+```
+  1.2. Develop the rest of method you need from you charting library
+
+2. Factories are expose from **ChartService**. Therefore you can add new services (only one method) that is using new factory.
+
+```javascript
+  this.getNewChart = function(chartType) {
+    var myChart = MyNewChartFactory;
+    myChart.setChartType(chartType);
+    return myChart;
+  };  
+```
+
+3. Update the configure file for new chart library. Update 'libraryName' as below. Add template for views
+
+```javascript
+  'library': 'highChart',
+  'service': 'getHighChart',
+  'template': 'views/charts/highchart.html'
+```
+Make sure you add you test cases and unit test for new chart library factory. 
+
+##Build, Test and Run
+ * `npm install` first, If you hav not run it before.
+ * `bower install` will download new library for application.
+
+### Build the application
+
+`./grunt build`
+
+Run `grunt build` for building 
+
+### Preview Web application
+
+`./grunt serve` 
+
+This will launch a WebApplication on port **9000** and update on code changes.
+
+### Testing
+
+`./grunt test` 
+

Gruntfile.js

@@ -342,6 +342,7 @@ module.exports = function (grunt) {
             '.htaccess',
             '*.html',
             'views/{,*/}*.html',
+            'data/{,*/}*.csv',
             'images/{,*/}*.{webp}',
             'styles/fonts/{,*/}*.*'
           ]

app/scripts/chart-factory/google-chart-factory.js

@@ -10,7 +10,8 @@ angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function(
   ChartFactory) {
   var ChartList = {
     'Bar': 'BarChart',
-    'Line': 'LineChart'
+    'Line': 'LineChart',
+    'Area': 'AreaChart'
   };
   //googleChart model (sample chart data model)
   //TO-DO Sample Data will remove after model set.
@@ -38,7 +39,7 @@ angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function(
     options: {
       'isStacked': 'true',
       'fill': 20,
-      'height': 300,
+      'height': 400,
       'displayExactValues': true,
       'vAxis': {
         'gridlines': {
@@ -82,5 +83,6 @@ angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function(
   };
   // define a new internal private method for this chart object
   function setChartAxis() {}
+
   return GoogleChartFactory;
 });

app/scripts/chart-factory/high-chart-factory.js

@@ -4,25 +4,42 @@
  * @name apacheZeppelinGsocApp.HighChartFactory 
  * @description
  * # Extending Gobal Chart Factory for High Chart Model
+ *You can find high chart api in http://api.highcharts.com/highcharts#exporting
  *
  */
 angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(
   ChartFactory) {
   var ChartList = {
     'Bar': 'bar',
-    'Line': 'line'
+    'Line': 'line',
+    'Area': 'area'
   };
   //highChart model
   var HighChartChartModel = {
     options: {
+      exporting: {
+        enabled: false
+      },
       chart: {
         type: 'bar'
       }
     },
+    title: {
+      text:''
+    },
+    subtitle: {
+      text:''
+    },
+    credits: {
+      enabled:false
+    },
+    legend:{
+    },
     xAxis: {
       categories: []
     },
     series: [{
+      name: 'populartiy',
       data: []
     }],
     size: {
@@ -38,8 +55,8 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(
   }
 
   function getHighChart(error, rows) {
-    console.log('loading for view');
-    console.log(rows);
+    //console.log('loading for view');
+    //console.log(rows);
     HighChartChartModel.series[0].data = rows;
   }
 
@@ -66,7 +83,7 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(
   var highAxisLabels = {};
 
   function getHighYaxis(error, rows) {
-    console.log(rows);
+    //console.log(rows);
     highAxisLabels = rows;
     HighChartFactory.viewModel.xAxis.categories = highAxisLabels;
   }

app/scripts/chart-factory/nvd3-chart-factory.js

@@ -9,22 +9,23 @@
 angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(
   ChartFactory) {
   var ChartList = {
-    'Bar': 'discreteBarChart',
-    'Line': 'lineChart'
+    'Bar': 'multiBarHorizontalChart',
+    'Line': 'lineChart',
+    'Area': 'stackedAreaChart'
   };
   //NVD3 Chart model
   var NVD3ChartChartModel = {
     options: {
       chart: {
-        type: 'discreteBarChart',
+        type: 'multiBarHorizontalChart',
         height: 300,
         width: 500,
         showLegend: true,
         margin: {
           top: 20,
-          right: 20,
+          right: 30,
           bottom: 20,
-          left: 20
+          left: 70
         },
         x: function(d) {
           return d.valuex;
@@ -51,7 +52,7 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(
       'values': rows
     };
     NVD3ChartChartModel.data[0] = data;
-    console.log(NVD3ChartChartModel.data);
+    //console.log(NVD3ChartChartModel.data);
   }
 
   function nvd3Model(d) {
@@ -83,10 +84,10 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(
   var nvd3AxisLabels = {};
 
   function getNVD3Yaxis(error, rows) {
-    console.log(rows);
+    //console.log(rows);
     nvd3AxisLabels = rows;
     NVD3ChartFactory.viewModel.options.chart.xAxis = {
-      'axisLabel': 'Make',
+       //'axisLabel': 'Make',
       'tickFormat': function(d) {
         return nvd3AxisLabels[d];
       }

app/scripts/config/chart-config.js

@@ -11,14 +11,17 @@ angular.module('apacheZeppelinGsocApp')
   .constant('chartConfig', {
     'libraryName': [{
       'library': 'highChart',
+      'service': 'getHighChart',
       'template': 'views/charts/highchart.html'
     }, {
       'library': 'NVD3Chart',
+      'service': 'getNVD3Chart',
       'template': 'views/charts/nvd3chart.html'
     }, {
       'library': 'googleChart',
+      'service': 'getGoogleChart',
       'template': 'views/charts/googlechart.html'
     }],
     'dataFiles': ['car', 'bike'],
-    'chartTypes': ['Line', 'Bar']
+    'chartTypes': ['Line', 'Bar','Area']
   });

app/scripts/controllers/chart-controllers.js

@@ -33,6 +33,7 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope,
     setButtonActive('chartLibraryButton', libraryName[libraryIndex].library);
     ChartMetaService.setChartLib(libraryName[libraryIndex].library);
     ChartMetaService.setChartTemplateURL(libraryName[libraryIndex].template);
+    ChartMetaService.setChartService(libraryName[libraryIndex].service);
     if (ChartMetaService.getChartType() === null) {
       //setting default chart type
       ChartMetaService.setChartType('Bar');
@@ -55,27 +56,14 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope,
     //Checking chart requirement is completed
     var myNewChart = {};
     var myChartType = ChartMetaService.getChartType();
-    console.log(myChartType);
-    switch (ChartMetaService.getChartLib()) {
-      case 'NVD3Chart':
-        //set data for NVD3
-        myNewChart = ChartService.getNVD3Chart(myChartType);
-        vm.data = myNewChart.viewModel.data;
-        vm.options = myNewChart.viewModel.options;
-        break;
-      case 'highChart':
-        myNewChart = ChartService.getHighChart(myChartType);
-        vm.chartConfig = myNewChart.viewModel;
-        break;
-      case 'googleChart':
-        myNewChart = ChartService.getGoogleChart(myChartType);
-        vm.chart = myNewChart.viewModel;
-        break;
+    var chartService = ChartMetaService.getChartService();
+    if (chartService !== null) {
+      myNewChart = ChartService[chartService](myChartType);
+      vm.chart = myNewChart.viewModel;
+      if (myNewChart.model) {
+        renderChart(myNewChart.model, data);
+      }
     }
-    if (myNewChart.model) {
-      renderChart(myNewChart.model, data);
-    }
-    //NVD3 axis update
   }
 
   function getData(fileName) {
@@ -85,7 +73,7 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope,
   var active = {
     'dataButton': false,
     'chartLibraryButton': false,
-    'chartTypeButton': false
+    'chartTypeButton': 'Bar'
   };
 
   function setButtonActive(set, type) {

app/scripts/services/chart-meta-service.js

@@ -11,6 +11,7 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() {
   var MetaModel = {
     ChartLib: null,
     ChartTemplateURL: null,
+    ChartService: null,
     ChartType: null,
     ChartDataSetName: null,
     ChartDataSetPath: null,
@@ -26,6 +27,9 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() {
   this.getChartTemplateURL = function() {
     return MetaModel.ChartTemplateURL;
   };
+  this.getChartService = function() {
+    return MetaModel.ChartService;
+  };
   this.getChartDataSetName = function() {
     return MetaModel.ChartDataSetName;
   };
@@ -45,6 +49,9 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() {
   this.setChartTemplateURL = function(ChartTemplateURL) {
     MetaModel.ChartTemplateURL = ChartTemplateURL;
   };
+  this.setChartService = function(ChartService) {
+    MetaModel.ChartService = ChartService;
+  };
   this.setChartDataSetName = function(ChartDataSetName) {
     MetaModel.ChartDataSetName = ChartDataSetName;
     MetaModel.ChartDataSetPath = 'data/' + ChartDataSetName + '.csv';

app/styles/chart.css

@@ -1,5 +1,5 @@
 /*nvd3 chart svg size fixing */
 svg {
-    width: 550px !important;
-    height: 350px !important; 
+  width: 550px !important;
+  height: 350px !important; 
 }

app/styles/cover.css

@@ -153,8 +153,6 @@ body {
     top: 0;
   }
   .mastfoot {
-    position: fixed;
-    bottom: 0;
   }
   /* Start the vertical centering */
   .site-wrapper-inner {

app/views/charts/highchart.html

@@ -1,4 +1,4 @@
 <div class="box">
   <label>High Chart</label>
-  <highchart id="chart1" config="chartctrl.chartConfig"></highchart>
+  <highchart id="chart1" config="chartctrl.chart"></highchart>
 </div>

app/views/charts/nvd3chart.html

@@ -1,4 +1,4 @@
 <div class="box">
   <label>NVD3 Chart</label>
-  <nvd3 options='chartctrl.options' data='chartctrl.data'></nvd3>
+  <nvd3 options='chartctrl.chart.options' data='chartctrl.chart.data'></nvd3>
 </div>