Compact Mode (React)

This demo shows how to configure the group to display in compact mode.

This example uses React.

This demo shows how to configure the group to display in compact mode. Compact mode looks like a tree when you enable automatic merge in grouped columns. Normally, the group expand or collapse icon is shown in the group header and the group header does not take into account the automatic merged area, so as a result, the group header may appear cluttered. In order to solve this problem, DataViews provides a cellMergingSettings.groupedColumn.showIcon option to display the expand or collapse icon in the merged column. In addition, there is another option, cellMergingSettings.onlyShowFirstRow, which only shows the merged value in the first row of each group. Note: If the group is collapsed in compact mode, the footer is always shown even if it's set to hidden in the group configuration. Try checking some of the options and see how it affects the grid.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Grouping/CompactMode/react/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="columns, auto, merge" /> <meta name="description" content="This demo shows how to configure the group to display in compact mode." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Compact Mode | Features | GrapeCity DataViewsJS React Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'react', DVJS_LICENSE_KEY: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script> <script src="systemjs.config.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script type="text/javascript"> System.import('./app.js'); </script> </body> </html>
import _ from 'lodash'; import React from 'react'; import ReactDOM from 'react-dom'; import DataView from '@grapecity/dataviews.react'; import { GridLayout } from '@grapecity/dataviews.grid'; import { data } from './data'; import locale from './locale'; export const cols = [ { caption: 'Store', columns: [ { caption: 'Area', columns: [ { id: 'state', caption: 'State', dataField: 'state', allowCellMerging: true, width: 70, }, { id: 'city', caption: 'City', dataField: 'city', allowCellMerging: true, width: 125, }, ], }, { id: 'id', caption: 'ID', dataField: 'ID' }, ], }, { caption: 'Goods', columns: [ { caption: 'Fruits', columns: [ { id: 'grape', caption: 'Grape', dataField: 'grape', groupFooter: '{{=it.eval("=sum([grape])")}}', }, { id: 'apple', caption: 'Apple', dataField: 'apple', groupFooter: '{{=it.eval("=sum([apple])")}}', }, ], }, { caption: 'Vegetables', columns: [ { id: 'potato', caption: 'Potato', dataField: 'potato', groupFooter: '{{=it.eval("=sum([potato])")}}', }, { id: 'tomato', caption: 'Tomato', dataField: 'tomato', groupFooter: '{{=it.eval("=sum([tomato])")}}', }, ], }, { caption: 'Foods', columns: [ { id: 'sandWich', caption: 'SandWich', dataField: 'sandWich', groupFooter: '{{=it.eval("=sum([sandWich])")}}', }, { id: 'Hamburger', caption: 'Hamburger', dataField: 'Hamburger', groupFooter: '{{=it.eval("=sum([Hamburger])")}}', }, ], }, { id: 'total', caption: 'Total', dataType: 'number', dataField: '=[grape]+[apple]+[potato]+[tomato]+[sandWich]+[Hamburger]', groupFooter: '{{=it.eval("=sum([total])")}}', }, ], }, ]; const { useState } = React; const layout = new GridLayout({ allowColumnReorder: false, allowCellMerging: true, selectionUnit: 'cell', showRowHeader: false, cellMergingSettings: { groupedColumn: { showIcon: true, }, }, grouping: [ { field: 'state', header: { visible: false, }, footer: { columns: [ { id: 'city', groupFooter: 'Subtotal by State', }, ], }, collapsed: true, }, { field: 'city', header: { visible: false, }, footer: { columns: [ { id: 'id', groupFooter: 'Subtotal by City', }, ], }, collapsed: true, }, ], }); const App = () => { const [showIcon, setShowIcon] = useState(true); const [showFirstRow, setShowFirstRow] = useState(false); const [alwaysShowText, setAlwaysShowText] = useState(false); const options = { cellMergingSettings: _.assign(layout.options.cellMergingSettings, { groupedColumn: { showIcon }, onlyShowFirstRow: showFirstRow, alwaysShowText, }), }; const handleShowIconChange = (e) => { setShowIcon(e.target.checked); }; const handleShowFirstRowChange = (e) => { setShowFirstRow(e.target.checked); }; const handleAlwaysShowTextChange = (e) => { setAlwaysShowText(e.target.checked); }; return ( <div className="main-container responsive-container"> <div className="mobile-only toggle-options"> <span className="fa fa-cog"></span> </div> <DataView id="grid" className="grid main-content" data={data} cols={cols} layout={layout} options={options} /> <div className="sample-options"> <div className="option-row"> <input type="checkbox" checked={showIcon} onChange={handleShowIconChange} /> <label htmlFor="show-icon">{locale.showIcon}</label> </div> <div className="option-row"> <input type="checkbox" checked={showFirstRow} onChange={handleShowFirstRowChange} /> <label htmlFor="show-first-value">{locale.showFirstValue}</label> </div> <div className="option-row"> <input type="checkbox" checked={alwaysShowText} onChange={handleAlwaysShowTextChange} /> <label htmlFor="always-show-text">{locale.alwaysShowText}</label> </div> </div> </div> ); }; ReactDOM.render(<App />, document.getElementById('root')); // helpers for responsive options panel $(function () { $('body').on('click', '.toggle-options', function () { const options = $('.sample-options'); const display = options.css('display'); options.css({ display: display === 'flex' ? 'none' : 'flex' }); $('.toggle-options .fa').toggleClass('fa-cog').toggleClass('fa-times'); }); window.addEventListener('resize', function () { if ($('.mobile-only').css('visibility') === 'hidden') { $('.sample-options').css({ display: 'flex' }); } }); });
export const data = [ { ID: '001', state: 'NC', city: 'Raleigh', grape: 293, apple: 114, potato: 194, tomato: 109, sandWich: 152, Hamburger: 62, }, { ID: '002', state: 'NC', city: 'Raleigh', grape: 200, apple: 293, potato: 52, tomato: 186, sandWich: 140, Hamburger: 161, }, { ID: '003', state: 'NC', city: 'Raleigh', grape: 277, apple: 99, potato: 258, tomato: 214, sandWich: 3, Hamburger: 130, }, { ID: '004', state: 'NC', city: 'Charlotte', grape: 130, apple: 90, potato: 98, tomato: 202, sandWich: 214, Hamburger: 127, }, { ID: '005', state: 'NC', city: 'Charlotte', grape: 227, apple: 80, potato: 52, tomato: 228, sandWich: 6, Hamburger: 105, }, { ID: '006', state: 'NC', city: 'Charlotte', grape: 10, apple: 283, potato: 244, tomato: 181, sandWich: 232, Hamburger: 182, }, { ID: '007', state: 'PA', city: 'Philadelphia', grape: 271, apple: 129, potato: 153, tomato: 93, sandWich: 96, Hamburger: 290, }, { ID: '008', state: 'PA', city: 'Philadelphia', grape: 107, apple: 278, potato: 10, tomato: 276, sandWich: 153, Hamburger: 246, }, { ID: '009', state: 'PA', city: 'Philadelphia', grape: 81, apple: 128, potato: 292, tomato: 267, sandWich: 71, Hamburger: 296, }, { ID: '010', state: 'PA', city: 'Pittsburgh', grape: 14, apple: 226, potato: 92, tomato: 261, sandWich: 147, Hamburger: 228, }, { ID: '011', state: 'PA', city: 'Pittsburgh', grape: 71, apple: 42, potato: 8, tomato: 5, sandWich: 192, Hamburger: 282, }, { ID: '012', state: 'PA', city: 'Pittsburgh', grape: 114, apple: 180, potato: 179, tomato: 92, sandWich: 169, Hamburger: 2, }, ];
module.exports = { showIcon: 'Show group icon', showFirstValue: 'Only show first row', alwaysShowText: 'Always show text', };
.main-container { display: flex; width: 100%; height: 100%; } .sample-options { background: #fbfbfb; box-sizing: border-box; height: 100%; overflow: auto; padding: 10px; width: 210px; } .sample-options .option-row { margin-top: 5px; display: flex; align-items: center; } .sample-options .option-row label { margin: 0; margin-left: 5px; } .grid { height: 100%; width: calc(100% - 210px); } .gc-group-footer-cell { background-color: transparent; } @media only screen and (max-width: 768px) { .sample-options { display: none; } } .flex-break { flex-basis: 100%; height: 0; } .mobile-only { visibility: hidden; } .responsive-container { display: flex; box-sizing: border-box; } .responsive-container .main-content { box-sizing: border-box; height: 100%; flex-grow: 1; flex-shrink: 1; min-width: 50%; max-width: 100%; } .responsive-container .sample-options { box-sizing: border-box; display: inline-flex; flex-direction: column; height: 100%; flex-grow: 0; flex-shrink: 1; } .responsive-container .sample-options .option-row { box-sizing: border-box; display: inline-flex; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; white-space: nowrap; padding-right: 10px; width: auto; } .responsive-container .toggle-options { align-items: center; justify-content: center; position: absolute; top: 5px; right: 5px; background-color: #ebebeb; color: #84bd00; border-radius: 16px; cursor: pointer; width: 36px; height: 36px; font-size: 28px; z-index: 101; display: none; } @media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) { .mobile-only { visibility: visible; } .responsive-container { display: block; position: relative; } .responsive-container .main-content { position: absolute; display: block; top: 0; left: 0; width: 100%; max-width: 100%; z-index: 99; } .responsive-container .toggle-options { display: flex; } .responsive-container .sample-options { display: none; position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; z-index: 100; } .responsive-container .sample-options .option-row { padding-right: 20px; } } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0dyb3VwaW5nL0NvbXBhY3RNb2RlL3JlYWN0L3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvR3JvdXBpbmcvQ29tcGFjdE1vZGUvcmVhY3Qvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsYUFBQTtFQUNBLFlBQUE7QUNDRjtBRENFO0VBQ0UsZUFBQTtFQUNBLGFBQUE7RUFDQSxtQkFBQTtBQ0NKO0FEQ0k7RUFDRSxTQUFBO0VBQ0EsZ0JBQUE7QUNDTjs7QURJQTtFQUNFLFlBQUE7RUFDQSx5QkFBQTtBQ0RGOztBRElBO0VBQ0UsNkJBQUE7QUNERjs7QURJQTtFQUNFO0lBQ0UsYUFBQTtFQ0RGO0FBQ0Y7QURxQkE7RUFDRSxnQkFBQTtFQUNBLFNBQUE7QUNuQkY7O0FEc0JBO0VBQ0Usa0JBQUE7QUNuQkY7O0FEc0JBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0FDbkJGO0FEcUJFO0VBQ0Usc0JBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxjQUFBO0VBQ0EsZUFBQTtBQ25CSjtBRHNCRTtFQUNFLHNCQUFBO0VBQ0Esb0JBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ3BCSjtBRHNCSTtFQUNFLHNCQUFBO0VBQ0Esb0JBQUE7RUFDQSxtQkFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsZ0JBQUE7RUFDQSxtQkFBQTtFQUNBLG1CQUFBO0VBQ0EsV0FBQTtBQ3BCTjtBRHdCRTtFQTFEQSxtQkFBQTtFQUNBLHVCQUFBO0VBQ0Esa0JBQUE7RUFDQSxRQUFBO0VBQ0EsVUFBQTtFQUNBLHlCQUFBO0VBQ0EsY0FBQTtFQUNBLG1CQUFBO0VBQ0EsZUFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0EsZUFBQTtFQUNBLFlBQUE7RUFnREUsYUFBQTtBQ1ZKOztBRGVBO0VBQ0U7SUFDRSxtQkFBQTtFQ1pGOztFRGNBO0lBQ0UsY0FBQTtJQUNBLGtCQUFBO0VDWEY7RURhRTtJQUNFLGtCQUFBO0lBQ0EsY0FBQTtJQUNBLE1BQUE7SUFDQSxPQUFBO0lBQ0EsV0FBQTtJQUNBLGVBQUE7SUFDQSxXQUFBO0VDWEo7RURjRTtJQUNFLGFBQUE7RUNaSjtFRGVFO0lBQ0UsYUFBQTtJQUNBLGtCQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFlBQUE7SUFDQSxZQUFBO0VDYko7RURlSTtJQUNFLG1CQUFBO0VDYk47QUFDRiIsImZpbGUiOiJGZWF0dXJlcy9Hcm91cGluZy9Db21wYWN0TW9kZS9yZWFjdC9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdzogYXV0bztcbiAgcGFkZGluZzogMTBweDtcbiAgd2lkdGg6IDIxMHB4O1xuXG4gIC5vcHRpb24tcm93IHtcbiAgICBtYXJnaW4tdG9wOiA1cHg7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gICAgbGFiZWwge1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgbWFyZ2luLWxlZnQ6IDVweDtcbiAgICB9XG4gIH1cbn1cblxuLmdyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyMTBweCk7XG59XG5cbi5nYy1ncm91cC1mb290ZXItY2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xufVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4vLyBoZWxwZXJzIGZvciByZXNwb25zaXZlIG9wdGlvbnMgcGFuZWxcbkBtaXhpbiBtb2JpbGUtYnRuKCkge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDVweDtcbiAgcmlnaHQ6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ViZWJlYjtcbiAgY29sb3I6ICM4NGJkMDA7XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgd2lkdGg6IDM2cHg7XG4gIGhlaWdodDogMzZweDtcbiAgZm9udC1zaXplOiAyOHB4O1xuICB6LWluZGV4OiAxMDE7XG59XG5cbi5mbGV4LWJyZWFrIHtcbiAgZmxleC1iYXNpczogMTAwJTtcbiAgaGVpZ2h0OiAwO1xufVxuXG4ubW9iaWxlLW9ubHkge1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG5cbi5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgLm1haW4tY29udGVudCB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgZmxleC1ncm93OiAxO1xuICAgIGZsZXgtc2hyaW5rOiAxO1xuICAgIG1pbi13aWR0aDogNTAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxuXG4gIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDA7XG4gICAgZmxleC1zaHJpbms6IDE7XG5cbiAgICAub3B0aW9uLXJvdyB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgZmxleC1ncm93OiAwO1xuICAgICAgZmxleC1zaHJpbms6IDA7XG4gICAgICBmbGV4LWJhc2lzOiBhdXRvO1xuICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICB9XG4gIH1cblxuICAudG9nZ2xlLW9wdGlvbnMge1xuICAgIEBpbmNsdWRlIG1vYmlsZS1idG47XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4vLyBtb3N0IHNtYXJ0cGhvbmVzXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgLm1haW4tY29udGVudCB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRvcDogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICAgIHotaW5kZXg6IDk5O1xuICAgIH1cblxuICAgIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cblxuICAgIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgei1pbmRleDogMTAwO1xuXG4gICAgICAub3B0aW9uLXJvdyB7XG4gICAgICAgIHBhZGRpbmctcmlnaHQ6IDIwcHg7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICB3aWR0aDogMjEwcHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBtYXJnaW4tdG9wOiA1cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cgbGFiZWwge1xuICBtYXJnaW46IDA7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG59XG5cbi5ncmlkIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogY2FsYygxMDAlIC0gMjEwcHgpO1xufVxuXG4uZ2MtZ3JvdXAtZm9vdGVyLWNlbGwge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbn1cblxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuc2FtcGxlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cbi5mbGV4LWJyZWFrIHtcbiAgZmxleC1iYXNpczogMTAwJTtcbiAgaGVpZ2h0OiAwO1xufVxuXG4ubW9iaWxlLW9ubHkge1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG5cbi5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLm1haW4tY29udGVudCB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbiAgbWluLXdpZHRoOiA1MCU7XG4gIG1heC13aWR0aDogMTAwJTtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmbGV4LWJhc2lzOiBhdXRvO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICBwYWRkaW5nLXJpZ2h0OiAxMHB4O1xuICB3aWR0aDogYXV0bztcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAudG9nZ2xlLW9wdGlvbnMge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDVweDtcbiAgcmlnaHQ6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ViZWJlYjtcbiAgY29sb3I6ICM4NGJkMDA7XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgd2lkdGg6IDM2cHg7XG4gIGhlaWdodDogMzZweDtcbiAgZm9udC1zaXplOiAyOHB4O1xuICB6LWluZGV4OiAxMDE7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSBhbmQgKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkge1xuICAubW9iaWxlLW9ubHkge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cblxuICAucmVzcG9uc2l2ZS1jb250YWluZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLm1haW4tY29udGVudCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgICB6LWluZGV4OiA5OTtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnRvZ2dsZS1vcHRpb25zIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgei1pbmRleDogMTAwO1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICAgIHBhZGRpbmctcmlnaHQ6IDIwcHg7XG4gIH1cbn0iXX0= */
(function () { const IS_PROD = window.process.env.NODE_ENV === 'production'; const USE_NPM = window.process.env.USE_NPM; const USE_CDN = window.process.env.USE_CDN; const SITE_ROOT = window.process.env.SITE_ROOT; const FRAMEWORK = window.process.env.FRAMEWORK; const ext = IS_PROD ? '.min.js' : '.js'; function js(name) { return name + ext; } function npm(t) { if (!t.file) { t.file = IS_PROD ? t.prod : t.dev; } const version = USE_CDN && t.version ? '@' + t.version : ''; const path = t.pkg + version + '/' + t.file; if (USE_CDN) { return 'https://unpkg.com/' + path; } return 'npm:' + path; } function dv(t) { if (USE_CDN || USE_NPM) { t.file = 'dist/' + t.file + '.min.js'; return npm(t); } return SITE_ROOT + '/static/dataviews/' + js(t.file); } const isTypeScript = FRAMEWORK === 'angular'; const babelConfig = { es2015: true, react: true, }; const meta = { js: { babelOptions: babelConfig, }, ts: { typescriptOptions: { tsconfig: true }, }, }; const map = { // gc.dataviews packages '@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.7'}), '@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.7'}), '@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.7'}), '@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.7'}), '@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.7'}), '@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.7'}), '@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.7'}), '@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.7'}), '@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.7'}), '@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.7'}), '@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.7'}), '@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.7'}), '@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.7'}), '@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.7'}), // third-party libs react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}), 'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}), 'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}), 'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.11'}), 'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.3.4'}), 'lodash': npm({pkg: 'lodash', file: js('lodash')}), 'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}), 'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}), 'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}), '@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}), '@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}), '@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}), '@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}), '@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}), '@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}), '@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}), '@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}), '@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}), // systemjs plugins 'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}), 'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}), 'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}), 'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}), 'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}), 'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'3.9.7'}), 'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}), }; const config = { defaultJSExtensions: true, transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel', typescriptOptions: { tsconfig: true }, meta: { '*.json': {loader: 'systemjs-plugin-json'}, '*.css': {loader: 'systemjs-plugin-css'}, '*.vue': {loader: 'systemjs-vue-browser'}, '*.js': meta.js, '*.ts': meta.ts, 'app.js': { format: 'esm', babelOptions: babelConfig, }, 'typescript': { exports: 'ts', }, '@grapecity/dataviews.common': { format: 'amd', }, '@grapecity/dataviews.core': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.grid': { format: 'amd', deps: [ '@grapecity/dataviews.common', '@grapecity/dataviews.core', ], }, '@grapecity/dataviews.cardlayout': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.masonry': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.calendar': { format: 'amd', deps: [ '@grapecity/dataviews.common', '@grapecity/dataviews.core', ], }, '@grapecity/dataviews.timeline': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.trellis': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.gantt': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.searchbox': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.react': { format: 'amd', deps: [ 'react', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.vue': { format: 'amd', deps: [ 'vue', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.angular': { format: 'amd', deps: [ '@angular/core', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.csvexport': { format: 'amd', deps: [ '@grapecity/dataviews.common' ], }, }, paths: { // paths serve as alias 'npm:': SITE_ROOT + '/node_modules/', }, // map tells the System loader where to look for things map: map, // packages tells the System loader how to load when no filename and/or no extension packages: { '.': { defaultExtension: isTypeScript ? 'ts' : 'js' }, node_modules: { defaultExtension: 'js' }, } }; // fast format detection to avoid detection by source code using regexp Object.keys(map).filter(function (key) { return !config.meta[key]; }).forEach(function (key) { const path = map[key]; if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) { config.meta[key] = { format: 'amd' }; } if (path.indexOf('/cjs') >= 0) { config.meta[key] = { format: 'cjs' }; } }); System.config(config); })(this);