Areas Only (1 by 4)

This sample replaces the PivotPanel's default controlTemplate with one that uses a CSS Grid-based layout. This layout shows the Areas section only. Each part of field list area is stacked on top of one another and stretches the full width of the PivotPanel.

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

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import '@mescius/wijmo.touch'; // support drag/drop on touch devices import * as wjOlap from '@mescius/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 Areas Only</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></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: 100%; grid-template-columns: 100%; } .wj-pivotpanel .field-list-label { display: none; } .wj-pivotpanel .field-list { display: none; } .wj-pivotpanel .drag-areas-label { display: none; } .wj-pivotpanel .filter-list { -ms-grid-row: 1; grid-row: 1; } .wj-pivotpanel .row-list { -ms-grid-row: 2; grid-row: 2; } .wj-pivotpanel .column-list { -ms-grid-row: 3; grid-row: 3; } .wj-pivotpanel .values-list { -ms-grid-row: 4; grid-row: 4; } .wj-pivotpanel .progress-bar { -ms-grid-row: 5; grid-row: 5; width: 0px; height: 3px; } .wj-pivotpanel .control-area { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 5; grid-row: 5; 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; -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; } .wj-pivotpanel .pad { padding: 6px; } 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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/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);