import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOlap from '@grapecity/wijmo.olap';
import * as wjGrid from '@grapecity/wijmo.grid';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// initialize pivot engine
var ng = new wjOlap.PivotEngine({
itemsSource: getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Buyer', 'Type'] // by buyer and by type
});
ng.fields.getField('Amount').format = 'c0'; // customize field
//
// show raw data
var rawData = new wjGrid.FlexGrid('#rawData', {
itemsSource: ng.collectionView
});
//
// show summary
var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
itemsSource: ng
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Engine 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>Raw data:</p>
<div id="rawData"></div>
</div>
<div class="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<div id="pivotGrid"></div>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</div>
</body>
</html>
import * as wjCore from '@grapecity/wijmo';
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
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;
}
.wj-flexgrid {
height: 300px;
}
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 { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjOlapModule } from '@grapecity/wijmo.angular2.olap';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
ng: wjOlap.PivotEngine;
//
constructor(@Inject(DataService) private dataService: DataService) {
this.ng = new wjOlap.PivotEngine({
itemsSource: dataService.getData(10000), // raw data
showRowTotals: 'Subtotals',
valueFields: ['Amount'], // summarize amounts
rowFields: ['Buyer', 'Type'] // by buyer and by type)
});
this.ng.fields.getField('Amount').format = 'c0'; // customize field
}
}
//
@NgModule({
imports: [WjGridModule, 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 Engine 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>Raw data:</p>
<wj-flex-grid [itemsSource]="ng.collectionView"></wj-flex-grid>
</div>
<div class="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<wj-pivot-grid [itemsSource]="ng"></wj-pivot-grid>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</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-flexgrid {
height: 300px;
}
body {
margin-bottom: 24pt;
}
<template>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<p>Raw data:</p>
<wj-flex-grid :items-source="ng.collectionView"></wj-flex-grid>
</div>
<div class="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<wj-pivot-grid :items-source="ng" :initialized="initializePivotGrid"></wj-pivot-grid>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</div>
</template>
<script>
import '@grapecity/wijmo.styles/wijmo.css';
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.olap';
import '@grapecity/wijmo.vue2.grid';
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(10000), // raw data
showRowTotals: 'Subtotals',
valueFields: ['Amount'], // summarize amounts
rowFields: ['Buyer', 'Type'] // by buyer and by type)
})
};
},
methods: {
initializePivotGrid: (pivotGrid) => {
pivotGrid.engine.fields.getField('Amount').format = 'c0';
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
.wj-flexgrid {
height: 300px;
}
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 Engine 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>
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),
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 Grid from '@grapecity/wijmo.react.grid';
import * as wjcOlap from '@grapecity/wijmo.olap';
import { getData } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.initializePivotGrid = (pivotGrid) => {
pivotGrid.engine.fields.getField('Amount').format = 'c0';
};
this.state = {
ng: new wjcOlap.PivotEngine({
itemsSource: getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Buyer', 'Type'] // by buyer and by type)
})
};
}
render() {
return (<div className="container-fluid">
<div className="row">
<div className="col-xs-5">
<p>Raw data:</p>
<Grid.FlexGrid itemsSource={this.state.ng.collectionView}></Grid.FlexGrid>
</div>
<div className="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<Olap.PivotGrid itemsSource={this.state.ng} initialized={this.initializePivotGrid}></Olap.PivotGrid>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</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>
.wj-flexgrid {
height: 300px;
}
body {
margin-bottom: 24pt;
}
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),
buyer: randomItem(buyers),
type: randomItem(types),
amount: 20 + Math.random() * 1000
});
}
return data;
}
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
USA - International
Japan
South
Korea