@seedtactics/insight-client 16.4.0

package/dist/components/analysis/CycleChart.js

@@ -0,0 +1,281 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2022, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+import { useMemo, memo, useState, useCallback } from "react";
+import { Dialog, DialogContent, DialogActions, TextField, IconButton, Button, styled, ToggleButton, Stack, } from "@mui/material";
+import { ZoomIn } from "@mui/icons-material";
+import { seriesColor } from "../../util/chart-colors.js";
+import { grey } from "@mui/material/colors";
+import { scaleLinear, scaleTime } from "d3-scale";
+import { ChartWithTooltip } from "../ChartTooltip.js";
+import { AxisBottom, AxisLeft, ChartGrid } from "../AxisAndGrid.js";
+import { useSpring, useSprings, animated } from "@react-spring/web";
+import { HashSet, LazySeq } from "@seedtactics/immutable-collections";
+import { atom, useSetAtom } from "jotai";
+import { localPoint } from "../../util/chart-helpers.js";
+function useDataToPlot({ points, stats, partCntPerPoint }) {
+    const series = useMemo(() => {
+        return (LazySeq.of(points)
+            // need to sort first so the color indices are correct
+            .toSortedArray(([k]) => k)
+            .map(([seriesName, seriesPoints], idx) => ({
+            name: seriesName,
+            color: seriesColor(idx, points.size),
+            points: seriesPoints ?? [],
+        })));
+    }, [points]);
+    const median = useMemo(() => {
+        if (stats) {
+            const low = (partCntPerPoint ?? 1) * (stats.medianMinutesForSingleMat - stats.MAD_belowMinutes);
+            const high = (partCntPerPoint ?? 1) * (stats.medianMinutesForSingleMat + stats.MAD_aboveMinutes);
+            return { low, high };
+        }
+        else {
+            return null;
+        }
+    }, [stats, partCntPerPoint]);
+    return { series, median };
+}
+const marginLeft = 50;
+const marginBottom = 30;
+const marginTop = 10;
+const marginRight = 2;
+function useScales({ points, yZoom, default_date_range, current_date_zoom, containerWidth, containerHeight, }) {
+    const width = containerWidth === 0 ? 400 : containerWidth;
+    const height = containerHeight === 0 ? 400 : containerHeight;
+    const xMax = width - marginLeft - marginRight;
+    const yMax = height - marginTop - marginBottom;
+    const xScale = useMemo(() => {
+        if (current_date_zoom) {
+            return scaleTime().domain([current_date_zoom.start, current_date_zoom.end]).range([0, xMax]);
+        }
+        else {
+            return scaleTime().domain([default_date_range[0], default_date_range[1]]).range([0, xMax]);
+        }
+    }, [current_date_zoom, default_date_range, xMax]);
+    const maxYVal = useMemo(() => {
+        if (points.size === 0)
+            return 60;
+        const m = LazySeq.of(points)
+            .flatMap(([, pts]) => pts.map((p) => p.y))
+            .maxBy((y) => y) ?? 1;
+        // round up to nearest 5
+        return Math.ceil(m / 5) * 5;
+    }, [points]);
+    const yScale = useMemo(() => {
+        if (yZoom) {
+            return scaleLinear().domain([yZoom.y_low, yZoom.y_high]).range([yMax, 0]);
+        }
+        else {
+            return scaleLinear().domain([0, maxYVal]).range([yMax, 0]);
+        }
+    }, [yMax, yZoom, maxYVal]);
+    return { height, width, xScale, yScale };
+}
+const AxisAndGrid = memo(function AxisAndGrid({ xScale, yScale }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AxisBottom, { scale: xScale, top: yScale.range()[0] }), _jsx(AxisLeft, { scale: yScale, left: xScale.range()[0], label: "Minutes" }), _jsx(ChartGrid, { width: xScale.range()[1] - xScale.range()[0], height: yScale.range()[0] - yScale.range()[1], xScale: xScale, yScale: yScale })] }));
+});
+const SetYZoomButton = memo(function SetYZoomButton(props) {
+    const [low, setLow] = useState();
+    const [high, setHigh] = useState();
+    const [open, setOpen] = useState(false);
+    function close() {
+        setOpen(false);
+        setLow(undefined);
+        setHigh(undefined);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: () => setOpen(true), children: _jsx(ZoomIn, { fontSize: "inherit" }) }), _jsxs(Dialog, { open: open, onClose: close, children: [_jsxs(DialogContent, { children: [_jsx("div", { style: { marginBottom: "1em" }, children: _jsx(TextField, { type: "number", label: "Y Low", value: low !== undefined ? (isNaN(low) ? "" : low) : (props.yZoom?.y_low ?? ""), onChange: (e) => setLow(parseFloat(e.target.value)), onBlur: () => {
+                                        if (low) {
+                                            props.setZoom((z) => (z ? { ...z, y_low: low } : { y_low: low, y_high: 60 }));
+                                        }
+                                    } }) }), _jsx("div", { style: { marginBottom: "1em" }, children: _jsx(TextField, { type: "number", label: "Y High", value: high !== undefined ? (isNaN(high) ? "" : high) : (props.yZoom?.y_high ?? ""), onChange: (e) => setHigh(parseFloat(e.target.value)), onBlur: () => {
+                                        if (high) {
+                                            props.setZoom((z) => (z ? { ...z, y_high: high } : { y_low: 0, y_high: high }));
+                                        }
+                                    } }) })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: close, children: "Close" }) })] })] }));
+});
+const StatsSeries = memo(function StatsSeries({ median, plannedMinutes, xScale, yScale, }) {
+    const medianSpring = useSpring({
+        to: {
+            x: xScale.range()[0],
+            y: median ? yScale(median.high) : yScale.range()[0],
+            width: xScale.range()[1] - xScale.range()[0],
+            height: median ? yScale(median.low) - yScale(median.high) : 0,
+        },
+        from: {
+            x: xScale.range()[0],
+            y: yScale.range()[0],
+            width: xScale.range()[1] - xScale.range()[0],
+            height: 0,
+        },
+    });
+    const plannedSpring = useSpring({
+        to: { y: plannedMinutes ? yScale(plannedMinutes) : yScale.range()[0] },
+        from: { y: yScale.range()[0] },
+    });
+    return (_jsxs("g", { children: [median ? (_jsx(animated.rect, { x: medianSpring.x, y: medianSpring.y, width: medianSpring.width, height: medianSpring.height, fill: grey[700], opacity: 0.2, pointerEvents: "none" })) : undefined, plannedMinutes ? (_jsx(animated.line, { stroke: "black", x1: xScale.range()[0], x2: xScale.range()[1], y1: plannedSpring.y, y2: plannedSpring.y })) : undefined] }));
+});
+const SingleSeries = memo(function SingleSeries({ seriesName, points, color, xScale, yScale, showTooltip, }) {
+    const show = useCallback((e) => {
+        const p = localPoint(e);
+        if (p === null)
+            return;
+        const idxS = e.target.dataset.idx;
+        if (idxS === undefined)
+            return;
+        showTooltip({
+            left: p.x,
+            top: p.y,
+            pt: points[parseInt(idxS)],
+            seriesName,
+        });
+    }, [showTooltip, points, seriesName]);
+    const springs = useSprings(points.length, points.map((pt) => ({
+        from: { x: xScale(pt.x), y: yScale.range()[0] + 15 },
+        to: { x: xScale(pt.x), y: yScale(pt.y) },
+    })));
+    return (_jsx("g", { children: springs.map((pt, idx) => (_jsx(animated.circle, { className: "bms-cycle-chart-pt", fill: color, r: 5, cx: pt.x, cy: pt.y, "data-idx": idx, onClick: show }, idx))) }));
+});
+const AllPointsSeries = memo(function AllPointsSeries({ series, xScale, yScale, showTooltip, disabledSeries, }) {
+    return (_jsx("g", { children: series
+            .filter((s) => !disabledSeries.has(s.name))
+            .map((s) => (_jsx(SingleSeries, { points: s.points, seriesName: s.name, color: s.color, xScale: xScale, yScale: yScale, showTooltip: showTooltip }, s.name))) }));
+});
+const Legend = memo(function Legend({ series, disabledSeries, adjustDisabled, }) {
+    return (_jsx("div", { style: { marginTop: "1em", display: "flex", flexWrap: "wrap", justifyContent: "space-around" }, children: series.map((s) => (_jsx(ToggleButton, { selected: !disabledSeries.has(s.name), value: s, onChange: () => adjustDisabled((b) => (b.has(s.name) ? b.delete(s.name) : b.add(s.name))), children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { style: { width: "14px", height: "14px", backgroundColor: s.color } }), _jsx("div", { style: { marginLeft: "1em" }, children: s.name })] }) }, s.name))) }));
+});
+const NoPointerEvents = styled("g", { shouldForwardProp: (prop) => prop.toString()[0] !== "$" })(({ $noPtrEvents }) => $noPtrEvents
+    ? {
+        "& .bms-cycle-chart-pt": {
+            pointerevents: "none",
+        },
+    }
+    : undefined);
+const ChartMouseEvents = memo(function ChartMouseEvents({ setYZoom, setXZoom, setTooltip, xScale, yScale, highlightStart, setHighlightStart, }) {
+    // mouse click and drag zooms
+    const [curHighlight, setCurrent] = useState(null);
+    const pointerDown = useCallback((e) => {
+        const p = localPoint(e);
+        if (p === null)
+            return;
+        setCurrent(null);
+        setHighlightStart({ x: p.x - marginLeft, y: p.y - marginTop, nowMS: Date.now() });
+        setTooltip(null);
+    }, [setHighlightStart, setTooltip]);
+    const pointerMove = useCallback((e) => {
+        const p = localPoint(e);
+        if (p === null)
+            return;
+        setCurrent({ x: p.x - marginLeft, y: p.y - marginTop });
+    }, [setCurrent]);
+    const pointerUp = useCallback((e) => {
+        if (highlightStart === null)
+            return;
+        if (Date.now() - highlightStart.nowMS > 500) {
+            const p = localPoint(e);
+            if (p !== null) {
+                const time1 = xScale.invert(highlightStart.x);
+                const time2 = xScale.invert(p.x - marginLeft);
+                const y1 = yScale.invert(highlightStart.y);
+                const y2 = yScale.invert(p.y - marginTop);
+                setYZoom(y1 < y2 ? { y_low: y1, y_high: y2 } : { y_low: y2, y_high: y1 });
+                setXZoom?.({
+                    zoom: time1.getTime() < time2.getTime() ? { start: time1, end: time2 } : { start: time2, end: time1 },
+                });
+            }
+        }
+        setHighlightStart(null);
+        setCurrent(null);
+    }, [highlightStart, setHighlightStart, setCurrent, setXZoom, setYZoom, xScale, yScale]);
+    return (_jsxs("g", { children: [_jsx("rect", { x: 0, y: 0, width: xScale.range()[1], height: yScale.range()[0], fill: "transparent", onPointerDown: pointerDown, onPointerMove: highlightStart !== null ? pointerMove : undefined, onPointerUp: highlightStart !== null ? pointerUp : undefined }), highlightStart !== null && curHighlight !== null ? (_jsx("rect", { x: Math.min(highlightStart.x, curHighlight.x), y: Math.min(highlightStart.y, curHighlight.y), width: Math.abs(highlightStart.x - curHighlight.x), height: Math.abs(highlightStart.y - curHighlight.y), color: "red", pointerEvents: "none", opacity: 0.3 })) : undefined] }));
+});
+const ChartZoomButtons = memo(function ChartZoomButtons({ set_date_zoom_range, current_date_zoom, yZoom, setYZoom, median, }) {
+    return (_jsxs("div", { children: [set_date_zoom_range && (current_date_zoom || yZoom) ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", onClick: () => {
+                            set_date_zoom_range?.({ zoom: undefined });
+                            setYZoom(null);
+                        }, children: "Reset Zoom" }), _jsx(SetYZoomButton, { yZoom: yZoom, setZoom: setYZoom })] })) : undefined, set_date_zoom_range && !current_date_zoom && !yZoom ? (_jsxs("span", { style: { color: "#6b6b76" }, children: ["Zoom via mouse drag", median ? (_jsxs(_Fragment, { children: [_jsx("span", { children: " or " }), _jsx(Button, { size: "small", onClick: () => {
+                                    const high = median.high;
+                                    const low = median.low;
+                                    const extra = 0.2 * (high - low);
+                                    setYZoom({ y_low: low - extra, y_high: high + extra });
+                                }, children: "Zoom To Inliers" })] })) : undefined, _jsx(SetYZoomButton, { yZoom: yZoom, setZoom: setYZoom })] })) : undefined] }));
+});
+const CycleChartTooltip = memo(function CycleChartTooltip({ tooltip, extraTooltip, seriesLabel, }) {
+    if (tooltip === null)
+        return null;
+    return (_jsxs(Stack, { direction: "column", spacing: 0.6, children: [_jsxs("div", { children: ["Time:", " ", tooltip.pt.x.toLocaleString(undefined, {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                        hour: "numeric",
+                        minute: "2-digit",
+                    })] }), _jsxs("div", { children: [seriesLabel, ": ", tooltip.seriesName] }), _jsxs("div", { children: ["Cycle Time: ", tooltip.pt.y.toFixed(1), " minutes"] }), extraTooltip
+                ? extraTooltip(tooltip.pt).map((e, idx) => (_jsxs("div", { children: [e.title, ":", " ", e.link ? (_jsx("a", { style: {
+                                color: "white",
+                                pointerEvents: "auto",
+                                cursor: "pointer",
+                                borderBottom: "1px solid",
+                            }, onClick: e.link, children: e.value })) : (_jsx("span", { children: "e.value" }))] }, idx)))
+                : undefined] }));
+});
+function CycleChartSvg(props) {
+    // computed scales and values
+    const { width, height, xScale, yScale } = useScales({
+        points: props.points,
+        yZoom: props.yZoom,
+        setYZoom: props.setYZoom,
+        default_date_range: props.default_date_range,
+        current_date_zoom: props.current_date_zoom,
+        set_date_zoom_range: props.set_date_zoom_range,
+        containerWidth: props.containerWidth,
+        containerHeight: props.containerHeight,
+    });
+    return (_jsx("svg", { width: width, height: height, children: _jsxs("g", { transform: `translate(${marginLeft}, ${marginTop})`, children: [_jsx(AxisAndGrid, { xScale: xScale, yScale: yScale }), _jsx(StatsSeries, { median: props.median, plannedMinutes: props.plannedTimeMinutes, xScale: xScale, yScale: yScale }), _jsx(ChartMouseEvents, { setYZoom: props.setYZoom, setXZoom: props.set_date_zoom_range, xScale: xScale, setTooltip: props.showTooltip, yScale: yScale, highlightStart: props.highlightStart, setHighlightStart: props.setHighlightStart }), _jsx(NoPointerEvents, { "$noPtrEvents": props.highlightStart !== null, children: _jsx(AllPointsSeries, { series: props.series, disabledSeries: props.disabledSeries, xScale: xScale, yScale: yScale, showTooltip: props.showTooltip }) })] }) }));
+}
+export const CycleChart = memo(function CycleChart(props) {
+    // the state of the chart
+    const tooltipAtom = useMemo(() => atom(null), []);
+    const setTooltip = useSetAtom(tooltipAtom);
+    const [disabledSeries, setDisabled] = useState(HashSet.empty());
+    const [highlightStart, setHighlightStart] = useState(null);
+    const { series, median } = useDataToPlot({
+        points: props.points,
+        stats: props.stats,
+        partCntPerPoint: props.partCntPerPoint,
+    });
+    const pointerLeave = useCallback(() => {
+        setTooltip(null);
+        setHighlightStart(null);
+    }, [setTooltip, setHighlightStart]);
+    return (_jsxs("div", { onPointerLeave: pointerLeave, children: [_jsx(ChartWithTooltip, { sx: { height: { xs: "calc(100vh - 320px)", md: "calc(100vh - 280px)", xl: "calc(100vh - 220px)" } }, tooltipAtom: tooltipAtom, TooltipContent: ({ tooltip }) => (_jsx(CycleChartTooltip, { tooltip: tooltip, seriesLabel: props.series_label, extraTooltip: props.extra_tooltip })), chart: ({ width, height }) => (_jsx(CycleChartSvg, { ...props, containerHeight: height, containerWidth: width, series: series, median: median, yZoom: props.yZoom, setYZoom: props.setYZoom, highlightStart: highlightStart, setHighlightStart: setHighlightStart, showTooltip: setTooltip, disabledSeries: disabledSeries })) }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap" }, children: [_jsx("div", { style: { color: "#6b6b76" }, children: "Click on a point for details" }), _jsx("div", { style: { flexGrow: 1 } }), _jsx(ChartZoomButtons, { set_date_zoom_range: props.set_date_zoom_range, current_date_zoom: props.current_date_zoom, yZoom: props.yZoom, setYZoom: props.setYZoom, median: median })] }), _jsx(Legend, { series: series, disabledSeries: disabledSeries, adjustDisabled: setDisabled })] }));
+});

package/dist/components/analysis/DataTable.d.ts

@@ -0,0 +1,83 @@
+import { ComponentType, SetStateAction, MouseEvent, ReactNode, PureComponent } from "react";
+import { ToComparable, ToComparableBase } from "@seedtactics/immutable-collections";
+import { SelectedAnalysisPeriod } from "../../network/load-specific-month.js";
+import { WritableAtom } from "jotai";
+export type Column<Id, Row> = {
+    readonly id: Id;
+    readonly numeric: boolean;
+    readonly label: string;
+    readonly getDisplay: (c: Row) => string;
+    readonly getForSort?: ToComparableBase<Row>;
+    readonly getForExport?: (c: Row) => string;
+    readonly Cell?: ComponentType<{
+        readonly row: Row;
+    }>;
+    readonly expanded?: boolean;
+    readonly ignoreDuringExport?: boolean;
+    readonly openFilterDialog?: WritableAtom<unknown, [boolean], unknown>;
+};
+export type ColSort<Id, Row> = {
+    readonly orderBy: Id;
+    readonly order: "asc" | "desc";
+    readonly sortOn: ToComparable<Row>;
+    readonly handleRequestSort: (property: Id) => void;
+};
+export type TablePage = {
+    readonly page: number;
+    readonly rowsPerPage: number;
+    readonly setPage: (p: number) => void;
+    readonly setRowsPerPage: (r: SetStateAction<number>) => void;
+};
+export type DataTableActionZoomIntoRange = {
+    readonly type: "ZoomIntoRange";
+    readonly default_date_range: Date[];
+    readonly current_date_zoom: {
+        start: Date;
+        end: Date;
+    } | undefined;
+    readonly set_date_zoom_range: (p: {
+        start: Date;
+        end: Date;
+    } | undefined) => void;
+};
+export type DataTableActionZoom = {
+    readonly type: "Last30Days";
+    readonly set_days_back: (numDaysBack: number | null) => void;
+} | DataTableActionZoomIntoRange | {
+    readonly type: "ExtendDays";
+    readonly curStart: Date;
+    readonly curEnd: Date;
+    readonly extend: (numDays: number) => void;
+};
+export type TableZoom = {
+    readonly zoomRange: {
+        readonly start: Date;
+        readonly end: Date;
+    } | undefined;
+    readonly zoom: DataTableActionZoom | undefined;
+};
+export declare function DataTableHead<Id extends string | number, Row>(props: {
+    readonly sort: ColSort<Id, Row>;
+    readonly columns: ReadonlyArray<Column<Id, Row>>;
+    readonly showDetailsCol: boolean;
+    readonly copyToClipboardRows?: Iterable<Row>;
+}): ReactNode;
+export declare const DataTableActions: import("react").NamedExoticComponent<{
+    readonly tpage: TablePage;
+    readonly count: number;
+    readonly zoom?: DataTableActionZoom;
+}>;
+export declare class DataTableBody<Id extends string | number, Row> extends PureComponent<{
+    readonly pageData: Iterable<Row>;
+    readonly columns: ReadonlyArray<Column<Id, Row>>;
+    readonly onClickDetails?: (event: MouseEvent, r: Row) => void;
+    readonly rowsPerPage?: number;
+    readonly emptyMessage?: string;
+}> {
+    render(): ReactNode;
+}
+export declare function useTableZoomForPeriod(period: SelectedAnalysisPeriod): TableZoom;
+export declare function useTablePage(): TablePage;
+export declare function useColSort<Id, Row>(defSortCol: Id, cols: ReadonlyArray<Column<Id, Row>>, defOrder?: "asc" | "desc"): ColSort<Id, Row>;
+export declare function buildClipboardTableAsString<Id, Row>(columns: ReadonlyArray<Column<Id, Row>>, rows: Iterable<Row>): string;
+export declare function copyTableToClipboard<Id, Row>(columns: ReadonlyArray<Column<Id, Row>>, rows: Iterable<Row>): void;

package/dist/components/analysis/DataTable.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2025, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+import { useState, memo, useMemo, PureComponent, } from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle, styled, TableBody, TableCell, TableHead, TableRow, TableSortLabel, Tooltip, IconButton, Toolbar, Typography, Select, InputBase, MenuItem, Button, } from "@mui/material";
+import { Calendar } from "react-calendar";
+import { MoreHoriz, FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon, ZoomOut as ZoomOutIcon, ZoomIn as ZoomInIcon, SkipPrevious as SkipPrevIcon, SkipNext as SkipNextIcon, ImportExport, FilterList, } from "@mui/icons-material";
+import copy from "copy-to-clipboard";
+import { addDays, addHours, addMonths } from "date-fns";
+import { useSetAtom } from "jotai";
+const DataCell = styled(TableCell, { shouldForwardProp: (p) => p !== "expand" })(({ expand }) => ({
+    width: expand ? "100%" : undefined,
+}));
+function OpenFilterButton({ open }) {
+    const setOpen = useSetAtom(open);
+    return (_jsx(Tooltip, { title: "Filter", enterDelay: 300, children: _jsx(IconButton, { onClick: () => setOpen(true), size: "small", children: _jsx(FilterList, {}) }) }));
+}
+export function DataTableHead(props) {
+    const clipboardRows = props.copyToClipboardRows;
+    return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [props.columns.map((col) => (_jsxs(DataCell, { align: col.numeric ? "right" : "left", expand: col.expanded, sortDirection: props.sort.orderBy === col.id ? props.sort.order : false, children: [_jsx(Tooltip, { title: "Sort", placement: col.numeric ? "bottom-end" : "bottom-start", enterDelay: 300, children: _jsx(TableSortLabel, { active: props.sort.orderBy === col.id, direction: props.sort.order, onClick: () => props.sort.handleRequestSort(col.id), children: col.label }) }), col.openFilterDialog ? _jsx(OpenFilterButton, { open: col.openFilterDialog }) : undefined] }, col.id))), props.showDetailsCol ? (_jsx(DataCell, { padding: "checkbox", children: clipboardRows ? (_jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, onClick: () => copyTableToClipboard(props.columns, clipboardRows), size: "large", children: _jsx(ImportExport, {}) }) })) : undefined })) : undefined] }) }));
+}
+const dateFormat = new Intl.DateTimeFormat([], { year: "numeric", month: "short", day: "numeric" });
+const monthFormat = new Intl.DateTimeFormat([], { year: "numeric", month: "long" });
+const StyledCalendar = styled(Calendar)(({ theme }) => ({
+    width: "350px",
+    "& .react-calendar__month-view__weekdays": {
+        textAlign: "center",
+        textTransform: "uppercase",
+        fontWeight: "bold",
+    },
+    "& .react-calendar__tile": {
+        textAlign: "center",
+        padding: ".75em .5em",
+        margin: 0,
+        border: 0,
+        background: "none",
+        outline: "none",
+        cursor: "pointer",
+        "&:hover": {
+            backgroundColor: "rgb(230, 230, 230)",
+        },
+        "&--active": {
+            backgroundColor: theme.palette.primary.light,
+            "&:hover": {
+                backgroundColor: theme.palette.primary.dark,
+            },
+        },
+    },
+    // react-calendar__tile--hover is when selecting range of days.
+    "&.react-calendar--selectRange .react-calendar__tile--hover": {
+        backgroundColor: "rgb(230, 230, 230)",
+    },
+}));
+function SelectDateRange(props) {
+    const [open, setOpen] = useState(false);
+    const start = props.zoom.current_date_zoom
+        ? props.zoom.current_date_zoom.start
+        : props.zoom.default_date_range[0];
+    const end = addDays(props.zoom.current_date_zoom ? props.zoom.current_date_zoom.end : props.zoom.default_date_range[1], -1);
+    function onChange(d) {
+        props.zoom.set_date_zoom_range({
+            start: d[0],
+            end: addDays(d[1], 1),
+        });
+        setOpen(false);
+    }
+    // @types/react-calendar has the wrong type for onChange
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+    const matchingOnChange = onChange;
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { children: [dateFormat.format(props.zoom.current_date_zoom?.start ?? props.zoom.default_date_range[0]), " -", " ", dateFormat.format(props.zoom.current_date_zoom?.end ?? props.zoom.default_date_range[1])] }), _jsx(Tooltip, { title: "Zoom To Date Range", children: _jsx(IconButton, { onClick: () => setOpen(true), size: "large", children: _jsx(ZoomInIcon, {}) }) }), _jsx(Tooltip, { title: "Reset Date Range", children: _jsx(IconButton, { onClick: () => props.zoom.set_date_zoom_range(undefined), size: "large", children: _jsx(ZoomOutIcon, {}) }) }), _jsxs(Dialog, { open: open, onClose: () => setOpen(false), children: [_jsxs(DialogTitle, { children: ["Select Date Range ", monthFormat.format(props.zoom.default_date_range[0])] }), _jsx(DialogContent, { children: _jsx(StyledCalendar, { minDate: props.zoom.default_date_range[0], maxDate: props.zoom.default_date_range[1], calendarType: "gregory", selectRange: true, showNavigation: false, showNeighboringMonth: false, value: [start, end], onChange: matchingOnChange }) }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setOpen(false), children: "Close" }) })] })] }));
+}
+export const DataTableActions = memo(function DataTableActions({ zoom, tpage, count, }) {
+    let zoomCtrl;
+    if (zoom && zoom.type === "Last30Days") {
+        zoomCtrl = (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Last 24 hours", children: _jsx(Button, { onClick: () => zoom.set_days_back(1), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "24h" }) }), _jsx(Tooltip, { title: "Last 2 days", children: _jsx(Button, { onClick: () => zoom.set_days_back(2), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "2d" }) }), _jsx(Tooltip, { title: "Last 3 days", children: _jsx(Button, { onClick: () => zoom.set_days_back(3), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "3d" }) }), _jsx(Tooltip, { title: "Last 4 days", children: _jsx(Button, { onClick: () => zoom.set_days_back(4), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "4d" }) }), _jsx(Tooltip, { title: "Last 5 days", children: _jsx(Button, { onClick: () => zoom.set_days_back(5), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "5d" }) }), _jsx(Tooltip, { title: "Last 6 days", children: _jsx(Button, { onClick: () => zoom.set_days_back(6), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "6d" }) }), _jsx(Tooltip, { title: "Last 1 week", children: _jsx(Button, { onClick: () => zoom.set_days_back(7), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "1w" }) }), _jsx(Tooltip, { title: "Last 2 weeks", children: _jsx(Button, { onClick: () => zoom.set_days_back(7 * 2), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "2w" }) }), _jsx(Tooltip, { title: "Last 3 weeks", children: _jsx(Button, { onClick: () => zoom.set_days_back(7 * 3), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "3w" }) }), _jsx(Tooltip, { title: "Last 30 days", children: _jsx(Button, { onClick: () => zoom.set_days_back(null), style: { color: "rgba(0, 0, 0, 0.54)" }, children: "30d" }) })] }));
+    }
+    else if (zoom && zoom.type === "ZoomIntoRange") {
+        zoomCtrl = _jsx(SelectDateRange, { zoom: zoom });
+    }
+    else if (zoom && zoom.type === "ExtendDays") {
+        zoomCtrl = (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Extend 1 day previous", children: _jsx(IconButton, { onClick: () => zoom.extend(-1), size: "large", children: _jsx(SkipPrevIcon, {}) }) }), _jsx(Typography, { variant: "caption", children: zoom.curStart.toLocaleDateString() + " to " + zoom.curEnd.toLocaleDateString() }), _jsx(Tooltip, { title: "Extend 1 day", children: _jsx(IconButton, { onClick: () => zoom.extend(1), size: "large", children: _jsx(SkipNextIcon, {}) }) })] }));
+    }
+    return (_jsxs(Toolbar, { children: [_jsx(Typography, { color: "textSecondary", variant: "caption", children: "Rows per page:" }), _jsx(Select, { style: { marginLeft: 8, marginRight: "1em" }, value: tpage.rowsPerPage, SelectDisplayProps: { style: { color: "rgba(0, 0, 0, 0.54)" } }, input: _jsx(InputBase, {}), onChange: (evt) => {
+                    tpage.setRowsPerPage(evt.target.value);
+                    const maxPage = Math.ceil(count / evt.target.value) - 1;
+                    if (tpage.page > maxPage) {
+                        tpage.setPage(maxPage);
+                    }
+                }, children: [10, 15, 20, 50].map((rowsPerPageOption) => (_jsx(MenuItem, { value: rowsPerPageOption, children: rowsPerPageOption }, rowsPerPageOption))) }), _jsx(Typography, { color: "textSecondary", variant: "caption", children: `${count === 0 ? 0 : tpage.page * tpage.rowsPerPage + 1}-${Math.min(count, (tpage.page + 1) * tpage.rowsPerPage)} of ${count}` }), _jsx(IconButton, { onClick: () => tpage.setPage(0), disabled: tpage.page === 0, "aria-label": "First Page", size: "large", children: _jsx(FirstPageIcon, {}) }), _jsx(IconButton, { onClick: () => tpage.setPage(tpage.page - 1), disabled: tpage.page === 0, "aria-label": "Previous Page", size: "large", children: _jsx(KeyboardArrowLeft, {}) }), _jsx(IconButton, { onClick: () => tpage.setPage(tpage.page + 1), disabled: tpage.page >= Math.ceil(count / tpage.rowsPerPage) - 1, "aria-label": "Next Page", size: "large", children: _jsx(KeyboardArrowRight, {}) }), _jsx(IconButton, { onClick: () => tpage.setPage(Math.max(0, Math.ceil(count / tpage.rowsPerPage) - 1)), disabled: tpage.page >= Math.ceil(count / tpage.rowsPerPage) - 1, "aria-label": "Last Page", size: "large", children: _jsx(LastPageIcon, {}) }), zoom ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { flexGrow: 1 } }), zoomCtrl] })) : undefined] }));
+});
+// This is a class component because memo of a function component doesn't infer the column/row
+// types correctly.
+export class DataTableBody extends PureComponent {
+    render() {
+        const onClickDetails = this.props.onClickDetails;
+        const rows = [...this.props.pageData];
+        const emptyRows = this.props.rowsPerPage !== undefined ? Math.max(0, this.props.rowsPerPage - rows.length) : 0;
+        return (_jsxs(TableBody, { children: [rows.map((row, idx) => (_jsxs(TableRow, { children: [this.props.columns.map((col) => (_jsx(DataCell, { align: col.numeric ? "right" : "left", expand: col.expanded, children: col.Cell ? _jsx(col.Cell, { row: row }) : col.getDisplay(row) }, col.id))), onClickDetails ? (_jsx(DataCell, { padding: "checkbox", children: _jsx(IconButton, { onClick: (e) => onClickDetails(e, row), size: "large", children: _jsx(MoreHoriz, {}) }) })) : undefined] }, idx))), emptyRows > 0 ? (_jsx(TableRow, { style: { height: 53 * emptyRows }, children: _jsx(TableCell, { colSpan: this.props.columns.length + (this.props.onClickDetails ? 1 : 0), style: { textAlign: "center" }, children: rows.length === 0 ? this.props.emptyMessage : undefined }) })) : undefined] }));
+    }
+}
+export function useTableZoomForPeriod(period) {
+    const [curZoom, setCurZoom] = useState(undefined);
+    return useMemo(() => {
+        let zoom;
+        if (period.type === "Last30") {
+            zoom = {
+                type: "Last30Days",
+                set_days_back: (numDaysBack) => {
+                    if (numDaysBack) {
+                        const now = new Date();
+                        setCurZoom({ start: addDays(now, -numDaysBack), end: addHours(now, 1) });
+                    }
+                    else {
+                        setCurZoom(undefined);
+                    }
+                },
+            };
+        }
+        else {
+            zoom = {
+                type: "ZoomIntoRange",
+                default_date_range: [period.month, addMonths(period.month, 1)],
+                current_date_zoom: curZoom,
+                set_date_zoom_range: setCurZoom,
+            };
+        }
+        return { zoom, zoomRange: curZoom };
+    }, [period, curZoom, setCurZoom]);
+}
+export function useTablePage() {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    return useMemo(() => ({ page, setPage, rowsPerPage, setRowsPerPage }), [page, setPage, rowsPerPage, setRowsPerPage]);
+}
+export function useColSort(defSortCol, cols, defOrder) {
+    const [orderBy, setOrderBy] = useState(defSortCol);
+    const [order, setOrder] = useState(defOrder ?? "asc");
+    return useMemo(() => {
+        function handleRequestSort(property) {
+            if (orderBy === property) {
+                setOrder(order === "asc" ? "desc" : "asc");
+            }
+            else {
+                setOrderBy(property);
+                setOrder("asc");
+            }
+        }
+        let sortOn = {
+            asc: cols[0].getForSort ?? cols[0].getDisplay,
+        };
+        for (const col of cols) {
+            if (col.id === orderBy && order === "asc") {
+                sortOn = { asc: col.getForSort ?? col.getDisplay };
+            }
+            else if (col.id === orderBy) {
+                sortOn = { desc: col.getForSort ?? col.getDisplay };
+            }
+        }
+        return { orderBy, order, sortOn, handleRequestSort };
+    }, [orderBy, setOrderBy, order, setOrder, cols]);
+}
+export function buildClipboardTableAsString(columns, rows) {
+    let table = "<table>\n<thead><tr>";
+    for (const col of columns) {
+        if (!col.ignoreDuringExport) {
+            table += "<th>" + col.label + "</th>";
+        }
+    }
+    table += "</tr></thead>\n<tbody>\n";
+    for (const row of rows) {
+        table += "<tr>";
+        for (const col of columns) {
+            if (!col.ignoreDuringExport) {
+                const val = col.getForExport ? col.getForExport(row) : col.getDisplay(row);
+                table += "<td>" + val + "</td>";
+            }
+        }
+        table += "</tr>\n";
+    }
+    table += "</tbody>\n</table>";
+    return table;
+}
+export function copyTableToClipboard(columns, rows) {
+    copy(buildClipboardTableAsString(columns, rows));
+}

package/dist/components/analysis/EfficiencyPage.d.ts

@@ -0,0 +1,2 @@
+export declare function StationOeeHeatmap(): import("react/jsx-runtime").JSX.Element;
+export declare function CompletedCountHeatmap(): import("react/jsx-runtime").JSX.Element;