Fibonacci Tools

The sample demonstrates the available Fibonacci tool for trend analysis (Arcs, Fans, Retracements, Time Zones)

Fibonacci tool is used for trend analysis in financial charts. With the help of range selector, you can choose data range for calculation.

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 } 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', symbolSize: 6, chartType: 'Candlestick', series: [{ binding: 'high,low,open,close', name: 'Box Inc' }], 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>' } }); theChart.palette = getRandomPalette(); theChart.beginUpdate(); let s = theChart.series; //retracements let retracements = new fChartAnalytics.Fibonacci({ binding: 'close', symbolSize: 1, style: { fill: 'red', stroke: 'red', strokeWidth: 0.5, fontSize: 10 }, name: 'Retracements', labelPosition: 'Left', uptrend: true }); s.push(retracements); //arcs let arcs = new fChartAnalytics.FibonacciArcs({ binding: 'close', name: 'Arcs', start: new chart.DataPoint(46, 19.75), end: new chart.DataPoint(54, 17.1), labelPosition: 'Top', visibility: 'Hidden' }); s.push(arcs); //fans let fans = new fChartAnalytics.FibonacciFans({ binding: 'close', name: 'Fans', start: new chart.DataPoint(10, 18.12), end: new chart.DataPoint(32, 20.53), labelPosition: 'Top', visibility: 'Hidden' }); s.push(fans); //timeZones let timeZones = new fChartAnalytics.FibonacciTimeZones({ binding: 'close', name: 'TimeZones', startX: 0, endX: 3, labelPosition: 'Right', visibility: 'Hidden' }); s.push(timeZones); theChart.endUpdate(); //type selector let type = new input.Menu('#type', { header: 'Type', itemClicked: reset }); reset(type); function reset(menu) { let idx = menu.selectedIndex; idx = idx === -1 ? 0 : idx; let selectors = ['.ul-retracements', '.ul-arcs', '.ul-fans', '.ul-timezones']; let series = [retracements, arcs, fans, timeZones]; let props = document.querySelectorAll('.ul-properties'); for (let i = 0, len = props.length; i < len; i++) { let v = props[i]; v.style.display = 'none'; } let sels = document.querySelectorAll(selectors[idx]); for (let i = 0, len = sels.length; i < len; i++) { let v = sels[i]; v.style.display = ''; } series.forEach(s => s.visibility = chart.SeriesVisibility.Hidden); series[idx].visibility = chart.SeriesVisibility.Visible; updateMenuHeader(type, 'Type'); } //retracements properties let menuRetracementsUptrend = new input.Menu('#uptrend', { header: 'Uptrend', itemClicked: (s) => { retracements.uptrend = !!s.selectedIndex; updateMenuHeader(menuRetracementsUptrend, 'Uptrend'); } }); updateMenuHeader(menuRetracementsUptrend, 'Uptrend'); let menuRetracementsLabelPosition = new input.Menu('#retracementsLabelPosition', { header: 'Label Position', itemClicked: (s) => { retracements.labelPosition = s.selectedValue; updateMenuHeader(menuRetracementsLabelPosition, 'Label Position'); } }); updateMenuHeader(menuRetracementsLabelPosition, 'Label Position'); //arcs properties let menuArcsLabelPosition = new input.Menu('#arcsLabelPosition', { header: 'Label Position', itemClicked: (s) => { arcs.labelPosition = s.selectedValue; updateMenuHeader(menuArcsLabelPosition, 'Label Position'); } }); updateMenuHeader(menuArcsLabelPosition, 'Label Position'); let inputArcsStartX = new input.InputNumber('#arcsStartX', { value: 46, step: 1, valueChanged: s => { arcs.start.x = s.value; theChart.invalidate(); } }); let inputArcsStartY = new input.InputNumber('#arcsStartY', { value: 19.75, step: 1, valueChanged: s => { arcs.start.y = s.value; theChart.invalidate(); } }); let inputArcsEndX = new input.InputNumber('#arcsEndX', { value: 54, step: 1, valueChanged: s => { arcs.end.x = s.value; theChart.invalidate(); } }); let inputArcsEndY = new input.InputNumber('#arcsEndY', { value: 17.1, step: 1, valueChanged: s => { arcs.end.y = s.value; theChart.invalidate(); } }); //fans properties let menuFansLabelPosition = new input.Menu('#fansLabelPosition', { header: 'Label Position', itemClicked: (s) => { fans.labelPosition = s.selectedValue; updateMenuHeader(menuFansLabelPosition, 'Label Position'); } }); updateMenuHeader(menuFansLabelPosition, 'Label Position'); let inputFansStartX = new input.InputNumber('#fansStartX', { value: 10, step: 1, valueChanged: s => { fans.start.x = s.value; theChart.invalidate(); } }); let inputFansStartY = new input.InputNumber('#fansStartY', { value: 18.12, step: 1, valueChanged: s => { fans.start.y = s.value; theChart.invalidate(); } }); let inputFansEndX = new input.InputNumber('#fansEndX', { value: 32, step: 1, valueChanged: s => { fans.end.x = s.value; theChart.invalidate(); } }); let inputFansEndY = new input.InputNumber('#fansEndY', { value: 20.53, step: 1, valueChanged: s => { fans.end.y = s.value; theChart.invalidate(); } }); //timeZones properties let menuTimeZonesLabelPosition = new input.Menu('#timeZonesLabelPosition', { header: 'Label Position', itemClicked: (s) => { timeZones.labelPosition = s.selectedValue; updateMenuHeader(menuTimeZonesLabelPosition, 'Label Position'); } }); updateMenuHeader(menuTimeZonesLabelPosition, 'Label Position'); let inputTimeZonesStartX = new input.InputNumber('#timezonesStartX', { value: 0, step: 1, valueChanged: s => { timeZones.startX = s.value; theChart.invalidate(); } }); let inputTimeZonesEndX = new input.InputNumber('#timezonesEndX', { value: 3, step: 1, valueChanged: s => { timeZones.endX = s.value; theChart.invalidate(); } }); } // 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]]; } // show menu header and current value function updateMenuHeader(menu, header) { menu.header = header ? header + ': <b>' + menu.text + '</b>' : menu.text; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Fibonacci Tools</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"> <!-- Type Selector --> <ul class="list-inline ul-type"> <li> <select id="type"> <option value="retracements" selected="selected">Retracements</option> <option value="arcs">Arcs</option> <option value="fans">Fans</option> <option value="timeZones">Time Zones</option> </select> </li> </ul> <!-- Retracements Properties--> <ul class="list-inline ul-properties ul-retracements"> <li> <select id="uptrend"> <option value="false">False</option> <option value="true" selected="selected">True</option> </select> </li> <li> <select id="retracementsLabelPosition"> <option value="Left" selected="selected">Left</option> <option value="Center">Center</option> <option value="Right">Right</option> </select> </li> </ul> <!-- Arcs Properties --> <ul class="list-inline ul-properties ul-arcs"> <li> <select id="arcsLabelPosition"> <option value="None">None</option> <option value="Top" selected="selected">Top</option> <option value="Center">Center</option> <option value="Bottom">Bottom</option> </select> </li> </ul> <ul class="list-inline ul-properties ul-arcs"> <li> <label>Start X</label> <input id="arcsStartX" /> </li> <li> <label>Start Y</label> <input id="arcsStartY" /> </li> </ul> <ul class="list-inline ul-properties ul-arcs"> <li> <label>End X</label> <input id="arcsEndX" /> </li> <li> <label>End Y</label> <input id="arcsEndY" /> </li> </ul> <!-- Fans Properties --> <ul class="list-inline ul-properties ul-fans"> <li> <select id="fansLabelPosition"> <option value="None">None</option> <option value="Top" selected="selected">Top</option> <option value="Center">Center</option> <option value="Bottom">Bottom</option> </select> </li> </ul> <ul class="list-inline ul-properties ul-fans"> <li> <label>Start X</label> <input id="fansStartX" /> </li> <li> <label>Start Y</label> <input id="fansStartY" /> </li> </ul> <ul class="list-inline ul-properties ul-fans"> <li> <label>End X</label> <input id="fansEndX" /> </li> <li> <label>End Y</label> <input id="fansEndY" /> </li> </ul> <!-- Time zones Properties --> <ul class="list-inline ul-properties ul-timezones"> <li> <select id="timeZonesLabelPosition"> <option value="None">None</option> <option value="Left">Left</option> <option value="Center">Center</option> <option value="Right" selected="selected">Right</option> </select> </li> </ul> <ul class="list-inline ul-properties ul-timezones"> <li> <label>Start X</label> <input id="timezonesStartX" /> </li> <li> <label>End X</label> <input id="timezonesEndX" /> </li> </ul> </div> </div> </div> </div> <div id="theChart"></div> </div> </body> </html>
// some stock data from Google Finance 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.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', '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);