/
page.tsx
161 lines (145 loc) · 5.27 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
// Must be a client component because we pass function in the beforetoolbarcreated param
"use client"
import * as React from "react";
import LogsList from "@/UIElements/LogsList";
import ToggleButton from "@/UIElements/ToggleButton";
// 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}/>
)
export default function HandlingEvents() {
// Managing state for functional components
const [logs, setLogs] = React.useState<{
date: Date,
event: string
}[]>([]);
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
// Hook that fires every re-render on the client
React.useEffect(() => {
const logsContainer = document.querySelector(".event-logs-wrapper .content");
if (logsContainer) {
logsContainer.scrollTop = logsContainer.scrollHeight;
}
// logs is passed here so we can subscribe to its changes
}, [logs])
//the list of all supported events
const eventList = [
"afterchartdraw",
"aftergriddraw",
"beforegriddraw",
"beforetoolbarcreated",
"cellclick",
"celldoubleclick",
"chartclick",
"datachanged",
"dataerror",
"datafilecancelled",
"dataloaded",
"drillthroughclose",
"drillthroughopen",
"exportcomplete",
"exportstart",
"fieldslistclose",
"fieldslistopen",
"filterclose",
"filteropen",
"loadingdata",
"loadinglocalization",
"loadingolapstructure",
"loadingreportfile",
"localizationerror",
"localizationloaded",
"olapstructureerror",
"olapstructureloaded",
"openingreportfile",
"printcomplete",
"printstart",
"querycomplete",
"queryerror",
"ready",
"reportchange",
"reportcomplete",
"reportfilecancelled",
"reportfileerror",
"runningquery",
"update",
];
const printLog = (event: string) => {
logs.push({
date: new Date(),
event: event
});
// This will fire a state change
setLogs([...logs]);
}
const eventsSignerController = (isSigned: boolean) => {
isSigned ? signOnAllEvents() : signOffAllEvents();
}
const signOffAllEvents = () => {
for (const eventName of eventList) {
// remove all handlers for specified event
pivotRef.current?.flexmonster.off(eventName);
}
}
const signOnAllEvents = () => {
for (const eventName of eventList) {
// add handler for specified event
pivotRef.current?.flexmonster.on(eventName, () => {
printLog(eventName);
});
}
}
const clearLogs = () => {
// This will fire a state change
setLogs((_) => [])
}
return (
<>
<h3 className="title-one page-title">Handling Flexmonster events</h3>
<div className="description-blocks first-description-block">
<p>
Perform an action (for example, click on a grid cell) to trigger a <a className="title-link" target="blank" rel="noopener noreferrer"
href="https://www.flexmonster.com/api/events/?r=rm_react">Flexmonster event</a>
. Scroll down to the log output to see which events get triggered.
</p>
</div>
<div className="description-blocks">
<ToggleButton id="eventsToggle" triggerFunction={eventsSignerController} labelChecked="Events are tracked" labelUnChecked="Events are not tracked" />
</div>
<div>
<ForwardRefPivot
ref={pivotRef}
toolbar={true}
// Can't be serialized, so this must be a client component
beforetoolbarcreated={toolbar => {
toolbar.showShareReportTab = true;
}}
shareReportConnection={{
url: "https://olap.flexmonster.com:9500"
}}
width="100%"
height={600}
ready={signOnAllEvents}
report="https://cdn.flexmonster.com/github/demo-report.json"
//licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
/>
</div>
<div className="section">
<LogsList title="Log Output" logsList={logs} />
<div className="section--button">
<button className="button-red" onClick={clearLogs}>
Clear Log Output
</button>
</div>
</div>
</>
);
}