chore: 2.0.0-alpha.21

README.md

@@ -5,14 +5,15 @@ npm run setup
 npm start
 ```
 
-- @nativescript/canvas
-- @nativescript/canvas-babylon
-- @nativescript/canvas-media
-- @nativescript/canvas-phaser
-- @nativescript/canvas-phaser-ce
-- @nativescript/canvas-pixi
-- @nativescript/canvas-polyfill
-- @nativescript/canvas-three
+- [@nativescript/canvas](packages/canvas/README.md)
+- [@nativescript/canvas-babylon](packages/canvas-babylon/README.md)
+- [@nativescript/canvas-chartjs](packages/canvas-chartjs/README.md)
+- [@nativescript/canvas-media](packages/canvas-media/README.md)
+- [@nativescript/canvas-phaser](packages/canvas-phaser/README.md)
+- [@nativescript/canvas-phaser-ce](packages/canvas-phaser-ce/README.md)
+- [@nativescript/canvas-pixi](packages/canvas-pixi/README.md)
+- [@nativescript/canvas-polyfill](packages/canvas-polyfill/README.md)
+- [@nativescript/canvas-three](packages/canvas-three/README.md)
 
 # How to use?
 

apps/demo-angular/package.json

@@ -1,19 +1,20 @@
 {
-	"main": "./src/main.ts",
-	"dependencies": {
-		"@nativescript/canvas": "file:../../dist/packages/canvas",
-		"@nativescript/canvas-babylon": "file:../../dist/packages/canvas-babylon",
-		"@nativescript/canvas-media": "file:../../dist/packages/canvas-media",
-		"@nativescript/canvas-phaser": "file:../../dist/packages/canvas-phaser",
-		"@nativescript/canvas-phaser-ce": "file:../../dist/packages/canvas-phaser-ce",
-		"@nativescript/canvas-pixi": "file:../../dist/packages/canvas-pixi",
-		"@nativescript/canvas-polyfill": "file:../../dist/packages/canvas-polyfill",
-		"@nativescript/canvas-three": "file:../../dist/packages/canvas-three",
-		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"three": "file:../../node_modules/three"
-	},
-	"devDependencies": {
-		"@nativescript/android": "~8.5.0",
-		"@nativescript/ios": "8.5.1-dev.0"
-	}
+  "main": "./src/main.ts",
+  "dependencies": {
+    "@nativescript/canvas": "file:../../dist/packages/canvas",
+    "@nativescript/canvas-babylon": "file:../../dist/packages/canvas-babylon",
+    "@nativescript/canvas-media": "file:../../dist/packages/canvas-media",
+    "@nativescript/canvas-phaser": "file:../../dist/packages/canvas-phaser",
+    "@nativescript/canvas-phaser-ce": "file:../../dist/packages/canvas-phaser-ce",
+    "@nativescript/canvas-pixi": "file:../../dist/packages/canvas-pixi",
+    "@nativescript/canvas-polyfill": "file:../../dist/packages/canvas-polyfill",
+    "@nativescript/canvas-three": "file:../../dist/packages/canvas-three",
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "three": "file:../../node_modules/three",
+    "@nativescript/canvas-chartjs": "file:../../dist/packages/canvas-chartjs"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.5.0",
+    "@nativescript/ios": "8.5.1-dev.0"
+  }
 }

apps/demo-angular/src/app-routing.module.ts

@@ -9,6 +9,7 @@ const routes: Routes = [
    { path: 'home', component: HomeComponent },
 	{ path: 'canvas', loadChildren: () => import('./plugin-demos/canvas.module').then(m => m.CanvasModule) },
 	{ path: 'canvas-babylon', loadChildren: () => import('./plugin-demos/canvas-babylon.module').then(m => m.CanvasBabylonModule) },
+	{ path: 'canvas-chartjs', loadChildren: () => import('./plugin-demos/canvas-chartjs.module').then(m => m.CanvasChartjsModule) },
 	{ path: 'canvas-media', loadChildren: () => import('./plugin-demos/canvas-media.module').then(m => m.CanvasMediaModule) },
 	{ path: 'canvas-phaser', loadChildren: () => import('./plugin-demos/canvas-phaser.module').then(m => m.CanvasPhaserModule) },
 	{ path: 'canvas-phaser-ce', loadChildren: () => import('./plugin-demos/canvas-phaser-ce.module').then(m => m.CanvasPhaserCeModule) },

apps/demo-angular/src/home.component.ts

@@ -9,34 +9,32 @@ export class HomeComponent {
 	constructor(private router: RouterExtensions){}
 
 	demos = [
-		{
-			name: 'canvas',
-		},
-		{
-			name: 'canvas-babylon',
-		},
-		{
-			name: 'canvas-media',
-		},
-		{
-			name: 'canvas-phaser',
-		},
-		{
-			name: 'canvas-phaser-ce',
-		},
-		{
-			name: 'canvas-pixi',
-		},
-		{
-			name: 'canvas-polyfill',
-		},
-		{
-			name: 'canvas-three',
-		},
-	];
-
-	onTap(event){
-		const item = this.demos[event.index];
-		this.router.navigate(['/' + item.name]);
+	{
+		name: 'canvas'
+	},
+	{
+		name: 'canvas-babylon'
+	},
+	{
+		name: 'canvas-chartjs'
+	},
+	{
+		name: 'canvas-media'
+	},
+	{
+		name: 'canvas-phaser'
+	},
+	{
+		name: 'canvas-phaser-ce'
+	},
+	{
+		name: 'canvas-pixi'
+	},
+	{
+		name: 'canvas-polyfill'
+	},
+	{
+		name: 'canvas-three'
 	}
-}
+];
+}

apps/demo-angular/src/plugin-demos/canvas-chartjs.component.html

@@ -0,0 +1,8 @@
+<ActionBar title="canvas-chartjs" class="action-bar"> </ActionBar>
+<StackLayout class="p-20">
+  <ScrollView class="h-full">
+    <StackLayout>
+      <Button text="Test canvas-chartjs" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+    </StackLayout>
+  </ScrollView>
+</StackLayout>

apps/demo-angular/src/plugin-demos/canvas-chartjs.component.ts

@@ -0,0 +1,19 @@
+import { Component, NgZone } from '@angular/core';
+import { DemoSharedCanvasChartjs } from '@demo/shared';
+import { } from '@nativescript/canvas-chartjs';
+
+@Component({
+	selector: 'demo-canvas-chartjs',
+	templateUrl: 'canvas-chartjs.component.html',
+})
+export class CanvasChartjsComponent {
+
+  demoShared: DemoSharedCanvasChartjs;
+
+	constructor(private _ngZone: NgZone) {}
+
+  ngOnInit() {
+    this.demoShared = new DemoSharedCanvasChartjs();
+  }
+
+}

apps/demo-angular/src/plugin-demos/canvas-chartjs.module.ts

@@ -0,0 +1,10 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { CanvasChartjsComponent } from './canvas-chartjs.component';
+
+@NgModule({
+	imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: CanvasChartjsComponent }])],
+  declarations: [CanvasChartjsComponent],
+  schemas: [ NO_ERRORS_SCHEMA]
+})
+export class CanvasChartjsModule {}

apps/demo-vue/app/plugin-demos/canvas-chartjs.vue

@@ -0,0 +1,34 @@
+<template>
+  <Page>
+    <ActionBar>
+      <Label text="canvas-chartjs"/>
+    </ActionBar>
+
+    <GridLayout>
+      <Button class="info" :text="message"/>
+    </GridLayout>
+  </Page>
+</template>
+
+<script lang="ts">
+  import Vue from "nativescript-vue";
+  import { DemoSharedCanvasChartjs } from '@demo/shared';
+  import { } from '@nativescript/canvas-chartjs';
+
+  export default Vue.extend({
+    computed: {
+      message() {
+        return "Test canvas-chartjs";
+      }
+    }
+  });
+</script>
+
+<style scoped lang="scss">
+
+  .info {
+    font-size: 20;
+    horizontal-align: center;
+    vertical-align: center;
+  }
+</style>

apps/demo-vue/package.json

@@ -1,19 +1,20 @@
 {
-	"main": "./app/app.ts",
-	"dependencies": {
-		"nativescript-vue": "file:../../node_modules/nativescript-vue",
-		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"@nativescript/canvas-media": "file:../../packages/canvas-media",
-		"@nativescript/canvas": "file:../../packages/canvas",
-		"@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
-		"@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
-		"@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
-		"@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
-		"@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
-		"@nativescript/canvas-three": "file:../../packages/canvas-three"
-	},
-	"devDependencies": {
-		"@nativescript/android": "~8.5.0",
-		"@nativescript/ios": "8.5.1-dev.0"
-	}
+  "main": "./app/app.ts",
+  "dependencies": {
+    "nativescript-vue": "file:../../node_modules/nativescript-vue",
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "@nativescript/canvas-media": "file:../../packages/canvas-media",
+    "@nativescript/canvas": "file:../../packages/canvas",
+    "@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
+    "@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
+    "@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
+    "@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
+    "@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
+    "@nativescript/canvas-three": "file:../../packages/canvas-three",
+    "@nativescript/canvas-chartjs": "file:../../packages/canvas-chartjs"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.5.0",
+    "@nativescript/ios": "8.5.1-dev.0"
+  }
 }

apps/demo/package.json

@@ -1,32 +1,33 @@
 {
-	"main": "./src/app.ts",
-	"description": "NativeScript Application",
-	"license": "SEE LICENSE IN <your-license-filename>",
-	"repository": "<fill-your-repository-here>",
-	"dependencies": {
-		"@nativescript/canvas": "file:../../packages/canvas",
-		"@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
-		"@nativescript/canvas-media": "file:../../packages/canvas-media",
-		"@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
-		"@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
-		"@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
-		"@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
-		"@nativescript/canvas-three": "file:../../packages/canvas-three",
-		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"babylonjs": "file:../../node_modules/babylonjs",
-		"babylonjs-materials": "file:../../node_modules/babylonjs-materials",
-		"chart.js": "file:../../node_modules/chart.js",
-		"d3": "file:../../node_modules/d3",
-		"matter-js": "file:../../node_modules/matter-js",
-		"phaser": "file:../../node_modules/phaser",
-		"phaser-ce": "file:../../node_modules/phaser-ce",
-		"pixi.js": "file:../../node_modules/pixi.js",
-		"three": "file:../../node_modules/three",
-		"vexflow": "file:../../node_modules/vexflow",
-		"zen-3d": "file:../../node_modules/zen-3d"
-	},
-	"devDependencies": {
-		"@nativescript/android": "8.5.4",
-		"@nativescript/ios": "8.5.2"
-	}
+  "main": "./src/app.ts",
+  "description": "NativeScript Application",
+  "license": "SEE LICENSE IN <your-license-filename>",
+  "repository": "<fill-your-repository-here>",
+  "dependencies": {
+    "@nativescript/canvas": "file:../../packages/canvas",
+    "@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
+    "@nativescript/canvas-media": "file:../../packages/canvas-media",
+    "@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
+    "@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
+    "@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
+    "@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
+    "@nativescript/canvas-three": "file:../../packages/canvas-three",
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "babylonjs": "file:../../node_modules/babylonjs",
+    "babylonjs-materials": "file:../../node_modules/babylonjs-materials",
+    "chart.js": "file:../../node_modules/chart.js",
+    "d3": "file:../../node_modules/d3",
+    "matter-js": "file:../../node_modules/matter-js",
+    "phaser": "file:../../node_modules/phaser",
+    "phaser-ce": "file:../../node_modules/phaser-ce",
+    "pixi.js": "file:../../node_modules/pixi.js",
+    "three": "file:../../node_modules/three",
+    "vexflow": "file:../../node_modules/vexflow",
+    "zen-3d": "file:../../node_modules/zen-3d",
+    "@nativescript/canvas-chartjs": "file:../../packages/canvas-chartjs"
+  },
+  "devDependencies": {
+    "@nativescript/android": "8.6.2",
+    "@nativescript/ios": "8.6.1"
+  }
 }

apps/demo/src/app.ts

@@ -49,7 +49,7 @@ Application.on('uncaughtError', (args) => {
 	console.log('uncaughtError: platform error', args.android ?? args.ios);
 });
 Application.on('launch', (args) => {
-	require('@nativescript/canvas-polyfill');
+	//require('@nativescript/canvas-polyfill');
 	if (global.isAndroid) {
 		jp.wasabeef.takt.Takt.stock(Utils.android.getApplicationContext()).seat(jp.wasabeef.takt.Seat.TOP_CENTER).color(-65536);
 	} else {

apps/demo/src/main-page.xml

@@ -13,6 +13,7 @@
         <Button text="canvas-pixi" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="canvas-polyfill" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="canvas-three" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+<Button text="canvas-chartjs" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

apps/demo/src/plugin-demos/canvas-chartjs.ts

@@ -0,0 +1,12 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+import { DemoSharedCanvasChartjs } from '@demo/shared';
+import { } from '@nativescript/canvas-chartjs';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new DemoModel();
+}
+
+export class DemoModel extends DemoSharedCanvasChartjs {
+
+}

apps/demo/src/plugin-demos/canvas-chartjs.xml

@@ -0,0 +1,14 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="canvas-chartjs" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+    <StackLayout class="p-20">
+        <ScrollView class="h-full">
+          <StackLayout>
+            <Button text="Test canvas-chartjs" tap="{{ testIt }}" class="btn btn-primary"/>
+
+          </StackLayout>
+        </ScrollView>
+    </StackLayout>
+</Page>