├── .gitignore ├── screenshots └── copy-files-into-project.png ├── bower.json ├── LICENSE ├── angular-peity.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | *.sublime-project 3 | 4 | *.sublime-workspace 5 | -------------------------------------------------------------------------------- /screenshots/copy-files-into-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/projectweekend/angular-peity/HEAD/screenshots/copy-files-into-project.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-peity", 3 | "main": "angular-peity.js", 4 | "version": "0.0.1", 5 | "homepage": "https://github.com/projectweekend/angular-peity", 6 | "authors": [ 7 | "Brian Hines " 8 | ], 9 | "description": "An AngularJS directive for using Peity charts", 10 | "moduleType": [ 11 | "globals" 12 | ], 13 | "keywords": [ 14 | "peity", 15 | "charts", 16 | "svg", 17 | "angularjs" 18 | ], 19 | "license": "MIT", 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests" 26 | ], 27 | "dependencies": { 28 | "peity": "benpickles/peity", 29 | "jquery": "~2.0.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Brian Hines 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /angular-peity.js: -------------------------------------------------------------------------------- 1 | var angularPeity = angular.module( 'angular-peity', [] ); 2 | 3 | 4 | var buildChartDirective = function(chartType) { 5 | 'use strict'; 6 | 7 | return { 8 | restrict: 'E', 9 | scope: { 10 | data: "=", 11 | options: "=" 12 | }, 13 | link: function(scope, element, attrs) { 14 | 15 | var options = {}; 16 | 17 | if (scope.options) { 18 | options = scope.options; 19 | } 20 | 21 | var span = document.createElement('span'); 22 | span.style.display = "none"; 23 | span.textContent = scope.data.join(); 24 | 25 | if (!attrs.class) { 26 | span.className = ""; 27 | } else { 28 | span.className = attrs.class; 29 | } 30 | 31 | if (element[0].nodeType === 8) { 32 | element.replaceWith(span); 33 | } else { 34 | element[0].appendChild(span); 35 | } 36 | 37 | jQuery(span).peity(chartType, options); 38 | 39 | var watcher = scope.$watch('data', function(){ 40 | span.textContent = scope.data.join(); 41 | jQuery( span ).change(); 42 | }, true); 43 | 44 | scope.$on('$destroy', function(){ 45 | watcher(); 46 | }); 47 | 48 | jQuery(window).resize(function() { 49 | jQuery(span).peity(chartType, options); 50 | }); 51 | 52 | } 53 | }; 54 | }; 55 | 56 | 57 | angularPeity.directive( 'pieChart', function () { 58 | 59 | return buildChartDirective( "pie" ); 60 | 61 | } ); 62 | 63 | 64 | angularPeity.directive( 'barChart', function () { 65 | 66 | return buildChartDirective( "bar" ); 67 | 68 | } ); 69 | 70 | 71 | angularPeity.directive( 'lineChart', function () { 72 | 73 | return buildChartDirective( "line" ); 74 | 75 | } ); 76 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [Peity](http://benpickles.github.io/peity/) is a jQuery plugin that converts an element's content into simple `` charts. This is an AngularJS directive that makes them easy to use in any project by binding data and options to a controller. 2 | 3 | ## Installation 4 | This project, along with all of its dependencies are installed with [Bower](http://bower.io/): `bower install angular-peity`. 5 | 6 | ## Set up 7 | If you're familar with how to include third-party modules in AngularJS, then you can probably skip this section. If you're new to the framework, this should help. 8 | 9 | ### Step 1 10 | Include the file before the main app file: 11 | 12 | ~~~html 13 | 14 | 15 | 16 | 17 | ~~~ 18 | 19 | ### Step 3 20 | Add `angular-peity` to the app requirements (`/js/app.js`). 21 | ~~~javascript 22 | var app = angular.module('myApp', [ 23 | 'myApp.controllers', 24 | 'myApp.filters', 25 | 'myApp.services', 26 | // 3rd party dependencies 27 | 'angular-peity' 28 | ]); 29 | ~~~ 30 | 31 | ## Use it 32 | This module creates three custom directives (tags) that can be used anywhere in your templates. Each directive uses two attributes that are bound to properties of a controller. 33 | 34 | * **data** - This attribute is required and is used to supply the data points that the chart will display in an array. 35 | 36 | * **options** - This attribute is not required. If used it should be an object with property names that match the available options for the type of chart being used. Information about specific options for each chart type is available at: [http://benpickles.github.io/peity/](http://benpickles.github.io/peity/). 37 | 38 | #### Controller Example 39 | ~~~javascript 40 | var cMod = angular.module( 'myApp.controllers', [] ); 41 | 42 | cMod.controller( 'ChartCtrl', function ( $scope ) { 43 | 44 | /* 45 | This example is over simplified to demonstrate the relationship 46 | between the 'controller' and the 'template' with regard to loading 47 | the 'icon' value. Hopefully, you will be loading your controller with 48 | data from an actual API response. :) 49 | */ 50 | $scope.PieChart = { 51 | data: [1, 2, 3, 4], 52 | options: { 53 | diameter: 150 54 | } 55 | }; 56 | 57 | $scope.BarChart = { 58 | data: [1, 2, 3, 4], 59 | options: { 60 | width: 150, 61 | height: 150 62 | } 63 | }; 64 | 65 | $scope.LineChart = { 66 | data: [1, 2, 3, 4, 3, 1], 67 | options: { 68 | width: 150, 69 | stroke: "#eee" 70 | } 71 | }; 72 | 73 | } ); 74 | ~~~ 75 | 76 | #### Template Example 77 | ~~~html 78 | 79 | 80 | 81 | 82 | 83 | ~~~ 84 | --------------------------------------------------------------------------------