Aurelia KendoUI component - problem report

app.html

<!-- put your view here  -->
<template>
  <require from="./baseChart.js"></require>
  <div repeat.for="item of items">
    <div class="row">
      <div class="col-sm-12">
        <h2>${item.panel.title}</h2>
      </div>
    </div>
    <div class="row">
  <div repeat.for="chart of item.charts" class="col-sm-6">
    <base-chart chart-params.bind="chart"></base-chart>
  </div>
  </div>
  </div>
</template>

app.js

/*  put your view model code here */
import {inject, bindable} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient)
export class App {
  
  @bindable charts;
  
  constructor(httpClient){
        httpClient.configure(config => {
            config.withHeader('accept', 'application/json');  
        });
        this.http = httpClient;
    }
    
    activate(){
      this.setPanels();
    }
    
    setPanels(){
        var self = this;
        return this.getAllPanels()
                    .then(items => {
                        self.items = items;
                        return self.items;
                    });
    }
  
  getAllPanels(){
        return this.http.get('./charts.json')
            .then(response => {
                return response.content; 
            });
    }
}

baseChart.html

<template>
        <ak-chart view-model.ref="chartParams.chartReferenceName" k-widget.two-way="chartParams.twoWayBindName"
                k-legend.bind="{position: 'bottom', labels: { color: 'white'}}"
                k-series.bind="series"
                k-series-defaults.bind="defaults"
                k-value-axis.bind="valueAxis"
                k-category-axis.bind="categoryAxis"
                k-chart-area.bind="chartArea"
                k-tooltip.bind="tooltip"
                k-transitions.bind="false">
        </ak-chart>
        <div class="noData">
           <span>No data is currently found!</span>
        </div>
</template>

baseChart.js

import {useView, bindable} from 'aurelia-framework';
@useView('./baseChart.html')
export class BaseChart{
  
  @bindable chartParams;
  
  constructor(){
      this.defaultLabelColor = '#7c8e8e';
      this.defaultSeries = [{
            'type': 'area',
            'stack': true,
            'field': 'Value',
            'opacity': 1,
            'name': '${group.value}',
            'area': {
                'line': {
                    'style': 'smooth'
                }
            }
      }];
      this.valueAxis = {
            labels: {
                format: '{0}',
                skip: 2,
                step: 2,
                color: this.defaultLabelColor
            },
            line: {
                visible: false
            },
            majorGridLines: {
                visible: true,
                dashType: 'dot'
            }
      };
      this.categoryAxis = {
            justified: true,
            field: 'DateTime',
            baseUnit: 'minutes',
            baseUnitStep: 10,
            labels: {
                format: 'hh:mm tt',
                color: this.defaultLabelColor
            },
            line: {
                visible: false
            },
            majorGridLines: {
                visible: true,
                dashType: 'dot'
            },
            minorGridLines: {
                visible: false
            }
      };
      this.chartArea = {
        background: 'black'
      };
      this.tooltipBorder = {
        width: 1,
        color: 'black'  
      };
   }
   
   bind(){
     console.log('dfdlkfjsdlfkjdsflkjdsflkjsflksjfsdlkjf');
     console.log(this.chartParams); 
     //this.buildCharts();
   }
   
   buildCharts(){
     for(var s=0; s<this.chartParams.length; s++){
       console.log(this.chartParams[s]);
     }
   }
}

charts.json

[{
	"panel": {
		"title": "one"
	},
	"charts": [{
		"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]
		}]
	}, {
		"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]
		}]
	}]
}, {
	"panel": {
		"title": "two"
	},
	"charts": [{
		"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]
		}]
	}, {
		"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]
		}]
	}]
}]

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/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/0.3.22/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', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}

problem-details.md

Add any additional information here