import { u as useRecordVisibilityChanges, j as jsxRuntimeExports } from "./doenetml-cB_aZGJ5.js";
import React__default, { useRef } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
import { s as sizeToCSS } from "./css-BJLDLYRJ.js";
const summaryStatistics = React__default.memo(function Tabular(props) {
  let { id, SVs, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  if (SVs.hidden) {
    return null;
  }
  const tableStyle = {
    width: sizeToCSS(SVs.width),
    height: sizeToCSS(SVs.height),
    borderCollapse: "collapse",
    borderColor: "black",
    borderRadius: "var(--mainBorderRadius)"
  };
  let options = [
    "mean",
    "stdev",
    "variance",
    "stderr",
    "count",
    "minimum",
    "quartile1",
    "median",
    "quartile3",
    "maximum",
    "range",
    "sum"
  ];
  let columns = options.filter((x) => x in SVs.summaryStatistics);
  let heading = /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: columns.map((x, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: x }, i)) });
  let data = /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: columns.map((x, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: SVs.summaryStatistics[x] }, i)) });
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { margin: "12px 0" }, ref, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
      "Summary statistics of ",
      SVs.columnName
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("table", { id, style: tableStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tbody", { children: [
      heading,
      data
    ] }) })
  ] });
});
export {
  summaryStatistics as default
};
