Revenue Breakdown | Data Views | MESCIUS DataViewsJS Vue Demos

This example shows how to display hierarchical data, such as a revenue breakdown, in the card layout using a tree column. The layout can have three different orientations to fit effectively into your application: left, center, and right. The default card layout engine provides an option called hierarchy in which you can configure the hierarchical information for your data. For example, hierarchy: The 'parentField' and 'keyField' in hierarchy.descriptor are two key settings that help the grid build data items as a tree: 'parentField' indicates that the parent of each data record is stored in this property 'keyField' is the unique property that is used to find its parent item.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Card/RevenueBreakdown/vue/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="tree, treecard, tree card, hierarchy, hierarchical, parent child, chart" />
<meta
name="description"
content="This example shows how to display hierarchical data, such as a revenue breakdown, in the card layout using a tree column."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Revenue Breakdown | 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/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.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/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="card-template">
<div class="v-container">
<div class="c-container">
<div>
<div class="project-name" data-column="name"></div>
<div class="project-overall">
<div class="overall-revenue">
<div class="revenue-unit">$</div>
<div class="revenue-number" data-column="totalSales"></div>
</div>
<div class="overall-growth">
<div class="growth-content" data-column="growth"></div>
<div class="growth-unit">of last year</div>
</div>
</div>
<div class="project-history">
<div class="history-title">Annual Revenue</div>
<div class="history-chart" data-column="barChart"></div>
</div>
</div>
</div>
</div>
</template>
<div id="root"></div>
<script type="text/javascript">
System.import('./app.vue');
</script>
</body>
</html>

<template>
<div class="main-container">
<div class="sample-options">
<div class="btn-group" role="group">
<button class="btn btn-default" v-bind:class="{ active: alignment === 'left' }" v-on:click="alignment = 'left'">
{{ locale.left }}
</button>
<button
class="btn btn-default"
v-bind:class="{ active: alignment === 'center' }"
v-on:click="alignment = 'center'"
>
{{ locale.center }}
</button>
<button
class="btn btn-default"
v-bind:class="{ active: alignment === 'right' }"
v-on:click="alignment = 'right'"
>
{{ locale.right }}
</button>
</div>
</div>
<div class="outer">
<div class="inner">
<gc-dataview id="grid" class="grid" :data="data" :cols="cols" :layout="layout" :options="options" />
</div>
</div>
</div>
</template>
<script>
import _ from 'lodash';
import Vue from 'vue';
import { ColumnSparkline } from '@grapecity/dataviews.core';
import '@grapecity/dataviews.vue';
import CardLayout from '@grapecity/dataviews.cardlayout';
import { data } from './data';
import locale from './locale';
window.ColumnSparkline = ColumnSparkline;
export const cols = [
{ id: 'id', dataField: 'id', visible: false },
{ id: 'parent', dataField: 'parent', visible: false },
{ id: 'name', dataField: 'name' },
{
id: 'totalSales',
dataField: '=sumx(hierarchy.children(true, true), [sales])',
format: '#,##0',
},
{
id: 'totalSalesLastYear',
dataField: '=sumx(hierarchy.children(true, true), [salesLastYear])',
},
{
id: 'totalSalesTwoYearBefore',
dataField: '=sumx(hierarchy.children(true, true), [salesTwoYearBefore])',
},
{
id: 'totalSalesThreeYearBefore',
dataField: '=sumx(hierarchy.children(true, true), [salesThreeYearBefore])',
},
{
id: 'growth',
dataField: '=rounddown(([totalSales] - [totalSalesLastYear]) / [totalSalesLastYear] * 100, 2)',
presenter:
'{{?it.growth>=0}}<span class="growth-positive">+{{=it.growth}}%</span>{{??}}<span class="growth-negative">{{=it.growth}}%</span>{{?}}',
},
{ id: 'barChart', asyncRender: renderSparkline },
{ id: 'sales', dataField: 'sales' },
{ id: 'salesLastYear', dataField: 'salesLastYear' },
{ id: 'salesTwoYearBefore', dataField: 'salesTwoYearBefore' },
{ id: 'salesThreeYearBefore', dataField: 'salesThreeYearBefore' },
];
function renderSparkline(dataItem, container) {
const names = ['totalSalesThreeYearBefore', 'totalSalesTwoYearBefore', 'totalSalesLastYear', 'totalSales'];
const item = dataItem && names.map((name) => dataItem[name]);
if (item) {
const sparkline = new window.ColumnSparkline({
values: item,
setting: {
minAxisType: 2,
manualMin: 0,
},
});
sparkline.paint(container);
}
}
const layout = new CardLayout({
cardHeight: 240,
cardWidth: 280,
rowTemplate: '#card-template',
hierarchy: {
keyField: 'id',
parentField: 'parent',
collapsed: false,
column: 'department',
alignment: 'center',
lineLength: 30,
footer: {
visible: false,
},
},
});
new Vue({
el: '#root',
data: {
locale,
data,
cols,
layout,
alignment: 'center',
},
computed: {
options() {
return {
hierarchy: _.assign({}, layout.options.hierarchy, { alignment: this.alignment }),
};
},
},
});
</script>

// revenue breakdown
export const data = [
{
id: 1,
name: 'Retail Sales',
parent: null,
},
{
id: 2,
name: 'Product',
parent: 1,
},
{
id: 3,
name: 'Software',
sales: 1762000,
salesLastYear: 1600000,
salesTwoYearBefore: 1480300,
salesThreeYearBefore: 1404000,
parent: 2,
},
{
id: 4,
name: 'Hardware',
sales: 783000,
salesLastYear: 700000,
salesTwoYearBefore: 680000,
salesThreeYearBefore: 580000,
parent: 2,
},
{
id: 5,
name: 'Services',
parent: 1,
},
{
id: 6,
name: 'Consulting',
sales: 1000000,
salesLastYear: 900000,
salesTwoYearBefore: 800000,
salesThreeYearBefore: 700000,
parent: 5,
},
{
id: 7,
name: 'Support',
sales: 240000,
salesLastYear: 250000,
salesTwoYearBefore: 160000,
salesThreeYearBefore: 120000,
parent: 5,
},
{
id: 8,
name: 'Design',
sales: 90000,
salesLastYear: 70000,
salesTwoYearBefore: 20000,
salesThreeYearBefore: 0,
parent: 5,
},
];

module.exports = { left: 'Left', center: 'Center', right: 'Right' };

#card-template {
display: none;
}
.main-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.sample-options {
flex-grow: 0;
flex-shrink: 0;
display: flex;
background: #fbfbfb;
box-sizing: border-box;
float: right;
overflow: hidden;
padding: 10px;
}
.outer {
flex-grow: 1;
flex-shrink: 1;
width: 100%;
height: 100%;
overflow: scroll;
position: relative;
}
.inner {
height: 100%;
position: relative;
width: 1410px;
}
.grid {
height: 100%;
width: 100%;
}
.gc-viewport {
background: url("/dataviewsjs/demos/images/grid-background.png");
}
.grid .gc-cell.c1 {
text-align: right;
justify-content: flex-end;
}
/*card styles*/
/*virtual container*/
.v-container {
height: 100%;
padding: 30px 20px;
width: 100%;
}
/*card container*/
.c-container {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
height: 100%;
padding: 10px;
width: 100%;
}
.c-container .gc-cell {
text-align: center;
justify-content: center;
}
.c-container .gc-cell.revenue-number {
color: #000;
display: inline-block;
font-size: 24px;
text-align: left;
vertical-align: middle;
width: 130px;
}
.project-name {
font-size: 18px;
font-weight: bold;
justify-content: center;
}
.project-overall {
color: #a0a0a0;
height: 40px;
margin: 10px 0;
vertical-align: middle;
}
.overall-revenue {
display: inline-block;
vertical-align: middle;
}
.revenue-unit {
display: inline-block;
font-size: 14px;
margin-right: 2px;
vertical-align: middle;
}
.overall-growth {
display: inline-block;
height: 40px;
text-align: right;
vertical-align: middle;
}
.overall-growth .gc-cell {
text-align: right;
}
.growth-positive {
color: #76b150;
}
.growth-negative {
color: #ab5656;
}
.history-title {
border-top: 1px solid #e0e0e0;
color: #b8b8b8;
text-align: center;
}
.history-chart {
height: 56px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9DYXJkL1JldmVudWVCcmVha2Rvd24vdnVlL3N0eWxlcy5zY3NzIiwiRGF0YVZpZXdzL0NhcmQvUmV2ZW51ZUJyZWFrZG93bi92dWUvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQUE7QUNDRjs7QURFQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLGdCQUFBO0VBQ0EsYUFBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtFQUNBLGNBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7RUFDQSxrQkFBQTtFQUNBLGFBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7RUFDQSxXQUFBO0FDQ0Y7O0FERUE7RUFDRSxnRUFBQTtBQ0NGOztBREVBO0VBQ0UsaUJBQUE7RUFDQSx5QkFBQTtBQ0NGOztBREVBLGNBQUE7QUFDQSxvQkFBQTtBQUNBO0VBQ0UsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBLGlCQUFBO0FBQ0E7RUFDRSxzQkFBQTtFQUNBLHlCQUFBO0VBQ0Esa0JBQUE7RUFDQSx3Q0FBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0EsV0FBQTtBQ0NGO0FEQ0U7RUFDRSxrQkFBQTtFQUNBLHVCQUFBO0FDQ0o7QURDSTtFQUNFLFdBQUE7RUFDQSxxQkFBQTtFQUNBLGVBQUE7RUFDQSxnQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtBQ0NOOztBRElBO0VBQ0UsZUFBQTtFQUNBLGlCQUFBO0VBQ0EsdUJBQUE7QUNERjs7QURJQTtFQUNFLGNBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxxQkFBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxxQkFBQTtFQUNBLGVBQUE7RUFDQSxpQkFBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxxQkFBQTtFQUNBLFlBQUE7RUFDQSxpQkFBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxpQkFBQTtBQ0RGOztBRElBO0VBQ0UsY0FBQTtBQ0RGOztBRElBO0VBQ0UsY0FBQTtBQ0RGOztBRElBO0VBQ0UsNkJBQUE7RUFDQSxjQUFBO0VBQ0Esa0JBQUE7QUNERjs7QURJQTtFQUNFLFlBQUE7QUNERiIsImZpbGUiOiJEYXRhVmlld3MvQ2FyZC9SZXZlbnVlQnJlYWtkb3duL3Z1ZS9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiI2NhcmQtdGVtcGxhdGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4ubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmbG9hdDogcmlnaHQ7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDEwcHg7XG59XG5cbi5vdXRlciB7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBzY3JvbGw7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLmlubmVyIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxNDEwcHg7XG59XG5cbi5ncmlkIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLmdjLXZpZXdwb3J0IHtcbiAgYmFja2dyb3VuZDogdXJsKCcvZGF0YXZpZXdzanMvZGVtb3MvaW1hZ2VzL2dyaWQtYmFja2dyb3VuZC5wbmcnKTtcbn1cblxuLmdyaWQgLmdjLWNlbGwuYzEge1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn1cblxuLypjYXJkIHN0eWxlcyovXG4vKnZpcnR1YWwgY29udGFpbmVyKi9cbi52LWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMzBweCAyMHB4O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLypjYXJkIGNvbnRhaW5lciovXG4uYy1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICBib3JkZXI6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGJveC1zaGFkb3c6IDAgMCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMTBweDtcbiAgd2lkdGg6IDEwMCU7XG5cbiAgLmdjLWNlbGwge1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICYucmV2ZW51ZS1udW1iZXIge1xuICAgICAgY29sb3I6ICMwMDA7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgIHdpZHRoOiAxMzBweDtcbiAgICB9XG4gIH1cbn1cblxuLnByb2plY3QtbmFtZSB7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuXG4ucHJvamVjdC1vdmVyYWxsIHtcbiAgY29sb3I6ICNhMGEwYTA7XG4gIGhlaWdodDogNDBweDtcbiAgbWFyZ2luOiAxMHB4IDA7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5vdmVyYWxsLXJldmVudWUge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5yZXZlbnVlLXVuaXQge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgbWFyZ2luLXJpZ2h0OiAycHg7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5vdmVyYWxsLWdyb3d0aCB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgaGVpZ2h0OiA0MHB4O1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLm92ZXJhbGwtZ3Jvd3RoIC5nYy1jZWxsIHtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG59XG5cbi5ncm93dGgtcG9zaXRpdmUge1xuICBjb2xvcjogIzc2YjE1MDtcbn1cblxuLmdyb3d0aC1uZWdhdGl2ZSB7XG4gIGNvbG9yOiAjYWI1NjU2O1xufVxuXG4uaGlzdG9yeS10aXRsZSB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBjb2xvcjogI2I4YjhiODtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4uaGlzdG9yeS1jaGFydCB7XG4gIGhlaWdodDogNTZweDtcbn1cbiIsIiNjYXJkLXRlbXBsYXRlIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZmxvYXQ6IHJpZ2h0O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAxMHB4O1xufVxuXG4ub3V0ZXIge1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdzogc2Nyb2xsO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5pbm5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTQxMHB4O1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy12aWV3cG9ydCB7XG4gIGJhY2tncm91bmQ6IHVybChcIi9kYXRhdmlld3Nqcy9kZW1vcy9pbWFnZXMvZ3JpZC1iYWNrZ3JvdW5kLnBuZ1wiKTtcbn1cblxuLmdyaWQgLmdjLWNlbGwuYzEge1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn1cblxuLypjYXJkIHN0eWxlcyovXG4vKnZpcnR1YWwgY29udGFpbmVyKi9cbi52LWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMzBweCAyMHB4O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLypjYXJkIGNvbnRhaW5lciovXG4uYy1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICBib3JkZXI6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGJveC1zaGFkb3c6IDAgMCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMTBweDtcbiAgd2lkdGg6IDEwMCU7XG59XG4uYy1jb250YWluZXIgLmdjLWNlbGwge1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuLmMtY29udGFpbmVyIC5nYy1jZWxsLnJldmVudWUtbnVtYmVyIHtcbiAgY29sb3I6ICMwMDA7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgZm9udC1zaXplOiAyNHB4O1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICB3aWR0aDogMTMwcHg7XG59XG5cbi5wcm9qZWN0LW5hbWUge1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cblxuLnByb2plY3Qtb3ZlcmFsbCB7XG4gIGNvbG9yOiAjYTBhMGEwO1xuICBoZWlnaHQ6IDQwcHg7XG4gIG1hcmdpbjogMTBweCAwO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4ub3ZlcmFsbC1yZXZlbnVlIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4ucmV2ZW51ZS11bml0IHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBmb250LXNpemU6IDE0cHg7XG4gIG1hcmdpbi1yaWdodDogMnB4O1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4ub3ZlcmFsbC1ncm93dGgge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGhlaWdodDogNDBweDtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5vdmVyYWxsLWdyb3d0aCAuZ2MtY2VsbCB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuXG4uZ3Jvd3RoLXBvc2l0aXZlIHtcbiAgY29sb3I6ICM3NmIxNTA7XG59XG5cbi5ncm93dGgtbmVnYXRpdmUge1xuICBjb2xvcjogI2FiNTY1Njtcbn1cblxuLmhpc3RvcnktdGl0bGUge1xuICBib3JkZXItdG9wOiAxcHggc29saWQgI2UwZTBlMDtcbiAgY29sb3I6ICNiOGI4Yjg7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLmhpc3RvcnktY2hhcnQge1xuICBoZWlnaHQ6IDU2cHg7XG59Il19 */

(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);

Revenue Breakdown (Vue)