Skip to content

Commit

Permalink
Merge pull request #2 from amgadfahmi/development
Browse files Browse the repository at this point in the history
initial version 0.1.0
  • Loading branch information
amgadfahmi committed Jun 3, 2016
2 parents b4444c2 + 85c1e72 commit f5fab3a
Show file tree
Hide file tree
Showing 24 changed files with 1,640 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .bowerrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"directory": "bower"
}
12 changes: 12 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
18 changes: 18 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
._*
.~lock.*
.buildpath
.DS_Store
.idea
.project
.settings

# Ignore node stuff
node_modules/
npm-debug.log
libpeerconnection.log

# OS-specific
.DS_Store

# Bower components
bower
62 changes: 62 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
{
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"es3": false,
"forin": true,
"freeze": true,
"immed": true,
"indent": 2,
"latedef": "nofunc",
"newcap": true,
"noarg": true,
"noempty": true,
"nonbsp": true,
"nonew": true,
"plusplus": false,
"quotmark": "single",
"undef": true,
"unused": false,
"strict": false,
"maxparams": 10,
"maxdepth": 5,
"maxstatements": 40,
"maxcomplexity": 8,
"maxlen": 1200,

"asi": false,
"boss": false,
"debug": false,
"eqnull": true,
"esnext": false,
"evil": false,
"expr": false,
"funcscope": false,
"globalstrict": false,
"iterator": false,
"lastsemic": false,
"laxbreak": false,
"laxcomma": false,
"loopfunc": true,
"maxerr": false,
"moz": false,
"multistr": false,
"notypeof": false,
"proto": false,
"scripturl": false,
"shadow": false,
"sub": true,
"supernew": false,
"validthis": false,
"noyield": false,

"browser": true,
"node": true,

"globals": {
"angular": false,
"$": false,
"d3": false
}
}
7 changes: 7 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
language: node_js
node_js:
- '4'
before_install:
- npm install -g gulp gulp-cli bower
- bower install
script: npm run ci
35 changes: 35 additions & 0 deletions .yo-rc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{
"generator-angular-package": {
"props": {
"moduleName": "angular-bubbletree",
"description": "Angular bubble tree chart using d3",
"gitUrl": "http://amgadfahmi.git",
"keywords": "[\"d3\",\"angular\",\"chart\",\"responsive\",\"related\",\"bubble\"]",
"license": "MIT",
"author": {
"name": "Amgad Fahmi",
"email": "[email protected]"
},
"yourModule": {
"original": "angular-bubbletree",
"camelized": "angularBubbletree",
"dasherized": "angular-bubbletree",
"slugified": "angular-bubbletree",
"parts": [
"angular",
"bubbletree"
]
},
"includeModuleDirectives": true,
"includeModuleFilters": true,
"includeModuleServices": true,
"includeModuleControllers": true,
"includeAngularModuleResource": false,
"includeAngularModuleCookies": false,
"includeAngularModuleSanitize": false,
"moduleDirectory": "modules/angular-bubbletree",
"moduleUnitTestDirectory": "test/unit/angular-bubbletree",
"moduleUnitE2eDirectory": "test/e2e/angular-bubbletree"
}
}
}
97 changes: 97 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
# angular-bubbletree
Master 0.1.0: [![Master Status](https://travis-ci.org/amgadfahmi/angular-bubbletree.svg?branch=master)](https://travis-ci.org/amgadfahmi/js-binarysearch)  Development 0.1.0: [![Development Status](https://travis-ci.org/amgadfahmi/angular-bubbletree.svg?branch=development)](https://travis-ci.org/amgadfahmi/js-binarysearch) [![Dependency Status](https://david-dm.org/amgadfahmi/angular-bubbletree.svg)](https://david-dm.org/amgadfahmi/angular-bubbletree)

![angular d3 chart bubble tree](https://amgadfahmi.files.wordpress.com/2016/06/angular-bubbletree-chart.png "angular d3 chart bubble tree")



## Installation

[![bower](https://amgadfahmi.files.wordpress.com/2016/05/bower.png "Javascript Binary Search")](http://bower.io/search/?q=angular-bubbletree)

You can install the package using Bower
```
$ bower install --save js-binarysearch
```
Or download the project and find the module in `dist/` folder

## Usage
The directive is simple, define the directive in your html as following

```html
<bubbletree
id="testChart" //required
control="chart" //required
link-distance='100' //optional
fill-style='solid' //optional
parent-color='steelblue' //optional
child-color='lightgray' //optional
collapsed-color='#ffdd99' //optional
link-color='#9ecae1' //optional
enable-tooltip="true" //optional
text-x="1.45em" //optional
text-y="3.45em" //optional
scale-score="10"> //optional
</bubbletree>
```
And in your controller define the following
```javascript
//this very important to communicate with the directive
//and be able to call internal functionalities
$scope.chart = {};
//load you data in anyway you want
$http.get('data.json').then(function(result) {
//once data is ready pass it to the bind function
$scope.chart.bind( result.data);
});
```

## Parameters

```
parameter condition default description
id required NA defines the control id in the dom
control required NA refernece to scope object in order to communicate with the directive
width optional 1000 determine the svg container width
height optional 400 determine the svg container height
link-distance optional 100 determine the distanaation between each node
fill-style optional gradient changes the chart bubbles layout (solid - gradient)
parent-color optional #336699 color of any parent node (works only with solid style)
child-color optional #e0e0eb color of any child node (works only with solid style)
collapsed-color optional #19334d color of any collapsed parent node (works only with solid style)
link-color optional #9ecae1 color of link between nodes
enable-tooltip optional true show small tooltip beside the node(very basic)
text-x optional 1.45em determine the x coordinates of the node text according to its node
text-y optional 3.45em determine the y coordinates of the node text according to its node
scale-score optional 10 determine the scaling factor for node sizes(1 too small - 30 is big)
```

## Extra info

![angular d3 chart bubble tree](https://amgadfahmi.files.wordpress.com/2016/06/angular-bubbletree-chart2.png "angular d3 chart bubble tree")

You can override the default following classes in order to change the look of component
```css
.btNode circle {
}
.btNode text {
}
.btLink {
}
div.btTooltip{
}
```

## License

Copyright [2016] Amgad Fahmi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
45 changes: 45 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{
"name": "angular-bubbletree",
"version": "0.1.0",
"description": "Angular bubble tree chart using d3",
"keywords": [
"d3",
"angular",
"chart",
"responsive",
"related",
"bubble"
],
"authors": [
{
"name": "Amgad Fahmi",
"email": "[email protected]"
}
],
"repository": {
"type": "git",
"url": "https://github.com/amgadfahmi/angular-bubbletree.git"
},
"license": "ALv2",
"main": [
"dist/angular-bubbletree.js",
"dist/angular-bubbletree.css"
],
"ignore": [
"*.*",
"bower",
"modules",
"node_modules",
"src",
"test"
],
"dependencies": {
"d3": "^3.5.17"
},
"devDependencies": {
"angular-mocks": ">=1.2.0",
"angular-scenario": ">=1.2.0",
"angular": ">=1.2.0",
"d3": "^3.5.17"
}
}
65 changes: 65 additions & 0 deletions data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
{
"name": "flare",
"children": [{
"name": "analytics",
"children": [{
"name": "cluster",
"children": [{
"name": "Agglomerative Cluster",
"size": 3938
}, {
"name": "Community Structure",
"size": 3812
}, {
"name": "Hierarchical Cluster",
"size": 6714
}, {
"name": "Merge Edge",
"size": 700
}]
}, {
"name": "graph",
"children": [{
"name": "Betweenness Centrality",
"size": 3534
}, {
"name": "Link Distance",
"size": 5731
}, {
"name": "Max Flow MinCut",
"size": 7840
}, {
"name": "Shortest Paths",
"size": 5914
}, {
"name": "Spanning Tree",
"size": 3416
}]
}, {
"name": "optimization",
"children": [{
"name": "Aspect Ratio Banker",
"size": 7074,
"children": [{
"name": "Betweenness Centrality",
"size": 3534
}, {
"name": "Link Distance",
"size": 5731
}, {
"name": "Max Flow MinCut",
"size": 7840,
"children": [{
"name": "Betweenness Centrality",
"size": 534
}, {
"name": "Link Distance",
"size": 1731
}
]
}
]
}]
}]
}]
}
Loading

0 comments on commit f5fab3a

Please sign in to comment.