Usage examples

This guide lists examples of Flexmonster usage in Next.js. They are provided within our sample Next.js project.

Creating the pivot table

The first example demonstrates how to embed Flexmonster into your project with the FlexmonsterReact.Pivot component.

Notice how Flexmonster's initialization parameters are specified:

<ForwardRefPivot
  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"
/>

The ForwardRefPivot is an auxiliary component for getting a ref to the Flexmonster instance.

Handling events

This usage example focuses on Flexmonster events. It 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:

pivotRef.current?.flexmonster.on(eventName, () => {
  // Handle the event
});

To unsubscribe from an event, we use the off() method:

pivotRef.current?.flexmonster.off(eventName);

See the full list of Flexmonster events in our documentation.

Learn more about using Flexmonster events in Next.js.

Using API calls

The Using API calls section is about interacting with the component through API calls. Use the toggle buttons to enable the read-only mode or switch between the grid and charts.

See how the API calls are used:

• The showGrid() and showCharts() methods allow switching between the views:
  

  const showChart = () => {
    pivotRef.current?.flexmonster.showCharts("column");
  }
  
  const showGrid = () => {
    pivotRef.current?.flexmonster.showGrid();
  }
  

• The setOptions() API call is used to make Flexmonster read-only:
  

  const readOnly = () => {
    pivotRef.current?.flexmonster.setOptions({
      readOnly: true
    });
    pivotRef.current?.flexmonster.refresh();
  }
  

See the full list of Flexmonster API calls.

Learn more about using Flexmonster methods in Next.js.

Updating data

The Updating data section shows how to refresh data at runtime.

Each time you click the Update data button, the dataset is updated and loaded to Flexmonster using the updateData() API call:

const updateTheData = () => {
  data = [
    // Updated data
  ];
  // Updating the data in Flexmonster
  pivotRef.current?.flexmonster.updateData({ data: data });
}

Learn more about using Flexmonster methods in Next.js.

Customizing the Toolbar

The Customizing the Toolbar section contains an example of Toolbar customization.

Flexmonster is subscribed to the beforetoolbarcreated event during initialization:

<ForwardRefPivot
 ref={pivotRef}
 ...
 beforetoolbarcreated={customizeToolbar}
 ...
/>

The ForwardRefPivot is an auxiliary component for getting a ref to the Flexmonster instance.

The customizeToolbar() handler is defined as follows:

const customizeToolbar = (toolbar: Flexmonster.Toolbar) => {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = () => {
    tabs = [];
    // Add new tab
    tabs.push({
      id: "fm-tab-newtab",
      title: "New Tab",
      handler: () => showInfo(),
      icon: toolbar.icons.open,
    });
    return tabs;
  };
}

As a result, a new tab with custom functionality is added.

Learn more about customizing the Toolbar.

Customizing the grid

The Customizing the grid example demonstrates how to highlight a certain measure on the grid using customizeCell.

Here is how customizeCell is defined:

<ForwardRefPivot
 ref={pivotRef}
 ...
 customizeCell={customizeCellFunction}
 ...
/>

The ForwardRefPivot is an auxiliary component for getting a ref to the Flexmonster instance.

The customizeCellFunction() applies custom CSS to the cells with the "Price" measure:

const 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.

Integrating with Highcharts

See an example of Highcharts integration in the With Highcharts section.

First, we import:

• Flexmonster Connector for Highcharts into the PivotWrapper component:

  import "flexmonster/lib/flexmonster.highcharts.js";

  The PivotWrapper is a wrapper for FlexmonsterReact.Pivot. See how the PivotWrapper is created when embedding Flexmonster into a Next.js app.
• The Highcharts module into the app/with-highcharts/page.tsx:

  import * as Highcharts from "highcharts";

In the app/with-highcharts/page.tsx, we then add a container for Highcharts and subscribe Flexmonster to the reportcomplete event:

<ForwardRefPivot
 ref={pivotRef}
 ...
 reportcomplete={reportComplete}
 ...
/>
<div className="chart-container">
  <div id="highcharts-container"></div>
</div>

The ForwardRefPivot is an auxiliary component for getting a ref to the Flexmonster instance.

Lastly, we define the chart-drawing function and the reportComplete() handler:

const reportComplete = () => {
  pivotRef.current!.flexmonster.off(reportComplete);
  createChart();
}

const createChart = () => {
  pivotRef.current!.flexmonster.highcharts?.getData(
    // Creating and configuring the chart
  );
}

Learn more about integration with Highcharts.

Integrating with amCharts

Our sample project contains examples of integration with amCharts 5 and amCharts 4:

<ForwardRefPivot
 ref={pivotRef}
 ...
 reportcomplete={reportComplete}
 ...
/>
<div className="chart-container">
  <div id="amcharts-container" style={{ width: "100%", height: "500px" }}></div>
</div>

const reportComplete = () => {
  pivotRef.current!.flexmonster.off("reportComplete", reportComplete);
  drawChart();
}

const drawChart = () => {
  //Running Flexmonster's getData method for amCharts
  pivotRef.current!.flexmonster.amcharts?.getData(
    {},
    createChart,
    updateChart
  );
}

const createChart = (
  chartData: Flexmonster.GetDataValueObject,
  rawData: Flexmonster.GetDataValueObject
) => {
  // Creating and configuring the chart
}

const updateChart = (
  chartData: Flexmonster.GetDataValueObject,
  rawData: Flexmonster.GetDataValueObject
) => {
  // Updating the chart
}

Learn more about integration with amCharts.

See also

• Integration with Next.js
• Using methods and events
• About the FlexmonsterReact.Pivot component