@insync-stageplayer/plotly-chart 0.5.31 → 0.5.35-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/lib/PlotlyGraph/EventMenu.d.ts +13 -0
  2. package/lib/PlotlyGraph/EventMenu.d.ts.map +1 -0
  3. package/lib/PlotlyGraph/EventMenu.js +84 -0
  4. package/lib/PlotlyGraph/EventMenu.js.map +1 -0
  5. package/lib/PlotlyGraph/MarkerTracks.d.ts +17 -0
  6. package/lib/PlotlyGraph/MarkerTracks.d.ts.map +1 -0
  7. package/lib/PlotlyGraph/MarkerTracks.js +249 -0
  8. package/lib/PlotlyGraph/MarkerTracks.js.map +1 -0
  9. package/lib/PlotlyGraph/PlotlyLiveview.d.ts +4 -4
  10. package/lib/PlotlyGraph/PlotlyLiveview.js +297 -297
  11. package/lib/PlotlyGraph/PlotlyPlayback.d.ts +4 -4
  12. package/lib/PlotlyGraph/PlotlyPlayback.d.ts.map +1 -1
  13. package/lib/PlotlyGraph/PlotlyPlayback.js +531 -317
  14. package/lib/PlotlyGraph/PlotlyPlayback.js.map +1 -1
  15. package/lib/PlotlyGraph/PlotlyPlaybackOverlay.d.ts +23 -0
  16. package/lib/PlotlyGraph/PlotlyPlaybackOverlay.d.ts.map +1 -0
  17. package/lib/PlotlyGraph/PlotlyPlaybackOverlay.js +188 -0
  18. package/lib/PlotlyGraph/PlotlyPlaybackOverlay.js.map +1 -0
  19. package/lib/PlotlyGraph/index.d.ts +2 -2
  20. package/lib/PlotlyGraph/index.d.ts.map +1 -1
  21. package/lib/PlotlyGraph/index.js +2 -2
  22. package/lib/PlotlyGraph/index.js.map +1 -1
  23. package/lib/index.d.ts +1 -1
  24. package/lib/index.js +1 -1
  25. package/package.json +5 -3
  26. package/lib/Plotly.d.ts +0 -5
  27. package/lib/Plotly.d.ts.map +0 -1
  28. package/lib/Plotly.js +0 -338
  29. package/lib/Plotly.js.map +0 -1
  30. package/lib/PlotlyGraph/Plotly.d.ts +0 -5
  31. package/lib/PlotlyGraph/Plotly.d.ts.map +0 -1
  32. package/lib/PlotlyGraph/Plotly.js +0 -347
  33. package/lib/PlotlyGraph/Plotly.js.map +0 -1
  34. package/lib/PlotlyLiveview.d.ts +0 -5
  35. package/lib/PlotlyLiveview.d.ts.map +0 -1
  36. package/lib/PlotlyLiveview.js +0 -310
  37. package/lib/PlotlyLiveview.js.map +0 -1
@@ -1,347 +0,0 @@
1
- import React, { useCallback, useEffect, useState } from "react";
2
- import Plot from "react-plotly.js";
3
- import PropTypes from "prop-types";
4
- import { withResizeDetector } from "react-resize-detector";
5
- import { useTheme as useSelectedTheme, styled, } from "@insync-stageplayer/ui-components";
6
- const normalizeRange = 1000;
7
- const convertMicrosecondstoDateFormat = (inputMicroseconds) => {
8
- let convertedDate = new Date(+inputMicroseconds / 1000);
9
- return adjustWithLocalTimeZone(convertedDate);
10
- };
11
- const adjustWithLocalTimeZone = (date) => {
12
- let adjustedDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
13
- return adjustedDate;
14
- };
15
- const convertDateToMicroseconds = (inputDate) => {
16
- const convertIntoDate = new Date(inputDate);
17
- return (convertIntoDate.getTime() * 1000 -
18
- convertIntoDate.getTimezoneOffset() * 60 * 1000 * 1000);
19
- };
20
- const getMicroSecondStartAndLength = (originalFromDate, originalStopDate) => {
21
- const start = convertDateToMicroseconds(originalFromDate);
22
- const end = convertDateToMicroseconds(originalStopDate);
23
- const length = end - start;
24
- return [start, length];
25
- };
26
- // update some cursors to be more clear
27
- const StyledPlotly = styled(Plot) `
28
- rect.nsewdrag.cursor-ew-resize {
29
- cursor: zoom-in;
30
- }
31
- rect.ewdrag.cursor-ew-resize {
32
- cursor: grab;
33
- }
34
- `;
35
- export const PlotlyReply = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, isLivePanel, totalTime, }) => {
36
- var _a;
37
- const [plotData, setPlotData] = useState([]);
38
- const [nowLine, setNowline] = useState(isLivePanel ? 1 : (_a = sessionStorage.getItem("nl")) !== null && _a !== void 0 ? _a : 0);
39
- const [layout, setLayout] = useState(null);
40
- const selectedTheme = useSelectedTheme();
41
- const [yAxisLabelLeft, setYAxisLabelLeft] = useState("");
42
- const [yAxisLabelRight, setYAxisLabelRight] = useState("");
43
- const updateLayout = useCallback(() => {
44
- let annotations = [
45
- {
46
- xref: "paper",
47
- yref: "paper",
48
- x: nowLine,
49
- xanchor: "right",
50
- y: 1,
51
- yanchor: "bottom",
52
- text: "",
53
- showarrow: displayArrow,
54
- arrowhead: 0,
55
- ax: 0,
56
- ay: 1000,
57
- arrowcolor: "red",
58
- },
59
- ];
60
- const convertXRangeFrom = xScaleTickFormat.includes(":")
61
- ? convertMicrosecondstoDateFormat(xRange.from > 0
62
- ? xRange.length === totalTime
63
- ? 0
64
- : xRange.from + xRange.length > totalTime
65
- ? totalTime - xRange.length
66
- : xRange.from
67
- : 0)
68
- : xRange.from / 1e6;
69
- const convertXRangeTo = xScaleTickFormat.includes(":")
70
- ? convertMicrosecondstoDateFormat(xRange.from > 0
71
- ? xRange.length === totalTime
72
- ? xRange.length
73
- : xRange.from + xRange.length > totalTime
74
- ? totalTime
75
- : xRange.from + xRange.length
76
- : xRange.length)
77
- : (xRange.from + xRange.length) / 1e6;
78
- let defaultLayout = {
79
- // this hovermode setting creates a hover-over legend for all the signals at the same time. It also adds a spike line
80
- hovermode: "x unified",
81
- yaxis: {
82
- fixedrange: true,
83
- rangemode: isLivePanel ? "tozero" : "",
84
- hoverformat: ".2f",
85
- range: [],
86
- title: yAxisLabelLeft,
87
- showline: true,
88
- showticklabels: isLivePanel ? false : true,
89
- linewidth: 2,
90
- linecolor: selectedTheme.colors.accent,
91
- tickformat: null,
92
- },
93
- xaxis: {
94
- rangemode: isLivePanel ? "tozero" : "",
95
- showline: isLivePanel ? true : false,
96
- linewidth: 2,
97
- linecolor: selectedTheme.colors.accent,
98
- fixedrange: isLivePanel ? true : false,
99
- range: [convertXRangeFrom, convertXRangeTo],
100
- tickformat: xScaleTickFormat.includes(":") ? "%H:%M:%S" : null,
101
- },
102
- showlegend: false,
103
- autosize: true,
104
- margin: { l: 25, r: 10, t: 20, b: 20 },
105
- paper_bgcolor: selectedTheme.colors.background,
106
- plot_bgcolor: selectedTheme.colors.background,
107
- font: { color: selectedTheme.colors.foreground },
108
- };
109
- // Check if a second y-axis needs to be added
110
- if (displaySecondYAxis && metadata.length == 2) {
111
- const yAxis2 = {
112
- fixedrange: true,
113
- title: yAxisLabelRight,
114
- anchor: "x",
115
- overlaying: "y",
116
- side: "right",
117
- };
118
- defaultLayout = Object.assign(Object.assign({}, defaultLayout), { yaxis2: yAxis2 });
119
- }
120
- // when scrubbing plotly is in charge, this to prevent the xRange to update and mess while
121
- // still scrubbing in plotly
122
- if (!scrubbing) {
123
- setLayout(Object.assign(Object.assign({}, defaultLayout), { annotations }));
124
- }
125
- }, [
126
- selectedTheme,
127
- xRange,
128
- xScaleTickFormat,
129
- yAxisLabelLeft,
130
- yAxisLabelRight,
131
- displaySecondYAxis,
132
- displayArrow,
133
- scrubbing,
134
- metadata,
135
- nowLine,
136
- ]);
137
- const onRelayout = (e) => {
138
- if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
139
- let selection;
140
- if (xScaleTickFormat.includes(":")) {
141
- const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"]);
142
- selection = {
143
- from: from,
144
- length: length,
145
- };
146
- }
147
- else {
148
- selection = {
149
- from: e["xaxis.range[0]"] * 1e6,
150
- length: (e["xaxis.range[1]"] - e["xaxis.range[0]"]) * 1e6,
151
- };
152
- }
153
- onStopSelect({ selection });
154
- }
155
- };
156
- const onRelayouting = (e) => {
157
- if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
158
- let seekTime;
159
- if (xScaleTickFormat.includes(":")) {
160
- const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"]);
161
- seekTime = (length / 2 + from) * 1e6;
162
- }
163
- else {
164
- seekTime =
165
- ((e["xaxis.range[1]"] - e["xaxis.range[0]"]) / 2 +
166
- e["xaxis.range[0]"]) *
167
- 1e6;
168
- }
169
- onDrag(seekTime);
170
- }
171
- };
172
- useEffect(() => {
173
- updateLayout();
174
- const plotDataArr = [];
175
- data.forEach((signal, idx) => {
176
- const x = signal.map((item) => {
177
- if (xScaleTickFormat.includes(":")) {
178
- const xDateFormatted = convertMicrosecondstoDateFormat(+item.x);
179
- return xDateFormatted;
180
- }
181
- else {
182
- const xDateFormatted = +item.x / 1e6;
183
- return xDateFormatted;
184
- }
185
- });
186
- const y = signal.map((item) => {
187
- return item.y;
188
- });
189
- const signalData = {
190
- x,
191
- y,
192
- type: "scattergl",
193
- mode: metadata[idx].frequency * (xRange.length / 1000 / 1000) > 250
194
- ? "lines"
195
- : "lines+markers",
196
- name: metadata[idx].name,
197
- marker: {
198
- color: metadata[idx].color,
199
- size: 5,
200
- line: {
201
- color: metadata[idx].color,
202
- width: 1,
203
- },
204
- },
205
- };
206
- plotDataArr.push(signalData);
207
- });
208
- // Check if a second y-axis needs to be added
209
- if (displaySecondYAxis && metadata.length == 2) {
210
- plotDataArr[1] = Object.assign(Object.assign({}, plotDataArr[1]), { yaxis: "y2" });
211
- }
212
- // Setting y-axis labels if needed and meeting the requirements
213
- if (metadata.length == 1) {
214
- setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
215
- }
216
- else if (metadata.length == 2 && displaySecondYAxis) {
217
- setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
218
- setYAxisLabelRight(yAxisLabel ? metadata[1].name : "");
219
- }
220
- else {
221
- setYAxisLabelLeft("");
222
- setYAxisLabelRight("");
223
- }
224
- setPlotData(plotDataArr);
225
- }, [
226
- data,
227
- metadata,
228
- updateLayout,
229
- xScaleTickFormat,
230
- xRange,
231
- scrubbing,
232
- yAxisLabel,
233
- displaySecondYAxis,
234
- ]);
235
- useEffect(() => {
236
- if (xRange.from < 0) {
237
- let d = (xRange.length / 2 + xRange.from) / xRange.length;
238
- setNowline(d);
239
- }
240
- else {
241
- if (!isLivePanel) {
242
- if (xRange.length === totalTime) {
243
- setNowline(0.5 + xRange.from / totalTime);
244
- }
245
- else if (xRange.from + xRange.length > totalTime) {
246
- setNowline(0.5 + (xRange.from - (totalTime - xRange.length)) / xRange.length);
247
- }
248
- else {
249
- setNowline(0.5);
250
- }
251
- }
252
- else {
253
- setNowline(1);
254
- }
255
- }
256
- isLivePanel
257
- ? sessionStorage.removeItem("nl")
258
- : sessionStorage.setItem("nl", nowLine);
259
- }, [plotData, xRange]);
260
- const shouldNormalize = React.useMemo(() => {
261
- const units = metadata.reduce((acc, curr) => {
262
- if (curr != undefined && acc.indexOf(curr === null || curr === void 0 ? void 0 : curr.unit) < 0) {
263
- return [...acc, curr.unit];
264
- }
265
- return acc;
266
- }, []);
267
- return units.length > 1;
268
- }, [metadata]);
269
- const normalized = React.useMemo(() => {
270
- if (plotData.length <= 0)
271
- return;
272
- if (shouldNormalize) {
273
- const newLinesData = plotData.map((item, i) => {
274
- const line = metadata[i];
275
- const { min, max } = line;
276
- const lineRange = max - min;
277
- return Object.assign(Object.assign({}, item), { y: item.y.map((value) => {
278
- return (value - min) / lineRange;
279
- }) });
280
- });
281
- return newLinesData;
282
- }
283
- return plotData;
284
- }, [shouldNormalize, plotData, metadata]);
285
- return (
286
- // <StyledPlotly
287
- // useResizeHandler
288
- // className="plot-div"
289
- // data={normalized}
290
- // layout={layout}
291
- // style={{ width: "100%", height: "100%" }}
292
- // config={{
293
- // displaylogo: false,
294
- // displayModeBar: false,
295
- // responsive: true,
296
- // }}
297
- // onRelayout={(e) => onRelayout(e)}
298
- // onRelayouting={(e) => onRelayouting(e)}
299
- // />
300
- React.createElement(React.Fragment, null));
301
- });
302
- PlotlyReply.defaultProps = {
303
- xRange: null,
304
- data: [],
305
- metadata: [],
306
- onStopSelect: () => { },
307
- onDrag: () => { },
308
- xScaleTickFormat: "SS",
309
- scrubbing: false,
310
- yAxisLabel: false,
311
- displaySecondYAxis: false,
312
- displayArrow: true,
313
- selectedTheme: null,
314
- isLivePanel: false,
315
- totalTime: null,
316
- };
317
- const dataElement = PropTypes.shape({
318
- x: PropTypes.number,
319
- y: PropTypes.number,
320
- });
321
- const metadataElement = PropTypes.shape({
322
- name: PropTypes.string,
323
- color: PropTypes.string,
324
- });
325
- PlotlyReply.propTypes = {
326
- xRange: PropTypes.shape({
327
- from: PropTypes.number,
328
- length: PropTypes.number,
329
- }),
330
- data: PropTypes.arrayOf(PropTypes.arrayOf(dataElement), PropTypes.arrayOf(dataElement)),
331
- metadata: PropTypes.arrayOf(metadataElement),
332
- onStopSelect: PropTypes.func,
333
- onDrag: PropTypes.func,
334
- xScaleTickFormat: PropTypes.string,
335
- scrubbing: PropTypes.bool,
336
- yAxisLabel: PropTypes.bool,
337
- isLivePanel: PropTypes.bool,
338
- displaySecondYAxis: PropTypes.bool,
339
- displayArrow: PropTypes.bool,
340
- selectedTheme: PropTypes.shape({
341
- colors: PropTypes.shape({
342
- background: PropTypes.string,
343
- }),
344
- }),
345
- totalTime: PropTypes.number,
346
- };
347
- //# sourceMappingURL=Plotly.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Plotly.js","sourceRoot":"","sources":["../../src/PlotlyGraph/Plotly.js"],"names":[],"mappings":"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"}
@@ -1,5 +0,0 @@
1
- export const PlotlyChart: React.ForwardRefExoticComponent<Pick<Omit<Omit<Omit<any, "targetRef"> & {
2
- targetRef?: any;
3
- }, "width">, "height">, string | number | symbol> & React.RefAttributes<HTMLElement>>;
4
- import React from "react";
5
- //# sourceMappingURL=PlotlyLiveview.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PlotlyLiveview.d.ts","sourceRoot":"","sources":["../src/PlotlyLiveview.js"],"names":[],"mappings":"AAiDA;;sFAyRE"}
@@ -1,310 +0,0 @@
1
- import React, { useCallback, useEffect, useState } from "react";
2
- import Plot from "react-plotly.js";
3
- import PropTypes from "prop-types";
4
- import { withResizeDetector } from "react-resize-detector";
5
- import { useTheme as useSelectedTheme, styled, } from "@insync-stageplayer/ui-components";
6
- const normalizeRange = 1000;
7
- const convertMicrosecondstoDateFormat = (inputMicroseconds) => {
8
- let convertedDate = new Date(+inputMicroseconds / 1000);
9
- return adjustWithLocalTimeZone(convertedDate);
10
- };
11
- const adjustWithLocalTimeZone = (date) => {
12
- let adjustedDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
13
- return adjustedDate;
14
- };
15
- const convertDateToMicroseconds = (inputDate) => {
16
- const convertIntoDate = new Date(inputDate);
17
- return (convertIntoDate.getTime() * 1000 -
18
- convertIntoDate.getTimezoneOffset() * 60 * 1000 * 1000);
19
- };
20
- const getMicroSecondStartAndLength = (originalFromDate, originalStopDate) => {
21
- const start = convertDateToMicroseconds(originalFromDate);
22
- const end = convertDateToMicroseconds(originalStopDate);
23
- const length = end - start;
24
- return [start, length];
25
- };
26
- // update some cursors to be more clear
27
- const StyledPlotly = styled(Plot) `
28
- rect.nsewdrag.cursor-ew-resize {
29
- cursor: zoom-in;
30
- }
31
- rect.ewdrag.cursor-ew-resize {
32
- cursor: grab;
33
- }
34
- `;
35
- export const PlotlyChart = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, isLivePanel, }) => {
36
- var _a;
37
- const [plotData, setPlotData] = useState([]);
38
- const [nowLine, setNowline] = useState(isLivePanel ? 1 : (_a = sessionStorage.getItem("nl")) !== null && _a !== void 0 ? _a : 0);
39
- const [layout, setLayout] = useState(null);
40
- const selectedTheme = useSelectedTheme();
41
- const [yAxisLabelLeft, setYAxisLabelLeft] = useState("");
42
- const [yAxisLabelRight, setYAxisLabelRight] = useState("");
43
- const updateLayout = useCallback(() => {
44
- let annotations = [
45
- {
46
- xref: "paper",
47
- yref: "paper",
48
- x: nowLine,
49
- xanchor: "right",
50
- y: 1,
51
- yanchor: "bottom",
52
- text: "",
53
- showarrow: displayArrow,
54
- arrowhead: 0,
55
- ax: 0,
56
- ay: 1000,
57
- arrowcolor: "red",
58
- },
59
- ];
60
- const convertXRangeFrom = xScaleTickFormat.includes(":")
61
- ? convertMicrosecondstoDateFormat(xRange.from > 0 ? xRange.from : 0)
62
- : xRange.from / 1e6;
63
- const convertXRangeTo = xScaleTickFormat.includes(":")
64
- ? convertMicrosecondstoDateFormat(xRange.from > 0 ? xRange.from + xRange.length : xRange.length)
65
- : (xRange.from + xRange.length) / 1e6;
66
- let defaultLayout = {
67
- // this hovermode setting creates a hover-over legend for all the signals at the same time. It also adds a spike line
68
- hovermode: "x unified",
69
- yaxis: {
70
- fixedrange: true,
71
- rangemode: isLivePanel ? "tozero" : "",
72
- hoverformat: ".2f",
73
- range: [],
74
- title: yAxisLabelLeft,
75
- showline: true,
76
- showticklabels: isLivePanel ? false : true,
77
- linewidth: 2,
78
- linecolor: selectedTheme.colors.accent,
79
- tickformat: null,
80
- },
81
- xaxis: {
82
- rangemode: isLivePanel ? "tozero" : "",
83
- showline: isLivePanel ? true : false,
84
- linewidth: 2,
85
- linecolor: selectedTheme.colors.accent,
86
- fixedrange: isLivePanel ? true : false,
87
- range: [convertXRangeFrom, convertXRangeTo],
88
- tickformat: xScaleTickFormat.includes(":") ? "%H:%M:%S" : null,
89
- },
90
- showlegend: false,
91
- autosize: true,
92
- margin: { l: 25, r: 10, t: 20, b: 20 },
93
- paper_bgcolor: selectedTheme.colors.background,
94
- plot_bgcolor: selectedTheme.colors.background,
95
- font: { color: selectedTheme.colors.foreground },
96
- };
97
- // Check if a second y-axis needs to be added
98
- if (displaySecondYAxis && metadata.length == 2) {
99
- const yAxis2 = {
100
- fixedrange: true,
101
- title: yAxisLabelRight,
102
- anchor: "x",
103
- overlaying: "y",
104
- side: "right",
105
- };
106
- defaultLayout = Object.assign(Object.assign({}, defaultLayout), { yaxis2: yAxis2 });
107
- }
108
- // when scrubbing plotly is in charge, this to prevent the xRange to update and mess while
109
- // still scrubbing in plotly
110
- if (!scrubbing) {
111
- setLayout(Object.assign(Object.assign({}, defaultLayout), { annotations }));
112
- }
113
- }, [
114
- selectedTheme,
115
- xRange,
116
- xScaleTickFormat,
117
- yAxisLabelLeft,
118
- yAxisLabelRight,
119
- displaySecondYAxis,
120
- displayArrow,
121
- scrubbing,
122
- metadata,
123
- nowLine,
124
- ]);
125
- const onRelayout = (e) => {
126
- if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
127
- let selection;
128
- if (xScaleTickFormat.includes(":")) {
129
- const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"]);
130
- selection = {
131
- from: from,
132
- length: length,
133
- };
134
- }
135
- else {
136
- selection = {
137
- from: e["xaxis.range[0]"] * 1e6,
138
- length: (e["xaxis.range[1]"] - e["xaxis.range[0]"]) * 1e6,
139
- };
140
- }
141
- onStopSelect({ selection });
142
- }
143
- };
144
- const onRelayouting = (e) => {
145
- if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
146
- let seekTime;
147
- if (xScaleTickFormat.includes(":")) {
148
- const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"]);
149
- seekTime = (length / 2 + from) * 1e6;
150
- }
151
- else {
152
- seekTime =
153
- ((e["xaxis.range[1]"] - e["xaxis.range[0]"]) / 2 +
154
- e["xaxis.range[0]"]) *
155
- 1e6;
156
- }
157
- onDrag(seekTime);
158
- }
159
- };
160
- useEffect(() => {
161
- updateLayout();
162
- const plotDataArr = [];
163
- data.forEach((signal, idx) => {
164
- const x = signal.map((item) => {
165
- if (xScaleTickFormat.includes(":")) {
166
- const xDateFormatted = convertMicrosecondstoDateFormat(+item.x);
167
- return xDateFormatted;
168
- }
169
- else {
170
- const xDateFormatted = +item.x / 1e6;
171
- return xDateFormatted;
172
- }
173
- });
174
- const y = signal.map((item) => {
175
- return item.y;
176
- });
177
- const signalData = {
178
- x,
179
- y,
180
- type: "scattergl",
181
- mode: metadata[idx].frequency * (xRange.length / 1000 / 1000) > 250
182
- ? "lines"
183
- : "lines+markers",
184
- name: metadata[idx].name,
185
- marker: {
186
- color: metadata[idx].color,
187
- size: 5,
188
- line: {
189
- color: metadata[idx].color,
190
- width: 1,
191
- },
192
- },
193
- };
194
- plotDataArr.push(signalData);
195
- });
196
- // Check if a second y-axis needs to be added
197
- if (displaySecondYAxis && metadata.length == 2) {
198
- plotDataArr[1] = Object.assign(Object.assign({}, plotDataArr[1]), { yaxis: "y2" });
199
- }
200
- // Setting y-axis labels if needed and meeting the requirements
201
- if (metadata.length == 1) {
202
- setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
203
- }
204
- else if (metadata.length == 2 && displaySecondYAxis) {
205
- setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
206
- setYAxisLabelRight(yAxisLabel ? metadata[1].name : "");
207
- }
208
- else {
209
- setYAxisLabelLeft("");
210
- setYAxisLabelRight("");
211
- }
212
- setPlotData(plotDataArr);
213
- }, [
214
- data,
215
- metadata,
216
- updateLayout,
217
- xScaleTickFormat,
218
- xRange,
219
- scrubbing,
220
- yAxisLabel,
221
- displaySecondYAxis,
222
- ]);
223
- useEffect(() => {
224
- if (xRange.from < 0) {
225
- let d = (xRange.length / 2 + (xRange.from * xRange.length) / xRange.length) /
226
- xRange.length;
227
- setNowline(d);
228
- }
229
- else {
230
- setNowline(isLivePanel ? 1 : 0.5);
231
- }
232
- isLivePanel
233
- ? sessionStorage.removeItem("nl")
234
- : sessionStorage.setItem("nl", nowLine);
235
- }, [plotData, xRange]);
236
- const shouldNormalize = React.useMemo(() => {
237
- const units = metadata.reduce((acc, curr) => {
238
- if (curr != undefined && acc.indexOf(curr === null || curr === void 0 ? void 0 : curr.unit) < 0) {
239
- return [...acc, curr.unit];
240
- }
241
- return acc;
242
- }, []);
243
- return units.length > 1;
244
- }, [metadata]);
245
- const normalized = React.useMemo(() => {
246
- if (plotData.length <= 0)
247
- return;
248
- if (shouldNormalize) {
249
- const newLinesData = plotData.map((item, i) => {
250
- const line = metadata[i];
251
- const { min, max } = line;
252
- const lineRange = max - min;
253
- return Object.assign(Object.assign({}, item), { y: item.y.map((value) => {
254
- return (value - min) / lineRange;
255
- }) });
256
- });
257
- return newLinesData;
258
- }
259
- return plotData;
260
- }, [shouldNormalize, plotData, metadata]);
261
- return (React.createElement(StyledPlotly, { useResizeHandler: true, className: "plot-div", data: normalized, layout: layout, style: { width: "100%", height: "100%" }, config: {
262
- displaylogo: false,
263
- displayModeBar: false,
264
- responsive: true,
265
- }, onRelayout: (e) => onRelayout(e), onRelayouting: (e) => onRelayouting(e) }));
266
- });
267
- PlotlyChart.defaultProps = {
268
- xRange: null,
269
- data: [],
270
- metadata: [],
271
- onStopSelect: () => { },
272
- onDrag: () => { },
273
- xScaleTickFormat: "SS",
274
- scrubbing: false,
275
- yAxisLabel: false,
276
- displaySecondYAxis: false,
277
- displayArrow: true,
278
- selectedTheme: null,
279
- isLivePanel: false,
280
- };
281
- const dataElement = PropTypes.shape({
282
- x: PropTypes.number,
283
- y: PropTypes.number,
284
- });
285
- const metadataElement = PropTypes.shape({
286
- name: PropTypes.string,
287
- color: PropTypes.string,
288
- });
289
- PlotlyChart.propTypes = {
290
- xRange: PropTypes.shape({
291
- from: PropTypes.number,
292
- length: PropTypes.number,
293
- }),
294
- data: PropTypes.arrayOf(PropTypes.arrayOf(dataElement), PropTypes.arrayOf(dataElement)),
295
- metadata: PropTypes.arrayOf(metadataElement),
296
- onStopSelect: PropTypes.func,
297
- onDrag: PropTypes.func,
298
- xScaleTickFormat: PropTypes.string,
299
- scrubbing: PropTypes.bool,
300
- yAxisLabel: PropTypes.bool,
301
- isLivePanel: PropTypes.bool,
302
- displaySecondYAxis: PropTypes.bool,
303
- displayArrow: PropTypes.bool,
304
- selectedTheme: PropTypes.shape({
305
- colors: PropTypes.shape({
306
- background: PropTypes.string,
307
- }),
308
- }),
309
- };
310
- //# sourceMappingURL=PlotlyLiveview.js.map