Sparklines allow you to display data trends in small graphs, with the most recent value at the right-most data point. This example demonstrates Sparklines and two ways to implement them.
Since DataViews is modular, you need to reference sparkline.js to get started.
The LineSparkline, ColumnSparkline, and WinlossSparkline columns are three representations of the same data, which is an array of six values.
The first is a line, the second is a column, and the third is a win/loss sparkline. They are implemented by setting the column dataField to a Sparkline formula and defining that formula in your code.
You can see lineSparklineFormula, columnSparklineFormula, and winlossSparklineFormula in the code below.
Because drawing Sparklines needs more calculation, when there are lots of data or the performance of the device is not good, you can set allowAsyncRender to true to draw sparkline asynchronously. When the built-in Sparklines (LINESPARKLINE, COLUMNSPARKLINE, WINLOSSSPARKLINE and PIESPARKLINE) don't meet your needs, you can use asyncRender to define your customized Sparklines. You can see we use this way in column winloss
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Columns/Sparkline/angular/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="columns, presenter, rendering, chart" />
<meta
name="description"
content="Sparklines allow you to display data trends in small graphs, with the most recent value at the right-most data point. This example demonstrates Sparklines and two ways to implement them."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sparkline | Features | MESCIUS DataViewsJS Angular Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/angular-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'angular',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<app-root></app-root>
<script type="text/javascript">
System.import('./app.ts');
</script>
</body>
</html>
import { Component } from '@angular/core';
import { WinlossSparkline } from '@grapecity/dataviews.core';
import { GridLayout } from '@grapecity/dataviews.grid';
import { data } from './data';
const standard = 3000;
function encodeSparklineSettings(settings) {
const json = JSON.stringify(settings).replace(/"/g, '');
return '"' + json + '"';
}
export function makeCols(WinlossSparkline) {
function renderWinlosssparkline(data, container) {
const newData = [];
newData.push(
data.may - standard,
data.june - standard,
data.july - standard,
data.aug - standard,
data.sept - standard,
data.oct - standard
);
const sparkline = new WinlossSparkline({
values: newData,
setting: {
axisColor: '#0C0A3E',
markersColor: '#FED766',
negativeColor: '#FED766',
seriesColor: '#995D81',
displayXAxis: true,
showFirst: true,
showHigh: true,
showLast: true,
showLow: true,
showNegative: true,
showMarkers: true,
},
});
sparkline.paint(container);
}
const lineSparklineSetting = encodeSparklineSettings({
highMarkerColor: '#995D81',
lowMarkerColor: '#FED766',
markersColor: 'black',
seriesColor: '#009FB7',
showMarkers: true,
showHigh: true,
showLow: true,
lineWeight: 2,
minAxisType: 2,
maxAxisType: 2,
manualMax: 25000,
manualMin: 0,
});
const columnSparklineSettings = encodeSparklineSettings({
highMarkerColor: '#995D81',
lowMarkerColor: '#FED766',
markersColor: 'black',
seriesColor: '#009FB7',
showMarkers: true,
showHigh: true,
showLow: true,
minAxisType: 2,
maxAxisType: 2,
manualMax: 25000,
manualMin: 0,
});
const lineSparklineFormula = `=LINESPARKLINE("may,june,july,aug,sept,oct", "", ${lineSparklineSetting})`;
const columnSparklineFormula = `=COLUMNSPARKLINE("may,june,july,aug,sept,oct", "", ${columnSparklineSettings})`;
const smallDevice = screen.width <= 480;
const colWidthLarge = smallDevice ? 125 : '2*';
return [
{
id: 'salesPerson',
caption: 'Sales Person',
dataField: 'Salesperson',
width: 150,
},
{
id: 'may',
caption: 'May',
dataField: 'May',
dataType: 'number',
format: '$#,##',
},
{
id: 'june',
caption: 'June',
dataField: 'June',
dataType: 'number',
format: '$#,##',
},
{
id: 'july',
caption: 'July',
dataField: 'July',
dataType: 'number',
format: '$#,##',
},
{
id: 'aug',
caption: 'Aug.',
dataField: 'Aug',
dataType: 'number',
format: '$#,##',
},
{
id: 'sept',
caption: 'Sept.',
dataField: 'Sept',
dataType: 'number',
format: '$#,##',
},
{
id: 'oct',
caption: 'Oct.',
dataField: 'Oct',
dataType: 'number',
format: '$#,##',
},
{
id: 'trend',
caption: 'LineSparkline',
width: colWidthLarge,
dataField: lineSparklineFormula,
},
{
id: 'sales',
caption: 'ColumnSparkline',
width: colWidthLarge,
dataField: columnSparklineFormula,
visible: !smallDevice,
},
{
id: 'winloss',
caption: 'WinlossSparkline',
width: colWidthLarge,
asyncRender: renderWinlosssparkline,
visible: !smallDevice,
},
];
}
const cols = makeCols(WinlossSparkline);
const layout = new GridLayout({
rowHeight: 32,
allowAsyncRender: isTouchDevice(),
});
function isTouchDevice() {
return window.PointerEvent || window.MSPointerEvent || 'ontouchstart' in document.documentElement;
}
@Component({
selector: 'app-root',
template: `
<gc-dataview id="grid" class="grid" [data]="data" [cols]="cols" [layout]="layout" autoFocus></gc-dataview>
`,
})
export class AppComponent {
data = data;
cols = cols;
layout = layout;
}
import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { DataViewModule } from '@grapecity/dataviews.angular';
// zone.js should be loaded last to fix error 'ZoneAwarePromise has been overwritten'
import 'zone.js';
@NgModule({
declarations: [AppComponent],
imports: [DataViewModule, BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
if (process.env.NODE_ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
// sales details data
export const data = [
{
Salesperson: 'Albertson, Kathy',
May: '3947',
June: '557',
July: '3863',
Aug: '1117',
Sept: '8237',
Oct: '8690',
},
{
Salesperson: 'Allenson, Carol',
May: '4411',
June: '1042',
July: '9355',
Aug: '1100',
Sept: '10185',
Oct: '18749',
},
{
Salesperson: 'Altman, Zoey',
May: '2521',
June: '3072',
July: '6702',
Aug: '2116',
Sept: '13452',
Oct: '8046',
},
{
Salesperson: 'Bittiman, William',
May: '4752',
June: '3755',
July: '4415',
Aug: '1089',
Sept: '4404',
Oct: '20114',
},
{
Salesperson: 'Brennan, Michael',
May: '4964',
June: '3152',
July: '11601',
Aug: '1122',
Sept: '3170',
Oct: '10733',
},
{
Salesperson: 'Carlson, David',
May: '2327',
June: '4056',
July: '3726',
Aug: '1135',
Sept: '8817',
Oct: '18524',
},
{
Salesperson: 'Collman, Harry',
May: '3967',
June: '4906',
July: '9007',
Aug: '2113',
Sept: '13090',
Oct: '13953',
},
{
Salesperson: 'Counts, Elizabeth',
May: '4670',
June: '521',
July: '4505',
Aug: '1024',
Sept: '3528',
Oct: '15275',
},
{
Salesperson: 'David, Chloe',
May: '3379',
June: '3428',
July: '3973',
Aug: '1716',
Sept: '4839',
Oct: '13085',
},
{
Salesperson: 'Davis, William',
May: '5363',
June: '1562',
July: '2945',
Aug: '1176',
Sept: '9642',
Oct: '13714',
},
{
Salesperson: 'Dumlao, Richard',
May: '3275',
June: '2779',
July: '7549',
Aug: '1101',
Sept: '5850',
Oct: '15065',
},
{
Salesperson: 'Farmer, Kim',
May: '3860',
June: '3470',
July: '3862',
Aug: '1040',
Sept: '10024',
Oct: '18389',
},
{
Salesperson: 'Ferguson, Elizabeth',
May: '4685',
June: '1913',
July: '4596',
Aug: '1126',
Sept: '5503',
Oct: '10686',
},
{
Salesperson: 'Flores, Tia',
May: '4052',
June: '2883',
July: '2142',
Aug: '2012',
Sept: '13547',
Oct: '21983',
},
{
Salesperson: 'Ford, Victor',
May: '5541',
June: '4931',
July: '8283',
Aug: '1054',
Sept: '9543',
Oct: '11967',
},
{
Salesperson: 'Hodges, Melissa',
May: '5667',
June: '4798',
July: '8420',
Aug: '1389',
Sept: '10468',
Oct: '12677',
},
{
Salesperson: 'Jameson, Robinson',
May: '4269',
June: '4459',
July: '2248',
Aug: '1058',
Sept: '6267',
Oct: '14982',
},
{
Salesperson: 'Kellerman, Frances',
May: '3502',
June: '4172',
July: '11074',
Aug: '1282',
Sept: '2365',
Oct: '9380',
},
{
Salesperson: 'Mark, Katharine',
May: '5853',
June: '2011',
July: '3807',
Aug: '1348',
Sept: '11110',
Oct: '18047',
},
{
Salesperson: 'Morrison, Thomas',
May: '2586',
June: '2398',
July: '2453',
Aug: '1020',
Sept: '4612',
Oct: '20525',
},
{
Salesperson: 'Moss, Pete',
May: '5714',
June: '4960',
July: '11507',
Aug: '1010',
Sept: '6599',
Oct: '11626',
},
{
Salesperson: 'Paul, Henry David',
May: '5347',
June: '4060',
July: '7056',
Aug: '1555',
Sept: '5439',
Oct: '15285',
},
{
Salesperson: 'Post, Melissa',
May: '4222',
June: '3317',
July: '5849',
Aug: '2081',
Sept: '10521',
Oct: '18979',
},
{
Salesperson: 'Robinson, Betty',
May: '5929',
June: '3127',
July: '7971',
Aug: '1114',
Sept: '2686',
Oct: '24099',
},
{
Salesperson: 'Shadow, Elizabeth',
May: '4270',
June: '4263',
July: '4999',
Aug: '1052',
Sept: '2399',
Oct: '8924',
},
{
Salesperson: 'Smith, Harold',
May: '5421',
June: '4728',
July: '7158',
Aug: '1116',
Sept: '4276',
Oct: '13907',
},
{
Salesperson: 'Thomas, Robert',
May: '3259',
June: '3679',
July: '8406',
Aug: '2123',
Sept: '14697',
Oct: '16827',
},
{
Salesperson: 'Thompson, Shannon',
May: '2943',
June: '3943',
July: '11987',
Aug: '1183',
Sept: '3071',
Oct: '11292',
},
{
Salesperson: 'Walters, Chris',
May: '5529',
June: '4925',
July: '3122',
Aug: '1629',
Sept: '14684',
Oct: '20871',
},
{
Salesperson: 'Zimmerman, Kate',
May: '2380',
June: '3247',
July: '11956',
Aug: '1156',
Sept: '3098',
Oct: '8531',
},
];
(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);
