Skip to content
This repository was archived by the owner on May 3, 2023. It is now read-only.

Commit 262ddc3

Browse files
shiv19shiv19
authored
Merge pull request #19 from cjohn001/master
Updated Angular demo and did some minor cleanups according to https:/…
2 parents bab2368 + c72a012 commit 262ddc3

File tree

10 files changed

+564
-665
lines changed

10 files changed

+564
-665
lines changed

‎demo-angular/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@angular/platform-browser-dynamic": "~10.0.0",
1919
"@angular/router": "~10.0.0",
2020
"@nativescript/angular": "~10.0.0",
21-
"@nativescript/core": "~7.0.0",
21+
"@nativescript/core": "^7.0.0",
2222
"@nativescript/theme": "~2.3.0",
2323
"@nativescript/ui-charts": "file:../src/nativescript-ui-charts.tgz",
2424
"reflect-metadata": "~0.1.12",
@@ -27,10 +27,10 @@
2727
},
2828
"devDependencies": {
2929
"@angular/compiler-cli": "~10.0.0",
30-
"@nativescript/android": "7.0.0",
31-
"@nativescript/ios": "7.0.1",
32-
"@nativescript/types": "~7.0.0",
33-
"@nativescript/webpack": "4.1.0",
30+
"@nativescript/android": "7.0.1",
31+
"@nativescript/ios": "^8.0.0",
32+
"@nativescript/types": "^7.0.0",
33+
"@nativescript/webpack": "~4.1.0",
3434
"@ngtools/webpack": "~10.0.0",
3535
"typescript": "~3.9.0"
3636
},

‎demo-angular/references.d.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
/// <reference path="./node_modules/@nativescript/types/ios.d.ts" />
2-
/// <reference path="./node_modules/@nativescript/types/android.d.ts" />
1+
/// <reference path="./node_modules/@nativescript/types/index.d.ts" />

‎demo-angular/src/app/demos/line-charts/basic-line/basic-line.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
</ActionBar>
44

55
<GridLayout rows="*, auto">
6-
<UIChartsView row="0" [options]="chartOptions"></UIChartsView>
7-
<Button class="btn -primary" row="1" text="Change Data" (tap)="onDataChange($event)" ></Button>
6+
<UIChartsView row="0" (loaded)="chartLoaded($event)"></UIChartsView>
7+
<Button class="btn -primary" row="1" text="Change Data" (tap)="onDataChange($event)"></Button>
88
</GridLayout>

‎demo-angular/src/app/demos/line-charts/basic-line/basic-line.component.ts‎

Lines changed: 112 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import { Component, OnInit } from '@angular/core';
2+
import { EventData } from '@nativescript/core';
3+
import { UIChartsView } from '@nativescript/ui-charts';
24

35
@Component({
4-
selector: "ns-basic-line",
5-
templateUrl: "./basic-line.component.html"
6+
selector: 'ns-basic-line',
7+
templateUrl: './basic-line.component.html',
68
})
79
export class BasicLineComponent implements OnInit {
10+
private _chart: UIChartsView;
811
// onAndroid it is required for you to pass a series skeleton if the data
912
// will be loaded asynchronously
1013
chartOptions: any = {
1114
legend: {
12-
enabled: false
15+
enabled: false,
1316
},
1417
credits: {
15-
enabled: false
18+
enabled: false,
19+
},
20+
exporting: {
21+
enabled: false,
1622
},
1723
yAxis: {
1824
title: {
1925
text: '',
20-
}
26+
},
2127
},
2228
series: [
2329
{
@@ -42,57 +48,88 @@ export class BasicLineComponent implements OnInit {
4248
},
4349
],
4450
};
45-
constructor() { }
46-
51+
//////////////////////////////////////////////////////////////////////////////////////////////////
4752
ngOnInit(): void {
48-
setTimeout(() => {
49-
this.chartOptions = {
53+
this.chartOptions = {
54+
title: {
55+
text: 'Solar Employment Growth by Sector, 2010-2016',
56+
},
57+
exporting: {
58+
enabled: false,
59+
},
60+
subtitle: {
61+
text: 'Source: thesolarfoundation.com',
62+
},
63+
yAxis: {
5064
title: {
51-
text: 'Solar Employment Growth by Sector, 2010-2016',
52-
},
53-
54-
subtitle: {
55-
text: 'Source: thesolarfoundation.com',
65+
text: 'Number of Employees',
5666
},
57-
58-
yAxis: {
59-
title: {
60-
text: 'Number of Employees',
67+
stackLabels: {
68+
enabled: true,
69+
style: {
70+
fontWeight: 'bold',
71+
color: 'gray',
6172
},
62-
stackLabels: {
63-
enabled: true,
64-
style: {
65-
fontWeight: 'bold',
66-
color: 'gray'
67-
}
68-
}
6973
},
70-
71-
xAxis: {
72-
accessibility: {
73-
rangeDescription: 'Range: 2010 to 2017',
74+
},
75+
76+
xAxis: {
77+
accessibility: {
78+
rangeDescription: 'Range: 2010 to 2017',
79+
},
80+
},
81+
82+
legend: {
83+
layout: 'horizontal',
84+
align: 'center',
85+
verticalAlign: 'bottom',
86+
enabled: true,
87+
},
88+
credits: {
89+
enabled: true,
90+
},
91+
92+
plotOptions: {
93+
series: {
94+
label: {
95+
connectorAllowed: false,
7496
},
97+
pointStart: 2010,
98+
},
99+
},
100+
series: [
101+
{
102+
name: 'Installation',
103+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
75104
},
76-
77-
legend: {
78-
layout: 'horizontal',
79-
align: 'center',
80-
verticalAlign: 'bottom',
81-
enabled: true
105+
{
106+
name: 'Manufacturing',
107+
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
82108
},
83-
credits: {
84-
enabled: true
109+
{
110+
name: 'Sales & Distribution',
111+
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
85112
},
86-
87-
plotOptions: {
88-
series: {
89-
label: {
90-
connectorAllowed: false,
91-
},
92-
pointStart: 2010,
93-
},
113+
{
114+
name: 'Project Development',
115+
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
116+
},
117+
{
118+
name: 'Other',
119+
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
94120
},
95-
series: [
121+
],
122+
};
123+
}
124+
125+
//////////////////////////////////////////////////////////////////////////////////////////////////
126+
onDataChange(args: EventData) {
127+
if (this._chart) {
128+
if (this.chartOptions.title.text === 'Title Changed') {
129+
this.chartOptions.title.text =
130+
'Title Changed Again into a very long sentence making it span across multiple lines';
131+
this.chartOptions.subtitle.text = 'Subtitle Changed Again';
132+
this.chartOptions.series = [
96133
{
97134
name: 'Installation',
98135
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
@@ -113,61 +150,36 @@ export class BasicLineComponent implements OnInit {
113150
name: 'Other',
114151
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
115152
},
116-
],
153+
];
154+
} else {
155+
this.chartOptions.title.text = 'Title Changed';
156+
this.chartOptions.subtitle.text = 'Subtitle Changed';
157+
this.chartOptions.series = [
158+
{
159+
name: 'Project Development',
160+
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227].reverse(),
161+
},
162+
{
163+
name: 'Installation',
164+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175].reverse(),
165+
},
166+
{
167+
name: 'Manufacturing',
168+
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
169+
},
170+
{
171+
name: 'Other',
172+
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
173+
},
174+
];
117175
}
118-
}, 2000);
176+
this._chart.updateOptions(this.chartOptions);
177+
}
119178
}
120179

121-
onDataChange(args) {
122-
const cOpts = this.chartOptions;
123-
if (cOpts.title.text === 'Title Changed') {
124-
cOpts.title.text = "Title Changed Again into a very long sentence making it span across multiple lines";
125-
cOpts.subtitle.text = "Subtitle Changed Again";
126-
cOpts.series = [
127-
{
128-
name: 'Installation',
129-
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
130-
},
131-
{
132-
name: 'Manufacturing',
133-
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
134-
},
135-
{
136-
name: 'Sales & Distribution',
137-
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
138-
},
139-
{
140-
name: 'Project Development',
141-
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
142-
},
143-
{
144-
name: 'Other',
145-
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
146-
},
147-
];
148-
} else {
149-
cOpts.title.text = "Title Changed";
150-
cOpts.subtitle.text = "Subtitle Changed";
151-
cOpts.series = [
152-
{
153-
name: 'Project Development',
154-
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227].reverse(),
155-
},
156-
{
157-
name: 'Installation',
158-
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175].reverse(),
159-
},
160-
{
161-
name: 'Manufacturing',
162-
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
163-
},
164-
{
165-
name: 'Other',
166-
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
167-
},
168-
];
169-
}
170-
171-
this.chartOptions = Object.assign({}, cOpts);
180+
//////////////////////////////////////////////////////////////////////////////////////////////////
181+
public chartLoaded(args: EventData) {
182+
this._chart = args.object as UIChartsView;
183+
this._chart.setOptions(this.chartOptions);
172184
}
173185
}

0 commit comments

Comments
 (0)