Skip to content

Commit a2ae986

Browse files
amcdnlamcdnl
committed
Initial Commit!
1 parent 1f2282b commit a2ae986

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+7042
-0
lines changed

‎.editorconfig

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# EditorConfig is awesome: http://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
# Unix-style newlines with a newline ending every file
7+
[*]
8+
end_of_line = lf
9+
10+
# 2 space indentation
11+
[**.*]
12+
indent_style = space
13+
indent_size = 2

‎.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
.DS_Store
3+
npm-debug.log
4+
dist/
5+
coverage/

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "a2d3",
3+
"version": "1.0.0",
4+
"description": "Angular2 + D3 Charting Library",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/swimlane/a2d3.git"
12+
},
13+
"keywords": [
14+
"angular2",
15+
"angularjs",
16+
"charts",
17+
"charting",
18+
"d3"
19+
],
20+
"author": "Austin McDaniel",
21+
"license": "MIT",
22+
"bugs": {
23+
"url": "https://github.com/swimlane/a2d3/issues"
24+
},
25+
"homepage": "https://github.com/swimlane/a2d3#readme"
26+
}

‎src/BaseChart.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export class BaseChart {
2+
ngOnChanges(changes){
3+
if (changes.scheme){
4+
this.setColors();
5+
}
6+
}
7+
8+
update(){
9+
console.warn('update needs to be implemented in the chart');
10+
}
11+
12+
setColors(){
13+
console.warn('setColors needs to be implemented in the chart');
14+
}
15+
16+
click(data){
17+
console.warn('click needs to be implemented in the chart');
18+
}
19+
}

‎src/areachart/Area.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
2+
import { SvgLinearGradient } from '../common/SvgLinearGradient.js';
3+
4+
@Component({
5+
selector: 'g[area]',
6+
directives: [SvgLinearGradient],
7+
template: `
8+
<svg:g>
9+
<svg:defs>
10+
<svg:g svg-linear-gradient
11+
[color]="fill"
12+
orientation="vertical"
13+
[name]="gradientId"
14+
[startOpacity]="startOpacity"
15+
[endOpacity]="endOpacity"
16+
/>
17+
</svg:defs>
18+
<svg:path
19+
class="viz area"
20+
[attr.d]="path"
21+
[attr.fill]="gradientFill"
22+
[attr.opacity]="opacity"
23+
/>
24+
</svg:g>
25+
`
26+
})
27+
export class Area {
28+
@Input() data;
29+
@Input() path;
30+
@Input() startingPath;
31+
@Input() fill;
32+
@Input() opacity = 1;
33+
@Input() startOpacity = 0.5;
34+
@Input() endOpacity = 1;
35+
@Input() activeLabel;
36+
37+
@Output() clickHandler = new EventEmitter();
38+
39+
constructor(element: ElementRef){
40+
this.element = element.nativeElement;
41+
}
42+
43+
ngOnInit() {
44+
let label = this.data.name;
45+
46+
let active = label === this.activeLabel;
47+
48+
let pageUrl = window.location.href;
49+
this.gradientId = 'grad' + ObjectId().toString();
50+
this.gradientFill = `url(${pageUrl}#${this.gradientId})`;
51+
52+
this.loadAnimation();
53+
}
54+
55+
loadAnimation() {
56+
let node = d3.select(this.element).select('.area');
57+
58+
node
59+
.attr('d', this.startingPath)
60+
61+
this.animateToCurrentForm();
62+
}
63+
64+
animateToCurrentForm(){
65+
let node = d3.select(this.element).select('.area');
66+
67+
node.transition().duration(750)
68+
.attr('d', this.path);
69+
}
70+
}

‎src/areachart/AreaChart.js

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import { Component, Input, Output, EventEmitter } from '@angular/core';
2+
import { calculateViewDimensions } from '../common/viewDimensions.js';
3+
import { colorHelper } from 'common/services/stats/colorSets.js';
4+
import { Chart } from '../common/charts/Chart.js';
5+
import { BaseChart } from '../BaseChart.js';
6+
import { XAxis } from '../common/axes/XAxis.js';
7+
import { YAxis } from '../common/axes/YAxis.js';
8+
import { AreaSeries } from './AreaSeries.js';
9+
import { CircleSeries } from '../common/CircleSeries.js';
10+
import { Timeline } from '../common/Timeline.js';
11+
import { showTooltip, updateTooltip, hideTooltip } from '../common/lineAreaHelpers.js';
12+
13+
@Component({
14+
selector: 'area-chart',
15+
directives: [Chart, XAxis, YAxis, AreaSeries, CircleSeries, Timeline],
16+
template: `
17+
<chart
18+
[legend]="legend"
19+
[view]="view"
20+
[colors]="colors"
21+
[legendData]="results.legend">
22+
23+
<svg:defs>
24+
<svg:clipPath [attr.id]="clipPathId">
25+
<svg:rect
26+
[attr.width]="dims.width + 10"
27+
[attr.height]="dims.height + 10"
28+
[attr.transform]="'translate(-5, -5)'"/>
29+
</svg:clipPath>
30+
</svg:defs>
31+
32+
<svg:g [attr.transform]="transform" class="viz line chart">
33+
<svg:g x-axis
34+
*ngIf="xaxis"
35+
[xScale]="xScale"
36+
[dims]="dims"
37+
[showGridLines]="true"
38+
[showLabel]="showXAxisLabel"
39+
[labelText]="xaxisLabel">
40+
</svg:g>
41+
42+
<svg:g y-axis
43+
*ngIf="yaxis"
44+
[yScale]="yScale"
45+
[dims]="dims"
46+
[showGridLines]="true"
47+
[showLabel]="showYAxisLabel"
48+
[labelText]="yaxisLabel">
49+
</svg:g>
50+
51+
<svg:g [attr.clip-path]="clipPath">
52+
53+
<svg:g area-series
54+
[xScale]="xScale"
55+
[yScale]="yScale"
56+
[color]="colors('Area')"
57+
[data]="results.series[0].array"
58+
[scaleType]="scaleType"
59+
/>
60+
61+
<svg:rect
62+
class="tooltip-area"
63+
[attr.width]="dims.width + 10"
64+
[attr.height]="dims.height + 10"
65+
x="-5"
66+
y="-5"
67+
style="fill: rgb(255, 0, 0); opacity: 0; cursor: 'auto';"
68+
/>
69+
70+
<svg:g circle-series
71+
[xScale]="xScale"
72+
[yScale]="yScale"
73+
[color]="colors('Area')"
74+
[data]="results.series[0].array"
75+
[scaleType]="scaleType"
76+
chartType="area"
77+
(clickHandler)="click($event)"
78+
/>
79+
80+
</svg:g>
81+
</svg:g>
82+
83+
<svg:g timeline
84+
*ngIf="timeline && scaleType === 'time'"
85+
[results]="results"
86+
[view]="view"
87+
[scheme]="scheme"
88+
[customColors]="customColors"
89+
[legend]="legend">
90+
</svg:g>
91+
</chart>
92+
`
93+
})
94+
export class AreaChart extends BaseChart {
95+
@Input() view;
96+
@Input() results;
97+
@Input() margin = [10, 20, 70, 70];
98+
@Input() scheme;
99+
@Input() customColors;
100+
@Input() xaxis;
101+
@Input() yaxis;
102+
@Input() autoScale;
103+
@Input() showXAxisLabel;
104+
@Input() showYAxisLabel;
105+
@Input() xaxisLabel;
106+
@Input() yaxisLabel;
107+
@Input() timeline;
108+
109+
@Output() clickHandler = new EventEmitter();
110+
111+
ngOnInit() {
112+
this.dims = calculateViewDimensions(this.view, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
113+
114+
if (this.timeline){
115+
this.dims.height -= 150;
116+
}
117+
118+
this.results.series[0] = this.results.series[0].sort((a, b) => {
119+
return this.results.d0Domain.indexOf(a.vals[0].label[0][0]) - this.results.d0Domain.indexOf(b.vals[0].label[0][0]);
120+
})
121+
122+
this.yScale = d3.scale.linear()
123+
.range([this.dims.height, 0])
124+
.domain(this.results.m0Domain);
125+
126+
if (!this.autoScale) {
127+
this.yScale.domain([0, this.results.m0Domain[1]]);
128+
}
129+
130+
if (this.results.query && this.results.query.dimensions.length && this.results.query.dimensions[0].field.fieldType === 'date' && this.results.query.dimensions[0].groupByType.value === 'groupBy'){
131+
let domain;
132+
if (this.state.xDomain){
133+
domain = this.state.xDomain;
134+
} else {
135+
domain = d3.extent(this.results.d0Domain, function (d) { return moment(d).toDate(); })
136+
}
137+
this.scaleType = 'time';
138+
this.xScale = d3.time.scale()
139+
.range([0, this.dims.width])
140+
.domain(domain);
141+
} else {
142+
this.scaleType = 'ordinal'
143+
this.xScale = d3.scale.ordinal()
144+
.rangePoints([0, this.dims.width], 0.1)
145+
.domain(this.results.d0Domain);
146+
}
147+
148+
this.setColors();
149+
this.transform = `translate(${ this.dims.xOffset } , ${ this.margin[0] })`;;
150+
151+
let pageUrl = window.location.href;
152+
this.clipPathId = 'clip' + ObjectId().toString();
153+
this.clipPath = `url(${pageUrl}#${this.clipPathId})`;
154+
}
155+
156+
click(data){
157+
this.clickHandler.emit(data);
158+
}
159+
160+
setColors(){
161+
this.colors = colorHelper(this.scheme, 'ordinal', ['Area'], this.customColors);
162+
}
163+
164+
}

0 commit comments

Comments
 (0)