Field ShowAs

The PivotField.showAs property allows you to specify common calculations to be performed on the field value before it is displayed. Options for this property are defined by the ShowAs enumeration and include differences between the value and the one in the previous row or column, percentages over the row, column, or grand total, and running totals.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjInput from '@grapecity/wijmo.input'; 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: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: 'MMM' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Show As', format: 'c0', aggregate: 'Sum' }, ], itemsSource: getData(1000), showRowTotals: 'Subtotals', valueFields: ['Amount', 'Show As'], rowFields: ['Year', 'Period'] // by Year and Quarter }); // // show summary var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ng }); // // change the setting of the ShowAs property var fld = ng.fields.getField('Show As'); var showAs = new wjInput.ComboBox('#showAs', { itemsSource: 'NoCalculation,DiffRow,DiffRowPct,DiffCol,DiffColPct,PctGrand,PctRow,PctCol,RunTot,RunTotPct'.split(','), text: wjOlap.ShowAs[fld.showAs], textChanged: function (s, e) { fld.showAs = s.text; fld.format = s.text.indexOf('Pct') > -1 ? 'p0' : 'c0'; } }); // // show period in columns or in rows document.getElementById('periodInColumns').addEventListener('click', function (e) { var list = e.target.checked ? ng.columnFields : ng.rowFields; list.push('Period'); }); // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Fields Show as Functions</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="pivotGrid"></div> <p> Change the value of the field's <b>showAs</b> property: </p> <input id="showAs"><br/> <p> <label> Show Period in columns <input id="periodInColumns" type="checkbox"> </label> </p> </div> </body> </html> import * as wjCore from '@grapecity/wijmo'; // get the raw data 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 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } .container > label { width: 120px; text-align: right; } .container > .wj-control { margin-bottom: 6px; } .wj-flexgrid { height: 200px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjInput from '@grapecity/wijmo.input'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; 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; fld: wjOlap.PivotField; showAsOptions: string[]; showAsText: string; // constructor(@Inject(DataService) private dataService: DataService) { this.ng = new wjOlap.PivotEngine({ autoGenerateFields: false, // turn off auto-generation fields: [ // specify the fields we want (no date) { binding: 'date', header: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: 'MMM' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Show As', format: 'c0', aggregate: 'Sum' }, ], itemsSource: dataService.getData(1000), // raw data showRowTotals: 'Subtotals', valueFields: ['Amount', 'Show As'], // show amount spent rowFields: ['Year', 'Period'] // by Year and Quarter }); this.fld = this.ng.fields.getField('Show As'); this.showAsText = wjOlap.ShowAs[this.fld.showAs]; // this.showAsOptions = 'NoCalculation,DiffRow,DiffRowPct,DiffCol,DiffColPct,PctGrand,PctRow,PctCol,RunTot,RunTotPct'.split(','); } // onTextChanged(combox: wjInput.ComboBox) { this.fld.showAs = wjOlap.ShowAs[combox.text]; this.fld.format = combox.text.indexOf('Pct') > -1 ? 'p0' : 'c0'; } // onPeriodInColumns(e: MouseEvent) { let list = (e.target as HTMLInputElement).checked ? this.ng.columnFields : this.ng.rowFields; list.push('Period'); } } // @NgModule({ imports: [WjOlapModule, WjInputModule, 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 Fields Show as Functions</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"> <wj-pivot-grid [itemsSource]="ng"></wj-pivot-grid> <p> Change the value of the field's <b>showAs</b> property: </p> <wj-combo-box #combo [itemsSource]="showAsOptions" [text]="showAsText" (textChanged)="onTextChanged(combo)"></wj-combo-box> <p> <label> Show Period in columns <input id="periodInColumns" type="checkbox" (click)="onPeriodInColumns($event)"> </label> </p> </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 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } } .container > label { width: 120px; text-align: right; } .container > .wj-control { margin-bottom: 6px; } .wj-flexgrid { height: 200px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-pivot-grid :items-source="ng"></wj-pivot-grid> <p> Change the value of the field's <b>showAs</b> property: </p> <wj-combo-box :items-source="showAsOptions" :textChanged="onTextChanged"></wj-combo-box> <p> <label> Show Period in columns <input id="periodInColumns" type="checkbox" v-on:click="onPeriodInColumns"> </label> </p> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.olap'; 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 (no date) { binding: 'date', header: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: 'MMM' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Show As', format: 'c0', aggregate: 'Sum' }, ], itemsSource: getData(1000), // raw data showRowTotals: 'Subtotals', valueFields: ['Amount', 'Show As'], // show amount spent rowFields: ['Year', 'Period'] // by Year and Quarter }), showAsOptions: 'NoCalculation,DiffRow,DiffRowPct,DiffCol,DiffColPct,PctGrand,PctRow,PctCol,RunTot,RunTotPct'.split(',') }; }, mounted: function(){ this.fld = this.ng.fields.getField('Show As'); }, methods: { onTextChanged(combox) { this.fld.showAs = wjcOlap.ShowAs[combox.text]; this.fld.format = combox.text.indexOf('Pct') > -1 ? 'p0' : 'c0'; }, onPeriodInColumns(e) { let list = e.target.checked ? this.ng.columnFields : this.ng.rowFields; list.push('Period'); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container > label { width: 120px; text-align: right; } .container > .wj-control { margin-bottom: 6px; } .wj-flexgrid { height: 200px; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Fields Show as Functions</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 * 3), 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 wjInput from '@grapecity/wijmo.react.input'; 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: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: 'MMM' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Show As', format: 'c0', aggregate: 'Sum' }, ], itemsSource: getData(1000), showRowTotals: 'Subtotals', valueFields: ['Amount', 'Show As'], rowFields: ['Year', 'Period'] // by Year and Quarter }), showAsOptions: 'NoCalculation,DiffRow,DiffRowPct,DiffCol,DiffColPct,PctGrand,PctRow,PctCol,RunTot,RunTotPct'.split(',') }; this.fld = this.state.ng.fields.getField('Show As'); } render() { return (<div className="container-fluid"> <Olap.PivotGrid itemsSource={this.state.ng}></Olap.PivotGrid> <p> Change the value of the field's <b>showAs</b> property: </p> <wjInput.ComboBox itemsSource={this.state.showAsOptions} textChanged={this.onTextChanged.bind(this)}></wjInput.ComboBox> <p> <label> Show Period in columns <input id="periodInColumns" type="checkbox" onClick={this.onPeriodInColumns.bind(this)}/> </label> </p> </div>); } onTextChanged(combox) { this.fld.showAs = wjcOlap.ShowAs[combox.text]; this.fld.format = combox.text.indexOf('Pct') > -1 ? 'p0' : 'c0'; } onPeriodInColumns(e) { let list = e.target.checked ? this.state.ng.columnFields : this.state.ng.rowFields; list.push('Period'); } } 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> .container>label { width: 120px; text-align: right; } .container>.wj-control { margin-bottom: 6px; } .wj-flexgrid { height: 200px; } body { margin-bottom: 24pt; } 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 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; }