{"id":22468579,"url":"https://github.com/projectweekend/angular-peity","last_synced_at":"2025-06-19T03:43:06.826Z","repository":{"id":15652782,"uuid":"18390081","full_name":"projectweekend/angular-peity","owner":"projectweekend","description":"An AngularJS directive for using Peity charts","archived":false,"fork":false,"pushed_at":"2018-03-13T13:43:51.000Z","size":58,"stargazers_count":33,"open_issues_count":3,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T15:53:21.085Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/projectweekend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-03T03:30:26.000Z","updated_at":"2022-04-22T22:40:03.000Z","dependencies_parsed_at":"2022-08-26T18:50:48.773Z","dependency_job_id":null,"html_url":"https://github.com/projectweekend/angular-peity","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-peity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-peity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-peity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-peity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/projectweekend","download_url":"https://codeload.github.com/projectweekend/angular-peity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248809024,"owners_count":21164895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T11:17:52.159Z","updated_at":"2025-04-14T01:50:37.336Z","avatar_url":"https://github.com/projectweekend.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"[Peity](http://benpickles.github.io/peity/) is a jQuery plugin that converts an element's content into simple `\u003csvg\u003e` charts. This is an AngularJS directive that makes them easy to use in any project by binding data and options to a controller.\n\n## Installation\nThis project, along with all of its dependencies are installed with [Bower](http://bower.io/): `bower install angular-peity`.\n\n## Set up\nIf 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.\n\n### Step 1\nInclude the file before the main app file:\n\n~~~html\n\u003cscript src=\"/bower_components/jquery/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/bower_components/peity/jquery.peity.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/bower_components/angular-peity/angular-peity.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/app.js\"\u003e\u003c/script\u003e\n~~~\n\n### Step 3\nAdd `angular-peity` to the app requirements (`/js/app.js`).\n~~~javascript\nvar app = angular.module('myApp', [\n    'myApp.controllers',\n    'myApp.filters',\n    'myApp.services',\n    // 3rd party dependencies\n    'angular-peity'\n]);\n~~~\n\n## Use it\nThis 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.\n\n* **data** - This attribute is required and is used to supply the data points that the chart will display in an array.\n\n* **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/).\n\n#### Controller Example\n~~~javascript\nvar cMod = angular.module( 'myApp.controllers', [] );\n\ncMod.controller( 'ChartCtrl', function ( $scope ) {\n\n    /*\n        This example is over simplified to demonstrate the relationship\n        between the 'controller' and the 'template' with regard to loading\n        the 'icon' value. Hopefully, you will be loading your controller with\n        data from an actual API response. :)\n    */\n    $scope.PieChart = {\n        data: [1, 2, 3, 4],\n        options: {\n            diameter: 150\n        }\n    };\n\n    $scope.BarChart = {\n        data: [1, 2, 3, 4],\n        options: {\n            width: 150,\n            height: 150\n        }\n    };\n\n    $scope.LineChart = {\n        data: [1, 2, 3, 4, 3, 1],\n        options: {\n            width: 150,\n            stroke: \"#eee\"\n        }\n    };\n\n} );\n~~~\n\n#### Template Example\n~~~html\n\u003cpie-chart data=\"PieChart.data\" options=\"PieChart.options\"\u003e\u003c/pie-chart\u003e\n\n\u003cbar-chart data=\"BarChart.data\" options=\"BarChart.options\"\u003e\u003c/bar-chart\u003e\n\n\u003cline-chart data=\"LineChart.data\" options=\"LineChart.options\"\u003e\u003c/line-chart\u003e\n~~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectweekend%2Fangular-peity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojectweekend%2Fangular-peity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectweekend%2Fangular-peity/lists"}