@rubin-epo/epo-widget-lib 0.9.12 → 0.10.0

package/dist/charts/Base/styles.js

@@ -1,7 +1,8 @@
 "use client";
 import e from "styled-components";
-const i = e.div`
-  --label-height: 3em;
+import { token as t } from "@rubin-epo/epo-react-lib/styles";
+const l = e.div`
+  --label-height: 2em;
   --label-gutter: calc(var(--label-height) / 2);
 
   display: grid;
@@ -14,6 +15,10 @@ const i = e.div`
   /* for Safari */
   align-items: center;
   width: 100%;
+
+  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+    --label-height: 3em;
+  }
 `;
 e.div`
   place-self: center;
@@ -25,23 +30,24 @@ e.div`
   place-self: center;
   align-self: center;
 `;
-const a = e.div`
+const r = e.div`
   grid-area: filler;
   width: var(--label-height);
-`, l = e.svg`
+`, n = e.svg`
   grid-area: chart;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: var(--aspect-ratio);
-`, r = e.div`
+  z-index: 1;
+`, c = e.div`
   display: flex;
   align-items: center;
   grid-area: title;
   height: var(--label-height);
   padding-inline: var(--label-gutter);
-`, n = e.h3`
+`, o = e.h3`
   margin: 0;
-`, c = e.div`
+`, h = e.div`
   width: var(--label-height);
   writing-mode: vertical-rl;
   transform: rotate(180deg);
@@ -49,7 +55,7 @@ const a = e.div`
 `, g = e.div`
   height: var(--label-height);
   grid-area: horizontal-label;
-`, o = e.span`
+`, d = e.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,12 +64,12 @@ const a = e.div`
   font-size: 80%;
 `;
 export {
-  i as ChartContainer,
-  a as Filler,
+  l as ChartContainer,
+  r as Filler,
   g as HorizontalLabelWrapper,
-  o as Label,
-  l as SVG,
-  n as Title,
-  r as TitleWrapper,
-  c as VerticalLabelWrapper
+  d as Label,
+  n as SVG,
+  o as Title,
+  c as TitleWrapper,
+  h as VerticalLabelWrapper
 };

package/dist/charts/ClippingContainer/index.d.ts

@@ -1,4 +1,5 @@
-import { FunctionComponent, PropsWithChildren } from "react";
+import { FunctionComponent, PropsWithChildren } from 'react';
+
 export interface ClippingContainerProps {
     x: number;
     y: number;

package/dist/charts/ForeignObject/index.d.ts

@@ -1,4 +1,5 @@
-import { FunctionComponent, PropsWithChildren } from "react";
+import { FunctionComponent, PropsWithChildren } from 'react';
+
 declare const ForeignObject: FunctionComponent<PropsWithChildren<{
     className?: string;
     width?: number | string;

package/dist/charts/Guidelines/index.d.ts

@@ -1,5 +1,6 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react';
 import { ChartMargin, Domain, ScaleFunction } from '../../types/charts';
+
 export interface GuidelinesProps {
     guides: number;
     direction?: "horizontal" | "vertical";

package/dist/charts/PathFromPoints/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),l=require("../../lib/utils.cjs"),t=({points:e,className:r,svgProps:o})=>{if(e.length===0)return null;const n={...{fill:"none",strokeWidth:2,stroke:"var(--black,#000)",pointerEvents:"none"},...o},s=l.buildPath(e);return u.jsx("path",{strokeLinejoin:"round",...n,className:r,d:s})};t.displayName="Charts.Path";exports.default=t;

package/dist/charts/PathFromPoints/index.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent, SVGProps } from 'react';
+import { Point } from '../../types/charts';
+
+type Props = {
+    points: Array<Point>;
+    className?: string;
+    svgProps?: SVGProps<SVGPathElement>;
+};
+declare const PathFromPoints: FunctionComponent<Props>;
+export default PathFromPoints;

package/dist/charts/PathFromPoints/index.js

@@ -0,0 +1,21 @@
+import { jsx as s } from "react/jsx-runtime";
+import { buildPath as a } from "../../lib/utils.js";
+const l = ({
+  points: t,
+  className: o,
+  svgProps: r
+}) => {
+  if (t.length === 0)
+    return null;
+  const n = { ...{
+    fill: "none",
+    strokeWidth: 2,
+    stroke: "var(--black,#000)",
+    pointerEvents: "none"
+  }, ...r }, e = a(t);
+  return /* @__PURE__ */ s("path", { strokeLinejoin: "round", ...n, className: o, d: e });
+};
+l.displayName = "Charts.Path";
+export {
+  l as default
+};

package/dist/charts/Points/ErrorBar.d.ts

@@ -1,5 +1,6 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react';
 import { ErrorRange, ScaleFunction } from '../../types/charts';
+
 interface ErrorBarProps {
     error: Record<string, ErrorRange>;
     xScale: ScaleFunction;

package/dist/charts/Points/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),P=require("./ErrorBar.cjs"),q=require("../defaults.cjs"),l=({data:r,label:u,xScale:t,yScale:s,onHoverCallback:i,onHoverOutCallback:n,className:a})=>r.length===0?null:e.jsx("g",{role:"list","aria-label":u,className:a,children:r.map((d,c)=>{const{stroke:f,fill:p,radius:j,x:m,y:g,description:x,error:o,id:h,props:M}={...q.default.point,...d};return e.jsxs("g",{role:"listitem","aria-label":x,transform:`translate(${t(m)},${s(g)})`,onMouseEnter:()=>i&&i(c),onMouseLeave:()=>n&&n(),children:[o&&e.jsx(P.default,{error:o,xScale:t,yScale:s}),e.jsx("circle",{cursor:"pointer",r:j,stroke:f,fill:p,...M})]},h)})});l.displayName="Charts.Points";const $=l;exports.default=$;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),P=require("react"),E=require("./ErrorBar.cjs"),$=require("../defaults.cjs"),l=({data:r,label:a,xScale:t,yScale:s,onHoverCallback:i,onHoverOutCallback:n,onLoadedCallback:o,className:c})=>(P.useEffect(()=>{o&&o()},[]),r.length===0?null:e.jsx("g",{role:"list","aria-label":a,className:c,children:r.map((d,f)=>{const{stroke:p,fill:j,radius:m,x:g,y:x,description:h,error:u,id:q,props:M}={...$.default.point,...d};return e.jsxs("g",{role:"listitem","aria-label":h,transform:`translate(${t(g)},${s(x)})`,onMouseEnter:()=>i&&i(f),onMouseLeave:()=>n&&n(),children:[u&&e.jsx(E.default,{error:u,xScale:t,yScale:s}),e.jsx("circle",{cursor:"pointer",r:m,stroke:p,fill:j,...M})]},q)})}));l.displayName="Charts.Points";const y=l;exports.default=y;

package/dist/charts/Points/index.d.ts

@@ -1,13 +1,15 @@
-import { FunctionComponent } from "react";
-import { Point, ScaleFunction } from '../../types/charts';
+import { FunctionComponent } from 'react';
+import { PlotPoint, ScaleFunction } from '../../types/charts';
+
 export interface PointsProps {
-    data: Array<Point>;
+    data: Array<PlotPoint>;
     label?: string;
     xScale: ScaleFunction;
     yScale: ScaleFunction;
     className?: string;
     onHoverCallback?: (index: number) => void;
     onHoverOutCallback?: () => void;
+    onLoadedCallback?: () => void;
 }
 declare const Points: FunctionComponent<PointsProps>;
 export default Points;

package/dist/charts/Points/index.js

@@ -1,35 +1,40 @@
+"use client";
 import { jsx as r, jsxs as j } from "react/jsx-runtime";
-import E from "./ErrorBar.js";
-import M from "../defaults.js";
-const l = ({
+import { useEffect as M } from "react";
+import y from "./ErrorBar.js";
+import B from "../defaults.js";
+const m = ({
   data: t,
-  label: a,
-  xScale: o,
-  yScale: s,
+  label: p,
+  xScale: s,
+  yScale: e,
   onHoverCallback: i,
-  onHoverOutCallback: e,
-  className: p
-}) => t.length === 0 ? null : /* @__PURE__ */ r("g", { role: "list", "aria-label": a, className: p, children: t.map((m, u) => {
-  const { stroke: f, fill: d, radius: c, x: h, y: g, description: x, error: n, id: P, props: $ } = {
-    ...M.point,
-    ...m
+  onHoverOutCallback: o,
+  onLoadedCallback: n,
+  className: f
+}) => (M(() => {
+  n && n();
+}, []), t.length === 0 ? null : /* @__PURE__ */ r("g", { role: "list", "aria-label": p, className: f, children: t.map((u, a) => {
+  const { stroke: c, fill: d, radius: h, x: g, y: x, description: E, error: l, id: P, props: $ } = {
+    ...B.point,
+    ...u
   };
   return /* @__PURE__ */ j(
     "g",
     {
       role: "listitem",
-      "aria-label": x,
-      transform: `translate(${o(h)},${s(g)})`,
-      onMouseEnter: () => i && i(u),
-      onMouseLeave: () => e && e(),
+      "aria-label": E,
+      transform: `translate(${s(g)},${e(x)})`,
+      onMouseEnter: () => i && i(a),
+      onMouseLeave: () => o && o(),
       children: [
-        n && /* @__PURE__ */ r(E, { error: n, xScale: o, yScale: s }),
+        l && /* @__PURE__ */ r(y, { error: l, xScale: s, yScale: e }),
         /* @__PURE__ */ r(
           "circle",
           {
             cursor: "pointer",
-            r: c,
-            stroke: f,
+            r: h,
+            stroke: c,
             fill: d,
             ...$
           }
@@ -38,9 +43,9 @@ const l = ({
     },
     P
   );
-}) });
-l.displayName = "Charts.Points";
-const N = l;
+}) }));
+m.displayName = "Charts.Points";
+const A = m;
 export {
-  N as default
+  A as default
 };

package/dist/charts/Readout/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("@rubin-epo/epo-react-lib/styles"),d=require("../Viewport/index.cjs"),y=require("../ForeignObject/index.cjs"),o=require("./styles.cjs"),j=(n="")=>{const r=["top","right"],a=["center","center"],s=n?[...n.split(" "),...a].slice(0,2):r,e={justifyContent:null,alignItems:null};return s.forEach(i=>{switch(i){case"center":e.alignItems=e.alignItems??"center",e.justifyContent=e.justifyContent??"center";break;case"top":e.alignItems="start";break;case"right":e.justifyContent="end";break;case"bottom":e.alignItems="end";break;case"left":e.justifyContent="start";break}}),e},c=({className:n,children:r,position:a,viewport:s,forIds:e,forScreenreaders:i})=>{const l=t.jsx(y.default,{children:t.jsx(o.DisplayContainer,{style:j(a),children:t.jsxs(o.Display,{form:Array.isArray(e)?e.join(" "):e,className:n,children:[t.jsx("span",{"aria-hidden":!!i,children:r}),t.jsx(u.ScreenreaderText,{children:i})]})})});return s?t.jsx(d.default,{...s,children:l}):l};c.displayName="Charts.Readout";exports.default=c;

package/dist/charts/Readout/index.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+import { ViewportProps } from '../Viewport';
+
+type Props = {
+    className?: string;
+    position?: string;
+    viewport?: ViewportProps;
+    forIds?: string | Array<string>;
+    forScreenreaders?: ReactNode;
+};
+/**
+ * Readout for plots, optionally includes a Viewport wrapper that
+ * can be used if the parent plot has margins at its edges
+ */
+declare const Readout: FunctionComponent<PropsWithChildren<Props>>;
+export default Readout;

package/dist/charts/Readout/index.js

@@ -0,0 +1,54 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { ScreenreaderText as c } from "@rubin-epo/epo-react-lib/styles";
+import m from "../Viewport/index.js";
+import f from "../ForeignObject/index.js";
+import { DisplayContainer as u, Display as d } from "./styles.js";
+const p = (n = "") => {
+  const s = ["top", "right"], o = ["center", "center"], i = n ? [...n.split(" "), ...o].slice(0, 2) : s, t = {
+    justifyContent: null,
+    alignItems: null
+  };
+  return i.forEach((r) => {
+    switch (r) {
+      case "center":
+        t.alignItems = t.alignItems ?? "center", t.justifyContent = t.justifyContent ?? "center";
+        break;
+      case "top":
+        t.alignItems = "start";
+        break;
+      case "right":
+        t.justifyContent = "end";
+        break;
+      case "bottom":
+        t.alignItems = "end";
+        break;
+      case "left":
+        t.justifyContent = "start";
+        break;
+    }
+  }), t;
+}, y = ({
+  className: n,
+  children: s,
+  position: o,
+  viewport: i,
+  forIds: t,
+  forScreenreaders: r
+}) => {
+  const a = /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { style: p(o), children: /* @__PURE__ */ l(
+    d,
+    {
+      form: Array.isArray(t) ? t.join(" ") : t,
+      className: n,
+      children: [
+        /* @__PURE__ */ e("span", { "aria-hidden": !!r, children: s }),
+        /* @__PURE__ */ e(c, { children: r })
+      ]
+    }
+  ) }) });
+  return i ? /* @__PURE__ */ e(m, { ...i, children: a }) : a;
+};
+y.displayName = "Charts.Readout";
+export {
+  y as default
+};

package/dist/charts/Readout/styles.cjs

@@ -0,0 +1,13 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),l=t=>t&&t.__esModule?t:{default:t},e=l(i),a=e.default.div`
+  display: flex;
+  justify-content: end;
+  align-items: start;
+  width: 100%;
+  height: 100%;
+`,n=e.default.output`
+  background-color: var(--white, #fff);
+  display: flex;
+  align-items: center;
+  gap: 1ch;
+  min-height: 1em;
+`;exports.Display=n;exports.DisplayContainer=a;