Merge branch 'release/0.1.1'

GraFiddle · Jul 14, 2014 · 3367f9c · 3367f9c
2 parents fc39ddd + 76dfde3
commit 3367f9c
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 14 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -8,7 +8,7 @@ module.exports = function (grunt) {
   // default task
   grunt.registerTask('default', ['jshint', 'karma:unit']);
   grunt.registerTask('watch', ['karma:watch']);
-  grunt.registerTask('coverage', ['coveralls']);
+  grunt.registerTask('coverage', ['karma:coverage', 'coveralls']);
 
 
   // perform test in Firefox on travis ci
@@ -28,6 +28,10 @@ module.exports = function (grunt) {
         options: testConfig('test/karma.conf.js'),
         singleRun: false,
         autoWatch: true
+      },
+      coverage: {
+        options: testConfig('test/karma.conf.js'),
+        reporters: ['coverage']
       }
     },
 

diff --git a/README.md b/README.md
@@ -11,6 +11,8 @@ bower install angular-chart
 
 Add everything to your index.html:
 ```html
+<link rel="stylesheet" href="bower_components/c3/c3.css" />
+
 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/d3/d3.js"></script>
 <script src="bower_components/c3/c3.js"></script>

diff --git a/angular-chart.js b/angular-chart.js
@@ -3,7 +3,7 @@
 angular.module('angularChart', [])
   .directive('angularchart',
 
-    function () {
+    function ($compile) {
 
       var c3 = window.c3;
 
@@ -28,23 +28,41 @@ angular.module('angularChart', [])
               keys: {
                 value: []
               },
-              types: {}
+              types: {},
+              names: [],
+              selection: {
+                enabled: true,
+                multiple: false,
+              },
+              onselected: function (d, element) {
+                if (!scope.avoidSelections) {
+                  scope.addSelected(d);
+                }
+              },
+              onunselected: function (d, element) {
+                if (!scope.avoidSelections) {
+                  scope.removeSelected(d);
+                }
+              }
             },
-
             axis: {
               x: {
                 tick: {}
               }
+            },
+            legend: {
+              position: 'right'
             }
           };
 
-
           // add unique identifier for each chart
           //
           scope.addIdentifier = function () {
             scope.options.dataAttributeChartID = 'chartid' + Math.floor(Math.random() * 1000000001);
             angular.element(element).attr('id', scope.options.dataAttributeChartID);
             scope.configuration.bindto = '#' + scope.options.dataAttributeChartID;
+
+            angular.element(element).attr('style', 'display: block;');
           };
 
           // reload the charts data
@@ -66,16 +84,27 @@ angular.module('angularChart', [])
               scope.configuration.data.json = scope.dataset.records;
             }
 
+            // Chart type
+            // 
+            if(scope.options.type) {
+              scope.configuration.data.type = scope.options.type;
+            }
+
 
             // Add lines
             //
             if (!scope.options.rows) {
               console.error('The rows to display have to be defined.');
             } else {
+              scope.configuration.data.keys.value = [];
               scope.options.rows.forEach(function (element) {
                 // TODO exists check? ERROR
                 scope.configuration.data.keys.value.push(element.name);
 
+                // data label
+                scope.configuration.data.names[element.name] = element.label ? element.label : element.name;
+
+                // chart type
                 if (element.type) {
                   // TODO valid type ERROR
                   scope.configuration.data.types[element.name] = element.type;
@@ -88,6 +117,11 @@ angular.module('angularChart', [])
             if (!scope.options.xAxis || !scope.options.xAxis.name) {
               console.error('no xAxis provided');
             } else {
+              // key selection changed?
+              if (scope.configuration.data.keys.x !== null && scope.configuration.data.keys.x !== scope.options.xAxis.name) {
+                scope.options.selected = [];
+              }
+
               scope.configuration.data.keys.x = scope.options.xAxis.name;
               if (scope.options.xAxis.displayFormat) {
                 scope.configuration.axis.x.tick.format = scope.options.xAxis.displayFormat;
@@ -111,15 +145,104 @@ angular.module('angularChart', [])
             }
 
             scope.chart = c3.generate(scope.configuration);
+            scope.chooseXAxis();
           };
 
+          // Choose x-axis
+          scope.chooseXAxis = function () {
+            if (scope.options.type === 'pie' ||scope.options.type === 'donut' ) {
+              return;
+            }
+            var el = angular.element('<span/>');
+            el.append('<select ng-model="options.xAxis.name" style="margin-left: 42%"><option ng-repeat="col in dataset.schema" value="{{col.name}}" ng-selected="col.name==options.xAxis.name">{{col.label ? col.label : col.name}}</option></select>');
+            $compile(el)(scope);
+            element.append(el);
+
+            angular.element(element).attr('style', angular.element(element).attr('style') + ' padding-bottom: 30px');
+          };
+
+          // Selections
+          //
+          scope.avoidSelections = false;
+          scope.options.selected = scope.options.selected ? scope.options.selected : [];
+
+          // handle chart event onselection 
+          scope.addSelected = function (selection) {
+            scope.$apply(
+              scope.options.selected.push(selection)
+            );
+          };
+
+          // handle chart event onunselection
+          scope.removeSelected = function (selection) {
+            scope.$apply(
+              scope.options.selected = scope.options.selected.filter(function (selected) {
+                return selected.id !== selection.id || selected.index !== selection.index;
+              })
+            );
+          };
+
+          // select elements inside the chart
+          scope.performSelections = function (selections) {
+            scope.avoidSelections = true;
+            selections.forEach(function (selection) {
+              scope.chart.select([selection.id], [selection.index]);
+            });
+            scope.avoidSelections = false;
+          };
+
+          // unselect elements inside the chart
+          scope.performUnselections = function (selections) {
+            scope.avoidSelections = true;
+            selections.forEach(function (selection) {
+              scope.chart.unselect([selection.id], [selection.index]);
+            });
+            scope.avoidSelections = false;
+          };
+
+
           // watcher of changes in options
           //
           scope.startOptionsWatcher = function () {
+
             scope.$watch('options', function (newValue, oldValue) {
               if (newValue === oldValue) { // skip the first run of $watch
                 return;
               }
+
+              oldValue.selected = oldValue.selected ? oldValue.selected : [];
+              newValue.selected = newValue.selected ? newValue.selected : [];
+
+              // newSelections
+              var newSelections = newValue.selected.filter(function (elm) {
+                var isNew = true;
+                oldValue.selected.forEach(function (old) {
+                  if (old.id === elm.id && old.index === elm.index) {
+                    isNew = false;
+                    return;
+                  }
+                });
+                return isNew;
+              });
+              if (newSelections.length > 0) {
+                return scope.performSelections(newSelections);
+              }
+
+              // removedSelections
+              var removedSelections = oldValue.selected.filter(function (elm) {
+                var isOld = true;
+                newValue.selected.forEach(function (old) {
+                  if (old.id === elm.id && old.index === elm.index) {
+                    isOld = false;
+                    return;
+                  }
+                });
+                return isOld;
+              });
+              if (removedSelections.length > 0) {
+                return scope.performUnselections(removedSelections);
+              }
+
               scope.updateChart();
             }, true); // checks for changes inside options
           };
@@ -146,9 +269,10 @@ angular.module('angularChart', [])
           // startup
           scope.addIdentifier();
           scope.updateChart();
+          scope.performSelections(scope.options.selected);
           scope.startOptionsWatcher();
           scope.startDatasetWatcher();
+
         }
       };
-    }
-);
+    });
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-chart",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "authors": [
     "maxklenk"
   ],

diff --git a/demo/app.js b/demo/app.js
@@ -4,7 +4,7 @@ var app = angular.module('demoApp', ['angularChart', 'json-tree']);
 
 app.controller('Controller', function ($scope) {
   $scope.dataset = window.dataset;
-  $scope.options = {
+  $scope.options1 = {
     rows: [{
       name: 'income',
       type: 'bar'
@@ -18,4 +18,18 @@ app.controller('Controller', function ($scope) {
     yAxis: {
     }
   };
+  $scope.options2 = {
+    rows: [{
+      name: 'income'
+    }, {
+      name: 'sales'
+    }],
+    type: 'pie',
+    xAxis: {
+      name: 'dayString',
+      // displayFormat: '%Y-%m-%d %H:%M:%S'
+    },
+    yAxis: {
+    }
+  };
 });
diff --git a/demo/index.html b/demo/index.html
@@ -23,13 +23,18 @@ <h1 style="margin-bottom: 20px">angular-chart Demo App</h1>
     <div ng-controller="Controller">
       <angularchart
         dataset="dataset"
-        options="options">
+        options="options1">
+      </angularchart>
+      <angularchart
+        dataset="dataset"
+        options="options2">
       </angularchart>
 
       <h2>dataset</h2>
       <json-tree json='dataset'></json-tree>
       <h2>options</h2>
-      <json-tree json='options'></json-tree>
+      <json-tree json='options1'></json-tree>
+      <json-tree json='options2'></json-tree>
     </div>
   </body>
 </html>  
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-chart",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "C3-based reusable chart directive",
   "main": "angular-chart.js",
   "scripts": {

diff --git a/test/angular-chart_spec.js b/test/angular-chart_spec.js
@@ -185,6 +185,25 @@ describe('angularChart', function () {
       //console.log(element);
     });
 
+    it('watch selections', function () {
+      var elementScope = scope.getElementScope(element);
+
+      // chart selection
+      elementScope.configuration.data.onselected({}, {});
+
+      // chart unselection
+      elementScope.configuration.data.onunselected({}, {});
+
+      // external selection
+      scope.options.selected.push({id: 'test', index: 3});
+      scope.$apply();
+      scope.options.selected.push({id: 'test', index: 4});
+      scope.$apply();
+
+      // external unselection
+      scope.options.selected = scope.options.selected.splice(0,1);
+      scope.$apply();
+    });
 
   });
 

diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -32,14 +32,13 @@ module.exports = function (config) {
     plugins: [
       'karma-chrome-launcher',
       'karma-firefox-launcher',
-      'karma-phantomjs-launcher',
       'karma-jasmine',
       'karma-coverage'
     ],
 
     // test results reporter to use
     // possible values: 'dots', 'progress', 'junit'
-    reporters: ['coverage'],
+    reporters: ['dots', 'coverage'],
 
     coverageReporter: {
       type: 'lcov', // lcov or lcovonly are required for generating lcov.info files