PivotPanel Layout

The PivotPanel control has a Stacked layout that shows the Fields Section above the Areas Section. This is the default layout used by Excel as well. This sample replaces the PivotPanel's default controlTemplate with one that uses a CSS Grid-based layout. This allows you to achieve virtually any layout you want simply by adjusting a few CSS rules.

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() { // // add Grid-based layout for the PivotPanel wjOlap.PivotPanel.controlTemplate = `<div class="root"> <div class="field-list-label"> <label wj-part="g-flds"></label> </div> <div class="field-list pad"> <div wj-part="d-fields"></div> </div> <div class="drag-areas-label"> <label wj-part="g-drag"></label> </div> <div class="filter-list pad"> <label> <span class="wj-glyph wj-glyph-filter"></span> <span wj-part="g-flt"></span> </label> <div wj-part="d-filters"></div> </div> <div class="column-list pad bdr-left"> <label> <span class="wj-glyph">⫴</span> <span wj-part="g-cols"></span> </label> <div wj-part="d-cols"></div> </div> <div class="row-list pad bdr-top"> <label> <span class="wj-glyph">≡</span> <span wj-part="g-rows"></span> </label> <div wj-part="d-rows"></div> </div> <div class="values-list pad bdr-left bdr-top"> <label> <span class="wj-glyph">Σ</span> <span wj-part="g-vals"></span> </label> <div wj-part="d-vals"></div> </div> <div wj-part="d-prog" class="progress-bar"></div> <div class="control-area"> <label> <input wj-part="chk-defer" type="checkbox"> <span wj-part="g-defer">Defer Updates</span> </label> <button wj-part="btn-update" class="wj-btn" type="button"> Update </button> </div> </div>`; // // 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 }); // } <!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 Stacked</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> Here is the PivotPanel: </p> <div id="pivotPanel"></div> </div> <div class="col-xs-6"> <p> And here is the output view: </p> <div id="pivotPanelGrid"></div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> IE11 support for CSS Grid layouts is outdated and will not be updated, but you can use <a href="https://autoprefixer.github.io/">AutoPrefixer</a> to add the IE11 support to your CSS automatically. </div> </div> </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 }, ]; } /* IE11 support added with AutoPrevixer https://autoprefixer.github.io/ */ .wj-pivotpanel { min-height: 0; max-width: 600px; margin: 12px auto; display: block; 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 { min-height: 4em; background: inherit; } .wj-pivotpanel .root { display: -ms-grid; display: grid; -ms-grid-columns: (50%)[2]; grid-template-columns: repeat(2, 50%); } .wj-pivotpanel .field-list-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 1; grid-row: 1; } .wj-pivotpanel .field-list { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 2; grid-row: 2; } .wj-pivotpanel .drag-areas-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 3; grid-row: 3; } .wj-pivotpanel .filter-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .column-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .row-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .values-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .progress-bar { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; width: 0px; height: 3px; } .wj-pivotpanel .control-area { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; display: -ms-grid; display: grid; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; } .wj-pivotpanel .control-area button { -ms-grid-column: 2; grid-column: 2; align-self: end; -ms-grid-column-align: end; } .wj-pivotpanel .pad { padding: 6px; } .wj-pivotpanel .bdr-left { border-left: 1px solid rgba(0,0,0,.2); } .wj-pivotpanel .bdr-top { border-top: 1px solid rgba(0,0,0,.2); } 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'; // custom template for PivotPanel, which uses Grid-based layout for the PivotPanel const customTemplate: string = `<div class="root"> <div class="field-list-label"> <label wj-part="g-flds"></label> </div> <div class="field-list pad"> <div wj-part="d-fields"></div> </div> <div class="drag-areas-label"> <label wj-part="g-drag"></label> </div> <div class="filter-list pad"> <label> <span class="wj-glyph wj-glyph-filter"></span> <span wj-part="g-flt"></span> </label> <div wj-part="d-filters"></div> </div> <div class="column-list pad bdr-left"> <label> <span class="wj-glyph">⫴</span> <span wj-part="g-cols"></span> </label> <div wj-part="d-cols"></div> </div> <div class="row-list pad bdr-top"> <label> <span class="wj-glyph">≡</span> <span wj-part="g-rows"></span> </label> <div wj-part="d-rows"></div> </div> <div class="values-list pad bdr-left bdr-top"> <label> <span class="wj-glyph">Σ</span> <span wj-part="g-vals"></span> </label> <div wj-part="d-vals"></div> </div> <div wj-part="d-prog" class="progress-bar"></div> <div class="control-area"> <label> <input wj-part="chk-defer" type="checkbox"> <span wj-part="g-defer">Defer Updates</span> </label> <button wj-part="btn-update" class="wj-btn" type="button"> Update </button> </div> </div>`; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { ngPanel: wjOlap.PivotEngine; // constructor(@Inject(DataService) private dataService: DataService) { // apply custom template to PivotPanel wjOlap.PivotPanel.controlTemplate = customTemplate; 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'; } } // @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 Stacked</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> Here is the PivotPanel: </p> <wj-pivot-panel [itemsSource]="ngPanel"></wj-pivot-panel> </div> <div class="col-xs-6"> <p> And here is the output view: </p> <wj-pivot-grid [itemsSource]="ngPanel"></wj-pivot-grid> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> IE11 support for CSS Grid layouts is outdated and will not be updated, but you can use <a href="https://autoprefixer.github.io/">AutoPrefixer</a> to add the IE11 support to your CSS automatically. </div> </div> </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 }, ]; } } /* IE11 support added with AutoPrevixer https://autoprefixer.github.io/ */ .wj-pivotpanel { min-height: 0; max-width: 600px; margin: 12px auto; display: block; 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 { min-height: 4em; background: inherit; } .wj-pivotpanel .root { display: -ms-grid; display: grid; -ms-grid-columns: (50%)[2]; grid-template-columns: repeat(2, 50%); } .wj-pivotpanel .field-list-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 1; grid-row: 1; } .wj-pivotpanel .field-list { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 2; grid-row: 2; } .wj-pivotpanel .drag-areas-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 3; grid-row: 3; } .wj-pivotpanel .filter-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .column-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .row-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .values-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .progress-bar { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; width: 0px; height: 3px; } .wj-pivotpanel .control-area { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; display: -ms-grid; display: grid; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; } .wj-pivotpanel .control-area button { -ms-grid-column: 2; grid-column: 2; align-self: end; -ms-grid-column-align: end; } .wj-pivotpanel .pad { padding: 6px; } .wj-pivotpanel .bdr-left { border-left: 1px solid rgba(0,0,0,.2); } .wj-pivotpanel .bdr-top { border-top: 1px solid rgba(0,0,0,.2); } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <p> Here is the PivotPanel: </p> <wj-pivot-panel id="sample-panel" :items-source="ngPanel"></wj-pivot-panel> </div> <div class="col-xs-6"> <p> And here is the output view: </p> <wj-pivot-grid :items-source="ngPanel"></wj-pivot-grid> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> IE11 support for CSS Grid layouts is outdated and will not be updated, but you can use <a href="https://autoprefixer.github.io/">AutoPrefixer</a> to add the IE11 support to your CSS automatically. </div> </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'; // custom template for PivotPanel, which uses Grid-based layout for the PivotPanel const customTemplate = `<div class="root"> <div class="field-list-label"> <label wj-part="g-flds"></label> </div> <div class="field-list pad"> <div wj-part="d-fields"></div> </div> <div class="drag-areas-label"> <label wj-part="g-drag"></label> </div> <div class="filter-list pad"> <label> <span class="wj-glyph wj-glyph-filter"></span> <span wj-part="g-flt"></span> </label> <div wj-part="d-filters"></div> </div> <div class="column-list pad bdr-left"> <label> <span class="wj-glyph">⫴</span> <span wj-part="g-cols"></span> </label> <div wj-part="d-cols"></div> </div> <div class="row-list pad bdr-top"> <label> <span class="wj-glyph">≡</span> <span wj-part="g-rows"></span> </label> <div wj-part="d-rows"></div> </div> <div class="values-list pad bdr-left bdr-top"> <label> <span class="wj-glyph">Σ</span> <span wj-part="g-vals"></span> </label> <div wj-part="d-vals"></div> </div> <div wj-part="d-prog" class="progress-bar"></div> <div class="control-area"> <label> <input wj-part="chk-defer" type="checkbox"> <span wj-part="g-defer">Defer Updates</span> </label> <button wj-part="btn-update" class="wj-btn" type="button"> Update </button> </div> </div>`; 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 }) }; }, created: function() { wjcOlap.PivotPanel.controlTemplate = customTemplate; }, mounted: function() { this.ngPanel.fields.getField('Amount').format = 'c0'; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> #sample-panel { min-height: 0; max-width: 600px; margin: 12px auto; display: block; background: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } #sample-panel .wj-flexgrid { min-height: 4em; background: inherit; } .wj-pivotpanel .root { display: -ms-grid; display: grid; -ms-grid-columns: (50%)[2]; grid-template-columns: repeat(2, 50%); } .wj-pivotpanel .field-list-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 1; grid-row: 1; } .wj-pivotpanel .field-list { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 2; grid-row: 2; } .wj-pivotpanel .drag-areas-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 3; grid-row: 3; } .wj-pivotpanel .filter-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .column-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .row-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .values-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .progress-bar { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; width: 0px; height: 3px; } .wj-pivotpanel .control-area { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; display: -ms-grid; display: grid; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; } .wj-pivotpanel .control-area button { -ms-grid-column: 2; grid-column: 2; align-self: end; -ms-grid-column-align: end; } .wj-pivotpanel .pad { padding: 6px; } .wj-pivotpanel .bdr-left { border-left: 1px solid rgba(0,0,0,.2); } .wj-pivotpanel .bdr-top { border-top: 1px solid rgba(0,0,0,.2); } 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 Stacked</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.customTemplate = `<div class="root"> <div class="field-list-label"> <label wj-part="g-flds"></label> </div> <div class="field-list pad"> <div wj-part="d-fields"></div> </div> <div class="drag-areas-label"> <label wj-part="g-drag"></label> </div> <div class="filter-list pad"> <label> <span class="wj-glyph wj-glyph-filter"></span> <span wj-part="g-flt"></span> </label> <div wj-part="d-filters"></div> </div> <div class="column-list pad bdr-left"> <label> <span class="wj-glyph">⫴</span> <span wj-part="g-cols"></span> </label> <div wj-part="d-cols"></div> </div> <div class="row-list pad bdr-top"> <label> <span class="wj-glyph">≡</span> <span wj-part="g-rows"></span> </label> <div wj-part="d-rows"></div> </div> <div class="values-list pad bdr-left bdr-top"> <label> <span class="wj-glyph">Σ</span> <span wj-part="g-vals"></span> </label> <div wj-part="d-vals"></div> </div> <div wj-part="d-prog" class="progress-bar"></div> <div class="control-area"> <label> <input wj-part="chk-defer" type="checkbox"> <span wj-part="g-defer">Defer Updates</span> </label> <button wj-part="btn-update" class="wj-btn" type="button"> Update </button> </div> </div>`; wjcOlap.PivotPanel.controlTemplate = this.customTemplate; 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-6"> <p> Here is the PivotPanel: </p> <Olap.PivotPanel id="sample-panel" itemsSource={this.state.ngPanel}></Olap.PivotPanel> </div> <div className="col-xs-6"> <p> And here is the output view: </p> <Olap.PivotGrid itemsSource={this.state.ngPanel}></Olap.PivotGrid> </div> </div> <div className="panel panel-warning"> <div className="panel-heading"> IE11 support for CSS Grid layouts is outdated and will not be updated, but you can use <a href="https://autoprefixer.github.io/">AutoPrefixer</a> to add the IE11 support to your CSS automatically. </div> </div> </div>); } } 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> #sample-panel { min-height: 0; max-width: 600px; margin: 12px auto; display: block; background: #eee; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } #sample-panel .wj-flexgrid { min-height: 4em; background: inherit; } .wj-pivotpanel .root { display: -ms-grid; display: grid; -ms-grid-columns: (50%)[2]; grid-template-columns: repeat(2, 50%); } .wj-pivotpanel .field-list-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 1; grid-row: 1; } .wj-pivotpanel .field-list { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 2; grid-row: 2; } .wj-pivotpanel .drag-areas-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 3; grid-row: 3; } .wj-pivotpanel .filter-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .column-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .row-list { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .values-list { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 5; grid-row: 5; } .wj-pivotpanel .progress-bar { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; width: 0px; height: 3px; } .wj-pivotpanel .control-area { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 6; grid-row: 6; display: -ms-grid; display: grid; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; } .wj-pivotpanel .control-area button { -ms-grid-column: 2; grid-column: 2; align-self: end; -ms-grid-column-align: end; } .wj-pivotpanel .pad { padding: 6px; } .wj-pivotpanel .bdr-left { border-left: 1px solid rgba(0, 0, 0, .2); } .wj-pivotpanel .bdr-top { border-top: 1px solid rgba(0, 0, 0, .2); } 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 }, ]; }