Permalink
Browse files

feat(line-chart): initial line-chart

  • Loading branch information...
jkuri committed Sep 14, 2017
1 parent 1740ab6 commit 2c9be48ef704ea9b6a83502f9033f2fb72029051

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -77,6 +77,7 @@
"@types/chai-as-promised": "7.1.0",
"@types/chalk": "^0.4.31",
"@types/cors": "^2.8.1",
"@types/d3": "^4.10.0",
"@types/express": "^4.0.37",
"@types/express-session": "^1.15.3",
"@types/jasmine": "^2.5.54",
@@ -116,6 +117,7 @@
"core-js": "^2.5.1",
"cors": "^2.8.4",
"css-loader": "^0.28.7",
"d3": "^4.10.2",
"date-fns": "^1.28.5",
"enhanced-resolve": "^3.4.1",
"express": "^4.15.4",
@@ -32,6 +32,7 @@ import { AppSettingsComponent } from './components/app-settings';
import { AppTeamComponent } from './components/app-team';
import { AppLogsComponent } from './components/app-logs';
import { AppDashboardComponent } from './components/app-dashboard';
import { AppLineChartComponent } from './components/app-line-chart';


@NgModule({
@@ -52,6 +53,7 @@ import { AppDashboardComponent } from './components/app-dashboard';
AppUserComponent,
AppLogsComponent,
AppDashboardComponent,
AppLineChartComponent,
EqualValidator,
SafeHtmlPipe,
ToTimePipe
@@ -4,7 +4,7 @@
<div class="container">
<div class="nav-left is-hidden-mobile">
<span class="nav-item">
<h1>Dashboard</h1>
<h1>Builds</h1>
</span>
</div>
<div class="nav-center is-hidden-mobile">
@@ -1,3 +1,43 @@
<app-header></app-header>

<nav class="nav sub-nav">
<div class="container">
<div class="nav-left is-hidden-mobile">
<span class="nav-item">
<h1>Dashboard</h1>
</span>
</div>
<div class="nav-center is-hidden-mobile">

</div>
<div class="nav-right"></div>
</div>
</nav>

<div class="container">
<div class="columns">
<div class="column is-12">
<div class="content">
<div class="container" *ngIf="loading">
<img src="images/icons/flickr.svg" class="main-loader">
</div>

<div class="columns is-multiline" *ngIf="!loading">
<div class="column is-8">
<div class="content-box">
<app-line-chart></app-line-chart>
</div>
</div>
<div class="column is-4">
<div class="content-box">

</div>
<div class="content-box">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -1,12 +1,22 @@
import { Component } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { SocketService } from '../../services/socket.service';

@Component({
selector: 'app-dashboard',
templateUrl: 'app-dashboard.component.html'
})
export class AppDashboardComponent {
export class AppDashboardComponent implements OnInit, OnDestroy {
loading: boolean;

constructor(private socketService: SocketService) { }
constructor(private socketService: SocketService) {
this.loading = true;
}

ngOnInit() {
this.loading = false;
}

ngOnDestroy() {

}
}
@@ -0,0 +1 @@
<div class="line-chart-container"></div>
@@ -0,0 +1,127 @@
import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
import {
select,
scaleTime,
scaleLinear,
scaleOrdinal,
timeParse,
line,
curveLinear,
extent,
min,
max,
axisBottom,
axisLeft,
area
} from 'd3';

@Component({
selector: 'app-line-chart',
templateUrl: 'app-line-chart.component.html'
})
export class AppLineChartComponent implements OnInit, OnDestroy {
data: any[];
el: Element;

constructor(private elementRef: ElementRef) {
this.data = [
{ date: '2017-01-01', value: 0 },
{ date: '2017-02-01', value: 10 },
{ date: '2017-03-01', value: 5 },
{ date: '2017-04-01', value: 7 },
{ date: '2017-05-01', value: 24 },
{ date: '2017-06-01', value: 28 },
{ date: '2017-07-01', value: 32 },
{ date: '2017-08-01', value: 28 },
{ date: '2017-09-01', value: 20 },
{ date: '2017-10-01', value: 14 },
{ date: '2017-11-01', value: 6 },
{ date: '2017-12-01', value: 12 }
];
}

ngOnInit() {
this.el = this.elementRef.nativeElement.querySelector('.line-chart-container');
this.render();
}

ngOnDestroy() { }

render() {
const margin = { top: 20, right: 50, bottom: 30, left: 50 };
const style: CSSStyleDeclaration = getComputedStyle(this.el);
const width = parseInt(style.width, 10) - margin.left - margin.right;
const height = parseInt(style.height, 10) - margin.top - margin.bottom;

const svg = select(this.el).append('svg').attr('width', '100%').attr('height', '100%');
const g = svg.append('g')
.attr('width', width)
.attr('height', height)
.attr('transform', `translate(${margin.left}, ${margin.top})`);

const parseTime = timeParse('%Y-%m-%d');

const x = scaleTime().rangeRound([0, width]);
const y = scaleLinear().rangeRound([height, 0]);

this.data = this.data.map(d => {
return { date: parseTime(d.date), value: d.value };
});

x.domain(extent(this.data, (d: any) => d.date));
y.domain(extent(this.data, (d: any) => d.value));

const l = line()
.curve(curveLinear)
.x((d: any) => x(d.date))
.y((d: any) => y(d.value));

const a = area()
.curve(curveLinear)
.x((d: any) => x(d.date))
.y1((d: any) => y(d.value));

a.y0(y(0));

const defs = svg.append('defs');
const gradient = defs.append('linearGradient')
.attr('id', 'mainGradient')
.attr('x1', '0%').attr('y1', '13%')
.attr('x2', '0%').attr('y2', '100%');

gradient.append('stop')
.attr('stop-color', '#00ACFF')
.attr('stop-opacity', '0.1')
.attr('offset', 0);

gradient.append('stop')
.attr('stop-color', 'rgba(0,172,255,0.00)')
.attr('stop-opacity', '0.1')
.attr('offset', 1);

g.append('g')
.attr('class', 'axis axis--x')
.attr('transform', `translate(0, ${height})`)
.call(axisBottom(x));

g.append('g')
.attr('class', 'axis axis--y')
.call(axisLeft(y))
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '0.71em')
.attr('fill', 'white')
.text('Temperature, ºC');

g.append('path')
.attr('d', l(this.data))
.attr('fill', 'none')
.attr('stroke', '#00AAFF')
.attr('stroke-width', '2px');

g.append('path')
.attr('d', a(this.data))
.attr('fill', 'url(#mainGradient)');
}
}
@@ -0,0 +1 @@
export * from './app-line-chart.component';
@@ -394,3 +394,30 @@ progress
display: block
color: $grey-light !important
margin-left: 5px

.content-box
padding: 30px
background: $white
border: 1px solid $border
border-radius: 4px
width: 100%
min-height: 215px
margin-bottom: 30px

.line-chart-container
width: 100%
height: 400px

.axis
font-family: $font-family-regular

.domain
stroke: transparent

.tick

line
stroke: transparent

text
fill: $text

0 comments on commit 2c9be48

Please sign in to comment.