/
page.tsx
76 lines (67 loc) · 2.85 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// Must be a client component because we pass function in the beforetoolbarcreated param
"use client"
import * as React from "react";
// Types are static, so we can safely import it for use in references
import type { Pivot } from "react-flexmonster";
import dynamic from "next/dynamic";
// Wrapper must be imported dynamically, since it contains Flexmonster pivot
const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
ssr: false,
loading: () => <h1>Loading Flexmonster...</h1>
});
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
<PivotWrap {...props} pivotRef={ref} />
)
import * as Highcharts from 'highcharts';
export default function WithHighcharts() {
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
const reportComplete = () => {
pivotRef.current!.flexmonster.off("reportComplete", reportComplete);
//creating charts after Flexmonster instance is launched
createChart();
}
const createChart = () => {
//Running Flexmonster's getData method for Highcharts
pivotRef.current!.flexmonster.highcharts?.getData(
{
type: "spline"
},
(data: any) => {
Highcharts.chart('highcharts-container', data);
},
(data: any) => {
Highcharts.chart('highcharts-container', data);
}
);
}
return (
<div className="App">
<h1 className="page-title">Integrating with Highcharts</h1>
<div className="description-blocks first-description-block">
<p>Integrate Flexmonster with Highcharts and see your data from a new
perspective: <a href="https://www.flexmonster.com/doc/integration-with-highcharts/?r=rm_react" target="_blank" rel="noopener noreferrer" className="title-link">Integration with Highcharts</a>.
</p>
</div>
<ForwardRefPivot
ref={pivotRef}
toolbar={true}
beforetoolbarcreated={toolbar => {
toolbar.showShareReportTab = true;
}}
shareReportConnection={{
url: "https://olap.flexmonster.com:9500"
}}
width="100%"
height={600}
report="https://cdn.flexmonster.com/github/highcharts-report.json"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
reportcomplete={reportComplete}
//licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
/>
<div className="chart-container">
<div id="highcharts-container"></div>
</div>
</div>
);
}