Skip to content

Commit 2a7a6f2

Browse files
tgpetrovtgpetrov
authored
Merge pull request #281 from NativeScript/update-chart-demo
chore: update 'chart' demo for nativescript-ui-chart v7.0.0
2 parents 29528f6 + 7ec2113 commit 2a7a6f2

29 files changed

Lines changed: 1048 additions & 20 deletions

‎chart/app/App_Resources/Android/src/main/AndroidManifest.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<activity
2929
android:name="com.tns.NativeScriptActivity"
3030
android:label="@string/title_activity_kimera"
31-
android:configChanges="keyboardHidden|orientation|screenSize"
31+
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
3232
android:theme="@style/LaunchScreenTheme">
3333

3434
<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

‎chart/app/App_Resources/Android/src/main/res/values/styles.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121

2222
<!-- theme to use AFTER launch screen is loaded-->
2323
<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
24+
<item name="android:forceDarkAllowed">true</item>
2425
<item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
2526

2627
<item name="colorPrimary">@color/ns_primary</item>

‎chart/app/app.routing.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,48 @@ const APP_ROUTES: Routes = [
206206
"title": "Negative Values"
207207
}
208208
},
209+
{
210+
path: "ChartCssBarComponent",
211+
loadChildren: './examples/chart-examples.module#ChartExamplesModule',
212+
data: {
213+
"title": "Bar CSS"
214+
}
215+
},
216+
{
217+
path: "ChartCssLineComponent",
218+
loadChildren: './examples/chart-examples.module#ChartExamplesModule',
219+
data: {
220+
"title": "Line CSS"
221+
}
222+
},
223+
{
224+
path: "ChartCssAreaComponent",
225+
loadChildren: './examples/chart-examples.module#ChartExamplesModule',
226+
data: {
227+
"title": "Area CSS"
228+
}
229+
},
230+
{
231+
path: "ChartCssScatterComponent",
232+
loadChildren: './examples/chart-examples.module#ChartExamplesModule',
233+
data: {
234+
"title": "Scatter CSS"
235+
}
236+
},
237+
{
238+
path: "ChartCssCandlestickComponent",
239+
loadChildren: './examples/chart-examples.module#ChartExamplesModule',
240+
data: {
241+
"title": "Candlestick CSS"
242+
}
243+
},
244+
{
245+
path: "ChartCssDonutComponent",
246+
loadChildren: './examples/chart-examples.module#ChartExamplesModule',
247+
data: {
248+
"title": "Donut CSS"
249+
}
250+
},
209251
{
210252
path: "ChartStylingAxesComponent",
211253
loadChildren: './examples/chart-examples.module#ChartExamplesModule',

‎chart/app/examples/chart-examples.module.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ import { ChartStylingSelectionComponent } from './styling/chart-styling-selectio
4040
import { ChartStylingSeriesComponent } from './styling/chart-styling-series.component';
4141
import { ChartStylingTicksComponent } from './styling/chart-styling-ticks.component';
4242
import { ChartStylingBarSeriesComponent } from './styling/chart-styling-bar-series.component';
43+
import { ChartCssBarComponent } from './css/chart-css-bar.component';
44+
import { ChartCssLineComponent } from './css/chart-css-line.component';
45+
import { ChartCssAreaComponent } from './css/chart-css-area.component';
46+
import { ChartCssScatterComponent } from './css/chart-css-scatter.component';
47+
import { ChartCssCandlestickComponent } from './css/chart-css-candlestick.component';
48+
import { ChartCssDonutComponent } from './css/chart-css-donut.component';
4349

4450
import { routes } from './chart-examples.routing';
4551
import { CommonDirectivesModule } from '../navigation/directives/common-directives.module';
@@ -89,7 +95,13 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
8995
ChartStylingSeriesComponent,
9096
ChartStylingTicksComponent,
9197
ChartLabelVisibilityComponent,
92-
ChartStylingBarSeriesComponent
98+
ChartStylingBarSeriesComponent,
99+
ChartCssAreaComponent,
100+
ChartCssBarComponent,
101+
ChartCssCandlestickComponent,
102+
ChartCssDonutComponent,
103+
ChartCssLineComponent,
104+
ChartCssScatterComponent
93105
]
94106
})
95107
export class ChartExamplesModule { }

‎chart/app/examples/chart-examples.routing.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ import { ChartStylingSelectionComponent } from './styling/chart-styling-selectio
3737
import { ChartStylingSeriesComponent } from './styling/chart-styling-series.component';
3838
import { ChartStylingTicksComponent } from './styling/chart-styling-ticks.component';
3939
import { ChartStylingBarSeriesComponent } from './styling/chart-styling-bar-series.component';
40+
import { ChartCssAreaComponent } from './css/chart-css-area.component';
41+
import { ChartCssBarComponent } from './css/chart-css-bar.component';
42+
import { ChartCssCandlestickComponent } from './css/chart-css-candlestick.component';
43+
import { ChartCssDonutComponent } from './css/chart-css-donut.component';
44+
import { ChartCssLineComponent } from './css/chart-css-line.component';
45+
import { ChartCssScatterComponent } from './css/chart-css-scatter.component';
4046

4147
export const routes: Routes = [
4248
{ path: 'ChartAnnotationsGridLineComponent', component: ChartAnnotationsGridLineComponent },
@@ -74,5 +80,11 @@ export const routes: Routes = [
7480
{ path: 'ChartStylingSeriesComponent', component: ChartStylingSeriesComponent },
7581
{ path: 'ChartStylingTicksComponent', component: ChartStylingTicksComponent },
7682
{ path: 'ChartLabelVisibilityComponent', component: ChartLabelVisibilityComponent },
77-
{ path: 'ChartStylingBarSeriesComponent', component: ChartStylingBarSeriesComponent }
83+
{ path: 'ChartStylingBarSeriesComponent', component: ChartStylingBarSeriesComponent },
84+
{ path: 'ChartCssAreaComponent', component: ChartCssAreaComponent },
85+
{ path: 'ChartCssBarComponent', component: ChartCssBarComponent },
86+
{ path: 'ChartCssCandlestickComponent', component: ChartCssCandlestickComponent },
87+
{ path: 'ChartCssDonutComponent', component: ChartCssDonutComponent },
88+
{ path: 'ChartCssLineComponent', component: ChartCssLineComponent },
89+
{ path: 'ChartCssScatterComponent', component: ChartCssScatterComponent }
7890
];

‎chart/app/examples/css/chart-css-area.component.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
RadCartesianChart {
2+
margin: 12;
3+
background: white;
4+
border-color: #5F6368;
5+
border-width: 2;
6+
border-radius: 6;
7+
padding: 46 16 6 26;
8+
}
9+
10+
AreaSeries {
11+
stack-mode: stack;
12+
stroke-color: white;
13+
stroke-width: 4;
14+
}
15+
16+
AreaSeries[index=0] {
17+
fill-color: #914DF3;
18+
}
19+
20+
AreaSeries[index=1] {
21+
fill-color: #3CAFA4;
22+
}
23+
24+
AreaSeries[index=2] {
25+
fill-color: #F5A067;
26+
}
27+
28+
DateTimeContinuousAxis {
29+
major-step: 6;
30+
major-step-unit: day;
31+
plot-mode: on-ticks;
32+
stroke-color: #9AA0A6;
33+
line-thickness: 2;
34+
ticks-color: #9AA0A6;
35+
ticks-thickness: 2;
36+
ticks-length: 4;
37+
ticks-offset: -1;
38+
label-fit-mode: none;
39+
date-format: "d/M";
40+
}
41+
42+
LinearAxis {
43+
horizontal-location: right;
44+
line-hidden: true;
45+
ticks-hidden: true;
46+
label-fit-mode: none;
47+
}
48+
49+
ChartAxisLabel {
50+
padding: 6;
51+
font-size: 14;
52+
color:#5F6368;
53+
}
54+
55+
DateTimeContinuousAxis ChartAxisLabel {
56+
margin: 6;
57+
}
58+
59+
LinearAxis ChartAxisLabel {
60+
format: "%.0f";
61+
}
62+
63+
Label.title {
64+
font-size: 26;
65+
margin: 12 12 0 12;
66+
color:#212121;
67+
}
68+
69+
Label.subtitle {
70+
font-size: 14;
71+
margin: 24 32 0 12;
72+
color:#5F6368;
73+
horizontal-align:right;
74+
vertical-align: top;
75+
}
76+
77+
.legend {
78+
margin: 12;
79+
color: #5F6368;
80+
}
81+
82+
.legend .symbol {
83+
border-radius: 16;
84+
width: 16;
85+
height: 16;
86+
color: #5F6368;
87+
}
88+
89+
.legend .symbol.first {
90+
background: #914DF3;
91+
margin: 0 4;
92+
}
93+
94+
.legend .symbol.second {
95+
background: #3CAFA4;
96+
margin: 0 4;
97+
}
98+
99+
.legend .symbol.third {
100+
background: #F5A067;
101+
margin: 0 4;
102+
}

‎chart/app/examples/css/chart-css-area.component.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton rows="auto, 300, auto">
2+
<Label class="title" text="Users in the last month"></Label>
3+
<RadCartesianChart allowAnimations="false" row="1">
4+
<RadCartesianChartGrid tkCartesianGrid
5+
horizontalLinesVisible="false"
6+
verticalLinesVisible="false"
7+
horizontalStripLinesVisible="false"
8+
verticalStripLinesVisible="false"
9+
horizontalStrokeColor="#00000000"
10+
verticalStrokeColor="#00000000"
11+
horizontalStripLineColor="#00000000, #00000000">
12+
</RadCartesianChartGrid>
13+
14+
<AreaSeries tkCartesianSeries index="0" [items]="usersData" categoryProperty="Date" valueProperty="CategoryA"></AreaSeries>
15+
<AreaSeries tkCartesianSeries index="1" [items]="usersData" categoryProperty="Date" valueProperty="CategoryB"></AreaSeries>
16+
<AreaSeries tkCartesianSeries index="2" [items]="usersData" categoryProperty="Date" valueProperty="CategoryC"></AreaSeries>
17+
18+
<DateTimeContinuousAxis tkCartesianHorizontalAxis minimum="04/11/2019" maximum="03/12/2019"></DateTimeContinuousAxis>
19+
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
20+
21+
</RadCartesianChart>
22+
23+
<Label class="subtitle" row="1" text="Users"></Label>
24+
25+
<GridLayout class="legend" row="2" columns="auto,*,auto,*,auto,*">
26+
<StackLayout class="symbol first"></StackLayout>
27+
<Label text="Category A" column="1"></Label>
28+
<StackLayout class="symbol second" column="2"></StackLayout>
29+
<Label text="Category B" column="3"></Label>
30+
<StackLayout class="symbol third" column="4"></StackLayout>
31+
<Label text="Category C" column="5"></Label>
32+
</GridLayout>
33+
</GridLayout>

‎chart/app/examples/css/chart-css-area.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { DataService } from '../data-services/data.service';
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'tk-chart-css-area',
7+
providers: [DataService],
8+
templateUrl: 'chart-css-area.component.html',
9+
styleUrls: ['chart-css-area.component.css']
10+
})
11+
export class ChartCssAreaComponent implements OnInit {
12+
private _usersData: any;
13+
14+
constructor(private _dataService: DataService) { }
15+
16+
get usersData(): any {
17+
return this._usersData;
18+
}
19+
20+
ngOnInit() {
21+
this._usersData = this._dataService.getUsersData();
22+
}
23+
}

‎chart/app/examples/css/chart-css-bar.component.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
RadCartesianChart {
2+
margin: 12;
3+
padding: 12;
4+
}
5+
6+
LinearAxis {
7+
maximum: 100;
8+
}
9+
10+
CategoricalAxis, LinearAxis {
11+
line-hidden: true;
12+
ticks-hidden: true;
13+
}
14+
15+
CategoricalAxis ChartAxisLabel{
16+
color: #3C4044;
17+
padding: 6;
18+
font-family: sans-serif;
19+
}
20+
21+
LinearAxis ChartAxisLabel {
22+
color: transparent;
23+
}
24+
25+
BarSeries {
26+
show-labels: true;
27+
fill-color: #C8A1FF;
28+
stroke-color: white;
29+
stroke-width: 4;
30+
}
31+
32+
BarSeries[index=1] {
33+
fill-color: #6215EE;
34+
}
35+
36+
ChartSeriesLabel {
37+
margin: 16;
38+
font-size: 12;
39+
color: #C8A1FF;
40+
background-color: transparent;
41+
border-color: transparent;
42+
border-width: 2;
43+
format: "%.1f";
44+
}
45+
46+
BarSeries[index=1] ChartSeriesLabel {
47+
color: #6215EE;
48+
}
49+
50+
.root {
51+
background: white;
52+
}
53+
54+
Label.title {
55+
font-size: 26;
56+
margin: 12 12 0 12;
57+
color:#212121;
58+
}
59+
60+
Label.subtitle {
61+
font-size: 14;
62+
margin: 0 12 0 12;
63+
color:#70212121;
64+
}
65+
66+
.legend {
67+
margin: 12;
68+
color: #5F6368;
69+
}
70+
71+
.legend .symbol {
72+
border-radius: 20;
73+
width: 20;
74+
height: 20;
75+
}
76+
77+
.legend .symbol.first {
78+
background: #6215EE;
79+
margin: 0 8 0 12;
80+
}
81+
82+
.legend .symbol.second {
83+
background: #C8A1FF;
84+
margin: 0 8 0 30;
85+
}

0 commit comments

Comments
 (0)