PivotPanel

The PivotPanel control provides a drag-drop UI for editing a PivotEngine's fields and field lists. You can drag fields among field lists to build views, and use each fields context menu to customize the field properties. Set the PivotPanel.itemsSource property to an instance of a PivotEngine in order to connect the two components.

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 ngPanel = new wjOlap.PivotEngine({ itemsSource: getData(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'] // summarize amounts }); ngPanel.fields.getField('Amount').format = 'c0'; // customize field // // show pivot panel var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', { itemsSource: ngPanel }); // // show summary var pivotPanelGrid = new wjOlap.PivotGrid('#pivotPanelGrid', { itemsSource: ngPanel }); var pivotPanelChart = new wjOlap.PivotChart('#pivotPanelChart', { itemsSource: ngPanel, showTitle: false, showLegend: 'Auto' }); // // save/restore views document.getElementById('saveView').addEventListener('click', function () { if (ngPanel.isViewDefined) { localStorage.viewDefinition = ngPanel.viewDefinition; } }); document.getElementById('restoreView').addEventListener('click', function () { if (localStorage.viewDefinition) { ngPanel.viewDefinition = localStorage.viewDefinition; } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Panel Overview</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 class="row"> <div class="col-xs-5"> <p> Drag and drop fields to build views: </p> <div id="pivotPanel"></div> <p> For example, drag the "Buyer" field from the "Rows" list to the "Columns" list. </p> </div> <div class="col-xs-7"> <p> Summary for the current view definition: </p> <div id="pivotPanelGrid"></div> <div id="pivotPanelChart"></div> </div> </div> <p> View definitions can be saved and restored using the PivotEngine's <b>viewDefinition</b> property: </p> <button id="saveView" class="btn btn-default"> Save View </button> <button id="restoreView" class="btn btn-default"> Restore View </button> </div> </body> </html> // get the raw data export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; } .wj-pivotchart .wj-flexchart { border: none; height: 300px; } .wj-pivotpanel { background: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .wj-pivotpanel .wj-flexgrid { background: inherit; } body { margin-bottom: 24pt; } 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 { ngPanel: wjOlap.PivotEngine; // constructor(@Inject(DataService) private dataService: DataService) { this.ngPanel = new wjOlap.PivotEngine({ itemsSource: dataService.getData(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'] // summarize amounts }); this.ngPanel.fields.getField('Amount').format = 'c0'; } // onSaveViewClick() { if (this.ngPanel.isViewDefined) { localStorage.viewDefinition = this.ngPanel.viewDefinition; } } // onRestoreViewClick() { if (localStorage.viewDefinition) { this.ngPanel.viewDefinition = localStorage.viewDefinition; } } } // @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 Panel Overview</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 class="row"> <div class="col-xs-5"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel [itemsSource]="ngPanel"></wj-pivot-panel> <p> For example, drag the "Buyer" field from the "Rows" list to the "Columns" list. </p> </div> <div class="col-xs-7"> <p> Summary for the current view definition: </p> <wj-pivot-grid [itemsSource]="ngPanel"></wj-pivot-grid> <wj-pivot-chart [itemsSource]="ngPanel" [showTitle]=false [showLegend]="'Auto'"></wj-pivot-chart> </div> </div> <p> View definitions can be saved and restored using the PivotEngine's <b>viewDefinition</b> property: </p> <button id="saveView" class="btn btn-default" (click)="onSaveViewClick()"> Save View </button> <button id="restoreView" class="btn btn-default" (click)="onRestoreViewClick()"> Restore View </button> </div> import { Injectable } from '@angular/core'; export interface DataItem { date: Date; buyer: string; type: string; amount: number; } @Injectable() export class DataService { getData(): DataItem[] { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; } } .wj-pivotchart .wj-flexchart { border: none; height: 300px; } .wj-pivotpanel { background: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .wj-pivotpanel .wj-flexgrid { background: inherit; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel id="sample-panel" :items-source="ngPanel"></wj-pivot-panel> <p> For example, drag the "Buyer" field from the "Rows" list to the "Columns" list. </p> </div> <div class="col-xs-7"> <p> Summary for the current view definition: </p> <wj-pivot-grid :items-source="ngPanel"></wj-pivot-grid> <wj-pivot-chart :items-source="ngPanel" :show-title="false" show-legend="Auto"></wj-pivot-chart> </div> </div> <p> View definitions can be saved and restored using the PivotEngine's <b>viewDefinition</b> property: </p> <button id="saveView" class="btn btn-default" v-on:click="onSaveViewClick"> Save View </button> <button id="restoreView" class="btn btn-default" v-on:click="onRestoreViewClick"> Restore View </button> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; 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 { ngPanel: new wjcOlap.PivotEngine({ itemsSource: getData(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'] // summarize amounts }) }; }, mounted: function() { this.ngPanel.fields.getField('Amount').format = 'c0'; }, methods: { onSaveViewClick() { if (this.ngPanel.isViewDefined) { localStorage.viewDefinition = this.ngPanel.viewDefinition; } }, onRestoreViewClick() { if (localStorage.viewDefinition) { this.ngPanel.viewDefinition = localStorage.viewDefinition; } } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-pivotchart .wj-flexchart { border: none; height: 300px; } #sample-panel { background: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .wj-pivotpanel .wj-flexgrid { background: inherit; } 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 Pivot Panel Overview</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> export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; } 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 = { ngPanel: new wjcOlap.PivotEngine({ itemsSource: getData(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'] // summarize amounts }) }; this.state.ngPanel.fields.getField('Amount').format = 'c0'; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-5"> <p> Drag and drop fields to build views: </p> <Olap.PivotPanel id="sample-panel" itemsSource={this.state.ngPanel}></Olap.PivotPanel> <p> For example, drag the "Buyer" field from the "Rows" list to the "Columns" list. </p> </div> <div className="col-xs-7"> <p> Summary for the current view definition: </p> <Olap.PivotGrid itemsSource={this.state.ngPanel}></Olap.PivotGrid> <Olap.PivotChart itemsSource={this.state.ngPanel} showTitle={false} show-legend="Auto"></Olap.PivotChart> </div> </div> <p> View definitions can be saved and restored using the PivotEngine's <b>viewDefinition</b> property: </p> <button id="saveView" className="btn btn-default" onClick={this.onSaveViewClick.bind(this)}> Save View </button> <button id="restoreView" className="btn btn-default" onClick={this.onRestoreViewClick.bind(this)}> Restore View </button> </div>); } onSaveViewClick() { if (this.state.ngPanel.isViewDefined) { localStorage.viewDefinition = this.state.ngPanel.viewDefinition; } } onRestoreViewClick() { if (localStorage.viewDefinition) { this.state.ngPanel.viewDefinition = localStorage.viewDefinition; } } } 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> .wj-pivotchart .wj-flexchart { border: none; height: 300px; } #sample-panel { background: #eee; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .wj-pivotpanel .wj-flexgrid { background: inherit; } body { margin-bottom: 24pt; } export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; }