Microsoft OLAP 큐브 (React)
PivotEngine은 URL을 통해 Microsoft SSAS OLAP 큐브에 직접 연결할 수 있습니다. 이 샘플은 "AdventureWorks" OLAP 큐브에 연결하고 로드할 필드를 지정합니다. 필드를 지정하면 로드 시간이 향상되며, 더 간편하게 PivotPanel을 탐색하고 사용할 수 있습니다. PivotPanel을 사용하여 뷰를 만들고, PivotGrid를 사용하여 결과를 표시할 수 있습니다.
블로그: Connect directly to Microsoft SSAS Cubes with Wijmo OLAP(Wijmo OLAP를 사용하여 Microsoft SSAS 큐브에 직접 연결)
OLAP 알아보기 | PivotEngine API Reference
이 데모는 React를 기반으로합니다.
app.jsx
index.html
app.css
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 />);
}