Skip to content

Commit dacb20c

Browse files
CatchABusCatchABus
committed
feat(demo): First work on plain ts demo
1 parent f3a1515 commit dacb20c

16 files changed

+338
-266
lines changed

‎demo/app/examples/BarChart.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Color } from '@nativescript/core';
2+
import { BarChart } from '@nativescript-community/ui-chart/charts';
3+
import { BarData } from '@nativescript-community/ui-chart/data/BarData';
4+
import { BarDataSet } from '@nativescript-community/ui-chart/data/BarDataSet';
5+
6+
function getRandomInt(min, max) {
7+
return Math.floor(Math.random() * (max - min + 1)) + min;
8+
}
9+
10+
function getRandomColor() {
11+
const r = getRandomInt(0, 255);
12+
const g = getRandomInt(0, 255);
13+
const b = getRandomInt(0, 255);
14+
return new Color(255, r, g, b);
15+
}
16+
17+
export function onChartLoaded(args) {
18+
const chart = args.object as BarChart;
19+
20+
chart.drawFameRate = true;
21+
// chart.setLogEnabled(true);
22+
chart.setScaleEnabled(true);
23+
chart.setDragEnabled(true);
24+
chart.getAxisRight().setEnabled(false);
25+
chart.setHighlightPerTapEnabled(true);
26+
// chart.setHardwareAccelerationEnabled(true);
27+
28+
const data = new Array(5).fill(0).map(function (v, i) {
29+
return { index: i, value: Math.random() * 1 };
30+
});
31+
32+
const sets = [];
33+
const set = new BarDataSet(data, 'Dataset Label', 'index', 'value');
34+
set.setDrawIcons(true);
35+
set.setColor(getRandomColor());
36+
set.setDrawValues(true);
37+
sets.push(set);
38+
39+
// Create a data object with the data sets
40+
const bd = new BarData(sets);
41+
42+
// Set data
43+
chart.setData(bd);
44+
}
45+
46+
export function redraw(args) {
47+
const page = args.object.page;
48+
49+
const chart = page.getViewById('chart');
50+
if (chart) {
51+
chart.invalidate();
52+
}
53+
}
54+
55+
export function onNavigationButtonTap(args) {
56+
args.object.page.frame.goBack();
57+
}

‎demo/app/examples/BarChart.xml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="@nativescript-community/ui-chart">
2+
<ActionBar title="Simple Bar Chart">
3+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="onNavigationButtonTap"/>
4+
<Button text="Redraw" tap="redraw" />
5+
</ActionBar>
6+
<ScrollView>
7+
<StackLayout>
8+
<chart:BarChart id="chart" width="300" height="350" loaded="onChartLoaded"/>
9+
</StackLayout>
10+
</ScrollView>
11+
</Page>

‎demo/app/examples/HorizontalBarChart.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Color } from '@nativescript/core';
2+
import { BarChart } from '@nativescript-community/ui-chart/charts';
3+
import { BarData } from '@nativescript-community/ui-chart/data/BarData';
4+
import { BarDataSet } from '@nativescript-community/ui-chart/data/BarDataSet';
5+
6+
function getRandomInt(min, max) {
7+
return Math.floor(Math.random() * (max - min + 1)) + min;
8+
}
9+
10+
function getRandomColor() {
11+
const r = getRandomInt(0, 255);
12+
const g = getRandomInt(0, 255);
13+
const b = getRandomInt(0, 255);
14+
return new Color(255, r, g, b);
15+
}
16+
17+
export function onChartLoaded(args) {
18+
const chart = args.object as BarChart;
19+
20+
chart.drawFameRate = true;
21+
// chart.setLogEnabled(true);
22+
chart.setScaleEnabled(true);
23+
chart.setDragEnabled(true);
24+
chart.getAxisRight().setEnabled(false);
25+
chart.setHighlightPerTapEnabled(true);
26+
// chart.setHardwareAccelerationEnabled(true);
27+
28+
const data = new Array(5).fill(0).map(function (v, i) {
29+
return { index: i, value: Math.random() * 1 };
30+
});
31+
32+
const sets = [];
33+
const set = new BarDataSet(data, 'Dataset Label', 'index', 'value');
34+
set.setDrawIcons(true);
35+
set.setColor(getRandomColor());
36+
set.setDrawValues(true);
37+
sets.push(set);
38+
39+
// Create a data object with the data sets
40+
const bd = new BarData(sets);
41+
42+
// Set data
43+
chart.setData(bd);
44+
}
45+
46+
export function redraw(args) {
47+
const page = args.object.page;
48+
49+
const chart = page.getViewById('chart');
50+
if (chart) {
51+
chart.invalidate();
52+
}
53+
}
54+
55+
export function onNavigationButtonTap(args) {
56+
args.object.page.frame.goBack();
57+
}

‎demo/app/examples/HorizontalBarChart.xml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="@nativescript-community/ui-chart">
2+
<ActionBar title="Simple Horizontal Bar Chart">
3+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="onNavigationButtonTap"/>
4+
<Button text="Redraw" tap="redraw" />
5+
</ActionBar>
6+
<ScrollView>
7+
<StackLayout>
8+
<chart:HorizontalBarChart id="chart" width="300" height="350" loaded="onChartLoaded"/>
9+
</StackLayout>
10+
</ScrollView>
11+
</Page>

‎demo/app/examples/LineChart.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Color } from '@nativescript/core';
2+
import { LineChart } from '@nativescript-community/ui-chart/charts';
3+
import { LineData } from '@nativescript-community/ui-chart/data/LineData';
4+
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
5+
6+
function getRandomInt(min, max) {
7+
return Math.floor(Math.random() * (max - min + 1)) + min;
8+
}
9+
10+
function getRandomColor() {
11+
const r = getRandomInt(0, 255);
12+
const g = getRandomInt(0, 255);
13+
const b = getRandomInt(0, 255);
14+
return new Color(255, r, g, b);
15+
}
16+
17+
export function onChartLoaded(args) {
18+
const chart = args.object as LineChart;
19+
20+
chart.drawFameRate = true;
21+
// chart.setLogEnabled(true);
22+
chart.setScaleEnabled(true);
23+
chart.setDragEnabled(true);
24+
// chart.setHardwareAccelerationEnabled(true);
25+
26+
const data = new Array(1000).fill(0).map((v, i) => ({
27+
index: i,
28+
value: Math.random() * 1,
29+
}));
30+
31+
const sets = [];
32+
const set = new LineDataSet(data, 'Dataset Label', 'index', 'value');
33+
set.setColor(getRandomColor());
34+
sets.push(set);
35+
36+
// create a data object with the data sets
37+
const ld = new LineData(sets);
38+
39+
// set data
40+
chart.setData(ld);
41+
}
42+
43+
export function redraw(args) {
44+
const page = args.object.page;
45+
46+
const chart = page.getViewById('chart');
47+
if (chart) {
48+
chart.invalidate();
49+
}
50+
}
51+
52+
export function onNavigationButtonTap(args) {
53+
args.object.page.frame.goBack();
54+
}

‎demo/app/examples/LineChart.xml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="@nativescript-community/ui-chart">
2+
<ActionBar title="Simple Line Chart">
3+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="onNavigationButtonTap"/>
4+
<Button text="Redraw" tap="redraw" />
5+
</ActionBar>
6+
<ScrollView>
7+
<StackLayout>
8+
<chart:LineChart id="chart" width="300" height="350" loaded="onChartLoaded"/>
9+
</StackLayout>
10+
</ScrollView>
11+
</Page>

‎demo/app/examples/NSChart.ts

-187
This file was deleted.

0 commit comments

Comments
 (0)