├── .gitmodules
├── circle.yml
├── src
    ├── app
    │   ├── data
    │   │   ├── pieData.csv
    │   │   ├── gearData.csv
    │   │   └── data.csv
    │   ├── app.module.ts
    │   ├── app.component.ts
    │   └── app.html
    ├── angularD3
    │   ├── directives
    │   │   ├── chart.spec.ts
    │   │   ├── line.ts
    │   │   ├── arc.ts
    │   │   ├── bars.ts
    │   │   ├── data.ts
    │   │   ├── axis-label.ts
    │   │   ├── area.ts
    │   │   ├── chart.ts
    │   │   ├── pie.ts
    │   │   ├── gear.ts
    │   │   └── axis.ts
    │   ├── d3.ts
    │   └── index.ts
    ├── bootstrap.ts
    ├── index.html
    └── styles
    │   └── styles.scss
├── .gitignore
├── test
    ├── sanity-test.spec.ts
    ├── injector.spec.ts
    └── app
    │   └── app.e2e.js
├── CHANGELOG.md
├── typedoc.json
├── tsconfig.json
├── tsconfig.build.json
├── bower.json
├── CONTRIBUTING.md
├── protractor.conf.js
├── MIT-LICENSE
├── tslint.json
├── webpack.config.js
├── karma.conf.js
├── package.json
├── README.md
└── npm-shrinkwrap.json


/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "docs"]
2 | 	path = docs
3 | 	url = git@github.com:WealthBar/a2d3.git
4 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | machine:
 2 |   node:
 3 |     version: 6.1.0
 4 | 
 5 | experimental:
 6 |   notify:
 7 |     branches:
 8 |       only:
 9 |         - master
10 | 


--------------------------------------------------------------------------------
/src/app/data/pieData.csv:
--------------------------------------------------------------------------------
1 | age,population
2 | 5,2704659
3 | 5-13,4499890
4 | 14-17,2159981
5 | 18-24,3853788
6 | 25-44,14106543
7 | 45-64,8819342
8 | ≥65,612463
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .tmp
 3 | .sass-cache
 4 | app/components
 5 | .sublime-*
 6 | typings
 7 | npm-debug.log
 8 | dist
 9 | .idea/
10 | *.ngfactory.ts
11 | *.ngsummary.json
12 | 


--------------------------------------------------------------------------------
/test/sanity-test.spec.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   it,
 3 |   inject,
 4 |   injectAsync,
 5 |   beforeEachProviders,
 6 | } from '@angular/core/testing';
 7 | 
 8 | describe('sanity checks', () => {
 9 |   it('should also be able to test', () => {
10 |     expect(true).toBe(true);
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | <a name="1.0.0-rc.9"></a>
 2 | # [1.0.0-rc.9](https://github.com/angular/angular/compare/921e8dcca...1.0.0-rc.9) (2016-11-07)
 3 | 
 4 | ### Features
 5 | 
 6 | **** Add the gear style pie chart
 7 | 
 8 | ### Other
 9 | 
10 | * Upgrade to latest version of Angular 2 (2.1.2)
11 | * Upgrade to Webpack 2
12 | 


--------------------------------------------------------------------------------
/test/injector.spec.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   it,
 3 |   inject,
 4 |   injectAsync,
 5 |   beforeEachProviders,
 6 | } from '@angular/core/testing';
 7 | import {APP_ID} from '@angular/core';
 8 | 
 9 | 
10 | describe('default test injector', () => {
11 |   it('should provide default id', inject([APP_ID], (id) => {
12 |     expect(id).toBe('a');
13 |   }));
14 | });
15 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/chart.spec.ts:
--------------------------------------------------------------------------------
1 | describe('D3ChartDirective', () => {
2 |   // CircleCI requires at least one test to be run to show that there are tests
3 |   // Until this project has some tests, this is a placeholder test that will always be true
4 |   // Which kind of renders running it on Circle pretty useless here, but still!
5 |   it('should be true', () => {
6 |     expect(true).toBe(true);
7 |   });
8 | });
9 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule }      from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | 
 4 | import { AppComponent }  from './app.component';
 5 | 
 6 | import {D3Module} from '../angularD3';
 7 | 
 8 | @NgModule({
 9 |   imports:      [ BrowserModule, D3Module ],
10 |   declarations: [ AppComponent ],
11 |   bootstrap:    [ AppComponent ]
12 | })
13 | export class AppModule { }
14 | 


--------------------------------------------------------------------------------
/typedoc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "mode": "modules",
 3 |   "out": "doc",
 4 |   "theme": "default",
 5 |   "ignoreCompilerErrors": "true",
 6 |   "experimentalDecorators": "true",
 7 |   "emitDecoratorMetadata": "true",
 8 |   "target": "ES5",
 9 |   "moduleResolution": "node",
10 |   "preserveConstEnums": "true",
11 |   "stripInternal": "true",
12 |   "suppressExcessPropertyErrors": "true",
13 |   "suppressImplicitAnyIndexErrors": "true",
14 |   "module": "commonjs"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/bootstrap.ts:
--------------------------------------------------------------------------------
 1 | import 'script-loader!jquery/dist/jquery.js'
 2 | import 'bootstrap-loader';
 3 | 
 4 | import 'core-js/es7/reflect';
 5 | import 'web-animations-js';
 6 | 
 7 | import 'zone.js/dist/zone';
 8 | import 'zone.js/dist/long-stack-trace-zone';
 9 | 
10 | import './styles/styles.scss';
11 | 
12 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
13 | import { AppModule } from './app/app.module';
14 | platformBrowserDynamic().bootstrapModule(AppModule);
15 | 


--------------------------------------------------------------------------------
/src/app/data/gearData.csv:
--------------------------------------------------------------------------------
1 | innerR,outerR,weight,innerLR,outerLR,innerL,outerL
2 | 0.33  ,  1.30,     3,   1.15,       ,    1%,areallyreallylongnamewithverylittlewieght
3 | 0.10  ,      ,     9,       ,       ,    9%,another thing
4 | 0.13  ,  0.88,    10,       ,       ,   10%,woof
5 | 0.15  ,  0.85,    12,       ,       ,   13%,meow
6 | 0.20  ,  0.93,    19,       ,       ,   20%,crazy thing
7 | 0.15  ,  1.10,     7,       ,       ,    7%,one thing
8 | 0.25  ,  0.80,    40,       ,       ,   40%,the big thing


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "es2015",
 5 |     "moduleResolution": "node",
 6 |     "sourceMap": true,
 7 |     "inlineSources": true,
 8 |     "types": [],
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "removeComments": true,
12 |     "noImplicitAny": false,
13 |     "lib": ["es6", "dom"]
14 |   },
15 |   "files": [
16 |     "src/bootstrap.ts",
17 |     "src/angularD3/index.ts"
18 |   ],
19 |   "compileOnSave": false
20 | }
21 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "es2015",
 5 |     "moduleResolution": "node",
 6 |     "sourceMap": true,
 7 |     "inlineSources": true,
 8 |     "types": [],
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "removeComments": true,
12 |     "noImplicitAny": false,
13 |     "declaration": true,
14 |     "outDir": "./dist",
15 |     "lib": ["es6", "dom"],
16 |     "skipLibCheck": true
17 |   },
18 |   "files": [
19 |     "src/angularD3/index.ts"
20 |   ],
21 |   "compileOnSave": false
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/data/data.csv:
--------------------------------------------------------------------------------
 1 | date,savings,total,optimal
 2 |   2001-01-01,     10,   10,     50
 3 |   2001-02-01,     90,  100,    100
 4 |   2001-03-01,     30,  130,    150
 5 |   2001-04-01,     45,  175,    200
 6 |   2001-05-01,     50,  225,    250
 7 |   2001-06-01,     75,  300,    300
 8 |   2001-07-01,     10,  310,    350
 9 |   2001-08-01,     30,  340,    400
10 |   2001-09-01,     65,  405,    450
11 |   2001-10-01,    100,  505,    500
12 |   2001-11-01,    110,  615,    550
13 |   2001-12-01,     80,  695,    600
14 |   2002-01-01,     35,  730,    650
15 |   2002-02-01,     70,  800,    700
16 |   2002-03-01,    150,  950,    750
17 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angularD3",
 3 |   "version": "0.0.35",
 4 |   "main": "dist/angularD3.js",
 5 |   "ignore": [
 6 |     ".*",
 7 |     "app",
 8 |     "node_modules",
 9 |     "bower_components",
10 |     "test",
11 |     "tests"
12 |   ],
13 |   "dependencies": {
14 |     "d3": "~3.5",
15 |     "angular2": "2.0.0-beta.0"
16 |   ,
17 |   "homepage": "http://wealthbar.github.io/angular-d3",
18 |   "authors": [
19 |     "Chris Nicola <chnicola@gmail.com>"
20 |   ],
21 |   "description": "AngularJS chart directives and other integrations for D3.js",
22 |   "keywords": [
23 |     "AngularJS",
24 |     "D3",
25 |     "D3.js",
26 |     "charts"
27 |   ],
28 |   "license": "MIT"
29 | }
30 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Guidelines for Contributing
 2 | 
 3 | ## Getting Started
 4 | 
 5 | We use Grunt to build and test Angular-D3 and Bower to manage dependencies. You
 6 | can get started by first cloning the repository (fork it if you want to submit
 7 | pull-requests). The follow these steps:
 8 | 
 9 | ```sh
10 | # Setup
11 | npm install
12 | 
13 | # Running the demo
14 | npm start
15 | 
16 | # Building the NPM package (output to /dist)
17 | npm run dist
18 | ```
19 | 
20 | ## Submitting A Pull Request
21 | 
22 | We don't have any strict requirements on pull requests at this point. This
23 | policy will probably change as we approach a 1.0 version. For now we welcome
24 | any pull requests, particularly those adding new directives for chart elements
25 | or features.
26 | 
27 | And last but not least, thanks for contributing!
28 | 


--------------------------------------------------------------------------------
/src/angularD3/d3.ts:
--------------------------------------------------------------------------------
 1 | import { selection } from 'd3-selection';
 2 | import { scales } from 'd3-scale';
 3 | const format = require('d3-format');
 4 | const interpolate = require('d3-interpolate');
 5 | 
 6 | export default {
 7 |   arc: shape.arc,
 8 |   area: shape.area,
 9 |   brush: brush.brush,
10 |   brushX: brush.brushX,
11 |   brushY: brush.brushY,
12 |   extent: array.extent,
13 |   format: format.format,
14 |   interpolate: interpolate.interpolate,
15 |   line: shape.line,
16 |   max: array.max,
17 |   min: array.min,
18 |   mouse: selection.mouse,
19 |   pie: shape.pie,
20 |   range: array.range,
21 |   rgb: color.rgb,
22 |   select: selection.select,
23 |   selectAll: selection.selectAll,
24 |   scaleBand: scales.scaleBand,
25 |   scaleLinear: scales.scaleLinear,
26 |   scaleOrdinal: scales.scaleOrdinal,
27 |   scalePoint: scales.scalePoint,
28 |   scaleQuantile: scales.scaleQuantile,
29 |   scaleTime: scales.scaleTime,
30 |   treemap: shape.treemap
31 | };
32 | 


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @AngularClass
 2 | 
 3 | exports.config = {
 4 |   baseUrl: 'http://localhost:3000/',
 5 | 
 6 |   specs: [
 7 |     'test/**/*.e2e.js'
 8 |   ],
 9 |   exclude: [],
10 | 
11 |   framework: 'jasmine',
12 | 
13 |   allScriptsTimeout: 110000,
14 | 
15 |   jasmineNodeOpts: {
16 |     showTiming: true,
17 |     showColors: true,
18 |     isVerbose: false,
19 |     includeStackTrace: false,
20 |     defaultTimeoutInterval: 400000
21 |   },
22 |   directConnect: true,
23 | 
24 |   capabilities: {
25 |     'browserName': 'chrome',
26 |     'chromeOptions': {
27 |       'args': ['show-fps-counter=true']
28 |     }
29 |   },
30 | 
31 |   onPrepare: function() {
32 |     browser.ignoreSynchronization = true;
33 |   },
34 | 
35 | 
36 |   /**
37 |    * Angular 2 configuration
38 |    *
39 |    * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
40 |    * `rootEl`
41 |    *
42 |    */
43 |    useAllAngular2AppRoots: true
44 | };
45 | 


--------------------------------------------------------------------------------
/test/app/app.e2e.js:
--------------------------------------------------------------------------------
 1 |  /*
 2 |   * TODO: ES5 for now until I make a webpack plugin for protractor
 3 |   */
 4 | describe('App', function() {
 5 | 
 6 |   //beforeEach(function() {
 7 |     //browser.get('/');
 8 |   //});
 9 | 
10 | 
11 |   //it('should have a title', function() {
12 |     //var subject = browser.getTitle();
13 |     //var result  = 'Angular2 Webpack Starter by @gdi2990 from @AngularClass';
14 |     //expect(subject).toEqual(result);
15 |   //});
16 | 
17 |   //it('should have <header>', function() {
18 |     //var subject = element(by.deepCss('app /deep/ header')).isPresent();
19 |     //var result  = true;
20 |     //expect(subject).toEqual(result);
21 |   //});
22 | 
23 |   //it('should have <main>', function() {
24 |     //var subject = element(by.deepCss('app /deep/ main')).isPresent();
25 |     //var result  = true;
26 |     //expect(subject).toEqual(result);
27 |   //});
28 | 
29 |   //it('should have <footer>', function() {
30 |     //var subject = element(by.deepCss('app /deep/ footer')).getText();
31 |     //var result  = 'WebPack Angular 2 Starter by @AngularClass';
32 |     //expect(subject).toEqual(result);
33 |   //});
34 | 
35 | });
36 | 


--------------------------------------------------------------------------------
/MIT-LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 WealthBar Financial Services inc.
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "class-name": true,
 4 |     "curly": false,
 5 |     "eofline": true,
 6 |     "indent": "spaces",
 7 |     "max-line-length": [
 8 |       true,
 9 |       100
10 |     ],
11 |     "member-ordering": [
12 |       true,
13 |       "public-before-private",
14 |       "static-before-instance",
15 |       "variables-before-functions"
16 |     ],
17 |     "no-arg": true,
18 |     "no-construct": true,
19 |     "no-duplicate-key": true,
20 |     "no-duplicate-variable": true,
21 |     "no-empty": true,
22 |     "no-eval": true,
23 |     "no-trailing-whitespace": true,
24 |     "no-unused-expression": true,
25 |     "no-unused-variable": false,
26 |     "no-unreachable": true,
27 |     "no-use-before-declare": true,
28 |     "one-line": [
29 |       true,
30 |       "check-open-brace",
31 |       "check-catch",
32 |       "check-else",
33 |       "check-whitespace"
34 |     ],
35 |     "quotemark": false,
36 |     "semicolon": false,
37 |     "trailing-comma": false,
38 |     "triple-equals": [
39 |       true,
40 |       "allow-null-check"
41 |     ],
42 |     "variable-name": false,
43 |     "whitespace": [
44 |       true,
45 |       "check-branch",
46 |       "check-decl",
47 |       "check-operator",
48 |       "check-separator",
49 |       "check-type"
50 |     ]
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/angularD3/index.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { D3ArcDirective } from './directives/arc';
 3 | import { D3AreaDirective } from './directives/area';
 4 | import { D3BarsDirective } from './directives/bars';
 5 | import { D3ChartDirective, D3MarginDirective, D3Margin } from './directives/chart';
 6 | import { D3DataDirective } from './directives/data';
 7 | import { D3LineDirective } from './directives/line';
 8 | import { D3PieDirective } from './directives/pie';
 9 | import { D3GearDirective } from './directives/gear';
10 | import { D3AxisDirective } from './directives/axis';
11 | import { D3AxisLabelDirective } from './directives/axis-label';
12 | 
13 | export const D3_DIRECTIVES = [
14 |   D3ArcDirective,
15 |   D3AreaDirective,
16 |   D3AxisDirective,
17 |   D3BarsDirective,
18 |   D3ChartDirective,
19 |   D3DataDirective,
20 |   D3LineDirective,
21 |   D3MarginDirective,
22 |   D3PieDirective,
23 |   D3GearDirective,
24 |   D3AxisLabelDirective,
25 | ];
26 | 
27 | export {
28 |   D3ArcDirective,
29 |   D3AreaDirective,
30 |   D3AxisDirective,
31 |   D3BarsDirective,
32 |   D3ChartDirective,
33 |   D3DataDirective,
34 |   D3LineDirective,
35 |   D3Margin,
36 |   D3MarginDirective,
37 |   D3PieDirective,
38 |   D3GearDirective,
39 |   D3AxisLabelDirective,
40 | };
41 | 
42 | @NgModule({
43 |   declarations: [
44 |     ...D3_DIRECTIVES
45 |   ],
46 |   exports: [
47 |     ...D3_DIRECTIVES
48 |   ]
49 | })
50 | export class D3Module {
51 | }
52 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/line.ts:
--------------------------------------------------------------------------------
 1 | import { Input, Optional, Directive, ElementRef } from '@angular/core';
 2 | import { D3ChartDirective, D3Element, D3Scale, D3MarginDirective } from './chart';
 3 | import * as d3 from 'd3';
 4 | 
 5 | @Directive({
 6 |   selector: '[d3-line]'
 7 | })
 8 | export class D3LineDirective extends D3Element {
 9 |   @Input() name: string;
10 |   @Input() stroke: string;
11 |   @Input('x') xDataName: any = 0;
12 |   @Input('y') yDataName: any = 1;
13 |   @Input('xscale') xScaleName: string;
14 |   @Input('yscale') yScaleName: string;
15 | 
16 |   private _xScale: D3Scale;
17 |   private _yScale: D3Scale;
18 |   private _line;
19 |   private _linePath;
20 | 
21 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
22 |     super(chart, el, margin);
23 |     this._linePath = this.element.append('path');
24 |   }
25 | 
26 |   redraw() {
27 |     const data = this.data;
28 |     this._line = this._line || d3.svg.line().x((d) => this.x(d)).y((d) => this.y(d));
29 | 
30 |     this._linePath.attr('class', `line line-${this.name || this.yDataName}`)
31 |       .style('fill', 'none')
32 |       .style('stroke', this.stroke);
33 | 
34 |     this._linePath.datum(data).transition().duration(500).attr('d', this._line);
35 |   }
36 | 
37 |   private get xScale() {
38 |     return (this._xScale = this._xScale
39 |       || this.getScale(this.xScaleName || this.xDataName)).scale;
40 |   }
41 | 
42 |   private get yScale() {
43 |     return (this._yScale = this._yScale
44 |       || this.getScale(this.yScaleName || this.yDataName)).scale;
45 |   }
46 | 
47 |   private x(d) {
48 |     return this.xScale(d[this.xDataName]);
49 |   }
50 | 
51 |   private y(d) {
52 |     return this.yScale(d[this.yDataName]);
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/arc.ts:
--------------------------------------------------------------------------------
 1 | import { Input, Optional, Directive, ElementRef } from '@angular/core';
 2 | import { D3ChartDirective, D3Element, D3MarginDirective } from './chart';
 3 | import { D3PieBase } from './pie';
 4 | import * as d3 from 'd3';
 5 | 
 6 | @Directive({
 7 |   selector: '[d3-arc]'
 8 | })
 9 | export class D3ArcDirective extends D3PieBase {
10 |   @Input() name: string;
11 |   @Input() transition = 'ease';
12 |   @Input() duration = 500;
13 |   @Input() value = 'value';
14 |   @Input() label = 'label';
15 |   @Input() dy = '0.35em';
16 |   @Input('text-anchor') textAnchor = 'middle';
17 |   @Input('inner-radius') innerRadius = 0.6;
18 |   @Input('label-radius') labelRadius = 0;
19 | 
20 |   private _center;
21 |   private _arc;
22 |   private _label;
23 | 
24 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
25 |     super(chart, el, margin);
26 |     this._center = d3.select(el.nativeElement).attr('class', 'arc');
27 |     this._arc = this._center.append('path').attr('class', 'arc');
28 |     this._label = this._center.append('text').attr('class', 'arc-label');
29 |   }
30 | 
31 |   redraw() {
32 |     super.redraw();
33 |     const data = this.data;
34 |     const radius = this.radius;
35 |     const arc = this.createArc(radius);
36 |     const arcTween = this.createArcTween(arc, 0);
37 | 
38 |     this._center.attr('transform', `translate(${radius},${radius})`);
39 | 
40 |     this._label.attr('dy', this.dy).style('text-anchor', 'middle').text(data[this.label]);
41 | 
42 |     this._arc.datum(data[this.value])
43 |       .transition().ease(this.transition).duration(this.duration)
44 |       .attrTween('d', arcTween);
45 |   }
46 | 
47 |   createArc(radius: number) {
48 |      return super.createArc(radius).startAngle(0)
49 |       .endAngle(d => (d / 100) * 2 * Math.PI);
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | // Webpack Plugins
 5 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 6 | 
 7 | /*
 8 |  * Config
 9 |  */
10 | module.exports = {
11 |   entry: {
12 |     'app': './src/bootstrap.ts', // our angular app
13 |   },
14 | 
15 | 
16 |   output: {
17 |     path: root('docs'),
18 |     filename: '[name].[hash].js',
19 |     chunkFilename: '[id].[hash].chunk.js'
20 |   },
21 | 
22 |   devServer: {
23 |     stats: 'minimal',
24 |     port: 4000,
25 |     headers: { 'Access-Control-Allow-Origin': '*' },
26 |   },
27 | 
28 |   resolve: {
29 |     modules: ["src", "node_modules"],
30 |     extensions: ['.js', '.ts', '.html', '.css', '.scss', '.json'],
31 |   },
32 | 
33 |   module: {
34 |     exprContextCritical: false,
35 |     loaders: [
36 |       // Support for .ts files.
37 |       {
38 |         test: /\.ts$/,
39 |         loader: 'awesome-typescript-loader',
40 |         exclude: [/\.(spec|e2e)\.ts$/]
41 |       },
42 | 
43 |       // Support for *.json files.
44 |       { test: /\.json$/, loader: 'json-loader' },
45 | 
46 |       // Support for CSS as raw text
47 |       { test: /\.css$/, loader: 'style-loader!css-loader' },
48 |       { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' },
49 | 
50 |       // support for .html as raw text
51 |       { test: /\.html$/, loader: 'raw-loader' },
52 |       { test: /\.(ttf|svg|png|gif|jpg|woff|woff2|eot|csv)$/, loader: "file-loader" },
53 |     ],
54 |   },
55 | 
56 |   plugins: [
57 |     new webpack.ProvidePlugin({
58 |       $: "jquery",
59 |       jQuery: "jquery",
60 |       "window.jQuery": "jquery",
61 |     }),
62 |     new HtmlWebpackPlugin({ template: 'src/index.html' }),
63 |   ],
64 | };
65 | 
66 | // Helper functions
67 | 
68 | function root(args) {
69 |   args = Array.prototype.slice.call(arguments, 0);
70 |   return path.join.apply(path, [__dirname].concat(args));
71 | }
72 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |     <title>Angular D3</title>
 7 |     <meta name="description" content="A library for building charts and graphs with D3 and Angular.JS">
 8 |     <meta name="viewport" content="width=device-width">
 9 |     <script>document.write('<base href="' + document.location + '" />');</script>
10 |   </head>
11 |   <body data-spy="scroll" data-target="#side-nav">
12 |     <div class="container">
13 |       <div class="row">
14 |         <div class="col-md-9 col-md-offset-3">
15 |           <h1>Angular D3</h1>
16 |           <p class="lead">A set of basic directives that support declarative charts and graphs powered by D3</p>
17 |           <p> <a href="https://github.com/wealthbar/angular-d3">Get the source on Github</a> </p>
18 |         </div>
19 |       </div>
20 |       <div class="row">
21 |         <div class="col-md-3">
22 |           <div id="side-nav"  data-spy="affix" data-offset-top="160">
23 |             <ul class="nav nav-pills nav-stacked">
24 |               <li>
25 |                 <a href="#graphs" target="_self">Basic Graphs</a>
26 |               </li>
27 |               <li>
28 |                 <a href="#stacked" target="_self">Stacked Area</a>
29 |               </li>
30 |               <li>
31 |                 <a href="#pie-charts" target="_self">Pie Charts</a>
32 |               </li>
33 |               <li>
34 |                 <a href="#gear-chart" target="_self">Gear Chart</a>
35 |               </li>
36 |               <li>
37 |                 <a href="#arc-charts" target="_self">Arc Charts</a>
38 |               </li>
39 |             </ul>
40 |           </div>
41 |         </div>
42 |         <div class="col-md-9">
43 |           <app></app>
44 |         </div>
45 |       </div>
46 |       <footer class="row">
47 |       </footer>
48 |     </div>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/bars.ts:
--------------------------------------------------------------------------------
 1 | import { Input, Optional, Directive, ElementRef } from '@angular/core';
 2 | import { D3ChartDirective, D3Element, D3Scale, D3MarginDirective } from './chart';
 3 | import * as d3 from 'd3';
 4 | 
 5 | @Directive({
 6 |   selector: '[d3-bars]'
 7 | })
 8 | export class D3BarsDirective extends D3Element {
 9 |   @Input() name: string;
10 |   @Input('width') barWidth = 15;
11 |   @Input('x') xDataName: string;
12 |   @Input('y') yDataName: string;
13 |   @Input('xscale') xScaleName: string;
14 |   @Input('yscale') yScaleName: string;
15 | 
16 |   private _barsElement;
17 |   private _xScale: D3Scale;
18 |   private _yScale: D3Scale;
19 | 
20 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
21 |     super(chart, el, margin);
22 |     this._barsElement = this.element.attr('class', 'bars');
23 |   }
24 | 
25 |   redraw() {
26 |     const data = this.data;
27 |     const bars = this._barsElement.selectAll('rect.bar').data(data);
28 | 
29 |     bars.exit().transition().duration(500)
30 |       .attr('y', () => this.height)
31 |       .attr('height', 0)
32 |       .remove();
33 | 
34 |     bars.transition().duration(500)
35 |       .attr('x', (d: any) => this.x(d[this.xDataName]) - this.barWidth / 2)
36 |       .attr('y', (d: any) => this.y(d[this.yDataName]))
37 |       .attr('height', (d: any) => this.height - this.y(d[this.yDataName]))
38 |       .attr('width', this.barWidth);
39 | 
40 |     bars.enter()
41 |       .append('rect')
42 |       .attr('class', (d, i) => `bar bar-${i}`)
43 |       .attr('x', (d: any) => this.x(d[this.xDataName]) - this.barWidth / 2)
44 |       .attr('y', () => this.height)
45 |       .attr('height', 0)
46 |       .attr('width', this.barWidth)
47 |       .transition().duration(500)
48 |       .attr('y', (d: any) => this.y(d[this.yDataName]))
49 |       .attr('height', (d: any) => this.height - this.y(d[this.yDataName]));
50 |   }
51 | 
52 |   private get x() {
53 |     return (this._xScale = this._xScale
54 |       || this.getScale(this.xScaleName || this.xDataName)).scale;
55 |   }
56 | 
57 |   private get y() {
58 |     return (this._yScale = this._yScale
59 |       || this.getScale(this.yScaleName || this.yDataName)).scale;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/styles/styles.scss:
--------------------------------------------------------------------------------
  1 | $blue: #098aae;
  2 | $violet: #684684;
  3 | $green: #00a79d;
  4 | $orange: #eda646;
  5 | $black: #222222;
  6 | 
  7 | body {
  8 |   margin-top: 40px;
  9 | }
 10 | 
 11 | section {
 12 |   margin-bottom: 40px;
 13 | }
 14 | 
 15 | svg {
 16 |   height: 400px;
 17 |   width: 100%;
 18 | }
 19 | 
 20 | #arc-charts, #pie-charts {
 21 |   svg { height: auto; }
 22 | }
 23 | 
 24 | footer {
 25 |   min-height: 500px;
 26 | }
 27 | 
 28 | #side-nav.affix {
 29 |   width: 100%;
 30 |   top: 40px;
 31 |   margin: 0 auto;
 32 |   @media (min-width: 768px) {
 33 |     max-width: 758px;
 34 |   }
 35 |   @media (min-width: 992px) {
 36 |     max-width: 970px;
 37 |   }
 38 |   @media (min-width: 1200px) {
 39 |     max-width: 1200px;
 40 |   }
 41 |   ul {
 42 |     width: 25%;
 43 |     padding: 0 15px;
 44 |     margin-left: -15px;
 45 |     z-index: 2;
 46 |   }
 47 | }
 48 | 
 49 | #graphs {
 50 |   .d3-chart .area {
 51 |     fill: url(#gradient);
 52 |   }
 53 | }
 54 | @-moz-document url-prefix() {
 55 |   #graphs .d3-chart .area {
 56 |     fill: url(/#gradient);
 57 |   }
 58 | }
 59 | 
 60 | /* Axis */
 61 | 
 62 | .d3-chart .axis {
 63 |   line { fill: none; stroke-width: 1px; stroke: $black; opacity: 0.5; }
 64 |   path { fill: none; stroke-width: 1px; stroke: $black; opacity: 0.5; }
 65 |   text { fill: $black; }
 66 | }
 67 | 
 68 | .d3-chart .axis-grid {
 69 |   line { fill: none; stroke-width: 1px; stroke: $black; opacity: 0.5; }
 70 |   text { display: none; }
 71 | }
 72 | 
 73 | /* Area Chart */
 74 | 
 75 | .d3-chart .area {
 76 |   fill: $blue;
 77 |   stroke-width: 0px;
 78 |   stroke: $black;
 79 | }
 80 | 
 81 | /* Line Chart */
 82 | 
 83 | .d3-chart .line {
 84 |   fill: none;
 85 |   stroke-width: 1.5px;
 86 |   stroke: $black;
 87 | }
 88 | 
 89 | /* Bar Chart */
 90 | 
 91 | .d3-chart .bar {
 92 |   fill: $orange;
 93 |   stroke-width: 0px;
 94 |   stroke: $black;
 95 |   opacity: 0.7;
 96 | }
 97 | 
 98 | /* Pie Chart */
 99 | 
100 | .d3-chart {
101 |   .pie.pie-0 { fill: #98abc5; }
102 |   .pie.pie-1 { fill: #8a89a6; }
103 |   .pie.pie-2 { fill: #7b6888; }
104 |   .pie.pie-3 { fill: #6b486b; }
105 |   .pie.pie-4 { fill: #a05d56; }
106 |   .pie.pie-5 { fill: #d0743c; }
107 |   .pie.pie-6 { fill: #ff8c00; }
108 | }
109 | 
110 | /* Simple Arcs */
111 | 
112 | .d3-chart path.arc {
113 |   fill: #98abc5;
114 | }
115 | 
116 | .simple-arc1 .d3-chart .arc {
117 |   fill: #98abc5;
118 | }
119 | 
120 | .simple-arc2 .d3-chart .arc {
121 |   fill: #d0743c;
122 | }
123 | 
124 | .area.area-savings {
125 |   fill: #d0743c;
126 | }
127 | 
128 | .area.area-optimal {
129 |   fill: #98abc5;
130 | }
131 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | declare const require;
 2 | /*
 3 |  * Angular 2 decorators and services
 4 |  */
 5 | import {Component} from '@angular/core';
 6 | const template = require('./app.html');
 7 | const data = require('./data/data.csv');
 8 | const pieData = require('./data/pieData.csv');
 9 | const gearData = require('./data/gearData.csv');
10 | 
11 | /*
12 |  * App Component
13 |  * Top Level Component
14 |  */
15 | @Component({
16 |   selector: 'app', // <app></app>
17 |   template: template,
18 | })
19 | export class AppComponent {
20 |   dataUrl: string = data
21 |   pieDataUrl: string = pieData
22 |   gearDataUrl: string = gearData
23 |   line: {}[]
24 |   pie: {}[]
25 |   gear: {}[]
26 |   margin = { top: 40, right: 60, bottom: 40, left: 60 }
27 |   columns = ['savings', 'total', 'optimal']
28 |   tickValues = [200, 400, 600, 800]
29 | 
30 |   arcs = {
31 |     arc1: { value: 60, label: '60%' },
32 |     arc2: { value: 90, label: '90%' },
33 |   }
34 | 
35 |   gradient = [
36 |     { offset: '0%', color: '#098aae', opacity: 0.6 },
37 |     { offset: '100%', color: '#684684', opacity: 0.9 },
38 |   ]
39 | 
40 |   customTimeFormat = [
41 |     ["%a %d", (d) => { return d.getDay() && d.getDate() !== 1 }],
42 |     ["%b %d", (d) => { return d.getDate() !== 1 }],
43 |     ["%b", (d) => { return d.getMonth() }],
44 |     ["%Y", () => { return true }],
45 |   ]
46 | 
47 |   constructor() {
48 |     setInterval(() => {
49 |       var val = Math.random() * 100
50 |       this.arcs.arc1 = { value: val, label: `${val.toFixed(0)}%` }
51 |       val = Math.random() * 100
52 |       this.arcs.arc2 = { value: val, label: `${val.toFixed(0)}%` }
53 |       var newPie = this.pie.slice()
54 |       newPie.forEach((v: any) => {
55 |         if (v.population < 1000000) {
56 |           v.population *= 1.5
57 |         } else {
58 |           v.population *= 2 - 1.6 * Math.random()
59 |         }
60 |       })
61 |       this.pie = newPie
62 |     } , 1000 * 5)
63 | 
64 |     setInterval(() => {
65 |       if (this.columns.length === 3) {
66 |         this.columns = ['savings', 'optimal']
67 |       } else {
68 |         this.columns = ['savings', 'optimal', 'total']
69 |       }
70 |     } , 1000 * 5)
71 |   }
72 | 
73 |   parseValues(row) {
74 |     for (var key in row) {
75 |       var value = row[key].trim()
76 |       if (key === 'date') {
77 |         row[key] = new Date(value)
78 |       } else if (!isNaN(parseFloat(value)) && isFinite(value)) {
79 |         row[key] = +value
80 |       } else {
81 |         row[key] = value;
82 |       }
83 |     }
84 |     return row
85 |   }
86 | 
87 |   stackDomain(data) {
88 |     return data.map((value) => {
89 |       return +value.savings + value.total + value.optimal
90 |     })
91 |   }
92 | 
93 |   log(data) { console.log("log", data) }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/data.ts:
--------------------------------------------------------------------------------
  1 | import { Directive, Input, Output, EventEmitter, AfterContentInit } from '@angular/core';
  2 | import * as d3 from 'd3';
  3 | 
  4 | @Directive({
  5 |   selector: 'd3-data'
  6 | })
  7 | export class D3DataDirective implements AfterContentInit {
  8 |   @Input() accessor: (row: {[key: string]: string }) => {};
  9 |   @Input() callback: (rows: any[]) => void;
 10 |   @Output() data = new EventEmitter();
 11 | 
 12 |   private _d3Data: D3DataService;
 13 |   private _src: string;
 14 |   private _initialized = false;
 15 | 
 16 |   constructor() {
 17 |     this._d3Data = new D3DataService();
 18 |   }
 19 | 
 20 |   defaultFilter(row: {}): {} {
 21 |     for (const key in row) {
 22 |       const value = row[key];
 23 | 
 24 |       if (!isNaN(parseFloat(value)) && isFinite(value)) {
 25 |         row[key] = +value.trim();
 26 |       }
 27 | 
 28 |       return row;
 29 |     }
 30 |   }
 31 | 
 32 |   @Input()
 33 |   get src(): string {
 34 |     return this._src;
 35 |   }
 36 |   set src(value: string) {
 37 |     this._src = value;
 38 | 
 39 |     if (this._initialized && this._src && this.src.length > 0) {
 40 |       this.fetch();
 41 |     }
 42 |   }
 43 | 
 44 |   fetch() {
 45 |     if (!this._src) {
 46 |       throw new Error('No src url given');
 47 |     }
 48 | 
 49 |     this._d3Data.csv(this._src, this.accessor || this.defaultFilter, this.callback)
 50 |       .then(rows => {
 51 |         this.data.next({ rows: rows });
 52 |       })
 53 |       .catch(() => {
 54 |         throw new Error('Error loading CSV via D3');
 55 |       });
 56 |   }
 57 | 
 58 |   ngAfterContentInit() {
 59 |     this._initialized = true;
 60 |     this.fetch();
 61 |   }
 62 | }
 63 | 
 64 | export interface Cache {
 65 |   get(key: string);
 66 |   put(key: string, value: any);
 67 | }
 68 | 
 69 | export class DefaultCache {
 70 |   store = {};
 71 | 
 72 |   get(key: string) {
 73 |     return this.store[key];
 74 |   }
 75 | 
 76 |   put(key: string, value: any) {
 77 |     this.store[key] = value;
 78 |   }
 79 | }
 80 | 
 81 | export class D3DataService {
 82 |   cache: Cache;
 83 | 
 84 |   constructor() {
 85 |     this.cache = new DefaultCache();
 86 |   }
 87 | 
 88 |   csv(src, accessor?: (row: {[key: string]: string }) => {}, callback?: (rows: any[]) => void) {
 89 |     return new Promise((resolve, reject) => {
 90 |       const cached = this.cache.get(src);
 91 | 
 92 |       if (cached) {
 93 |         if (callback) {
 94 |           callback(cached);
 95 |         }
 96 | 
 97 |         resolve(cached);
 98 |       }
 99 | 
100 |       d3.csv(src, accessor, (rows) => {
101 |         if (callback) {
102 |           callback(rows);
103 |         }
104 | 
105 |         if (rows) {
106 |           this.cache.put(src, rows);
107 |           resolve(rows);
108 |         } else {
109 |           reject();
110 |         }
111 |       });
112 |     });
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/axis-label.ts:
--------------------------------------------------------------------------------
 1 | import { Input, Optional, Directive, ElementRef } from '@angular/core';
 2 | import { D3ChartDirective, D3Element, D3MarginDirective } from './chart';
 3 | 
 4 | @Directive({
 5 |   selector: '[d3-axis-label]'
 6 | })
 7 | export class D3AxisLabelDirective extends D3Element {
 8 |   @Input() value: string;
 9 |   @Input() axis: string;
10 |   @Input() position: string = 'left';
11 |   @Input('x-padding') xPadding: string = '0';
12 |   @Input('y-padding') yPadding: string = '0';
13 | 
14 |   private _scale: any;
15 |   private _textElement;
16 |   private _xPadding: number;
17 |   private _yPadding: number;
18 |   private _label: string;
19 | 
20 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
21 |     super(chart, el, margin);
22 |     chart.addElement(this);
23 |   }
24 | 
25 |   redraw() {
26 |     this.updateLabel();
27 |   }
28 | 
29 |   @Input()
30 |   get label(): string {
31 |     return this._label;
32 |   }
33 | 
34 |   set label(value: string) {
35 |     this._label = value;
36 |     if (this._textElement) {
37 |       this._textElement.text(this._label);
38 |     }
39 |   }
40 | 
41 |   private updateLabel() {
42 |     if (!this._textElement) {
43 |       this._textElement = this.element.append('text').attr('class', 'axis-label');
44 |       this._textElement.text(this.label);
45 |     }
46 |     if (!this._scale) {
47 |       this._scale = this.getScale(this.axis);
48 |     }
49 |     if (!this._xPadding) {
50 |       this._xPadding = parseFloat(this.xPadding);
51 |     }
52 |     if (!this._yPadding) {
53 |       this._yPadding = parseFloat(this.yPadding);
54 |     }
55 |     let isVertical = this._scale.isVertical();
56 | 
57 |     let x = this._xPadding;
58 |     let y = this._yPadding;
59 |     let scaledValue = this._scale.scale(this.value);
60 | 
61 |     if (isVertical) {
62 |       this._textElement
63 |           .attr('transform', 'rotate(-90)');
64 |       if (this.position === 'middle') {
65 |         x += -this.height / 2;
66 |         y += scaledValue;
67 |       } else if (this._scale.orientation === 'top' && this.position === 'start'
68 |           || this._scale.orientation === 'bottom' && this.position === 'end') {
69 |         this._textElement
70 |             .attr('style', 'text-anchor: end');
71 |         y += scaledValue;
72 |       } else {
73 |         x += -this.height;
74 |         y += scaledValue;
75 |       }
76 |     } else {
77 |       if (this.position === 'middle') {
78 |         x += this.width / 2;
79 |         y += scaledValue;
80 |       } else if (this._scale.orientation === 'left' && this.position === 'start'
81 |           || this._scale.orientation === 'right' && this.position === 'end') {
82 |         y += scaledValue;
83 |       } else {
84 |         x += this.width;
85 |         y += scaledValue;
86 |         this._textElement.attr('style', 'text-anchor: end');
87 |       }
88 |     }
89 | 
90 |     this._textElement
91 |       .attr('x', x)
92 |       .attr('y', y);
93 |   }
94 | 
95 | }
96 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
  1 | // @AngularClass
  2 | 
  3 | module.exports = function (config) {
  4 |   var _config = {
  5 | 
  6 |     // base path that will be used to resolve all patterns (eg. files, exclude)
  7 |     basePath: '',
  8 | 
  9 | 
 10 |     // frameworks to use
 11 |     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
 12 |     frameworks: ['jasmine'],
 13 | 
 14 | 
 15 |     // list of files / patterns to load in the browser
 16 |     files: [
 17 |       { pattern: 'src/angularD3/**/*.spec.ts', watched: false }
 18 |     ],
 19 | 
 20 | 
 21 |     // list of files to exclude
 22 |     exclude: [
 23 |     ],
 24 | 
 25 | 
 26 |     // preprocess matching files before serving them to the browser
 27 |     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
 28 |     preprocessors: {
 29 |       'test/**/*.spec.ts': ['webpack']
 30 |     },
 31 | 
 32 |     plugins: [
 33 |       'karma-webpack',
 34 |       'karma-jasmine',
 35 |       'karma-sourcemap-loader',
 36 |       'karma-phantomjs-launcher',
 37 |       'karma-coverage',
 38 |       'karma-webpack-preprocessor',
 39 |     ],
 40 | 
 41 |     webpackPreprocessor: {
 42 |       configPath: './webpack.config.js'
 43 |     },
 44 | 
 45 |     webpack: {
 46 | 
 47 |       resolve: {
 48 |         cache: false,
 49 |         root: __dirname,
 50 |         extensions: ['', '.ts', '.js', '.json', '.css', '.html'],
 51 |         alias: {
 52 |           'app': 'src/app',
 53 |           'common': 'src/common'
 54 |         }
 55 |       },
 56 |       devtool: 'inline-source-map',
 57 |       module: {
 58 |         loaders: [
 59 |           {
 60 |             test: /\.ts$/,
 61 |             loader: 'ts-loader',
 62 |             query: {
 63 |               'ignoreDiagnostics': [
 64 |                 2403, // 2403 -> Subsequent variable declarations
 65 |                 2300, // 2300 Duplicate identifier
 66 |                 2374, // 2374 -> Duplicate number index signature
 67 |                 2375  // 2375 -> Duplicate string index signature
 68 |               ]
 69 |             },
 70 |             exclude: [/\.e2e\.ts$/, /node_modules/]
 71 |           },
 72 |           { test: /\.json$/, loader: 'json-loader' },
 73 |           { test: /\.html$/, loader: 'raw-loader' },
 74 |           { test: /\.css$/, loader: 'raw-loader' }
 75 |         ]
 76 |       },
 77 |       stats: { colors: true, reasons: true },
 78 |       debug: false,
 79 |       noParse: [
 80 |         /zone\.js\/dist\/zone-microtask\.js/,
 81 |         /zone\.js\/dist\/long-stack-trace-zone\.js/,
 82 |         /zone\.js\/dist\/jasmine-patch\.js/
 83 |       ]
 84 |     },
 85 | 
 86 |     webpackServer: {
 87 |       noInfo: true //please don't spam the console when running in karma!
 88 |     },
 89 | 
 90 | 
 91 |     // test results reporter to use
 92 |     // possible values: 'dots', 'progress'
 93 |     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
 94 |     reporters: ['progress'],
 95 | 
 96 | 
 97 |     // web server port
 98 |     port: 9876,
 99 | 
100 | 
101 |     // enable / disable colors in the output (reporters and logs)
102 |     colors: true,
103 | 
104 | 
105 |     // level of logging
106 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
107 |     logLevel: config.LOG_INFO,
108 | 
109 | 
110 |     // enable / disable watching file and executing tests whenever any file changes
111 |     autoWatch: false,
112 | 
113 | 
114 |     // start these browsers
115 |     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
116 |     browsers: ['PhantomJS'],
117 | 
118 | 
119 |     // Continuous Integration mode
120 |     // if true, Karma captures browsers, runs the tests and exits
121 |     singleRun: true
122 |   };
123 |   config.set(_config);
124 | };
125 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "a2d3",
  3 |   "version": "1.1.1",
  4 |   "description": "AngularJS chart directives and other integrations for D3.js",
  5 |   "authors": [
  6 |     "Chris Nicola <chris.nicola@wealthbar.com>"
  7 |   ],
  8 |   "homepage": "http://wealthbar.github.io/a2d3",
  9 |   "repository": {
 10 |     "type": "git",
 11 |     "url": "https://github.com/wealthbar/a2d3.git"
 12 |   },
 13 |   "bugs": {
 14 |     "url": "https://github.com/wealthbar/a2d3/issues"
 15 |   },
 16 |   "license": "MIT",
 17 |   "main": "dist/index.js",
 18 |   "types": "dist/index.d.ts",
 19 |   "files": [
 20 |     "dist/",
 21 |     "src/angularD3/"
 22 |   ],
 23 |   "scripts": {
 24 |     "clean": "rimraf node_modules && npm cache clean",
 25 |     "clean-install": "npm run clean && npm install",
 26 |     "clean-start": "npm run clean && npm start",
 27 |     "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached",
 28 |     "dist": "ngc -p tsconfig.build.json",
 29 |     "docs": "rimraf docs/* && webpack",
 30 |     "test": "karma start",
 31 |     "e2e": "protractor",
 32 |     "ci": "npm run e2e && npm run test",
 33 |     "start": "webpack-dev-server",
 34 |     "prepublish": "npm run dist"
 35 |   },
 36 |   "dependencies": {
 37 |   },
 38 |   "peerDependencies": {
 39 |     "@angular/core": "^4.0.0",
 40 |     "d3": "^3.5.16",
 41 |     "lodash": "^4.17.4"
 42 |   },
 43 |   "devDependencies": {
 44 |     "@angular/animations": "^4.0.0",
 45 |     "@angular/cli": "^1.0.0",
 46 |     "@angular/common": "^4.0.0",
 47 |     "@angular/compiler": "^4.0.0",
 48 |     "@angular/compiler-cli": "^4.0.0",
 49 |     "@angular/core": "^4.0.0",
 50 |     "@angular/forms": "^4.0.0",
 51 |     "@angular/http": "^4.0.0",
 52 |     "@angular/platform-browser": "^4.0.0",
 53 |     "@angular/platform-browser-dynamic": "^4.0.0",
 54 |     "@angular/platform-server": "^4.0.0",
 55 |     "@angular/router": "^4.0.0",
 56 |     "@types/d3": "0.0.33",
 57 |     "@types/d3-array": "0.0.3",
 58 |     "@types/d3-scale": "0.0.3",
 59 |     "@types/jasmine": "^2.2.33",
 60 |     "@types/requirejs": "^2.1.26",
 61 |     "awesome-typescript-loader": "^3.1.2",
 62 |     "bootstrap-loader": "2.0.0-beta.16",
 63 |     "bootstrap-sass": "^3.3.6",
 64 |     "browserify": "^14.1.0",
 65 |     "core-js": "^2.4.1",
 66 |     "css-loader": "^0.23.1",
 67 |     "d3": "^3.5.16",
 68 |     "es6-promise": "^4.1.0",
 69 |     "es6-shim": "^0.35.3",
 70 |     "exports-loader": "^0.6.2",
 71 |     "expose-loader": "^0.7.1",
 72 |     "extract-text-webpack-plugin": "^2.0.0-beta",
 73 |     "file-loader": "^0.8.4",
 74 |     "html-webpack-plugin": "^2.22.0",
 75 |     "imports-loader": "^0.6.4",
 76 |     "jquery": "^3.0.0",
 77 |     "json-loader": "^0.5.3",
 78 |     "karma": "^1.5.0",
 79 |     "karma-chrome-launcher": "^2.0.0",
 80 |     "karma-coverage": "^1.1.1",
 81 |     "karma-jasmine": "^1.1.0",
 82 |     "karma-phantomjs-launcher": "^1.0.4",
 83 |     "karma-sourcemap-loader": "^0.3.7",
 84 |     "karma-webpack": "^2.0.3",
 85 |     "karma-webpack-preprocessor": "^1.0.1",
 86 |     "node-sass": "^3.4.2",
 87 |     "phantomjs": "^1.9.20",
 88 |     "phantomjs-polyfill": "0.0.1",
 89 |     "protractor": "^3.0.0",
 90 |     "raw-loader": "0.5.1",
 91 |     "reflect-metadata": "0.1.2",
 92 |     "resolve-url-loader": "^1.4.3",
 93 |     "rimraf": "^2.6.1",
 94 |     "rxjs": "^5.1.0",
 95 |     "sass-loader": "3.2.1",
 96 |     "script-loader": "^0.6.1",
 97 |     "style-loader": "^0.13.0",
 98 |     "symbol-observable": "^1.0.2",
 99 |     "ts-loader": "^0.9.0",
100 |     "tslint": "^3.15.1",
101 |     "tslint-loader": "^2.1.5",
102 |     "typedoc": "^0.4.4",
103 |     "typescript": "^2.0.2",
104 |     "url-loader": "^0.5.6",
105 |     "watchify": "^3.9.0",
106 |     "web-animations-js": "^2.2.2",
107 |     "webpack": "^2.2.1",
108 |     "webpack-dev-middleware": "^1.10.1",
109 |     "webpack-dev-server": "^2.4.2",
110 |     "webpack-merge": "^4.1.0",
111 |     "zone.js": "^0.8.4"
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/area.ts:
--------------------------------------------------------------------------------
  1 | import { Input, Optional, Directive, ElementRef } from '@angular/core';
  2 | import { D3ChartDirective, D3Element, D3Scale, D3MarginDirective } from './chart';
  3 | import * as d3 from 'd3';
  4 | 
  5 | @Directive({
  6 |   selector: '[d3-area]'
  7 | })
  8 | export class D3AreaDirective extends D3Element {
  9 |   @Input() name: string;
 10 |   @Input() vertical: boolean;
 11 |   @Input('x') xDataName: string;
 12 |   @Input('y') yDataName: string;
 13 |   @Input('yscale') yScaleName: string;
 14 |   @Input('xscale') xScaleName: string;
 15 |   @Input() offset: any;
 16 |   @Input() stroke;
 17 | 
 18 |   private _areaElement;
 19 |   private _columns;
 20 |   private _xScale: D3Scale;
 21 |   private _yScale: D3Scale;
 22 | 
 23 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
 24 |     super(chart, el, margin);
 25 |     this._areaElement = this.element.attr('class', 'area');
 26 |   }
 27 | 
 28 |   @Input()
 29 |   get columns() {
 30 |     if (this._columns) {
 31 |       return this._columns;
 32 |     } else {
 33 |       return [this.yDataName];
 34 |     }
 35 |   }
 36 |   set columns(value) {
 37 |     if (value instanceof String) {
 38 |       value = value.split(',').map(v => v.trim());
 39 |     }
 40 | 
 41 |     if (Array.isArray(value)) {
 42 |       this._columns = value;
 43 |       this.redraw();
 44 |     }
 45 |   }
 46 | 
 47 |   redraw() {
 48 |     const data = this.data;
 49 |     const stack = d3.layout.stack();
 50 | 
 51 |     if (this.offset) {
 52 |       stack.offset(this.offset);
 53 |     }
 54 | 
 55 |     stack.values((d: any) => d.values);
 56 | 
 57 |     const stackedData = stack(this.mapColumns(data));
 58 | 
 59 |     const area = this.getArea();
 60 |     const nullArea = this.getNullArea();
 61 |     const elements = this._areaElement.selectAll('path.area').data(stackedData);
 62 |     elements.enter()
 63 |       .append('path').attr('class', d => `area area-${d.name}`)
 64 |       .attr('d', nullArea);
 65 | 
 66 |     elements.transition().duration(500)
 67 |       .attr('class', d => `area area-${d.name}`)
 68 |       .attr('d', area);
 69 | 
 70 |     elements.exit()
 71 |       .transition().duration(500)
 72 |       .attr('d', nullArea)
 73 |       .remove();
 74 |   }
 75 | 
 76 |   private getNullArea() {
 77 |     const area = d3.svg.area<any>()
 78 |       .x((d, i) => this.x(d.x))
 79 |       .y0(() => this.height)
 80 |       .y1(() => this.height);
 81 | 
 82 |     const areaStacked = d3.svg.area<any>()
 83 |       .x(d => this.x(d.x))
 84 |       .y0(d => this.y(d.y0))
 85 |       .y1(d => this.y(d.y0));
 86 | 
 87 |     return (d, i) => {
 88 |       if (i === 0) {
 89 |         return area(d.values);
 90 |       } else {
 91 |         return areaStacked(d.values);
 92 |       }
 93 |     };
 94 |   }
 95 | 
 96 |   private getArea() {
 97 |     let area;
 98 |     let areaStacked;
 99 | 
100 |     if (this.vertical) {
101 |       area = d3.svg.area<any>()
102 |         .y(d => this.x(d.x))
103 |         .x0(0)
104 |         .x1(d => this.y(d.y));
105 | 
106 |       areaStacked = d3.svg.area<any>()
107 |         .y(d => this.x(d.x))
108 |         .x0(d => this.y(d.y0))
109 |         .x1(d => this.y(d.y + d.y0));
110 |     } else {
111 |       area = d3.svg.area<any>()
112 |         .x(d => this.x(d.x))
113 |         .y0(() => this.height)
114 |         .y1(d => this.y(d.y));
115 | 
116 |       areaStacked = d3.svg.area<any>()
117 |         .x(d => this.x(d.x))
118 |         .y0(d => this.y(d.y0))
119 |         .y1(d => this.y(d.y + d.y0));
120 |     }
121 | 
122 |     return (d, i) => {
123 |       if (i === 0) {
124 |         return area(d.values);
125 |       } else {
126 |         return areaStacked(d.values);
127 |       }
128 |     };
129 |   }
130 | 
131 |   private mapColumns(data) {
132 |     return this.columns.map(c => ({
133 |       name: c,
134 |       values: this.mapValues(data, c)
135 |     }));
136 |   }
137 | 
138 |   private mapValues(data, c) {
139 |     return data.map(d => ({
140 |       x: d[this.xDataName],
141 |       y: d[c]
142 |     }));
143 |   }
144 | 
145 |   private get x() {
146 |     return (this._xScale = this._xScale
147 |       || this.getScale(this.xScaleName || this.xDataName)).scale;
148 |   }
149 | 
150 |   private get y() {
151 |     return (this._yScale = this._yScale
152 |       || this.getScale(this.yScaleName || this.yDataName)).scale;
153 |   }
154 | }
155 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/chart.ts:
--------------------------------------------------------------------------------
  1 | import { Input, Directive, Optional, ElementRef, OnInit } from '@angular/core';
  2 | import * as d3 from 'd3';
  3 | 
  4 | export interface ID3Element {
  5 |   redraw(): void;
  6 | }
  7 | 
  8 | export interface D3Scale {
  9 |   name: string;
 10 |   scale;
 11 |   redraw(): void;
 12 | }
 13 | 
 14 | /*
 15 |  * Directive
 16 |  * D3Chart is the base element in building charts with AngularD3
 17 |  * <d3-chart></d3-chart>
 18 |  */
 19 | @Directive({
 20 |   selector: '[d3-chart]'
 21 | })
 22 | export class D3ChartDirective implements OnInit {
 23 |   element: any;
 24 |   chart: any;
 25 |   scales: D3Scale[] = [];
 26 |   elements: ID3Element[] = [];
 27 | 
 28 |   private _data: {}[];
 29 | 
 30 |   constructor(elementRef: ElementRef) {
 31 |     this.element = elementRef.nativeElement;
 32 |     this.chart = d3.select(this.element).attr('class', 'd3-chart');
 33 |     window.addEventListener('resize', () => this.redraw());
 34 |   }
 35 | 
 36 |   get width(): number {
 37 |     return this.element.parentElement.clientWidth;
 38 |   }
 39 | 
 40 |   set width(value: number) {
 41 |     this.chart.attr('width', `${value}px`);
 42 |   }
 43 | 
 44 |   get height(): number {
 45 |     return this.element.parentElement.clientHeight;
 46 |   }
 47 | 
 48 |   set height(value: number) {
 49 |     this.chart.attr('height', `${value}px`);
 50 |   }
 51 | 
 52 | 
 53 |   addScale(scale: D3Scale) {
 54 |     this.scales.push(scale);
 55 |   }
 56 | 
 57 |   getScale(name: string): D3Scale {
 58 |     return this.scales.find(s => s.name === name);
 59 |   }
 60 | 
 61 |   addElement(element: ID3Element) {
 62 |     this.elements.push(element);
 63 |   }
 64 | 
 65 |   @Input()
 66 |   get data() {
 67 |     return this._data || [];
 68 |   }
 69 | 
 70 |   set data(value: any) {
 71 |     this._data = value;
 72 |     this.redraw();
 73 |   }
 74 | 
 75 |   redraw() {
 76 |     window.requestAnimationFrame(() => {
 77 |       this.scales.forEach(e => { e.redraw(); });
 78 |       this.elements.forEach(e => { e.redraw(); });
 79 |     });
 80 |   }
 81 | 
 82 |   ngOnInit() {
 83 |     this.redraw();
 84 |   }
 85 | }
 86 | 
 87 | export interface D3Margin {
 88 |   top: number;
 89 |   left: number;
 90 |   right: number;
 91 |   bottom: number;
 92 | }
 93 | 
 94 | @Directive({
 95 |   selector: '[d3-margin]'
 96 | })
 97 | export class D3MarginDirective implements ID3Element {
 98 |   element;
 99 |   private _margin: D3Margin = { top: 0, left: 0, bottom: 0, right: 0 };
100 | 
101 |   constructor(public chart: D3ChartDirective, public el: ElementRef) {
102 |     this.element = d3.select(el.nativeElement);
103 |     chart.addElement(this);
104 |   }
105 | 
106 |   get width(): number {
107 |     return this.chart.width - this.margin.left - this.margin.right;
108 |   }
109 | 
110 |   get height(): number {
111 |     return this.chart.height - this.margin.top - this.margin.bottom;
112 |   }
113 | 
114 |   @Input('d3-margin')
115 |   get margin(): D3Margin {
116 |     return this._margin;
117 |   }
118 | 
119 |   set margin(value: D3Margin) {
120 |     if (value) {
121 |       if (this._margin === value) {
122 |         return;
123 |       }
124 | 
125 |       this._margin = value;
126 |       this.redraw();
127 |       this.chart.redraw();
128 |     }
129 |   }
130 | 
131 |   redraw() {
132 |     this.element
133 |       .attr('transform', `translate(${this.margin.left || '0'}, ${this.margin.top || '0'})`);
134 |   }
135 | }
136 | 
137 | export class D3Element implements ID3Element {
138 |   element;
139 |   private _margin: D3Margin = { top: 0, left: 0, right: 0, bottom: 0 };
140 | 
141 |   constructor(public chart: D3ChartDirective, public el: ElementRef, @Optional() private _marginEl?: D3MarginDirective) {
142 |     this.element = d3.select(el.nativeElement);
143 |     chart.addElement(this);
144 |   }
145 | 
146 |   get margin(): D3Margin {
147 |     return this._marginEl ? this._marginEl.margin : this._margin;
148 |   }
149 | 
150 |   get nativeElement() {
151 |     return this.el.nativeElement;
152 |   }
153 | 
154 |   get width(): number {
155 |     return this._marginEl ? this._marginEl.width : this.chart.width;
156 |   }
157 | 
158 |   get height(): number {
159 |     return this._marginEl ? this._marginEl.height : this.chart.height;
160 |   }
161 | 
162 |   get data() {
163 |     return this.chart.data;
164 |   }
165 | 
166 |   get horizontalPadding(): number {
167 |     return this.width - this.nativeElement.parentElement.clientWidth;
168 |   }
169 | 
170 |   get verticalPadding(): number {
171 |     return this.height - this.nativeElement.parentElement.clientHeight;
172 |   }
173 | 
174 |   getScale(name) {
175 |     return this.chart.getScale(name);
176 |   }
177 | 
178 |   redraw() {
179 |     return;
180 |   }
181 | }
182 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Build SVGs with D3 and Angular 2
  2 | 
  3 | Demo Site: https://wealthbar.github.io/a2d3/
  4 | 
  5 | A set of composable and extensible Angular 2 directives for building SVGs with
  6 | D3 declaritively. This library provides functionality for basic charts out of
  7 | the box, but it can be easily extended to support building declarative syntaxes
  8 | for just about any SVG generated by D3.
  9 | 
 10 | This project was based off of
 11 | [AngularD3](http://wealthbar.github.io/angular-d3) which is still maintained
 12 | for Angular 1.x projects. It is feature equivalent, but  is essentially a
 13 | complete API rewrite with new syntax that makes it more appropriate for Angular 2.
 14 | 
 15 | ## Installing
 16 | 
 17 | ```
 18 | npm install a2d3
 19 | ```
 20 | 
 21 | ## Project Goals
 22 | 
 23 | The goals of A2D3 are:
 24 | 
 25 | - Provide a simple declarative syntax for common D3 graphs and charts
 26 | - An extensible core allowing for almost anything possible D3 to be expressed
 27 |   with a custom directive. 
 28 | - Designed the "Angular Way (tm)" using similar style to extensibility and
 29 |   directive communication.
 30 | - 100% stylable via CSS, with some added D3 'sugar' like allowing the use of
 31 |   the built in color scales with pie charts or being able to bind to a color
 32 |   scale from data.
 33 | - The ability to create custom directives that can both extend existing chart
 34 |   layouts as well as create new ones.
 35 | 
 36 | If you have ideas and are interested in lending a hand, please open an issue,
 37 | submit a pull request or just ping me
 38 | [@chrismnicola](https://twitter.com/chrismnicola). This could be the beginning
 39 | of beautiful friendship.
 40 | 
 41 | ## Current Directives
 42 | 
 43 | - d3-chart - Provides the top level directives meant to contain the rest of the
 44 |   chart declarations.
 45 | - d3-data - Provides a declarative way to load data into the current scope
 46 |   directly from a URL
 47 | - d3-axis - Defines an axis and provide it's range and location (top, left,
 48 |   bottom, right)
 49 | - d3-area - Define an area graph
 50 | - d3-line - Defines a line graph
 51 | - d3-bars - Defines a set of bars for a bar chart
 52 | 
 53 | The directives are used via attributes and you can declatively compose the SVG as an Angular
 54 | template like this.
 55 | 
 56 | ```html
 57 |   <d3-data [src]="dataUrl" (data)="lineLoaded($event)" [accessor]="parseValues" [callback]="log"></d3-data>
 58 |   <d3-data [src]="pieDataUrl" (data)="pieLoaded($event)" [accessor]="parseValues" [callback]="log"></d3-data>
 59 | 
 60 |   <section id="graphs" class="well">
 61 |     <h1>Basic Graphs</h1>
 62 |     <p>Basic line, area and bar charts can be composed together in the same chart.</p>
 63 |     <div class="d3-chart">
 64 |       <svg d3-chart [data]="line" >
 65 |         <g [d3-margin]="{ top: 40, right: 60, bottom: 40, left: 60}">
 66 |           <g d3-line x="date" y="optimal" yscale="total"></g>
 67 |           <g d3-area x="date" y="total"></g>
 68 |           <g d3-bars x="date" y="savings"></g>
 69 |           <g d3-axis name="date" label="Date" [extent]="true" orientation="bottom" [ticks]="5" time-format="%Y-%m-%d"></g>
 70 |           <g d3-axis name="savings" label="Deposits" orientation="left" [ticks]="3"></g>
 71 |           <g d3-axis name="total" label="Savings" orientation="right"></g>
 72 |         </g>
 73 |         <text>Test</text>
 74 |         <defs>
 75 |           <linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="100%">
 76 |             <stop *ngFor="let s of gradient" [attr.offset]="s.offset" [attr.stop-color]="s.color" [attr.stop-opacity]="s.opacity"></stop>
 77 |           </linearGradient>
 78 |         </defs>
 79 |       </svg>
 80 |     </div>
 81 |   </section>
 82 | 
 83 | ```
 84 | 
 85 | Unlike AngularD3 for 1.x, the SVG is an ordinary SVG template and you can place
 86 | custom SVG code as you wish and you can use regular Angular 2.x binding and
 87 | template syntax if you want. The D3 attribute directives merely extend some of
 88 | the elements through D3 data binding and manipulation.
 89 | 
 90 | ## Try it out
 91 | 
 92 | This project uses NPM and Webpack. To run it clone this repo and run:
 93 | 
 94 | ```
 95 | npm install
 96 | npm start
 97 | ```
 98 | 
 99 | ## Building
100 | 
101 | You can build a commonjs modularized release by running:
102 | 
103 |     npm run-script dist
104 | 
105 | You can also update the docs which will be saved in `/docs` by running:
106 | 
107 |     npm run-script docs
108 | 
109 | If you have any other ideas for me, or feel like contributing to help add any
110 | of this missing functionality, I encourage you to submit a pull request.
111 | 
112 | ## License
113 | 
114 | A2D3 is free software under the [MIT licence](http://opensource.org/licenses/MIT) and may be redistributed under the terms specified in the MIT-LICENSE file.
115 | 


--------------------------------------------------------------------------------
/npm-shrinkwrap.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "a2d3",
  3 |   "version": "1.0.1",
  4 |   "dependencies": {
  5 |     "awesome-typescript-loader": {
  6 |       "version": "3.1.2",
  7 |       "from": "awesome-typescript-loader@latest",
  8 |       "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-3.1.2.tgz"
  9 |     },
 10 |     "big.js": {
 11 |       "version": "3.1.3",
 12 |       "from": "big.js@>=3.1.3 <4.0.0",
 13 |       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.1.3.tgz"
 14 |     },
 15 |     "buffer-shims": {
 16 |       "version": "1.0.0",
 17 |       "from": "buffer-shims@>=1.0.0 <2.0.0",
 18 |       "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz"
 19 |     },
 20 |     "colors": {
 21 |       "version": "1.1.2",
 22 |       "from": "colors@>=1.1.2 <1.2.0",
 23 |       "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz"
 24 |     },
 25 |     "core-util-is": {
 26 |       "version": "1.0.2",
 27 |       "from": "core-util-is@>=1.0.0 <1.1.0",
 28 |       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
 29 |     },
 30 |     "emojis-list": {
 31 |       "version": "2.1.0",
 32 |       "from": "emojis-list@>=2.0.0 <3.0.0",
 33 |       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz"
 34 |     },
 35 |     "enhanced-resolve": {
 36 |       "version": "3.1.0",
 37 |       "from": "enhanced-resolve@>=3.1.0 <4.0.0",
 38 |       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.1.0.tgz"
 39 |     },
 40 |     "errno": {
 41 |       "version": "0.1.4",
 42 |       "from": "errno@>=0.1.3 <0.2.0",
 43 |       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz"
 44 |     },
 45 |     "graceful-fs": {
 46 |       "version": "4.1.11",
 47 |       "from": "graceful-fs@>=4.1.2 <5.0.0",
 48 |       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
 49 |     },
 50 |     "inherits": {
 51 |       "version": "2.0.3",
 52 |       "from": "inherits@>=2.0.1 <2.1.0",
 53 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
 54 |     },
 55 |     "isarray": {
 56 |       "version": "1.0.0",
 57 |       "from": "isarray@>=1.0.0 <1.1.0",
 58 |       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
 59 |     },
 60 |     "json5": {
 61 |       "version": "0.5.1",
 62 |       "from": "json5@>=0.5.0 <0.6.0",
 63 |       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz"
 64 |     },
 65 |     "loader-utils": {
 66 |       "version": "1.1.0",
 67 |       "from": "loader-utils@>=1.0.2 <2.0.0",
 68 |       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz"
 69 |     },
 70 |     "lodash": {
 71 |       "version": "4.17.4",
 72 |       "from": "lodash@>=4.11.1 <5.0.0",
 73 |       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz"
 74 |     },
 75 |     "memory-fs": {
 76 |       "version": "0.4.1",
 77 |       "from": "memory-fs@>=0.4.0 <0.5.0",
 78 |       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz"
 79 |     },
 80 |     "minimist": {
 81 |       "version": "0.0.8",
 82 |       "from": "minimist@0.0.8",
 83 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
 84 |     },
 85 |     "mkdirp": {
 86 |       "version": "0.5.1",
 87 |       "from": "mkdirp@>=0.5.1 <0.6.0",
 88 |       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz"
 89 |     },
 90 |     "object-assign": {
 91 |       "version": "4.1.1",
 92 |       "from": "object-assign@>=4.0.1 <5.0.0",
 93 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
 94 |     },
 95 |     "process-nextick-args": {
 96 |       "version": "1.0.7",
 97 |       "from": "process-nextick-args@>=1.0.6 <1.1.0",
 98 |       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz"
 99 |     },
100 |     "prr": {
101 |       "version": "0.0.0",
102 |       "from": "prr@>=0.0.0 <0.1.0",
103 |       "resolved": "https://registry.npmjs.org/prr/-/prr-0.0.0.tgz"
104 |     },
105 |     "readable-stream": {
106 |       "version": "2.2.6",
107 |       "from": "readable-stream@>=2.0.1 <3.0.0",
108 |       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.6.tgz"
109 |     },
110 |     "source-map": {
111 |       "version": "0.5.6",
112 |       "from": "source-map@>=0.5.3 <0.6.0",
113 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
114 |     },
115 |     "source-map-support": {
116 |       "version": "0.4.14",
117 |       "from": "source-map-support@>=0.4.2 <0.5.0",
118 |       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.14.tgz"
119 |     },
120 |     "string_decoder": {
121 |       "version": "0.10.31",
122 |       "from": "string_decoder@>=0.10.0 <0.11.0",
123 |       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
124 |     },
125 |     "tapable": {
126 |       "version": "0.2.6",
127 |       "from": "tapable@>=0.2.5 <0.3.0",
128 |       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.6.tgz"
129 |     },
130 |     "util-deprecate": {
131 |       "version": "1.0.2",
132 |       "from": "util-deprecate@>=1.0.1 <1.1.0",
133 |       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
134 |     }
135 |   }
136 | }
137 | 


--------------------------------------------------------------------------------
/src/app/app.html:
--------------------------------------------------------------------------------
  1 | <div>
  2 |   <d3-data [src]="dataUrl" (data)="line = $event.rows" [accessor]="parseValues" [callback]="log"></d3-data>
  3 |   <d3-data [src]="pieDataUrl" (data)="pie = $event.rows" [accessor]="parseValues" [callback]="log"></d3-data>
  4 |   <d3-data [src]="gearDataUrl" (data)="gear = $event.rows" [accessor]="parseValues" [callback]="log"></d3-data>
  5 | 
  6 |   <section id="graphs-with-labels" class="well">
  7 |     <h1>Graph with axis labels</h1>
  8 |     <p>Basic line, area and bar charts can be composed together in the same chart.</p>
  9 |     <div class="d3-chart">
 10 |       <svg d3-chart [data]="line">
 11 |         <g [d3-margin]="{ top: 40, right: 60, bottom: 40, left: 60}">
 12 |           <g d3-area x="date" y="total"></g>
 13 |           <g d3-axis name="date" label="Date" [extent]="true" orientation="bottom" [ticks]="5" time-format="%Y-%m-%d"></g>
 14 |           <g d3-axis name="total" label="Savings" orientation="left" grid="true" tick-anchor="end" order="1"></g>
 15 |           <g d3-axis-label axis="total" value="600" label="six hundred" position="end" x-padding="-5" y-padding="-5"></g>
 16 |         </g>
 17 |       </svg>
 18 |     </div>
 19 |   </section>
 20 | 
 21 |   <section id="graphs" class="well">
 22 |     <h1>Basic Graphs</h1>
 23 |     <p>Basic line, area and bar charts can be composed together in the same chart.</p>
 24 |     <div class="d3-chart">
 25 |       <svg d3-chart [data]="line">
 26 |         <g [d3-margin]="{ top: 40, right: 60, bottom: 40, left: 60}">
 27 |           <g d3-line x="date" y="optimal" yscale="total"></g>
 28 |           <g d3-area x="date" y="total"></g>
 29 |           <g d3-bars x="date" y="savings"></g>
 30 |           <g d3-axis name="date" label="Date" [extent]="true" orientation="bottom" [ticks]="5" time-format="%Y-%m-%d"></g>
 31 |           <g d3-axis name="savings" label="Deposits" orientation="left" [ticks]="3"></g>
 32 |           <g d3-axis name="total" label="Savings" orientation="right"></g>
 33 |         </g>
 34 |         <text>Test</text>
 35 |         <defs>
 36 |           <linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="100%">
 37 |             <stop *ngFor="let s of gradient" [attr.offset]="s.offset" [attr.stop-color]="s.color" [attr.stop-opacity]="s.opacity"></stop>
 38 |           </linearGradient>
 39 |         </defs>
 40 |       </svg>
 41 |     </div>
 42 |   </section>
 43 | 
 44 |   <section id="stacked" class="well">
 45 |     <h1>Stacked Areas</h1>
 46 |     <p>Area charts can be stacked by specifying multiple y propeties</p>
 47 |     <div class="d3-chart">
 48 |       <svg d3-chart [data]="line">
 49 |         <g [d3-margin]="{ top: 1, right: 1, bottom: 1, left: 1}">
 50 |           <g d3-area x="date" yscale="total" [columns]="columns"></g>
 51 |           <g d3-axis grid="true" name="date" [extent]="true" orientation="top" scale="time" tick-dx="0.1em" tick-dy="1.1em" tick-anchor="start"
 52 |             tick-size="0,0" [custom-time-format]="customTimeFormat" time-scale="months" time-interval="3"></g>
 53 |           <g d3-axis grid="true" name="total" [filter]="stackDomain" orientation="right" format="$," [tick-values]="[125,250,500,1000]"
 54 |             tick-dx="-0.5em" tick-dy="-0.3em" tick-anchor="end" tick-size="0,0"></g>
 55 |         </g>
 56 |       </svg>
 57 |     </div>
 58 |   </section>
 59 | 
 60 |   <section id="pie-charts" class="well">
 61 |     <h1>Pie and Donut Charts</h1>
 62 |     <div class="row">
 63 |       <div class="d3-chart col-sm-6">
 64 |         <svg d3-chart [data]="pie">
 65 |           <g d3-pie label="age" value="population"></g>
 66 |         </svg>
 67 |       </div>
 68 |       <div class="d3-chart col-sm-6">
 69 |         <svg d3-chart [data]="pie">
 70 |           <g d3-pie inner-radius="0.5" label-radius="0.8" label="age" value="population" color-scale="category20c"></g>
 71 |         </svg>
 72 |       </div>
 73 |     </div>
 74 |   </section>
 75 | 
 76 |   <section id="gear-chart" class="well">
 77 |     <h1>Gear Chart</h1>
 78 |     <div class="d3-chart">
 79 |       <svg d3-chart [data]="gear">
 80 |         <g d3-gear dx="-50" radius-scaling="0.7" rotation="45" corner-radius-percentage="4" angle-padding="0.01" outer-radius-field="outerR"
 81 |           inner-radius-field="innerR" inner-label-radius-field="innerLR" inner-radius-field="innerR" inner-label-field="innerL"
 82 |           outer-label-field="outerL" weight-field="weight" color-scale="category20c"></g>
 83 |       </svg>
 84 |     </div>
 85 |     <div class="row">
 86 |       <div class="d3-chart col-sm-6">
 87 |         <svg d3-chart [data]="gear">
 88 |           <g d3-gear dy="20" radius-scaling="0.66" format="half-right" corner-radius-percentage="4" angle-padding="0.01" outer-radius-field="outerR"
 89 |             inner-radius-field="innerR" inner-label-radius-field="innerLR" inner-radius-field="innerR" inner-label-field="innerL"
 90 |             outer-label-field="outerL" weight-field="weight" color-scale="category20c"></g>
 91 |         </svg>
 92 |       </div>
 93 |       <div class="d3-chart col-sm-6">
 94 |         <svg d3-chart [data]="gear">
 95 |           <g d3-gear dy="-20" radius-scaling="0.66" format="half-left" corner-radius-percentage="4" angle-padding="0.01" outer-radius-field="outerR"
 96 |             inner-radius-field="innerR" inner-label-radius-field="innerLR" inner-radius-field="innerR" inner-label-field="innerL"
 97 |             outer-label-field="outerL" weight-field="weight" color-scale="category20c"></g>
 98 |         </svg>
 99 |       </div>
100 |     </div>
101 |   </section>
102 | 
103 |   <section id="arc-charts" class="well">
104 |     <h1>Arc Charts</h1>
105 |     <div class="row">
106 |       <div class="d3-chart col-sm-6 simple-arc1">
107 |         <svg d3-chart [data]="arcs.arc1">
108 |           <g d3-arc transition="bounce" duration="1000"></g>
109 |         </svg>
110 |       </div>
111 |       <div class="d3-chart col-sm-6 simple-arc2">
112 |         <svg d3-chart [data]="arcs.arc2">
113 |           <g d3-arc [inner-radius]="0.9"></g>
114 |         </svg>
115 |       </div>
116 |     </div>
117 |   </section>
118 | </div>
119 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/pie.ts:
--------------------------------------------------------------------------------
  1 | import { Input, Optional, Directive, ElementRef } from '@angular/core';
  2 | import { D3ChartDirective, D3Element, D3MarginDirective } from './chart';
  3 | import * as d3 from 'd3';
  4 | 
  5 | export class D3PieBase extends D3Element {
  6 |   innerRadius = 0;
  7 |   labelRadius = 0.7;
  8 |   radiusAttr: string;
  9 | 
 10 |   get radius() {
 11 |     if (this.radiusAttr === 'height') {
 12 |       return (this.height - this.verticalPadding) / 2;
 13 |     } else {
 14 |       return (this.width - this.horizontalPadding) / 2;
 15 |     }
 16 |   }
 17 | 
 18 |   createArc(radius: number) {
 19 |     return d3.svg.arc<any>()
 20 |       .outerRadius(radius)
 21 |       .innerRadius(radius * this.innerRadius);
 22 |   }
 23 | 
 24 |   createLabelArc(radius, offset = 0) {
 25 |     return d3.svg.arc<any>()
 26 |       .outerRadius(radius * this.labelRadius + offset)
 27 |       .innerRadius(radius * this.labelRadius + offset);
 28 |   }
 29 | 
 30 |   createArcTween(arc, initial = null) {
 31 |     return function (d) {
 32 |       if (this._current == null) {
 33 |         this._current = initial != null ? initial : d;
 34 |       }
 35 | 
 36 |       const i = d3.interpolate(this._current, d);
 37 |       this._current = d;
 38 | 
 39 |       return (t) => arc(i(t));
 40 |     };
 41 |   }
 42 | 
 43 |   redraw() {
 44 |     if (this.radiusAttr === 'height') {
 45 |       //noinspection JSSuspiciousNameCombination
 46 |       this.chart.width = this.height;
 47 |       this.chart.height = this.height;
 48 |     } else {
 49 |       //noinspection JSSuspiciousNameCombination
 50 |       this.chart.height = this.width;
 51 |       this.chart.width = this.width;
 52 |     }
 53 |   }
 54 | }
 55 | 
 56 | @Directive({
 57 |   selector: '[d3-pie]'
 58 | })
 59 | export class D3PieDirective extends D3PieBase implements D3Element {
 60 |   @Input() name: string;
 61 |   @Input() transition = 'ease';
 62 |   @Input() duration = 500;
 63 |   @Input() value = 'value';
 64 |   @Input() label = 'label';
 65 |   @Input('inner-radius') innerRadius: number;
 66 |   @Input('label-radius') labelRadius: number;
 67 |   @Input('label-offset') labelOffset = 12;
 68 |   @Input('text-anchor') textAnchor = 'middle';
 69 |   @Input() color: string;
 70 |   @Input('avoid-collisions') avoidCollisions: boolean;
 71 | 
 72 |   dy = '0.35em';
 73 |   pie = d3.layout.pie().sort(null).value(d => d[this.value]);
 74 | 
 75 |   private _center;
 76 |   private _colorScale;
 77 | 
 78 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
 79 |     super(chart, el, margin);
 80 |     this._center = this.element.attr('class', 'pie');
 81 |   }
 82 | 
 83 |   @Input('color-scale')
 84 |   get colorScale(): any {
 85 |     return this._colorScale;
 86 |   }
 87 | 
 88 |   set colorScale(value: any) {
 89 |     if (d3.scale[value]) {
 90 |       this._colorScale = d3.scale[value]();
 91 |     }
 92 |   }
 93 | 
 94 |   redraw() {
 95 |     const data = this.data;
 96 |     super.redraw();
 97 |     const radius = this.radius;
 98 |     const arc = this.createArc(radius);
 99 |     const arcTween = this.createArcTween(arc);
100 | 
101 |     this._center.attr('transform', `translate(${radius}, ${radius})`);
102 | 
103 |     const slices = this._center.selectAll('path.pie').data(this.pie(data));
104 |     slices.enter().append('path')
105 |       .attr('class', (d, i) => `pie pie-${i}`)
106 |       .attr('d', arc);
107 | 
108 |     slices.style('fill', (d, i) => this.getColors(d, i))
109 |       .attr('class', (d, i) => `pie pie-${i}`);
110 | 
111 |     slices.transition().ease(this.transition).duration(this.duration)
112 |       .attrTween('d', arcTween);
113 | 
114 |     slices.exit().remove();
115 | 
116 |     if (this.label) {
117 |       const label = this._center.selectAll('text').data(this.pie(data));
118 | 
119 |       label.enter().append('text')
120 |         .attr('class', (d, i) => `pie-label pie-label-${i}`);
121 | 
122 |       label.style('text-anchor', this.textAnchor)
123 |         .attr('class', (d, i) => `pie-label pie-label-${i}`)
124 |         .text((d, i) => d.data[this.label]);
125 | 
126 |       label.transition().ease(this.transition).duration(this.duration)
127 |         .attr('transform', this.getLabelPosition(radius));
128 | 
129 |       label.exit().remove();
130 |     }
131 |   }
132 | 
133 |   private getLabelPosition(radius) {
134 |     const padding = +this.labelOffset;
135 |     const avoidCollisions = this.avoidCollisions;
136 |     const labelArc = this.createLabelArc(radius);
137 |     let prevbb;
138 | 
139 |     return function (d) {
140 |       let position = labelArc.centroid(d);
141 |       if (avoidCollisions) {
142 |         const relativePosition = [position[0], position[1]];
143 | 
144 |         if (this._position) {
145 |           relativePosition[0] -= this._position[0];
146 |           relativePosition[1] -= this._position[1];
147 |         }
148 | 
149 |         const bb = this.getBoundingClientRect();
150 |         const thisbb = {
151 |           left: bb.left + (relativePosition[0] - padding),
152 |           top: bb.top + (relativePosition[1] - padding),
153 |           right: bb.right + relativePosition[0] + padding,
154 |           bottom: bb.bottom + relativePosition[1] + padding,
155 |         };
156 | 
157 |         const hasCollision = !(thisbb.right < prevbb.left
158 |           || thisbb.left > prevbb.right
159 |           || thisbb.bottom < prevbb.top
160 |           || thisbb.top > prevbb.bottom);
161 | 
162 |         if (prevbb && hasCollision) {
163 |           const ctx = thisbb.left + (thisbb.right - thisbb.left) / 2;
164 |           const cty = thisbb.top + (thisbb.bottom - thisbb.top) / 2;
165 |           const cpx = prevbb.left + (prevbb.right - prevbb.left) / 2;
166 |           const cpy = prevbb.top + (prevbb.bottom - prevbb.top) / 2;
167 |           const offset = Math.sqrt(Math.pow(ctx - cpx, 2) + Math.pow(cty - cpy, 2)) / 2;
168 |           const offsetArc = this.createLabelArc(radius, offset);
169 |           position = offsetArc.centroid(d);
170 |         }
171 | 
172 |         this._position = position;
173 |         prevbb = thisbb;
174 |       }
175 |       return `translate(${position})`;
176 |     };
177 |   }
178 | 
179 |   private getColors(d, i) {
180 |     if (this.colorScale) {
181 |       return this.colorScale(i);
182 |     }
183 | 
184 |     if (this.color) {
185 |       return d[this.color];
186 |     }
187 | 
188 |     if (d.color) {
189 |       return d.color;
190 |     }
191 |   }
192 | }
193 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/gear.ts:
--------------------------------------------------------------------------------
  1 | import { Input, Optional, Directive, ElementRef } from '@angular/core';
  2 | import { D3ChartDirective, D3Element, D3MarginDirective } from './chart';
  3 | import * as d3 from 'd3';
  4 | 
  5 | @Directive({
  6 |   selector: '[d3-gear]'
  7 | })
  8 | export class D3GearDirective extends D3Element {
  9 |   @Input() duration;
 10 |   @Input() transition;
 11 |   name: string;
 12 |   @Input('weight-field') weightField: string;
 13 |   @Input() color: string;
 14 |   @Input('inner-label-field') innerLabelField: string;
 15 |   @Input('inner-radius-field') innerRadiusField: string;
 16 |   @Input('inner-label-radius-field') innerLabelRadiusField: string;
 17 |   @Input('outer-label-field') outerLabelField: string;
 18 |   @Input('outer-radius-field') outerRadiusField: string;
 19 |   @Input('outer-label-radius-field') outerLabelRadiusField: string;
 20 |   @Input('angle-padding') anglePadding = 0;
 21 |   @Input('corner-radius-percentage') cornerRadiusPercentage = 0;
 22 |   @Input('triangle-color') triangleColor: string;
 23 |   @Input() format: string;
 24 |   @Input('radius-scaling') radiusScaling = .9;
 25 |   @Input('inner-radius-scaling') innerRadiusScaling = 0.3;
 26 |   @Input() rotation = 0;
 27 |   @Input() dx = 0;
 28 |   @Input() dy = 0;
 29 |   layout;
 30 | 
 31 |   private _colorScale;
 32 | 
 33 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
 34 |     super(chart, el, margin);
 35 |     this.element.attr('class', 'gear');
 36 |   }
 37 | 
 38 |   @Input('color-scale')
 39 |   get colorScale(): any {
 40 |     return this._colorScale;
 41 |   }
 42 | 
 43 |   set colorScale(value: any) {
 44 |     if (d3.scale[value]) {
 45 |       this._colorScale = d3.scale[value]();
 46 |     }
 47 |   }
 48 | 
 49 |   redraw() {
 50 |     const baseRadius = this.height * 0.5 * this.radiusScaling;
 51 |     const data = this.data;
 52 | 
 53 |     if (this.width > 0 && this.height > 0) {
 54 |       this.chart.width = this.width;
 55 |       this.chart.height = this.height;
 56 |     }
 57 | 
 58 |     if (this.chart.width === 0 || this.chart.height === 0) {
 59 |       return;
 60 |     }
 61 | 
 62 |     let xcenter = this.chart.width / 2 + (+this.dx);
 63 |     const ycenter = this.chart.height / 2 + (+this.dy);
 64 | 
 65 |     let startAngle = 0;
 66 |     let endAngle = 2 * Math.PI;
 67 | 
 68 |     if (this.format === 'half-left') {
 69 |       startAngle = Math.PI;
 70 |       xcenter = this.chart.width;
 71 |     } else if (this.format === 'half-right') {
 72 |       endAngle = Math.PI;
 73 |       xcenter = 0;
 74 |     } else { // rotation only works on non half formats
 75 |       const rotationInRadians = this.rotation * Math.PI / 180;
 76 |       startAngle = rotationInRadians;
 77 |       endAngle = rotationInRadians + 2 * Math.PI;
 78 |     }
 79 | 
 80 |     this.element.attr('transform', `translate(${xcenter}, ${ycenter})`);
 81 | 
 82 |     const pieData = d3.layout.pie()
 83 |       .startAngle(startAngle)
 84 |       .endAngle(endAngle)
 85 |       .padAngle(this.anglePadding)
 86 |       .sort(null)
 87 |       .value(d => d[this.weightField])(data);
 88 | 
 89 |     const layoutData = [];
 90 | 
 91 |     for (const i in data) {
 92 |       const d = data[i];
 93 |       const pd = pieData[i];
 94 | 
 95 |       if (pd.startAngle < 0) {
 96 |         pd.startAngle += 2 * Math.PI;
 97 |       }
 98 | 
 99 |       if (pd.endAngle < 0) {
100 |         pd.endAngle -= 2 * Math.PI;
101 |       }
102 | 
103 |       let midAngleRadians = ((pd.startAngle + pd.endAngle) / 2) - Math.PI / 2;
104 | 
105 |       if (midAngleRadians < 0) {
106 |         midAngleRadians += 2 * Math.PI;
107 |       }
108 | 
109 |       const midAngleDegrees = 180 * midAngleRadians / Math.PI;
110 |       const uy = Math.sin(midAngleRadians);
111 |       const ux = Math.cos(midAngleRadians);
112 |       const halfPi = Math.PI / 2;
113 |       const lr = midAngleRadians > halfPi && midAngleRadians < 3 * halfPi;
114 | 
115 |       let innerR = this.innerRadiusScaling * baseRadius;
116 |       if (this.innerRadiusField && d[this.innerRadiusField]) {
117 |         innerR = +d[this.innerRadiusField] * baseRadius;
118 |       }
119 | 
120 |       let outerR = baseRadius;
121 |       if (this.outerRadiusField && d[this.outerRadiusField]) {
122 |         outerR = +d[this.outerRadiusField] * baseRadius;
123 |       }
124 | 
125 |       let innerLR = (innerR + outerR) / 2;
126 | 
127 |       if (this.innerLabelRadiusField && d[this.innerLabelRadiusField]) {
128 |         innerLR = +d[this.innerLabelRadiusField] * baseRadius;
129 |       }
130 | 
131 |       const gapSize = 0.02 * baseRadius;
132 |       const triStart = outerR + gapSize;
133 |       const triEnd = triStart + 0.05 * baseRadius;
134 |       const triSize = triEnd - triStart;
135 |       let outerLR = triEnd + gapSize;
136 |       if (this.outerLabelRadiusField && d[this.outerLabelRadiusField]) {
137 |         outerLR = +d[this.outerLabelRadiusField] * baseRadius;
138 |       }
139 |       const arc = d3.svg.arc<number>()
140 |         .outerRadius(outerR)
141 |         .innerRadius(innerR)
142 |         .cornerRadius(baseRadius * this.cornerRadiusPercentage / 100.0);
143 |       const slicePath = arc(pd);
144 | 
145 |       const tbx = triStart;
146 |       const tbw = triSize;
147 |       const outerLabelTrianglePath = `M ${tbx} ${-tbw} l 0 ${2 * tbw} l ${tbw} ${-tbw} z`;
148 | 
149 |       layoutData[i] = {
150 |         index: i,
151 |         innerR: innerR,
152 |         innerLabel: d[this.innerLabelField],
153 |         innerLabelX: innerLR * ux,
154 |         innerLabelY: innerLR * uy,
155 |         innerLabelDy: '0.35em',
156 |         innerLabelAnchor: 'middle',
157 |         outerR: outerR,
158 |         outerLabel: d[this.outerLabelField],
159 |         outerLabelX: outerLR * ux,
160 |         outerLabelY: outerLR * uy,
161 |         outerLabelAnchor: lr ? 'end' : 'start',
162 |         outerLabelDy: `${((uy + 1) / 2) * .7}em`,
163 |         midDegrees: midAngleDegrees,
164 |         pd: pd,
165 |         arc: arc,
166 |         slicePath: slicePath,
167 |         outerLabelTrianglePath: outerLabelTrianglePath,
168 |       };
169 |     }
170 | 
171 |     const slices = this.element.selectAll('path.gear').data(layoutData);
172 |     slices
173 |       .enter()
174 |       .append('path')
175 |       .attr('class', (d, i) => `gear gear-${i}`)
176 |       .attr('d', (d, i) => d.slicePath)
177 |       .attr('fill', (d, i) => this.getColors(d, i));
178 | 
179 |     slices.exit().remove();
180 | 
181 |     const triangles = this.element.selectAll('path.gear-label-triangle').data(layoutData);
182 |     triangles
183 |       .enter()
184 |       .append('path')
185 |       .attr('class', (d, i) => `gear-label-triangle gear-label-triangle-${i}`)
186 |       .attr('transform', d => `rotate(${d.midDegrees})`)
187 |       .attr('d', d => d.outerLabelTrianglePath)
188 |       .attr('fill', this.triangleColor || 'grey');
189 | 
190 |     const innerLabel = this.element.selectAll('text.gear-label-inner').data(layoutData);
191 |     innerLabel.enter()
192 |       .append('text')
193 |       .attr('class', (d, i) => `gear-label-inner gear-label-inner-${i}`)
194 |       .attr('text-anchor', d => d.innerLabelAnchor)
195 |       .attr('dy', d => d.innerLabelDy)
196 |       .attr('transform', d => `translate(${d.innerLabelX}, ${d.innerLabelY})`)
197 |       .text(d => d.innerLabel);
198 | 
199 |     innerLabel.exit().remove();
200 | 
201 |     const outerLabel = this.element.selectAll('text.gear-label-outer').data(layoutData);
202 |     outerLabel.enter()
203 |       .append('text')
204 |       .attr('class', (d, i) => `gear-label-outer gear-label-outer-${i}`)
205 |       .attr('text-anchor', d => d.outerLabelAnchor)
206 |       .attr('class', (d, i) => `gear-label-outer gear-label-outer-${i}`)
207 |       .attr('dy', d => d.outerLabelDy)
208 |       .attr('transform', d => `translate(${d.outerLabelX}, ${d.outerLabelY})`)
209 |       .text(d => d.outerLabel);
210 | 
211 |     outerLabel.exit().remove();
212 | 
213 |     this.layout = layoutData;
214 |   }
215 | 
216 |   private getColors(d, i) {
217 |     if (this.colorScale) {
218 |       return this.colorScale(i);
219 |     }
220 | 
221 |     if (this.color) {
222 |       return d[this.color];
223 |     }
224 | 
225 |     if (d.color) {
226 |       return d.color;
227 |     }
228 |   }
229 | }
230 | 


--------------------------------------------------------------------------------
/src/angularD3/directives/axis.ts:
--------------------------------------------------------------------------------
  1 | import { Input, Host, Directive, ElementRef, Optional } from '@angular/core';
  2 | import { D3ChartDirective, D3MarginDirective, D3Element, D3Scale } from './chart';
  3 | import * as d3 from 'd3';
  4 | import * as cloneDeep from 'lodash/fp/cloneDeep';
  5 | 
  6 | @Directive({
  7 |   selector: '[d3-axis]'
  8 | })
  9 | export class D3AxisDirective extends D3Element implements D3Scale {
 10 |   @Input() name: string;
 11 |   @Input() format: string;
 12 |   @Input('time-format') timeFormat: string;
 13 |   @Input('time-scale') timeScale: string;
 14 |   @Input('time-interval') timeInterval: string;
 15 |   @Input('tick-size') tickSize: string;
 16 |   @Input('tick-dx') tickDx: string;
 17 |   @Input('tick-dy') tickDy: string;
 18 |   @Input('tick-anchor') tickAnchor: string;
 19 |   @Input('first-tick-dx') firstTickDx: string;
 20 |   @Input('first-tick-dy') firstTickDy: string;
 21 |   @Input('first-tick-anchor') firstTickAnchor: string;
 22 |   @Input('last-tick-dx') lastTickDx: string;
 23 |   @Input('last-tick-dy') lastTickDy: string;
 24 |   @Input('last-tick-anchor') lastTickAnchor: string;
 25 | 
 26 |   @Input('custom-time-format') customTimeFormat: any[];
 27 |   @Input('tick-values') tickValues: any[];
 28 |   @Input() filter: Function;
 29 |   @Input() orientation = 'bottom';
 30 |   @Input() reverse = false;
 31 |   @Input() extent = false;
 32 |   @Input() ticks = 5;
 33 | 
 34 |   private _label: string;
 35 |   private _labelElement;
 36 |   private _axisElement;
 37 |   private _grid;
 38 |   private _gridElement;
 39 |   private _scale: any = d3.scale.linear();
 40 | 
 41 |   constructor(chart: D3ChartDirective, el: ElementRef, @Optional() margin?: D3MarginDirective) {
 42 |     super(chart, el, margin);
 43 |     chart.addScale(this);
 44 |   }
 45 | 
 46 |   redraw() {
 47 |     const data = this.data;
 48 | 
 49 |     if (!data || !data.length) {
 50 |       return;
 51 |     }
 52 | 
 53 |     this.updateAxis();
 54 |     this.updateLabel();
 55 |     this.updateGrid();
 56 | 
 57 |     if (!data || data.length < 0) {
 58 |       return;
 59 |     }
 60 | 
 61 |     const scale = this._scale;
 62 |     scale.range(this.range);
 63 |     const domain = this.filter ? this.filter(data) : data.map(d => d[this.name]);
 64 | 
 65 |     if (this.extent) {
 66 |       scale.domain(d3.extent(domain));
 67 |     } else {
 68 |       scale.domain([0, d3.max(domain)]);
 69 |     }
 70 |   }
 71 | 
 72 |   @Input()
 73 |   get scale(): string {
 74 |     return this._scale;
 75 |   }
 76 |   set scale(value: string) {
 77 |     if (value === 'time') {
 78 |       this._scale = d3.time.scale();
 79 |     } else if (value) {
 80 |       this._scale = d3.scale[value]();
 81 |     } else {
 82 |       this._scale = d3.scale.linear();
 83 |     }
 84 |   }
 85 | 
 86 |   @Input()
 87 |   get grid() {
 88 |     return this._grid;
 89 |   }
 90 |   set grid(value) {
 91 |     this._grid = (value === 'true' || value === true);
 92 |     this.updateGrid();
 93 |   }
 94 | 
 95 |   @Input()
 96 |   get label(): string {
 97 |     return this._label;
 98 |   }
 99 |   set label(value: string) {
100 |     this._label = value;
101 | 
102 |     if (this._labelElement) {
103 |       this._labelElement.text(value);
104 |     }
105 |   }
106 | 
107 |   public isVertical(): boolean {
108 |     return this.orientation === 'top' || this.orientation === 'bottom';
109 |   }
110 | 
111 |   private get range(): [number, number] {
112 |     let range;
113 | 
114 |     if (this.orientation === 'top' || this.orientation === 'bottom') {
115 |       range = [0, this.width];
116 |     } else {
117 |       range = [this.height, 0];
118 |     }
119 | 
120 |     if (this.reverse) {
121 |       range = range.reverse();
122 |     }
123 | 
124 |     return range;
125 |   }
126 | 
127 |   private get translation(): string {
128 |     return {
129 |       'bottom': `translate(0, ${this.height})`,
130 |       'right': `translate(${this.width}, 0)`
131 |     }[this.orientation] || 'translate(0, 0)';
132 |   }
133 | 
134 |   private createAxis() {
135 |     const axis = d3.svg.axis().scale(this.scale).orient(this.orientation);
136 | 
137 |     if (this.ticks) {
138 |       axis.ticks(this.ticks);
139 |     }
140 | 
141 |     if (this.timeScale) {
142 |       axis.ticks(d3.time[this.timeScale], this.timeInterval);
143 |     }
144 | 
145 |     if (this.tickValues) {
146 |       axis.tickValues(this.tickValues);
147 |     }
148 | 
149 |     if (this.tickSize) {
150 |       const tickSize = this.tickSize.split(',');
151 |       axis.innerTickSize(+tickSize[0]);
152 |       axis.outerTickSize(+tickSize[1]);
153 |     }
154 | 
155 |     if (this.customTimeFormat) {
156 |       // We copy this because D3 is bad and mutates the time format.
157 |       // See: https://github.com/mbostock/d3/issues/1769
158 |       const copy = cloneDeep(this.customTimeFormat);
159 |       const mf = d3.time.format.multi(copy);
160 |       axis.tickFormat(d => mf(new Date(d)));
161 |     }
162 | 
163 |     if (this.timeFormat) {
164 |       const tf = d3.time.format(this.timeFormat);
165 |       axis.tickFormat(d => tf(new Date(d)));
166 |     } else if (this.format) {
167 |       axis.tickFormat(d3.format(this.format));
168 |     }
169 | 
170 |     return axis;
171 |   }
172 | 
173 |   private adjustTickLabels(axis) {
174 |     const tickLabels = axis.selectAll('.tick text');
175 |     if (this.tickDy) {
176 |       tickLabels.attr('dy', this.tickDy);
177 |     }
178 | 
179 |     if (this.tickDx) {
180 |       tickLabels.attr('dx', this.tickDx);
181 |     }
182 | 
183 |     if (this.tickAnchor) {
184 |       tickLabels.style('text-anchor', this.tickAnchor);
185 |     }
186 | 
187 |     const lastTickLabels = d3.select(tickLabels[0].slice(-1)[0]);
188 |     if (this.lastTickDy) {
189 |       lastTickLabels.attr('dy', this.lastTickDy);
190 |     }
191 | 
192 |     if (this.lastTickDx) {
193 |       lastTickLabels.attr('dx', this.lastTickDx);
194 |     }
195 | 
196 |     if (this.lastTickAnchor) {
197 |       lastTickLabels.style('text-anchor', this.lastTickAnchor);
198 |     }
199 | 
200 |     const firstTickLabels = d3.select(tickLabels[0][0]);
201 |     if (this.firstTickDy) {
202 |       firstTickLabels.attr('dy', this.firstTickDy);
203 |     }
204 | 
205 |     if (this.firstTickDx) {
206 |       firstTickLabels.attr('dx', this.firstTickDx);
207 |     }
208 | 
209 |     if (this.firstTickAnchor) {
210 |       firstTickLabels.style('text-anchor', this.firstTickAnchor);
211 |     }
212 |   }
213 | 
214 |   private updateAxis() {
215 |     if (!this._axisElement) {
216 |       this._axisElement = this.element.append('g');
217 |     }
218 | 
219 |     const axis = this._axisElement;
220 | 
221 |     axis.attr('class', `axis axis-${this.orientation} axis-${this.name}`)
222 |       .attr('transform', this.translation)
223 |       .call(this.createAxis());
224 | 
225 |     this.adjustTickLabels(axis);
226 |   }
227 | 
228 |   private updateLabel() {
229 |     if (!this._axisElement) {
230 |       return;
231 |     }
232 | 
233 |     if (!this._labelElement) {
234 |       this._labelElement = this._axisElement
235 |         .append('text')
236 |         .attr('class', 'axis-label');
237 |     }
238 | 
239 |     this._labelElement.text(this._label);
240 |     this.positionLabel(this._labelElement);
241 |   }
242 | 
243 |   private positionLabel(label) {
244 |     switch (this.orientation) {
245 |       case 'bottom':
246 |         label.attr('x', `${this.width / 2}`)
247 |           .attr('dy', `${this.margin.bottom}`)
248 |           .attr('style', 'text-anchor: middle;');
249 |         break;
250 | 
251 |       case 'top':
252 |         label.attr('x', `${this.width / 2}`)
253 |           .attr('dy', `${-this.margin.top}`)
254 |           .attr('style', 'text-anchor: middle;');
255 |         break;
256 | 
257 |       case 'left':
258 |         label.attr('x', `${(this.height / 2) * -1}`)
259 |           .attr('dy', `${-this.margin.left + 18}`)
260 |           .attr('style', 'text-anchor: middle;')
261 |           .attr('transform', 'rotate(-90)');
262 |         break;
263 | 
264 |       case 'right':
265 |         label.attr('x', `${this.height / 2}`)
266 |           .attr('dy', `${-this.margin.right + 18}`)
267 |           .attr('style', 'text-anchor: middle;')
268 |           .attr('transform', 'rotate(90)');
269 |         break;
270 |     }
271 |   }
272 | 
273 |   private updateGrid() {
274 |     if (this._grid && this._axisElement) {
275 |       this._gridElement = this._gridElement || this.element.append('g')
276 |         .attr('class', `axis-grid axis-grid-${this.name}`);
277 |       this.drawGrid();
278 |     } else if (this._gridElement) {
279 |       this._gridElement.remove();
280 |       this._gridElement = null;
281 |     }
282 |   }
283 | 
284 |   private drawGrid() {
285 |     let size;
286 |     let transform;
287 | 
288 |     switch (this.orientation) {
289 |       case 'bottom':
290 |         size = this.height;
291 |         break;
292 | 
293 |       case 'top':
294 |         transform = `translate(0, ${this.height})`;
295 |         size = this.height;
296 |         break;
297 | 
298 |       case 'left':
299 |         transform = `translate(${this.width}, 0)`;
300 |         size = this.width;
301 |         break;
302 | 
303 |       case 'right':
304 |         size = this.width;
305 |         break;
306 |     }
307 | 
308 |     if (transform) {
309 |       this._gridElement.attr('transform', transform);
310 |     }
311 |     const axis = this.createAxis().innerTickSize(size).outerTickSize(0).tickFormat('');
312 |     this._gridElement.call(axis);
313 |   }
314 | }
315 | 


--------------------------------------------------------------------------------