Column with Drill-down (Angular)

The FlexChart control supports the implementation of drill-down charts. This column chart uses FlexChart's selectionChanged event to determine which column the user has clicked on, and then updates the chart's itemsSource with new data, as well as changing the chart's color to show that new data is being displayed.

Learn about FlexChart | Drill-Down Documentation | FlexChart API Reference

This example uses Angular.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wijmo from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import { Component, Inject, enableProdMode, NgModule, ViewChild, OnInit, ElementRef } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation'; import { DataService } from './app.data'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements OnInit { @ViewChild('flexChart') private _flexChart: chart.FlexChart; @ViewChild('header') private _header: ElementRef; private _view: wijmo.CollectionView; groupedView: wijmo.CollectionView; constructor(@Inject(DataService) private dataService: DataService) { this._view = dataService.getData(); this.groupedView = dataService.getGroupData(this._view); } ngOnInit() { this._header.nativeElement.addEventListener('click', (e: MouseEvent) => this._onHeaderClick(e)); } selectionChanged(flexChart: chart.FlexChart) { if (flexChart.selection) { let point = flexChart.selection.collectionView.currentItem; if (point && point.group && !point.group.isBottomLevel) { this.showGroup(point.group); } } } showGroup(group: wijmo.CollectionViewGroup) { // update titles this._updateChartHeader(group); let level = 'level' in group ? group.level + 1 : 0, pgd = this._view.groupDescriptions[level] as wijmo.PropertyGroupDescription; this._flexChart.axisX.title = wijmo.toHeaderCase(pgd.propertyName); // update the series color (use a different one for each level) var palette = this._flexChart.palette || chart.Palettes.standard; this._flexChart.series[0].style = { fill: palette[level], stroke: palette[level] }; // update data this._flexChart.itemsSource = this.dataService.getGroupData(group); this._flexChart.selection = null; } // private _onHeaderClick(e: Event) { if (e.target instanceof HTMLAnchorElement) { e.preventDefault(); // get the link path let path = e.target.href; path = path.substr(path.lastIndexOf('#') + 1); let paths = path.split('/'); // find the group that matches the path let src: any = this._view; for (let i = 1; i < paths.length; i++) { for (let j = 0; j < src.groups.length; j++) { let group = src.groups[j]; if (group.name == paths[i]) { src = group; break; } } } // show the selected group this.showGroup(src); } } private _updateChartHeader(group: wijmo.CollectionViewGroup) { let item = group.items[0], path = '', headers = []; for (let i = 0; i <= group.level; i++) { let pgd = this._view.groupDescriptions[i] as wijmo.PropertyGroupDescription, prop = pgd.propertyName, hdr = wijmo.format('<a href="#{path}">{prop}</a>: {value}', { path: path, prop: wijmo.toHeaderCase(prop), value: item[prop] }); headers.push(hdr); path += '/' + item[prop]; } this._header.nativeElement.innerHTML = headers.length > 0 ? 'IMF estimates GDP(nominal) GDP for ' + headers.join(', ') : 'IMF estimates GDP(nominal) GDP'; } } @NgModule({ imports: [WjChartModule, WjChartAnimationModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Column with Drill-down</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="container-fluid"> <h4 #header>IMF estimates GDP(nominal) GDP</h4> <wj-flex-chart #flexChart [bindingX]="'name'" [selectionMode]="'Point'" [itemsSource]="groupedView" [tooltipContent]="''" (selectionChanged)="selectionChanged(flexChart)" [palette]="['rgba(45,159,199,1)', 'rgba(236,153,60,1)', 'rgba(137,194,53,1)', 'rgba(227,119,164,1)', 'rgba(166,137,49,1)', 'rgba(166,114,166,1)', 'rgba(208,192,65,1)', 'rgba(227,88,85,1)', 'rgba(104,112,106,1)']"> <wj-flex-chart-legend [position]="'None'"> </wj-flex-chart-legend> <wj-flex-chart-series [name]="'GDP'" [binding]="'gdp'"> </wj-flex-chart-series> <wj-flex-chart-axis [wjProperty]="'axisX'" [title]="'Year'"> </wj-flex-chart-axis> <wj-flex-chart-axis [wjProperty]="'axisY'" [title]="'GDP (US$ in billions)'"> </wj-flex-chart-axis> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div>
import { Injectable } from '@angular/core'; import * as wijmo from '@grapecity/wijmo'; // @Injectable() export class DataService { // IMF estimates GDP(nominal) between 2020 and 2023 // https://en.wikipedia.org/wiki/List_of_countries_by_past_and_projected_GDP_(nominal) getData() { let data = [ { country: 'United States', continent: 'North America', year: 2020, gdp: 22289 }, { country: 'United States', continent: 'North America', year: 2021, gdp: 23096 }, { country: 'United States', continent: 'North America', year: 2022, gdp: 23874 }, { country: 'United States', continent: 'North America', year: 2023, gdp: 24670 }, { country: 'China', continent: 'Asia', year: 2020, gdp: 15461 }, { country: 'China', continent: 'Asia', year: 2021, gdp: 16768 }, { country: 'China', continent: 'Asia', year: 2022, gdp: 18131 }, { country: 'China', continent: 'Asia', year: 2023, gdp: 19580 }, { country: 'Japan', continent: 'Asia', year: 2020, gdp: 5371 }, { country: 'Japan', continent: 'Asia', year: 2021, gdp: 5522 }, { country: 'Japan', continent: 'Asia', year: 2022, gdp: 5714 }, { country: 'Japan', continent: 'Asia', year: 2023, gdp: 5907 }, { country: 'Gemany', continent: 'Europe', year: 2020, gdp: 4331 }, { country: 'Gemany', continent: 'Europe', year: 2021, gdp: 4523 }, { country: 'Gemany', continent: 'Europe', year: 2022, gdp: 4736 }, { country: 'Gemany', continent: 'Europe', year: 2023, gdp: 4937 }, { country: 'India', continent: 'Asia', year: 2020, gdp: 3258 }, { country: 'India', continent: 'Asia', year: 2021, gdp: 3586 }, { country: 'India', continent: 'Asia', year: 2022, gdp: 3941 }, { country: 'India', continent: 'Asia', year: 2023, gdp: 4329 }, { country: 'France', continent: 'Europe', year: 2020, gdp: 2979 }, { country: 'France', continent: 'Europe', year: 2021, gdp: 3100 }, { country: 'France', continent: 'Europe', year: 2022, gdp: 3234 }, { country: 'France', continent: 'Europe', year: 2023, gdp: 3363 }, { country: 'United Kindom', continent: 'Europe', year: 2020, gdp: 2912 }, { country: 'United Kindom', continent: 'Europe', year: 2021, gdp: 3012 }, { country: 'United Kindom', continent: 'Europe', year: 2022, gdp: 3135 }, { country: 'United Kindom', continent: 'Europe', year: 2023, gdp: 3257 }, { country: 'Italy', continent: 'Europe', year: 2020, gdp: 2191 }, { country: 'Italy', continent: 'Europe', year: 2021, gdp: 2255 }, { country: 'Italy', continent: 'Europe', year: 2022, gdp: 2329 }, { country: 'Italy', continent: 'Europe', year: 2023, gdp: 2395 }, { country: 'Brazil', continent: 'South America', year: 2020, gdp: 2027 }, { country: 'Brazil', continent: 'South America', year: 2021, gdp: 2129 }, { country: 'Brazil', continent: 'South America', year: 2022, gdp: 2237 }, { country: 'Brazil', continent: 'South America', year: 2023, gdp: 2351 }, { country: 'Canada', continent: 'North America', year: 2020, gdp: 1937 }, { country: 'Canada', continent: 'North America', year: 2021, gdp: 2053 }, { country: 'Canada', continent: 'North America', year: 2022, gdp: 2185 }, { country: 'Canada', continent: 'North America', year: 2023, gdp: 2321 }, { country: 'South Korea', continent: 'Asia', year: 2020, gdp: 1781 }, { country: 'South Korea', continent: 'Asia', year: 2021, gdp: 1864 }, { country: 'South Korea', continent: 'Asia', year: 2022, gdp: 1959 }, { country: 'South Korea', continent: 'Asia', year: 2023, gdp: 2054 }, { country: 'Russia', continent: 'Europe', year: 2020, gdp: 1683 }, { country: 'Russia', continent: 'Europe', year: 2021, gdp: 1719 }, { country: 'Russia', continent: 'Europe', year: 2022, gdp: 1757 }, { country: 'Russia', continent: 'Europe', year: 2023, gdp: 1818 }, { country: 'Spain', continent: 'Europe', year: 2020, gdp: 1550 }, { country: 'Spain', continent: 'Europe', year: 2021, gdp: 1616 }, { country: 'Spain', continent: 'Europe', year: 2022, gdp: 1690 }, { country: 'Spain', continent: 'Europe', year: 2023, gdp: 1758 }, { country: 'Australia', continent: 'Oceania', year: 2020, gdp: 1541 }, { country: 'Australia', continent: 'Oceania', year: 2021, gdp: 1615 }, { country: 'Australia', continent: 'Oceania', year: 2022, gdp: 1700 }, { country: 'Australia', continent: 'Oceania', year: 2023, gdp: 1794 }, { country: 'Mexico', continent: 'North America', year: 2020, gdp: 1306 }, { country: 'Mexico', continent: 'North America', year: 2021, gdp: 1376 }, { country: 'Mexico', continent: 'North America', year: 2022, gdp: 1449 }, { country: 'Mexico', continent: 'North America', year: 2023, gdp: 1526 }, { country: 'Indonesia', continent: 'Asia', year: 2020, gdp: 1175 }, { country: 'Indonesia', continent: 'Asia', year: 2021, gdp: 1259 }, { country: 'Indonesia', continent: 'Asia', year: 2022, gdp: 1349 }, { country: 'Indonesia', continent: 'Asia', year: 2023, gdp: 1446 }, { country: 'Netherlands', continent: 'Europe', year: 2020, gdp: 980 }, { country: 'Netherlands', continent: 'Europe', year: 2021, gdp: 1021 }, { country: 'Netherlands', continent: 'Europe', year: 2022, gdp: 1065 }, { country: 'Netherlands', continent: 'Europe', year: 2023, gdp: 1106 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2020, gdp: 815 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2021, gdp: 835 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2022, gdp: 860 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2023, gdp: 889 }, { country: 'Nigeria', continent: 'Africa', year: 2020, gdp: 504 }, { country: 'Nigeria', continent: 'Africa', year: 2021, gdp: 572 }, { country: 'Nigeria', continent: 'Africa', year: 2022, gdp: 649 }, { country: 'Nigeria', continent: 'Africa', year: 2023, gdp: 736 }, { country: 'Argentina', continent: 'South America', year: 2020, gdp: 444 }, { country: 'Argentina', continent: 'South America', year: 2021, gdp: 476 }, { country: 'Argentina', continent: 'South America', year: 2022, gdp: 508 }, { country: 'Argentina', continent: 'South America', year: 2023, gdp: 540 }, { country: 'South Africa', continent: 'South America', year: 2020, gdp: 403 }, { country: 'South Africa', continent: 'South America', year: 2021, gdp: 419 }, { country: 'South Africa', continent: 'South America', year: 2022, gdp: 438 }, { country: 'South Africa', continent: 'South America', year: 2023, gdp: 456 }, { country: 'Colombia', continent: 'South America', year: 2020, gdp: 367 }, { country: 'Colombia', continent: 'South America', year: 2021, gdp: 382 }, { country: 'Colombia', continent: 'South America', year: 2022, gdp: 400 }, { country: 'Colombia', continent: 'South America', year: 2023, gdp: 422 }, { country: 'Chile', continent: 'South America', year: 2020, gdp: 352 }, { country: 'Chile', continent: 'South America', year: 2021, gdp: 378 }, { country: 'Chile', continent: 'South America', year: 2022, gdp: 404 }, { country: 'Chile', continent: 'South America', year: 2023, gdp: 433 }, { country: 'Egypt', continent: 'Africa', year: 2020, gdp: 339 }, { country: 'Egypt', continent: 'Africa', year: 2021, gdp: 359 }, { country: 'Egypt', continent: 'Africa', year: 2022, gdp: 380 }, { country: 'Egypt', continent: 'Africa', year: 2023, gdp: 414 }, { country: 'Peru', continent: 'South America', year: 2020, gdp: 252 }, { country: 'Peru', continent: 'South America', year: 2021, gdp: 266 }, { country: 'Peru', continent: 'South America', year: 2022, gdp: 281 }, { country: 'Peru', continent: 'South America', year: 2023, gdp: 297 }, { country: 'New Zealand', continent: 'Oceania', year: 2020, gdp: 227 }, { country: 'New Zealand', continent: 'Oceania', year: 2021, gdp: 242 }, { country: 'New Zealand', continent: 'Oceania', year: 2022, gdp: 257 }, { country: 'New Zealand', continent: 'Oceania', year: 2023, gdp: 272 }, { country: 'Algeria', continent: 'Africa', year: 2020, gdp: 207 }, { country: 'Algeria', continent: 'Africa', year: 2021, gdp: 212 }, { country: 'Algeria', continent: 'Africa', year: 2022, gdp: 218 }, { country: 'Algeria', continent: 'Africa', year: 2023, gdp: 228 } ]; // return new wijmo.CollectionView(data, { groupDescriptions: ['year', 'continent', 'country'] }); } // // get the group data for a selected point getGroupData(group: wijmo.CollectionView | wijmo.CollectionViewGroup) { // get items for this group, aggregate by sales let arr: any[] = []; group.groups.forEach(function (g) { arr.push({ name: g.name, gdp: g.getAggregate(wijmo.Aggregate.Sum, 'gdp'), group: g }); }); // // return a new collection view sorted by sales return new wijmo.CollectionView(arr, { sortDescriptions: [ new wijmo.SortDescription('gdp', false) ] }); } }
body { margin-bottom: 24px; } .container h4 { text-align: center; } .container a { cursor: pointer; } .container .wj-flexchart { border: none; } .container { border: 1px solid #e4e4e4; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/dist/zone.min.js', //'reflect-metadata': 'npm:reflect-metadata/Reflect.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', //'rxjs': 'npm:rxjs', //'rxjs/operators': 'npm:rxjs/operators', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', "@grapecity/wijmo.angular2.chart.analytics": "npm:@grapecity/wijmo.angular2.chart.analytics/index.js", "@grapecity/wijmo.angular2.chart.animation": "npm:@grapecity/wijmo.angular2.chart.animation/index.js", "@grapecity/wijmo.angular2.chart.annotation": "npm:@grapecity/wijmo.angular2.chart.annotation/index.js", "@grapecity/wijmo.angular2.chart.finance.analytics": "npm:@grapecity/wijmo.angular2.chart.finance.analytics/index.js", "@grapecity/wijmo.angular2.chart.finance": "npm:@grapecity/wijmo.angular2.chart.finance/index.js", "@grapecity/wijmo.angular2.chart.hierarchical": "npm:@grapecity/wijmo.angular2.chart.hierarchical/index.js", "@grapecity/wijmo.angular2.chart.interaction": "npm:@grapecity/wijmo.angular2.chart.interaction/index.js", "@grapecity/wijmo.angular2.chart.radar": "npm:@grapecity/wijmo.angular2.chart.radar/index.js", "@grapecity/wijmo.angular2.chart": "npm:@grapecity/wijmo.angular2.chart/index.js", "@grapecity/wijmo.angular2.core": "npm:@grapecity/wijmo.angular2.core/index.js", "@grapecity/wijmo.angular2.gauge": "npm:@grapecity/wijmo.angular2.gauge/index.js", "@grapecity/wijmo.angular2.grid.detail": "npm:@grapecity/wijmo.angular2.grid.detail/index.js", "@grapecity/wijmo.angular2.grid.filter": "npm:@grapecity/wijmo.angular2.grid.filter/index.js", "@grapecity/wijmo.angular2.grid.grouppanel": "npm:@grapecity/wijmo.angular2.grid.grouppanel/index.js", "@grapecity/wijmo.angular2.grid.search": "npm:@grapecity/wijmo.angular2.grid.search/index.js", "@grapecity/wijmo.angular2.grid.multirow": "npm:@grapecity/wijmo.angular2.grid.multirow/index.js", "@grapecity/wijmo.angular2.grid.sheet": "npm:@grapecity/wijmo.angular2.grid.sheet/index.js", '@grapecity/wijmo.angular2.grid.transposed': 'npm:@grapecity/wijmo.angular2.grid.transposed/index.js', '@grapecity/wijmo.angular2.grid.transposedmultirow': 'npm:@grapecity/wijmo.angular2.grid.transposedmultirow/index.js', "@grapecity/wijmo.angular2.grid": "npm:@grapecity/wijmo.angular2.grid/index.js", "@grapecity/wijmo.angular2.input": "npm:@grapecity/wijmo.angular2.input/index.js", "@grapecity/wijmo.angular2.olap": "npm:@grapecity/wijmo.angular2.olap/index.js", "@grapecity/wijmo.angular2.viewer": "npm:@grapecity/wijmo.angular2.viewer/index.js", "@grapecity/wijmo.angular2.nav": "npm:@grapecity/wijmo.angular2.nav/index.js", "@grapecity/wijmo.angular2.directivebase": "npm:@grapecity/wijmo.angular2.directivebase/index.js", '@grapecity/wijmo.angular2.barcode.common': 'npm:@grapecity/wijmo.angular2.barcode.common/index.js', '@grapecity/wijmo.angular2.barcode.composite': 'npm:@grapecity/wijmo.angular2.barcode.composite/index.js', '@grapecity/wijmo.angular2.barcode.specialized': 'npm:@grapecity/wijmo.angular2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', //'typescript': 'https://unpkg.com/typescript@3.2.2', 'ts': 'npm:plugin-typescript/lib/plugin.js', 'css': 'npm:systemjs-plugin-css/css.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, // 'rxjs': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' }, //'rxjs/operators': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/testing': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/webSocket': {main: 'index.js', defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);