Financial Indicators

The sample that includes all indicators in a drop-down (Stochastic, MACD, Williams %R, Relative Strength Index, Average True Range, Commodity Channel Index)

A technical indicator is a set of derived data that is calculated by applying one or more formulas to the original set of data. Technical indicators are generally used to forecast the asset's market direction and generally plotted separately from the original data since the Y-axis scales differ.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@grapecity/wijmo.input'; import * as chart from '@grapecity/wijmo.chart'; import * as fChart from '@grapecity/wijmo.chart.finance'; import * as fChartAnalytics from '@grapecity/wijmo.chart.finance.analytics'; import { getData, getIndicatorList } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let data = getData(); // create the chart let theChart = new fChart.FinancialChart('#theChart', { itemsSource: data, bindingX: 'date', series: [ { binding: 'close', name: 'Box Inc' } ], legend: { position: 'Top' }, tooltip: { content: '<b>Date:{date:MMM dd}</b><br/>' + '<table>' + '<tr><td>high</td><td>{high:c}</td><tr/>' + '<tr><td>low</td><td>{low:c}</td><tr/>' + '<tr><td>open</td><td>{open:c}</td><tr/>' + '<tr><td>close</td><td>{close:c}</td><tr/>' + '</table>' }, axisX: { labelAngle: 0 } }); theChart.palette = getRandomPalette(); // let iChart = new fChart.FinancialChart('#iChart', { itemsSource: data, bindingX: 'date', legend: { position: 'Bottom' }, tooltip: { content: '<b>Date:{date:MMM dd}</b><br/>' + '<table>' + '<tr><td>high</td><td>{high:c}</td><tr/>' + '<tr><td>low</td><td>{low:c}</td><tr/>' + '<tr><td>open</td><td>{open:c}</td><tr/>' + '<tr><td>close</td><td>{close:c}</td><tr/>' + '</table>' }, rendered: () => { iChart.axisX.min = theChart.axisX.actualMin; iChart.axisX.max = theChart.axisX.actualMax; }, axisX: { labelAngle: 0 } }); iChart.beginUpdate(); iChart.palette = getRandomPalette(); let s = iChart.series; //ATR let atr = new fChartAnalytics.ATR({ binding: 'high,low,open,close', name: 'ATR', period: 14, }); s.push(atr); //RSI let rsi = new fChartAnalytics.RSI({ binding: 'close', name: 'RSI', period: 14, visibility: 'Hidden' }); s.push(rsi); //cci let cci = new fChartAnalytics.CCI({ binding: 'high,low,open,close', name: 'CCI', period: 20, visibility: 'Hidden' }); s.push(cci); //william r let williamsR = new fChartAnalytics.WilliamsR({ binding: 'high,low,open,close', name: 'Williams %R', period: 14, visibility: 'Hidden' }); s.push(williamsR); //macd let macd = new fChartAnalytics.Macd({ binding: 'close', name: 'MACD,Signal', styles: { macdLine: { stroke: '#bfa554' }, signalLine: { stroke: '#bf8c54' } }, fastPeriod: 12, slowPeriod: 26, smoothingPeriod: 9, visibility: 'Hidden' }); s.push(macd); //macd histogram let histogram = new fChartAnalytics.MacdHistogram({ binding: 'close', name: 'MACD Histogram', fastPeriod: 12, slowPeriod: 26, smoothingPeriod: 9, visibility: 'Hidden' }); s.push(histogram); let stochastic = new fChartAnalytics.Stochastic({ binding: 'high,low,open,close', name: '%K,%D', kPeriod: 14, dPeriod: 3, smoothingPeriod: 1, styles: { kLine: { stroke: '#eddd46' }, dLine: { stroke: '#edb747' } }, visibility: 'Hidden' }); s.push(stochastic); iChart.endUpdate(); //indicators selector let arr = [atr, rsi, cci, williamsR, [macd, histogram], stochastic]; let selectorArr = ['.ul-atr', '.ul-rsi', '.ul-cci', '.ul-williams-r', '.ul-macd', '.ul-stochastic']; let indicatorsList = getIndicatorList(); let indicators = new input.ComboBox('#indicators', { itemsSource: indicatorsList, selectedValuePath: 'abbreviation', displayMemberPath: 'name', selectedIndexChanged: reset }); reset(indicators); function reset(combo) { let idx = combo.selectedIndex; // arr.forEach(s => { if (s instanceof chart.SeriesBase) { s.visibility = chart.SeriesVisibility.Hidden; } else { s[0].visibility = chart.SeriesVisibility.Hidden; s[1].visibility = chart.SeriesVisibility.Hidden; } }); let series = arr[idx]; if (series instanceof chart.SeriesBase) { series.visibility = chart.SeriesVisibility.Visible; } else { series[0].visibility = chart.SeriesVisibility.Visible; series[1].visibility = chart.SeriesVisibility.Visible; } let props = document.querySelectorAll('.ul-properties'); for (let i = 0, len = props.length; i < len; i++) { let ele = props[i]; ele.style.display = 'none'; } let showEle = document.querySelector(selectorArr[idx]); showEle.style.display = ''; } //ATR properties let inputATRPeriod = new input.InputNumber('#atrPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } atr.period = s.value; } }); //RSI properties let inputRSIPeriod = new input.InputNumber('#rsiPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } rsi.period = s.value; } }); //CCI properties let inputCCIPeriod = new input.InputNumber('#cciPeriod', { value: 20, min: 2, max: data.length > 0 ? data.length - 1 : 20, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } cci.period = s.value; } }); //Williams %R properties let inputWilliamsRPeriod = new input.InputNumber('#williamsRPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } williamsR.period = s.value; } }); //MACD & MACD Histogram properties let inputMacdFastPeriod = new input.InputNumber('#macdFastPeriod', { value: 12, min: 2, max: data.length > 0 ? data.length - 1 : 12, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } macd.fastPeriod = s.value; histogram.fastPeriod = s.value; } }); let inputMacdSlowPeriod = new input.InputNumber('#macdSlowPeriod', { value: 26, min: 2, max: data.length > 0 ? data.length - 1 : 26, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } macd.slowPeriod = s.value; histogram.slowPeriod = s.value; } }); let inputMacdSmoothingPeriod = new input.InputNumber('#macdSmoothingPeriod', { value: 9, min: 2, max: data.length > 0 ? data.length - 1 : 9, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } macd.smoothingPeriod = s.value; histogram.smoothingPeriod = s.value; } }); //Stochastic properties let inputStochasticKPeriod = new input.InputNumber('#stochasticKPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } stochastic.kPeriod = s.value; } }); let inputStochasticDPeriod = new input.InputNumber('#stochasticDPeriod', { value: 3, min: 2, max: data.length > 0 ? data.length - 1 : 3, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } stochastic.dPeriod = s.value; } }); let inputStochasticSmoothingPeriod = new input.InputNumber('#stochasticSmoothingPeriod', { value: 1, min: 2, max: data.length > 0 ? data.length - 1 : 1, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } stochastic.smoothingPeriod = s.value; } }); } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Financial Indicators</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <!-- Settings --> <div class="panel-group" id="settingsShort"> <div class="panel panel-default"> <div id="settingsBody" class="panel-collapse collapse in"> <div class="panel-body"> <!-- Indicator Selector --> <ul class="list-inline ul-indicators"> <li> <label>Indicator Type</label> <input id="indicators" /> </li> </ul> <!-- ATR Properties --> <ul class="list-inline ul-properties ul-atr"> <li> <label>Period</label> <input id="atrPeriod" /> </li> </ul> <!-- RSI Properties --> <ul class="list-inline ul-properties ul-rsi"> <li> <label>Period</label> <input id="rsiPeriod" /> </li> </ul> <!-- CCI Properties --> <ul class="list-inline ul-properties ul-cci"> <li> <label>Period</label> <input id="cciPeriod" /> </li> </ul> <!-- Williams %R Properties --> <ul class="list-inline ul-properties ul-williams-r"> <li> <label>Period</label> <input id="williamsRPeriod" /> </li> </ul> <!-- MACD & MACD Histogram Properties --> <ul class="list-inline ul-properties ul-macd"> <li> <label>Fast Period</label> <input id="macdFastPeriod" /> </li> <li> <label>Slow Period</label> <input id="macdSlowPeriod" /> </li> <li> <label>Signal Smoothing Period</label> <input id="macdSmoothingPeriod" /> </li> </ul> <!-- Fast Stochastic Properties --> <ul class="list-inline ul-properties ul-stochastic"> <li> <label>K Period</label> <input id="stochasticKPeriod" /> </li> <li> <label>D Period</label> <input id="stochasticDPeriod" /> </li> <li> <label>Smoothing Period</label> <input id="stochasticSmoothingPeriod" /> </li> </ul> </div> </div> </div> </div> <div id="theChart"></div> <div id="iChart"></div> </div> </body> </html>
// some stock data from Google Finance export function getIndicatorList() { return [ { name: 'Average True Range', abbreviation: 'atr' }, { name: 'Relative Strength Index', abbreviation: 'rsi' }, { name: 'Commodity Channel Index', abbreviation: 'cci' }, { name: 'Williams %R', abbreviation: 'williamsR' }, { name: 'MACD', abbreviation: 'macd' }, { name: 'Stochastic', abbreviation: 'stoch' } ]; } export function getData() { return [ { "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 }, { "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 }, { "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 }, { "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 }, { "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 }, { "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 }, { "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 }, { "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 }, { "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 }, { "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 }, { "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 }, { "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 }, { "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 }, { "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 }, { "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 }, { "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 }, { "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 }, { "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 }, { "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 }, { "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 }, { "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 }, { "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 }, { "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 }, { "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 }, { "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 }, { "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 }, { "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 }, { "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 }, { "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 }, { "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 }, { "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 }, { "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 }, { "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 }, { "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 }, { "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 }, { "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 }, { "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 }, { "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 }, { "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 }, { "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 }, { "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 }, { "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 }, { "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 }, { "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 }, { "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 }, { "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 }, { "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 }, { "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 }, { "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 }, { "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 }, { "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 }, { "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 }, { "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 }, { "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 }, { "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 }, { "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 }, { "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 }, { "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 }, { "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 }, { "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 }, { "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 }, { "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 }, { "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 }, { "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 }, { "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 }, { "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 }, { "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 }, { "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 }, { "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 }, { "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 }, { "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 }, { "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 }, { "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 }, { "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 }, { "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 }, { "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 }, { "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 }, { "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 }, { "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 }, { "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 }, { "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 }, { "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 }, { "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 }, { "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 }, { "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 }, { "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 }, { "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 } ]; }
.wj-flexchart { height: 300px; } body { margin-bottom: 24pt; } #iChart { height: 200px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.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.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.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', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);