Views in the PivotEngine are defined by the viewDefinition property. They are created as user manipulates the field lists of the PivotEngine. You can use the viewDefinition property to persist views as an application setting. In this sample, you can select pre-defined views, edit the views with the PivotPanel control, and save the view to be loaded later.
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOlap from '@grapecity/wijmo.olap';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// initialize pivot engine
var ng = new wjOlap.PivotEngine({
autoGenerateFields: false,
fields: [
{ binding: 'date', header: 'Date', format: 'yyyy' },
{ binding: 'date', header: 'Quarter', format: '"Q"q' },
{ binding: 'buyer', header: 'Person' },
{ binding: 'type', header: 'Category' },
{ binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }
],
itemsSource: getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Person']
});
//
// allow users to edit the view
var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', {
itemsSource: ng
});
//
// show summary
var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
itemsSource: ng
});
//
// save/load views
document.getElementById('save').addEventListener('click', function () {
localStorage.viewDefinition = ng.viewDefinition;
});
document.getElementById('load').addEventListener('click', function () {
if (localStorage.viewDefinition) {
ng.viewDefinition = localStorage.viewDefinition;
}
});
//
// handle click events to build the views
document.getElementById('buttons').addEventListener('click', function (e) {
switch (e.target.id) {
//
case 'who':
ng.rowFields.clear();
ng.rowFields.push('Person');
break;
//
case 'what':
ng.rowFields.clear();
ng.rowFields.push('Category');
break;
//
case 'who-what':
ng.rowFields.clear();
ng.rowFields.push('Person', 'Category');
break;
//
case 'when':
ng.rowFields.clear();
ng.rowFields.push('Date');
ng.rowFields.push('Quarter');
break;
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Engine Defining Views</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="buttons" class="buttons">
<button id="who" class="btn">
How much was spent by each person?
</button>
<button id="what" class="btn">
How much was spent on each expense type?
</button>
<button id="who-what" class="btn">
What did each person spend money on?
</button>
<button id="when" class="btn">
When were these expenses made?
</button>
</div>
<p>
Use these buttons to save and load views:
</p>
<div class="buttons">
<button id="save" class="btn btn-primary">
Save View
</button>
<button id="load" class="btn btn-primary">
Load View
</button>
</div>
<div class="row">
<div class="col-xs-6">
<p>
Use the <b>PivotPanel</b> control to edit the view:
</p>
<div id="pivotPanel"></div>
</div>
<div class="col-xs-6">
<p>
Use the <b>PivotGrid</b> control to see the results:
</p>
<div id="pivotGrid"></div>
</div>
</div>
</div>
</body>
</html>
import * as wjCore from '@grapecity/wijmo';
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
export function getData(cnt) {
var today = new Date(), buyers = 'Mom,Dad,Kelly,Sheldon'.split(','), types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','), data = [];
for (var i = 0; i < cnt; i++) {
data.push({
date: wjCore.DateTime.addDays(today, -Math.random() * 365),
buyer: randomItem(buyers),
type: randomItem(types),
amount: 20 + Math.random() * 1000
});
}
return data;
}
.buttons {
display: flex;
margin-bottom: 12px;
}
.buttons .btn {
margin: 6px;
white-space: normal;
}
body {
margin-bottom: 36pt;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOlap from '@grapecity/wijmo.olap';
//
import { Component, Inject, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjOlapModule } from '@grapecity/wijmo.angular2.olap';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
ng: wjOlap.PivotEngine;
//
constructor(@Inject(DataService) private dataService: DataService) {
this.ng = new wjOlap.PivotEngine({
autoGenerateFields: false, // turn off auto-generation
fields: [ // specify the fields we want
{ binding: 'date', header: 'Date', format: 'yyyy' },
{ binding: 'date', header: 'Quarter', format: '"Q"q' },
{ binding: 'buyer', header: 'Person' },
{ binding: 'type', header: 'Category' },
{ binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }
],
itemsSource: dataService.getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Person']
});
}
//
onSaveClick() {
localStorage.viewDefinition = this.ng.viewDefinition;
}
//
onLoadClick() {
if (localStorage.viewDefinition) {
this.ng.viewDefinition = localStorage.viewDefinition;
}
}
//
onButtonClick(e: MouseEvent) {
var ng = this.ng;
switch ((e.target as HTMLElement).id) {
//
case 'who':
ng.rowFields.clear();
ng.rowFields.push('Person');
break;
//
case 'what':
ng.rowFields.clear();
ng.rowFields.push('Category');
break;
//
case 'who-what':
ng.rowFields.clear();
ng.rowFields.push('Person', 'Category');
break;
//
case 'when':
ng.rowFields.clear();
ng.rowFields.push('Date');
ng.rowFields.push('Quarter');
break;
}
}
}
//
@NgModule({
imports: [WjOlapModule, BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Engine Defining Views</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<div id="buttons" class="buttons" (click)="onButtonClick($event)">
<button id="who" class="btn">
How much was spent by each person?
</button>
<button id="what" class="btn">
How much was spent on each expense type?
</button>
<button id="who-what" class="btn">
What did each person spend money on?
</button>
<button id="when" class="btn">
When were these expenses made?
</button>
</div>
<p>
Use these buttons to save and load views:
</p>
<div class="buttons">
<button id="save" class="btn btn-primary" (click)="onSaveClick()">
Save View
</button>
<button id="load" class="btn btn-primary" (click)="onLoadClick()">
Load View
</button>
</div>
<div class="row">
<div class="col-xs-6">
<p>
Use the <b>PivotPanel</b> control to edit the view:
</p>
<wj-pivot-panel [itemsSource]="ng"></wj-pivot-panel>
</div>
<div class="col-xs-6">
<p>
Use the <b>PivotGrid</b> control to see the results:
</p>
<wj-pivot-grid [itemsSource]="ng"></wj-pivot-grid>
</div>
</div>
</div>
import { Injectable } from '@angular/core';
import * as wjCore from '@grapecity/wijmo';
export interface DataItem {
date: Date;
buyer: string;
type: string;
amount: number;
}
function randomItem(arr: string[]): string {
return arr[Math.floor(Math.random() * arr.length)];
}
@Injectable()
export class DataService {
getData(cnt: number): DataItem[] {
var today = new Date(),
buyers = 'Mom,Dad,Kelly,Sheldon'.split(','),
types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','),
data = [];
for (var i = 0; i < cnt; i++) {
data.push({
date: wjCore.DateTime.addDays(today, -Math.random() * 365),
buyer: randomItem(buyers),
type: randomItem(types),
amount: 20 + Math.random() * 1000
});
}
return data;
}
}
.buttons {
display: flex;
margin-bottom: 12px;
}
.buttons .btn {
margin: 6px;
white-space: normal;
}
body {
margin-bottom: 36pt;
}
<template>
<div class="container-fluid">
<div id="buttons" class="buttons" v-on:click="onButtonClick">
<button id="who" class="btn">
How much was spent by each person?
</button>
<button id="what" class="btn">
How much was spent on each expense type?
</button>
<button id="who-what" class="btn">
What did each person spend money on?
</button>
<button id="when" class="btn">
When were these expenses made?
</button>
</div>
<p>
Use these buttons to save and load views:
</p>
<div class="buttons">
<button id="save" class="btn btn-primary" v-on:click="onSaveClick">
Save View
</button>
<button id="load" class="btn btn-primary" v-on:click="onLoadClick">
Load View
</button>
</div>
<div class="row">
<div class="col-xs-6">
<p>
Use the <b>PivotPanel</b> control to edit the view:
</p>
<wj-pivot-panel :items-source="ng"></wj-pivot-panel>
</div>
<div class="col-xs-6">
<p>
Use the <b>PivotGrid</b> control to see the results:
</p>
<wj-pivot-grid :items-source="ng"></wj-pivot-grid>
</div>
</div>
</div>
</template>
<script>
import '@grapecity/wijmo.styles/wijmo.css';
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.olap';
import '@grapecity/wijmo.vue2.grid';
import * as wjcOlap from '@grapecity/wijmo.olap';
import { getData } from './data'
let App = Vue.extend({
name: "app",
data: function() {
return {
ng: new wjcOlap.PivotEngine({
autoGenerateFields: false, // turn off auto-generation
fields: [ // specify the fields we want
{ binding: 'date', header: 'Date', format: 'yyyy' },
{ binding: 'date', header: 'Quarter', format: '"Q"q' },
{ binding: 'buyer', header: 'Person' },
{ binding: 'type', header: 'Category' },
{ binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }
],
itemsSource: getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Person']
})
};
},
methods: {
onSaveClick() {
localStorage.viewDefinition = this.ng.viewDefinition;
},
onLoadClick() {
if (localStorage.viewDefinition) {
this.ng.viewDefinition = localStorage.viewDefinition;
}
},
onButtonClick(e) {
var ng = this.ng;
switch (e.target.id) {
case 'who':
ng.rowFields.clear();
ng.rowFields.push('Person');
break;
case 'what':
ng.rowFields.clear();
ng.rowFields.push('Category');
break;
case 'who-what':
ng.rowFields.clear();
ng.rowFields.push('Person', 'Category');
break;
case 'when':
ng.rowFields.clear();
ng.rowFields.push('Date');
ng.rowFields.push('Quarter');
break;
}
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
.buttons {
display: flex;
margin-bottom: 12px;
}
.buttons .btn {
margin: 6px;
white-space: normal;
}
body {
margin-bottom: 36pt;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Engine Defining Views</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
import * as wjcCore from '@grapecity/wijmo';
export function getData(cnt) {
var today = new Date(),
buyers = 'Mom,Dad,Kelly,Sheldon'.split(','),
types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','),
data = [];
for (var i = 0; i < cnt; i++) {
data.push({
date: wjcCore.DateTime.addDays(today, -Math.random() * 365),
buyer: randomItem(buyers),
type: randomItem(types),
amount: 20 + Math.random() * 1000
});
}
return data;
}
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
import './app.css';
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//
import * as Olap from '@grapecity/wijmo.react.olap';
import * as wjcOlap from '@grapecity/wijmo.olap';
import { getData } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
ng: new wjcOlap.PivotEngine({
autoGenerateFields: false,
fields: [
{ binding: 'date', header: 'Date', format: 'yyyy' },
{ binding: 'date', header: 'Quarter', format: '"Q"q' },
{ binding: 'buyer', header: 'Person' },
{ binding: 'type', header: 'Category' },
{ binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }
],
itemsSource: getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Person']
})
};
}
render() {
return (<div className="container-fluid">
<div id="buttons" className="buttons" onClick={this.onButtonClick.bind(this)}>
<button id="who" className="btn">
How much was spent by each person?
</button>
<button id="what" className="btn">
How much was spent on each expense type?
</button>
<button id="who-what" className="btn">
What did each person spend money on?
</button>
<button id="when" className="btn">
When were these expenses made?
</button>
</div>
<p>
Use these buttons to save and load views:
</p>
<div className="buttons">
<button id="save" className="btn btn-primary" onClick={this.onSaveClick.bind(this)}>
Save View
</button>
<button id="load" className="btn btn-primary" onClick={this.onLoadClick.bind(this)}>
Load View
</button>
</div>
<div className="row">
<div className="col-xs-6">
<p>
Use the <b>PivotPanel</b> control to edit the view:
</p>
<Olap.PivotPanel itemsSource={this.state.ng}></Olap.PivotPanel>
</div>
<div className="col-xs-6">
<p>
Use the <b>PivotGrid</b> control to see the results:
</p>
<Olap.PivotGrid itemsSource={this.state.ng}></Olap.PivotGrid>
</div>
</div>
</div>);
}
onSaveClick() {
localStorage.viewDefinition = this.state.ng.viewDefinition;
}
onLoadClick() {
if (localStorage.viewDefinition) {
this.state.ng.viewDefinition = localStorage.viewDefinition;
}
}
onButtonClick(e) {
var ng = this.state.ng;
switch (e.target.id) {
case 'who':
ng.rowFields.clear();
ng.rowFields.push('Person');
break;
case 'what':
ng.rowFields.clear();
ng.rowFields.push('Category');
break;
case 'who-what':
ng.rowFields.clear();
ng.rowFields.push('Person', 'Category');
break;
case 'when':
ng.rowFields.clear();
ng.rowFields.push('Date');
ng.rowFields.push('Quarter');
break;
}
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AutoComplete</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.buttons {
display: flex;
margin-bottom: 12px;
}
.buttons .btn {
margin: 6px;
white-space: normal;
}
body {
margin-bottom: 36pt;
}
import * as wjcCore from '@grapecity/wijmo';
export function getData(cnt) {
var today = new Date(), buyers = 'Mom,Dad,Kelly,Sheldon'.split(','), types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','), data = [];
for (var i = 0; i < cnt; i++) {
data.push({
date: wjcCore.DateTime.addDays(today, -Math.random() * 365),
buyer: randomItem(buyers),
type: randomItem(types),
amount: 20 + Math.random() * 1000
});
}
return data;
}
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
