Microsoft OLAP 큐브 (Vue)
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
이 데모는 Vue를 기반으로합니다.
app.vue
index.html
<template>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>
Drag and drop fields to build views:
</p>
<wj-pivot-panel :items-source="ngCube"></wj-pivot-panel>
</div>
<div class="col-sm-6">
<p>
Summary for the current view definition:
</p>
<wj-pivot-grid :items-source="ngCube"></wj-pivot-grid>
</div>
</div>
</div>
</template>
<script setup>
import "@mescius/wijmo.touch";
import * as wjcOlap from "@mescius/wijmo.olap";
import { ref } from "vue";
const ngCube = ref(
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",
},
}),
);
</script>
<style>
.wj-flexgrid {
max-height: 400px;
}
body {
margin-bottom: 24pt;
}
</style>