Last active
August 31, 2017 21:46
-
-
Save SaucyJack/5e69fb8019a6a3e27b00cf86f8ec2a0c to your computer and use it in GitHub Desktop.
Editor: basic usage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="pie-chart"></require> | |
| <h3>App.js</h3> | |
| <pie-chart some-arg="someValue"></pie-chart> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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/2016.2.714/styles/kendo.common.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/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/2016.2.714/js/jquery.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-kendoui-bridge'); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="aurelia-kendoui-bridge/chart/chart"></require> | |
| <h4>pie chart custom element</h4> | |
| <ak-chart k-title.bind="title" | |
| k-legend.bind="legend" | |
| k-series-defaults.bind="chartDefaults" | |
| k-series.bind="chartSeries" | |
| k-data-source.bind="chartData" | |
| k-tooltip.bind="tooltip" | |
| k-widget.bind="pieChart"></ak-chart> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { bindable, bindingMode } from 'aurelia-framework'; | |
| export class PieChartCustomElement { | |
| @bindable({ defaultBindingMode: bindingMode.oneWay }) someArg; | |
| chartDefaults = { | |
| labels: { | |
| visible: true, | |
| background: 'transparent', | |
| template: '#= category #: \n #= value#%' | |
| } | |
| }; | |
| legend = { | |
| visible: false | |
| }; | |
| title = { | |
| position: 'bottom', | |
| text: 'Where is my data?' | |
| }; | |
| chartSeries = [{ | |
| type: 'pie', | |
| startAngle: 150, | |
| field: 'percent', | |
| categoryField: 'languageName' | |
| }]; | |
| tooltip = { | |
| visible: true, | |
| format: '{0}%' | |
| }; | |
| chartData = []; | |
| pieChart; | |
| constructor() { | |
| // THIS WORKS (uncomment to see chart works) | |
| // this.chartData = [ | |
| // { languageName: 'English', percent: 62.5 }, | |
| // { languageName: 'Spanish', percent: 35 }, | |
| // { languageName: 'Esperanto', percent: 2.5 } | |
| // ]; | |
| } | |
| attached() { | |
| // THIS DOES NOT WORK (uncomment to see not work) | |
| // for future SO people - this works if you use setDataSource() | |
| this.getData(this.someArg).then((languageData) => { | |
| this.pieChart.setDataSource(languageData); | |
| }); | |
| } | |
| getData(theArg) { | |
| return new Promise((resolve) => { | |
| const data = [ | |
| { languageName: 'English', percent: 62.5 }, | |
| { languageName: 'Spanish', percent: 35 }, | |
| { languageName: 'Esperanto', percent: 2.5 } | |
| ]; | |
| setTimeout(function() | |
| { | |
| console.log('elapsed'); | |
| resolve(data); | |
| }, 1000); | |
| }); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment