Slicer

The Slicer control provides a quick way to edit filters applied to PivotField objects. It provides buttons the user can click to filter data based on values and indicates the current filtering state, which makes it easy to understand what is shown in filtered PivotGrid and PivotChart controls.

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({ itemsSource: getData(1000), valueFields: ['Amount'], rowFields: ['Buyer'], filterFields: ['Date'] // filter }); // // customize fiels var fldAmount = ng.fields.getField('Amount'), fldDate = ng.fields.getField('Date'); fldAmount.format = 'c0'; fldDate.format = 'MMMM yyyy'; // // show slicer var slicer = new wjOlap.Slicer('#slicer', { field: fldDate }); // // show summary var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ng }); // // configure slicer document.getElementById('showHeader').addEventListener('click', function (e) { slicer.showHeader = e.target.checked; }); document.getElementById('showCheckboxes').addEventListener('click', function (e) { slicer.showCheckboxes = e.target.checked; }); // // configure field document.getElementById('editfield').addEventListener('click', function (e) { ng.editField(slicer.field); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Slicer</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-6"> <p>Slicer:</p> <div id="slicer"></div> </div> <div class="col-xs-6"> <p> Amount spent by each buyer. </p> <div id="pivotGrid"></div> </div> </div> <p> You can customize the <b>Slicer</b> control to hide or show a header, and to hide or show checkboxes next to each item: </p> <label> Show Header <input id="showHeader" type="checkbox" checked> </label> <br/> <label> Show Checkboxes <input id="showCheckboxes" type="checkbox" > </label> <p> If you change the <b>format</b> property of the field being filtered by the <b>Slicer</b>, the value list is updated automatically: </p> <button class="btn btn-primary" id="editfield"> Edit Date Field... </button> </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), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } .wj-pivotgrid { max-height: 300px; } .wj-slicer { display: block; max-height: 200px; margin: 12px; } body { margin-bottom: 48px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } 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 { @ViewChild('slicer') slicer: wjOlap.Slicer; ng: wjOlap.PivotEngine; fldAmount: wjOlap.PivotField; fldDate: wjOlap.PivotField; // constructor(@Inject(DataService) private dataService: DataService) { this.ng = new wjOlap.PivotEngine({ itemsSource: dataService.getData(1000), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer'], // by buyer filterFields: ['Date'] // filter }); this.fldAmount = this.ng.fields.getField('Amount'), this.fldDate = this.ng.fields.getField('Date'); this.fldAmount.format = 'c0'; this.fldDate.format = 'MMMM yyyy'; } // onShowHeaderClick(e: MouseEvent) { this.slicer.showHeader = (e.target as HTMLInputElement).checked; } // onShowCheckboxesClick(e: MouseEvent) { this.slicer.showCheckboxes = (e.target as HTMLInputElement).checked; } // onEditFieldClick(e: MouseEvent) { this.ng.editField(this.slicer.field); } } // @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 Slicer</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-6"> <p>Slicer:</p> <wj-slicer #slicer [field]="fldDate"></wj-slicer> </div> <div class="col-xs-6"> <p> Amount spent by each buyer. </p> <wj-pivot-grid [itemsSource]="ng"></wj-pivot-grid> </div> </div> <p> You can customize the <b>Slicer</b> control to hide or show a header, and to hide or show checkboxes next to each item: </p> <label> Show Header <input id="showHeader" type="checkbox" checked (click)="onShowHeaderClick($event)"> </label> <br /> <label> Show Checkboxes <input id="showCheckboxes" type="checkbox" (click)="onShowCheckboxesClick($event)"> </label> <p> If you change the <b>format</b> property of the field being filtered by the <b>Slicer</b>, the value list is updated automatically: </p> <button class="btn btn-primary" id="editfield" (click)="onEditFieldClick($event)"> Edit Date Field... </button> </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; } } .wj-pivotgrid { max-height: 300px; } .wj-slicer { display: block; max-height: 200px; margin: 12px; } body { margin-bottom: 48px; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <p>Slicer:</p> <wj-slicer id="sample-slicer" :field="fldDate" :initialized="initialSlicer"></wj-slicer> </div> <div class="col-xs-6"> <p> Amount spent by each buyer. </p> <wj-pivot-grid :items-source="ng"></wj-pivot-grid> </div> </div> <p> You can customize the <b>Slicer</b> control to hide or show a header, and to hide or show checkboxes next to each item: </p> <label> Show Header <input id="showHeader" type="checkbox" checked v-on:click="onShowHeaderClick"> </label> <br /> <label> Show Checkboxes <input id="showCheckboxes" type="checkbox" v-on:click="onShowCheckboxesClick"> </label> <p> If you change the <b>format</b> property of the field being filtered by the <b>Slicer</b>, the value list is updated automatically: </p> <button class="btn btn-primary" id="editfield" v-on:click="onEditFieldClick"> Edit Date Field... </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 { ng: new wjcOlap.PivotEngine({ itemsSource: getData(1000), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer'], // by buyer filterFields: ['Date'] // filter }), fldAmount: {}, fldDate: {} }; }, created: function() { this.fldAmount = this.ng.fields.getField('Amount'), this.fldDate = this.ng.fields.getField('Date'); this.fldAmount.format = 'c0'; this.fldDate.format = 'MMMM yyyy'; }, methods: { initialSlicer(slicer) { this.slicer = slicer; }, onShowHeaderClick(e) { this.slicer.showHeader = e.target.checked; }, onShowCheckboxesClick(e) { this.slicer.showCheckboxes = e.target.checked; }, onEditFieldClick(e) { this.ng.editField(this.slicer.field); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-pivotgrid { max-height: 300px; } #sample-slicer { display: block; max-height: 200px; margin: 12px; } body { margin-bottom: 48px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Slicer</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 wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); let ng = new wjcOlap.PivotEngine({ itemsSource: getData(1000), valueFields: ['Amount'], rowFields: ['Buyer'], filterFields: ['Date'] // filter }), fldAmount = ng.fields.getField('Amount'), fldDate = ng.fields.getField('Date'); fldAmount.format = 'c0'; fldDate.format = 'MMMM yyyy'; this.state = { ng, fldAmount, fldDate, showHeader: true, showCheckboxes: false }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <p>Slicer:</p> <Olap.Slicer id="sample-slicer" field={this.state.fldDate} initialized={control => this.slicer = control} showCheckboxes={this.state.showCheckboxes} showHeader={this.state.showHeader}/> </div> <div className="col-xs-6"> <p> Amount spent by each buyer. </p> <Olap.PivotGrid itemsSource={this.state.ng}></Olap.PivotGrid> </div> </div> <p> You can customize the <b>Slicer</b> control to hide or show a header, and to hide or show checkboxes next to each item: </p> <label> Show Header <input id="showHeader" type="checkbox" checked={this.state.showHeader} onClick={this.onShowHeaderClick.bind(this)}/> </label> <br /> <label> Show Checkboxes <input id="showCheckboxes" type="checkbox" checked={this.state.showCheckboxes} onClick={this.onShowCheckboxesClick.bind(this)}/> </label> <p> If you change the <b>format</b> property of the field being filtered by the <b>Slicer</b>, the value list is updated automatically: </p> <button className="btn btn-primary" id="editfield" onClick={this.onEditFieldClick.bind(this)}> Edit Date Field... </button> </div>); } onShowHeaderClick(e) { this.setState({ showHeader: e.target.checked }); } onShowCheckboxesClick(e) { this.setState({ showCheckboxes: e.target.checked }); } onEditFieldClick(e) { this.state.ng.editField(this.slicer.field); } } 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-pivotgrid { max-height: 300px; } #sample-slicer { display: block; max-height: 200px; margin: 12px; } body { margin-bottom: 48px; } 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)]; }