@seedtactics/insight-client 16.4.0

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

@@ -0,0 +1,25 @@
+import { MaterialSummaryAndCompletedData } from "../../cell-status/material-summary.js";
+import { PartCycleData } from "../../cell-status/station-cycles.js";
+import { HashMap } from "@seedtactics/immutable-collections";
+import { SelectedAnalysisPeriod } from "../../network/load-specific-month.js";
+interface StationDataTableProps {
+    readonly points: ReadonlyMap<string, ReadonlyArray<PartCycleData>>;
+    readonly matsById: HashMap<number, MaterialSummaryAndCompletedData>;
+    readonly current_date_zoom: {
+        start: Date;
+        end: Date;
+    } | undefined;
+    readonly set_date_zoom_range: ((p: {
+        zoom?: {
+            start: Date;
+            end: Date;
+        };
+    }) => void) | undefined;
+    readonly period: SelectedAnalysisPeriod;
+    readonly showWorkorderAndInspect: boolean;
+    readonly hideMedian?: boolean;
+    readonly defaultSortDesc?: boolean;
+    readonly emptyMessage?: string;
+}
+declare const _default: import("react").NamedExoticComponent<StationDataTableProps>;
+export default _default;

package/dist/components/analysis/StationDataTable.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2019, 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 { memo, useState } from "react";
+import { Table } from "@mui/material";
+import { format_cycle_inspection } from "../../data/results.cycles.js";
+import { DataTableHead, DataTableActions, DataTableBody, useColSort, useTablePage, } from "./DataTable.js";
+import { addDays, addHours, addMonths } from "date-fns";
+import { Menu } from "@mui/material";
+import { MenuItem } from "@mui/material";
+import { materialDialogOpen } from "../../cell-status/material-details.js";
+import { LazySeq, mkCompareByProperties, } from "@seedtactics/immutable-collections";
+import { useSetAtom } from "jotai";
+var ColumnId;
+(function (ColumnId) {
+    ColumnId[ColumnId["Date"] = 0] = "Date";
+    ColumnId[ColumnId["Part"] = 1] = "Part";
+    ColumnId[ColumnId["Station"] = 2] = "Station";
+    ColumnId[ColumnId["Pallet"] = 3] = "Pallet";
+    ColumnId[ColumnId["Serial"] = 4] = "Serial";
+    ColumnId[ColumnId["Workorder"] = 5] = "Workorder";
+    ColumnId[ColumnId["Operation"] = 6] = "Operation";
+    ColumnId[ColumnId["Inspection"] = 7] = "Inspection";
+    ColumnId[ColumnId["ElapsedMin"] = 8] = "ElapsedMin";
+    ColumnId[ColumnId["ActiveMin"] = 9] = "ActiveMin";
+    ColumnId[ColumnId["MedianElapsed"] = 10] = "MedianElapsed";
+    ColumnId[ColumnId["MedianDeviation"] = 11] = "MedianDeviation";
+})(ColumnId || (ColumnId = {}));
+function buildColumns(matIds) {
+    return [
+        {
+            id: ColumnId.Date,
+            numeric: false,
+            label: "Date",
+            getDisplay: (c) => c.endTime.toLocaleString(),
+            getForSort: (c) => c.endTime.getTime(),
+        },
+        {
+            id: ColumnId.Part,
+            numeric: false,
+            label: "Part",
+            getDisplay: (c) => c.part +
+                "-" +
+                LazySeq.of(c.material)
+                    .map((m) => m.proc)
+                    .distinctAndSortBy((p) => p)
+                    .toRArray()
+                    .join(":"),
+        },
+        {
+            id: ColumnId.Station,
+            numeric: false,
+            label: "Station",
+            getDisplay: (c) => c.stationGroup + " " + c.stationNumber.toString(),
+        },
+        {
+            id: ColumnId.Operation,
+            numeric: false,
+            label: "Operation",
+            getDisplay: (c) => c.operation,
+        },
+        {
+            id: ColumnId.Pallet,
+            numeric: false,
+            label: "Pallet",
+            getDisplay: (c) => c.pallet.toString(),
+            getForSort: (c) => c.pallet,
+        },
+        {
+            id: ColumnId.Serial,
+            numeric: false,
+            label: "Serial",
+            getDisplay: (c) => c.material
+                .filter((m) => m.serial)
+                .map((m) => m.serial)
+                .join(", "),
+        },
+        {
+            id: ColumnId.Workorder,
+            numeric: false,
+            label: "Workorder",
+            getDisplay: (c) => c.material
+                .filter((m) => m.workorder)
+                .map((m) => m.workorder)
+                .join(", "),
+        },
+        {
+            id: ColumnId.Inspection,
+            numeric: false,
+            label: "Inspection",
+            getDisplay: (c) => format_cycle_inspection(c, matIds),
+            getForSort: (c) => {
+                return LazySeq.of(c.material)
+                    .collect((m) => matIds.get(m.id))
+                    .flatMap((m) => m.signaledInspections)
+                    .distinct()
+                    .toSortedArray((x) => x)
+                    .join(",");
+            },
+        },
+        {
+            id: ColumnId.ElapsedMin,
+            numeric: true,
+            label: "Elapsed Min",
+            getDisplay: (c) => (c.elapsedMinsPerMaterial * c.material.length).toFixed(1),
+        },
+        {
+            id: ColumnId.ActiveMin,
+            numeric: true,
+            label: "Target Min",
+            getDisplay: (c) => c.activeMinutes.toFixed(1),
+        },
+        {
+            id: ColumnId.MedianElapsed,
+            numeric: true,
+            label: "Median Elapsed Min",
+            getDisplay: (c) => c.medianCycleMinutes.toFixed(1),
+        },
+        {
+            id: ColumnId.MedianDeviation,
+            numeric: true,
+            label: "Median Deviation",
+            getDisplay: (c) => c.MAD_aboveMinutes.toFixed(1),
+        },
+    ];
+}
+function extractData(points, columns, currentZoom, orderBy, order) {
+    let getData;
+    for (const col of columns) {
+        if (col.id === orderBy) {
+            getData = col.getForSort || col.getDisplay;
+        }
+    }
+    if (getData === undefined) {
+        getData = columns[0].getForSort || columns[0].getDisplay;
+    }
+    const getDataC = getData;
+    const data = LazySeq.of(points.values()).flatMap((x) => x);
+    const arr = currentZoom
+        ? data.filter((p) => p.endTime >= currentZoom.start && p.endTime <= currentZoom.end).toMutableArray()
+        : data.toMutableArray();
+    return arr.sort(mkCompareByProperties(order === "desc" ? { desc: getDataC } : { asc: getDataC }, order === "desc" ? { desc: (a) => a.endTime.getTime() } : { asc: (a) => a.endTime.getTime() }));
+}
+function useZoom(props) {
+    let zoom;
+    const setZoomRange = props.set_date_zoom_range;
+    if (setZoomRange) {
+        if (props.period.type === "Last30") {
+            zoom = {
+                type: "Last30Days",
+                set_days_back: (numDaysBack) => {
+                    if (numDaysBack) {
+                        const now = new Date();
+                        setZoomRange({ zoom: { start: addDays(now, -numDaysBack), end: addHours(now, 1) } });
+                    }
+                    else {
+                        setZoomRange({ zoom: undefined });
+                    }
+                },
+            };
+        }
+        else {
+            zoom = {
+                type: "ZoomIntoRange",
+                default_date_range: [props.period.month, addMonths(props.period.month, 1)],
+                current_date_zoom: props.current_date_zoom,
+                set_date_zoom_range: (z) => setZoomRange({ zoom: z }),
+            };
+        }
+    }
+    return {
+        zoom,
+        zoomRange: props.current_date_zoom,
+    };
+}
+export default memo(function StationDataTable(props) {
+    const columns = buildColumns(props.matsById);
+    const sort = useColSort(ColumnId.Date, columns);
+    const tpage = useTablePage();
+    const zoom = useZoom(props);
+    const [detailMenu, setDetailMenu] = useState(null);
+    const setMatToShow = useSetAtom(materialDialogOpen);
+    const allData = extractData(props.points, columns, props.current_date_zoom, sort.orderBy, sort.order);
+    const totalDataLength = allData.length;
+    const pageData = allData.slice(tpage.page * tpage.rowsPerPage, (tpage.page + 1) * tpage.rowsPerPage);
+    const filteredColumns = columns.filter((c) => {
+        if (!props.showWorkorderAndInspect && c.id === ColumnId.Workorder) {
+            return false;
+        }
+        if (!props.showWorkorderAndInspect && c.id === ColumnId.Inspection) {
+            return false;
+        }
+        if (props.hideMedian && c.id === ColumnId.MedianElapsed) {
+            return false;
+        }
+        if (props.hideMedian && c.id === ColumnId.MedianDeviation) {
+            return false;
+        }
+        return true;
+    });
+    return (_jsxs("div", { children: [_jsxs(Table, { children: [_jsx(DataTableHead, { columns: filteredColumns, sort: sort, showDetailsCol: true }), _jsx(DataTableBody, { columns: filteredColumns, pageData: pageData, rowsPerPage: tpage.rowsPerPage, onClickDetails: (e, row) => {
+                            if (row.material.length === 0)
+                                return;
+                            if (row.material.length === 1) {
+                                setMatToShow({ type: "LogMat", logMat: row.material[0] });
+                            }
+                            else {
+                                setDetailMenu({ anchorEl: e.currentTarget, material: row.material });
+                            }
+                        }, emptyMessage: props.emptyMessage })] }), _jsx(DataTableActions, { zoom: zoom.zoom, tpage: tpage, count: totalDataLength }), _jsx(Menu, { anchorEl: detailMenu?.anchorEl, keepMounted: true, open: detailMenu !== null, onClose: () => setDetailMenu(null), children: detailMenu != null
+                    ? detailMenu.material.map((mat, idx) => (_jsx(MenuItem, { onClick: () => {
+                            setMatToShow({ type: "LogMat", logMat: mat });
+                            setDetailMenu(null);
+                        }, children: mat.serial || "Material" }, idx)))
+                    : undefined })] }));
+});

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

@@ -0,0 +1 @@
+export declare const ToolReplacementPage: import("react").NamedExoticComponent<object>;

package/dist/components/analysis/ToolReplacements.js

@@ -0,0 +1,370 @@
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } 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 { Box, FormControl, IconButton, MenuItem, Select, Stack, Table, Tooltip, Typography, } from "@mui/material";
+import { ImportExport } from "@mui/icons-material";
+import { createContext, memo, useContext, useMemo } from "react";
+import { selectedAnalysisPeriod } from "../../network/load-specific-month.js";
+import { last30ToolReplacements, specificMonthToolReplacements, } from "../../cell-status/tool-replacements.js";
+import { copyTableToClipboard, DataTableActions, DataTableBody, DataTableHead, useColSort, useTablePage, useTableZoomForPeriod, } from "./DataTable.js";
+import { OrderedMap } from "@seedtactics/immutable-collections";
+import { scaleLinear, scaleTime } from "d3-scale";
+import { addDays, addMonths, startOfToday } from "date-fns";
+import { Tooltip as ChartTooltip } from "../ChartTooltip.js";
+import { localPoint } from "../../util/chart-helpers.js";
+import { useSetTitle } from "../routes.js";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useResizeDetector } from "react-resize-detector";
+function tool_replacements_with_station_and_date(zoom, allReplacements, station) {
+    const zoomRange = zoom?.zoomRange;
+    if (station) {
+        const rsForStat = allReplacements.get(station) ?? OrderedMap.empty();
+        return rsForStat
+            .valuesToAscLazySeq()
+            .transform((x) => zoomRange ? x.filter((rs) => rs.time >= zoomRange.start && rs.time <= zoomRange.end) : x)
+            .flatMap((rs) => rs.replacements.map((r) => ({ ...r, station, time: rs.time })));
+    }
+    else {
+        return allReplacements.toAscLazySeq().flatMap(([station, rsByStat]) => rsByStat
+            .valuesToAscLazySeq()
+            .transform((x) => zoomRange ? x.filter((rs) => rs.time >= zoomRange.start && rs.time <= zoomRange.end) : x)
+            .flatMap((rs) => rs.replacements.map((r) => ({ ...r, station, time: rs.time }))));
+    }
+}
+function tool_summary(zoom, allReplacements, station, sortOn) {
+    return tool_replacements_with_station_and_date(zoom, allReplacements, station)
+        .groupBy((r) => r.tool)
+        .map(([tool, replacements]) => {
+        let totalUse = 0;
+        let maxUse = null;
+        let totalCnt = 0;
+        let maxCnt = null;
+        for (const r of replacements) {
+            const u = r.type === "ReplaceBeforeCycleStart" ? r.useAtReplacement : r.totalUseAtBeginningOfCycle;
+            if (u && (maxUse === null || u > maxUse)) {
+                maxUse = u;
+            }
+            if (u)
+                totalUse += u;
+            const c = r.type === "ReplaceBeforeCycleStart" ? r.cntAtReplacement : r.totalCntAtBeginningOfCycle;
+            if (c && (maxCnt === null || c > maxCnt)) {
+                maxCnt = c;
+            }
+            if (c)
+                totalCnt += c;
+        }
+        return {
+            tool,
+            numReplacements: replacements.length,
+            totalUseOfAllReplacements: totalUse,
+            totalCntOfAllReplacements: totalCnt,
+            maxY: maxUse ?? maxCnt ?? 1,
+            yAxisType: maxUse === null ? "Count" : "Time",
+            replacements,
+        };
+    })
+        .toSortedArray(sortOn);
+}
+function replacementToYVal(row, r) {
+    const def = row.maxY / 2;
+    if (r.type === "ReplaceBeforeCycleStart") {
+        if (row.yAxisType === "Time") {
+            return r.useAtReplacement ?? def;
+        }
+        else {
+            return r.cntAtReplacement ?? def;
+        }
+    }
+    else {
+        if (row.yAxisType === "Time") {
+            return r.totalUseAtBeginningOfCycle ?? def;
+        }
+        else {
+            return r.totalCntAtBeginningOfCycle ?? def;
+        }
+    }
+}
+var SummaryColumnId;
+(function (SummaryColumnId) {
+    SummaryColumnId[SummaryColumnId["Tool"] = 0] = "Tool";
+    SummaryColumnId[SummaryColumnId["NumReplacements"] = 1] = "NumReplacements";
+    SummaryColumnId[SummaryColumnId["AvgUseAtReplacement"] = 2] = "AvgUseAtReplacement";
+    SummaryColumnId[SummaryColumnId["AvgCntAtReplacement"] = 3] = "AvgCntAtReplacement";
+    SummaryColumnId[SummaryColumnId["Graph"] = 4] = "Graph";
+})(SummaryColumnId || (SummaryColumnId = {}));
+const decimalFormat = Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 1,
+});
+const CurZoomContext = createContext({
+    start: new Date(),
+    end: new Date(),
+});
+function ReplacementTooltip({ tooltip }) {
+    return (_jsxs(Stack, { spacing: 0.5, children: [_jsxs("div", { children: ["Tool: ", tooltip.r.tool] }), _jsxs("div", { children: ["Pocket: ", tooltip.r.pocket] }), _jsxs("div", { children: ["Time: ", tooltip.r.time.toLocaleString()] }), _jsxs("div", { children: ["Station: ", tooltip.r.station.group, " #", tooltip.r.station.num] }), tooltip.r.type === "ReplaceBeforeCycleStart" ? (_jsxs(_Fragment, { children: [tooltip.r.useAtReplacement !== null ? (_jsxs("div", { children: ["Minutes at replacement: ", decimalFormat.format(tooltip.r.useAtReplacement)] })) : undefined, tooltip.r.cntAtReplacement !== null ? (_jsxs("div", { children: ["Count at replacement: ", decimalFormat.format(tooltip.r.cntAtReplacement)] })) : undefined] })) : (_jsxs(_Fragment, { children: [tooltip.r.totalUseAtBeginningOfCycle !== null ? (_jsxs("div", { children: ["Minutes at beginning of cycle: ", decimalFormat.format(tooltip.r.totalUseAtBeginningOfCycle)] })) : undefined, tooltip.r.totalUseAtEndOfCycle !== null ? (_jsxs("div", { children: ["Minutes at end of cycle: ", decimalFormat.format(tooltip.r.totalUseAtEndOfCycle)] })) : undefined, tooltip.r.totalCntAtBeginningOfCycle !== null ? (_jsxs("div", { children: ["Count at beginning of cycle: ", decimalFormat.format(tooltip.r.totalCntAtBeginningOfCycle)] })) : undefined, tooltip.r.totalCntAtEndOfCycle !== null ? (_jsxs("div", { children: ["Count at end of cycle: ", decimalFormat.format(tooltip.r.totalCntAtEndOfCycle)] })) : undefined] }))] }));
+}
+function Replacements({ row, tooltip, timeScale, yScale, }) {
+    const [t, setTooltip] = useAtom(tooltip);
+    return (_jsx("g", { children: row.replacements.map((r, i) => (_jsx("circle", { cx: timeScale(r.time), cy: yScale(replacementToYVal(row, r)), r: r === t?.r ? 4 : 2, onMouseEnter: (e) => setTooltip({ top: 0, left: localPoint(e)?.x ?? 0, r }), fill: "black" }, i))) }));
+}
+const ReplacementGraph = memo(function ReplacementGraph({ row }) {
+    const zoom = useContext(CurZoomContext);
+    const tooltip = useMemo(() => atom(null), []);
+    const setTooltip = useSetAtom(tooltip);
+    const { ref: chartRef, width: chartWidth } = useResizeDetector({
+        refreshMode: "debounce",
+        refreshRate: 100,
+        handleHeight: false,
+    });
+    const timeScale = scaleTime()
+        .domain([zoom.start, zoom.end])
+        .range([0, chartWidth ?? 1000]);
+    const yScale = scaleLinear().domain([0, row.maxY]).range([33, 3]);
+    const avgUse = row.numReplacements === 0 ? null : yScale(row.totalUseOfAllReplacements / row.numReplacements);
+    return (_jsxs("div", { ref: chartRef, style: { position: "relative", width: "100%", height: "35px" }, children: [_jsxs("svg", { height: "35", width: chartWidth ?? 1000, onMouseLeave: () => setTooltip(null), children: [avgUse !== null ? (_jsx("line", { x1: "0", y1: avgUse, x2: chartWidth ?? 1000, y2: avgUse, stroke: "red", strokeWidth: 0.5 })) : undefined, _jsx(Replacements, { row: row, tooltip: tooltip, timeScale: timeScale, yScale: yScale })] }), _jsx(ChartTooltip, { atom: tooltip, TooltipContent: ReplacementTooltip, chartHeight: 35, chartWidth: chartWidth ?? 1000 })] }));
+});
+const summaryColumns = [
+    {
+        id: SummaryColumnId.Tool,
+        numeric: false,
+        label: "Tool",
+        getDisplay: (c) => c.tool,
+    },
+    {
+        id: SummaryColumnId.NumReplacements,
+        numeric: true,
+        label: "Num Replacements",
+        getDisplay: (c) => c.numReplacements.toString(),
+        getForSort: (c) => c.numReplacements,
+    },
+    {
+        id: SummaryColumnId.AvgUseAtReplacement,
+        numeric: true,
+        label: "Avg Use (min) at Replacement",
+        getDisplay: (c) => decimalFormat.format(c.totalUseOfAllReplacements / c.numReplacements),
+        getForSort: (c) => c.totalUseOfAllReplacements / c.numReplacements,
+    },
+    {
+        id: SummaryColumnId.AvgCntAtReplacement,
+        numeric: true,
+        label: "Avg Use (count) at Replacement",
+        getDisplay: (c) => decimalFormat.format(c.totalCntOfAllReplacements / c.numReplacements),
+        getForSort: (c) => c.totalCntOfAllReplacements / c.numReplacements,
+    },
+    {
+        id: SummaryColumnId.Graph,
+        numeric: false,
+        ignoreDuringExport: true,
+        label: "All Replacements",
+        getDisplay: () => "",
+        expanded: true,
+        Cell: ReplacementGraph,
+    },
+];
+const SummaryTable = memo(function ReplacementTable(props) {
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const tpage = useTablePage();
+    const zoom = useTableZoomForPeriod(period);
+    const sort = useColSort(SummaryColumnId.Tool, summaryColumns);
+    const allReplacements = useAtomValue(period.type === "Last30" ? last30ToolReplacements : specificMonthToolReplacements);
+    const allSorted = useMemo(() => tool_summary(zoom, allReplacements, props.station, sort.sortOn), [zoom, allReplacements, props.station, sort]);
+    const pageData = tpage
+        ? allSorted.slice(tpage.page * tpage.rowsPerPage, (tpage.page + 1) * tpage.rowsPerPage)
+        : allSorted;
+    const zoomRange = zoom?.zoomRange ??
+        (period.type === "Last30"
+            ? { start: addDays(startOfToday(), -29), end: addDays(startOfToday(), 1) }
+            : { start: period.month, end: addMonths(period.month, 1) });
+    return (_jsx("div", { children: _jsxs(CurZoomContext.Provider, { value: zoomRange, children: [_jsxs(Table, { children: [_jsx(DataTableHead, { columns: summaryColumns, sort: sort, showDetailsCol: false }), _jsx(DataTableBody, { columns: summaryColumns, pageData: pageData, rowsPerPage: tpage.rowsPerPage })] }), _jsx(DataTableActions, { tpage: tpage, zoom: zoom.zoom, count: allSorted.length })] }) }));
+});
+var AllReplacementColumnId;
+(function (AllReplacementColumnId) {
+    AllReplacementColumnId[AllReplacementColumnId["Date"] = 0] = "Date";
+    AllReplacementColumnId[AllReplacementColumnId["Station"] = 1] = "Station";
+    AllReplacementColumnId[AllReplacementColumnId["Tool"] = 2] = "Tool";
+    AllReplacementColumnId[AllReplacementColumnId["Pocket"] = 3] = "Pocket";
+    AllReplacementColumnId[AllReplacementColumnId["Between"] = 4] = "Between";
+    AllReplacementColumnId[AllReplacementColumnId["UseAtReplacement"] = 5] = "UseAtReplacement";
+    AllReplacementColumnId[AllReplacementColumnId["UseAtEndOfCycle"] = 6] = "UseAtEndOfCycle";
+    AllReplacementColumnId[AllReplacementColumnId["CntAtReplacement"] = 7] = "CntAtReplacement";
+    AllReplacementColumnId[AllReplacementColumnId["CntAtEndOfCycle"] = 8] = "CntAtEndOfCycle";
+})(AllReplacementColumnId || (AllReplacementColumnId = {}));
+const allReplacementsColumns = [
+    {
+        id: AllReplacementColumnId.Date,
+        numeric: false,
+        label: "Date",
+        getDisplay: (c) => c.time.toLocaleString(),
+        getForSort: (c) => c.time.getTime(),
+        getForExport: (c) => c.time.toISOString(),
+    },
+    {
+        id: AllReplacementColumnId.Station,
+        numeric: false,
+        label: "Machine",
+        getDisplay: (c) => c.station.group + " #" + c.station.num.toString(),
+        getForSort: (c) => c.station,
+    },
+    {
+        id: AllReplacementColumnId.Tool,
+        numeric: false,
+        label: "Tool",
+        getDisplay: (c) => c.tool,
+    },
+    {
+        id: AllReplacementColumnId.Pocket,
+        numeric: true,
+        label: "Pocket",
+        getDisplay: (c) => (c.pocket === -1 ? "" : c.pocket.toString()),
+        getForSort: (c) => c.pocket,
+    },
+    {
+        id: AllReplacementColumnId.Between,
+        numeric: false,
+        label: "Type",
+        getDisplay: (c) => (c.type === "ReplaceBeforeCycleStart" ? "Between Cycles" : "During Cycle"),
+    },
+    {
+        id: AllReplacementColumnId.UseAtReplacement,
+        numeric: true,
+        label: "Use At Replacement / Start of Cycle (min)",
+        getDisplay: (c) => {
+            const use = c.type === "ReplaceBeforeCycleStart" ? c.useAtReplacement : c.totalUseAtBeginningOfCycle;
+            if (use !== null && use !== undefined) {
+                return decimalFormat.format(use);
+            }
+            else {
+                return "";
+            }
+        },
+        getForSort: (c) => c.type === "ReplaceBeforeCycleStart" ? c.useAtReplacement : c.totalUseAtBeginningOfCycle,
+    },
+    {
+        id: AllReplacementColumnId.UseAtEndOfCycle,
+        numeric: true,
+        label: "Use At End of Cycle (min)",
+        getDisplay: (c) => {
+            if (c.type === "ReplaceBeforeCycleStart")
+                return "";
+            const use = c.totalUseAtEndOfCycle;
+            if (use !== null && use !== undefined) {
+                return decimalFormat.format(use);
+            }
+            else {
+                return "";
+            }
+        },
+        getForSort: (c) => (c.type === "ReplaceBeforeCycleStart" ? 0 : c.totalUseAtEndOfCycle),
+    },
+    {
+        id: AllReplacementColumnId.CntAtReplacement,
+        numeric: true,
+        label: "Use At Replacement / Start of Cycle (count)",
+        getDisplay: (c) => {
+            const use = c.type === "ReplaceBeforeCycleStart" ? c.cntAtReplacement : c.totalCntAtBeginningOfCycle;
+            if (use !== null && use !== undefined) {
+                return decimalFormat.format(use);
+            }
+            else {
+                return "";
+            }
+        },
+        getForSort: (c) => c.type === "ReplaceBeforeCycleStart" ? c.cntAtReplacement : c.totalCntAtBeginningOfCycle,
+    },
+    {
+        id: AllReplacementColumnId.CntAtEndOfCycle,
+        numeric: true,
+        label: "Use At End of Cycle (count)",
+        getDisplay: (c) => {
+            if (c.type === "ReplaceBeforeCycleStart")
+                return "";
+            const use = c.totalCntAtEndOfCycle;
+            if (use !== null && use !== undefined) {
+                return decimalFormat.format(use);
+            }
+            else {
+                return "";
+            }
+        },
+        getForSort: (c) => (c.type === "ReplaceBeforeCycleStart" ? 0 : c.totalCntAtEndOfCycle),
+    },
+];
+const AllReplacementTable = memo(function ReplacementTable(props) {
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const tpage = useTablePage();
+    const zoom = useTableZoomForPeriod(period);
+    const sort = useColSort(AllReplacementColumnId.Date, allReplacementsColumns);
+    const allReplacements = useAtomValue(period.type === "Last30" ? last30ToolReplacements : specificMonthToolReplacements);
+    const allSorted = useMemo(() => tool_replacements_with_station_and_date(zoom, allReplacements, props.station).toSortedArray(sort.sortOn), [sort, zoom, allReplacements, props.station]);
+    const pageData = tpage
+        ? allSorted.slice(tpage.page * tpage.rowsPerPage, (tpage.page + 1) * tpage.rowsPerPage)
+        : allSorted;
+    return (_jsxs("div", { children: [_jsxs(Table, { children: [_jsx(DataTableHead, { columns: allReplacementsColumns, sort: sort, showDetailsCol: false }), _jsx(DataTableBody, { columns: allReplacementsColumns, pageData: pageData })] }), _jsx(DataTableActions, { tpage: tpage, zoom: zoom.zoom, count: allSorted.length })] }));
+});
+function copyToClipboard(replacements, displayType) {
+    if (displayType === "summary") {
+        const r = tool_summary(undefined, replacements, undefined, (r) => r.tool);
+        copyTableToClipboard(summaryColumns, r);
+    }
+    else {
+        const r = tool_replacements_with_station_and_date(undefined, replacements, undefined).toSortedArray((r) => r.tool, (r) => r.time);
+        copyTableToClipboard(allReplacementsColumns, r);
+    }
+}
+const ChooseMachine = memo(function ChooseMachineSelect(props) {
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const replacements = useAtomValue(period.type === "Last30" ? last30ToolReplacements : specificMonthToolReplacements);
+    const machines = Array.from(replacements.keys());
+    const selMachineIdx = props.station !== null ? machines.indexOf(props.station) : -1;
+    return (_jsxs(_Fragment, { children: [_jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: selMachineIdx, style: { marginLeft: "1em" }, onChange: (e) => {
+                        const v = e.target.value;
+                        if (v === -1) {
+                            props.setSelectedStation(null);
+                        }
+                        else {
+                            props.setSelectedStation(machines[v]);
+                        }
+                    }, children: [_jsx(MenuItem, { value: -1, children: _jsx("em", { children: "Any Machine" }) }), machines.map((n, idx) => (_jsx(MenuItem, { value: idx, children: _jsx("div", { style: { display: "flex", alignItems: "center" }, children: _jsxs("span", { style: { marginRight: "1em" }, children: [n.group, " #", n.num] }) }) }, idx)))] }) }), _jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { onClick: () => copyToClipboard(replacements, props.displayType), style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, size: "large", children: _jsx(ImportExport, {}) }) })] }));
+});
+const selectedMachineAtom = atom(null);
+const selectedType = atom("summary");
+export const ToolReplacementPage = memo(function ToolReplacementCard() {
+    useSetTitle("Tool Replacements");
+    const [selectedMachine, setSelectedMachine] = useAtom(selectedMachineAtom);
+    const [type, setType] = useAtom(selectedType);
+    return (_jsxs(Box, { paddingLeft: "24px", paddingRight: "24px", paddingTop: "10px", children: [_jsxs(Box, { component: "nav", sx: {
+                    display: "flex",
+                    minHeight: "2.5em",
+                    alignItems: "center",
+                    maxWidth: "calc(100vw - 24px - 24px)",
+                }, children: [_jsx(Typography, { variant: "subtitle1", children: "Tool Replacements" }), _jsx(Box, { flexGrow: 1 }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: type, style: { marginLeft: "1em" }, onChange: (e) => setType(e.target.value), children: [_jsx(MenuItem, { value: "summary", children: "Summary" }), _jsx(MenuItem, { value: "details", children: "Details" })] }) }), _jsx(ChooseMachine, { station: selectedMachine, setSelectedStation: setSelectedMachine, displayType: type })] }), _jsx("main", { children: type === "summary" ? (_jsx(SummaryTable, { station: selectedMachine })) : (_jsx(AllReplacementTable, { station: selectedMachine })) })] }));
+});

package/dist/components/operations/AllMaterial.d.ts

@@ -0,0 +1,5 @@
+interface AllMaterialProps {
+    readonly displaySystemBins: boolean;
+}
+export declare function AllMaterial(props: AllMaterialProps): import("react/jsx-runtime").JSX.Element;
+export {};