From 7876a54a61a672f720443db5eedb07c8ea6c0d0b Mon Sep 17 00:00:00 2001 From: ZainabKhan Date: Tue, 21 Jun 2016 16:13:04 +0500 Subject: [PATCH 1/2] bar chart and area chart added --- angular-cli-build.js | 4 +- package.json | 2 + src/app/+step1/step1.component.html | 4 + src/app/+step1/step1.component.ts | 3 +- src/app/shared/chart/chart.component.css | 0 src/app/shared/chart/chart.component.html | 2 + src/app/shared/chart/chart.component.spec.ts | 46 +++++++ src/app/shared/chart/chart.component.ts | 136 +++++++++++++++++++ src/app/shared/chart/index.ts | 1 + src/app/shared/index.ts | 1 + src/system-config.ts | 5 + 11 files changed, 202 insertions(+), 2 deletions(-) create mode 100644 src/app/shared/chart/chart.component.css create mode 100644 src/app/shared/chart/chart.component.html create mode 100644 src/app/shared/chart/chart.component.spec.ts create mode 100644 src/app/shared/chart/chart.component.ts create mode 100644 src/app/shared/chart/index.ts diff --git a/angular-cli-build.js b/angular-cli-build.js index 6cd61c5..677ac2d 100644 --- a/angular-cli-build.js +++ b/angular-cli-build.js @@ -13,7 +13,9 @@ module.exports = function(defaults) { 'rxjs/**/*.js', '@angular/**/*.js', 'html5-history-api/*.js', - 'angular2-ie9-shims/*.js' + 'angular2-ie9-shims/*.js', + 'highcharts/**/*.js', + 'angular2-highcharts/**/*js' ] }); }; diff --git a/package.json b/package.json index c93226d..744e711 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", + "angular2-highcharts": "^0.1.0", + "highcharts": "^4.2.5", "angular2-ie9-shims": "0.0.1", "es6-shim": "^0.35.0", "html5-history-api": "^4.2.7", diff --git a/src/app/+step1/step1.component.html b/src/app/+step1/step1.component.html index 2bdc23e..aabeed5 100644 --- a/src/app/+step1/step1.component.html +++ b/src/app/+step1/step1.component.html @@ -54,3 +54,7 @@ + + + + \ No newline at end of file diff --git a/src/app/+step1/step1.component.ts b/src/app/+step1/step1.component.ts index b4ca87a..f9d3f0d 100644 --- a/src/app/+step1/step1.component.ts +++ b/src/app/+step1/step1.component.ts @@ -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 { diff --git a/src/app/shared/chart/chart.component.css b/src/app/shared/chart/chart.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/chart/chart.component.html b/src/app/shared/chart/chart.component.html new file mode 100644 index 0000000..8ef7e57 --- /dev/null +++ b/src/app/shared/chart/chart.component.html @@ -0,0 +1,2 @@ +
+ \ No newline at end of file diff --git a/src/app/shared/chart/chart.component.spec.ts b/src/app/shared/chart/chart.component.spec.ts new file mode 100644 index 0000000..655f70c --- /dev/null +++ b/src/app/shared/chart/chart.component.spec.ts @@ -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) => { + let query = fixture.debugElement.query(By.directive(ChartComponent)); + expect(query).toBeTruthy(); + expect(query.componentInstance).toBeTruthy(); + }); + })); +}); + +@Component({ + selector: 'test', + template: ` + + `, + directives: [ChartComponent] +}) +class ChartComponentTestController { +} + diff --git a/src/app/shared/chart/chart.component.ts b/src/app/shared/chart/chart.component.ts new file mode 100644 index 0000000..1b17e54 --- /dev/null +++ b/src/app/shared/chart/chart.component.ts @@ -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() { + } +} diff --git a/src/app/shared/chart/index.ts b/src/app/shared/chart/index.ts new file mode 100644 index 0000000..fac4a38 --- /dev/null +++ b/src/app/shared/chart/index.ts @@ -0,0 +1 @@ +export { ChartComponent } from './chart.component'; \ No newline at end of file diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts index bb003b4..1299e9a 100644 --- a/src/app/shared/index.ts +++ b/src/app/shared/index.ts @@ -1,3 +1,4 @@ export * from './form-manager'; export * from './form-field'; export * from './form-field/focus-reset-field.directive'; +export * from './chart'; diff --git a/src/system-config.ts b/src/system-config.ts index 81354d3..e4129f7 100644 --- a/src/system-config.ts +++ b/src/system-config.ts @@ -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' } }; //////////////////////////////////////////////////////////////////////////////////////////////// @@ -32,6 +36,7 @@ const barrels: string[] = [ 'app/+step1', 'app/+step2', 'app/shared/form-field', + 'app/shared/chart', /** @cli-barrel */ ]; From a7400fe463383cab9f5003493ba701da73240fbc Mon Sep 17 00:00:00 2001 From: ZainabKhan Date: Tue, 21 Jun 2016 16:13:04 +0500 Subject: [PATCH 2/2] bar chart and area chart added --- angular-cli-build.js | 7 +- src/app/+step1/step1.component.html | 4 + src/app/+step1/step1.component.ts | 3 +- src/app/shared/chart/chart.component.css | 0 src/app/shared/chart/chart.component.html | 2 + src/app/shared/chart/chart.component.spec.ts | 46 +++++++ src/app/shared/chart/chart.component.ts | 136 +++++++++++++++++++ src/app/shared/chart/index.ts | 1 + src/app/shared/index.ts | 1 + src/system-config.ts | 5 + 10 files changed, 202 insertions(+), 3 deletions(-) create mode 100644 src/app/shared/chart/chart.component.css create mode 100644 src/app/shared/chart/chart.component.html create mode 100644 src/app/shared/chart/chart.component.spec.ts create mode 100644 src/app/shared/chart/chart.component.ts create mode 100644 src/app/shared/chart/index.ts diff --git a/angular-cli-build.js b/angular-cli-build.js index a7d5b0a..32ff421 100644 --- a/angular-cli-build.js +++ b/angular-cli-build.js @@ -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', ] }); }; diff --git a/src/app/+step1/step1.component.html b/src/app/+step1/step1.component.html index 2bdc23e..aabeed5 100644 --- a/src/app/+step1/step1.component.html +++ b/src/app/+step1/step1.component.html @@ -54,3 +54,7 @@ + + + + \ No newline at end of file diff --git a/src/app/+step1/step1.component.ts b/src/app/+step1/step1.component.ts index b4ca87a..f9d3f0d 100644 --- a/src/app/+step1/step1.component.ts +++ b/src/app/+step1/step1.component.ts @@ -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 { diff --git a/src/app/shared/chart/chart.component.css b/src/app/shared/chart/chart.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/chart/chart.component.html b/src/app/shared/chart/chart.component.html new file mode 100644 index 0000000..8ef7e57 --- /dev/null +++ b/src/app/shared/chart/chart.component.html @@ -0,0 +1,2 @@ +
+ \ No newline at end of file diff --git a/src/app/shared/chart/chart.component.spec.ts b/src/app/shared/chart/chart.component.spec.ts new file mode 100644 index 0000000..655f70c --- /dev/null +++ b/src/app/shared/chart/chart.component.spec.ts @@ -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) => { + let query = fixture.debugElement.query(By.directive(ChartComponent)); + expect(query).toBeTruthy(); + expect(query.componentInstance).toBeTruthy(); + }); + })); +}); + +@Component({ + selector: 'test', + template: ` + + `, + directives: [ChartComponent] +}) +class ChartComponentTestController { +} + diff --git a/src/app/shared/chart/chart.component.ts b/src/app/shared/chart/chart.component.ts new file mode 100644 index 0000000..1b17e54 --- /dev/null +++ b/src/app/shared/chart/chart.component.ts @@ -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() { + } +} diff --git a/src/app/shared/chart/index.ts b/src/app/shared/chart/index.ts new file mode 100644 index 0000000..fac4a38 --- /dev/null +++ b/src/app/shared/chart/index.ts @@ -0,0 +1 @@ +export { ChartComponent } from './chart.component'; \ No newline at end of file diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts index bb003b4..1299e9a 100644 --- a/src/app/shared/index.ts +++ b/src/app/shared/index.ts @@ -1,3 +1,4 @@ export * from './form-manager'; export * from './form-field'; export * from './form-field/focus-reset-field.directive'; +export * from './chart'; diff --git a/src/system-config.ts b/src/system-config.ts index f20fa11..d6f987b 100644 --- a/src/system-config.ts +++ b/src/system-config.ts @@ -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' } }; //////////////////////////////////////////////////////////////////////////////////////////////// @@ -34,6 +38,7 @@ const barrels: string[] = [ 'app/+step1', 'app/+step2', 'app/shared/form-field', + 'app/shared/chart', /** @cli-barrel */ ];