Skip to content

Commit e79e5c0

Browse files
nspluginsnsplugins
committed
chore: update 'chart' demo for nativescript-ui-chart v7.0.0
1 parent f91e68b commit e79e5c0

33 files changed

+1060
-39
lines changed

‎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.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
text-align: left;
44
vertical-align: center;
55
font-size: 16;
6-
color:#404040;
76
}
87

98
.titleLabel {

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

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
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+
.ns-dark RadCartesianChart {
11+
background: black;
12+
border-color: white;
13+
}
14+
15+
AreaSeries {
16+
stack-mode: stack;
17+
stroke-color: white;
18+
stroke-width: 4;
19+
}
20+
21+
.ns-dark AreaSeries {
22+
stroke-color: black;
23+
}
24+
25+
-ns-dark AreaSeries {
26+
stroke-color: black;
27+
}
28+
29+
AreaSeries[index=0] {
30+
fill-color: #914DF3;
31+
}
32+
33+
AreaSeries[index=1] {
34+
fill-color: #3CAFA4;
35+
}
36+
37+
AreaSeries[index=2] {
38+
fill-color: #F5A067;
39+
}
40+
41+
DateTimeContinuousAxis {
42+
major-step: 6;
43+
major-step-unit: day;
44+
plot-mode: on-ticks;
45+
stroke-color: #9AA0A6;
46+
line-thickness: 2;
47+
ticks-color: #9AA0A6;
48+
ticks-thickness: 2;
49+
ticks-length: 4;
50+
ticks-offset: -1;
51+
label-fit-mode: none;
52+
date-format: "d/M";
53+
}
54+
55+
.ns-dark DateTimeContinuousAxis {
56+
stroke-color: black;
57+
ticks-color: black;
58+
}
59+
60+
LinearAxis {
61+
horizontal-location: right;
62+
line-hidden: true;
63+
ticks-hidden: true;
64+
label-fit-mode: none;
65+
}
66+
67+
ChartAxisLabel {
68+
padding: 6;
69+
font-size: 14;
70+
color:#5F6368;
71+
}
72+
73+
.ns-dark ChartAxisLabel {
74+
color:white;
75+
}
76+
77+
DateTimeContinuousAxis ChartAxisLabel {
78+
margin: 6;
79+
}
80+
81+
LinearAxis ChartAxisLabel {
82+
format: "%.0f";
83+
}
84+
85+
Label.title {
86+
font-size: 26;
87+
margin: 12 12 0 12;
88+
color:#212121;
89+
}
90+
91+
.ns-dark Label.title {
92+
color:white;
93+
}
94+
95+
Label.subtitle {
96+
font-size: 14;
97+
margin: 24 32 0 12;
98+
color:#5F6368;
99+
horizontal-align:right;
100+
vertical-align: top;
101+
}
102+
103+
.ns-dark Label.subtitle {
104+
color:white;
105+
}
106+
107+
.legend {
108+
margin: 12;
109+
color: #5F6368;
110+
}
111+
112+
.ns-dark .legend {
113+
color: white;
114+
}
115+
116+
.legend .symbol {
117+
border-radius: 16;
118+
width: 16;
119+
height: 16;
120+
color: #5F6368;
121+
}
122+
123+
.ns-dark .legend .symbol {
124+
color: white;
125+
}
126+
127+
.legend .symbol.first {
128+
background: #914DF3;
129+
margin: 0 4;
130+
}
131+
132+
.legend .symbol.second {
133+
background: #3CAFA4;
134+
margin: 0 4;
135+
}
136+
137+
.legend .symbol.third {
138+
background: #F5A067;
139+
margin: 0 4;
140+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { DateTimeDataModel } from "../data-models/date-time-model";
2+
3+
export function onPageLoaded(args) {
4+
const page = args.object;
5+
page.bindingContext = new DateTimeDataModel();
6+
}

‎chart/app/examples/css/area-css-page.xml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
2+
<GridLayout rows="auto, 300, auto">
3+
<Label class="title" text="Users in the last month"></Label>
4+
<chart:RadCartesianChart allowAnimations="false" row="1" id="cartesianChart">
5+
<chart:RadCartesianChart.grid>
6+
<chart:RadCartesianChartGrid
7+
horizontalLinesVisible="false"
8+
verticalLinesVisible="false"
9+
horizontalStripLinesVisible="false"
10+
verticalStripLinesVisible="false"
11+
horizontalStrokeColor="#00000000"
12+
verticalStrokeColor="#00000000"
13+
horizontalStripLineColor="#00000000, #00000000">
14+
</chart:RadCartesianChartGrid>
15+
</chart:RadCartesianChart.grid>
16+
17+
<chart:RadCartesianChart.series>
18+
<chart:AreaSeries index="0" items="{{ usersData }}" categoryProperty="Date" valueProperty="CategoryA"></chart:AreaSeries>
19+
<chart:AreaSeries index="1" items="{{ usersData }}" categoryProperty="Date" valueProperty="CategoryB"></chart:AreaSeries>
20+
<chart:AreaSeries index="2" items="{{ usersData }}" categoryProperty="Date" valueProperty="CategoryC"></chart:AreaSeries>
21+
</chart:RadCartesianChart.series>
22+
23+
<chart:RadCartesianChart.horizontalAxis>
24+
<chart:DateTimeContinuousAxis minimum="04/11/2019" maximum="03/12/2019" />
25+
</chart:RadCartesianChart.horizontalAxis>
26+
<chart:RadCartesianChart.verticalAxis>
27+
<chart:LinearAxis />
28+
</chart:RadCartesianChart.verticalAxis>
29+
30+
</chart:RadCartesianChart>
31+
32+
<Label class="subtitle" row="1" text="Users"></Label>
33+
34+
<GridLayout class="legend" row="2" columns="auto,*,auto,*,auto,*">
35+
<StackLayout class="symbol first"></StackLayout>
36+
<Label text="Category A" column="1"></Label>
37+
<StackLayout class="symbol second" column="2"></StackLayout>
38+
<Label text="Category B" column="3"></Label>
39+
<StackLayout class="symbol third" column="4"></StackLayout>
40+
<Label text="Category C" column="5"></Label>
41+
</GridLayout>
42+
</GridLayout>
43+
</navigation:ExamplePage>

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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+
.ns-dark CategoricalAxis ChartAxisLabel{
22+
color:white;
23+
}
24+
25+
LinearAxis ChartAxisLabel {
26+
color: transparent;
27+
}
28+
29+
BarSeries {
30+
show-labels: true;
31+
fill-color: #C8A1FF;
32+
stroke-color: white;
33+
stroke-width: 4;
34+
}
35+
36+
.ns-dark BarSeries {
37+
stroke-color: black;
38+
}
39+
40+
BarSeries[index=1] {
41+
fill-color: #6215EE;
42+
}
43+
44+
ChartSeriesLabel {
45+
margin: 16;
46+
font-size: 12;
47+
color: #C8A1FF;
48+
background-color: transparent;
49+
border-color: transparent;
50+
border-width: 2;
51+
}
52+
53+
BarSeries[index=1] ChartSeriesLabel {
54+
color: #6215EE;
55+
}
56+
57+
Label.title {
58+
font-size: 26;
59+
margin: 12 12 0 12;
60+
color:#212121;
61+
}
62+
63+
.ns-dark Label.title {
64+
color:white;
65+
}
66+
67+
Label.subtitle {
68+
font-size: 14;
69+
margin: 0 12 0 12;
70+
color:#70212121;
71+
}
72+
73+
.ns-dark Label.subtitle {
74+
color:white;
75+
}
76+
77+
.legend {
78+
margin: 12;
79+
color: #5F6368;
80+
}
81+
82+
.ns-dark .legend {
83+
color: white;
84+
}
85+
86+
.legend .symbol {
87+
border-radius: 20;
88+
width: 20;
89+
height: 20;
90+
}
91+
92+
.legend .symbol.first {
93+
background: #6215EE;
94+
margin: 0 8 0 12;
95+
}
96+
97+
.legend .symbol.second {
98+
background: #C8A1FF;
99+
margin: 0 8 0 30;
100+
}

‎chart/app/examples/css/bar-css-page.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { CategoricalDataModel } from "../data-models/categorical-data-model";
2+
3+
export function onPageLoaded(args) {
4+
const page = args.object;
5+
page.bindingContext = new CategoricalDataModel();
6+
}

‎chart/app/examples/css/bar-css-page.xml

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
2+
<GridLayout class="root" rows="auto, auto, 300, auto">
3+
<Label class="title" text="Smartphone Shipments"></Label>
4+
<Label class="subtitle" row="1" text="(in millions)"></Label>
5+
<chart:RadCartesianChart row="2" allowAnimations="false">
6+
<chart:RadCartesianChart.grid>
7+
<chart:RadCartesianChartGrid
8+
horizontalLinesVisible="false"
9+
verticalLinesVisible="false"
10+
horizontalStripLinesVisible="false"
11+
verticalStripLinesVisible="false"
12+
horizontalStrokeColor="#00000000"
13+
verticalStrokeColor="#00000000"
14+
horizontalStripLineColor="#00000000, #00000000">
15+
</chart:RadCartesianChartGrid>
16+
</chart:RadCartesianChart.grid>
17+
<chart:RadCartesianChart.series>
18+
<chart:BarSeries items="{{ salesData }}" categoryProperty="Vendor" valueProperty="Q12018"></chart:BarSeries>
19+
<chart:BarSeries index="1" items="{{ salesData }}" categoryProperty="Vendor" valueProperty="Q12019"></chart:BarSeries>
20+
</chart:RadCartesianChart.series>
21+
22+
<chart:RadCartesianChart.horizontalAxis>
23+
<chart:LinearAxis />
24+
</chart:RadCartesianChart.horizontalAxis>
25+
<chart:RadCartesianChart.verticalAxis>
26+
<chart:CategoricalAxis />
27+
</chart:RadCartesianChart.verticalAxis>
28+
</chart:RadCartesianChart>
29+
<StackLayout class="legend" row="3" orientation="horizontal">
30+
<StackLayout class="symbol first"></StackLayout>
31+
<Label text="Q1 2019"></Label>
32+
<StackLayout class="symbol second"></StackLayout>
33+
<Label text="Q1 2018"></Label>
34+
</StackLayout>
35+
</GridLayout>
36+
</navigation:ExamplePage>

0 commit comments

Comments
 (0)