more name fixes, basic implementation of directive

cramatt · Dec 27, 2013 · f3c5f1a · f3c5f1a
1 parent a236978
commit f3c5f1a
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 19 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -7,7 +7,7 @@
   "curly": false,
   "eqeqeq": true,
   "immed": true,
-  "indent": 2,
+  "indent": false,
   "latedef": true,
   "newcap": true,
   "noarg": true,
@@ -20,6 +20,8 @@
   "trailing": true,
   "smarttabs": true,
   "predef": [
-    "angular"
+    "angular",
+    "_",
+    "dc"
   ]
 }
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -5,7 +5,7 @@ module.exports = function(grunt) {
 
     // Configurable paths
     var yoConfig = {
-        livereload: 35729,
+        // livereload: 35729,
         src: 'src',
         dist: 'dist'
     };
@@ -63,11 +63,12 @@ module.exports = function(grunt) {
                 ],
                 options: {
                     livereload: yoConfig.livereload
-                }
+                },
+                tasks: ['jshint:src', 'karma:unit']
             },
             test: {
                 files: '<%= jshint.test.src %>',
-                tasks: ['jshint:test', 'qunit']
+                tasks: ['jshint:test', 'karma:unit']
             }
         },
         connect: {

diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
-# angular-dcjs
+# angular-dc
 
 
 
 ## Getting Started
 
 Download the [production version][min] or the [development version][max].
 
-[min]: https://raw.github.com/TomNeyland/jquery-angular-dcjs/master/dist/angular-angular-dcjs.min.js
-[max]: https://raw.github.com/TomNeyland/jquery-angular-dcjs/master/dist/angular-angular-dcjs.js
+[min]: https://raw.github.com/TomNeyland/jquery-angular-dc/master/dist/angular-angular-dc.min.js
+[max]: https://raw.github.com/TomNeyland/jquery-angular-dc/master/dist/angular-angular-dc.js
 
 In your web page:
 
 ```html
 <script src="angular.js"></script>
-<script src="dist/angular-dcjs.min.js"></script>
+<script src="dist/angular-dc.min.js"></script>
 ```
 
 ## Documentation

diff --git a/bower.json b/bower.json
@@ -1,11 +1,16 @@
 {
-  "name": "angular-dcjs",
+  "name": "angular-dc",
   "version": "0.0.1",
   "dependencies": {},
   "devDependencies": {
     "angular": "latest",
     "angular-mocks": "latest",
     "jquery": "latest",
-    "lodash": "~2.4.1"
+    "lodash": "~2.4.1",
+    "dcjs": "master",
+    "crossfilter": "~1.3.0"
+  },
+  "resolutions": {
+    "crossfilter": "~1.3.0"
   }
 }
diff --git a/dist/angular-dcjs.js b/dist/angular-dcjs.js
@@ -0,0 +1,9 @@
+'use strict';
+angular.module('angulaDc', []).directive('dcChart', function () {
+  return {
+    restrict: 'EAC',
+    scope: {},
+    link: function (scope, iElement, iAttrs) {
+    }
+  };
+});
diff --git a/dist/angular-dcjs.min.js b/dist/angular-dcjs.min.js
@@ -1,7 +1,8 @@
 /**
- * angular-dcjs
+ * angular-dc
  * @version v0.0.1 - 2013-12-27
- * @link https://github.com/TomNeyland/angular-dcjs
+ * @link https://github.com/TomNeyland/angular-dc
  * @author Tom Neyland <>
  * @license Apache License, http://www.opensource.org/licenses/Apache
  */
+"use strict";angular.module("angulaDc",[]).directive("dcChart",function(){return{restrict:"EAC",scope:{},link:function(){}}});
diff --git a/karma.conf.js b/karma.conf.js
@@ -12,6 +12,11 @@ module.exports = function(config) {
             'bower_components/angular/angular.js',
             'bower_components/jquery/jquery.js',
             'bower_components/angular-mocks/angular-mocks.js',
+            'bower_components/lodash/dist/lodash.js',
+            'bower_components/crossfilter/crossfilter.js',
+            'bower_components/d3/d3.js',
+            'bower_components/dcjs/dc.js',
+            'bower_components/dcjs/dc.css',
             'src/*.js',
             'test/spec/*.js'
         ],

diff --git a/package.json b/package.json
@@ -1,20 +1,20 @@
 {
-  "name": "angular-dcjs",
+  "name": "angular-dc",
   "version": "0.0.1",
-  "description": "angular-dcjs",
+  "description": "angular-dc",
   "keywords": [
     "angular"
   ],
-  "homepage": "https://github.com/TomNeyland/angular-dcjs",
-  "bugs": "https://github.com/TomNeyland/angular-dcjs/issues",
+  "homepage": "https://github.com/TomNeyland/angular-dc",
+  "bugs": "https://github.com/TomNeyland/angular-dc/issues",
   "author": {
     "name": "Tom Neyland",
     "email": "",
     "url": "https://github.com/TomNeyland"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/TomNeyland/angular-dcjs.git"
+    "url": "https://github.com/TomNeyland/angular-dc.git"
   },
   "licenses": [
     {
@@ -44,6 +44,7 @@
     "karma-requirejs": "~0.1.0",
     "karma-coffee-preprocessor": "~0.1.0",
     "karma-phantomjs-launcher": "~0.1.0",
-    "karma": "~0.10.2"
+    "karma": "~0.10.2",
+    "grunt-contrib-qunit": "~0.3.0"
   }
 }
diff --git a/src/angular-dc.js b/src/angular-dc.js
@@ -0,0 +1,106 @@
+'use strict';
+
+angular.module('angulaDc', [])
+
+.directive('dcChart', function() {
+
+    var defaultOptions = {
+        width: 200,
+        height: 200
+    };
+
+    function setupChart(scope, iElement, iAttrs) {
+
+
+        var chartElement = iElement[0],
+            chartTypeName = iAttrs.dcChart || iAttrs.chartType,
+            chartGroupName = iAttrs.chartGroup || undefined;
+
+        var chartFactory = dc[chartTypeName];
+
+        var chart = chartFactory(chartElement, chartGroupName);
+
+        // all chart options are exposed via a function
+        var validOptions = _(chart).functions().value();
+        console.log(validOptions);
+
+        var objOptions = getOptionsFromObject(scope, validOptions);
+        var attrOptions = getOptionsFromAttrs(scope, iAttrs, validOptions);
+        var scopeOptions = getOptionsFromScope(scope, validOptions);
+
+        var options = _({})
+            .extend(defaultOptions,
+                objOptions,
+                attrOptions,
+                scopeOptions)
+            .value();
+
+        console.log(_.keys(options), options);
+        chart.options(options);
+
+        return chart;
+
+    }
+
+    function getOptionsFromObject(scope, validOptions) {
+        var config = scope.config();
+        if (!_.isObject(config)) {
+            config = {};
+        }
+        return config;
+    }
+
+    function getOptionsFromAttrs(scope, iAttrs, validOptions) {
+        return _(iAttrs.$attr)
+            .keys()
+            .intersection(validOptions)
+            .map(function(key) {
+                var value;
+                try {
+                    value = scope.$parent.$eval(iAttrs[key]);
+                } catch (e) {
+                    value = iAttrs[key];
+                }
+                return [key, value];
+            })
+            .zipObject()
+            .value();
+    }
+
+    function getOptionsFromScope(scope, validOptions) {
+        return _(scope).keys()
+            .intersection(validOptions)
+            .map(function(key) {
+                return [key, _.result(scope, key)]
+            })
+            .zipObject()
+            .value();
+    }
+
+    return {
+        restrict: 'EAC',
+        scope: {
+            group: '&',
+            dimension: '&',
+            width: '=',
+            height: '=',
+            config: '&',
+        },
+        template: '<svg></svg>',
+        link: function(scope, iElement, iAttrs) {
+
+            var chart = setupChart(scope, iElement, iAttrs);
+
+            scope.$watch('options', function(oldValue, newValue) {
+                if (oldValue === newValue) {
+                    return;
+                }
+                chart.options(newValue);
+            });
+
+            chart.render();
+
+        }
+    };
+
+});
diff --git a/test/spec/angular-dc.js b/test/spec/angular-dc.js
@@ -0,0 +1,51 @@
+'use strict';
+
+describe('Module: angulaDc', function () {
+  var scope, $sandbox, $compile, $timeout;
+
+  // load the controller's module
+  beforeEach(module('angulaDc'));
+
+  beforeEach(inject(function ($injector, $rootScope, _$compile_, _$timeout_) {
+    scope = $rootScope;
+    $compile = _$compile_;
+    $timeout = _$timeout_;
+
+    $sandbox = $('<div id="sandbox"></div>').appendTo($('body'));
+  }));
+
+  afterEach(function() {
+    $sandbox.remove();
+    scope.$destroy();
+  });
+
+  var cf = crossfilter();
+  var d = cf.dimension(function(){return "test"});
+  var g = d.group(function(){return "bar"});
+  var templates = {
+    'default': {
+      scope: {d:d, g:g},
+      element: '<div width="200" config="222" dc-chart="pieChart" dimension="d" group="g"></div>'
+    }
+  };
+
+  function compileDirective(template) {
+    template = template ? templates[template] : templates['default'];
+    angular.extend(scope, template.scope || templates['default'].scope);
+    var $element = $(template.element).appendTo($sandbox);
+    $element = $compile($element)(scope);
+    scope.$digest();
+    return $element;
+  }
+
+  it('chart elements should contain a single svg element', function () {
+    var elm = compileDirective();
+    expect(elm.children().length).toBe(1);
+  });
+
+  // it('chart elements should be 350px wide', function () {
+  //   var elm = compileDirective();
+  //   expect(elm[0].children()).toBe(350);
+  // });
+
+});