td-plots 1.6.1 → 1.7.0

package/dist/components/Histogram.d.ts

@@ -16,7 +16,7 @@ export type HistogramPlotProps = {
     plotId?: string;
     selectByBin?: boolean;
     dateTickFormat?: string;
-    binSizeOverride?: number;
+    binSizeOverride?: number | string;
     statsAnnotations?: HistogramStatsAnnotation[];
     emptySelectedRange?: boolean;
     d3FormatValueString?: string;

package/dist/components/PlusMinusControl.d.ts

@@ -11,6 +11,7 @@ export type PlusMinusControlProps = {
     colorOverride?: string;
     valueLabelFormat?: (value: number) => string;
     titleStylingOverrides?: React.CSSProperties;
+    disabledTooltipText?: string;
 };
 declare const PlusMinusControl: React.FC<PlusMinusControlProps>;
 export default PlusMinusControl;

package/dist/components/StatsDonut.d.ts

@@ -0,0 +1,11 @@
+export type StatsDonutProps = {
+    values: number[];
+    labels: string[];
+    hole: number;
+    withCenterLabel?: boolean;
+    centerLabel?: string;
+    centerValue?: string;
+    colors?: string[];
+    showLegend?: boolean;
+};
+export declare const StatsDonut: (props: StatsDonutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export { HistogramPlot } from "./components/Histogram";
 export type { HistogramPlotProps } from "./components/Histogram";
 export { RadialHistogramPlot } from "./components/RadialHistogram";
 export type { RadialHistogramPlotProps } from "./components/RadialHistogram";
+export { StatsDonut } from "./components/StatsDonut";
+export type { StatsDonutProps } from "./components/StatsDonut";
 export { default as TestPlot } from "./components/TestPlot";
 export { isDateArray, isNumberArray } from "./components/Utils";
 export type { PlotParams } from "react-plotly.js";

package/dist/index.esm.js

@@ -3,6 +3,7 @@ import React, { useEffect, lazy, useRef, useState, useMemo, Suspense } from 'rea
 import CircularProgress from '@mui/material/CircularProgress';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import { createSvgIcon } from '@mui/material/utils';
 import IconButton from '@mui/material/IconButton';
 
@@ -435,7 +436,7 @@ var RemoveIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
   d: "M19 13H5v-2h14z"
 }), 'Remove');
 
-const PlusMinusControl = ({ value, onChange, steps = [1], ariaLabel = "Plus Minus Control", disabled = false, showValue = true, title = "", themeRole = "primary", colorOverride = undefined, valueLabelFormat, titleStylingOverrides = {}, }) => {
+const PlusMinusControl = ({ value, onChange, steps = [1], ariaLabel = "Plus Minus Control", disabled = false, showValue = true, title = "", themeRole = "primary", colorOverride = undefined, valueLabelFormat, titleStylingOverrides = {}, disabledTooltipText = "Insufficient data", }) => {
     const color = colorOverride || "#111fbcff";
     const [disablePlus, setDisablePlus] = React.useState(false);
     const [disableMinus, setDisableMinus] = React.useState(false);
@@ -462,39 +463,40 @@ const PlusMinusControl = ({ value, onChange, steps = [1], ariaLabel = "Plus Minu
         const newValue = stepIndex === -1 ? steps[0] : steps[Math.max(stepIndex - 1, 0)];
         onChange(newValue);
     };
+    const buttonGroupContent = (jsxs(ButtonGroup, { size: "small", "aria-label": ariaLabel, variant: "text", disabled: disabled, orientation: "horizontal", color: themeRole, sx: {
+            backgroundColor: "background.paper",
+            "& .MuiButton-root:not(.Mui-disabled)": {
+                color: color,
+            },
+            "& .MuiButton-root:not(.Mui-disabled) .MuiSvgIcon-root": {
+                color: color,
+            },
+        }, children: [jsx(Button, { disabled: true, "aria-label": `${title}`, sx: Object.assign({ paddingRight: "10px", "&.Mui-disabled": disabled
+                        ? {}
+                        : {
+                            color: `${color} !important`,
+                        }, "& .MuiSvgIcon-root": {
+                        color: color,
+                        backgroundColor: color,
+                    } }, titleStylingOverrides), children: title }), showValue && (jsx(Button, { "aria-label": "current value", sx: {
+                    pointerEvents: "none",
+                    fontWeight: "600",
+                    minHeight: "32px",
+                    maxHeight: "32px",
+                    height: "32px",
+                }, children: valueLabelFormat ? valueLabelFormat(value) : value })), jsx(Button, { onClick: handleIncrement, "aria-label": "increment", disabled: disablePlus, children: jsx(AddIcon, {}) }), jsx(Button, { onClick: handleDecrement, "aria-label": "decrement", disabled: disableMinus, children: jsx(RemoveIcon, {}) })] }));
     return (jsx("div", { style: {
             display: "flex",
             flexDirection: "row",
             alignItems: "center",
-        }, children: jsxs(ButtonGroup, { size: "small", "aria-label": ariaLabel, variant: "text", disabled: disabled, orientation: "horizontal", color: themeRole, sx: {
-                backgroundColor: "background.paper",
-                "& .MuiButton-root:not(.Mui-disabled)": {
-                    color: color,
-                },
-                "& .MuiButton-root:not(.Mui-disabled) .MuiSvgIcon-root": {
-                    color: color,
-                },
-            }, children: [jsx(Button, { disabled: true, "aria-label": `${title}`, sx: Object.assign({ paddingRight: "10px", "&.Mui-disabled": disabled
-                            ? {}
-                            : {
-                                color: `${color} !important`,
-                            }, "& .MuiSvgIcon-root": {
-                            color: color,
-                            backgroundColor: color,
-                        } }, titleStylingOverrides), children: title }), showValue && (jsx(Button, { "aria-label": "current value", sx: {
-                        pointerEvents: "none",
-                        fontWeight: "600",
-                        minHeight: "32px",
-                        maxHeight: "32px",
-                        height: "32px",
-                    }, children: valueLabelFormat ? valueLabelFormat(value) : value })), jsx(Button, { onClick: handleIncrement, "aria-label": "increment", disabled: disablePlus, children: jsx(AddIcon, {}) }), jsx(Button, { onClick: handleDecrement, "aria-label": "decrement", disabled: disableMinus, children: jsx(RemoveIcon, {}) })] }) }));
+        }, children: disabled ? (jsx(Tooltip, { title: disabledTooltipText, arrow: true, children: jsx("span", { children: buttonGroupContent }) })) : (buttonGroupContent) }));
 };
 
 var SettingsIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
   d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"
 }), 'Settings');
 
-const Plot$2 = lazy(() => import('react-plotly.js'));
+const Plot$3 = lazy(() => import('react-plotly.js'));
 const HistogramPlot = (props) => {
     var _a, _b, _c, _d;
     const { data, title, xAxisTitle, barColor = "rgb(72, 72, 74)", unselectedBarColor = "rgba(203, 195, 195, 0.88)", selectorsColor = "black", containerStyleOverrides, unselectedData = [], handleClickOrSelection = () => { }, onDeselect = () => { }, plotId, selectByBin = false, dateTickFormat, binSizeOverride, statsAnnotations = ["mean"], emptySelectedRange = false, d3FormatValueString = ".1f", showBinSizeControls = "always", onBinSizeCalculated, onBinSizeChange, showBinSizeControlValue = true, isMobile = false, settingsTitleStylingOverrides = {}, } = props;
@@ -1003,10 +1005,14 @@ const HistogramPlot = (props) => {
         const isDivisibleByBinSize = isDateArray(data)
             ? (new Date(fixedXAxisRange[1]).getTime() -
                 new Date(fixedXAxisRange[0]).getTime()) %
-                activeBinSize ===
+                (typeof activeBinSize === "number"
+                    ? activeBinSize
+                    : plotlyMToMilliseconds(activeBinSize)) ===
                 0
             : (fixedXAxisRange[1] - fixedXAxisRange[0]) %
-                activeBinSize ===
+                (typeof activeBinSize === "number"
+                    ? activeBinSize
+                    : plotlyMToMilliseconds(activeBinSize)) ===
                 0;
         if (!isDivisibleByBinSize) {
             // Need to extend the axis range to the next bin edge.
@@ -1169,11 +1175,29 @@ const HistogramPlot = (props) => {
             };
         }
     }
+    else if (defaultBinSize && typeof defaultBinSize === "string") {
+        // Then we have a non-numeric bin size. It's a plotly M string
+        // So we know we're dealing with months.
+        const binSliderMarkValues = [1, 2, 3, 6, 12]
+            .map((n) => n * ONEAVGMONTH)
+            .concat([plotlyMToMilliseconds(defaultBinSize)]);
+        const uniqueMarks = [...new Set(binSliderMarkValues)];
+        binSliderMarks = uniqueMarks
+            .sort((a, b) => a - b)
+            .map((val) => ({
+            value: val,
+            label: `${Math.round(val / ONEAVGMONTH)} month${Math.round(val / ONEAVGMONTH) > 1 ? "s" : ""}`,
+        }));
+        valueLabelFormat = (value) => {
+            const valueLabel = `${Math.round(value / ONEAVGMONTH)} month${Math.round(value / ONEAVGMONTH) > 1 ? "s" : ""}`;
+            return valueLabel;
+        };
+    }
     return (jsx("div", { ref: containerRef, className: `plot-container ${plotId}`, style: Object.assign({ "--selection-color": selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsxs("div", { style: {
                     position: "relative",
                     width: "100%",
                     height: "100%",
-                }, children: [showBinSizeControls !== "never" && typeof binSize === "number" && (jsxs("div", { className: `histogram-controls ${showBinSizeControls === "onHover"
+                }, children: [showBinSizeControls !== "never" && (jsxs("div", { className: `histogram-controls ${showBinSizeControls === "onHover"
                             ? "show-on-hover"
                             : "show-always"}`, style: {
                             position: "absolute",
@@ -1212,13 +1236,17 @@ const HistogramPlot = (props) => {
                                     transition: isMobile
                                         ? ""
                                         : "max-width 0.15s ease-in-out, opacity 0.15s ease-in-out",
-                                }, children: jsx("div", { children: jsx(PlusMinusControl, { "aria-label": "Bin Size Control", disabled: data.length < 10, value: activeBinSize, steps: binSliderMarks
+                                }, children: jsx("div", { children: jsx(PlusMinusControl, { "aria-label": "Bin Size Control", disabled: allData.length < 10, value: activeBinSize
+                                            ? typeof activeBinSize === "number"
+                                                ? activeBinSize
+                                                : plotlyMToMilliseconds(activeBinSize)
+                                            : 0, steps: binSliderMarks
                                             ? binSliderMarks.map((mark) => mark.value)
                                             : [1], title: isMobile ? "Res" : "Resolution", showValue: showBinSizeControlValue, onChange: (newValue) => {
                                             const newBinSize = newValue;
                                             setBinSize(newBinSize);
                                             onBinSizeChange === null || onBinSizeChange === void 0 ? void 0 : onBinSizeChange(newBinSize);
-                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides }) }) })] })), jsx(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
+                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides, disabledTooltipText: "Requires 10 or more data points" }) }) })] })), jsx(Plot$3, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
                             onDeselect();
                             setSelectedRange(null); // Remove selected box
                         }, onUpdate: handlePlotUpdate, useResizeHandler: true, style: {
@@ -1229,7 +1257,7 @@ const HistogramPlot = (props) => {
                         } }, `histogram-${plotId || "default"}`)] }) }) }));
 };
 
-const Plot$1 = lazy(() => import('react-plotly.js'));
+const Plot$2 = lazy(() => import('react-plotly.js'));
 const RadialHistogramPlot = (props) => {
     const { data, barColor = 'rgb(72, 72, 74)', unselectedBarColor = 'rgba(203, 195, 195, 0.88)', selectorsColor = 'black', onSelected, onClick, containerStyleOverrides, barWidth = 20, // Default bar width in degrees
      } = props;
@@ -1329,13 +1357,89 @@ const RadialHistogramPlot = (props) => {
         staticPlot: false,
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    return (jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$1, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
+    return (jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
                     width: "100%",
                     height: "100%",
                     display: "block"
                 } }) }) }));
 };
 
+const Plot$1 = lazy(() => import('react-plotly.js'));
+const StatsDonut = (props) => {
+    const { withCenterLabel = false, centerLabel, centerValue, showLegend = true, } = props;
+    const annotations = withCenterLabel
+        ? [
+            {
+                text: centerLabel || "",
+                x: 0.5,
+                y: 0.55,
+                xref: "paper",
+                yref: "paper",
+                showarrow: false,
+                font: {
+                    size: 16,
+                    color: "#666",
+                },
+            },
+            {
+                text: centerValue || "",
+                x: 0.5,
+                y: 0.45,
+                xref: "paper",
+                yref: "paper",
+                showarrow: false,
+                font: {
+                    size: 24,
+                    weight: "bold",
+                    color: "#000",
+                },
+            },
+        ]
+        : [];
+    return (jsx("div", { style: {
+            height: "400px",
+            width: "600px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        }, children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$1, { data: [
+                    {
+                        type: "pie",
+                        values: props.values,
+                        labels: props.labels,
+                        hole: props.hole,
+                        marker: props.colors
+                            ? {
+                                colors: props.colors,
+                            }
+                            : undefined,
+                    },
+                ], layout: {
+                    showlegend: true,
+                    annotations,
+                    height: 400,
+                    width: 600,
+                    legend: {
+                        x: 1.3,
+                        y: 0.5,
+                        font: {
+                            size: 16,
+                        },
+                    },
+                    margin: {
+                        l: 25,
+                        r: 15,
+                        t: 0,
+                        b: 0,
+                    },
+                }, style: {
+                    width: "100%",
+                    height: "100%",
+                }, config: {
+                    displayModeBar: false,
+                } }) }) }));
+};
+
 const Plot = lazy(() => import('react-plotly.js'));
 const TestPlot = (props) => {
     var _a, _b;
@@ -1355,5 +1459,5 @@ const TestPlot = (props) => {
     return jsx(Plot, { data: data, layout: layout });
 };
 
-export { HistogramPlot, RadialHistogramPlot, TestPlot, isDateArray, isNumberArray };
+export { HistogramPlot, RadialHistogramPlot, StatsDonut, TestPlot, isDateArray, isNumberArray };
 //# sourceMappingURL=index.esm.js.map