import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import { MultiRow } from '@mescius/wijmo.grid.multirow';
import { cvData, headerLayout, layout, getSeries } from './data';
import { AllowSorting, AllowDragging } from '@mescius/wijmo.grid';
import * as chart from '@mescius/wijmo.chart';
import * as core from '@mescius/wijmo';
import * as wjNav from '@mescius/wijmo.nav';
import { ShowText, RadialGauge } from '@mescius/wijmo.gauge';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let theTabPanel = new wjNav.TabPanel('#theTabPanel', {
isAnimated: true,
});
let barchart = new chart.FlexChart('#chart', {
header: '拠点別実績',
legend: {
position: chart.Position.Bottom,
},
bindingX: 'local',
series: [
{
binding: 'lmactTotal',
name: '販売実績（当月）',
},
{
binding: 'ytyactTotal',
name: '販売実績（通期）',
},
{
binding: 'ytyAchievement',
name: '対目標値',
chartType: 'LineSymbols',
},
],
axisY: {
axisLine: true,
title: '販売実績',
},
selectionMode: chart.SelectionMode.Point,
itemsSource: cvData,
palette: [
'rgba(42,159,214,1)',
'rgba(119,179,0,1)',
'rgba(153,51,204,1)',
'rgba(255,136,0,1)',
'rgba(204,0,0,1)',
'rgba(0,204,163,1)',
'rgba(61,109,204,1)',
'rgba(82,82,82,1)',
'rgba(0,0,0,1)',
],
});
let axisY2 = new chart.Axis();
axisY2.position = chart.Position.Right;
axisY2.title = '対目標値';
axisY2.format = 'p0';
axisY2.min = 0;
axisY2.max = 1;
axisY2.axisLine = true;
getSeries('ytyAchievement', barchart).axisY = axisY2;
const pie1 = new chart.FlexPie('#pieChart1', {
bindingName: 'local',
binding: 'lmactTotal',
header: '<u>販売実績 (当月)<u> ',
itemsSource: cvData,
options: { htmlText: true },
legend: {
position: chart.Position.None,
},
startAngle: 89,
dataLabel: {
content: (ht) => {
return `<span class="fill"> ${ht.name} <br> ${core.Globalize.format(ht.value / cvData.getAggregate(1, 'lmactTotal'), 'p0')} </span>`;
},
},
palette: chart.Palettes.modern,
});
const pie2 = new chart.FlexPie('#pieChart2', {
bindingName: 'local',
binding: 'ytyactTotal',
header: '<u>販売実績 (通期)<u> ',
itemsSource: cvData,
options: { htmlText: true },
legend: {
position: chart.Position.None,
},
startAngle: 89,
dataLabel: {
content: (ht) => {
return `<span class="fill"> ${ht.name} <br> ${core.Globalize.format(ht.value / cvData.getAggregate(1, 'ytyactTotal'), 'p0')} </span>`;
},
},
palette: chart.Palettes.modern,
});
let gauge1 = new RadialGauge('#gages1', {
min: 0,
max: 1,
value: cvData.getAggregate(1, 'lmactTotal') /
cvData.getAggregate(1, 'lmbudgetTotal'),
startAngle: -45,
sweepAngle: 280,
showText: ShowText.Value,
face: {
thickness: 0.3,
},
pointer: {
thickness: 0.3,
},
format: 'p0',
});
let gauge2 = new RadialGauge('#gages2', {
min: 0,
max: 1,
value: cvData.getAggregate(1, 'ytyactTotal') /
cvData.getAggregate(1, 'ytybudgetTotal'),
startAngle: -45,
sweepAngle: 280,
showText: ShowText.Value,
face: {
thickness: 0.3,
},
pointer: {
thickness: 0.3,
},
format: 'p0',
});
const multiRow = new MultiRow('#multiRow', {
itemsSource: cvData,
isReadOnly: true,
alternatingRowStep: 0,
allowSorting: AllowSorting.None,
allowDragging: AllowDragging.None,
cellEditEnded: (s, e) => {
gauge1.value =
cvData.getAggregate(1, 'lmactTotal') /
cvData.getAggregate(1, 'lmbudgetTotal');
gauge2.value =
cvData.getAggregate(1, 'ytyactTotal') /
cvData.getAggregate(1, 'ytybudgetTotal');
},
headerLayoutDefinition: headerLayout,
layoutDefinition: layout,
});
document.getElementById('edit').addEventListener('change', (e) => {
multiRow.isReadOnly = !e.target.checked;
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Sales Performance Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”description” content=”Wijmoのコントロールを使用して、販売実績を管理するアプリケーションです。” />
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js"
integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="theTabPanel">
<div>
<a>実績一覧</a>
<div>
グリッドデータの編集:
<label><input type="checkbox" id="edit" />有効にする</label>
<p>
*グリッドの水色の背景色のセルは、自動計算されているため、値を直接変更することはできません。また、地区と項目の列のセルも常に読み取り専用に設定してあります。
</p>
<div id="multiRow"></div>
</div>
</div>
<div>
<a>ダッシュボード</a>
<div>
<div class="tile">
<div id="chart"></div>
</div>
<div class="halfCards">
<div class="tile halfTile">
<div id="pieChart1"></div>
</div>
<div class="tile halfTile">
<div id="pieChart2"></div>
</div>
</div>
<div class="halfCards">
<div class="tile halfTile">
<span class="gagesHeader">対目標値（当月）</span>
<div id="gages1"></div>
</div>
<div class="tile halfTile">
<span class="gagesHeader">対目標値（通期）</span>
<div id="gages2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
import * as wjCore from '@mescius/wijmo';
export const data = [
{
local: '北海道・東北',
actText: '販売実績',
budgetText: '目標',
shortageText: '過不足',
previousText: '前年同期',
yoyText: '対前年比',
lmactStore: 19,
lmactVender: 5,
lmbudgetStore: 20,
lmbudgetVender: 5,
lmpreviousStore: 18,
lmpreviousVender: 5,
ytyactStore: 125,
ytyactVender: 75,
ytybudgetStore: 240,
ytybudgetVender: 85,
ytypreviousStore: 220,
ytypreviousVender: 80,
},
{
local: '関東',
actText: '販売実績',
budgetText: '目標',
shortageText: '過不足',
previousText: '前年同期',
yoyText: '対前年比',
lmactStore: 30,
lmactVender: 7,
lmbudgetStore: 30,
lmbudgetVender: 10,
lmpreviousStore: 21,
lmpreviousVender: 6,
ytyactStore: 175,
ytyactVender: 56,
ytybudgetStore: 360,
ytybudgetVender: 120,
ytypreviousStore: 330,
ytypreviousVender: 98,
},
{
local: '中部',
actText: '販売実績',
budgetText: '目標',
shortageText: '過不足',
previousText: '前年同期',
yoyText: '対前年比',
lmactStore: 21,
lmactVender: 6,
lmbudgetStore: 25,
lmbudgetVender: 8,
lmpreviousStore: 17,
lmpreviousVender: 6,
ytyactStore: 130,
ytyactVender: 48,
ytybudgetStore: 245,
ytybudgetVender: 88,
ytypreviousStore: 230,
ytypreviousVender: 80,
},
{
local: '関西',
actText: '販売実績',
budgetText: '目標',
shortageText: '過不足',
previousText: '前年同期',
yoyText: '対前年比',
lmactStore: 25,
lmactVender: 8,
lmbudgetStore: 23,
lmbudgetVender: 7,
lmpreviousStore: 18,
lmpreviousVender: 5,
ytyactStore: 152,
ytyactVender: 56,
ytybudgetStore: 300,
ytybudgetVender: 90,
ytypreviousStore: 290,
ytypreviousVender: 85,
},
{
local: '中国・四国',
actText: '販売実績',
budgetText: '目標',
shortageText: '過不足',
previousText: '前年同期',
yoyText: '対前年比',
lmactStore: 22,
lmactVender: 7,
lmbudgetStore: 22,
lmbudgetVender: 7,
lmpreviousStore: 19,
lmpreviousVender: 5,
ytyactStore: 132,
ytyactVender: 56,
ytybudgetStore: 270,
ytybudgetVender: 85,
ytypreviousStore: 250,
ytypreviousVender: 75,
},
{
local: '九州',
actText: '販売実績',
budgetText: '目標',
shortageText: '過不足',
previousText: '前年同期',
yoyText: '対前年比',
lmactStore: 21,
lmactVender: 6,
lmbudgetStore: 22,
lmbudgetVender: 8,
lmpreviousStore: 18,
lmpreviousVender: 5,
ytyactStore: 132,
ytyactVender: 40,
ytybudgetStore: 264,
ytybudgetVender: 96,
ytypreviousStore: 250,
ytypreviousVender: 85,
},
];
export const cvData = new wjCore.CollectionView(data, {
calculatedFields: {
lmactTotal: ($) => $.lmactStore + $.lmactVender,
lmbudgetTotal: ($) => $.lmbudgetStore + $.lmbudgetVender,
lmshortageStore: ($) => $.lmactStore - $.lmbudgetStore,
lmshortageVender: ($) => $.lmactVender - $.lmbudgetVender,
lmshortageTotal: ($) => $.lmactTotal - $.lmbudgetTotal,
lmpreviousTotal: ($) => $.lmpreviousStore + $.lmpreviousVender,
lmyoyStore: ($) => ($.lmpreviousStore !== 0) ? $.lmactStore / $.lmpreviousStore : $.lmactStore,
lmyoyVender: ($) => ($.lmpreviousVender !== 0) ? $.lmactVender / $.lmpreviousVender : $.lmactVender,
lmyoyTotal: ($) => $.lmactTotal / $.lmpreviousTotal,
ytyactStoreTotal: ($) => $.ytyactStore + $.lmactStore,
ytyactVenderTotal: ($) => $.ytyactVender + $.lmactVender,
ytyactTotal: ($) => $.ytyactStoreTotal + $.ytyactVenderTotal,
ytybudgetStoreTotal: ($) => $.ytybudgetStore + $.lmbudgetStore,
ytybudgetVenderTotal: ($) => $.ytybudgetVender + $.lmbudgetVender,
ytybudgetTotal: ($) => $.ytybudgetStoreTotal + $.ytybudgetVenderTotal,
ytyshortageStore: ($) => $.ytyactStoreTotal - $.ytybudgetStoreTotal,
ytyshortageVender: ($) => $.ytyactVenderTotal - $.ytybudgetVenderTotal,
ytyshortageTotal: ($) => $.ytyactTotal - $.ytybudgetTotal,
ytypreviousStoreTotal: ($) => $.ytypreviousStore + $.lmpreviousStore,
ytypreviousVenderTotal: ($) => $.ytypreviousVender + $.lmpreviousVender,
ytyyoyStore: ($) => $.ytyactStoreTotal / $.ytypreviousStoreTotal,
ytyyoyVender: ($) => $.ytyactVenderTotal / $.ytypreviousVenderTotal,
ytyyoyTotal: ($) => $.ytyactTotal / $.ytypreviousTotal,
ytyAchievement: ($) => $.ytyactTotal / $.ytybudgetTotal,
ytypreviousTotal: ($) => $.ytypreviousStoreTotal + $.ytypreviousVenderTotal,
},
});
export const headerLayout = [
{
colspan: 2,
cells: [
{
header: '地区',
align: 'center',
colspan: 2,
},
],
},
{
colspan: 2,
cells: [
{
header: '項目',
align: 'center',
colspan: 2,
},
],
},
{
colspan: 3,
cells: [
{ header: '当月', colspan: 3, align: 'center', wordWrap: true },
{ header: '卸売', colspan: 3, align: 'center' },
{ header: '店舗', colspan: 1, align: 'center' },
{ header: '業者', colspan: 1, align: 'center' },
{ header: '卸売合計', colspan: 1, align: 'center' },
],
},
{
colspan: 3,
cells: [
{ header: '本年度累計', colspan: 3, align: 'center' },
{ header: '卸売', colspan: 3, align: 'center' },
{ header: '店舗', colspan: 1, align: 'center' },
{ header: '業者', colspan: 1, align: 'center' },
{ header: '卸売合計', colspan: 1, align: 'center' },
],
},
];
export const layout = [
{
colspan: 2,
cells: [
{
binding: 'local',
align: 'center',
width: 15,
colspan: 2,
isReadOnly: true,
},
],
},
{
colspan: 2,
cells: [
{
binding: 'actText',
align: 'center',
width: 15,
colspan: 2,
isReadOnly: true,
},
{
binding: 'budgetText',
align: 'center',
width: 15,
colspan: 2,
isReadOnly: true,
},
{
binding: 'shortageText',
align: 'center',
width: 15,
colspan: 2,
isReadOnly: true,
},
{
binding: 'previousText',
align: 'center',
width: 15,
colspan: 2,
isReadOnly: true,
},
{
binding: 'yoyText',
align: 'center',
width: 15,
colspan: 2,
isReadOnly: true,
},
],
},
{
colspan: 3,
cells: [
{
binding: 'lmactStore',
align: 'center',
width: 80,
colspan: 1,
},
{
binding: 'lmactVender',
align: 'center',
width: 80,
colspan: 1,
},
{
binding: 'lmactTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'lmbudgetStore',
align: 'center',
width: 80,
colspan: 1,
},
{
binding: 'lmbudgetVender',
align: 'center',
width: 80,
colspan: 1,
},
{
binding: 'lmbudgetTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'lmshortageStore',
align: 'center',
cssClass: 'calculated',
width: 80,
colspan: 1,
cellTemplate: (ctx) => `<span class=${ctx.item.lmshortageStore < 0 ? 'low-val' : ''}>${ctx.text}</span>`,
},
{
binding: 'lmshortageVender',
align: 'center',
cssClass: 'calculated',
width: 80,
colspan: 1,
cellTemplate: (ctx) => `<span class=${ctx.item.lmshortageVender < 0 ? 'low-val' : ''}>${ctx.text}</span>`,
},
{
binding: 'lmshortageTotal',
align: 'center',
cssClass: 'calculated',
width: 80,
colspan: 1,
cellTemplate: (ctx) => `<span class=${ctx.item.lmshortageTotal < 0 ? 'low-val' : ''}>${ctx.text}</span>`,
},
{
binding: 'lmpreviousStore',
align: 'center',
width: 80,
colspan: 1,
},
{
binding: 'lmpreviousVender',
align: 'center',
width: 80,
colspan: 1,
},
{
binding: 'lmpreviousTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'lmyoyStore',
align: 'center',
width: 80,
colspan: 1,
format: 'p1',
cssClass: 'calculated',
},
{
binding: 'lmyoyVender',
align: 'center',
width: 80,
colspan: 1,
format: 'p1',
cssClass: 'calculated',
},
{
binding: 'lmyoyTotal',
align: 'center',
width: 80,
colspan: 1,
format: 'p1',
cssClass: 'calculated',
},
],
},
{
colspan: 3,
cells: [
{
binding: 'ytyactStoreTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytyactVenderTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytyactTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytybudgetStoreTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytybudgetVenderTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytybudgetTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytyshortageStore',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
cellTemplate: (ctx) => `<span class=${ctx.item.lmshortageStore < 0 ? 'low-val' : ''}>${ctx.text}</span>`,
},
{
binding: 'ytyshortageVender',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
cellTemplate: (ctx) => `<span class=${ctx.item.lmshortageStore < 0 ? 'low-val' : ''}>${ctx.text}</span>`,
},
{
binding: 'ytyshortageTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
cellTemplate: (ctx) => `<span class=${ctx.item.lmshortageStore < 0 ? 'low-val' : ''}>${ctx.text}</span>`,
},
{
binding: 'ytypreviousStoreTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytypreviousVenderTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytypreviousTotal',
align: 'center',
width: 80,
colspan: 1,
cssClass: 'calculated',
},
{
binding: 'ytyyoyStore',
align: 'center',
width: 80,
colspan: 1,
format: 'p1',
cssClass: 'calculated',
},
{
binding: 'ytyyoyVender',
align: 'center',
width: 80,
colspan: 1,
format: 'p1',
cssClass: 'calculated',
},
{
binding: 'ytyyoyTotal',
align: 'center',
width: 80,
colspan: 1,
format: 'p1',
cssClass: 'calculated',
},
],
},
];
// get a series by its binding
export function getSeries(binding, barchart) {
let s = barchart.series;
//
for (let i = 0; i < s.length; i++) {
if (s[i].binding == binding) {
return s[i];
}
}
//
return null;
}
.wj-flexgrid {
height: 500px;
}
.low-val {
color: darkred;
font-weight: bold;
}
.calculated {
background-color: azure;
}
.tile {
width: 100%;
height: 400px;
background: white;
border-radius: 0.5rem;
box-sizing: border-box;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 2px rgba(55, 63, 66, 0.07), 0 2px 4px rgba(55, 63, 66, 0.07),
0 4px 8px rgba(55, 63, 66, 0.07), 0 8px 16px rgba(55, 63, 66, 0.07),
0 16px 24px rgba(55, 63, 66, 0.07), 0 24px 32px rgba(55, 63, 66, 0.07);
}
.wj-flexchart .wj-data-labels .wj-data-label {
fill: white;
}
.halfTile {
width: 50%;
}
.fill {
font-size: 14px;
}
.halfCards {
display: flex;
}
#theTabPanel {
padding-left: 20px;
}
#gages1,
#gages2 {
height: 280px;
}
.gagesHeader {
font-size: 16pt;
font-weight: 400;
display: block;
fill: #666;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
text-decoration: underline solid #000000;
}
(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',
'@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.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.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/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',
'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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
