This guide lists examples of Flexmonster usage in React. They are provided within our sample React project.
Learn more about these examples:
The first example demonstrates how to embed Flexmonster into your project with the FlexmonsterReact.Pivot component. See the source code:
Notice how initialization parameters are specified in FlexmonsterReact.Pivot:
<FlexmonsterReact.Pivot
toolbar={true}
beforetoolbarcreated={toolbar => {
toolbar.showShareReportTab = true;
}}
shareReportConnection={{
url: "https://olap.flexmonster.com:9500"
}}
width="100%"
height={600}
report="https://cdn.flexmonster.com/github/demo-report.json"
/>
Learn more about FlexmonsterReact.Pivot and its parameters: The FlexmonsterReact.Pivot component.
This usage example focuses on Flexmonster events. See the source code:
The example provides a toggle button to subscribe to all the events and unsubscribe from them.
Under the component, there is a log output. When an event is triggered, the output shows info about that event.
To subscribe to an event, we use the on() method:
this.refs.pivot.flexmonster.on(eventName, () => {
// Handle the event
});
this.flexmonster.on(eventName, () => {
// Handle the event
});
To unsubscribe from an event, we use the off() method:
this.refs.pivot.flexmonster.off(eventName);
this.flexmonster.off(eventName);
See the full list of Flexmonster events in our documentation.
The Using API calls section is about interacting with the component through API calls. See the source code:
Use the toggle buttons to enable the read-only mode or switch between the grid and charts.
See how the API calls are used:
showChart = () => {
this.refs.pivot.flexmonster.showCharts("column");
}
showGrid = () => {
this.refs.pivot.flexmonster.showGrid();
}
showChart = () => {
this.flexmonster.showCharts("column");
}
showGrid = () => {
this.flexmonster.showGrid();
}
readOnly = () => {
this.refs.pivot.flexmonster.setOptions({
readOnly: true
});
this.refs.pivot.flexmonster.refresh();
}
readOnly = () => {
this.flexmonster.setOptions({
readOnly: true
});
this.flexmonster.refresh();
}
See the full list of Flexmonster API calls here.
The Updating data section shows how to refresh data at runtime. See the source code:
Each time you click the Update data button, the dataset is updated and loaded to Flexmonster using the updateData() API call:
updateTheData = () => {
this.data = [
// Updated data
];
// Updating the data in Flexmonster
this.refs.pivot.flexmonster.updateData({ data: this.data });
}
updateTheData = () => {
this.data = [
// Updated data
];
// Updating the data in Flexmonster
this.flexmonster.updateData({ data: this.data });
}
The Customizing the Toolbar section contains an example of Toolbar customization. See the source code:
Flexmonster is subscribed to the beforetoolbarcreated event in the render() method:
<FlexmonsterReact.Pivot
ref="pivot"
...
beforetoolbarcreated={this.customizeToolbar}
...
/>
<FlexmonsterReact.Pivot
ref={this.pivotRef}
...
beforetoolbarcreated={this.customizeToolbar}
...
/>
The customizeToolbar() handler is defined as follows:
customizeToolbar = (toolbar) => {
let tabs = toolbar.getTabs();
toolbar.getTabs = () => {
tabs = [];
// Add new tab
tabs.push({
id: "fm-tab-newtab",
title: "New Tab",
handler: () => this.showInfo(),
icon: toolbar.icons.open,
});
return tabs;
};
}
customizeToolbar = (toolbar: Flexmonster.Toolbar) => {
let tabs = toolbar.getTabs();
toolbar.getTabs = () => {
tabs = [];
// Add new tab
tabs.push({
id: "fm-tab-newtab",
title: "New Tab",
handler: () => this.showInfo(),
icon: toolbar.icons.open,
});
return tabs;
};
}
As a result, a new tab with custom functionality is added.
Learn more about customizing the Toolbar.
The Customizing the grid example demonstrates how to highlight a certain measure on the grid using customizeCell. See the source code:
Here is how customizeCell is defined:
<FlexmonsterReact.Pivot
ref="pivot"
...
customizeCell={this.customizeCellFunction}
...
/>
<FlexmonsterReact.Pivot
ref={this.pivotRef}
...
customizeCell={this.customizeCellFunction}
...
/>
The customizeCellFunction() applies custom CSS to the cells with the "Price" measure:
customizeCellFunction = (cell, data) => {
if (data.measure && data.measure.uniqueName === "Price") {
let backgroundColor = "#00A45A";
let textShadowColor = "#095231";
let borderColor = "#009552";
cell.style["background-color"] = backgroundColor;
cell.style["color"] = "white";
cell.style["font-weight"] = "bold";
cell.style["text-shadow"] = `0px 2px 3px ${textShadowColor}`;
cell.style["border-bottom"] = `1px solid ${borderColor}`;
cell.style["border-right"] = `1px solid ${borderColor}`;
}
}
customizeCellFunction = (
cell: Flexmonster.CellBuilder,
data: Flexmonster.CellData
) => {
if (data.measure && data.measure.uniqueName === "Price") {
let backgroundColor = "#00A45A";
let textShadowColor = "#095231";
let borderColor = "#009552";
cell.style = {
...cell.style,
"background-color": backgroundColor,
"color": "white",
"font-weight": "bold",
"text-shadow": `0px 2px 3px ${textShadowColor}`,
"border-bottom": `1px solid ${borderColor}`,
"border-right": `1px solid ${borderColor}`,
};
}
}
Learn more about customizing the grid.
For the React + ES6 sample project, an example of Highcharts integration is available. See it in the With Highcharts section.
Here’s how the Highcharts module and Flexmonster Connector for Highcharts are imported:
import 'flexmonster/lib/flexmonster.highcharts.js'; import Highcharts from 'highcharts';
In the render() method, we add a container for Highcharts and subscribe Flexmonster to the reportcomplete event:
<FlexmonsterReact.Pivot
ref={this.pivotRef}
...
reportcomplete={this.reportComplete}
...
/>
<div className="chart-container">
<div id="highcharts-container"></div>
</div>
Then we define the chart-drawing function and the reportComplete() handler:
reportComplete = () => {
this.myRef.current.flexmonster.off(this.reportComplete);
this.createChart();
}
createChart = () => {
this.myRef.current.flexmonster.highcharts.getData(
// Creating and configuring the chart
);
}
Learn more about integration with Highcharts.
The React + ES6 project contains the With amCharts section, which provides a dashboard with Flexmonster and amCharts 4. See the source code.
Here’s how the amCharts 4 library and Flexmonster Connector for amCharts are imported:
// Importing Flexmonster Connector for amCharts import "flexmonster/lib/flexmonster.amcharts.js"; // amCharts imports import * as am4core from '@amcharts/amcharts4/core'; import * as am4charts from '@amcharts/amcharts4/charts'; import am4themes_animated from '@amcharts/amcharts4/themes/animated';
In the render() method, we add a container for amCharts and subscribe Flexmonster to the reportcomplete event:
<FlexmonsterReact.Pivot
ref={this.myRef}
...
reportcomplete={this.reportComplete}
...
/>
<div className="chart-container">
<div id="amcharts-container" style={{ width: "100%", height: "500px" }}></div>
</div>
Then we define the reportComplete() handler and chart-drawing functions:
reportComplete = () => {
this.myRef.current.flexmonster.off(this.reportComplete);
this.drawChart();
}
drawChart() {
// Running Flexmonster's getData method for amCharts
this.myRef.current.flexmonster.amcharts.getData(
{},
this.createChart.bind(this),
this.updateChart.bind(this)
);
}
createChart(chartData, rawData) {
// Creating and configuring the chart
}
updateChart(chartData, rawData) {
// Updating the chart
}
Learn more about integration with amCharts.