Metro Layout (Vue)

This example demonstrates the options you have when using the masonry layout.

This example uses Vue.

This example demonstrates the options you have when using the masonry layout. The Masonry Layout Engine organizes items automatically according to size, but you have options such as order, column and row sizing, gutter width, and more. You can also set grouping strategies which dictate how items are arranged. This demo gives you controls to show you what each option does. These controls are labeled by their JavaScript option names. keepOrder: when set to true, the engine preserves the order of the data. When set to false, the engine optimizes the order. rowHeight: sets the minimum vertical padding between items. gutter: sets the padding between items. columnWidth: sets the minimum horizontal padding between items. This demo also has three buttons, metro, pinterest, and random, that load preset grouping strategies. Metro groups items in a manner that optimizes layout. Pinterest uses a set item width. Random randomizes item size.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/DataViews/Masonry/MetroLayout/vue/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="masonry, metro, pinterest, pinterest like" /> <meta name="description" content="This example demonstrates the options you have when using the masonry layout." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Metro Layout | Data Views | MESCIUS DataViewsJS Vue 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.masonry.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <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: 'vue', DVJS_LICENSE_KEY: 'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr', SJS_LICENSE_KEY: 'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep', }, }; </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"> <noscript>You need to enable JavaScript to run this app.</noscript> <template id="rowTemplate" style="display: none"> <div data-column="block"></div> </template> <div id="root"></div> <script type="text/javascript"> System.import('./app.vue'); </script> </body> </html>
<template> <div class="main-container responsive-container" v-on:click="handleMouseClick"> <div class="mobile-only toggle-options"> <span class="fa fa-cog"></span> </div> <gc-dataview id="grid" class="grid main-content" :data="data" :cols="cols" :layout="layout" :options="options" /> <div class="sample-options"> <div class="option-row"> <div class="btn-group" role="group"> <button id="metroData" class="btn btn-default" v-bind:class="{ active: dataset === 'metroData' }" v-on:click="changeDataSet('metroData')" > {{ locale.metro }} </button> <button id="pinterestData" class="btn btn-default" v-bind:class="{ active: dataset === 'pinterestData' }" v-on:click="changeDataSet('pinterestData')" > {{ locale.pinterest }} </button> <button id="randomData" class="btn btn-default" v-bind:class="{ active: dataset === 'randomData' }" v-on:click="changeDataSet('randomData')" > {{ locale.random }} </button> </div> </div> <div class="option-row"> <range name="keepOrder" :min="0" :max="1" :width="100" :options="options" /> </div> <div class="option-row"> <range name="gutter" :min="0" :max="50" :width="200" :options="options" /> </div> <div class="option-row"> <range name="rowHeight" :min="1" :max="200" :width="200" :options="options" /> </div> <div class="option-row"> <range name="columnWidth" :min="1" :max="200" :width="200" :options="options" /> </div> </div> </div> </template> <script> import Vue from 'vue'; import { getControlByElement } from '@grapecity/dataviews.vue'; import MasonryLayout from '@grapecity/dataviews.masonry'; import { data } from './data'; import locale from './locale'; import './range.vue'; export const cols = [ { id: 'block', dataField: 'block', presenter: '<div class="block" style="width:{{=it.block.width}}px;height:{{=it.block.height}}px;background-color:{{=it.currentColor}};"></div>', }, { id: 'currentColor', dataField: 'currentColor', visible: false, }, { id: 'color', dataField: 'color', visible: false, }, { id: 'darkerColor', dataField: 'darkerColor', visible: false, }, ]; const layout = new MasonryLayout({ rowTemplate: '#rowTemplate', keepOrder: false, }); function toggleSize(dataView, item) { const maxWidth = dataView.getLayoutInfo().viewport.contentWidth; if (item.size === 'small') { item.block.width = Math.min(maxWidth, 2 * item.block.width); item.block.height *= 2; item.size = 'large'; item.currentColor = item.darkerColor; } else { item.block.width /= 2; item.block.height /= 2; item.size = 'small'; item.currentColor = item.color; } } new Vue({ el: '#root', data: { locale, data, cols, layout, options: { keepOrder: 0, gutter: 0, rowHeight: 1, columnWidth: 1, }, dataset: 'metroData', }, methods: { changeDataSet(name) { const currData = window[name]; const data = this.data.slice(); data.forEach((item, index) => { const factor = item.size === 'small' ? 1 : 2; item.block.width = currData[index].width * factor; item.block.height = currData[index].height * factor; }); this.dataset = name; this.data = data; }, handleMouseClick(args) { const dataView = getControlByElement(document.body); const hitTestInfo = dataView.hitTest(args); if (hitTestInfo && hitTestInfo.row > -1) { const item = dataView.data.getItem(hitTestInfo.row); if (item) { toggleSize(dataView, item); dataView.invalidate(); } } }, }, }); // 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' }); } }); }); </script>
import _ from 'lodash'; const colors = ['#CFF09E', '#A8DBA8', '#79BD9A', '#3B8686']; const darkerColors = ['#67DB67', '#40BC7C', '#0E8787', '#00436B']; export const data = []; const pinterestData = []; const metroData = []; const randomData = []; for (let i = 0; i < 80; i++) { // to control the probability const tempFactor = _.random(1, 13); const sideLength = tempFactor < 2 ? 160 : tempFactor < 5 ? 80 : 40; metroData.push({ width: sideLength, height: sideLength, }); pinterestData.push({ width: 100, height: _.random(4, 6) * 20, }); randomData.push({ width: _.random(1, 3) * 40, height: _.random(1, 3) * 40, }); data.push({ block: { width: metroData[i].width, height: metroData[i].height, }, size: 'small', currentColor: colors[i % colors.length], color: colors[i % colors.length], darkerColor: darkerColors[i % colors.length], }); } window.metroData = metroData; window.pinterestData = pinterestData; window.randomData = randomData;
module.exports = { keepOrder: 'Keep Order', on: 'ON', off: 'OFF', rowHeight: 'Row Height', gutter: 'Gutter', columnWidth: 'Column Width', metro: 'Metro', pinterest: 'Pinterest', random: 'Random', };
<template> <div class="range-container"> <b class="label">{{ label }}:</b> <div class="range-wrapper"> <input type="range" :name="name" :min="min" :max="max" v-bind:style="{ width: width }" :value="value" v-on:change="handleChange" /> <span class="indicator">{{ indicator }}</span> </div> </div> </template> <script> import Vue from 'vue'; import locale from './locale'; const Range = Vue.extend({ props: { name: String, min: Number, max: Number, width: Number, options: Object, }, computed: { value() { const val = this.options[this.name]; return this.isBool ? (val ? 1 : 0) : val; }, label() { return locale[this.name]; }, isBool() { return this.name === 'keepOrder'; }, indicator() { return this.isBool ? (this.value ? locale.on : locale.off) : this.value; }, }, methods: { handleChange(e) { const value = parseInt(e.target.value, 10); this.options[this.name] = this.isBool ? !!value : value; }, }, }); Vue.component('range', Range); export default Range; </script>
.main-container { width: 100%; height: 100%; } .sample-options { background: #fbfbfb; box-sizing: border-box; height: 100%; overflow: auto; padding: 10px; min-width: 240px; max-width: 300px; } .sample-options label { display: inline-block; font-weight: normal; width: 75px; } .sample-options select { border: 1px solid #999; } .sample-options .range-container { width: 100%; } .sample-options .range-wrapper { display: flex; flex-direction: row; } .sample-options .range-wrapper input { flex: 1 1 auto; } .sample-options .range-wrapper .indicator { padding: 1rem; min-width: 2rem; } .sample-options .option-row { margin-bottom: 5px; } .sample-options .option-row .label { display: block; margin-bottom: 5px; } .sample-options .option-row range { width: 100%; } .sample-options .btn-group { display: inline-flex; white-space: nowrap; } #grid { height: 100%; } .block { border: 2px solid #f1f1f1; box-sizing: border-box; } .block:hover { border: 2px solid #fff; } .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: #47a06c; 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L3Z1ZS9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L3Z1ZS9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxnQkFBQTtFQUNBLGdCQUFBO0FDQ0Y7QURDRTtFQUNFLHFCQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0FDQ0o7QURFRTtFQUNFLHNCQUFBO0FDQUo7QURHRTtFQUNFLFdBQUE7QUNESjtBRElFO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0FDRko7QURJSTtFQUNFLGNBQUE7QUNGTjtBREtJO0VBQ0UsYUFBQTtFQUNBLGVBQUE7QUNITjtBRE9FO0VBQ0Usa0JBQUE7QUNMSjtBRE9JO0VBQ0UsY0FBQTtFQUNBLGtCQUFBO0FDTE47QURRSTtFQUNFLFdBQUE7QUNOTjtBRFVFO0VBQ0Usb0JBQUE7RUFDQSxtQkFBQTtBQ1JKOztBRFlBO0VBQ0UsWUFBQTtBQ1RGOztBRFlBO0VBQ0UseUJBQUE7RUFDQSxzQkFBQTtBQ1RGO0FEV0U7RUFDRSxzQkFBQTtBQ1RKOztBRDhCQTtFQUNFLGdCQUFBO0VBQ0EsU0FBQTtBQzNCRjs7QUQ4QkE7RUFDRSxrQkFBQTtBQzNCRjs7QUQ4QkE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7QUMzQkY7QUQ2QkU7RUFDRSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0FDM0JKO0FEOEJFO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDNUJKO0FEOEJJO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLG1CQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxnQkFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0FDNUJOO0FEZ0NFO0VBMURBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxrQkFBQTtFQUNBLFFBQUE7RUFDQSxVQUFBO0VBQ0EseUJBQUE7RUFDQSxjQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxlQUFBO0VBQ0EsWUFBQTtFQWdERSxhQUFBO0FDbEJKOztBRHVCQTtFQUNFO0lBQ0UsbUJBQUE7RUNwQkY7O0VEc0JBO0lBQ0UsY0FBQTtJQUNBLGtCQUFBO0VDbkJGO0VEcUJFO0lBQ0Usa0JBQUE7SUFDQSxjQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFdBQUE7RUNuQko7RURzQkU7SUFDRSxhQUFBO0VDcEJKO0VEdUJFO0lBQ0UsYUFBQTtJQUNBLGtCQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFlBQUE7SUFDQSxZQUFBO0VDckJKO0VEdUJJO0lBQ0UsbUJBQUE7RUNyQk47QUFDRiIsImZpbGUiOiJEYXRhVmlld3MvTWFzb25yeS9NZXRyb0xheW91dC92dWUvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG5cbiAgbGFiZWwge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHdpZHRoOiA3NXB4O1xuICB9XG5cbiAgc2VsZWN0IHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAjOTk5O1xuICB9XG5cbiAgLnJhbmdlLWNvbnRhaW5lciB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICAucmFuZ2Utd3JhcHBlciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICAgaW5wdXQge1xuICAgICAgZmxleDogMSAxIGF1dG87XG4gICAgfVxuXG4gICAgLmluZGljYXRvciB7XG4gICAgICBwYWRkaW5nOiAxcmVtO1xuICAgICAgbWluLXdpZHRoOiAycmVtO1xuICAgIH1cbiAgfVxuXG4gIC5vcHRpb24tcm93IHtcbiAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG5cbiAgICAubGFiZWwge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG4gICAgfVxuXG4gICAgcmFuZ2Uge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLmJ0bi1ncm91cCB7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgfVxufVxuXG4jZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmJsb2NrIHtcbiAgYm9yZGVyOiAycHggc29saWQgI2YxZjFmMTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAmOmhvdmVyIHtcbiAgICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xuICB9XG59XG5cbi8vIGhlbHBlcnMgZm9yIHJlc3BvbnNpdmUgb3B0aW9ucyBwYW5lbFxuQG1peGluIG1vYmlsZS1idG4oKSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogNXB4O1xuICByaWdodDogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWJlYmViO1xuICBjb2xvcjogIzQ3YTA2YztcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmb250LXNpemU6IDI4cHg7XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuLmZsZXgtYnJlYWsge1xuICBmbGV4LWJhc2lzOiAxMDAlO1xuICBoZWlnaHQ6IDA7XG59XG5cbi5tb2JpbGUtb25seSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAubWFpbi1jb250ZW50IHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDE7XG4gICAgZmxleC1zaHJpbms6IDE7XG4gICAgbWluLXdpZHRoOiA1MCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG5cbiAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGZsZXgtZ3JvdzogMDtcbiAgICBmbGV4LXNocmluazogMTtcblxuICAgIC5vcHRpb24tcm93IHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBmbGV4LWdyb3c6IDA7XG4gICAgICBmbGV4LXNocmluazogMDtcbiAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgICAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgICAgIHdpZHRoOiBhdXRvO1xuICAgIH1cbiAgfVxuXG4gIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgQGluY2x1ZGUgbW9iaWxlLWJ0bjtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG5cbi8vIG1vc3Qgc21hcnRwaG9uZXNcbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSBhbmQgKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkge1xuICAubW9iaWxlLW9ubHkge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAubWFpbi1jb250ZW50IHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk7XG4gICAgfVxuXG4gICAgLnRvZ2dsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuXG4gICAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB6LWluZGV4OiAxMDA7XG5cbiAgICAgIC5vcHRpb24tcm93IHtcbiAgICAgICAgcGFkZGluZy1yaWdodDogMjBweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgbGFiZWwge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIHdpZHRoOiA3NXB4O1xufVxuLnNhbXBsZS1vcHRpb25zIHNlbGVjdCB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICM5OTk7XG59XG4uc2FtcGxlLW9wdGlvbnMgLnJhbmdlLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbn1cbi5zYW1wbGUtb3B0aW9ucyAucmFuZ2Utd3JhcHBlciBpbnB1dCB7XG4gIGZsZXg6IDEgMSBhdXRvO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIC5pbmRpY2F0b3Ige1xuICBwYWRkaW5nOiAxcmVtO1xuICBtaW4td2lkdGg6IDJyZW07XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBtYXJnaW4tYm90dG9tOiA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cgLmxhYmVsIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDVweDtcbn1cbi5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyByYW5nZSB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5idG4tZ3JvdXAge1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cblxuI2dyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5ibG9jayB7XG4gIGJvcmRlcjogMnB4IHNvbGlkICNmMWYxZjE7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG4uYmxvY2s6aG92ZXIge1xuICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xufVxuXG4uZmxleC1icmVhayB7XG4gIGZsZXgtYmFzaXM6IDEwMCU7XG4gIGhlaWdodDogMDtcbn1cblxuLm1vYmlsZS1vbmx5IHtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuXG4ucmVzcG9uc2l2ZS1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIG1pbi13aWR0aDogNTAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMTtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZmxleC1iYXNpczogYXV0bztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgd2lkdGg6IGF1dG87XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnRvZ2dsZS1vcHRpb25zIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiA1cHg7XG4gIHJpZ2h0OiA1cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICNlYmViZWI7XG4gIGNvbG9yOiAjNDdhMDZjO1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHdpZHRoOiAzNnB4O1xuICBoZWlnaHQ6IDM2cHg7XG4gIGZvbnQtc2l6ZTogMjhweDtcbiAgei1pbmRleDogMTAxO1xuICBkaXNwbGF5OiBub25lO1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICB9XG5cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgei1pbmRleDogOTk7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHotaW5kZXg6IDEwMDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAyMHB4O1xuICB9XG59Il19 */
(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.17'}), '@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}), '@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}), '@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}), '@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}), '@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}), '@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}), '@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}), '@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}), '@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}), '@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}), '@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}), '@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}), '@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}), // 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.12'}), 'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}), '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:'4.0.2'}), '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);