JeroenVinke/chart.html

## chart.html
<template>
    <require from="aurelia-kendoui-bridge/chart/chart"></require>
    <a route-href="route.bind: 'welcome'">Go to somewhere else</a>
    <ak-chart
        k-title.bind="{text: 'Gross Domestic product growth GDP annual %'}"
        k-legend.bind="{position: 'bottom'}"
        k-series-defaults.bind="seriesDefaults"
        k-series.bind="series"
        k-value-axis.bind="valueAxis"
        k-category-axis.bind="categoryAxis"
        k-tooltip.bind="tooltip"
        k-widget.two-way="chartWidget">
    </ak-chart>
</template>

## chart.js
import {TaskQueue} from "aurelia-framework";

export class App {
  static inject = [TaskQueue];

  resizeCallback = null;

  constructor(tq) {
        this._taskQueue = tq;
  }

	attached() {
		this._taskQueue.queueMicroTask((() => {
		  console.log("delayed");
			this._chart = this.chartWidget;
		}));

		  console.log("attach");
	  this.resizeCallback = this._onResize.bind(this);
		window.addEventListener("resize", this.resizeCallback);
	}

	detached() {
		  console.log("detach");
		window.removeEventListener("resize", this.resizeCallback);
	}

	_onResize(): void {
		  console.log("resized");
		if (this.chartWidget) {
		  console.log("redraw");
			this.chartWidget.redraw();
		}
	}

  //////// DATA ////////////

  seriesDefaults = {
    type: 'area',
    area: {
      line: {
        style: 'smooth'
      }
    }
  };

  series = [{
    name: 'India',
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
  }, {
    name: 'World',
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }, {
    name: 'Haiti',
    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
  }];

  valueAxis = {
    labels: {
      format: '{0}%'
    },
    line: {
      visible: false
    },
    axisCrossingValue: -10
  };

  categoryAxis = {
    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
    majorGridLines: {
      visible: false
    },
    labels: {
      rotation: 'auto'
    }
  };

  tooltip = {
    visible: true,
    format: '{0}%',
    template: '${series.name} ${value}'
  }
}

## events.css
#undo {
  text-align: center;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
  padding: 2em;
  cursor: pointer;
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin('aurelia-kendoui-bridge');


    aurelia.start().then(a => a.setRoot('./shell.js'));
  }

## shell.html
<template>
  <router-view></router-view>
</template>

## shell.js
export class Shell {
    configureRouter(config) {
      config.map([
        {
          route: "",
          name: "welcome",
          moduleId: "./welcome.js"
        },
        {
          route: "chart",
          name: "chart",
          moduleId: "./chart.js"
        }
        ]);
    }
  }

## welcome.html
<template>
    <a route-href="route.bind: 'chart'">Go to chart</a>
</template>

## welcome.js
export class Welcome {

}
	<template>
	<require from="aurelia-kendoui-bridge/chart/chart"></require>
	<a route-href="route.bind: 'welcome'">Go to somewhere else</a>
	<ak-chart
	k-title.bind="{text: 'Gross Domestic product growth GDP annual %'}"
	k-legend.bind="{position: 'bottom'}"
	k-series-defaults.bind="seriesDefaults"
	k-series.bind="series"
	k-value-axis.bind="valueAxis"
	k-category-axis.bind="categoryAxis"
	k-tooltip.bind="tooltip"
	k-widget.two-way="chartWidget">
	</ak-chart>
	</template>
	import {TaskQueue} from "aurelia-framework";

	export class App {
	static inject = [TaskQueue];

	resizeCallback = null;

	constructor(tq) {
	this._taskQueue = tq;
	}

	attached() {
	this._taskQueue.queueMicroTask((() => {
	console.log("delayed");
	this._chart = this.chartWidget;
	}));

	console.log("attach");
	this.resizeCallback = this._onResize.bind(this);
	window.addEventListener("resize", this.resizeCallback);
	}

	detached() {
	console.log("detach");
	window.removeEventListener("resize", this.resizeCallback);
	}

	_onResize(): void {
	console.log("resized");
	if (this.chartWidget) {
	console.log("redraw");
	this.chartWidget.redraw();
	}
	}

	//////// DATA ////////////

	seriesDefaults = {
	type: 'area',
	area: {
	line: {
	style: 'smooth'
	}
	}
	};

	series = [{
	name: 'India',
	data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
	}, {
	name: 'World',
	data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
	}, {
	name: 'Haiti',
	data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
	}];

	valueAxis = {
	labels: {
	format: '{0}%'
	},
	line: {
	visible: false
	},
	axisCrossingValue: -10
	};

	categoryAxis = {
	categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
	majorGridLines: {
	visible: false
	},
	labels: {
	rotation: 'auto'
	}
	};

	tooltip = {
	visible: true,
	format: '{0}%',
	template: '${series.name} ${value}'
	}
	}
	#undo {
	text-align: center;
	white-space: nowrap;
	border-width: 1px;
	border-style: solid;
	padding: 2em;
	cursor: pointer;
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge');



	aurelia.start().then(a => a.setRoot('./shell.js'));
	}
	export class Shell {
	configureRouter(config) {
	config.map([
	{
	route: "",
	name: "welcome",
	moduleId: "./welcome.js"
	},
	{
	route: "chart",
	name: "chart",
	moduleId: "./chart.js"
	}
	]);
	}
	}
	<template>
	<a route-href="route.bind: 'chart'">Go to chart</a>
	</template>