import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useState } from 'react';
import * as wjViewer from '@mescius/wijmo.react.viewer';
import './app.css';
import { categories } from './data';
function App() {
const [category, setCategory] = useState(categories[6]);
const [report, setReport] = useState(category.reports[0]);
const handleReportChange = (event) => {
const [categoryName, reportName] = event.currentTarget.value.split('/');
const category = categories.find((category) => category.name === categoryName);
if (category) {
const report = category.reports.find((report) => report.name === reportName);
if (report) {
setCategory(category);
setReport(report);
}
}
};
return (<div className="container-fluid">
<div className="row report-names">
<label>Selected FlexReport Report:</label>
<select id="reports" className="combobox" value={`${category.name}/${report.name}`} onChange={handleReportChange}>
{categories.map((cat) => (<optgroup key={cat.name} label={cat.title}>
{cat.reports.map((rep) => (<option key={rep.name} value={`${cat.name}/${rep.name}`}>
{rep.title}
</option>))}
</optgroup>))}
</select>
</div>
<wjViewer.ReportViewer filePath={`ReportsRoot/${category.name}/${report.filename}`} reportName={report.name} paginated={true} serviceUrl="https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report"/>
</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 Column DataMaps</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 {
margin-right: 3px;
}
.container-fluid .wj-viewer {
width: 100%;
display: block;
}
.report-names {
margin: 10px;
}
@media print {
.report-names {
display: none;
}
}
export const categories = [
{
name: 'Controls',
title: 'Controls',
reports: [
{
filename: 'AllCharts.flxr',
name: 'AllCharts',
title: 'All Charts'
},
{
filename: 'BarcodeProductLabels.flxr',
name: 'Product Labels (EAN-13, Label 5096)',
title: 'Barcode Product Labels'
},
{
filename: 'BarcodeShippingLabels.flxr',
name: 'Shipping Labels (Code 128, Label 5164)',
title: 'Barcode Shipping Labels'
},
{
filename: 'BoundImages.flxr',
name: 'Bound Images',
title: 'Bound Images'
},
{
filename: 'Charts.flxr',
name: 'Charts',
title: 'Charts'
},
{
filename: 'CheckBox.flxr',
name: 'CheckBox',
title: 'Check Box'
},
{
filename: 'ComplexExpressions.flxr',
name: 'ComplexExpressions',
title: 'Complex Expressions'
},
{
filename: 'NewCharts.flxr',
name: 'NewCharts',
title: 'New Charts'
},
{
filename: 'PageHeadersInSubreports.flxr',
name: 'Page Headers in Subreports',
title: 'PageHeader In Subreports'
},
{
filename: 'ParagraphField.flxr',
name: 'ParagraphField',
title: 'Paragraph Field'
},
{
filename: 'RTFField.flxr',
name: 'RTFField',
title: 'RTF Field'
},
{
filename: 'Shapes.flxr',
name: 'Shapes',
title: 'Shapes'
},
{
filename: 'UnboundImages.flxr',
name: 'Unbound Images',
title: 'Unbound Images'
}
]
},
{
name: 'DataBinding',
title: 'Data Binding',
reports: [
{
filename: 'MultiDataSource.flxr',
name: 'MultiDataSource',
title: 'Multiple Data Source'
},
{
filename: 'Nwind.flxr',
name: 'Invoice',
title: 'NWind'
},
{
filename: 'StoredProcedure.flxr',
name: 'Alphabetical List of Products',
title: 'Stored Procedure'
}
]
},
{
name: 'DataCalculations',
title: 'Data Calculations',
reports: [
{
filename: 'Aggregates.flxr',
name: 'Aggregates',
title: 'Aggregates'
},
{
filename: 'CalculatedFields.flxr',
name: 'CalculatedFields',
title: 'Calculated Fields'
},
{
filename: 'GroupPageCounts.flxr',
name: 'GroupPageCounts',
title: 'Page Counts'
},
{
filename: 'RunningSums.flxr',
name: 'Running Sums',
title: 'Running Sums'
}
]
},
{
name: 'DataManipulation',
title: 'Data Manipulation',
reports: [
{
filename: 'CascadingParameters.flxr',
name: 'Cascading Parameters',
title: 'Cascading Parameters'
},
{
filename: 'MultivalueParameters.flxr',
name: 'MultivalueParameters',
title: 'Multivalue Parameters'
},
{
filename: 'Parameters.flxr',
name: 'Parameters',
title: 'Parameters'
},
{
filename: 'Sorting.flxr',
name: 'Sorting',
title: 'Sorting'
}
]
},
{
name: 'EnterpriseReports',
title: 'Enterprise Reports',
reports: [
{
filename: 'EmployeeExpReport.flxr',
name: 'EmpExpenseReport',
title: 'Employee Expense Report'
},
{
filename: 'MarketingProjectPlan.flxr',
name: 'MarketingProjectPlan',
title: 'Marketing Project Plan'
},
{
filename: 'MonthlyProjectExpenseTracking.flxr',
name: 'MonthlyProjectExpenseTracking',
title: 'Monthly Project Expense'
},
{
filename: 'OrganizationChart.flxr',
name: 'OrganizationChart',
title: 'Organization Chart'
}
]
},
{
name: 'FinancialReports',
title: 'Financial Reports',
reports: [
{
filename: 'BalanceSheet.flxr',
name: 'BalanceSheet',
title: 'Balance Sheet'
},
{
filename: 'InventoryManagementReport.flxr',
name: 'InventoryManagementReport',
title: 'Inventory Management Report'
},
{
filename: 'MonthlyBudget.flxr',
name: 'MonthlyBudget',
title: 'Monthly Budget'
}
]
},
{
name: 'Formatting',
title: 'Formatting',
reports: [
{
filename: 'AlternateBackground.flxr',
name: 'AlternateBackground',
title: 'Alternating Background'
},
{
filename: 'ConditionalFormatting.flxr',
name: 'ConditionalFormatting',
title: 'Conditional Formatting'
},
{
filename: 'Watermark.flxr',
name: 'Watermark',
title: 'Watermark'
}
]
},
{
name: 'Layout',
title: 'Layout',
reports: [
{
filename: 'Layout.flxr',
name: 'Layout',
title: 'Can Grow/Can Shrink'
},
{
filename: 'ContinuedHeaders.flxr',
name: 'Continued Headers',
title: 'Continued Headers'
},
{
filename: 'CustomPaperSize.flxr',
name: 'Custom Paper Size',
title: 'Custom Paper Size'
},
{
filename: 'DynamicPH.flxr',
name: 'Dynamic Page Header',
title: 'Dynamic Page Headers'
},
{
filename: 'ForcePageBreaks.flxr',
name: 'Force Page Breaks',
title: 'Force Page Breaks'
},
{
filename: 'Gutter.flxr',
name: 'Gutter',
title: 'Gutter'
},
{
filename: 'SubSections.flxr',
name: 'SubSections',
title: 'Sub Sections'
}
]
},
{
name: 'MedicalReports',
title: 'Medical Reports',
reports: [
{
filename: 'BloodTestReport.flxr',
name: 'BloodTest',
title: 'Blood Test Report'
},
{
filename: 'FoodAllergyTest.flxr',
name: 'FoodAllergyTest',
title: 'Food Allergy Test'
}
]
},
{
name: 'MiscReports',
title: 'Misc Reports',
reports: [
{
filename: 'CrossTab.flxr',
name: 'Cross-tab Reports',
title: 'Cross Tab Reports'
},
{
filename: 'MailMerge.flxr',
name: 'Mail Merge',
title: 'Mail Merge'
},
{
filename: 'PriceComparison.flxr',
name: 'PriceComparison',
title: 'Price Comparison'
}
]
},
{
name: 'TelecomReports',
title: 'Telecom Reports',
reports: [
{
filename: 'TelephoneBillReport.flxr',
name: 'TelephoneBill',
title: 'Telephone Bill Report'
}
]
}
];
(function (global) {
window.process = {
env: {
NODE_ENV: "production"
}
}
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.style': 'npm:@mescius/wijmo.grid.style/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/index.js',
'react-dom': 'npm:react-dom/index.js',
'react-dom/client': 'npm:react-dom/client.js',
"scheduler": "npm:scheduler/index.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);
