From cd32369b999bc8ccd58327c2d9c54c988d201727 Mon Sep 17 00:00:00 2001 From: madhuka Date: Fri, 19 Jun 2015 11:07:28 +0530 Subject: [PATCH 01/16] Removing file set for demo and cleaning code on wrap line 40 --- .editorconfig | 1 + app/index.html | 177 +++++++++--------- app/scripts/controllers/about.js | 17 -- app/scripts/controllers/chart-controllers.js | 21 +-- app/scripts/controllers/chart.js | 128 ------------- app/scripts/controllers/controllers.js | 181 ------------------- app/scripts/controllers/main.js | 17 -- app/scripts/controllers/sample-charts.js | 141 --------------- app/scripts/services/chart-meta-service.js | 4 +- app/views/milestone01.html | 70 ++++--- test/spec/controllers/chart-controllers.js | 18 +- test/spec/controllers/nav-controller.js | 4 +- 12 files changed, 140 insertions(+), 639 deletions(-) delete mode 100755 app/scripts/controllers/about.js delete mode 100644 app/scripts/controllers/chart.js delete mode 100644 app/scripts/controllers/controllers.js delete mode 100755 app/scripts/controllers/main.js delete mode 100644 app/scripts/controllers/sample-charts.js diff --git a/.editorconfig b/.editorconfig index c2cdfb8..211002c 100644 --- a/.editorconfig +++ b/.editorconfig @@ -10,6 +10,7 @@ root = true # Change these settings to your own preference indent_style = space indent_size = 2 +draw_white_space = all # We recommend you to keep these unchanged end_of_line = lf diff --git a/app/index.html b/app/index.html index ec70718..fcc08cf 100644 --- a/app/index.html +++ b/app/index.html @@ -1,96 +1,97 @@ - - - - - - - - - - Apache Zeppelin GSOC15 - - - - - - - - - - - - - - - -
- -
- -
- -
-
- - -
-
- -
- -
-
-

Source code in github, by udantha.

-
-
- -
+ + + + + + + + + + Apache Zeppelin GSOC15 + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+ + +
+
+ +
+
+

Source code in github, + by udantha.

+
+
+ +
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + \ No newline at end of file diff --git a/app/scripts/controllers/about.js b/app/scripts/controllers/about.js deleted file mode 100755 index ddfdcbe..0000000 --- a/app/scripts/controllers/about.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; - -/** - * @ngdoc function - * @name apacheZeppelinGsocApp.controller:AboutCtrl - * @description - * # AboutCtrl - * Controller of the apacheZeppelinGsocApp - */ -angular.module('apacheZeppelinGsocApp') - .controller('AboutCtrl', function ($scope) { - $scope.awesomeThings = [ - 'HTML5 Boilerplate', - 'AngularJS', - 'Karma' - ]; - }); diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js index b488e77..56fa0eb 100644 --- a/app/scripts/controllers/chart-controllers.js +++ b/app/scripts/controllers/chart-controllers.js @@ -5,7 +5,7 @@ * @name apacheZeppelinGsocApp.controller:ChartCtrl * @description * # ChartCtrl - * Controller of the top navigation, mainly use for the dropdown menu + * Controller of chart library, type. * * @author madhuka udantha */ @@ -53,14 +53,16 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, } function drawChart(data) { - //Checking chart requirement is completed + //Checking chart requirement is completed if (ChartMetaService.isMetaCompleted()) { var myNewChart = {}; var myChartType = ChartMetaService.getChartType(); console.log(myChartType); switch (ChartMetaService.getChartLib()) { case 'NVD3Chart': - //chart is genrated from servie, service is using HighChartfactory.HighCHart Factory is extended version of ChartFactory. + //set data for NVD3 + vm.data = []; + //chart is generated from service, service is using HighChartfactory.HighCHart Factory is extended version of ChartFactory. myNewChart = ChartService.getNVD3Chart(myChartType); vm.data[0] = myNewChart.viewModel.data[0]; vm.options = myNewChart.viewModel.options; @@ -73,12 +75,9 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, myNewChart = ChartService.getGoogleChart(myChartType); vm.chart = myNewChart.viewModel; break; - } - - renderChart(myNewChart.model, data); - //nvd3 axis update + //NVD3 axis update } } @@ -86,7 +85,7 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, return d3.csv('data/' + fileName + '.csv'); } - //deafult button picker + //default button picker var active = { 'dataButton': false, 'chartLibraryButton': false, @@ -110,11 +109,5 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, vm.isButtonSelected = isButtonSelected; vm.loadChartLibrary = loadChartLibrary; vm.loadChartType = loadChartType; - /*To-DO (Testing) chart lib testing for lib */ - vm.options = ncd3Chart1.options; - vm.data = ncd3Chart1.data; - vm.chartConfig = highchart.chartConfig; - vm.chart = googleChart; - /*END*/ }); \ No newline at end of file diff --git a/app/scripts/controllers/chart.js b/app/scripts/controllers/chart.js deleted file mode 100644 index 8c43b2f..0000000 --- a/app/scripts/controllers/chart.js +++ /dev/null @@ -1,128 +0,0 @@ -'use strict'; - -/** - * @ngdoc function - * @name apacheZeppelinGsocApp.controller:AboutCtrl - * @description - * # AboutCtrl - * Controller of the apacheZeppelinGsocApp - */ -angular.module('apacheZeppelinGsocApp') - .controller('ChartCtrl', function ($scope) { - $scope.chartObject = { - 'type': 'AreaChart', - 'displayed': true, - 'data': { - 'cols': [ - { - 'id': 'month', - 'label': 'Month', - 'type': 'string', - 'p': {} - }, - { - 'id': 'laptop-id', - 'label': 'Laptop', - 'type': 'number', - 'p': {} - }, - { - 'id': 'desktop-id', - 'label': 'Desktop', - 'type': 'number', - 'p': {} - }, - { - 'id': 'server-id', - 'label': 'Server', - 'type': 'number', - 'p': {} - }, - { - 'id': 'cost-id', - 'label': 'Shipping', - 'type': 'number' - } - ], - 'rows': [ - { - 'c': [ - { - 'v': 'January' - }, - { - 'v': 19, - 'f': '42 items' - }, - { - 'v': 12, - 'f': 'Ony 12 items' - }, - { - 'v': 7, - 'f': '7 servers' - }, - { - 'v': 4 - } - ] - }, - { - 'c': [ - { - 'v': 'February' - }, - { - 'v': 13 - }, - { - 'v': 1, - 'f': '1 unit (Out of stock this month)' - }, - { - 'v': 12 - }, - { - 'v': 2 - } - ] - }, - { - 'c': [ - { - 'v': 'March' - }, - { - 'v': 24 - }, - { - 'v': 5 - }, - { - 'v': 11 - }, - { - 'v': 6 - } - ] - } - ] - }, - 'options': { - 'title': 'Sales per month', - 'isStacked': 'true', - 'fill': 20, - 'displayExactValues': true, - 'vAxis': { - 'title': 'Sales unit', - 'gridlines': { - 'count': 10 - } - }, - 'hAxis': { - 'title': 'Date' - } - }, - 'formatters': {} -}; - }); diff --git a/app/scripts/controllers/controllers.js b/app/scripts/controllers/controllers.js deleted file mode 100644 index 9ded90f..0000000 --- a/app/scripts/controllers/controllers.js +++ /dev/null @@ -1,181 +0,0 @@ -var chartControllers = angular.module('chartControllers', ['googlechart', 'nvd3', 'highcharts-ng']); - - -chartControllers.controller('chartCtrl', ['$scope', '$location', 'Datax', - function($scope, $location, Datax) { - - - - - //csv file data is load for all charts libraries - $scope.loadData = function(fileName) { - //console.log("loading data "+fileName); - data = getData(fileName); - console.log(data); - $scope.setActive('b1',fileName); - //$scope.Datax = Datax; - console.log(Datax) - loadYAxisLabel(fileName); - $scope.a = true; - drawChart(); - }; - - //default one - var myChart = {}; - - $scope.loadChartLibrary = function(libraryIndex) { - myChart = libraryName[libraryIndex]; - switchChartLib(myChart.library); - $scope.setActive('b2',myChart.library); - $scope.b = true; - drawChart(); - - }; - - - //getDataing highchart sample - $scope.chartConfig = highchart.chartConfig; - - //getting nvd3 chart sample - $scope.options = ncd3Chart1.options; - $scope.data = ncd3Chart1.data; - - //getting google chart sample - $scope.chart = googleChart; - - //Switch all chart libaraies chart types at one - $scope.switchChartType = function(gchartType, hchartType, dchartType) { - $scope.chart.type = gchartType; - $scope.chartConfig.options.chart.type = hchartType; - $scope.options.chart.type = dchartType; - $scope.setActive('b3',hchartType); - //nvd3 - loadYAxisLabel($scope.fileName); - var nvdLabels = nvd3AxisLabels; - $scope.options.chart.xAxis = { - 'axisLabel': 'Make', - 'tickFormat': function(d) { - return nvdLabels[d] - } - }; - - }; - - //deafult button picker - $scope.active={'b1':false,'b2':false,'b3':'bar'}; - - $scope.setActive = function(set,type) { - $scope.active[set] = type; - }; - - $scope.isBActive = function(set,type) { - return $scope.active[set] === type; - }; - - function switchChartLib (chartLib) { - console.log('switchChartLib to '+chartLib); - $scope.highxChart = false; - $scope.googlexChart = false; - $scope.NVD3Chart = false; - $scope[chartLib] = true; - }; - - function drawChart() { - console.log('draw the chart '+myChart.library); - if(myChart.model != null) { - renderChart(myChart.model, data); - //nvd3 axis update - $scope.options.chart.xAxis = { - 'tickFormat': function(d) { - return nvd3AxisLabels[d] - } - }; - } - - }; - var nvd3AxisLabels = {}; - - - //nvd3 chartting - function loadYAxisLabel(fileName) { - nvd3AxisLabels = getData(fileName).row(nvd3YaxisModel).get(getNVD3Yaxis); - }; - - //NVD3 Chart - - function getData(fileName) { - return d3.csv("data/" + fileName + ".csv") - }; - - function getNVD3(error, rows) { - $scope.data[0].values = rows; - }; - - function nvd3Model(d) { - return { - label: d.Make, - value: +d.Length, - valuex: +d.No - } - }; - - function getNVD3Yaxis(error, rows) { - nvd3AxisLabels = rows; - }; - - function nvd3YaxisModel(d) { - return d.Make; - }; - - var NVD3Chart = { - model: nvd3Model, - get: getNVD3 - }; - - //google chart - function googleChartModel(d) { - return { - c: [{ - v: d.Make - }, { - v: +d.Length - }] - } - }; - - function getGoogleChart(error, rows) { - $scope.chart.data.rows = rows; - }; - - var googlexChart = { - model: googleChartModel, - get: getGoogleChart - }; - - //high chart - function highChartModel(d) { - return +d.Length; - }; - - - function getHighChart(error, rows) { - $scope.chartConfig.series[0].data = rows; - }; - var highxChart = { - model: highChartModel, - get: getHighChart - }; - //var chartPipe = getData(fileName).row(nvd3Model).get(getNVD3); - - - - - function renderChart(chart, data) { - console.log('drawing....') - data.row(chart.model).get(chart.get) - }; - - libraryName = [ { 'library': 'NVD3Chart', 'model':NVD3Chart}, { 'library':'highxChart', 'model':highxChart}, { 'library': 'googlexChart','model':googlexChart}]; - chartTypes = ["Line","Bar"]; - } -]); \ No newline at end of file diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js deleted file mode 100755 index 48887bf..0000000 --- a/app/scripts/controllers/main.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; - -/** - * @ngdoc function - * @name apacheZeppelinGsocApp.controller:MainCtrl - * @description - * # MainCtrl - * Controller of the apacheZeppelinGsocApp - */ -angular.module('apacheZeppelinGsocApp') - .controller('MainCtrl', function ($scope) { - $scope.awesomeThings = [ - 'HTML5 Boilerplate', - 'AngularJS', - 'Karma' - ]; - }); diff --git a/app/scripts/controllers/sample-charts.js b/app/scripts/controllers/sample-charts.js deleted file mode 100644 index 3e9cbbe..0000000 --- a/app/scripts/controllers/sample-charts.js +++ /dev/null @@ -1,141 +0,0 @@ -'use strict'; - -/** - * @ngdoc function - * @name apacheZeppelinGsocApp.controller:sample chart - * @description - * This contains the sample chats for google charts, nvd3 and high charts - * Just for new comers to get chart models in apacheZeppelinGsocApp - */ - -//google chart -var googleChart = {}; -googleChart.type = 'BarChart'; -googleChart.cssStyle = 'height:400px; width:600px;'; -googleChart.data = { - 'cols': [{ - id: 'pizza', - label: 'Pizza', - type: 'string' -}, { - id: 'populartiy', - label: 'Populartiy', - type: 'number' -} - - ], - 'rows': [{ -c: [{ - v: 'Pepperoni' -}, { - v: 14 -}] - }, { -c: [{ - v: 'Mushroom' -}, { - v: 6 -}] - }, { -c: [{ - v: 'Hawaiian' -}, { - v: 5 -}] - }, { -c: [{ - v: 'Sausage' -}, { - v: 10 -}] - }] -}; - -googleChart.options = { - 'isStacked': 'true', - 'fill': 20, - 'height': 300, - 'displayExactValues': true, - 'vAxis': { - 'gridlines': { - 'count': 6 -} - }, - 'hAxis': { - 'title': 'hAxis title' - } -}; - -googleChart.formatters = {}; - -//nvd3 chart -var ncd3Chart1 = {}; -ncd3Chart1.options = { - chart: { -type: 'discreteBarChart', -height: 300, -width: 400, -margin: { - top: 20, - right: 20, - bottom: 60, - left: 55 -}, -x: function(d) { - return d.valuex; -}, -y: function(d) { - return d.value; -}, -showValues: true, -transitionDuration: 500, -xAxis: { - axisLabel: 'X Axis' -}, -yAxis: { - axisLabel: 'Y Axis', - axisLabelDistance: 10 -} - } -}; -ncd3Chart1.data = [{ - - values: [{ -'label': 'A', -'value': 5, -'valuex': 0 - }, { -'label': 'B', -'value': 10, -'valuex': 1 - }, { -'label': 'C', -'value': 24, -'valuex': 2 - }, { -'label': 'D', -'value': 8, -'valuex': 3 - }] -}]; - -//highchart -var highchart = {}; -highchart.chartConfig = { - options: { -chart: { - type: 'bar' -} - }, - xAxis: { -categories: ['A', 'B', 'C', 'D'] - }, - series: [{ -data: [10, 15, 12, 8] - }], - size: { -width: 500, -height: 300 - }, - loading: false -}; \ No newline at end of file diff --git a/app/scripts/services/chart-meta-service.js b/app/scripts/services/chart-meta-service.js index d05f77f..1140d03 100644 --- a/app/scripts/services/chart-meta-service.js +++ b/app/scripts/services/chart-meta-service.js @@ -17,7 +17,7 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { ChartType:null, ChartDataSetName:null } - + //getters this.getChartLib = function() { return MetaModel.ChartLib ; @@ -48,5 +48,5 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { this.isMetaCompleted = function() { return MetaModel.ChartType !== null ; }; - + }); \ No newline at end of file diff --git a/app/views/milestone01.html b/app/views/milestone01.html index 9b6cffc..5839bee 100644 --- a/app/views/milestone01.html +++ b/app/views/milestone01.html @@ -1,52 +1,50 @@
- - -

MileStone - 01

+

MileStone - 01

+
+
- - -
- -
- Car - Bike -
+ +
+ Car + Bike +

-
- -
- HighChart - GooglrChart - NVD3 Chart -
+ +
+ HighChart + GooglrChart + NVD3 Chart +
-
- -
- Line Chart - Bar Chart -
+ +
+ Line Chart + Bar Chart +
-
- - + +
-
- -
-
- + +
- - + +
- -
\ No newline at end of file +
\ No newline at end of file diff --git a/test/spec/controllers/chart-controllers.js b/test/spec/controllers/chart-controllers.js index 1643202..1e9b2b1 100644 --- a/test/spec/controllers/chart-controllers.js +++ b/test/spec/controllers/chart-controllers.js @@ -12,8 +12,7 @@ describe('Controller: ChartCtrl', function() { // load the controller's module beforeEach(module('apacheZeppelinGsocApp')); - var ChartCtrl, - scope; + var ChartCtrl, scope; // Initialize the controller and a mock scope beforeEach(inject(function($controller, $rootScope) { @@ -31,28 +30,21 @@ describe('Controller: ChartCtrl', function() { expect(ChartCtrl.vm).toBeUndefined(); }); -/* -//ChartCtrl scope is not solve for test it('Chart Controller Option should to be defined', function() { expect(ChartCtrl.loadData).toBeDefined(); expect(ChartCtrl.loadChartLibrary).toBeDefined(); }); - it('Chart Controller Button functions should to be defined', function() { expect(ChartCtrl.isButtonActive).toBeDefined(); expect(ChartCtrl.isButtonSelected).toBeDefined(); }); - - it('Button Group function testing', function() { expect(ChartCtrl.isButtonActive instanceof Function).toBe(true); - expect(ChartCtrl.isButtonSelected instanceof Function).toBe(true); - expect(ChartCtrl.isActive('dataButton')).toBe(false); - ChartCtrl.isButtonActive('dataButton','car'); - expect(ChartCtrl.isActive('dataButton')).toBe(true); - }); -*/ + expect(ChartCtrl.isButtonSelected instanceof Function).toBe(true); + expect(ChartCtrl.isButtonActive('dataButton','car')).toBe(false); + }); + }); diff --git a/test/spec/controllers/nav-controller.js b/test/spec/controllers/nav-controller.js index 169d93c..48fafe3 100644 --- a/test/spec/controllers/nav-controller.js +++ b/test/spec/controllers/nav-controller.js @@ -5,8 +5,7 @@ describe('Controller: NavCtrl', function() { // load the controller's module beforeEach(module('apacheZeppelinGsocApp')); - var NavCtrl, - scope; + var NavCtrl, scope; // Initialize the controller and a mock scope beforeEach(inject(function($controller, $rootScope) { @@ -30,4 +29,5 @@ describe('Controller: NavCtrl', function() { expect(NavCtrl.isActive('home')).toBe(false); expect(NavCtrl.isActive('')).toBe(true); }); + }); From 6a3d17c02b5ad7472ad7a0ad7b1bbddbea820d48 Mon Sep 17 00:00:00 2001 From: madhuka Date: Sat, 20 Jun 2015 23:34:28 +0530 Subject: [PATCH 02/16] Adding ng repeat --- app/scripts/controllers/chart-controllers.js | 9 ++++++-- app/views/milestone01.html | 24 ++++++++------------ 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js index 56fa0eb..853751a 100644 --- a/app/scripts/controllers/chart-controllers.js +++ b/app/scripts/controllers/chart-controllers.js @@ -23,7 +23,9 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, 'library': 'googleChart' }]; - //var chartTypes = ['Line', 'Bar']; + var files = ['car','bike']; + + var chartTypes = ['Line', 'Bar']; function renderChart(chart, datax) { datax.row(chart.model).get(chart.get); @@ -109,5 +111,8 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, vm.isButtonSelected = isButtonSelected; vm.loadChartLibrary = loadChartLibrary; vm.loadChartType = loadChartType; + vm.files = files; + vm.libraryName = libraryName; + vm.chartTypes = chartTypes; -}); \ No newline at end of file +} \ No newline at end of file diff --git a/app/views/milestone01.html b/app/views/milestone01.html index 5839bee..bda798a 100644 --- a/app/views/milestone01.html +++ b/app/views/milestone01.html @@ -5,22 +5,18 @@

MileStone - 01

- Car - Bike + {{file}}

- HighChart - GooglrChart - NVD3 Chart + {{libName.library}}
@@ -28,10 +24,10 @@

MileStone - 01

- Line Chart - Bar Chart + + {{chartTypeName}} Chart
From 916745362c329866499869707c78e928fa497a5b Mon Sep 17 00:00:00 2001 From: madhuka Date: Sun, 21 Jun 2015 20:33:32 +0530 Subject: [PATCH 03/16] fixing chart size, fixing GCctrl indentation, updating readme --- README.md | 13 +- .../chart-factory/google-chart-factory.js | 135 ++++++++---------- .../chart-factory/nvd3-chart-factory.js | 4 +- 3 files changed, 75 insertions(+), 77 deletions(-) diff --git a/README.md b/README.md index 7015b1d..ec31d35 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,14 @@ -# gotest +# Apache Zeppelin +Zeppelin is a collaborative data analytic and visualization tool for distributed, general-purpose data processing systems such as Apache Spark and Apache Flink. It has two main features, the data analytic phase and the data visualization phase. This project is an improvement or a re-design of the Data Visualization Component. It successfully eliminates all the limitations and drawbacks of the existing charting visualization component. + +##Prerequest +1. NodeJS with npm +2. Bower + +You can used + * bower install + * npm install -This project is generated with [yo angular generator](https://github.com/yeoman/generator-angular) -version 0.11.1. ## Build & development diff --git a/app/scripts/chart-factory/google-chart-factory.js b/app/scripts/chart-factory/google-chart-factory.js index 280533c..5c6f8dc 100644 --- a/app/scripts/chart-factory/google-chart-factory.js +++ b/app/scripts/chart-factory/google-chart-factory.js @@ -1,5 +1,4 @@ 'use strict'; - /** * @ngdoc function * @name apacheZeppelinGsocApp.GoogleChartFactory @@ -7,70 +6,70 @@ * # Extending Gobal Chart Factory for Google Chart Model * */ - -angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function(ChartFactory) { - - - var ChartList = {'Bar':'BarChart','Line':'LineChart'}; +angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function( + ChartFactory) { + var ChartList = { + 'Bar': 'BarChart', + 'Line': 'LineChart' + }; //googleChart model (sample chart data model) //TO-DO Sample Data will remove after model set. var GoogelChartChartModel = { type: 'BarChart', - cssStyle : 'height:400px; width:600px;', - data : { - 'cols': [{ - id: 'pizza', - label: 'Pizza', - type: 'string' -}, { - id: 'populartiy', - label: 'Populartiy', - type: 'number' -} - - ], - 'rows': [{ -c: [{ - v: 'Pepperoni' -}, { - v: 14 -}] - }, { -c: [{ - v: 'Mushroom' -}, { - v: 6 -}] - }, { -c: [{ - v: 'Hawaiian' -}, { - v: 5 -}] - }, { -c: [{ - v: 'Sausage' -}, { - v: 10 -}] - }] -}, - options : { - 'isStacked': 'true', - 'fill': 20, - 'height': 300, - 'displayExactValues': true, - 'vAxis': { - 'gridlines': { - 'count': 6 -} + cssStyle: 'height:400px; width:500px;', + data: { + 'cols': [{ + id: 'pizza', + label: 'Pizza', + type: 'string' + }, { + id: 'populartiy', + label: 'Populartiy', + type: 'number' + } + ], + 'rows': [{ + c: [{ + v: 'Pepperoni' + }, { + v: 14 + }] + }, { + c: [{ + v: 'Mushroom' + }, { + v: 6 + }] + }, { + c: [{ + v: 'Hawaiian' + }, { + v: 5 + }] + }, { + c: [{ + v: 'Sausage' + }, { + v: 10 + }] + }] }, - 'hAxis': { + options: { + 'isStacked': 'true', + 'fill': 20, + 'height': 300, + 'displayExactValues': true, + 'vAxis': { + 'gridlines': { + 'count': 6 + } + }, + 'hAxis': { 'title': 'hAxis title' - } -}, -formatters : {} -}; + } + }, + formatters: {} + }; function googleChartModel(d) { return { @@ -85,30 +84,22 @@ formatters : {} function getGoogleChart(error, rows) { GoogelChartChartModel.data.rows = rows; } - var googlexChart = { model: googleChartModel, get: getGoogleChart }; - function setChatTypeView(chartType){ + function setChatTypeView(chartType) { GoogleChartFactory.viewModel.type = ChartList[chartType]; } - //google chart var GoogleChartFactory = new ChartFactory('googleChart', googlexChart); GoogleChartFactory.viewModel = GoogelChartChartModel; - - GoogleChartFactory.setChartType = function(chartType) { - GoogleChartFactory.type = chartType; - setChatTypeView(chartType); - }; - + GoogleChartFactory.type = chartType; + setChatTypeView(chartType); + }; // define a new internal private method for this chart object - function setChartAxis() { - } - + function setChartAxis() {} return GoogleChartFactory; - }); \ No newline at end of file diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js index 1409185..0198ce7 100644 --- a/app/scripts/chart-factory/nvd3-chart-factory.js +++ b/app/scripts/chart-factory/nvd3-chart-factory.js @@ -16,8 +16,8 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha options: { chart: { type: 'discreteBarChart', - height: 300, - width: 400, + height: 400, + width: 500, margin: { top: 20, right: 20, From 304f90a566ed1721e6c0d586ba8c13d9221917d8 Mon Sep 17 00:00:00 2001 From: madhuka Date: Sun, 21 Jun 2015 21:06:26 +0530 Subject: [PATCH 04/16] removing unused files --- app/scripts/app.js | 10 +--------- app/views/chart.html | 2 -- app/views/main.html | 23 ----------------------- 3 files changed, 1 insertion(+), 34 deletions(-) delete mode 100644 app/views/chart.html delete mode 100755 app/views/main.html diff --git a/app/scripts/app.js b/app/scripts/app.js index 780ec2e..a0d343c 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -22,17 +22,9 @@ angular .when('/home', { templateUrl: 'views/about.html' }) - .when('/chart', { - templateUrl: 'views/chart.html', - controller: 'ChartCtrl' - }) .when('/milestone01', { templateUrl: 'views/milestone01.html', - controller: 'ChartCtrl' - }) - .when('/about', { - templateUrl: 'views/about.html', - controller: 'AboutCtrl' + controller:'ChartCtrl' }) .when('/contact', { templateUrl: 'views/contact.html' diff --git a/app/views/chart.html b/app/views/chart.html deleted file mode 100644 index b93ee19..0000000 --- a/app/views/chart.html +++ /dev/null @@ -1,2 +0,0 @@ -

....

-
diff --git a/app/views/main.html b/app/views/main.html deleted file mode 100755 index 787f33e..0000000 --- a/app/views/main.html +++ /dev/null @@ -1,23 +0,0 @@ -
-

'Allo, 'Allo!

-

- I'm Yeoman
- Always a pleasure scaffolding your apps. -

-

Splendid!

-
- -
-

HTML5 Boilerplate

-

- HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. -

- -

Angular

-

- AngularJS is a toolset for building the framework most suited to your application development. -

- -

Karma

-

Spectacular Test Runner for JavaScript.

-
From 0b9c77f9f364e948f3e8fb1c044a93c8c5f65d72 Mon Sep 17 00:00:00 2001 From: madhuka Date: Mon, 22 Jun 2015 21:53:27 +0530 Subject: [PATCH 05/16] adding chart templates for chart Factory --- app/index.html | 1 + app/scripts/controllers/chart-controllers.js | 21 +++++++++++++------- app/scripts/services/chart-meta-service.js | 11 +++++++++- app/views/charts/googlechart.html | 4 ++++ app/views/charts/highchart.html | 4 ++++ app/views/charts/nvd3chart.html | 4 ++++ app/views/milestone01.html | 15 +++----------- 7 files changed, 40 insertions(+), 20 deletions(-) create mode 100644 app/views/charts/googlechart.html create mode 100644 app/views/charts/highchart.html create mode 100644 app/views/charts/nvd3chart.html diff --git a/app/index.html b/app/index.html index fcc08cf..6697225 100644 --- a/app/index.html +++ b/app/index.html @@ -85,6 +85,7 @@ + diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js index 853751a..c020969 100644 --- a/app/scripts/controllers/chart-controllers.js +++ b/app/scripts/controllers/chart-controllers.js @@ -16,11 +16,14 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, var myChart = {}; var libraryName = [{ - 'library': 'NVD3Chart' + 'library': 'NVD3Chart', + 'template': 'views/charts/nvd3chart.html' }, { - 'library': 'highChart' + 'library': 'highChart', + 'template': 'views/charts/highchart.html' }, { - 'library': 'googleChart' + 'library': 'googleChart', + 'template': 'views/charts/googlechart.html' }]; var files = ['car','bike']; @@ -38,19 +41,23 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, data = getData(fileName); ChartMetaService.setChartDataSetName(fileName); drawChart(data); - } function loadChartLibrary(libraryIndex) { setButtonActive('chartLibraryButton', libraryName[libraryIndex].library); ChartMetaService.setChartLib(libraryName[libraryIndex].library); + ChartMetaService.setChartTemplateURL(libraryName[libraryIndex].template); drawChart(data); } + function getChartTemplateURL(libraryIndex) { + return ChartMetaService.getChartTemplateURL(); + } + function loadChartType(chartType) { ChartMetaService.setChartType(chartType); setButtonActive('chartTypeButton', chartType); - drawChart(data); + drawChart(data); //To-Do CHart model will be completing for rendering the chart } @@ -114,5 +121,5 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, vm.files = files; vm.libraryName = libraryName; vm.chartTypes = chartTypes; - -} \ No newline at end of file + vm.getChartTemplateURL = getChartTemplateURL; +}) \ No newline at end of file diff --git a/app/scripts/services/chart-meta-service.js b/app/scripts/services/chart-meta-service.js index 1140d03..3ac86a8 100644 --- a/app/scripts/services/chart-meta-service.js +++ b/app/scripts/services/chart-meta-service.js @@ -14,9 +14,10 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { /*Chart Meta Data Service*/ var MetaModel = { ChartLib:null, + ChartTemplateURL:null, ChartType:null, ChartDataSetName:null - } + }; //getters this.getChartLib = function() { @@ -27,6 +28,10 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { return MetaModel.ChartType ; }; + this.getChartTemplateURL = function() { + return MetaModel.ChartTemplateURL ; + }; + this.getChartDataSetName = function() { return MetaModel.ChartDataSetName ; }; @@ -40,6 +45,10 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { MetaModel.ChartType = ChartType ; }; + this.setChartTemplateURL = function(ChartTemplateURL) { + MetaModel.ChartTemplateURL = ChartTemplateURL; + }; + this.setChartDataSetName = function(ChartDataSetName) { MetaModel.ChartDataSetName = ChartDataSetName ; }; diff --git a/app/views/charts/googlechart.html b/app/views/charts/googlechart.html new file mode 100644 index 0000000..143dd55 --- /dev/null +++ b/app/views/charts/googlechart.html @@ -0,0 +1,4 @@ +
+ +
+
\ No newline at end of file diff --git a/app/views/charts/highchart.html b/app/views/charts/highchart.html new file mode 100644 index 0000000..f9a3342 --- /dev/null +++ b/app/views/charts/highchart.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/app/views/charts/nvd3chart.html b/app/views/charts/nvd3chart.html new file mode 100644 index 0000000..6760d18 --- /dev/null +++ b/app/views/charts/nvd3chart.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/app/views/milestone01.html b/app/views/milestone01.html index bda798a..7aaafb5 100644 --- a/app/views/milestone01.html +++ b/app/views/milestone01.html @@ -31,16 +31,7 @@

MileStone - 01

-
- - +
-
- -
-
- - -
-
\ No newline at end of file +
+
\ No newline at end of file From 4021e387a17ad310a58452321cf85fc39228c544 Mon Sep 17 00:00:00 2001 From: madhuka Date: Mon, 22 Jun 2015 22:22:45 +0530 Subject: [PATCH 06/16] updating readme --- README.md | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ec31d35..97236f5 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,28 @@ # Apache Zeppelin Zeppelin is a collaborative data analytic and visualization tool for distributed, general-purpose data processing systems such as Apache Spark and Apache Flink. It has two main features, the data analytic phase and the data visualization phase. This project is an improvement or a re-design of the Data Visualization Component. It successfully eliminates all the limitations and drawbacks of the existing charting visualization component. -##Prerequest +##Pre-request 1. NodeJS with npm 2. Bower You can used * bower install * npm install +This will Download all the dependencies including node js and npm +### Build the application -## Build & development +`./grunt build` -Run `grunt` for building and `grunt serve` for preview. +Run `grunt build` for building -## Testing +### Preview Web application + +`./grunt serve` + +This will launch a WebApplication on port **9000** and update on code changes. + +### Testing + +`./grunt test` -Running `grunt test` will run the unit tests with karma. From 59058d5a40d56d00e8b4cae8ab611d5031f7f000 Mon Sep 17 00:00:00 2001 From: madhuka Date: Mon, 22 Jun 2015 22:54:24 +0530 Subject: [PATCH 07/16] removing sample data --- .../chart-factory/google-chart-factory.js | 18 ------------------ .../chart-factory/nvd3-chart-factory.js | 16 ++-------------- app/scripts/controllers/chart-controllers.js | 14 +++++++++----- 3 files changed, 11 insertions(+), 37 deletions(-) diff --git a/app/scripts/chart-factory/google-chart-factory.js b/app/scripts/chart-factory/google-chart-factory.js index 5c6f8dc..4a54ce0 100644 --- a/app/scripts/chart-factory/google-chart-factory.js +++ b/app/scripts/chart-factory/google-chart-factory.js @@ -34,24 +34,6 @@ angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function( }, { v: 14 }] - }, { - c: [{ - v: 'Mushroom' - }, { - v: 6 - }] - }, { - c: [{ - v: 'Hawaiian' - }, { - v: 5 - }] - }, { - c: [{ - v: 'Sausage' - }, { - v: 10 - }] }] }, options: { diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js index 0198ce7..905d708 100644 --- a/app/scripts/chart-factory/nvd3-chart-factory.js +++ b/app/scripts/chart-factory/nvd3-chart-factory.js @@ -44,21 +44,9 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha data: [{ values: [{ - 'label': 'A', - 'value': 5, + 'label': '', + 'value': 1, 'valuex': 0 - }, { - 'label': 'B', - 'value': 10, - 'valuex': 1 - }, { - 'label': 'C', - 'value': 24, - 'valuex': 2 - }, { - 'label': 'D', - 'value': 8, - 'valuex': 3 }] }] }; diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js index c020969..428f48f 100644 --- a/app/scripts/controllers/chart-controllers.js +++ b/app/scripts/controllers/chart-controllers.js @@ -47,6 +47,10 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, setButtonActive('chartLibraryButton', libraryName[libraryIndex].library); ChartMetaService.setChartLib(libraryName[libraryIndex].library); ChartMetaService.setChartTemplateURL(libraryName[libraryIndex].template); + if(ChartMetaService.getChartType() === null){ + //setting default chart type + ChartMetaService.setChartType('Bar'); + } drawChart(data); } @@ -57,13 +61,12 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, function loadChartType(chartType) { ChartMetaService.setChartType(chartType); setButtonActive('chartTypeButton', chartType); - drawChart(data); + drawChart(data); //To-Do CHart model will be completing for rendering the chart } function drawChart(data) { //Checking chart requirement is completed - if (ChartMetaService.isMetaCompleted()) { var myNewChart = {}; var myChartType = ChartMetaService.getChartType(); console.log(myChartType); @@ -85,9 +88,10 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, vm.chart = myNewChart.viewModel; break; } - renderChart(myNewChart.model, data); + if (myNewChart.model){ + renderChart(myNewChart.model, data); + } //NVD3 axis update - } } function getData(fileName) { @@ -122,4 +126,4 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, vm.libraryName = libraryName; vm.chartTypes = chartTypes; vm.getChartTemplateURL = getChartTemplateURL; -}) \ No newline at end of file +}); \ No newline at end of file From 037d55854721ca905a35de23437d07f3da98449f Mon Sep 17 00:00:00 2001 From: madhuka Date: Tue, 23 Jun 2015 12:50:42 +0530 Subject: [PATCH 08/16] fixing dependencies --- bower.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/bower.json b/bower.json index 8767835..d00b505 100644 --- a/bower.json +++ b/bower.json @@ -2,13 +2,13 @@ "name": "apacheZeppelinGsoc", "version": "0.0.0", "dependencies": { - "angular": "^1.3.0", - "bootstrap": "^3.2.0", + "angular": "^1.4.1", + "bootstrap": "~3.2.0", "angular-resource": "^1.3.0", "angular-route": "^1.3.0", "angular-bootstrap": "~0.13.0", "angular-google-chart": "~0.0.11", - "d3": "~3.5.5", + "d3": "~3.3.13", "nvd3": "~1.1.15-beta", "highcharts-release": "~4.1.6", "highcharts-ng": "~0.0.8", From d964caa326ef007606166f9c2a11521c4381178f Mon Sep 17 00:00:00 2001 From: madhuka Date: Tue, 23 Jun 2015 14:28:28 +0530 Subject: [PATCH 09/16] Adding config file --- app/index.html | 2 ++ app/scripts/config/chart-config.js | 26 ++++++++++++++++++++ app/scripts/config/config.json | 10 ++++++++ app/scripts/controllers/chart-controllers.js | 23 +++++------------ 4 files changed, 44 insertions(+), 17 deletions(-) create mode 100644 app/scripts/config/chart-config.js create mode 100644 app/scripts/config/config.json diff --git a/app/index.html b/app/index.html index 6697225..c6b391b 100644 --- a/app/index.html +++ b/app/index.html @@ -83,8 +83,10 @@ + + diff --git a/app/scripts/config/chart-config.js b/app/scripts/config/chart-config.js new file mode 100644 index 0000000..74e012e --- /dev/null +++ b/app/scripts/config/chart-config.js @@ -0,0 +1,26 @@ +'use strict'; + +/** + * @ngdoc function + * @name apacheZeppelinGsocApp.configure + * @description + * # configures will contains the configuration details for charting library + * + * @author madhuka udantha + */ + +angular.module('apacheZeppelinGsocApp') + .constant('chartConfig', { + 'libraryName': [{ + 'library': 'NVD3Chart', + 'template': 'views/charts/nvd3chart.html' + }, { + 'library': 'highChart', + 'template': 'views/charts/highchart.html' + }, { + 'library': 'googleChart', + 'template': 'views/charts/googlechart.html' + }], + 'dataFiles': ['car', 'bike'], + 'chartTypes': ['Line', 'Bar'] + }); \ No newline at end of file diff --git a/app/scripts/config/config.json b/app/scripts/config/config.json new file mode 100644 index 0000000..b648446 --- /dev/null +++ b/app/scripts/config/config.json @@ -0,0 +1,10 @@ +[{ + 'library': 'NVD3Chart', + 'template': 'views/charts/nvd3chart.html' + }, { + 'library': 'highChart', + 'template': 'views/charts/highchart.html' + }, { + 'library': 'googleChart', + 'template': 'views/charts/googlechart.html' + }] \ No newline at end of file diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js index 428f48f..9d6bf16 100644 --- a/app/scripts/controllers/chart-controllers.js +++ b/app/scripts/controllers/chart-controllers.js @@ -10,25 +10,14 @@ * @author madhuka udantha */ -angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, ChartFactory, GoogleChartFactory, HighChartFactory, NVD3ChartFactory, ChartService, ChartMetaService) { +angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, ChartFactory, GoogleChartFactory, HighChartFactory, NVD3ChartFactory, ChartService, ChartMetaService, chartConfig) { - var vm = this; - var myChart = {}; + var vm = this,varmyChart = {}; - var libraryName = [{ - 'library': 'NVD3Chart', - 'template': 'views/charts/nvd3chart.html' - }, { - 'library': 'highChart', - 'template': 'views/charts/highchart.html' - }, { - 'library': 'googleChart', - 'template': 'views/charts/googlechart.html' - }]; - - var files = ['car','bike']; - - var chartTypes = ['Line', 'Bar']; + //loading from chart config file. + var libraryName = chartConfig.libraryName; + var files = chartConfig.dataFiles; + var chartTypes = chartConfig.chartTypes; function renderChart(chart, datax) { datax.row(chart.model).get(chart.get); From 47b67281d53fbd3bd572c111c2a440228c3c9faa Mon Sep 17 00:00:00 2001 From: madhuka Date: Tue, 23 Jun 2015 14:29:36 +0530 Subject: [PATCH 10/16] removing config json --- app/scripts/config/config.json | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 app/scripts/config/config.json diff --git a/app/scripts/config/config.json b/app/scripts/config/config.json deleted file mode 100644 index b648446..0000000 --- a/app/scripts/config/config.json +++ /dev/null @@ -1,10 +0,0 @@ -[{ - 'library': 'NVD3Chart', - 'template': 'views/charts/nvd3chart.html' - }, { - 'library': 'highChart', - 'template': 'views/charts/highchart.html' - }, { - 'library': 'googleChart', - 'template': 'views/charts/googlechart.html' - }] \ No newline at end of file From b8be3d2a804bd312785cabae4629e5967eecdfc0 Mon Sep 17 00:00:00 2001 From: madhuka Date: Tue, 23 Jun 2015 17:07:17 +0530 Subject: [PATCH 11/16] adding NVD3 axis --- .../chart-factory/nvd3-chart-factory.js | 29 +++++++++++++++++-- app/scripts/services/chart-meta-service.js | 12 ++++++-- app/scripts/services/chart-service.js | 3 +- 3 files changed, 37 insertions(+), 7 deletions(-) diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js index 905d708..1f537bb 100644 --- a/app/scripts/chart-factory/nvd3-chart-factory.js +++ b/app/scripts/chart-factory/nvd3-chart-factory.js @@ -16,7 +16,7 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha options: { chart: { type: 'discreteBarChart', - height: 400, + height: 300, width: 500, margin: { top: 20, @@ -42,7 +42,6 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha } }, data: [{ - values: [{ 'label': '', 'value': 1, @@ -80,11 +79,35 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha NVD3ChartFactory.setChartType = function(chartType) { NVD3ChartFactory.type = chartType; setChatTypeView(chartType); + + //loadYAxisLabel('car'); + }; + + NVD3ChartFactory.setChartAxis = function(data) { + loadYAxisLabel(data); }; // define a new internal private method for this chart object - function setChartAxis() {} + var nvd3AxisLabels = {}; + function getNVD3Yaxis(error, rows) { + console.log(rows); + nvd3AxisLabels = rows; + NVD3ChartFactory.viewModel.options.chart.xAxis = { + 'axisLabel': 'Make', + 'tickFormat': function(d) { + return nvd3AxisLabels[d]; + } + }; + } + + function nvd3YaxisModel(d) { + return d.Make; + } + + function loadYAxisLabel(fileName) { + nvd3AxisLabels = d3.csv(fileName).row(nvd3YaxisModel).get(getNVD3Yaxis); + } return NVD3ChartFactory; diff --git a/app/scripts/services/chart-meta-service.js b/app/scripts/services/chart-meta-service.js index 3ac86a8..5337c2b 100644 --- a/app/scripts/services/chart-meta-service.js +++ b/app/scripts/services/chart-meta-service.js @@ -16,7 +16,8 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { ChartLib:null, ChartTemplateURL:null, ChartType:null, - ChartDataSetName:null + ChartDataSetName:null, + ChartDataSetPath:null }; //getters @@ -36,6 +37,10 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { return MetaModel.ChartDataSetName ; }; + this.getChartDataSetPath = function() { + return MetaModel.ChartDataSetPath ; + }; + //setters this.setChartLib = function(ChartLib) { MetaModel.ChartLib = ChartLib ; @@ -51,10 +56,11 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { this.setChartDataSetName = function(ChartDataSetName) { MetaModel.ChartDataSetName = ChartDataSetName ; + MetaModel.ChartDataSetPath = 'data/' + ChartDataSetName + '.csv'; }; - //looking for UI model logic - this.isMetaCompleted = function() { + //looking for UI model logic + this.isMetaCompleted = function() { return MetaModel.ChartType !== null ; }; diff --git a/app/scripts/services/chart-service.js b/app/scripts/services/chart-service.js index bccd5ad..04a937d 100644 --- a/app/scripts/services/chart-service.js +++ b/app/scripts/services/chart-service.js @@ -9,7 +9,7 @@ */ -angular.module('apacheZeppelinGsocApp').service('ChartService', function(HighChartFactory, GoogleChartFactory, NVD3ChartFactory) { +angular.module('apacheZeppelinGsocApp').service('ChartService', function(HighChartFactory, GoogleChartFactory, NVD3ChartFactory,ChartMetaService) { /*using chart facotry*/ this.getHighChart = function(chartType) { @@ -27,6 +27,7 @@ angular.module('apacheZeppelinGsocApp').service('ChartService', function(HighCha this.getNVD3Chart = function(chartType) { var myChart = NVD3ChartFactory; myChart.setChartType(chartType); + myChart.setChartAxis(ChartMetaService.getChartDataSetPath()); return myChart; }; From e41d7cfe6420cd0d928b741d6d724892ef0122aa Mon Sep 17 00:00:00 2001 From: madhuka Date: Tue, 23 Jun 2015 22:48:50 +0530 Subject: [PATCH 12/16] fixing nvd3 legend and Xaxis of High --- .../chart-factory/high-chart-factory.js | 35 ++++++---- .../chart-factory/nvd3-chart-factory.js | 44 +++++-------- app/scripts/controllers/chart-controllers.js | 66 +++++++++---------- app/scripts/services/chart-service.js | 1 + app/styles/chart.css | 2 +- 5 files changed, 72 insertions(+), 76 deletions(-) diff --git a/app/scripts/chart-factory/high-chart-factory.js b/app/scripts/chart-factory/high-chart-factory.js index 79dcc7f..de64bd4 100644 --- a/app/scripts/chart-factory/high-chart-factory.js +++ b/app/scripts/chart-factory/high-chart-factory.js @@ -1,5 +1,4 @@ 'use strict'; - /** * @ngdoc function * @name apacheZeppelinGsocApp.HighChartFactory @@ -7,11 +6,12 @@ * # Extending Gobal Chart Factory for High Chart Model * */ - -angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(ChartFactory) { - - - var ChartList = {'Bar':'bar','Line':'line'}; +angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function( + ChartFactory) { + var ChartList = { + 'Bar': 'bar', + 'Line': 'line' + }; //highChart model var HighChartChartModel = { options: { @@ -31,14 +31,12 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(Cha }, loading: false }; - //high chart // define a new internal private method for this chart object function highChartModel(d) { return +d.Length; } - function getHighChart(error, rows) { HighChartChartModel.series[0].data = rows; } @@ -48,24 +46,35 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(Cha } function setChartAxis() {} - var highxChart = { model: highChartModel, get: getHighChart }; - //setting up the highchart and chart view model for this chart var HighChartFactory = new ChartFactory('highxChart', highxChart); HighChartFactory.viewModel = HighChartChartModel; - - HighChartFactory.setChartType = function(chartType) { HighChartFactory.type = chartType; setChatTypeView(chartType); }; + HighChartFactory.setChartAxis = function(data) { + loadYAxisLabel(data); + }; + var highAxisLabels = {}; + function getHighYaxis(error, rows) { + console.log(rows); + highAxisLabels = rows; + HighChartFactory.viewModel.xAxis.categories = highAxisLabels; + } + function highYaxisModel(d) { + return d.Make; + } + function loadYAxisLabel(fileName) { + console.log(fileName) + highAxisLabels = d3.csv(fileName).row(highYaxisModel).get(getHighYaxis); + } return HighChartFactory; - }); \ No newline at end of file diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js index 1f537bb..bcc5997 100644 --- a/app/scripts/chart-factory/nvd3-chart-factory.js +++ b/app/scripts/chart-factory/nvd3-chart-factory.js @@ -1,5 +1,4 @@ 'use strict'; - /** * @ngdoc function * @name apacheZeppelinGsocApp.NVD3ChartFactory @@ -7,10 +6,12 @@ * # Extending Gobal Chart Factory for NVD3 Chart Model * */ - -angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(ChartFactory) { - - var ChartList = {'Bar':'discreteBarChart','Line':'lineChart'}; +angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( + ChartFactory) { + var ChartList = { + 'Bar': 'discreteBarChart', + 'Line': 'lineChart' + }; ////TO-DO Sample Data will remove after model set. var NVD3ChartChartModel = { options: { @@ -18,12 +19,13 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha type: 'discreteBarChart', height: 300, width: 500, + showLegend: true, margin: { top: 20, right: 20, - bottom: 60, - left: 55 - }, + bottom: 20, + left: 20 + }, x: function(d) { return d.valuex; }, @@ -42,16 +44,16 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha } }, data: [{ - values: [{ - 'label': '', - 'value': 1, - 'valuex': 0 - }] + values: [] }] }; function getNVD3(error, rows) { - NVD3ChartChartModel.data[0].values = rows; + var data = [{ + 'values': rows + }]; + NVD3ChartChartModel.data = data; + console.log(NVD3ChartChartModel.data); } function nvd3Model(d) { @@ -65,35 +67,27 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha function setChatTypeView(chartType) { NVD3ChartFactory.viewModel.options.chart.type = ChartList[chartType]; } - var NVD3Chart = { model: nvd3Model, get: getNVD3 }; - //nvd3 chart var NVD3ChartFactory = new ChartFactory('NVD3Chart', NVD3Chart); NVD3ChartFactory.viewModel = NVD3ChartChartModel; - - NVD3ChartFactory.setChartType = function(chartType) { NVD3ChartFactory.type = chartType; setChatTypeView(chartType); - - //loadYAxisLabel('car'); }; - NVD3ChartFactory.setChartAxis = function(data) { loadYAxisLabel(data); }; - - // define a new internal private method for this chart object var nvd3AxisLabels = {}; + function getNVD3Yaxis(error, rows) { console.log(rows); nvd3AxisLabels = rows; - NVD3ChartFactory.viewModel.options.chart.xAxis = { + NVD3ChartFactory.viewModel.options.chart.xAxis = { 'axisLabel': 'Make', 'tickFormat': function(d) { return nvd3AxisLabels[d]; @@ -108,7 +102,5 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha function loadYAxisLabel(fileName) { nvd3AxisLabels = d3.csv(fileName).row(nvd3YaxisModel).get(getNVD3Yaxis); } - return NVD3ChartFactory; - }); \ No newline at end of file diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js index 9d6bf16..ecbfc60 100644 --- a/app/scripts/controllers/chart-controllers.js +++ b/app/scripts/controllers/chart-controllers.js @@ -1,5 +1,4 @@ 'use strict'; - /** * @ngdoc function * @name apacheZeppelinGsocApp.controller:ChartCtrl @@ -9,11 +8,11 @@ * * @author madhuka udantha */ - -angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, ChartFactory, GoogleChartFactory, HighChartFactory, NVD3ChartFactory, ChartService, ChartMetaService, chartConfig) { - - var vm = this,varmyChart = {}; - +angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, + ChartFactory, GoogleChartFactory, HighChartFactory, NVD3ChartFactory, + ChartService, ChartMetaService, chartConfig) { + var vm = this, + varmyChart = {}; //loading from chart config file. var libraryName = chartConfig.libraryName; var files = chartConfig.dataFiles; @@ -22,7 +21,6 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, function renderChart(chart, datax) { datax.row(chart.model).get(chart.get); } - var data = {}; function loadData(fileName) { @@ -36,7 +34,7 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, setButtonActive('chartLibraryButton', libraryName[libraryIndex].library); ChartMetaService.setChartLib(libraryName[libraryIndex].library); ChartMetaService.setChartTemplateURL(libraryName[libraryIndex].template); - if(ChartMetaService.getChartType() === null){ + if (ChartMetaService.getChartType() === null) { //setting default chart type ChartMetaService.setChartType('Bar'); } @@ -53,40 +51,37 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, drawChart(data); //To-Do CHart model will be completing for rendering the chart } - + //chart is generated from service, service is using HighChartfactory.HighCHart Factory is extended version of ChartFactory. function drawChart(data) { //Checking chart requirement is completed - var myNewChart = {}; - var myChartType = ChartMetaService.getChartType(); - console.log(myChartType); - switch (ChartMetaService.getChartLib()) { - case 'NVD3Chart': - //set data for NVD3 - vm.data = []; - //chart is generated from service, service is using HighChartfactory.HighCHart Factory is extended version of ChartFactory. - myNewChart = ChartService.getNVD3Chart(myChartType); - vm.data[0] = myNewChart.viewModel.data[0]; - 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; - } - if (myNewChart.model){ - renderChart(myNewChart.model, data); - } - //NVD3 axis update + 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; + } + if (myNewChart.model) { + renderChart(myNewChart.model, data); + } + //NVD3 axis update } function getData(fileName) { return d3.csv('data/' + fileName + '.csv'); } - //default button picker var active = { 'dataButton': false, @@ -105,7 +100,6 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, function isButtonSelected(set) { return active[set]; } - vm.loadData = loadData; vm.isButtonActive = isButtonActive; vm.isButtonSelected = isButtonSelected; diff --git a/app/scripts/services/chart-service.js b/app/scripts/services/chart-service.js index 04a937d..163c757 100644 --- a/app/scripts/services/chart-service.js +++ b/app/scripts/services/chart-service.js @@ -15,6 +15,7 @@ angular.module('apacheZeppelinGsocApp').service('ChartService', function(HighCha this.getHighChart = function(chartType) { var myChart = HighChartFactory; myChart.setChartType(chartType); + myChart.setChartAxis(ChartMetaService.getChartDataSetPath()); return myChart; }; diff --git a/app/styles/chart.css b/app/styles/chart.css index d01a46b..d01957f 100644 --- a/app/styles/chart.css +++ b/app/styles/chart.css @@ -1,5 +1,5 @@ /*nvd3 chart svg size fixing */ svg { width: 550px !important; - height: 300px !important; + height: 350px !important; } \ No newline at end of file From 85c9ea34de870b5bffb7f80f33c4503056eb5aff Mon Sep 17 00:00:00 2001 From: madhuka Date: Wed, 24 Jun 2015 10:09:39 +0530 Subject: [PATCH 13/16] fixing bug on NVD3 loading init --- app/scripts/chart-factory/nvd3-chart-factory.js | 13 ++++++------- app/scripts/config/chart-config.js | 6 +++--- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js index bcc5997..9c974c4 100644 --- a/app/scripts/chart-factory/nvd3-chart-factory.js +++ b/app/scripts/chart-factory/nvd3-chart-factory.js @@ -12,7 +12,7 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( 'Bar': 'discreteBarChart', 'Line': 'lineChart' }; - ////TO-DO Sample Data will remove after model set. + //NVD3 Chart model var NVD3ChartChartModel = { options: { chart: { @@ -43,16 +43,14 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( } } }, - data: [{ - values: [] - }] + data: [] }; function getNVD3(error, rows) { - var data = [{ + var data = { 'values': rows - }]; - NVD3ChartChartModel.data = data; + }; + NVD3ChartChartModel.data[0] = data; console.log(NVD3ChartChartModel.data); } @@ -67,6 +65,7 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( function setChatTypeView(chartType) { NVD3ChartFactory.viewModel.options.chart.type = ChartList[chartType]; } + var NVD3Chart = { model: nvd3Model, get: getNVD3 diff --git a/app/scripts/config/chart-config.js b/app/scripts/config/chart-config.js index 74e012e..99d92ca 100644 --- a/app/scripts/config/chart-config.js +++ b/app/scripts/config/chart-config.js @@ -12,11 +12,11 @@ angular.module('apacheZeppelinGsocApp') .constant('chartConfig', { 'libraryName': [{ - 'library': 'NVD3Chart', - 'template': 'views/charts/nvd3chart.html' - }, { 'library': 'highChart', 'template': 'views/charts/highchart.html' + }, { + 'library': 'NVD3Chart', + 'template': 'views/charts/nvd3chart.html' }, { 'library': 'googleChart', 'template': 'views/charts/googlechart.html' From 2446a1c29d785e5701931e84f2a9c16ab18659bb Mon Sep 17 00:00:00 2001 From: madhuka Date: Wed, 24 Jun 2015 11:14:28 +0530 Subject: [PATCH 14/16] fixing typo --- app/scripts/chart-factory/google-chart-factory.js | 4 ++-- app/scripts/chart-factory/high-chart-factory.js | 7 +++++-- app/scripts/chart-factory/nvd3-chart-factory.js | 4 ++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/scripts/chart-factory/google-chart-factory.js b/app/scripts/chart-factory/google-chart-factory.js index 4a54ce0..4b5f03b 100644 --- a/app/scripts/chart-factory/google-chart-factory.js +++ b/app/scripts/chart-factory/google-chart-factory.js @@ -71,7 +71,7 @@ angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function( get: getGoogleChart }; - function setChatTypeView(chartType) { + function setChartTypeView(chartType) { GoogleChartFactory.viewModel.type = ChartList[chartType]; } //google chart @@ -79,7 +79,7 @@ angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function( GoogleChartFactory.viewModel = GoogelChartChartModel; GoogleChartFactory.setChartType = function(chartType) { GoogleChartFactory.type = chartType; - setChatTypeView(chartType); + setChartTypeView(chartType); }; // define a new internal private method for this chart object function setChartAxis() {} diff --git a/app/scripts/chart-factory/high-chart-factory.js b/app/scripts/chart-factory/high-chart-factory.js index de64bd4..ca35a8b 100644 --- a/app/scripts/chart-factory/high-chart-factory.js +++ b/app/scripts/chart-factory/high-chart-factory.js @@ -38,10 +38,12 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function( } function getHighChart(error, rows) { + console.log('loading for view'); + console.log(rows); HighChartChartModel.series[0].data = rows; } - function setChatTypeView(chartType) { + function setChartTypeView(chartType) { HighChartFactory.viewModel.options.chart.type = ChartList[chartType]; } @@ -52,10 +54,11 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function( }; //setting up the highchart and chart view model for this chart var HighChartFactory = new ChartFactory('highxChart', highxChart); + HighChartChartModel.series[0].data = null; HighChartFactory.viewModel = HighChartChartModel; HighChartFactory.setChartType = function(chartType) { HighChartFactory.type = chartType; - setChatTypeView(chartType); + setChartTypeView(chartType); }; HighChartFactory.setChartAxis = function(data) { loadYAxisLabel(data); diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js index 9c974c4..a0c5a2f 100644 --- a/app/scripts/chart-factory/nvd3-chart-factory.js +++ b/app/scripts/chart-factory/nvd3-chart-factory.js @@ -62,7 +62,7 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( }; } - function setChatTypeView(chartType) { + function setChartTypeView(chartType) { NVD3ChartFactory.viewModel.options.chart.type = ChartList[chartType]; } @@ -75,7 +75,7 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( NVD3ChartFactory.viewModel = NVD3ChartChartModel; NVD3ChartFactory.setChartType = function(chartType) { NVD3ChartFactory.type = chartType; - setChatTypeView(chartType); + setChartTypeView(chartType); }; NVD3ChartFactory.setChartAxis = function(data) { loadYAxisLabel(data); From b2a5a3ed575d4030d33d31ee3964e40c298cbd28 Mon Sep 17 00:00:00 2001 From: madhuka Date: Wed, 24 Jun 2015 14:00:29 +0530 Subject: [PATCH 15/16] improving chart-meta-service.js --- app/scripts/services/chart-meta-service.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/app/scripts/services/chart-meta-service.js b/app/scripts/services/chart-meta-service.js index 5337c2b..ab9514f 100644 --- a/app/scripts/services/chart-meta-service.js +++ b/app/scripts/services/chart-meta-service.js @@ -17,7 +17,8 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { ChartTemplateURL:null, ChartType:null, ChartDataSetName:null, - ChartDataSetPath:null + ChartDataSetPath:null, + ChartData: null }; //getters @@ -37,10 +38,14 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { return MetaModel.ChartDataSetName ; }; - this.getChartDataSetPath = function() { + this.getChartDataSetPath = function() { return MetaModel.ChartDataSetPath ; }; + this.getChartData = function() { + return MetaModel.ChartData ; + }; + //setters this.setChartLib = function(ChartLib) { MetaModel.ChartLib = ChartLib ; @@ -57,6 +62,7 @@ angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { this.setChartDataSetName = function(ChartDataSetName) { MetaModel.ChartDataSetName = ChartDataSetName ; MetaModel.ChartDataSetPath = 'data/' + ChartDataSetName + '.csv'; + MetaModel.ChartData = d3.csv(MetaModel.ChartDataSetPath); }; //looking for UI model logic From 330580f2733b5f38ba3ccd33491f22f796cc62c4 Mon Sep 17 00:00:00 2001 From: madhuka Date: Wed, 24 Jun 2015 16:13:43 +0530 Subject: [PATCH 16/16] cleaning code --- app/scripts/app.js | 4 +- .../chart-factory/google-chart-factory.js | 17 ++++--- .../chart-factory/high-chart-factory.js | 1 - .../chart-factory/nvd3-chart-factory.js | 3 +- app/scripts/config/chart-config.js | 2 - app/scripts/controllers/chart-controllers.js | 5 +- app/scripts/services/chart-meta-service.js | 46 ++++++------------- test/spec/controllers/chart-controllers.js | 4 ++ 8 files changed, 32 insertions(+), 50 deletions(-) diff --git a/app/scripts/app.js b/app/scripts/app.js index a0d343c..2c1d9ea 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -13,7 +13,7 @@ angular .module('apacheZeppelinGsocApp', [ 'ngResource', 'ngRoute', - 'googlechart', + 'googlechart', 'highcharts-ng', 'nvd3' ]) @@ -26,7 +26,7 @@ angular templateUrl: 'views/milestone01.html', controller:'ChartCtrl' }) - .when('/contact', { + .when('/contact', { templateUrl: 'views/contact.html' }) .when('/', { diff --git a/app/scripts/chart-factory/google-chart-factory.js b/app/scripts/chart-factory/google-chart-factory.js index 4b5f03b..d3347a6 100644 --- a/app/scripts/chart-factory/google-chart-factory.js +++ b/app/scripts/chart-factory/google-chart-factory.js @@ -19,15 +19,14 @@ angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function( cssStyle: 'height:400px; width:500px;', data: { 'cols': [{ - id: 'pizza', - label: 'Pizza', - type: 'string' - }, { - id: 'populartiy', - label: 'Populartiy', - type: 'number' - } - ], + id: 'pizza', + label: 'Pizza', + type: 'string' + }, { + id: 'populartiy', + label: 'Populartiy', + type: 'number' + }], 'rows': [{ c: [{ v: 'Pepperoni' diff --git a/app/scripts/chart-factory/high-chart-factory.js b/app/scripts/chart-factory/high-chart-factory.js index ca35a8b..8d59daf 100644 --- a/app/scripts/chart-factory/high-chart-factory.js +++ b/app/scripts/chart-factory/high-chart-factory.js @@ -76,7 +76,6 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function( } function loadYAxisLabel(fileName) { - console.log(fileName) highAxisLabels = d3.csv(fileName).row(highYaxisModel).get(getHighYaxis); } return HighChartFactory; diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js index a0c5a2f..0454e92 100644 --- a/app/scripts/chart-factory/nvd3-chart-factory.js +++ b/app/scripts/chart-factory/nvd3-chart-factory.js @@ -25,7 +25,7 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( right: 20, bottom: 20, left: 20 - }, + }, x: function(d) { return d.valuex; }, @@ -65,7 +65,6 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function( function setChartTypeView(chartType) { NVD3ChartFactory.viewModel.options.chart.type = ChartList[chartType]; } - var NVD3Chart = { model: nvd3Model, get: getNVD3 diff --git a/app/scripts/config/chart-config.js b/app/scripts/config/chart-config.js index 99d92ca..22c5b5a 100644 --- a/app/scripts/config/chart-config.js +++ b/app/scripts/config/chart-config.js @@ -1,5 +1,4 @@ 'use strict'; - /** * @ngdoc function * @name apacheZeppelinGsocApp.configure @@ -8,7 +7,6 @@ * * @author madhuka udantha */ - angular.module('apacheZeppelinGsocApp') .constant('chartConfig', { 'libraryName': [{ diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js index ecbfc60..1a7d0a8 100644 --- a/app/scripts/controllers/chart-controllers.js +++ b/app/scripts/controllers/chart-controllers.js @@ -11,8 +11,7 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, ChartFactory, GoogleChartFactory, HighChartFactory, NVD3ChartFactory, ChartService, ChartMetaService, chartConfig) { - var vm = this, - varmyChart = {}; + var vm = this; //loading from chart config file. var libraryName = chartConfig.libraryName; var files = chartConfig.dataFiles; @@ -41,7 +40,7 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, drawChart(data); } - function getChartTemplateURL(libraryIndex) { + function getChartTemplateURL() { return ChartMetaService.getChartTemplateURL(); } diff --git a/app/scripts/services/chart-meta-service.js b/app/scripts/services/chart-meta-service.js index ab9514f..e839e09 100644 --- a/app/scripts/services/chart-meta-service.js +++ b/app/scripts/services/chart-meta-service.js @@ -1,5 +1,4 @@ 'use strict'; - /** * @ngdoc function * @name apacheZeppelinGsocApp.ChartMetaService @@ -7,67 +6,52 @@ * # ChartMetaService will be using Handle Basic Chart Meta Details. * */ - - angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() { - /*Chart Meta Data Service*/ var MetaModel = { - ChartLib:null, - ChartTemplateURL:null, - ChartType:null, - ChartDataSetName:null, - ChartDataSetPath:null, + ChartLib: null, + ChartTemplateURL: null, + ChartType: null, + ChartDataSetName: null, + ChartDataSetPath: null, ChartData: null }; - //getters this.getChartLib = function() { - return MetaModel.ChartLib ; + return MetaModel.ChartLib; }; - this.getChartType = function() { - return MetaModel.ChartType ; + return MetaModel.ChartType; }; - this.getChartTemplateURL = function() { - return MetaModel.ChartTemplateURL ; + return MetaModel.ChartTemplateURL; }; - this.getChartDataSetName = function() { - return MetaModel.ChartDataSetName ; + return MetaModel.ChartDataSetName; }; - this.getChartDataSetPath = function() { - return MetaModel.ChartDataSetPath ; + return MetaModel.ChartDataSetPath; }; - this.getChartData = function() { - return MetaModel.ChartData ; + return MetaModel.ChartData; }; - //setters this.setChartLib = function(ChartLib) { - MetaModel.ChartLib = ChartLib ; + MetaModel.ChartLib = ChartLib; }; - this.setChartType = function(ChartType) { - MetaModel.ChartType = ChartType ; + MetaModel.ChartType = ChartType; }; - this.setChartTemplateURL = function(ChartTemplateURL) { MetaModel.ChartTemplateURL = ChartTemplateURL; }; - this.setChartDataSetName = function(ChartDataSetName) { - MetaModel.ChartDataSetName = ChartDataSetName ; + MetaModel.ChartDataSetName = ChartDataSetName; MetaModel.ChartDataSetPath = 'data/' + ChartDataSetName + '.csv'; MetaModel.ChartData = d3.csv(MetaModel.ChartDataSetPath); }; - //looking for UI model logic this.isMetaCompleted = function() { - return MetaModel.ChartType !== null ; + return MetaModel.ChartType !== null; }; - }); \ No newline at end of file diff --git a/test/spec/controllers/chart-controllers.js b/test/spec/controllers/chart-controllers.js index 1e9b2b1..188a7a7 100644 --- a/test/spec/controllers/chart-controllers.js +++ b/test/spec/controllers/chart-controllers.js @@ -46,5 +46,9 @@ describe('Controller: ChartCtrl', function() { expect(ChartCtrl.isButtonActive('dataButton','car')).toBe(false); }); + it('Get ChartTemplate URL testing', function() { + expect(ChartCtrl.getChartTemplateURL).toBeDefined(); + expect(ChartCtrl.getChartTemplateURL instanceof Function).toBe(true); + }); });