diff --git a/CHANGELOG.md b/CHANGELOG.md index 0aa4897..9adcdd8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Angular-Dimple Changelog +# v1.1.0 +* add functionality inside ng-repeat +* graphs update live when scope changes +* add ring charts + # v1.0.2 * add bower dependencies diff --git a/bower.json b/bower.json index 325c296..877adbe 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-dimple", - "version": "1.0.2", + "version": "1.1.0", "main": "dist/angular-dimple.js", "homepage": "http://esripdx.github.io/angular-dimple/", "authors": [ diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js index 6d242af..f4e6200 100644 --- a/dist/angular-dimple.js +++ b/dist/angular-dimple.js @@ -1,43 +1,19 @@ -/*! Angular-Dimple - 1.0.2 - 2014-05-30 +/*! Angular-Dimple - 1.0.2 - 2014-09-17 * https://github.com/esripdx/angular-dimple * Licensed ISC */ -angular.module('angular-dimple.core', []) - -.service('angular-dimple.core', [function(){ - return { - filter: function (chart, scopeData, field, value, filter) { - if (scopeData !== null) { - var data = this.filterData(scopeData, filter); - chart.data = data; - if (value !== undefined) { - chart.data = dimple.filterData(data, field, [value]); - } - } - }, - filterData: function (data, filter) { - if (filter) { - var filters = filter.split(':'); - return dimple.filterData(data, filters[0], [filters[1]]); - } else { - return data; - } - } - }; -}]); - - angular.module('angular-dimple', [ - 'angular-dimple.core', 'angular-dimple.graph', 'angular-dimple.legend', 'angular-dimple.x', 'angular-dimple.y', + 'angular-dimple.r', 'angular-dimple.line', 'angular-dimple.bar', 'angular-dimple.stacked-bar', 'angular-dimple.area', 'angular-dimple.stacked-area', - 'angular-dimple.scatter-plot' + 'angular-dimple.scatter-plot', + 'angular-dimple.ring' ]) .constant('MODULE_VERSION', '0.0.1') @@ -47,7 +23,7 @@ angular.module('angular-dimple', [ }); angular.module('angular-dimple.area', []) -.directive('area', ['angular-dimple.core', function (core) { +.directive('area', [function () { return { restrict: 'E', replace: true, @@ -68,15 +44,15 @@ angular.module('angular-dimple.area', []) var values = dimple.getUniqueValues($scope.data, $attrs.field); angular.forEach(values, function(value){ area = chart.addSeries([$attrs.field], dimple.plot.area); - core.filter(area, $scope.data, $attrs.field, value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = true; }); } graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -87,7 +63,7 @@ angular.module('angular-dimple.area', []) angular.module('angular-dimple.bar', []) -.directive('bar', ['angular-dimple.core', function (core) { +.directive('bar', [function () { return { restrict: 'E', replace: true, @@ -102,14 +78,14 @@ angular.module('angular-dimple.bar', []) function addBar () { var filteredData; bar = chart.addSeries([$attrs.field], dimple.plot.bar); - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -123,37 +99,52 @@ angular.module('angular-dimple.graph', []) restrict: 'E', replace: true, scope: { - data: '=' + data: '=', }, require: ['graph'], transclude: true, - compile: function($element, $attrs) { - var id = (Math.random() * 1e9).toString(36).replace(".", "_"); - $element.append('
'); - return { - post: function postLink(scope, element, attrs, controllers, transclude) { - var graphController = controllers[0]; - graphController._createChart(id); - scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - graphController.setData(); - } - }); - transclude(scope, function(clone){ - element.append(clone); - }); + link: function (scope, element, attrs, controllers, transclude) { + var graphController = controllers[0]; + graphController._createChart(); + scope.dataReady = false; + scope.filters = []; + + var chart = graphController.getChart(); + var transition; + if (attrs.transition) { + transition = attrs.transition; + } else { + transition = 750; + } + + scope.$watch('data', function(newValue, oldValue) { + if (newValue) { + scope.dataReady = true; + graphController.setData(); + chart.draw(transition); } - }; + }); + + transclude(scope, function(clone){ + element.append(clone); + }); }, controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { var chart; - var id; - this._createChart = function (domId) { - id = domId; - var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height); - chart = new dimple.chart(svg); + this._createChart = function () { + // create an svg element + var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute('width', $attrs.width); + svg.setAttribute('height', $attrs.height); + + // end the svg to this + $element.append(svg); + // create the dimple chart using the d3 selection of our element + chart = new dimple.chart(d3.select(svg)); + + // auto style var autoStyle = $attrs.autoStyle === 'false' ? true : false; chart.noFormats = autoStyle; }; @@ -174,6 +165,23 @@ angular.module('angular-dimple.graph', []) return id; }; + this.filter = function (attrs) { + if (attrs.value !== undefined) { + $scope.filters.push(attrs.value); + } + if ($scope.filters.length) { + chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); + } + + if (attrs.filter !== undefined) { + console.log("i see a filter"); + var thisFilter = attrs.filter.split(':'); + var field = thisFilter[0]; + var value = [thisFilter[1]]; + chart.data = dimple.filterData($scope.data, field, value); + } + }; + }] }; }]); @@ -199,8 +207,8 @@ angular.module('angular-dimple.legend', []) chart.addLegend(left, top, width, height, position); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLegend(); } }); @@ -209,7 +217,7 @@ angular.module('angular-dimple.legend', []) }]); angular.module('angular-dimple.line', []) -.directive('line', ['angular-dimple.core', function (core) { +.directive('line', [function () { return { restrict: 'E', replace: true, @@ -218,28 +226,108 @@ angular.module('angular-dimple.line', []) }], link: function($scope, $element, $attrs, $controllers) { var graphController = $controllers[1]; - var lineController = $controllers[0]; var chart = graphController.getChart(); + var drawn = false; function addLine () { var filteredData; line = chart.addSeries([$attrs.field], dimple.plot.line); - core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); line.lineMarkers = true; graphController.draw(); } + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { + addLine(); + } + }); + + } + }; +}]); +angular.module('angular-dimple.r', []) + +.directive('r', [function () { + return { + restrict: 'E', + replace: true, + require: ['r', '^graph'], + controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { + }], + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[1]; + var chart = graphController.getChart(); + + function addAxis () { + r = chart.addMeasureAxis('p', $attrs.field); + + if ($attrs.title && $attrs.title !== "null") { + r.title = $attrs.title; + } else if ($attrs.title == "null") { + r.title = null; + } + } + + $scope.$watch('data', function(newValue, oldValue) { + if (newValue) { + addAxis(); + } + }); + } + }; +}]); +angular.module('angular-dimple.ring', []) + +.directive('ring', [function () { + return { + restrict: 'E', + replace: true, + require: ['ring', '^graph'], + controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { + }], + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[1]; + var areaController = $controllers[0]; + var chart = graphController.getChart(); + + function setData (data, series) { + series.data = data; + } + + function addRing () { + var thickness; + ring = chart.addSeries([$attrs.field], dimple.plot.pie); + if ($attrs.thickness && !$attrs.diameter) { + thickness = (100 - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else if ($attrs.thickness && $attrs.diameter) { + thickness = ($attrs.diameter - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else { + ring.innerRadius = "50%"; + } + + if ($attrs.diameter) { + ring.outerRadius = ($attrs.diameter) + '%'; + } + graphController.filter($attrs); + graphController.draw(); + } + $scope.$watch('data', function(newValue, oldValue) { if (newValue) { - addLine(); + addRing(); } }); } }; }]); + + angular.module('angular-dimple.scatter-plot', []) -.directive('scatterPlot', ['angular-dimple.core', function (core) { +.directive('scatterPlot', [function () { return { restrict: 'E', replace: true, @@ -257,12 +345,12 @@ angular.module('angular-dimple.scatter-plot', []) if ($attrs.label || $attrs.label === '') { array.push($attrs.label); } scatterPlot = chart.addSeries(array, dimple.plot.bubble); scatterPlot.aggregate = dimple.aggregateMethod.avg; - core.filter(scatterPlot, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addScatterPlot(); } }); @@ -271,7 +359,7 @@ angular.module('angular-dimple.scatter-plot', []) }]); angular.module('angular-dimple.stacked-area', []) -.directive('stackedArea', ['angular-dimple.core', function (core) { +.directive('stackedArea', [function () { return { restrict: 'E', replace: true, @@ -289,13 +377,13 @@ angular.module('angular-dimple.stacked-area', []) } else { area = chart.addSeries([$attrs.field], dimple.plot.area); } - core.filter(area, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = false; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -304,7 +392,7 @@ angular.module('angular-dimple.stacked-area', []) }]); angular.module('angular-dimple.stacked-bar', []) -.directive('stackedBar', ['angular-dimple.core', function (core) { +.directive('stackedBar', [function () { return { restrict: 'E', replace: true, @@ -322,12 +410,12 @@ angular.module('angular-dimple.stacked-bar', []) } else { bar = chart.addSeries([$attrs.field], dimple.plot.bar); } - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -359,7 +447,6 @@ angular.module('angular-dimple.x', []) if ($attrs.orderBy) { x.addGroupOrderRule($attrs.orderBy); } - } else { if ($attrs.type == 'Measure') { x = chart.addMeasureAxis('x', $attrs.field); @@ -379,8 +466,9 @@ angular.module('angular-dimple.x', []) x.title = null; } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); @@ -432,8 +520,8 @@ angular.module('angular-dimple.y', []) } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js index 20639f1..0dfa461 100644 --- a/dist/angular-dimple.min.js +++ b/dist/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})},controller:["$scope","$element","$attrs",function(a,b,c){var d;this._createChart=function(){var a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("width",c.width),a.setAttribute("height",c.height),b.append(a),d=new dimple.chart(d3.select(a));var e="false"===c.autoStyle?!0:!1;d.noFormats=e},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return id},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file diff --git a/documentation/index.md b/documentation/index.md index 1e1cd7a..79c0d31 100644 --- a/documentation/index.md +++ b/documentation/index.md @@ -240,3 +240,34 @@ Scatter Plots also use the `series` attribute. Series defines the categorical da | series | Accepts a string 'field'. | | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | +--- + +## Ring +example + +The `ring` directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a `

` axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart. + +You can define both the thickness of the ring (as a percentage) and the diameter of the ring (as a percentage). + +```html + + + + + + + +> +``` + +#### Attributes + +| attribute | description | +| --------- | ----------- | +| field | **Required.** Field to plot as a ring. | +| thickness | Accepts a number. Width of ring, as percent of circle size. | +| diameter | Accepts a number. Size of ring, as percent of circle size. | + + + + diff --git a/documentation/layout.html b/documentation/layout.html index 0e24b2d..0f25937 100644 --- a/documentation/layout.html +++ b/documentation/layout.html @@ -107,6 +107,12 @@ Scatter Plot +
  • + + + Ring + +
    • diff --git a/documentation/partials/animation-test.md b/documentation/partials/animation-test.md new file mode 100644 index 0000000..ff28bd8 --- /dev/null +++ b/documentation/partials/animation-test.md @@ -0,0 +1,13 @@ + +
    + + + + + + +
    + + diff --git a/documentation/partials/area.md b/documentation/partials/area.md index 71fe7f0..5f39df8 100644 --- a/documentation/partials/area.md +++ b/documentation/partials/area.md @@ -6,7 +6,7 @@
    - + @@ -17,7 +17,7 @@ ```
    - + @@ -28,7 +28,7 @@
    - + @@ -41,7 +41,7 @@ ```
    - + diff --git a/documentation/partials/bar-graph.md b/documentation/partials/bar-graph.md index fcea323..81265ba 100644 --- a/documentation/partials/bar-graph.md +++ b/documentation/partials/bar-graph.md @@ -6,7 +6,7 @@
    - + @@ -15,7 +15,7 @@
    ```html - + diff --git a/documentation/partials/expanded-stacked-area.md b/documentation/partials/expanded-stacked-area.md index cb5588d..bf0b8b5 100644 --- a/documentation/partials/expanded-stacked-area.md +++ b/documentation/partials/expanded-stacked-area.md @@ -5,7 +5,7 @@ - + @@ -14,7 +14,7 @@ ```html - + diff --git a/documentation/partials/homepage-code.md b/documentation/partials/homepage-code.md index a780c61..9f927eb 100644 --- a/documentation/partials/homepage-code.md +++ b/documentation/partials/homepage-code.md @@ -1,7 +1,7 @@ Top Tabbed Code Sample: ```html - + diff --git a/documentation/partials/line-graph.md b/documentation/partials/line-graph.md index 19c5e17..ec3e847 100644 --- a/documentation/partials/line-graph.md +++ b/documentation/partials/line-graph.md @@ -7,7 +7,7 @@
    - + @@ -17,7 +17,7 @@ ```html - + @@ -46,4 +46,24 @@ +``` + +## Inside ng-repeat +
    + + + + + + +
    + +```html + + + + + + + ``` \ No newline at end of file diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md new file mode 100644 index 0000000..dd25b13 --- /dev/null +++ b/documentation/partials/ring.md @@ -0,0 +1,49 @@ +

    + Ring Chart + + Ring Chart Documentation + +

    + +
    + + + + + +
    + +```html + + + + + + +``` + +

    + Multi Ring Chart + + Ring Chart Documentation + +

    + +
    + + + + + + +
    + +```html + + + + + + + +``` \ No newline at end of file diff --git a/documentation/partials/scatter-plot.md b/documentation/partials/scatter-plot.md index 22fa7dc..fe7c699 100644 --- a/documentation/partials/scatter-plot.md +++ b/documentation/partials/scatter-plot.md @@ -6,7 +6,7 @@
    - + @@ -16,7 +16,7 @@ ```html - + diff --git a/documentation/partials/stacked-area.md b/documentation/partials/stacked-area.md index acbd97b..d1515cc 100644 --- a/documentation/partials/stacked-area.md +++ b/documentation/partials/stacked-area.md @@ -6,7 +6,7 @@
    - + @@ -53,7 +53,7 @@
    - + @@ -62,7 +62,7 @@
    ``` - + diff --git a/documentation/partials/stacked-bar-graph.md b/documentation/partials/stacked-bar-graph.md index 14afee9..68ead76 100644 --- a/documentation/partials/stacked-bar-graph.md +++ b/documentation/partials/stacked-bar-graph.md @@ -6,7 +6,7 @@
    - + @@ -16,7 +16,7 @@ ```html - + diff --git a/package.json b/package.json index 941bf4f..7680790 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-dimple", - "version": "1.0.2", + "version": "1.1.0", "description": "Angular.js wrapper for the Dimple charting language", "repository": "https://github.com/esripdx/angular-dimple", "license": "ISC", diff --git a/site/css/examples.css b/site/css/examples.css index d67204a..9d2a982 100644 --- a/site/css/examples.css +++ b/site/css/examples.css @@ -98,15 +98,13 @@ /* line 5, ../scss/examples.scss */ .white-panel { margin-bottom: 1rem; - background-color: white; - border: 1px solid #ecf0f3; - -webkit-box-sizing: border-box; + background-color: #FFFFFF; + border: 1px solid #ECF0F3; -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; box-sizing: border-box; - -webkit-border-radius: 3px; -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; + -webkit-border-radius: 3px; border-radius: 3px; } /* line 11, ../scss/examples.scss */ @@ -141,7 +139,7 @@ } @media screen and (max-width: 662px) { - /* line 43, ../scss/examples.scss */ + /* line 42, ../scss/examples.scss */ .example-link, .api-link { width: 100%; diff --git a/site/css/home.css b/site/css/home.css index 2a09726..0935b24 100644 --- a/site/css/home.css +++ b/site/css/home.css @@ -7,11 +7,11 @@ } /* line 9, ../scss/home.scss */ .homepage-navigation a { - color: #fafbfe; + color: #FAFBFE; } /* line 11, ../scss/home.scss */ .homepage-navigation a:hover { - color: white; + color: #FFFFFF; } /* line 17, ../scss/home.scss */ @@ -22,15 +22,15 @@ pre { /* line 22, ../scss/home.scss */ code { - background-color: white; - border-color: #ecf0f3; + background-color: #FFFFFF; + border-color: #ECF0F3; } /* line 27, ../scss/home.scss */ .banner { position: relative; overflow: hidden; - color: white; + color: #FFFFFF; background: url(../img/dots.svg) #245070; z-index: 20; } @@ -42,7 +42,7 @@ code { font-weight: 200; } /* line 39, ../scss/home.scss */ -.banner .dimple-graph { +.banner .banner-graphic { position: absolute; top: -260px; bottom: 0; @@ -79,5 +79,5 @@ code { /* line 71, ../scss/home.scss */ .charts-list a { - color: #76899b; + color: #76899B; } diff --git a/site/css/style.css b/site/css/style.css index 129c4a5..0ab0c0c 100644 --- a/site/css/style.css +++ b/site/css/style.css @@ -12,7 +12,7 @@ body { margin: 0; } -/* line 25, ../scss/base/_reset.scss */ +/* line 15, ../scss/base/_reset.scss */ article, aside, details, @@ -27,7 +27,7 @@ summary { display: block; } -/* line 31, ../scss/base/_reset.scss */ +/* line 29, ../scss/base/_reset.scss */ audio, canvas, video { @@ -50,7 +50,7 @@ svg:not(:root) { overflow: hidden; } -/* line 4, ../scss/base/_mixins.scss */ +/* line 3, ../scss/base/_mixins.scss */ .container:before, .row:before, .tab-group .tab-nav:before, .chart-icon:before, .container:after, .row:after, .tab-group .tab-nav:after, .chart-icon:after { content: " "; display: table; @@ -62,8 +62,8 @@ svg:not(:root) { /* line 52, ../scss/base/_mixins.scss */ .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .column-13, .column-14, .column-15, .column-16, .column-17, .column-18, .column-19, .column-20, .column-21, .column-22, .column-23, .column-24 { - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; box-sizing: border-box; float: left; padding: 0 0.5em; @@ -168,8 +168,8 @@ svg:not(:root) { } /* line 2, ../scss/base/_grid.scss */ .container { - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; max-width: 1280px; @@ -1420,7 +1420,7 @@ img { /* line 3, ../scss/base/_type.scss */ body { - color: #4c5156; + color: #4C5156; font-family: "Clear Sans", "Helvetica", "Arial", sans-serif; } @@ -1476,7 +1476,7 @@ blockquote { font-style: italic; font-weight: 400; font-size: 1.75rem; - color: #dde3e8; + color: #DDE3E8; } /* line 32, ../scss/base/_type.scss */ @@ -1504,16 +1504,16 @@ b, strong { /* line 50, ../scss/base/_type.scss */ small { font-size: .875rem; - color: #76899b; + color: #76899B; } /* line 55, ../scss/base/_type.scss */ a { - color: #1f85c4; + color: #1F85C4; text-decoration: none; - -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -o-transition: color 200ms linear; + -webkit-transition: color 200ms linear; transition: color 200ms linear; } /* line 59, ../scss/base/_type.scss */ @@ -1549,12 +1549,10 @@ code, kbd, pre, samp { /* line 90, ../scss/base/_type.scss */ code { - -webkit-border-radius: 2px; -moz-border-radius: 2px; - -ms-border-radius: 2px; - -o-border-radius: 2px; + -webkit-border-radius: 2px; border-radius: 2px; - background: #fafbfe; + background: #FAFBFE; padding: .2em; border: 1px solid #e5eafa; white-space: pre; @@ -1573,13 +1571,13 @@ pre { -ms-tab-size: 4; -o-tab-size: 4; tab-size: 4; - background: #fafbfe; - border: 1px solid #ecf0f3; + background: #FAFBFE; + border: 1px solid #ECF0F3; max-width: 100%; } /* line 109, ../scss/base/_type.scss */ pre code { - background-color: #fafbfe; + background-color: #FAFBFE; display: block; overflow: auto; word-wrap: normal; @@ -1591,7 +1589,7 @@ hr { display: none; margin-top: 2rem; border: none; - border-top: 2rem solid #1f85c4; + border-top: 2rem solid #1F85C4; } /* line 125, ../scss/base/_type.scss */ @@ -1612,7 +1610,7 @@ img::moz-selection { /* line 137, ../scss/base/_type.scss */ table { width: 100%; - background-color: white; + background-color: #FFFFFF; border-collapse: collapse; border-spacing: 0; border: 1px solid #e4e9ed; @@ -1640,11 +1638,11 @@ table tr:last-child { } /* line 159, ../scss/base/_type.scss */ table tr:nth-child(even) { - background-color: #fafbfe; + background-color: #FAFBFE; } /* line 161, ../scss/base/_type.scss */ table tr:nth-child(even) td { - background-color: #fafbfe; + background-color: #FAFBFE; } /* @@ -1668,7 +1666,7 @@ pre { pre code { background: #002b36; } -/* line 21, ../scss/base/_code.scss */ +/* line 15, ../scss/base/_code.scss */ pre .comment, pre .template_comment, pre .diff .header, @@ -1678,7 +1676,7 @@ pre .lisp .string, pre .javadoc { color: #586e75; } -/* line 33, ../scss/base/_code.scss */ +/* line 26, ../scss/base/_code.scss */ pre .keyword, pre .winutils, pre .method, @@ -1689,7 +1687,7 @@ pre .status, pre .nginx .title { color: #859900; } -/* line 47, ../scss/base/_code.scss */ +/* line 38, ../scss/base/_code.scss */ pre .number, pre .command, pre .string, @@ -1702,7 +1700,7 @@ pre .hexcolor, pre .link_url { color: #2aa198; } -/* line 60, ../scss/base/_code.scss */ +/* line 52, ../scss/base/_code.scss */ pre .title, pre .localvars, pre .chunk, @@ -1714,7 +1712,7 @@ pre .id, pre .css .function { color: #268bd2; } -/* line 73, ../scss/base/_code.scss */ +/* line 65, ../scss/base/_code.scss */ pre .attribute, pre .variable, pre .lisp .body, @@ -1726,7 +1724,7 @@ pre .haskell .type, pre .link_reference { color: #b58900; } -/* line 91, ../scss/base/_code.scss */ +/* line 78, ../scss/base/_code.scss */ pre .preprocessor, pre .preprocessor .keyword, pre .pragma, @@ -1743,7 +1741,7 @@ pre .css .pseudo, pre .header { color: #cb4b16; } -/* line 97, ../scss/base/_code.scss */ +/* line 96, ../scss/base/_code.scss */ pre .deletion, pre .important { color: #dc322f; @@ -1769,38 +1767,32 @@ pre .tex .formula { /* line 8, ../scss/base/_tabs.scss */ .tab-group .tab-nav .tab { float: left; - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0.5em 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - background-color: #fafbfe; - border: 1px solid #ecf0f3; + background-color: #FAFBFE; + border: 1px solid #ECF0F3; border-left: none; - -webkit-border-radius: 0; -moz-border-radius: 0; - -ms-border-radius: 0; - -o-border-radius: 0; + -webkit-border-radius: 0; border-radius: 0; background-image: none; } /* line 20, ../scss/base/_tabs.scss */ .tab-group .tab-nav .tab:first-child { - -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; - -ms-border-radius: 3px 0 0 0; - -o-border-radius: 3px 0 0 0; + -webkit-border-radius: 3px; border-radius: 3px 0 0 0; - border-left: 1px solid #ecf0f3; + border-left: 1px solid #ECF0F3; } /* line 24, ../scss/base/_tabs.scss */ .tab-group .tab-nav .tab:last-child { - -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; - -ms-border-radius: 0 3px 0 0; - -o-border-radius: 0 3px 0 0; + -webkit-border-radius: 0; border-radius: 0 3px 0 0; } /* line 27, ../scss/base/_tabs.scss */ @@ -1810,38 +1802,34 @@ pre .tex .formula { /* line 30, ../scss/base/_tabs.scss */ .tab-group .tab-nav .tab.active { border-bottom: 1px solid transparent; - background-color: white; + background-color: #FFFFFF; } /* line 33, ../scss/base/_tabs.scss */ .tab-group .tab-nav .tab.active:hover { - background-color: white; + background-color: #FFFFFF; } /* line 39, ../scss/base/_tabs.scss */ .tab-group .tab-contents { width: 100%; - border: 1px solid #ecf0f3; - -webkit-border-radius: 0 0 3px 3px; + border: 1px solid #ECF0F3; -moz-border-radius: 0 0 3px 3px; - -ms-border-radius: 0 0 3px 3px; - -o-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0; border-radius: 0 0 3px 3px; margin-top: -1px; - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; box-sizing: border-box; } /* line 45, ../scss/base/_tabs.scss */ .tab-group .tab-contents .tab-content { - background-color: white; + background-color: #FFFFFF; display: none; width: 100%; - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; box-sizing: border-box; - -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; - -ms-border-radius: 0 0 3px 3px; - -o-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0; border-radius: 0 0 3px 3px; padding: 1em; overflow: auto; @@ -1866,64 +1854,63 @@ pre .tex .formula { .btn { display: inline-block; padding: 1em; - background-color: #1f85c4; - color: #ecf0f3; + background-color: #1F85C4; + color: #ECF0F3; border: none; - -webkit-border-radius: 3px; -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; + -webkit-border-radius: 3px; border-radius: 3px; text-decoration: none; font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace; font-size: 0.75em; font-weight: 300; cursor: pointer; + -moz-user-select: -moz-none; + -ms-user-select: none; -webkit-user-select: none; - -moz-user-select: none; user-select: none; - -webkit-transition: background-color 75ms linear, color 75ms linear; -moz-transition: background-color 75ms linear, color 75ms linear; -o-transition: background-color 75ms linear, color 75ms linear; + -webkit-transition: background-color 75ms linear, color 75ms linear; transition: background-color 75ms linear, color 75ms linear; } /* line 16, ../scss/base/_buttons.scss */ .btn:hover, .btn:focus { background-color: #379fdf; - color: white; + color: #FFFFFF; outline: none; } /* line 21, ../scss/base/_buttons.scss */ .btn.outline { background: transparent; - color: #1f85c4; - border: 1px solid #1f85c4; + color: #1F85C4; + border: 1px solid #1F85C4; } /* line 25, ../scss/base/_buttons.scss */ .btn.outline:hover { background-color: #379fdf; - color: white; + color: #FFFFFF; border: 1px solid #379fdf; } /* line 31, ../scss/base/_buttons.scss */ .btn.dark-blue { background: #245070; - color: #dde3e8; + color: #DDE3E8; } /* line 34, ../scss/base/_buttons.scss */ .btn.dark-blue:hover { background-color: #306c97; - color: #ecf0f3; + color: #ECF0F3; } /* line 39, ../scss/base/_buttons.scss */ .btn.white { - background: #fafbfe; + background: #FAFBFE; color: #245070; } /* line 42, ../scss/base/_buttons.scss */ .btn.white:hover { - background-color: white; - color: #1f85c4; + background-color: #FFFFFF; + color: #1F85C4; } /* line 12, ../scss/style.scss */ @@ -1942,7 +1929,7 @@ pre .tex .formula { /* line 21, ../scss/style.scss */ .darker-blue { - color: #76899b; + color: #76899B; background-color: #234052; } /* line 24, ../scss/style.scss */ @@ -1956,8 +1943,8 @@ pre .tex .formula { /* line 32, ../scss/style.scss */ .off-white { - color: #4c5156; - background-color: #fafbfe; + color: #4C5156; + background-color: #FAFBFE; } /* line 37, ../scss/style.scss */ @@ -1967,8 +1954,8 @@ pre .tex .formula { top: 0; left: 0; right: 0; - background-color: white; - border-bottom: 1px solid #dde3e8; + background-color: #FFFFFF; + border-bottom: 1px solid #DDE3E8; padding: 1rem 0; z-index: 10; } @@ -2012,16 +1999,14 @@ pre .tex .formula { height: 2em; margin-right: 1em; display: inline-block; - color: white; + color: #FFFFFF; font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace; font-size: .75rem; line-height: 2em; vertical-align: .25em; - background-color: #1f85c4; - -webkit-border-radius: 50%; + background-color: #1F85C4; -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; + -webkit-border-radius: 50%; border-radius: 50%; } @@ -2038,7 +2023,7 @@ pre .tex .formula { .sidebar { position: absolute; overflow: auto; - background-color: #fafbfe; + background-color: #FAFBFE; z-index: 2; } /* line 99, ../scss/style.scss */ @@ -2056,26 +2041,24 @@ pre .tex .formula { height: 3rem; width: 3rem; margin-right: 1rem; - background-color: white; - border: 2px solid #dde3e8; - -webkit-border-radius: 50%; + background-color: #FFFFFF; + border: 2px solid #DDE3E8; -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; + -webkit-border-radius: 50%; border-radius: 50%; - -webkit-box-shadow: 0 0 0 0 #dde3e8; - -moz-box-shadow: 0 0 0 0 #dde3e8; - box-shadow: 0 0 0 0 #dde3e8; - -webkit-transition: all 200ms linear; + -moz-box-shadow: 0 0 0 0 #DDE3E8; + -webkit-box-shadow: 0 0 0 0 #DDE3E8; + box-shadow: 0 0 0 0 #DDE3E8; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; + -webkit-transition: all 200ms linear; transition: all 200ms linear; } /* line 117, ../scss/style.scss */ .sidebar a:hover img { - -webkit-box-shadow: 0 0 0 4px #dde3e8; - -moz-box-shadow: 0 0 0 4px #dde3e8; - box-shadow: 0 0 0 4px #dde3e8; + -moz-box-shadow: 0 0 0 4px #DDE3E8; + -webkit-box-shadow: 0 0 0 4px #DDE3E8; + box-shadow: 0 0 0 4px #DDE3E8; } /* line 122, ../scss/style.scss */ .sidebar span { @@ -2122,25 +2105,23 @@ pre .tex .formula { .chart-icon { display: inline-block; margin-bottom: 1rem; - background-color: white; + background-color: #FFFFFF; height: 6rem; width: 6rem; position: relative; - -webkit-border-radius: 50%; -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; + -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; - -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; + -webkit-transition: all 200ms linear; transition: all 200ms linear; - border: 1px solid #dde3e8; + border: 1px solid #DDE3E8; } /* line 167, ../scss/style.scss */ .chart-icon:hover { - background-color: #fafbfe; + background-color: #FAFBFE; } /* line 170, ../scss/style.scss */ .chart-icon:before { @@ -2151,24 +2132,22 @@ pre .tex .formula { bottom: 0; left: 0; display: block; - -webkit-border-radius: 50%; -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; + -webkit-border-radius: 50%; border-radius: 50%; - -webkit-box-shadow: 0 0 0 6px #dde3e8; - -moz-box-shadow: 0 0 0 6px #dde3e8; - box-shadow: 0 0 0 6px #dde3e8; - -webkit-transition: all 200ms linear; + -moz-box-shadow: 0 0 0 6px #DDE3E8; + -webkit-box-shadow: 0 0 0 6px #DDE3E8; + box-shadow: 0 0 0 6px #DDE3E8; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; + -webkit-transition: all 200ms linear; transition: all 200ms linear; } /* line 183, ../scss/style.scss */ .chart-icon:hover:before { - -webkit-box-shadow: 0 0 0 12px #dde3e8; - -moz-box-shadow: 0 0 0 12px #dde3e8; - box-shadow: 0 0 0 12px #dde3e8; + -moz-box-shadow: 0 0 0 12px #DDE3E8; + -webkit-box-shadow: 0 0 0 12px #DDE3E8; + box-shadow: 0 0 0 12px #DDE3E8; } /* line 187, ../scss/style.scss */ .chart-icon img { diff --git a/site/documentation/index.html b/site/documentation/index.html index 32e6489..d4919a1 100644 --- a/site/documentation/index.html +++ b/site/documentation/index.html @@ -107,6 +107,12 @@ Scatter Plot +
  • + + + Ring + +
    • @@ -486,6 +492,42 @@

    Attributes

    Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. + +
    +

    Ring

    +

    example

    +

    The ring directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a <p></p> axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart.

    +

    You can define both the thickness of the ring (as a percentage) and the diameter of the ring (as a percentage).

    +
    <r field="Unit Sales"></r>
+<ring field="Owner"></ring>
+
+<!-- OR -->
+
+<r field="Unit Sales"></r>
+<ring field="Owner" thickness="20"></ring>
+<ring field="Price Tier" thickness="20" diameter="75"></ring>>
    +

    Attributes

    + + + + + + + + + + + + + + + + + + + + +
    attributedescription
    fieldRequired. Field to plot as a ring.
    thicknessAccepts a number. Width of ring, as percent of circle size.
    diameterAccepts a number. Size of ring, as percent of circle size.
    diff --git a/site/documentation/partials/animation-test.html b/site/documentation/partials/animation-test.html new file mode 100644 index 0000000..ec6b134 --- /dev/null +++ b/site/documentation/partials/animation-test.html @@ -0,0 +1,12 @@ +
    + + + + + + +
    + + diff --git a/site/documentation/partials/area.html b/site/documentation/partials/area.html index 0e7790f..114eba2 100644 --- a/site/documentation/partials/area.html +++ b/site/documentation/partials/area.html @@ -6,7 +6,7 @@

    - + @@ -16,7 +16,7 @@ 

    <!-- Default -->
 <div class="white-panel">
-  <graph data="graphData">
+ <graph data="graphData" width="100%" height="600px">
     <x field="Month" order-by="Date"></x>
     <y field="Unit Sales"></y>
     <legend></legend>
@@ -25,7 +25,7 @@ 
    
 </div>

    - + @@ -37,7 +37,7 @@ 

    <!-- Grouped Area -->
 <div class="white-panel">
-  <graph data="graphData" width="100%" height="600px">
+ <graph data="graphData" width="100%" height="600px">
     <x group-by="Owner" field="Month" order-by="Date" title="Cream, Get the Money"></x>
     <y field="Unit Sales" type="Measure" title="Dollah Dolah Bill Yall"></y>
 
diff --git a/site/documentation/partials/bar-graph.html b/site/documentation/partials/bar-graph.html
index f9a665f..9c526e6 100644
--- a/site/documentation/partials/bar-graph.html
+++ b/site/documentation/partials/bar-graph.html
@@ -6,7 +6,7 @@ 
    
 
    
 
 
    
-  
+  
     
     
     
@@ -14,7 +14,7 @@ 
    
   
 
    
 
-
    <graph data="graphData">
+
    <graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
diff --git a/site/documentation/partials/expanded-stacked-area.html b/site/documentation/partials/expanded-stacked-area.html
index 736e41a..e896d54 100644
--- a/site/documentation/partials/expanded-stacked-area.html
+++ b/site/documentation/partials/expanded-stacked-area.html
@@ -5,7 +5,7 @@ 
    
     
 
    
 
-
+
   
   
   
@@ -13,7 +13,7 @@ 
    
 
 
 
    <!-- Default Stacked -->
-<graph data="graphData">
+<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales" type="Percent"></y>
   <legend></legend>
diff --git a/site/documentation/partials/homepage-code.html b/site/documentation/partials/homepage-code.html
index 454a303..20e0500 100644
--- a/site/documentation/partials/homepage-code.html
+++ b/site/documentation/partials/homepage-code.html
@@ -1,5 +1,5 @@
 
    Top Tabbed Code Sample:
    
-
    <graph data="graphData" height="400">
+
    <graph data="graphData" height="400" width="100%">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
diff --git a/site/documentation/partials/line-graph.html b/site/documentation/partials/line-graph.html
index c394c56..c8f190d 100644
--- a/site/documentation/partials/line-graph.html
+++ b/site/documentation/partials/line-graph.html
@@ -6,7 +6,7 @@ 
    
 
    
 
 
    
-  
+  
     
     
     
@@ -15,7 +15,7 @@ 
    
 
    
 
 
    <!-- Default -->
-<graph data="graphData">
+<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
@@ -41,3 +41,20 @@ 
    
   <line field="Owner" value="Black Mesa"></line>
   <line field="Owner" value="Tyrell Corp"></line>
 </graph>
    
+
    Inside ng-repeat
    
+
    
+  
+    
+    
+    
+    
+  
+
    
+
+
    <!-- Default -->
+<graph data="graphData" width="100%" height="600px">
+  <x field="Month" order-by="Date"></x>
+  <y field="Unit Sales"></y>
+  <legend></legend>
+  <line field="Owner"></line>
+</graph>
    
diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html
new file mode 100644
index 0000000..2134323
--- /dev/null
+++ b/site/documentation/partials/ring.html
@@ -0,0 +1,44 @@
+
    
+    Ring Chart
+    
+      Ring Chart Documentation
+    
+
    
+
+
    
+  
+    
+    
+    
+  
+
    
+
+
    <!-- Default Stacked -->
+  <graph data="graphData" width="100%" height="600px">
+    <r field="Unit Sales"></r>
+    <legend></legend>
+    <ring field="Owner" thickness="20"></ring>
+  </graph>
    
+
    
+    Multi Ring Chart
+    
+      Ring Chart Documentation
+    
+
    
+
+
    
+  
+    
+    
+    
+      
+  
+
    
+
+
    <!-- Default Stacked -->
+  <graph data="graphData" width="100%" height="600px">
+    <r field="Unit Sales"></r>
+    <legend></legend>
+    <ring field="Owner" thickness="20"></ring>
+      <ring field="Price Tier" thickness="20" diameter="75"></ring>
+  </graph>
    
diff --git a/site/documentation/partials/scatter-plot.html b/site/documentation/partials/scatter-plot.html
index 751f0b0..1d8d70c 100644
--- a/site/documentation/partials/scatter-plot.html
+++ b/site/documentation/partials/scatter-plot.html
@@ -6,7 +6,7 @@ 
    
 
    
 
 
    
-  
+  
     
     
     
@@ -15,7 +15,7 @@ 
    
 
    
 
 
    <!-- With Attrs -->
-<graph data="graphData" height="600px">
+<graph data="graphData" width="100%" height="600px">
   <x field="Operating Profit" type="Measure"></x>
   <y field="Unit Sales" type="Measure"></y>
   <legend></legend>
diff --git a/site/documentation/partials/stacked-area.html b/site/documentation/partials/stacked-area.html
index 243ceb4..5037028 100644
--- a/site/documentation/partials/stacked-area.html
+++ b/site/documentation/partials/stacked-area.html
@@ -6,7 +6,7 @@ 
    
 
    
 
 
    
-  
+  
     
     
     
@@ -47,7 +47,7 @@ 
    
 
    
 
 
    
-  
+  
     
     
     
@@ -55,7 +55,7 @@ 
    
   
 
    
 
-
    <graph data="graphData" height="600">
+
    <graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales" type="Percent"></y>
   <legend></legend>
diff --git a/site/documentation/partials/stacked-bar-graph.html b/site/documentation/partials/stacked-bar-graph.html
index a6cdc9d..ccb3aae 100644
--- a/site/documentation/partials/stacked-bar-graph.html
+++ b/site/documentation/partials/stacked-bar-graph.html
@@ -6,7 +6,7 @@ 
    
 
    
 
 
    
-  
+  
     
     
     
@@ -15,7 +15,7 @@ 
    
 
    
 
 
    <!-- As Stacked Bar -->
-<graph data="graphData">
+<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
diff --git a/site/documentation/partials/testerguy.html b/site/documentation/partials/testerguy.html
deleted file mode 100644
index 7c45e87..0000000
--- a/site/documentation/partials/testerguy.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
    <!-- Default -->
-<div class="white-panel">
-  <graph data="graphData">
-    <x field="Month" order-by="Date"></x>
-    <y field="Unit Sales"></y>
-    <legend></legend>
-    <area field="Owner"></area>
-  </graph>
-</div>
    
diff --git a/site/examples/index.html b/site/examples/index.html
index 1e1736e..39b6ab4 100644
--- a/site/examples/index.html
+++ b/site/examples/index.html
@@ -17,7 +17,7 @@
 
   
   
-  
+  
 
 
 
@@ -86,6 +86,12 @@
               Scatter Plot
             
          
+         
  • 
+            
+              
+              Ring
+            
+         
    • 
         
       
 
diff --git a/site/img/ring.svg b/site/img/ring.svg
new file mode 100644
index 0000000..39c6ca7
--- /dev/null
+++ b/site/img/ring.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+	
+
+
+	
+
+
diff --git a/site/index.html b/site/index.html
index 9d7f45f..d43b30d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -17,7 +17,7 @@
 
   
   
-  
+  
 
 
 
@@ -70,11 +70,14 @@
         
    
       
 
-      
-        
-        
-        
-      
+      
+

    + +
    + + + +

    + Ring +

    +

    + Examples | + Reference +

    +
    +

    diff --git a/site/js/app.js b/site/js/app.js index fb4fa93..7fbc695 100644 --- a/site/js/app.js +++ b/site/js/app.js @@ -10,6 +10,12 @@ angular.module('myApp', [ .config(['$routeProvider', '$logProvider', function($routeProvider, $logProvider) { $routeProvider + .when('/animation-test', { + templateUrl: '../documentation/partials/animation-test.html', + controller: 'testController' + }) + + .when('/line-graph', { templateUrl: '../documentation/partials/line-graph.html', controller: 'lineGraphController' @@ -38,6 +44,10 @@ angular.module('myApp', [ templateUrl: '../documentation/partials/scatter-plot.html', controller: 'scatterController' }) + .when('/ring', { + templateUrl: '../documentation/partials/ring.html', + controller: 'ringController' + }) .otherwise({ redirectTo: '/line-graph' @@ -46,3 +56,4 @@ angular.module('myApp', [ $logProvider.debugEnabled(true); }]); + diff --git a/site/js/controllers.js b/site/js/controllers.js index 42f885d..e81dd52 100644 --- a/site/js/controllers.js +++ b/site/js/controllers.js @@ -1,8 +1,39 @@ angular.module('myApp.controllers', []) + + +.controller('testController', ['$scope', 'dataService', function($scope, dataService) { + $scope.line = true; + $scope.generate_data = function () { + var retary = []; + for (var i = 0; i < 5; i++) { + var date = new Date(Date.now() + i * 86400000); + var obj = { + 'Date': date, + 'Month': date.getMonth() + '-' + date.getDate(), + 'Owner': 'Aperture', + 'Unit Sales': (Math.random() * 1000) + 1000 + }; + retary[retary.length] = obj; + } + return {'data': retary}; + }; + + $scope.update_data = function () { + var newData = $scope.generate_data().data; + $scope.graphData = newData; + }; + + $scope.update_data(); + +}]) + + + .controller('lineGraphController', ['$scope', 'dataService', function($scope, dataService) { dataService.getData().then(function(response) { $scope.graphData = response.data; + $scope.arrayOfData = [{data: response.data}, {data: response.data}]; }); }]) @@ -37,6 +68,12 @@ angular.module('myApp.controllers', []) }); }]) +.controller('ringController', ['$scope', 'dataService', function($scope, dataService) { + dataService.getData().then(function(response) { + $scope.graphData = response.data; + }); +}]) + .controller('scatterController', ['$scope', 'dataService', function($scope, dataService) { dataService.getData().then(function(response) { $scope.graphData = response.data; diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js index 6d242af..f4e6200 100644 --- a/site/js/lib/angular-dimple.js +++ b/site/js/lib/angular-dimple.js @@ -1,43 +1,19 @@ -/*! Angular-Dimple - 1.0.2 - 2014-05-30 +/*! Angular-Dimple - 1.0.2 - 2014-09-17 * https://github.com/esripdx/angular-dimple * Licensed ISC */ -angular.module('angular-dimple.core', []) - -.service('angular-dimple.core', [function(){ - return { - filter: function (chart, scopeData, field, value, filter) { - if (scopeData !== null) { - var data = this.filterData(scopeData, filter); - chart.data = data; - if (value !== undefined) { - chart.data = dimple.filterData(data, field, [value]); - } - } - }, - filterData: function (data, filter) { - if (filter) { - var filters = filter.split(':'); - return dimple.filterData(data, filters[0], [filters[1]]); - } else { - return data; - } - } - }; -}]); - - angular.module('angular-dimple', [ - 'angular-dimple.core', 'angular-dimple.graph', 'angular-dimple.legend', 'angular-dimple.x', 'angular-dimple.y', + 'angular-dimple.r', 'angular-dimple.line', 'angular-dimple.bar', 'angular-dimple.stacked-bar', 'angular-dimple.area', 'angular-dimple.stacked-area', - 'angular-dimple.scatter-plot' + 'angular-dimple.scatter-plot', + 'angular-dimple.ring' ]) .constant('MODULE_VERSION', '0.0.1') @@ -47,7 +23,7 @@ angular.module('angular-dimple', [ }); angular.module('angular-dimple.area', []) -.directive('area', ['angular-dimple.core', function (core) { +.directive('area', [function () { return { restrict: 'E', replace: true, @@ -68,15 +44,15 @@ angular.module('angular-dimple.area', []) var values = dimple.getUniqueValues($scope.data, $attrs.field); angular.forEach(values, function(value){ area = chart.addSeries([$attrs.field], dimple.plot.area); - core.filter(area, $scope.data, $attrs.field, value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = true; }); } graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -87,7 +63,7 @@ angular.module('angular-dimple.area', []) angular.module('angular-dimple.bar', []) -.directive('bar', ['angular-dimple.core', function (core) { +.directive('bar', [function () { return { restrict: 'E', replace: true, @@ -102,14 +78,14 @@ angular.module('angular-dimple.bar', []) function addBar () { var filteredData; bar = chart.addSeries([$attrs.field], dimple.plot.bar); - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -123,37 +99,52 @@ angular.module('angular-dimple.graph', []) restrict: 'E', replace: true, scope: { - data: '=' + data: '=', }, require: ['graph'], transclude: true, - compile: function($element, $attrs) { - var id = (Math.random() * 1e9).toString(36).replace(".", "_"); - $element.append('
    '); - return { - post: function postLink(scope, element, attrs, controllers, transclude) { - var graphController = controllers[0]; - graphController._createChart(id); - scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - graphController.setData(); - } - }); - transclude(scope, function(clone){ - element.append(clone); - }); + link: function (scope, element, attrs, controllers, transclude) { + var graphController = controllers[0]; + graphController._createChart(); + scope.dataReady = false; + scope.filters = []; + + var chart = graphController.getChart(); + var transition; + if (attrs.transition) { + transition = attrs.transition; + } else { + transition = 750; + } + + scope.$watch('data', function(newValue, oldValue) { + if (newValue) { + scope.dataReady = true; + graphController.setData(); + chart.draw(transition); } - }; + }); + + transclude(scope, function(clone){ + element.append(clone); + }); }, controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { var chart; - var id; - this._createChart = function (domId) { - id = domId; - var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height); - chart = new dimple.chart(svg); + this._createChart = function () { + // create an svg element + var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute('width', $attrs.width); + svg.setAttribute('height', $attrs.height); + + // end the svg to this + $element.append(svg); + // create the dimple chart using the d3 selection of our element + chart = new dimple.chart(d3.select(svg)); + + // auto style var autoStyle = $attrs.autoStyle === 'false' ? true : false; chart.noFormats = autoStyle; }; @@ -174,6 +165,23 @@ angular.module('angular-dimple.graph', []) return id; }; + this.filter = function (attrs) { + if (attrs.value !== undefined) { + $scope.filters.push(attrs.value); + } + if ($scope.filters.length) { + chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); + } + + if (attrs.filter !== undefined) { + console.log("i see a filter"); + var thisFilter = attrs.filter.split(':'); + var field = thisFilter[0]; + var value = [thisFilter[1]]; + chart.data = dimple.filterData($scope.data, field, value); + } + }; + }] }; }]); @@ -199,8 +207,8 @@ angular.module('angular-dimple.legend', []) chart.addLegend(left, top, width, height, position); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLegend(); } }); @@ -209,7 +217,7 @@ angular.module('angular-dimple.legend', []) }]); angular.module('angular-dimple.line', []) -.directive('line', ['angular-dimple.core', function (core) { +.directive('line', [function () { return { restrict: 'E', replace: true, @@ -218,28 +226,108 @@ angular.module('angular-dimple.line', []) }], link: function($scope, $element, $attrs, $controllers) { var graphController = $controllers[1]; - var lineController = $controllers[0]; var chart = graphController.getChart(); + var drawn = false; function addLine () { var filteredData; line = chart.addSeries([$attrs.field], dimple.plot.line); - core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); line.lineMarkers = true; graphController.draw(); } + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { + addLine(); + } + }); + + } + }; +}]); +angular.module('angular-dimple.r', []) + +.directive('r', [function () { + return { + restrict: 'E', + replace: true, + require: ['r', '^graph'], + controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { + }], + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[1]; + var chart = graphController.getChart(); + + function addAxis () { + r = chart.addMeasureAxis('p', $attrs.field); + + if ($attrs.title && $attrs.title !== "null") { + r.title = $attrs.title; + } else if ($attrs.title == "null") { + r.title = null; + } + } + + $scope.$watch('data', function(newValue, oldValue) { + if (newValue) { + addAxis(); + } + }); + } + }; +}]); +angular.module('angular-dimple.ring', []) + +.directive('ring', [function () { + return { + restrict: 'E', + replace: true, + require: ['ring', '^graph'], + controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { + }], + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[1]; + var areaController = $controllers[0]; + var chart = graphController.getChart(); + + function setData (data, series) { + series.data = data; + } + + function addRing () { + var thickness; + ring = chart.addSeries([$attrs.field], dimple.plot.pie); + if ($attrs.thickness && !$attrs.diameter) { + thickness = (100 - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else if ($attrs.thickness && $attrs.diameter) { + thickness = ($attrs.diameter - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else { + ring.innerRadius = "50%"; + } + + if ($attrs.diameter) { + ring.outerRadius = ($attrs.diameter) + '%'; + } + graphController.filter($attrs); + graphController.draw(); + } + $scope.$watch('data', function(newValue, oldValue) { if (newValue) { - addLine(); + addRing(); } }); } }; }]); + + angular.module('angular-dimple.scatter-plot', []) -.directive('scatterPlot', ['angular-dimple.core', function (core) { +.directive('scatterPlot', [function () { return { restrict: 'E', replace: true, @@ -257,12 +345,12 @@ angular.module('angular-dimple.scatter-plot', []) if ($attrs.label || $attrs.label === '') { array.push($attrs.label); } scatterPlot = chart.addSeries(array, dimple.plot.bubble); scatterPlot.aggregate = dimple.aggregateMethod.avg; - core.filter(scatterPlot, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addScatterPlot(); } }); @@ -271,7 +359,7 @@ angular.module('angular-dimple.scatter-plot', []) }]); angular.module('angular-dimple.stacked-area', []) -.directive('stackedArea', ['angular-dimple.core', function (core) { +.directive('stackedArea', [function () { return { restrict: 'E', replace: true, @@ -289,13 +377,13 @@ angular.module('angular-dimple.stacked-area', []) } else { area = chart.addSeries([$attrs.field], dimple.plot.area); } - core.filter(area, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = false; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -304,7 +392,7 @@ angular.module('angular-dimple.stacked-area', []) }]); angular.module('angular-dimple.stacked-bar', []) -.directive('stackedBar', ['angular-dimple.core', function (core) { +.directive('stackedBar', [function () { return { restrict: 'E', replace: true, @@ -322,12 +410,12 @@ angular.module('angular-dimple.stacked-bar', []) } else { bar = chart.addSeries([$attrs.field], dimple.plot.bar); } - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -359,7 +447,6 @@ angular.module('angular-dimple.x', []) if ($attrs.orderBy) { x.addGroupOrderRule($attrs.orderBy); } - } else { if ($attrs.type == 'Measure') { x = chart.addMeasureAxis('x', $attrs.field); @@ -379,8 +466,9 @@ angular.module('angular-dimple.x', []) x.title = null; } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); @@ -432,8 +520,8 @@ angular.module('angular-dimple.y', []) } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js index 20639f1..0dfa461 100644 --- a/site/js/lib/angular-dimple.min.js +++ b/site/js/lib/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})},controller:["$scope","$element","$attrs",function(a,b,c){var d;this._createChart=function(){var a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("width",c.width),a.setAttribute("height",c.height),b.append(a),d=new dimple.chart(d3.select(a));var e="false"===c.autoStyle?!0:!1;d.noFormats=e},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return id},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file diff --git a/site/scss/home.scss b/site/scss/home.scss index d4e3a44..dcbbb5d 100644 --- a/site/scss/home.scss +++ b/site/scss/home.scss @@ -36,7 +36,7 @@ code { z-index: 2; font-weight: 200; } - .dimple-graph { + .banner-graphic { position: absolute; top: -260px; bottom: 0; diff --git a/source/angular-dimple-core.js b/source/angular-dimple-core.js deleted file mode 100644 index 28fe1fd..0000000 --- a/source/angular-dimple-core.js +++ /dev/null @@ -1,24 +0,0 @@ -angular.module('angular-dimple.core', []) - -.service('angular-dimple.core', [function(){ - return { - filter: function (chart, scopeData, field, value, filter) { - if (scopeData !== null) { - var data = this.filterData(scopeData, filter); - chart.data = data; - if (value !== undefined) { - chart.data = dimple.filterData(data, field, [value]); - } - } - }, - filterData: function (data, filter) { - if (filter) { - var filters = filter.split(':'); - return dimple.filterData(data, filters[0], [filters[1]]); - } else { - return data; - } - } - }; -}]); - diff --git a/source/angular-dimple.js b/source/angular-dimple.js index d238595..d1d24b4 100644 --- a/source/angular-dimple.js +++ b/source/angular-dimple.js @@ -1,15 +1,16 @@ angular.module('angular-dimple', [ - 'angular-dimple.core', 'angular-dimple.graph', 'angular-dimple.legend', 'angular-dimple.x', 'angular-dimple.y', + 'angular-dimple.r', 'angular-dimple.line', 'angular-dimple.bar', 'angular-dimple.stacked-bar', 'angular-dimple.area', 'angular-dimple.stacked-area', - 'angular-dimple.scatter-plot' + 'angular-dimple.scatter-plot', + 'angular-dimple.ring' ]) .constant('MODULE_VERSION', '0.0.1') diff --git a/source/area.js b/source/area.js index 57ca4b4..1fe84fa 100644 --- a/source/area.js +++ b/source/area.js @@ -1,6 +1,6 @@ angular.module('angular-dimple.area', []) -.directive('area', ['angular-dimple.core', function (core) { +.directive('area', [function () { return { restrict: 'E', replace: true, @@ -21,15 +21,15 @@ angular.module('angular-dimple.area', []) var values = dimple.getUniqueValues($scope.data, $attrs.field); angular.forEach(values, function(value){ area = chart.addSeries([$attrs.field], dimple.plot.area); - core.filter(area, $scope.data, $attrs.field, value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = true; }); } graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); diff --git a/source/bar.js b/source/bar.js index 9b63901..424cf6b 100644 --- a/source/bar.js +++ b/source/bar.js @@ -1,6 +1,6 @@ angular.module('angular-dimple.bar', []) -.directive('bar', ['angular-dimple.core', function (core) { +.directive('bar', [function () { return { restrict: 'E', replace: true, @@ -15,14 +15,14 @@ angular.module('angular-dimple.bar', []) function addBar () { var filteredData; bar = chart.addSeries([$attrs.field], dimple.plot.bar); - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); diff --git a/source/graph.js b/source/graph.js index 8a9bd58..279ea4f 100644 --- a/source/graph.js +++ b/source/graph.js @@ -5,37 +5,52 @@ angular.module('angular-dimple.graph', []) restrict: 'E', replace: true, scope: { - data: '=' + data: '=', }, require: ['graph'], transclude: true, - compile: function($element, $attrs) { - var id = (Math.random() * 1e9).toString(36).replace(".", "_"); - $element.append('
    '); - return { - post: function postLink(scope, element, attrs, controllers, transclude) { - var graphController = controllers[0]; - graphController._createChart(id); - scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - graphController.setData(); - } - }); - transclude(scope, function(clone){ - element.append(clone); - }); + link: function (scope, element, attrs, controllers, transclude) { + var graphController = controllers[0]; + graphController._createChart(); + scope.dataReady = false; + scope.filters = []; + + var chart = graphController.getChart(); + var transition; + if (attrs.transition) { + transition = attrs.transition; + } else { + transition = 750; + } + + scope.$watch('data', function(newValue, oldValue) { + if (newValue) { + scope.dataReady = true; + graphController.setData(); + chart.draw(transition); } - }; + }); + + transclude(scope, function(clone){ + element.append(clone); + }); }, controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { var chart; - var id; - this._createChart = function (domId) { - id = domId; - var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height); - chart = new dimple.chart(svg); + this._createChart = function () { + // create an svg element + var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute('width', $attrs.width); + svg.setAttribute('height', $attrs.height); + + // end the svg to this + $element.append(svg); + + // create the dimple chart using the d3 selection of our element + chart = new dimple.chart(d3.select(svg)); + // auto style var autoStyle = $attrs.autoStyle === 'false' ? true : false; chart.noFormats = autoStyle; }; @@ -56,6 +71,23 @@ angular.module('angular-dimple.graph', []) return id; }; + this.filter = function (attrs) { + if (attrs.value !== undefined) { + $scope.filters.push(attrs.value); + } + if ($scope.filters.length) { + chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); + } + + if (attrs.filter !== undefined) { + console.log("i see a filter"); + var thisFilter = attrs.filter.split(':'); + var field = thisFilter[0]; + var value = [thisFilter[1]]; + chart.data = dimple.filterData($scope.data, field, value); + } + }; + }] }; }]); \ No newline at end of file diff --git a/source/legend.js b/source/legend.js index 85e1d1a..e8d2523 100644 --- a/source/legend.js +++ b/source/legend.js @@ -20,8 +20,8 @@ angular.module('angular-dimple.legend', []) chart.addLegend(left, top, width, height, position); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLegend(); } }); diff --git a/source/line.js b/source/line.js index 2817456..c858372 100644 --- a/source/line.js +++ b/source/line.js @@ -1,6 +1,6 @@ angular.module('angular-dimple.line', []) -.directive('line', ['angular-dimple.core', function (core) { +.directive('line', [function () { return { restrict: 'E', replace: true, @@ -9,22 +9,23 @@ angular.module('angular-dimple.line', []) }], link: function($scope, $element, $attrs, $controllers) { var graphController = $controllers[1]; - var lineController = $controllers[0]; var chart = graphController.getChart(); + var drawn = false; function addLine () { var filteredData; line = chart.addSeries([$attrs.field], dimple.plot.line); - core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); line.lineMarkers = true; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLine(); } }); + } }; }]); \ No newline at end of file diff --git a/source/r.js b/source/r.js new file mode 100644 index 0000000..1aa04d1 --- /dev/null +++ b/source/r.js @@ -0,0 +1,31 @@ +angular.module('angular-dimple.r', []) + +.directive('r', [function () { + return { + restrict: 'E', + replace: true, + require: ['r', '^graph'], + controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { + }], + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[1]; + var chart = graphController.getChart(); + + function addAxis () { + r = chart.addMeasureAxis('p', $attrs.field); + + if ($attrs.title && $attrs.title !== "null") { + r.title = $attrs.title; + } else if ($attrs.title == "null") { + r.title = null; + } + } + + $scope.$watch('data', function(newValue, oldValue) { + if (newValue) { + addAxis(); + } + }); + } + }; +}]); \ No newline at end of file diff --git a/source/ring.js b/source/ring.js new file mode 100644 index 0000000..dbbb998 --- /dev/null +++ b/source/ring.js @@ -0,0 +1,47 @@ +angular.module('angular-dimple.ring', []) + +.directive('ring', [function () { + return { + restrict: 'E', + replace: true, + require: ['ring', '^graph'], + controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { + }], + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[1]; + var areaController = $controllers[0]; + var chart = graphController.getChart(); + + function setData (data, series) { + series.data = data; + } + + function addRing () { + var thickness; + ring = chart.addSeries([$attrs.field], dimple.plot.pie); + if ($attrs.thickness && !$attrs.diameter) { + thickness = (100 - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else if ($attrs.thickness && $attrs.diameter) { + thickness = ($attrs.diameter - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else { + ring.innerRadius = "50%"; + } + + if ($attrs.diameter) { + ring.outerRadius = ($attrs.diameter) + '%'; + } + graphController.filter($attrs); + graphController.draw(); + } + + $scope.$watch('data', function(newValue, oldValue) { + if (newValue) { + addRing(); + } + }); + } + }; +}]); + diff --git a/source/scatter-plot.js b/source/scatter-plot.js index 6f4051d..3f594ba 100644 --- a/source/scatter-plot.js +++ b/source/scatter-plot.js @@ -1,6 +1,6 @@ angular.module('angular-dimple.scatter-plot', []) -.directive('scatterPlot', ['angular-dimple.core', function (core) { +.directive('scatterPlot', [function () { return { restrict: 'E', replace: true, @@ -18,12 +18,12 @@ angular.module('angular-dimple.scatter-plot', []) if ($attrs.label || $attrs.label === '') { array.push($attrs.label); } scatterPlot = chart.addSeries(array, dimple.plot.bubble); scatterPlot.aggregate = dimple.aggregateMethod.avg; - core.filter(scatterPlot, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addScatterPlot(); } }); diff --git a/source/stacked-area.js b/source/stacked-area.js index 76289d4..d94dc8f 100644 --- a/source/stacked-area.js +++ b/source/stacked-area.js @@ -1,6 +1,6 @@ angular.module('angular-dimple.stacked-area', []) -.directive('stackedArea', ['angular-dimple.core', function (core) { +.directive('stackedArea', [function () { return { restrict: 'E', replace: true, @@ -18,13 +18,13 @@ angular.module('angular-dimple.stacked-area', []) } else { area = chart.addSeries([$attrs.field], dimple.plot.area); } - core.filter(area, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = false; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); diff --git a/source/stacked-bar.js b/source/stacked-bar.js index 4f97d1f..d791402 100644 --- a/source/stacked-bar.js +++ b/source/stacked-bar.js @@ -1,6 +1,6 @@ angular.module('angular-dimple.stacked-bar', []) -.directive('stackedBar', ['angular-dimple.core', function (core) { +.directive('stackedBar', [function () { return { restrict: 'E', replace: true, @@ -18,12 +18,12 @@ angular.module('angular-dimple.stacked-bar', []) } else { bar = chart.addSeries([$attrs.field], dimple.plot.bar); } - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); diff --git a/source/x.js b/source/x.js index bbe2e23..ff989ef 100644 --- a/source/x.js +++ b/source/x.js @@ -23,7 +23,6 @@ angular.module('angular-dimple.x', []) if ($attrs.orderBy) { x.addGroupOrderRule($attrs.orderBy); } - } else { if ($attrs.type == 'Measure') { x = chart.addMeasureAxis('x', $attrs.field); @@ -43,8 +42,9 @@ angular.module('angular-dimple.x', []) x.title = null; } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); diff --git a/source/y.js b/source/y.js index d3f5089..3817c0b 100644 --- a/source/y.js +++ b/source/y.js @@ -43,8 +43,8 @@ angular.module('angular-dimple.y', []) } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } });