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.

Learn about OLAP | PivotPanel Custom Layouts Documentation | PivotPanel API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import '@grapecity/wijmo.touch'; // support drag/drop on touch devices 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 wj-state-disabled" type="button" disabled> 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>MESCIUS Wijmo OLAP Pivot Panel Control Template</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-sm-6"> <p> Here is the PivotPanel: </p> <div id="pivotPanel"></div> </div> <div class="col-sm-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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);