Microsoft OLAP Cube (React)
The PivotEngine can connect directly to Microsoft SSAS OLAP cubes via a URL. This sample connects to the "AdventureWorks" OLAP cube and specifies which fields should be loaded. Specifying fields improves loading time and makes the PivotPanel easier to navigate and use. You can use the PivotPanel to create views and the PivotGrid to display the results.
Blog: Connect directly to Microsoft SSAS Cubes with Wijmo OLAP
Learn about OLAP | PivotEngine API Reference
This example uses React.
app.jsx
index.html
app.css
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React from 'react';
import '@mescius/wijmo.touch'; // support drag/drop on touch devices
import * as Olap from '@mescius/wijmo.react.olap';
import * as wjcOlap from '@mescius/wijmo.olap';
import './app.css';
const ngCube = new wjcOlap.PivotEngine({
// specify the fields to use (no auto-generate)
autoGenerateFields: false,
fields: [{
header: 'Customer Location',
dimensionType: 0,
subFields: [{
binding: '[Customer].[Country]',
header: 'Country',
dataType: 1,
dimensionType: 6
},
{
binding: '[Customer].[State-Province]',
header: 'State-Province',
dataType: 1,
dimensionType: 6
}]
},
{
header: 'Product Information',
dimensionType: 0,
subFields: [{
binding: '[Product].[Product]',
header: 'Product',
dataType: 1,
dimensionType: 6
},
{
binding: '[Product].[Model Name]',
header: 'Model',
dataType: 1,
dimensionType: 6
},
{
binding: '[Product].[Style]',
header: 'Style',
dataType: 1,
dimensionType: 6
},
{
binding: '[Product].[Category]',
header: 'Category',
dataType: 1,
dimensionType: 6
},
{
binding: '[Product].[Product Line]',
header: 'Line',
dataType: 1,
dimensionType: 6
}]
},
{
header: 'Internet Sales',
dimensionType: 0,
subFields: [{
binding: '[Measures].[Internet Sales Amount]',
header: 'Amount',
dataType: 2,
aggregate: 1,
format: 'n0',
dimensionType: 1
},
{
binding: '[Measures].[Internet Order Quantity]',
header: 'Order Quantity',
dataType: 2,
aggregate: 1,
format: 'n0',
dimensionType: 1
},
{
binding: '[Measures].[Internet Extended Amount]',
header: 'Extended Amount',
dataType: 2,
aggregate: 1,
format: 'n0',
dimensionType: 1
},
{
binding: '[Measures].[Internet Freight Cost]',
header: 'Freight Cost',
dataType: 2,
aggregate: 1,
format: 'n0',
dimensionType: 1
},
{
binding: '[Measures].[Internet Total Product Cost]',
header: 'Total Cost',
dataType: 2,
aggregate: 1,
format: 'n0',
dimensionType: 1
},
{
binding: '[Measures].[Internet Gross Profit]',
header: 'Gross Profit',
dataType: 2,
aggregate: 1,
format: 'n0',
dimensionType: 1
},
{
binding: '[Measures].[Internet Gross Profit Margin]',
header: 'Gross Profit Margin',
dataType: 2,
aggregate: 1,
format: 'p2',
dimensionType: 1
}]
}],
// build default view
valueFields: ['[Measures].[Internet Sales Amount]'],
rowFields: ['[Customer].[Country]'],
// connect to cube
itemsSource: {
url: 'https://ssrs.componentone.com/OLAP/msmdpump.dll',
cube: 'Adventure Works'
}
});
function App() {
return (<div className="container-fluid">
<div className="row">
<div className="col-sm-6">
<p>
Drag and drop fields to build views:
</p>
<Olap.PivotPanel itemsSource={ngCube}/>
</div>
<div className="col-sm-6">
<p>
Summary for the current view definition:
</p>
<Olap.PivotGrid itemsSource={ngCube}/>
</div>
</div>
</div>);
}
const container = document.getElementById('app');
if (container) {
const root = ReactDOM.createRoot(container);
root.render(<App />);
}
Feedback
Submit and view feedback for