td-plots 1.6.2 → 1.7.0

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

@@ -496,7 +496,7 @@ 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;
@@ -1246,7 +1246,7 @@ const HistogramPlot = (props) => {
                                             const newBinSize = newValue;
                                             setBinSize(newBinSize);
                                             onBinSizeChange === null || onBinSizeChange === void 0 ? void 0 : onBinSizeChange(newBinSize);
-                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides, disabledTooltipText: "Requires 10 or more data points" }) }) })] })), 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: {
@@ -1257,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;
@@ -1357,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;
@@ -1383,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