Skip to content

bar chart and area chart added #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

bar chart and area chart added #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7876a54
bar chart and area chart added
Jun 21, 2016
a7400fe
bar chart and area chart added
Jun 21, 2016
842d3df
Merge branch 'charts' of https://github.com/recurship/angular2-multic…
Jul 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions angular-cli-build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,11 @@ module.exports = function(defaults) {
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'angular2-ie9-shims/*.js',
'ng2-bootstrap/**/*.*',
'moment/**/*.js'
'ng2-bootstrap/**/*.*',
'moment/**/*.js',
'html5-history-api/*.js',
'highcharts/**/*.js',
'angular2-highcharts/**/*js',
]
});
};
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"@angular/router": "3.0.0-alpha.8",
"angular2-highcharts": "^0.1.0",
"highcharts": "^4.2.5",
"angular2-ie9-shims": "0.0.1",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
Expand Down
4 changes: 4 additions & 0 deletions src/app/+step1/step1.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,7 @@
</div>

</form>

<app-chart type="bar"></app-chart>

<app-chart type="area"></app-chart>
3 changes: 2 additions & 1 deletion src/app/+step1/step1.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { ControlGroup, AbstractControl } from '@angular/common';
import { FormManager } from '../shared/form-manager';
import { FormFieldComponent, FormField } from '../shared/form-field';
import { REGIONS } from './regions-data';
import { ChartComponent } from '../shared/chart/index';

@Component({
moduleId: module.id,
selector: 'app-step1',
templateUrl: 'step1.component.html',
styleUrls: ['step1.component.css'],
directives: [FormFieldComponent]
directives: [FormFieldComponent, ChartComponent]
})
export class Step1Component implements OnInit {

Expand Down
Empty file added src/app/shared/chart/chart.component.css
View file
Open in desktop
Empty file.
2 changes: 2 additions & 0 deletions src/app/shared/chart/chart.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<hr>
<chart [options]="options"></chart>
46 changes: 46 additions & 0 deletions src/app/shared/chart/chart.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import {
beforeEach,
beforeEachProviders,
describe,
expect,
it,
inject,
} from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { ChartComponent } from './chart.component';

describe('Component: Chart', () => {
let builder: TestComponentBuilder;

beforeEachProviders(() => [ChartComponent]);
beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
builder = tcb;
}));

it('should inject the component', inject([ChartComponent],
(component: ChartComponent) => {
expect(component).toBeTruthy();
}));

it('should create the component', inject([], () => {
return builder.createAsync(ChartComponentTestController)
.then((fixture: ComponentFixture<any>) => {
let query = fixture.debugElement.query(By.directive(ChartComponent));
expect(query).toBeTruthy();
expect(query.componentInstance).toBeTruthy();
});
}));
});

@Component({
selector: 'test',
template: `
<app-chart></app-chart>
`,
directives: [ChartComponent]
})
class ChartComponentTestController {
}

136 changes: 136 additions & 0 deletions src/app/shared/chart/chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import { Component, OnInit, Input, ElementRef } from '@angular/core';
import { CHART_DIRECTIVES } from 'angular2-highcharts';

@Component({
moduleId: module.id,
selector: 'app-chart',
templateUrl: 'chart.component.html',
styleUrls: ['chart.component.css'],
directives: [CHART_DIRECTIVES]
})
export class ChartComponent implements OnInit {
options: Object;
type: string;

constructor(private el: ElementRef) {
this.type = this.el.nativeElement.attributes['type'].value;

if (this.type === 'bar') {
this.options = {
chart: {
type: 'column'
},
title: {
text: 'You are better off in work by £0.00 per month under the current system'
},
xAxis: {
categories: ['Out of Work', 'In Work']
},
yAxis: {
min: 0,
title: {
text: 'GBP'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
},
tooltip: {
formatter: function() {
return '(' + this.x + ') ' + this.series.name + ': ' + this.y.toFixed(2);
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [
{
name: 'Base Element',
data: [317.64, 317.64]
}, {
name: 'Child Element',
data: [508.75, 508.75]
}, {
name: 'Housing Eement',
data: [405.11, 405.11]
}, {
name: 'Child Benefit',
data: [149.48, 149.48]
}
]
};
}

if (this.type === 'area') {
this.options = {
chart: {
type: 'area',
animation: false,
reflow: false
},
title: {
text: 'Take Home Income: Current System'
},
xAxis: {
tickInterval: 30,
title: {
text: 'Weekly hours worked'
},
labels: {
formatter: function () {
return parseInt(this.value);
}
}
},
tooltip: {
formatter: function () {
if (this.x && this.y) {
return parseInt(this.x) + ', £' + this.y.toFixed(2);
}
return this.x + ', £' + this.y;
}
},
plotOptions: {
area: {
stacking: null,
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
yAxis: {
title: {
text: 'Income (£/month)'
}
},
series: [{
name: 'Take Home Income',
data: [375.162, 382.36199999999997, 389.56199999999995, 396.762, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.8286666666667, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.8286666666667, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 396.82866666666666, 402.55933333333337, 408.31933333333336, 414.07933333333335, 419.83933333333334, 425.59933333333333, 431.3593333333333, 437.1193333333333, 442.8793333333333, 448.6393333333333, 454.39933333333335, 460.15933333333334, 465.9193333333333, 471.6793333333333, 477.4393333333333, 483.19933333333336, 488.95933333333335, 494.71933333333334, 500.47933333333333, 506.2393333333333, 511.99933333333337, 517.7593333333333, 523.5193333333333, 529.2793333333333, 535.0393333333333, 540.7993333333333, 546.5593333333334, 552.3193333333334, 558.0793333333334, 563.8393333333333, 569.5993333333333, 575.3593333333333, 581.1193333333334, 586.8793333333333, 592.6393333333334, 598.3993333333333, 604.1593333333334, 609.9193333333334, 615.6793333333334, 621.4393333333334, 627.1993333333334, 633.6, 640.8000000000001, 648, 655.2, 662.4, 669.6, 676.1844000000001, 682.5204, 688.8564, 695.1924, 701.5284, 707.8644, 714.2004, 720.5364000000001, 726.8724, 733.2084, 739.5444000000001, 745.8804, 752.2164, 758.5523999999999, 764.8884, 771.2244000000001, 777.5604, 783.8964000000001, 790.2324, 796.5684, 802.9044, 809.2404, 815.5764, 821.9123999999999, 828.2484000000001, 834.5844000000001, 840.9204, 847.2564, 853.5924, 859.9284, 866.2644, 872.6004, 878.9364, 885.2724, 890.6224, 895.5184, 1131.2444, 1136.1404, 1141.0364, 1145.9324, 1150.8284, 1155.7244, 1160.6204, 1165.5164, 1170.4124, 1175.3084000000001, 1180.2044, 1185.1004, 1189.9964, 1194.8924000000002, 1199.7884, 1204.6843999999999, 1209.5804, 1214.4764, 1219.3724, 1224.2684000000002, 1229.1644000000001, 1234.0604, 1238.9564, 1243.8524, 1248.7484, 1253.6444, 1258.5403999999999, 1263.4363999999998, 1268.3324000000002, 1273.2284, 1278.1244, 1283.0203999999999, 1287.9164, 1292.8124, 1297.7083999999998, 1302.6044, 1307.5004000000001, 1312.3964, 1317.2924, 1322.1883999999998, 1327.0844, 1331.9804, 1336.8764, 1341.7724, 1346.6684, 1351.5644, 1356.4604, 1361.3564, 1366.2523999999999, 1371.1484, 1376.0444, 1380.9404, 1385.8364, 1390.7324, 1395.6283999999998, 1400.5243999999998, 1405.4204, 1410.3164000000002, 1415.2124000000001, 1420.1083999999998, 1425.0043999999998, 1429.9004, 1434.7964, 1439.6924000000001, 1444.5883999999999, 1449.4844, 1454.3804, 1459.2764, 1464.1724, 1469.0684, 1473.9644, 1478.8604, 1483.7564, 1488.6524, 1493.5484, 1498.4443999999999, 1503.3404, 1508.2364, 1513.1324000000002, 1518.0284, 1522.9243999999999, 1527.8203999999998, 1532.7164, 1537.6124, 1542.5084, 1547.4044, 1552.3004, 1557.1964, 1562.0924, 1566.9883999999997, 1571.8844, 1576.7804, 1581.6764, 1586.5724, 1591.4684, 1596.3644, 1601.2604, 1606.1563999999998, 1611.0524, 1615.9484, 1620.8444, 1625.7404, 1630.6363999999999, 1635.5324, 1640.4284, 1645.3244, 1650.2204, 1655.1164, 1660.0124, 1664.9083999999998, 1669.8043999999998, 1674.7004, 1679.5964000000001, 1684.4924, 1689.3883999999998, 1694.2844, 1699.1804, 1704.0764, 1708.9723999999999, 1713.8684, 1718.7644, 1723.6604, 1728.5564, 1733.4524, 1738.3483999999999, 1743.2444, 1748.1404, 1753.0364, 1757.9324000000001, 1762.8283999999999, 1767.7243999999998, 1772.6203999999998, 1777.5164000000002, 1782.4124000000002, 1787.3084, 1792.2043999999999, 1797.1004, 1801.9964, 1806.8924, 1811.7884, 1816.6844, 1821.5803999999998, 1826.4764, 1831.3724, 1836.2683999999997, 1841.1644000000001, 1846.0603999999998, 1850.9564, 1855.8524, 1860.7483999999997, 1865.6444, 1870.5403999999999, 1875.4364, 1880.3323999999998, 1885.2284, 1890.1244, 1895.0204, 1899.9164, 1904.8123999999998, 1909.7084, 1914.6044, 1919.5004000000001, 1924.3964, 1929.2923999999998, 1934.1884, 1939.0844, 1943.9804000000001, 1948.8764, 1953.7723999999998, 1958.6684, 1963.5644]
}, {
name: 'Benefits',
data: [363.6825, 363.6825, 363.6825, 363.6825, 356.5491666666667, 349.34916666666663, 342.1491666666667, 334.94916666666666, 327.7491666666667, 320.5491666666667, 313.34916666666663, 306.1491666666667, 298.94916666666666, 291.74916666666667, 284.5491666666667, 277.34916666666663, 270.1491666666667, 262.94916666666666, 255.7491666666667, 248.54916666666665, 241.34916666666666, 234.14916666666667, 226.94916666666668, 219.7491666666667, 212.54916666666665, 205.34916666666666, 198.14916666666667, 190.94916666666668, 183.7491666666667, 176.54916666666665, 169.34916666666666, 162.14916666666667, 154.94916666666668, 147.7491666666667, 140.54916666666665, 133.34916666666666, 126.14916666666667, 118.94916666666663, 111.74916666666664, 104.54916666666665, 97.34916666666666, 90.14916666666667, 82.94916666666663, 75.74916666666664, 68.54916666666665, 61.34916666666666, 54.14916666666667, 46.94916666666663, 45.479833333333325, 44.03983333333333, 42.59983333333333, 41.15983333333333, 39.71983333333332, 38.27983333333332, 36.839833333333324, 35.399833333333326, 33.95983333333333, 32.519833333333324, 31.079833333333323, 29.639833333333325, 28.199833333333327, 26.75983333333333, 25.31983333333332, 23.879833333333323, 22.439833333333326, 20.999833333333328, 19.55983333333333, 18.119833333333318, 16.67983333333332, 15.239833333333323, 13.799833333333325, 12.359833333333327, 10.91983333333333, 9.479833333333325, 8.039833333333313, 6.599833333333336, 5.159833333333324, 3.719833333333341, 2.279833333333329, 0.8398333333333241, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83, 230.83]
}]
}
}

}

ngOnInit() {
}
}
1 change: 1 addition & 0 deletions src/app/shared/chart/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { ChartComponent } from './chart.component';
1 change: 1 addition & 0 deletions src/app/shared/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './form-manager';
export * from './form-field';
export * from './form-field/focus-reset-field.directive';
export * from './chart';
5 changes: 5 additions & 0 deletions src/system-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'angular2-highcharts' : 'vendor/angular2-highcharts',
'highcharts': 'vendor/highcharts'
};

/** User packages configuration. */
const packages: any = {
'angular2-highcharts': { defaultExtension: 'js', main: 'index' },
'highcharts': { defaultExtension: 'js', main: 'highcharts' }
};

////////////////////////////////////////////////////////////////////////////////////////////////
Expand Down Expand Up @@ -34,6 +38,7 @@ const barrels: string[] = [
'app/+step1',
'app/+step2',
'app/shared/form-field',
'app/shared/chart',
/** @cli-barrel */
];

Expand Down