@insync-stageplayer/plotly-chart 0.5.27 → 0.5.35-beta.1

package/lib/PlotlyGraph/PlotlyLiveview.js

@@ -1,27 +1,27 @@
-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) => {
-    const start = convertDateToMicroseconds(originalFromDate);
-    const end = convertDateToMicroseconds(originalStopDate);
-    const length = end - start;
-    return [start, length];
-};
+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) => {
+    const start = convertDateToMicroseconds(originalFromDate);
+    const end = convertDateToMicroseconds(originalStopDate);
+    const length = end - start;
+    return [start, length];
+};
 const StyledPlotly = styled(Plot) `
   rect.nsewdrag.cursor-ew-resize {
     cursor: zoom-in;
@@ -29,277 +29,277 @@ const StyledPlotly = styled(Plot) `
   rect.ewdrag.cursor-ew-resize {
     cursor: grab;
   }
-`;
-export const PlotlyLiveview = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, }) => {
-    const [plotData, setPlotData] = useState([]);
-    const [nowLine, setNowline] = useState(1);
-    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.from : 0)
-            : xRange.from / 1e6;
-        const convertXRangeTo = xScaleTickFormat.includes(":")
-            ? convertMicrosecondstoDateFormat(xRange.from > 0 ? 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: "tozero",
-                hoverformat: ".2f",
-                range: [0, 1],
-                title: yAxisLabelLeft,
-                showline: true,
-                showticklabels: false,
-                linewidth: 2,
-                linecolor: selectedTheme.colors.accent,
-                tickformat: null,
-            },
-            xaxis: {
-                rangemode: "tozero",
-                showline: true,
-                linewidth: 2,
-                linecolor: selectedTheme.colors.accent,
-                fixedrange: true,
-                range: [convertXRangeFrom, convertXRangeTo],
-                showticklabels: (data === null || data === void 0 ? void 0 : data.length) === 0 ? false : true,
-                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]"]);
-                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]"]);
-                seekTime = (length / 2 + from) * 1e6;
-            }
-            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 y = signal.map((item) => {
-                return item.y;
-            });
-            const signalData = {
-                x,
-                y,
-                hoverinfo: "skip",
-                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 (xRange.from < 0) {
-            let d = (xRange.length / 2 + (xRange.from * xRange.length) / xRange.length) /
-                xRange.length;
-            setNowline(d);
-        }
-        else {
-            setNowline(1);
-        }
-        sessionStorage.removeItem("nl");
-    }, [plotData, xRange, nowLine]);
-    const shouldNormalize = React.useMemo(() => {
-        const units = metadata.reduce((acc, curr) => {
-            if (curr != undefined && acc.indexOf(curr === null || curr === void 0 ? void 0 : curr.unit) < 0) {
-                return [...acc, curr.unit];
-            }
-            return acc;
-        }, []);
-        return units.length > 1;
-    }, [metadata]);
-    const normalized = React.useMemo(() => {
-        if (plotData.length <= 0)
-            return;
-        if (shouldNormalize) {
-            const newLinesData = plotData.map((item, i) => {
-                const line = metadata[i];
-                const { min, max } = line;
-                const lineRange = max - min;
-                return Object.assign(Object.assign({}, item), { y: item.y.map((value) => {
-                        return (value - min) / lineRange;
-                    }) });
-            });
-            return newLinesData;
-        }
-        return plotData;
-    }, [shouldNormalize, plotData, metadata]);
-    return (React.createElement(StyledPlotly, { useResizeHandler: true, className: "plot-div", data: normalized, layout: layout, style: { width: "100%", height: "100%" }, config: {
-            displaylogo: false,
-            displayModeBar: false,
-            responsive: true,
-        }, onRelayout: (e) => onRelayout(e), onRelayouting: (e) => onRelayouting(e) }));
-});
-PlotlyLiveview.defaultProps = {
-    xRange: null,
-    data: [],
-    metadata: [],
-    onStopSelect: () => { },
-    onDrag: () => { },
-    xScaleTickFormat: "SS",
-    scrubbing: false,
-    yAxisLabel: false,
-    displaySecondYAxis: false,
-    displayArrow: true,
-    selectedTheme: null,
-};
-const dataElement = PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
-});
-const metadataElement = PropTypes.shape({
-    name: PropTypes.string,
-    color: PropTypes.string,
-});
-PlotlyLiveview.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,
-        }),
-    }),
-};
+`;
+export const PlotlyLiveview = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, }) => {
+    const [plotData, setPlotData] = useState([]);
+    const [nowLine, setNowline] = useState(1);
+    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.from : 0)
+            : xRange.from / 1e6;
+        const convertXRangeTo = xScaleTickFormat.includes(":")
+            ? convertMicrosecondstoDateFormat(xRange.from > 0 ? 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: "tozero",
+                hoverformat: ".2f",
+                range: [0, 1],
+                title: yAxisLabelLeft,
+                showline: true,
+                showticklabels: false,
+                linewidth: 2,
+                linecolor: selectedTheme.colors.accent,
+                tickformat: null,
+            },
+            xaxis: {
+                rangemode: "tozero",
+                showline: true,
+                linewidth: 2,
+                linecolor: selectedTheme.colors.accent,
+                fixedrange: true,
+                range: [convertXRangeFrom, convertXRangeTo],
+                showticklabels: (data === null || data === void 0 ? void 0 : data.length) === 0 ? false : true,
+                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]"]);
+                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]"]);
+                seekTime = (length / 2 + from) * 1e6;
+            }
+            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 y = signal.map((item) => {
+                return item.y;
+            });
+            const signalData = {
+                x,
+                y,
+                hoverinfo: "skip",
+                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 (xRange.from < 0) {
+            let d = (xRange.length / 2 + (xRange.from * xRange.length) / xRange.length) /
+                xRange.length;
+            setNowline(d);
+        }
+        else {
+            setNowline(1);
+        }
+        sessionStorage.removeItem("nl");
+    }, [plotData, xRange, nowLine]);
+    const shouldNormalize = React.useMemo(() => {
+        const units = metadata.reduce((acc, curr) => {
+            if (curr != undefined && acc.indexOf(curr === null || curr === void 0 ? void 0 : curr.unit) < 0) {
+                return [...acc, curr.unit];
+            }
+            return acc;
+        }, []);
+        return units.length > 1;
+    }, [metadata]);
+    const normalized = React.useMemo(() => {
+        if (plotData.length <= 0)
+            return;
+        if (shouldNormalize) {
+            const newLinesData = plotData.map((item, i) => {
+                const line = metadata[i];
+                const { min, max } = line;
+                const lineRange = max - min;
+                return Object.assign(Object.assign({}, item), { y: item.y.map((value) => {
+                        return (value - min) / lineRange;
+                    }) });
+            });
+            return newLinesData;
+        }
+        return plotData;
+    }, [shouldNormalize, plotData, metadata]);
+    return (React.createElement(StyledPlotly, { useResizeHandler: true, className: "plot-div", data: normalized, layout: layout, style: { width: "100%", height: "100%" }, config: {
+            displaylogo: false,
+            displayModeBar: false,
+            responsive: true,
+        }, onRelayout: (e) => onRelayout(e), onRelayouting: (e) => onRelayouting(e) }));
+});
+PlotlyLiveview.defaultProps = {
+    xRange: null,
+    data: [],
+    metadata: [],
+    onStopSelect: () => { },
+    onDrag: () => { },
+    xScaleTickFormat: "SS",
+    scrubbing: false,
+    yAxisLabel: false,
+    displaySecondYAxis: false,
+    displayArrow: true,
+    selectedTheme: null,
+};
+const dataElement = PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number,
+});
+const metadataElement = PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string,
+});
+PlotlyLiveview.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,
+        }),
+    }),
+};
 //# sourceMappingURL=PlotlyLiveview.js.map

package/lib/PlotlyGraph/PlotlyPlayback.d.ts

@@ -1,5 +1,5 @@
-export const PlotlyPlayback: React.ForwardRefExoticComponent<Pick<Omit<Omit<Omit<any, "targetRef"> & {
-    targetRef?: any;
-}, "width">, "height">, string | number | symbol> & React.RefAttributes<HTMLElement>>;
-import React from "react";
+export const PlotlyPlayback: React.ForwardRefExoticComponent<Pick<Omit<Omit<Omit<any, "targetRef"> & {
+    targetRef?: any;
+}, "width">, "height">, string | number | symbol> & React.RefAttributes<HTMLElement>>;
+import React from "react";
 //# sourceMappingURL=PlotlyPlayback.d.ts.map

package/lib/PlotlyGraph/PlotlyPlayback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlotlyPlayback.d.ts","sourceRoot":"","sources":["../../src/PlotlyGraph/PlotlyPlayback.js"],"names":[],"mappings":"AAyDA;;sFAqSE"}
+{"version":3,"file":"PlotlyPlayback.d.ts","sourceRoot":"","sources":["../../src/PlotlyGraph/PlotlyPlayback.js"],"names":[],"mappings":"AAkFA;;sFAyjBE"}