@insync-stageplayer/plotly-chart 0.5.35 → 0.5.38-beta.3

package/lib/PlotlyGraph/PlotlyPlayback.js

@@ -1,28 +1,48 @@
-import React, { useCallback, useEffect, useState } from "react";
-import Plot from "react-plotly.js";
-import PropTypes from "prop-types";
-import { withResizeDetector } from "react-resize-detector";
-import { useTheme as useSelectedTheme, styled, } from "@insync-stageplayer/ui-components";
-const convertMicrosecondstoDateFormat = (inputMicroseconds) => {
-    let convertedDate = new Date(+inputMicroseconds / 1000);
-    return adjustWithLocalTimeZone(convertedDate);
-};
-const adjustWithLocalTimeZone = (date) => {
-    let adjustedDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
-    return adjustedDate;
-};
-const convertDateToMicroseconds = (inputDate) => {
-    const convertIntoDate = new Date(inputDate);
-    return (convertIntoDate.getTime() * 1000 -
-        convertIntoDate.getTimezoneOffset() * 60 * 1000 * 1000);
-};
-const getMicroSecondStartAndLength = (originalFromDate, originalStopDate, totalTime) => {
-    const start = convertDateToMicroseconds(originalFromDate);
-    const end = convertDateToMicroseconds(originalStopDate);
-    let sLength = end - start;
-    const length = sLength + (totalTime % 1000) === totalTime ? totalTime : sLength;
-    return [start, length];
-};
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import Plot from "react-plotly.js";
+import PropTypes from "prop-types";
+import { withResizeDetector } from "react-resize-detector";
+import { useTheme as useSelectedTheme, styled, } from "@insync-stageplayer/ui-components";
+const normalizeRange = 1000;
+const convertMicrosecondstoDateFormat = (inputMicroseconds) => {
+    let convertedDate = new Date(+inputMicroseconds / 1000);
+    return adjustWithLocalTimeZone(convertedDate);
+};
+const adjustWithLocalTimeZone = (date) => {
+    let adjustedDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
+    return adjustedDate;
+};
+const convertDateToMicroseconds = (inputDate) => {
+    const convertIntoDate = new Date(inputDate);
+    return (convertIntoDate.getTime() * 1000 -
+        convertIntoDate.getTimezoneOffset() * 60 * 1000 * 1000);
+};
+const getMicroSecondStartAndLength = (originalFromDate, originalStopDate, totalTime) => {
+    const start = convertDateToMicroseconds(originalFromDate);
+    const end = convertDateToMicroseconds(originalStopDate);
+    let sLength = end - start;
+    const length = sLength + (totalTime % 1000) === totalTime ? totalTime : sLength;
+    return [start, length];
+};
+const convertMicrosecondsToDate = (inputTime) => {
+    const date = new Date(inputTime / 1000 - 3600 * 1000);
+    const pad = function (num) {
+        return (num < 10 ? "0" : "") + num;
+    };
+    return (date.getFullYear() +
+        "-" +
+        pad(date.getMonth() + 1) +
+        "-" +
+        pad(date.getDate()) +
+        " " +
+        pad(date.getHours()) +
+        ":" +
+        pad(date.getMinutes()) +
+        ":" +
+        pad(date.getSeconds()) +
+        "." +
+        pad(date.getMilliseconds()));
+};
 const StyledPlotly = styled(Plot) `
   rect.nsewdrag.cursor-ew-resize {
     cursor: zoom-in;
@@ -35,287 +55,445 @@ const StyledPlotly = styled(Plot) `
     cursor: grab;
     pointer-events: none !important;
   }
-`;
-export const PlotlyPlayback = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, totalTime, }) => {
-    var _a;
-    const [plotData, setPlotData] = useState([]);
-    const [nowLine, setNowline] = useState((_a = sessionStorage.getItem("nl")) !== null && _a !== void 0 ? _a : 0);
-    const [layout, setLayout] = useState(null);
-    const selectedTheme = useSelectedTheme();
-    const [yAxisLabelLeft, setYAxisLabelLeft] = useState("");
-    const [yAxisLabelRight, setYAxisLabelRight] = useState("");
-    const updateLayout = useCallback(() => {
-        let annotations = [
-            {
-                xref: "paper",
-                yref: "paper",
-                x: nowLine,
-                xanchor: "right",
-                y: 1,
-                yanchor: "bottom",
-                text: "",
-                showarrow: displayArrow,
-                arrowhead: 0,
-                ax: 0,
-                ay: 1000,
-                arrowcolor: "red",
-            },
-        ];
-        const convertXRangeFrom = xScaleTickFormat.includes(":")
-            ? convertMicrosecondstoDateFormat(xRange.from > 0
-                ? xRange.length === totalTime
-                    ? 0
-                    : xRange.from + xRange.length > totalTime
-                        ? totalTime - xRange.length
-                        : xRange.from
-                : 0)
-            : xRange.from / 1e6;
-        const convertXRangeTo = xScaleTickFormat.includes(":")
-            ? convertMicrosecondstoDateFormat(xRange.from > 0
-                ? xRange.length === totalTime
-                    ? xRange.length
-                    : xRange.from + xRange.length > totalTime
-                        ? totalTime
-                        : xRange.from + xRange.length
-                : xRange.length)
-            : (xRange.from + xRange.length) / 1e6;
-        let defaultLayout = {
-            // this hovermode setting creates a hover-over legend for all the signals at the same time. It also adds a spike line
-            hovermode: "x unified",
-            yaxis: {
-                fixedrange: true,
-                rangemode: "",
-                hoverformat: ".2f",
-                range: selectedTheme.name === "noldus" ? [0, 1] : [],
-                title: yAxisLabelLeft,
-                showline: true,
-                showticklabels: false,
-                linewidth: 2,
-                linecolor: selectedTheme.colors.accent,
-                tickformat: null,
-            },
-            xaxis: {
-                rangemode: "",
-                showline: false,
-                linewidth: 2,
-                linecolor: selectedTheme.colors.accent,
-                fixedrange: false,
-                range: [convertXRangeFrom, convertXRangeTo],
-                tickformat: xScaleTickFormat.includes(":") ? "%H:%M:%S" : null,
-            },
-            showlegend: false,
-            autosize: true,
-            margin: { l: 25, r: 10, t: 20, b: 20 },
-            paper_bgcolor: selectedTheme.colors.background,
-            plot_bgcolor: selectedTheme.colors.background,
-            font: { color: selectedTheme.colors.foreground },
-        };
-        // Check if a second y-axis needs to be added
-        if (displaySecondYAxis && metadata.length == 2) {
-            const yAxis2 = {
-                fixedrange: true,
-                title: yAxisLabelRight,
-                anchor: "x",
-                overlaying: "y",
-                side: "right",
-            };
-            defaultLayout = Object.assign(Object.assign({}, defaultLayout), { yaxis2: yAxis2 });
-        }
-        // when scrubbing plotly is in charge, this to prevent the xRange to update and mess while
-        // still scrubbing in plotly
-        if (!scrubbing) {
-            setLayout(Object.assign(Object.assign({}, defaultLayout), { annotations }));
-        }
-    }, [
-        selectedTheme,
-        xRange,
-        xScaleTickFormat,
-        yAxisLabelLeft,
-        yAxisLabelRight,
-        displaySecondYAxis,
-        displayArrow,
-        scrubbing,
-        metadata,
-        nowLine,
-    ]);
-    const onRelayout = (e) => {
-        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
-            let selection;
-            if (xScaleTickFormat.includes(":")) {
-                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
-                selection = {
-                    from: from,
-                    length: length,
-                };
-            }
-            else {
-                selection = {
-                    from: e["xaxis.range[0]"] * 1e6,
-                    length: (e["xaxis.range[1]"] - e["xaxis.range[0]"]) * 1e6,
-                };
-            }
-            onStopSelect({ selection });
-        }
-    };
-    const onRelayouting = (e) => {
-        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
-            let seekTime;
-            if (xScaleTickFormat.includes(":")) {
-                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
-                const possibleSeekTime = length * nowLine + from;
-                seekTime =
-                    possibleSeekTime > totalTime
-                        ? totalTime
-                        : possibleSeekTime < 0
-                            ? 0
-                            : possibleSeekTime;
-            }
-            else {
-                seekTime =
-                    ((e["xaxis.range[1]"] - e["xaxis.range[0]"]) / 2 +
-                        e["xaxis.range[0]"]) *
-                        1e6;
-            }
-            onDrag(seekTime);
-        }
-    };
-    useEffect(() => {
-        updateLayout();
-        const plotDataArr = [];
-        data.forEach((signal, idx) => {
-            const x = signal.map((item) => {
-                if (xScaleTickFormat.includes(":")) {
-                    const xDateFormatted = convertMicrosecondstoDateFormat(+item.x);
-                    return xDateFormatted;
-                }
-                else {
-                    const xDateFormatted = +item.x / 1e6;
-                    return xDateFormatted;
-                }
-            });
-            const yVal = signal.map((item) => {
-                return item.y;
-            });
-            const { min, max } = metadata[idx];
-            const range = max - min;
-            const y = yVal.map((value) => {
-                return (value - min) / range;
-            });
-            const signalData = {
-                x,
-                y,
-                hovertemplate: "%{customdata:.2f}",
-                customdata: yVal.map((point) => `${point}`),
-                type: "scattergl",
-                mode: metadata[idx].frequency * (xRange.length / 1000 / 1000) > 250
-                    ? "lines"
-                    : "lines+markers",
-                name: metadata[idx].name,
-                marker: {
-                    color: metadata[idx].color,
-                    size: 5,
-                    line: {
-                        color: metadata[idx].color,
-                        width: 1,
-                    },
-                },
-            };
-            plotDataArr.push(signalData);
-        });
-        // Check if a second y-axis needs to be added
-        if (displaySecondYAxis && metadata.length == 2) {
-            plotDataArr[1] = Object.assign(Object.assign({}, plotDataArr[1]), { yaxis: "y2" });
-        }
-        // Setting y-axis labels if needed and meeting the requirements
-        if (metadata.length == 1) {
-            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
-        }
-        else if (metadata.length == 2 && displaySecondYAxis) {
-            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
-            setYAxisLabelRight(yAxisLabel ? metadata[1].name : "");
-        }
-        else {
-            setYAxisLabelLeft("");
-            setYAxisLabelRight("");
-        }
-        setPlotData(plotDataArr);
-    }, [
-        data,
-        metadata,
-        updateLayout,
-        xScaleTickFormat,
-        xRange,
-        scrubbing,
-        yAxisLabel,
-        displaySecondYAxis,
-    ]);
-    useEffect(() => {
-        if (!scrubbing) {
-            if (xRange.from < 0) {
-                let d = (xRange.length / 2 + xRange.from) / xRange.length;
-                setNowline(d);
-            }
-            else {
-                if (xRange.length === totalTime) {
-                    setNowline(0.5 + xRange.from / totalTime);
-                }
-                else if (xRange.from + xRange.length > totalTime) {
-                    setNowline(0.5 + (xRange.from - (totalTime - xRange.length)) / xRange.length);
-                }
-                else {
-                    setNowline(0.5);
-                }
-            }
-        }
-        sessionStorage.setItem("nl", nowLine);
-    }, [plotData, xRange]);
-    return (React.createElement(StyledPlotly, { useResizeHandler: true, className: "plot-div", data: plotData, layout: layout, style: { width: "100%", height: "100%" }, config: {
-            displaylogo: false,
-            displayModeBar: false,
-            responsive: true,
-        }, onRelayout: (e) => onRelayout(e), onRelayouting: (e) => onRelayouting(e) }));
-});
-PlotlyPlayback.defaultProps = {
-    xRange: null,
-    data: [],
-    metadata: [],
-    onStopSelect: () => { },
-    onDrag: () => { },
-    xScaleTickFormat: "SS",
-    scrubbing: false,
-    yAxisLabel: false,
-    displaySecondYAxis: false,
-    displayArrow: true,
-    selectedTheme: null,
-    totalTime: null,
-};
-const dataElement = PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
-});
-const metadataElement = PropTypes.shape({
-    name: PropTypes.string,
-    color: PropTypes.string,
-});
-PlotlyPlayback.propTypes = {
-    xRange: PropTypes.shape({
-        from: PropTypes.number,
-        length: PropTypes.number,
-    }),
-    data: PropTypes.arrayOf(PropTypes.arrayOf(dataElement), PropTypes.arrayOf(dataElement)),
-    metadata: PropTypes.arrayOf(metadataElement),
-    onStopSelect: PropTypes.func,
-    onDrag: PropTypes.func,
-    xScaleTickFormat: PropTypes.string,
-    scrubbing: PropTypes.bool,
-    yAxisLabel: PropTypes.bool,
-    displaySecondYAxis: PropTypes.bool,
-    displayArrow: PropTypes.bool,
-    selectedTheme: PropTypes.shape({
-        colors: PropTypes.shape({
-            background: PropTypes.string,
-        }),
-    }),
-    totalTime: PropTypes.number,
-};
+`;
+export const PlotlyPlayback = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, totalTime, startPositionCurrentTimeIndicator, onRenderedWidth, onRenderedLeft, onRenderedTop, onRenderedHeight, onRenderedScrubbar, percentageHeight, }) => {
+    var _a;
+    const [plotData, setPlotData] = useState([]);
+    const [nowLine, setNowline] = useState((_a = sessionStorage.getItem("nl")) !== null && _a !== void 0 ? _a : 0);
+    const [layout, setLayout] = useState(null);
+    const selectedTheme = useSelectedTheme();
+    const [yAxisLabelLeft, setYAxisLabelLeft] = useState("");
+    const [yAxisLabelRight, setYAxisLabelRight] = useState("");
+    const [yAxisLabelLeftColor, setYAxisLabelLeftColor] = useState("");
+    const [yAxisLabelRightColor, setYAxisLabelRightColor] = useState("");
+    const plotlyRef = useRef();
+    const updateLayout = useCallback(() => {
+        const nowline_color = "rgba(255, 0, 0, 1)";
+        const annotations = [
+            {
+                xref: "paper",
+                yref: "paper",
+                x: nowLine,
+                xanchor: "right",
+                y: 1,
+                yanchor: "bottom",
+                text: "",
+                showarrow: displayArrow,
+                arrowhead: 0,
+                ax: 0,
+                ay: 4000,
+                arrowcolor: nowline_color,
+            },
+        ];
+        const shapes = [
+            {
+                type: "rect",
+                xref: "paper",
+                yref: "paper",
+                layer: "below",
+                x0: 0,
+                y0: 0,
+                x1: 1,
+                y1: -0.19,
+                fillcolor: selectedTheme.colors.scrubBarColor,
+                line: {
+                    color: selectedTheme.colors.scrubBarColor,
+                },
+            },
+        ];
+        const convertXRangeFrom = xScaleTickFormat.includes(":")
+            ? convertMicrosecondstoDateFormat(xRange.from > 0
+                ? xRange.length === totalTime
+                    ? 0
+                    : xRange.from + xRange.length > totalTime
+                        ? totalTime - xRange.length
+                        : xRange.from
+                : 0)
+            : xRange.from / 1e6;
+        const convertXRangeTo = xScaleTickFormat.includes(":")
+            ? convertMicrosecondstoDateFormat(xRange.from > 0
+                ? xRange.length === totalTime
+                    ? xRange.length
+                    : xRange.from + xRange.length > totalTime
+                        ? totalTime
+                        : xRange.from + xRange.length
+                : xRange.length)
+            : (xRange.from + xRange.length) / 1e6;
+        const minY = yScaleRange[0].min;
+        const maxY = yScaleRange[0].max;
+        // only add y label when set, otherwise will give a lot of extra margin
+        const yAxisWithLabel = yAxisLabel && yAxisLabelLeft !== ""
+            ? {
+                title: yAxisLabelLeft,
+                automargin: "width",
+                titlefont: {
+                    color: yAxisLabelLeftColor,
+                },
+            }
+            : {
+                // a bit of margin for the y axis otherwise
+                anchor: "free",
+                shift: 5,
+            };
+        const sharedYaxis = Object.assign(Object.assign({}, yAxisWithLabel), { fixedrange: true, rangemode: "", showline: true, showticklabels: selectedTheme.name === "noldus" ? false : true, linewidth: 2, linecolor: selectedTheme.colors.accent, tickformat: null });
+        // Noldus doesn't need the precision, where MARIN wants it to be as precise as possible
+        // MARIN wants it's own normalization when working with different units (e.g kn and m)
+        const yAxis = selectedTheme.name === "noldus"
+            ? Object.assign(Object.assign({}, sharedYaxis), { hoverformat: ".2f" }) : Object.assign(Object.assign({}, sharedYaxis), { range: [minY, maxY], showline: shouldNormalize ? false : true, showticklabels: shouldNormalize ? false : true });
+        let defaultLayout = {
+            // this hovermode setting creates a hover-over legend for all the signals at the same time. It also adds a spike line
+            hovermode: "x unified",
+            yaxis: yAxis,
+            xaxis: {
+                rangemode: "",
+                showline: true,
+                linewidth: 2,
+                linecolor: selectedTheme.colors.accent,
+                fixedrange: false,
+                range: [convertXRangeFrom, convertXRangeTo],
+                tickformat: xScaleTickFormat.includes(":") ? "%H:%M:%S" : null,
+                // dtick: 5, // removing this allows for automatic per zoom level
+                ticks: "outside top",
+                ticklen: 15,
+                tickcolor: selectedTheme.colors.dtickColor,
+                ticklabelposition: "inside",
+                minor: {
+                    ticks: "inside top",
+                    ticklen: 9,
+                    tickmode: "auto",
+                    nticks: 10,
+                    tickcolor: selectedTheme.colors.dtickMinorColor,
+                },
+            },
+            showlegend: false,
+            autosize: true,
+            margin: { l: 25, r: 10, t: 20, b: 20 },
+            paper_bgcolor: selectedTheme.colors.background,
+            plot_bgcolor: selectedTheme.colors.background,
+            font: { color: selectedTheme.colors.foreground },
+        };
+        // only add y label when set, setting it empty otherwise will give extra margin
+        const yAxis2WithLabel = yAxisLabel && yAxisLabelRight !== ""
+            ? {
+                title: yAxisLabelRight,
+                titlefont: {
+                    color: yAxisLabelRightColor,
+                },
+            }
+            : {};
+        // Check if a second y-axis needs to be added
+        if (displaySecondYAxis && metadata.length == 2) {
+            const yAxis2 = Object.assign(Object.assign({}, yAxis2WithLabel), { fixedrange: true, range: [yScaleRange[1].min, yScaleRange[1].max], anchor: "x", overlaying: "y", side: "right", automargin: "width" });
+            defaultLayout = Object.assign(Object.assign({}, defaultLayout), { yaxis2: yAxis2 });
+        }
+        // when scrubbing plotly is in charge, this to prevent the xRange to update and mess while
+        // still scrubbing in plotly
+        if (!scrubbing) {
+            setLayout(Object.assign(Object.assign({}, defaultLayout), { shapes, annotations }));
+        }
+    }, [
+        selectedTheme,
+        xRange,
+        xScaleTickFormat,
+        yAxisLabel,
+        yAxisLabelLeft,
+        yAxisLabelRight,
+        displaySecondYAxis,
+        displayArrow,
+        scrubbing,
+        metadata,
+        nowLine,
+        totalTime,
+        yAxisLabelLeftColor,
+        yAxisLabelRightColor,
+    ]);
+    const onRelayout = (e) => {
+        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
+            let selection;
+            if (xScaleTickFormat.includes(":")) {
+                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
+                selection = {
+                    from: from,
+                    length: length,
+                };
+            }
+            else {
+                selection = {
+                    from: e["xaxis.range[0]"] * 1e6,
+                    length: (e["xaxis.range[1]"] - e["xaxis.range[0]"]) * 1e6,
+                };
+            }
+            onStopSelect({ selection });
+        }
+    };
+    const onRelayouting = (e) => {
+        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
+            let seekTime;
+            if (xScaleTickFormat.includes(":")) {
+                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
+                const possibleSeekTime = length * nowLine + from;
+                onDrag(possibleSeekTime);
+            }
+            else {
+                // set on drag
+                if (startPositionCurrentTimeIndicator === "0") {
+                    seekTime = e["xaxis.range[0]"] * 1e6;
+                }
+                else {
+                    seekTime =
+                        ((e["xaxis.range[1]"] - e["xaxis.range[0]"]) / 2 +
+                            e["xaxis.range[0]"]) *
+                            1e6;
+                }
+                onDrag(seekTime);
+            }
+        }
+    };
+    // MARIN data should be normalized if the unit of the different signals are not the same
+    const shouldNormalize = React.useMemo(() => {
+        const units = metadata.reduce((acc, curr) => {
+            if (acc.indexOf(curr.unit) < 0) {
+                return [...acc, curr.unit];
+            }
+            return acc;
+        }, []);
+        return displaySecondYAxis ? units.length > 2 : units.length > 1;
+    }, [metadata, displaySecondYAxis]);
+    // Getting the range for the y-axis
+    const yScaleRange = React.useMemo(() => {
+        if (!shouldNormalize && metadata) {
+            if (displaySecondYAxis && metadata.length == 2) {
+                return [
+                    { min: metadata[0].min, max: metadata[0].max },
+                    { min: metadata[1].min, max: metadata[1].max },
+                ];
+            }
+            else {
+                const min = metadata.reduce((acc, l) => Math.min(acc, l.min), Infinity);
+                const max = metadata.reduce((acc, l) => Math.max(acc, l.max), -Infinity);
+                return [{ min, max }];
+            }
+        }
+        return [{ min: 0, max: 1 }];
+    }, [shouldNormalize, metadata, displaySecondYAxis]);
+    useEffect(() => {
+        const plotDataArr = [];
+        data.forEach((signal, idx) => {
+            // For Noldus we need to filter out the x from the objects, MARIN directly returns a Plotly optimized format
+            const x = selectedTheme.name === "noldus"
+                ? signal.map((item) => {
+                    if (xScaleTickFormat.includes(":")) {
+                        const xDateFormatted = convertMicrosecondstoDateFormat(+item.x);
+                        return xDateFormatted;
+                    }
+                    else {
+                        const xValue = +item.x / 1e6;
+                        return xValue;
+                    }
+                })
+                : signal[0].map((item) => {
+                    if (xScaleTickFormat.includes(":")) {
+                        const xDateFormatted = convertMicrosecondstoDateFormat(+item);
+                        return xDateFormatted;
+                    }
+                    else {
+                        const xValue = +item / 1e6;
+                        return xValue;
+                    }
+                });
+            // For Noldus we need to filter out the y from the objects, MARIN directly returns a Plotly optimized format
+            const yVal = selectedTheme.name === "noldus"
+                ? signal.map((item) => {
+                    return item.y;
+                })
+                : signal[1];
+            const y = handleYValue(yVal, idx);
+            const sharedSignalData = {
+                x,
+                y,
+                type: "scattergl",
+                mode: metadata[idx].frequency * (xRange.length / 1000 / 1000) > 250
+                    ? "lines"
+                    : "lines+markers",
+                name: metadata[idx].name,
+                marker: {
+                    color: metadata[idx].color,
+                    size: 5,
+                    line: {
+                        color: metadata[idx].color,
+                        width: 1,
+                    },
+                },
+            };
+            const signalData = getSignalData(sharedSignalData, yVal);
+            plotDataArr.push(signalData);
+        });
+        // Check if a second y-axis needs to be added
+        if (displaySecondYAxis && metadata.length == 2) {
+            plotDataArr[1] = Object.assign(Object.assign({}, plotDataArr[1]), { yaxis: "y2" });
+        }
+        // Setting y-axis labels if needed and meeting the requirements
+        if (metadata.length == 1) {
+            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
+            setYAxisLabelLeftColor(yAxisLabel ? selectedTheme.colors.foreground : "");
+        }
+        else if (metadata.length == 2 && displaySecondYAxis) {
+            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
+            setYAxisLabelLeftColor(yAxisLabel ? metadata[0].color : "");
+            setYAxisLabelRight(yAxisLabel ? metadata[1].name : "");
+            setYAxisLabelRightColor(yAxisLabel ? metadata[1].color : "");
+        }
+        else {
+            setYAxisLabelLeft("");
+            setYAxisLabelRight("");
+            setYAxisLabelLeftColor("");
+            setYAxisLabelRightColor("");
+        }
+        setPlotData(plotDataArr);
+    }, [
+        data,
+        metadata,
+        xScaleTickFormat,
+        xRange.length,
+        yAxisLabel,
+        displaySecondYAxis,
+        selectedTheme.colors.foreground,
+        selectedTheme.name,
+    ]);
+    useEffect(() => {
+        updateLayout();
+    }, [updateLayout]);
+    useEffect(() => {
+        if (!scrubbing) {
+            if (selectedTheme.name === "noldus") {
+                if (xRange.from < 0) {
+                    let d = (xRange.length / 2 + xRange.from) / xRange.length;
+                    setNowline(d);
+                }
+                else {
+                    if (xRange.length === totalTime) {
+                        setNowline(0.5 + xRange.from / totalTime);
+                    }
+                    else if (xRange.from + xRange.length > totalTime) {
+                        setNowline(0.5 +
+                            (xRange.from - (totalTime - xRange.length)) / xRange.length);
+                    }
+                    else {
+                        setNowline(0.5);
+                    }
+                }
+            }
+            else {
+                setNowline(0.5);
+            }
+        }
+    }, [scrubbing, xRange]);
+    const afterPlot = () => {
+        //console.log(plotlyRef.current);
+        //console.log(plotlyRef.current.el);
+        // TODO: get from plotlyRef instead of document
+        var layer = document.getElementsByClassName("axesclip")[0].firstChild;
+        const yAxisSignalLeft = layer.x.baseVal.value;
+        const yAxisSignalWidth = layer.width.baseVal.value;
+        const xAxisSignalTop = layer.y.baseVal.value;
+        const xAxisSignalHeight = layer.height.baseVal.value;
+        onRenderedLeft(yAxisSignalLeft);
+        onRenderedWidth(yAxisSignalWidth);
+        onRenderedTop(xAxisSignalTop);
+        onRenderedHeight(xAxisSignalHeight);
+        // TODO: get from plotlyRef instead of document
+        const scrubbar = document.getElementsByClassName("ewdrag")[0];
+        const scrubbarHeight = scrubbar.height.baseVal.value;
+        onRenderedScrubbar(scrubbarHeight);
+    };
+    const handleYValue = (yVal, idx) => {
+        // Noldus wants the Y data to be relative between 0 and 1
+        // MARIN data engineers always wants the data as it is
+        if (selectedTheme.name === "noldus" || shouldNormalize) {
+            const { min, max } = metadata[idx];
+            const range = max - min;
+            const y = yVal.map((value) => {
+                return (value - min) / range;
+            });
+            return y;
+        }
+        else {
+            return yVal;
+        }
+    };
+    const getSignalData = (sharedSignalData, yVal) => {
+        if (selectedTheme.name === "noldus") {
+            const noldusSignalData = {
+                hovertemplate: "%{customdata:.2f}",
+                customdata: yVal.map((point) => `${point}`), // Setting raw data for each point
+            };
+            return Object.assign(Object.assign({}, sharedSignalData), noldusSignalData);
+        }
+        else {
+            if (shouldNormalize) {
+                const marinSignalData = {
+                    hovertemplate: "%{customdata}",
+                    customdata: yVal.map((point) => `${point}`),
+                };
+                return Object.assign(Object.assign({}, sharedSignalData), marinSignalData);
+            }
+            else {
+                return sharedSignalData;
+            }
+        }
+    };
+    return (React.createElement(StyledPlotly, { useResizeHandler: true, className: "plot-div", data: plotData, layout: layout, style: { width: "100%", height: percentageHeight + "%" }, config: {
+            displaylogo: false,
+            displayModeBar: false,
+            responsive: true,
+            doubleClick: false,
+            showTips: false,
+        }, onRelayout: (e) => onRelayout(e), onRelayouting: (e) => onRelayouting(e), onAfterPlot: () => afterPlot(), ref: plotlyRef }));
+});
+PlotlyPlayback.defaultProps = {
+    xRange: null,
+    data: [],
+    metadata: [],
+    onStopSelect: () => { },
+    onDrag: () => { },
+    xScaleTickFormat: "SS",
+    scrubbing: false,
+    yAxisLabel: false,
+    displaySecondYAxis: false,
+    displayArrow: true,
+    selectedTheme: null,
+    totalTime: null,
+    startPositionCurrentTimeIndicator: "0.5",
+};
+const dataElement = PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number,
+});
+const metadataElement = PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string,
+});
+PlotlyPlayback.propTypes = {
+    xRange: PropTypes.shape({
+        from: PropTypes.number,
+        length: PropTypes.number,
+    }),
+    data: PropTypes.arrayOf(PropTypes.arrayOf(dataElement), PropTypes.arrayOf(dataElement)),
+    metadata: PropTypes.arrayOf(metadataElement),
+    onStopSelect: PropTypes.func,
+    onDrag: PropTypes.func,
+    xScaleTickFormat: PropTypes.string,
+    scrubbing: PropTypes.bool,
+    yAxisLabel: PropTypes.bool,
+    displaySecondYAxis: PropTypes.bool,
+    displayArrow: PropTypes.bool,
+    selectedTheme: PropTypes.shape({
+        colors: PropTypes.shape({
+            background: PropTypes.string,
+        }),
+        name: PropTypes.string,
+    }),
+    totalTime: PropTypes.number,
+    startPositionCurrentTimeIndicator: PropTypes.string,
+};
 //# sourceMappingURL=PlotlyPlayback.js.map