OLAP Data Source
Documentation
The PivotGrid supports OLAP services (MS SQL Server Analysis Services). This allows you to deliver solutions that can easily analyze millions of data rows within your app. In this demo, the PivotGrid uses XmlaStore to connect the widget to a sample remote OLAP service. The Field Chooser is configured to show the search box to speed up choosing the required field.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import PivotGrid, {
FieldChooser,
Export
} from 'devextreme-react/pivot-grid';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
class App extends React.Component {
render() {
return (
<React.Fragment>
<div className={'long-title'}>
<h3>Sales Statistics</h3>
</div>
<PivotGrid
dataSource={dataSource}
allowSortingBySummary={true}
allowSorting={true}
allowFiltering={true}
allowExpandAll={true}
height={570}
showBorders={true}
>
<Export enabled={true} fileName={'Adventure Works'} />
<FieldChooser enabled={true} allowSearch={true} />
</PivotGrid>
</React.Fragment>
);
}
}
const dataSource = new PivotGridDataSource({
fields: [
{ dataField: '[Product].[Category]', area: 'row' },
{
dataField: '[Product].[Subcategory]',
area: 'row',
headerFilter: {
allowSearch: true
}
},
{ dataField: '[Ship Date].[Calendar Year]', area: 'column' },
{ dataField: '[Ship Date].[Month of Year]', area: 'column' },
{ dataField: '[Measures].[Customer Count]', area: 'data' }
],
store: new XmlaStore({
type: 'xmla',
url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
catalog: 'Adventure Works DW Standard Edition',
cube: 'Adventure Works'
})
});
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app')
);
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.long-title h3 {
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16/umd/react.development.js',
'react-dom': 'npm:react-dom@16/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'devextreme': 'npm:devextreme@19.1',
'devextreme-react': 'npm:devextreme-react@19.1',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
packages: {
'devextreme': {
defaultExtension: 'js'
},
'devextreme-react': {
main: 'index.js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});