import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useRef, useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as wjInput from '@mescius/wijmo.react.input';
import { FlexGrid, FlexGridColumn } from '@mescius/wijmo.react.grid';
import { Globalize } from '@mescius/wijmo';
import './app.css';
import { data, randBetween } from './data';
const intervalItems = [1000, 500, 100, 10, 1];
const batchSizeItems = [100, 50, 10, 5, 1];
function App() {
const clearCells = useRef(false);
const cellElements = useRef({});
const flex = useRef(null);
const [customCells, setCustomCells] = useState(true);
const [autoUpdate, setAutoUpdate] = useState(true);
const [interval, setInterval] = useState(100);
const [batchSize, setBatchSize] = useState(5);
const initializeGrid = (flexgrid) => {
flexgrid.rowHeaders.columns[0].width = 80;
flexgrid.updatingView.addHandler(() => {
clearCells.current = true; // clear cell elements on next formatItem
});
flexgrid.formatItem.addHandler((s, e) => {
//
// show symbols in row headers
if (e.panel == s.rowHeaders && e.col == 0) {
e.cell.textContent = item = s.rows[e.row].dataItem.symbol;
}
//
// regular cells
if (e.panel == s.cells) {
var col = s.columns[e.col], item = s.rows[e.row].dataItem;
//
// clear cell elements
if (clearCells.current) {
clearCells.current = false;
cellElements.current = {};
}
//
// store cell element
if (!cellElements.current[item.symbol]) {
cellElements.current[item.symbol] = { item: item };
}
cellElements.current[item.symbol][col.binding] = e.cell;
//
// custom painting
formatCell(e.cell, item, col, false);
}
});
flex.current = flexgrid;
updateTrades();
};
const invalidateGrid = () => {
var _a;
(_a = flex.current) === null || _a === void 0 ? void 0 : _a.invalidate();
};
// custom cell painting
const formatCell = useEvent((cell, item, col, flare) => {
if (customCells) {
switch (col.binding) {
case 'bid':
formatDynamicCell(cell, item, col, 'bidHistory', flare);
break;
case 'ask':
formatDynamicCell(cell, item, col, 'askHistory', flare);
break;
case 'lastSale':
formatDynamicCell(cell, item, col, 'saleHistory', flare);
break;
default:
cell.textContent = Globalize.format(item[col.binding], col.format);
break;
}
}
else {
cell.textContent = Globalize.format(item[col.binding], col.format);
}
});
const formatDynamicCell = (cell, item, col, history, flare) => {
// cell template
let html = '<div class="ticker chg-{dir} flare-{fdir}"> ' +
'<div class="value">{value}</div>' +
'<div class="chg">{chg}</div>' +
'<div class="glyph"><span class="wj-glyph-{glyph}"></span></div>' +
'<div class="spark">{spark}</div>' +
'</div>';
// value
html = html.replace('{value}', Globalize.format(item[col.binding], col.format));
// % change
let hist = item[history];
let chg = hist.length > 1 ? hist[hist.length - 1] / hist[hist.length - 2] - 1 : 0;
html = html.replace('{chg}', Globalize.format(chg * 100, 'n1') + '%');
// up/down glyph
let glyph = chg > +0.001 ? 'up' : chg < -0.001 ? 'down' : 'circle';
html = html.replace('{glyph}', glyph);
// sparklines
html = html.replace('{spark}', getSparklines(item[history]));
// change direction
let dir = glyph == 'circle' ? 'none' : glyph;
html = html.replace('{dir}', dir);
// flare direction
let flareDir = flare ? dir : 'none';
html = html.replace('{fdir}', flareDir);
// done
cell.innerHTML = html;
};
// update grid cells when items change
const updateGrid = (changedItems) => {
var _a;
for (let symbol in changedItems) {
let itemCells = cellElements.current[symbol];
if (itemCells) {
let item = itemCells.item;
(_a = flex.current) === null || _a === void 0 ? void 0 : _a.columns.forEach((col) => {
let cell = itemCells[col.binding];
if (cell) {
formatCell(cell, item, col, true);
}
});
}
}
};
const updateTrades = useEvent(() => {
let now = new Date();
let changedItems = {};
for (let i = 0; i < batchSize; i++) {
// select an item
let item = data[randBetween(0, data.length - 1)];
// update current data
item.bid = item.bid * (1 + (Math.random() * .11 - .05));
item.ask = item.ask * (1 + (Math.random() * .11 - .05));
item.bidSize = randBetween(10, 1000);
item.askSize = randBetween(10, 1000);
var sale = (item.ask + item.bid) / 2;
item.lastSale = sale;
item.lastSize = Math.floor((item.askSize + item.bidSize) / 2);
item.quoteTime = now;
item.tradeTime = new Date(Date.now() + randBetween(0, 60000));
// update history data
addHistory(item.askHistory, item.ask);
addHistory(item.bidHistory, item.bid);
addHistory(item.saleHistory, item.lastSale);
//
// keep track of changed items
changedItems[item.symbol] = true;
}
//
// update the grid
if (autoUpdate) {
updateGrid(changedItems);
}
// and schedule the next batch
setTimeout(updateTrades, interval);
});
const addHistory = (array, data) => {
array.push(data);
if (array.length > 10) { // limit history length
array.splice(0, 1);
}
};
const getSparklines = (data) => {
let svg = '', min = Math.min.apply(Math, data), max = Math.max.apply(Math, data), x1 = 0, y1 = scaleY(data[0], min, max);
for (let i = 1; i < data.length; i++) {
let x2 = Math.round((i) / (data.length - 1) * 100);
let y2 = scaleY(data[i], min, max);
svg += '<line x1=' + x1 + '% y1=' + y1 + '% x2=' + x2 + '% y2=' + y2 + '% />';
x1 = x2;
y1 = y2;
}
return '<svg><g>' + svg + '</g></svg>';
};
const scaleY = (value, min, max) => {
return max > min ? 100 - Math.round((value - min) / (max - min) * 100) : 0;
};
const customCellsChange = () => {
setCustomCells(!customCells);
invalidateGrid();
};
const autoUpdateChange = () => {
setAutoUpdate(!autoUpdate);
};
const intervalItemsChange = (s, e) => {
setInterval(s.selectedValue);
};
const batchSizeItemsChange = (s, e) => {
setBatchSize(s.selectedValue);
};
return (<div className="container-fluid">
<label>
Custom Cells
<input onChange={customCellsChange} checked={customCells} type="checkbox"/>
</label>
<label>
Auto Update
<input onChange={autoUpdateChange} checked={autoUpdate} type="checkbox"/>
</label>
<label>
Update Interval (ms)
<wjInput.ComboBox itemsSource={intervalItems} selectedValue={interval} textChanged={intervalItemsChange}/>
</label>
<label>
Batch Size (# items)
<wjInput.ComboBox itemsSource={batchSizeItems} selectedValue={batchSize} textChanged={batchSizeItemsChange}/>
</label>
<FlexGrid isReadOnly={true} selectionMode="Row" initialized={initializeGrid} itemsSource={data}>
<FlexGridColumn binding="name" header="Name" width={200}/>
<FlexGridColumn binding="bid" header="Bid" width={200} format="n2"/>
<FlexGridColumn binding="ask" header="Ask" width={200} format="n2"/>
<FlexGridColumn binding="lastSale" header="Last Sale" width={200} format="n2"/>
<FlexGridColumn binding="bidSize" header="Bid Size" format="n0"/>
<FlexGridColumn binding="askSize" header="Ask Size" format="n0"/>
<FlexGridColumn binding="lastSize" header="Last Size" format="n0"/>
<FlexGridColumn binding="volume" header="Volume" format="n0"/>
<FlexGridColumn binding="quoteTime" header="Quote Time" format="hh:mm:ss" align="center"/>
<FlexGridColumn binding="tradeTime" header="Trade Time" format="hh:mm:ss" align="center"/>
</FlexGrid>
</div>);
}
const container = document.getElementById('app');
if (container) {
const root = ReactDOM.createRoot(container);
root.render(<App />);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Wijmo FlexGrid Dynamic Updates</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
label {
font-weight: normal;
margin-right: 20px;
}
/* Wijmo Controls */
.wj-combobox {
width: 100px;
}
.wj-flexgrid {
max-height: 500px;
}
.wj-flexgrid .wj-cell {
padding: 6px;
}
.wj-flexgrid .wj-cell:not(.wj-header) {
border-bottom: none;
}
/* ticker cell */
.ticker div {
display: inline-block;
}
.ticker .chg {
font-size: 75%;
opacity: .75;
text-align: center;
width: 4em;
}
.ticker .glyph {
font-size: 120%;
text-align: center;
width: 1em;
}
.ticker .spark {
padding: 0 4px;
width: 4em;
height: 1em;
opacity: .65;
}
.ticker .spark svg {
width: 100%;
height: 100%;
stroke: currentColor;
stroke-width: 2px;
overflow: visible;
}
/* value going up */
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-up .chg,
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-up .glyph {
color: green;
}
/* value going down */
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-down .chg,
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-down .glyph {
color: red;
}
/* value not changing */
.ticker.chg-none .chg,
.ticker.chg-none .glyph {
opacity: .25;
}
/* up/down 'flare' animations */
.ticker.flare-up:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: 1s ease-out flare-up;
}
@keyframes flare-up {
from {
background: rgba(50, 255, 50, 0.5);
}
}
.ticker.flare-down:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: 1s ease-out flare-down;
}
@keyframes flare-down {
from {
background: rgba(255, 50, 50, 0.5);
}
}
export const randBetween = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
const getData = () => {
// Companies in the Financial Times Stock Exchange 100 Index
// https://en.wikipedia.org/wiki/FTSE_100_Index
// mcap: market capitalization (in billion pounds)
// emp: employees (thousands)
let companies = [
{ symbol: 'RDSA', name: 'Royal Dutch Shell', sector: 'Oil and gas', mcap: 160.12, emp: 90 },
{ symbol: 'ULVR', name: 'Unilever', sector: 'Consumer goods', mcap: 90.42, emp: 171 },
{ symbol: 'HSBA', name: 'HSBC', sector: 'Banking', mcap: 88.11, emp: 267 },
{ symbol: 'BATS', name: 'British American Tobacco', sector: 'Tobacco', mcap: 71.4, emp: 87 },
{ symbol: 'GSK', name: 'GlaxoSmithKline', sector: 'Pharmaceuticals', mcap: 67.38, emp: 97 },
{ symbol: 'SAB', name: 'SABMiller', sector: 'Beverages', mcap: 67.32, emp: 70 },
{ symbol: 'BP', name: 'BP', sector: 'Oil and gas', mcap: 63.13, emp: 97 },
{ symbol: 'VOD', name: 'Vodafone Group', sector: 'Telecomms', mcap: 56.55, emp: 86 },
{ symbol: 'AZN', name: 'AstraZeneca', sector: 'Pharmaceuticals', mcap: 51.23, emp: 57 },
{ symbol: 'RB', name: 'Reckitt Benckiser', sector: 'Consumer goods', mcap: 46.32, emp: 32 },
{ symbol: 'DGE', name: 'Diageo', sector: 'Beverages', mcap: 46.01, emp: 25 },
{ symbol: 'BT.A', name: 'BT Group', sector: 'Telecomms', mcap: 45.61, emp: 89 },
{ symbol: 'LLOY', name: 'Lloyds Banking Group', sector: 'Banking', mcap: 44.11, emp: 120 },
{ symbol: 'BLT', name: 'BHP Billiton', sector: 'Mining', mcap: 41.88, emp: 46 },
{ symbol: 'NG', name: 'National Grid plc', sector: 'Energy', mcap: 36.14, emp: 27 },
{ symbol: 'IMB', name: 'Imperial Brands', sector: 'Tobacco', mcap: 35.78, emp: 38 },
{ symbol: 'RIO', name: 'Rio Tinto Group', sector: 'Mining', mcap: 34.84, emp: 67 },
{ symbol: 'PRU', name: 'Prudential plc', sector: 'Finance', mcap: 31.63, emp: 25 },
{ symbol: 'RBS', name: 'Royal Bank of Scotland Group', sector: 'Banking', mcap: 28.6, emp: 150 },
{ symbol: 'BARC', name: 'Barclays', sector: 'Banking', mcap: 27.18, emp: 150 },
{ symbol: 'ABF', name: 'Associated British Foods', sector: 'Food', mcap: 25.77, emp: 102 },
{ symbol: 'REL', name: 'RELX Group', sector: 'Publishing', mcap: 25.54, emp: 28 },
{ symbol: 'REX', name: 'Rexam', sector: 'Packaging', mcap: 25.54, emp: 19 },
{ symbol: 'CCL', name: 'Carnival Corporation & plc', sector: 'Leisure', mcap: 24.85, emp: 86 },
{ symbol: 'SHP', name: 'Shire plc', sector: 'Pharmaceuticals', mcap: 22.52, emp: 4 },
{ symbol: 'CPG', name: 'Compass Group', sector: 'Food', mcap: 20.21, emp: 471 },
{ symbol: 'WPP', name: 'WPP plc', sector: 'Media', mcap: 19.01, emp: 162 },
{ symbol: 'AV.', name: 'Aviva', sector: 'Insurance', mcap: 17.69, emp: 40 },
{ symbol: 'SKY', name: 'Sky plc', sector: 'Media', mcap: 17.5, emp: 22 },
{ symbol: 'GLEN', name: 'Glencore', sector: 'Mining', mcap: 16.96, emp: 57 },
{ symbol: 'BA.', name: 'BAE Systems', sector: 'Military', mcap: 16.01, emp: 107 },
{ symbol: 'TSCO', name: 'Tesco', sector: 'Supermarket', mcap: 14.92, emp: 519 },
{ symbol: 'SSE', name: 'SSE plc', sector: 'Energy', mcap: 14.03, emp: 19 },
{ symbol: 'STAN', name: 'Standard Chartered', sector: 'Banking', mcap: 13.52, emp: 86 },
{ symbol: 'LGEN', name: 'Legal & General', sector: 'Insurance', mcap: 13.21, emp: 9 },
{ symbol: 'ARM', name: 'ARM Holdings', sector: 'Engineering', mcap: 13.2, emp: 2 },
{ symbol: 'RR.', name: 'Rolls-Royce Holdings', sector: 'Manufacturing', mcap: 11.8, emp: 55 },
{ symbol: 'EXPN', name: 'Experian', sector: 'Information', mcap: 11.1, emp: 17 },
{ symbol: 'IAG', name: 'International Consolidated Airlines Group SA', sector: 'Travel', mcap: 11.01, emp: 58 },
{ symbol: 'CRH', name: 'CRH plc', sector: 'Building materials', mcap: 10.9, emp: 76 },
{ symbol: 'CNA', name: 'Centrica', sector: 'Energy', mcap: 10.72, emp: 40 },
{ symbol: 'SN.', name: 'Smith & Nephew', sector: 'Medical', mcap: 10.27, emp: 11 },
{ symbol: 'ITV', name: 'ITV plc', sector: 'Media', mcap: 10.15, emp: 4 },
{ symbol: 'WOS', name: 'Wolseley plc', sector: 'Building materials', mcap: 9.2, emp: 44 },
{ symbol: 'OML', name: 'Old Mutual', sector: 'Insurance', mcap: 8.45, emp: 54 },
{ symbol: 'LAND', name: 'Land Securities', sector: 'Property', mcap: 8.19, emp: 0 },
{ symbol: 'LSE', name: 'London Stock Exchange Group', sector: 'Finance', mcap: 8.06, emp: 4 },
{ symbol: 'KGF', name: 'Kingfisher plc', sector: 'Retail homeware', mcap: 7.8, emp: 80 },
{ symbol: 'CPI', name: 'Capita', sector: 'Support Services', mcap: 7.38, emp: 46 },
{ symbol: 'BLND', name: 'British Land', sector: 'Property', mcap: 7.13, emp: 0 },
{ symbol: 'WTB', name: 'Whitbread', sector: 'Retail hospitality', mcap: 7.09, emp: 86 },
{ symbol: 'MKS', name: 'Marks & Spencer', sector: 'Retailer', mcap: 7.01, emp: 81 },
{ symbol: 'FRES', name: 'Fresnillo plc', sector: 'Mining', mcap: 6.99, emp: 2 },
{ symbol: 'NXT', name: 'Next plc', sector: 'Retail clothing', mcap: 6.9, emp: 58 },
{ symbol: 'SDR', name: 'Schroders', sector: 'Fund management', mcap: 6.63, emp: 3 },
{ symbol: 'SL', name: 'Standard Life', sector: 'Fund management', mcap: 6.63, emp: 10 },
{ symbol: 'PSON', name: 'Pearson PLC', sector: 'Education', mcap: 6.52, emp: 37 },
{ symbol: 'BNZL', name: 'Bunzl', sector: 'Industrial products', mcap: 6.38, emp: 12 },
{ symbol: 'MNDI', name: 'Mondi', sector: 'Manufacturing', mcap: 6.37, emp: 26 },
{ symbol: 'UU', name: 'United Utilities', sector: 'Water', mcap: 6.36, emp: 5 },
{ symbol: 'PSN', name: 'Persimmon plc', sector: 'Building', mcap: 6.34, emp: 2 },
{ symbol: 'SGE', name: 'Sage Group', sector: 'IT', mcap: 6.26, emp: 12 },
{ symbol: 'EZJ', name: 'EasyJet', sector: 'Travel', mcap: 6.17, emp: 11 },
{ symbol: 'AAL', name: 'Anglo American plc', sector: 'Mining', mcap: 6.09, emp: 100 },
{ symbol: 'TW.', name: 'Taylor Wimpey', sector: 'Building', mcap: 5.99, emp: 3 },
{ symbol: 'TUI', name: 'TUI Group', sector: 'Leisure', mcap: 5.99, emp: 76 },
{ symbol: 'WPG', name: 'Worldpay', sector: 'Payment services', mcap: 5.9, emp: 4 },
{ symbol: 'RRS', name: 'Randgold Resources', sector: 'Mining', mcap: 5.89, emp: 6 },
{ symbol: 'HL', name: 'Hargreaves Lansdown', sector: 'Finance', mcap: 5.87, emp: 0 },
{ symbol: 'BDEV', name: 'Barratt Developments', sector: 'Building', mcap: 5.86, emp: 5 },
{ symbol: 'IHG', name: 'InterContinental Hotels Group', sector: 'Hotels', mcap: 5.75, emp: 345 },
{ symbol: 'BRBY', name: 'Burberry', sector: 'Fashion', mcap: 5.65, emp: 10 },
{ symbol: 'DC.', name: 'Dixons Carphone', sector: 'Retail', mcap: 5.16, emp: 40 },
{ symbol: 'DLG', name: 'Direct Line Group', sector: 'Insurance', mcap: 5.15, emp: 13 },
{ symbol: 'CCH', name: 'Coca-Cola HBC AG', sector: 'Consumer', mcap: 5.1, emp: 38 },
{ symbol: 'SVT', name: 'Severn Trent', sector: 'Water', mcap: 5.04, emp: 8 },
{ symbol: 'DCC', name: 'DCC plc', sector: 'Investments', mcap: 5.03, emp: 9 },
{ symbol: 'SBRY', name: 'Sainsbury\'s', sector: 'Supermarket', mcap: 5.02, emp: 150 },
{ symbol: 'ADM', name: 'Admiral Group', sector: 'Insurance', mcap: 4.91, emp: 2 },
{ symbol: 'GKN', name: 'GKN', sector: 'Manufacturing', mcap: 4.79, emp: 50 },
{ symbol: 'JMAT', name: 'Johnson Matthey', sector: 'Chemicals', mcap: 4.79, emp: 9 },
{ symbol: 'PFG', name: 'Provident Financial', sector: 'Finance', mcap: 4.74, emp: 3 },
{ symbol: 'ANTO', name: 'Antofagasta', sector: 'Mining', mcap: 4.71, emp: 4 },
{ symbol: 'STJ', name: 'St. James\'s Place plc', sector: 'Finance', mcap: 4.68, emp: 1 },
{ symbol: 'ITRK', name: 'Intertek', sector: 'Product testing', mcap: 4.67, emp: 33 },
{ symbol: 'BAB', name: 'Babcock International', sector: 'Engineering', mcap: 4.65, emp: 34 },
{ symbol: 'BKG', name: 'Berkeley Group Holdings', sector: 'Building', mcap: 4.6, emp: 2 },
{ symbol: 'ISAT', name: 'Inmarsat', sector: 'Telecomms', mcap: 4.47, emp: 1 },
{ symbol: 'TPK', name: 'Travis Perkins', sector: 'Retailer', mcap: 4.46, emp: 24 },
{ symbol: 'HMSO', name: 'Hammerson', sector: 'Property', mcap: 4.42, emp: 0 },
{ symbol: 'MERL', name: 'Merlin Entertainments', sector: 'Leisure', mcap: 4.42, emp: 28 },
{ symbol: 'RMG', name: 'Royal Mail', sector: 'Delivery', mcap: 4.41, emp: 150 },
{ symbol: 'AHT', name: 'Ashtead Group', sector: 'Equipment rental', mcap: 4.26, emp: 12 },
{ symbol: 'RSA', name: 'RSA Insurance Group', sector: 'Insurance', mcap: 4.16, emp: 21 },
{ symbol: 'III', name: '3i', sector: 'Private equity', mcap: 4.06, emp: 0 },
{ symbol: 'INTU', name: 'Intu Properties', sector: 'Property', mcap: 3.89, emp: 2 },
{ symbol: 'SMIN', name: 'Smiths Group', sector: 'Engineering', mcap: 3.84, emp: 23 },
{ symbol: 'HIK', name: 'Hikma Pharmaceuticals', sector: 'Manufacturing', mcap: 3.71, emp: 6 },
{ symbol: 'ADN', name: 'Aberdeen Asset Management', sector: 'Fund management', mcap: 3.14, emp: 1 },
{ symbol: 'SPD', name: 'Sports Direct', sector: 'Retail', mcap: 2.4, emp: 17 }
];
// Trading Market Data
// https://en.wikipedia.org/wiki/Market_data
let data = [], now = new Date();
companies.forEach((company) => {
let bid = randBetween(1, 100000) / 100, ask = bid + randBetween(0, 100) / 100;
data.push({
symbol: company.symbol,
name: company.name,
bid: bid,
ask: ask,
lastSale: bid,
bidSize: randBetween(10, 500),
askSize: randBetween(10, 500),
lastSize: randBetween(10, 500),
volume: randBetween(10000, 20000),
quoteTime: now,
tradeTime: now,
askHistory: [ask, ask],
bidHistory: [bid, bid],
saleHistory: [bid, bid]
});
});
// done
return data;
};
export const data = getData();
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: 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',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
"@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js",
"@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js",
"@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js",
"@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js",
"@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js",
"@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js",
"@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js",
"@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js",
"@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js",
"@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js",
'@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js',
"@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js",
"@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js",
"@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js",
"@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js",
'@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js',
"@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js",
"@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js",
'@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js',
'@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js',
'@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js',
"@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js",
"@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js",
"@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js",
"@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js",
"@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js",
"@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js",
'@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js',
'@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js',
'@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'react-dom/client': 'npm:react-dom/umd/react-dom.production.min.js',
'redux': 'npm:redux/dist/redux.min.js',
'react-redux': 'npm:react-redux/dist/react-redux.min.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',
"react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js",
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
