feat(demo): First work on plain ts demo

demo/app/examples/BarChart.ts

@@ -0,0 +1,57 @@
+import { Color } from '@nativescript/core';
+import { BarChart } from '@nativescript-community/ui-chart/charts';
+import { BarData } from '@nativescript-community/ui-chart/data/BarData';
+import { BarDataSet } from '@nativescript-community/ui-chart/data/BarDataSet';
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getRandomColor() {
+    const r = getRandomInt(0, 255);
+    const g = getRandomInt(0, 255);
+    const b = getRandomInt(0, 255);
+    return new Color(255, r, g, b);
+}
+
+export function onChartLoaded(args) {
+    const chart = args.object as BarChart;
+
+    chart.drawFameRate = true;
+    // chart.setLogEnabled(true);
+    chart.setScaleEnabled(true);
+    chart.setDragEnabled(true);
+    chart.getAxisRight().setEnabled(false);
+    chart.setHighlightPerTapEnabled(true);
+    // chart.setHardwareAccelerationEnabled(true);
+
+    const data = new Array(5).fill(0).map(function (v, i) {
+        return { index: i, value: Math.random() * 1 };
+    });
+
+    const sets = [];
+    const set = new BarDataSet(data, 'Dataset Label', 'index', 'value');
+    set.setDrawIcons(true);
+    set.setColor(getRandomColor());
+    set.setDrawValues(true);
+    sets.push(set);
+
+    // Create a data object with the data sets
+    const bd = new BarData(sets);
+
+    // Set data
+    chart.setData(bd);
+}
+
+export function redraw(args) {
+    const page = args.object.page;
+
+    const chart = page.getViewById('chart');
+    if (chart) {
+        chart.invalidate();
+    }
+}
+
+export function onNavigationButtonTap(args) {
+    args.object.page.frame.goBack();
+}

demo/app/examples/BarChart.xml

@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="@nativescript-community/ui-chart">
+    <ActionBar title="Simple Bar Chart">
+        <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="onNavigationButtonTap"/>
+        <Button text="Redraw" tap="redraw" />
+    </ActionBar>
+    <ScrollView>
+        <StackLayout>
+            <chart:BarChart id="chart" width="300" height="350" loaded="onChartLoaded"/>
+        </StackLayout>
+    </ScrollView>
+</Page>

demo/app/examples/HorizontalBarChart.ts

@@ -0,0 +1,57 @@
+import { Color } from '@nativescript/core';
+import { BarChart } from '@nativescript-community/ui-chart/charts';
+import { BarData } from '@nativescript-community/ui-chart/data/BarData';
+import { BarDataSet } from '@nativescript-community/ui-chart/data/BarDataSet';
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getRandomColor() {
+    const r = getRandomInt(0, 255);
+    const g = getRandomInt(0, 255);
+    const b = getRandomInt(0, 255);
+    return new Color(255, r, g, b);
+}
+
+export function onChartLoaded(args) {
+    const chart = args.object as BarChart;
+
+    chart.drawFameRate = true;
+    // chart.setLogEnabled(true);
+    chart.setScaleEnabled(true);
+    chart.setDragEnabled(true);
+    chart.getAxisRight().setEnabled(false);
+    chart.setHighlightPerTapEnabled(true);
+    // chart.setHardwareAccelerationEnabled(true);
+
+    const data = new Array(5).fill(0).map(function (v, i) {
+        return { index: i, value: Math.random() * 1 };
+    });
+
+    const sets = [];
+    const set = new BarDataSet(data, 'Dataset Label', 'index', 'value');
+    set.setDrawIcons(true);
+    set.setColor(getRandomColor());
+    set.setDrawValues(true);
+    sets.push(set);
+
+    // Create a data object with the data sets
+    const bd = new BarData(sets);
+
+    // Set data
+    chart.setData(bd);
+}
+
+export function redraw(args) {
+    const page = args.object.page;
+
+    const chart = page.getViewById('chart');
+    if (chart) {
+        chart.invalidate();
+    }
+}
+
+export function onNavigationButtonTap(args) {
+    args.object.page.frame.goBack();
+}

demo/app/examples/HorizontalBarChart.xml

@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="@nativescript-community/ui-chart">
+    <ActionBar title="Simple Horizontal Bar Chart">
+        <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="onNavigationButtonTap"/>
+        <Button text="Redraw" tap="redraw" />
+    </ActionBar>
+    <ScrollView>
+        <StackLayout>
+            <chart:HorizontalBarChart id="chart" width="300" height="350" loaded="onChartLoaded"/>
+        </StackLayout>
+    </ScrollView>
+</Page>

demo/app/examples/LineChart.ts

@@ -0,0 +1,54 @@
+import { Color } from '@nativescript/core';
+import { LineChart } from '@nativescript-community/ui-chart/charts';
+import { LineData } from '@nativescript-community/ui-chart/data/LineData';
+import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getRandomColor() {
+    const r = getRandomInt(0, 255);
+    const g = getRandomInt(0, 255);
+    const b = getRandomInt(0, 255);
+    return new Color(255, r, g, b);
+}
+
+export function onChartLoaded(args) {
+    const chart = args.object as LineChart;
+
+    chart.drawFameRate = true;
+    // chart.setLogEnabled(true);
+    chart.setScaleEnabled(true);
+    chart.setDragEnabled(true);
+    // chart.setHardwareAccelerationEnabled(true);
+
+    const data = new Array(1000).fill(0).map((v, i) => ({
+        index: i,
+        value: Math.random() * 1,
+    }));
+
+    const sets = [];
+    const set = new LineDataSet(data, 'Dataset Label', 'index', 'value');
+    set.setColor(getRandomColor());
+    sets.push(set);
+
+    // create a data object with the data sets
+    const ld = new LineData(sets);
+
+    // set data
+    chart.setData(ld);
+}
+
+export function redraw(args) {
+    const page = args.object.page;
+
+    const chart = page.getViewById('chart');
+    if (chart) {
+        chart.invalidate();
+    }
+}
+
+export function onNavigationButtonTap(args) {
+    args.object.page.frame.goBack();
+}

demo/app/examples/LineChart.xml

@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="@nativescript-community/ui-chart">
+    <ActionBar title="Simple Line Chart">
+        <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="onNavigationButtonTap"/>
+        <Button text="Redraw" tap="redraw" />
+    </ActionBar>
+    <ScrollView>
+        <StackLayout>
+            <chart:LineChart id="chart" width="300" height="350" loaded="onChartLoaded"/>
+        </StackLayout>
+    </ScrollView>
+</Page>