This guide lists examples of Flexmonster usage in Vue 3. They are provided within our sample Vue 3 project.
Learn more about these examples:
Note In most examples, Flexmonster is added to a Vue component using Options API. For an example of embedding Flexmonster using Composition API, see this example: Interacting with Flexmonster when using Composition API.
The first example demonstrates how to embed Flexmonster into your project with the <Pivot> component. See the source code:
Notice how initialization parameters are specified in <Pivot>:
<Pivot
toolbar
height="600"
report="https://cdn.flexmonster.com/github/demo-report.json"
v-bind:shareReportConnection="{
url: 'https://olap.flexmonster.com:9500',
}"
v-bind:beforetoolbarcreated="customizeToolbar"
/>
Learn more about <Pivot> and its parameters: The <Pivot> component.
This example shows how to embed Flexmonster in a Vue 3 project using Composition API. See the source code:
Check out the <script> section for an example of interaction with Flexmonster in Composition API:
<script setup>
import { ref } from 'vue';
let pivot = ref(null);
function customizeToolbar(toolbar){
toolbar.showShareReportTab = true;
}
function reportCompleteHandler(){
let report = pivot.value.flexmonster.getReport();
console.log("Flexmonster report configuration >> ", report);
}
</script>
<script setup lang="ts">
import Pivot from "vue-flexmonster/vue3";
import { Ref, ref } from 'vue';
interface FlexmonsterPivot {
flexmonster: Flexmonster.Pivot;
}
let pivot: Ref<FlexmonsterPivot | null> = ref(null);
function customizeToolbar(toolbar: Flexmonster.Toolbar) : void {
toolbar.showShareReportTab = true;
}
function reportCompleteHandler() : void {
let report = pivot.value?.flexmonster.getReport();
console.log("Flexmonster report configuration >> ", report);
}
</script>
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.
Event handling is implemented in the <script> section. To subscribe to an event, we use the on() method:
this.$refs.pivot.flexmonster.on(eventName, () => {
// Handle the event
});
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).on(eventName, () => {
// Handle the event
});
To unsubscribe from an event, we use the off() method:
this.$refs.pivot.flexmonster.off(eventName);
((this.$refs.pivot as typeof Pivot) .flexmonster as Flexmonster.Pivot).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.
Check out the <script> section to see how the API calls are used:
showChart: function () {
this.$refs.pivot.flexmonster.showCharts("column");
},
showGrid: function () {
this.$refs.pivot.flexmonster.showGrid();
}
showChart(): void {
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).showCharts("column");
},
showGrid(): void {
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).showGrid();
}
readOnly: function () {
this.$refs.pivot.flexmonster.setOptions({
readOnly: true
});
this.$refs.pivot.flexmonster.refresh();
}
readOnly(): void {
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).setOptions({
readOnly: true,
});
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).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: function () {
this.data = [
// Updated data
];
// Updating the data in Flexmonster
this.$refs.pivot.flexmonster.updateData({ data: this.data });
}
updateTheData(): void {
this.data = [
// Updated data
];
// Updating the data in Flexmonster
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).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 <template> section:
<Pivot ref="pivot" ... v-bind:beforetoolbarcreated="customizeToolbar" ... />
The customizeToolbar() handler is defined as follows:
customizeToolbar: function (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): void {
let tabs: Flexmonster.ToolbarTab[] = 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:
Check out the <template> section to see how customizeCell is defined:
<Pivot ref="pivot" ... v-bind:customizeCell="customizeCellFunction" ... />
The customizeCellFunction() is defined in the <script> section. This function applies custom CSS to the cells with the "Price" measure:
customizeCellFunction: function (cell, data) {
if (data.measure && data.measure.name == "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
): void {
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.
See an example of Highcharts integration in the With Highcharts section:
In the <template> section, we add a container for Highcharts and subscribe Flexmonster to the reportcomplete event:
<Pivot ref="pivot" ... v-bind:reportcomplete="reportComplete" ... /> <div class="chart-container"> <div id="highcharts-container"></div> </div>
The Highcharts module and Flexmonster Connector for Highcharts are imported in the <script> section:
// Importing Highcharts import Highcharts from 'highcharts'; // Importing Flexmonster Connector for Highcharts import "flexmonster/lib/flexmonster.highcharts.js";
The <script> section also contains the chart-drawing function and the reportComplete() handler:
drawChart: function () {
this.$refs.pivot.flexmonster.highcharts.getData(
// Creating and configuring the chart
);
},
reportComplete: function () {
this.$refs.pivot.flexmonster.off("reportcomplete");
this.drawChart();
}
drawChart(): void {
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).highcharts?.getData(
// Creating and configuring the chart
);
},
reportComplete(): void {
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).off("reportcomplete");
this.drawChart();
}
Learn more about integration with Highcharts.
Our sample project contains examples of integration with amCharts 5 and amCharts 4.
The With amCharts section provides a dashboard with Flexmonster and amCharts 5. See the source code:
In the <template> section, we add a container for amCharts and subscribe Flexmonster to the reportcomplete event:
<Pivot ref="pivot" ... v-bind:reportcomplete="reportComplete" ... /> <div class="chart-container"> <div id="amcharts-container" style="width: 100%; height: 500px;"></div> </div>
The amCharts 5 library and Flexmonster Connector for amCharts are imported in the <script> section:
// Importing amCharts import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; // Importing Flexmonster Connector for amCharts import "flexmonster/lib/flexmonster.amcharts.js";
The <script> section also contains the reportComplete() handler and chart-drawing functions:
reportComplete: function () {
this.$refs.pivot.flexmonster.off("reportcomplete");
this.drawChart();
},
drawChart: function () {
// Running Flexmonster's getData method for amCharts
this.$refs.pivot.flexmonster.amcharts.getData(
{},
this.createChart.bind(this),
this.updateChart.bind(this)
);
},
createChart: function (chartData, rawData) {
// Creating and configuring the chart
},
updateChart: function (chartData, rawData) {
// Updating the chart
}
reportComplete(): void {
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).off("reportcomplete");
this.drawChart();
},
drawChart(): void {
// Running Flexmonster's getData method for amCharts
((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot).amcharts?.getData(
{},
this.createChart.bind(this),
this.updateChart.bind(this)
);
},
createChart(
chartData: Flexmonster.GetDataValueObject,
rawData: Flexmonster.GetDataValueObject
): void {
// Creating and configuring the chart
},
updateChart(
chartData: Flexmonster.GetDataValueObject,
rawData: Flexmonster.GetDataValueObject
): void {
// Updating the chart
}
Learn more about integration with amCharts.
The example with amCharts 4 is hidden from the project's side menu, but you can still access it via a direct link: http://localhost:5173/with-amcharts4 (the project's port can be different).
Here is the example's source code:
It is very similar to the code of the amCharts 5 example:
<template> section, we add a container for amCharts and subscribe to the reportcomplete event.<script> section, we:reportcomplete event's handler and chart-drawing functions.Learn more about integration with amCharts.