@rubin-epo/epo-widget-lib 0.7.0-rc.2 → 0.8.0

package/dist/charts/Base/styles.js

@@ -1,10 +1,33 @@
 "use client";
-import t from "styled-components";
-const a = t.svg`
+import e from "styled-components";
+const a = e.div`
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: 1fr min-content;
+  grid-template-areas:
+    "vertical-label chart"
+    ". horizontal-label";
+`, r = e.span`
+  font-size: 80%;
+  grid-area: horizontal-label;
+  place-self: center;
+  align-self: center;
+`, l = e.span`
+  font-size: 80%;
+  grid-area: vertical-label;
+  place-self: center;
+  align-self: center;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+`, i = e.svg`
+  grid-area: chart;
   height: 100%;
   max-width: 100%;
   aspect-ratio: var(--aspect-ratio);
 `;
 export {
-  a as SVG
+  a as ChartContainer,
+  r as HorizontalLabel,
+  i as SVG,
+  l as VerticalLabel
 };

package/dist/charts/Guidelines/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),$=require("../styles.cjs"),h=({guides:n=0,direction:s="horizontal",xScale:r=t=>t,xDomain:l=[0,1],yScale:u=t=>t,yDomain:i=[0,1],padding:e=0,className:j})=>{if(n===0)return null;const t=s==="horizontal"?i:l,v=s==="horizontal"?u:r,z=(t[1]-t[0])/n;return c.jsx("g",{className:j,children:Array(n+1).fill(void 0).map((d,a)=>{const f=t[0]+z*a,o=v(f),G=s==="horizontal"?[r(l[0])-e,o]:[o-e,u(i[0])],_=s==="horizontal"?[r(l[1])+e,o]:[o,u(i[1])+e];return c.jsx($.Guide,{points:`${G.join()} ${_.join()}`},a)})})};h.displayName="Charts.Guidelines";const b=h;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),b=require("d3-array"),G=require("../styles.cjs"),c=({guides:u=0,direction:s="horizontal",xScale:e=t=>t,xDomain:r=[0,1],yScale:i=t=>t,yDomain:l=[0,1],margin:d,className:h})=>{if(u===0)return null;const t=s==="horizontal"?l:r,f=s==="horizontal"?i:e,o={...{top:0,right:0,bottom:0,left:0},...d},g=b.ticks(t[1],t[0],u);return a.jsx("g",{className:h,children:g.map((p,j)=>{const n=f(p),z=s==="horizontal"?[e(r[0])-o.left,n]:[n-o.top,i(l[0])],M=s==="horizontal"?[e(r[1])+o.right,n]:[n,i(l[1])+o.bottom];return a.jsx(G.Guide,{points:`${z.join()} ${M.join()}`},j)})})};c.displayName="Charts.Guidelines";const m=c;exports.default=m;

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

@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import { Domain, ScaleFunction } from "../types";
+import { ChartMargin, Domain, ScaleFunction } from "../types";
 export interface GuidelinesProps {
     guides: number;
     direction?: "horizontal" | "vertical";
@@ -7,7 +7,7 @@ export interface GuidelinesProps {
     xDomain: Domain;
     yScale: ScaleFunction;
     yDomain: Domain;
-    padding?: number;
+    margin?: ChartMargin;
     className?: string;
 }
 declare const Guidelines: FunctionComponent<GuidelinesProps>;

package/dist/charts/Guidelines/index.js

@@ -1,25 +1,26 @@
-import { jsx as a } from "react/jsx-runtime";
-import { Guide as v } from "../styles.js";
-const f = ({
-  guides: s = 0,
-  direction: t = "horizontal",
-  xScale: l = (o) => o,
+import { jsx as f } from "react/jsx-runtime";
+import { ticks as j } from "d3-array";
+import { Guide as M } from "../styles.js";
+const p = ({
+  guides: e = 0,
+  direction: o = "horizontal",
+  xScale: s = (t) => t,
   xDomain: i = [0, 1],
-  yScale: e = (o) => o,
-  yDomain: u = [0, 1],
-  padding: n = 0,
-  className: z
+  yScale: l = (t) => t,
+  yDomain: a = [0, 1],
+  margin: u,
+  className: h
 }) => {
-  if (s === 0)
+  if (e === 0)
     return null;
-  const o = t === "horizontal" ? u : i, c = t === "horizontal" ? e : l, p = (o[1] - o[0]) / s;
-  return /* @__PURE__ */ a("g", { className: z, children: Array(s + 1).fill(void 0).map(($, h) => {
-    const G = o[0] + p * h, r = c(G), j = t === "horizontal" ? [l(i[0]) - n, r] : [r - n, e(u[0])], m = t === "horizontal" ? [l(i[1]) + n, r] : [r, e(u[1]) + n];
-    return /* @__PURE__ */ a(v, { points: `${j.join()} ${m.join()}` }, h);
+  const t = o === "horizontal" ? a : i, c = o === "horizontal" ? l : s, n = { ...{ top: 0, right: 0, bottom: 0, left: 0 }, ...u }, d = j(t[1], t[0], e);
+  return /* @__PURE__ */ f("g", { className: h, children: d.map((m, g) => {
+    const r = c(m), z = o === "horizontal" ? [s(i[0]) - n.left, r] : [r - n.top, l(a[0])], G = o === "horizontal" ? [s(i[1]) + n.right, r] : [r, l(a[1]) + n.bottom];
+    return /* @__PURE__ */ f(M, { points: `${z.join()} ${G.join()}` }, g);
   }) });
 };
-f.displayName = "Charts.Guidelines";
-const N = f;
+p.displayName = "Charts.Guidelines";
+const C = p;
 export {
-  N as default
+  C as default
 };

package/dist/charts/Points/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),s=({data:e,xScale:i,yScale:l,yDomain:t,className:n})=>e.length===0?null:r.jsx("g",{className:n,children:e.map(({stroke:o,fill:u,width:c=4,x:a,y:d,props:f},p)=>r.jsx("circle",{cx:i(a),cy:l(t[1]-t[0]-d),r:c/2,fill:u||"var(--point-fill, #12726D)",stroke:o||"var(--point-stroke, #12726D)",...f},p))});s.displayName="Charts.Points";const g=s;exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=({data:e,xScale:i,yScale:n,yDomain:p,className:s})=>e.length===0?null:t.jsx("g",{className:s,children:e.map(({stroke:l,fill:o,width:u=4,x:c,y:a,props:d},f)=>t.jsx("circle",{cx:i(c),cy:n(a),r:u/2,fill:o||"var(--point-fill, #12726D)",stroke:l||"var(--point-stroke, #12726D)",...d},f))});r.displayName="Charts.Points";const m=r;exports.default=m;

package/dist/charts/Points/index.js

@@ -1,24 +1,24 @@
-import { jsx as n } from "react/jsx-runtime";
-const e = ({
+import { jsx as t } from "react/jsx-runtime";
+const n = ({
   data: r,
   xScale: i,
-  yScale: l,
-  yDomain: t,
-  className: o
-}) => r.length === 0 ? null : /* @__PURE__ */ n("g", { className: o, children: r.map(({ stroke: s, fill: c, width: p = 4, x: a, y: f, props: u }, h) => /* @__PURE__ */ n(
+  yScale: o,
+  yDomain: u,
+  className: e
+}) => r.length === 0 ? null : /* @__PURE__ */ t("g", { className: e, children: r.map(({ stroke: l, fill: s, width: a = 4, x: c, y: p, props: f }, m) => /* @__PURE__ */ t(
   "circle",
   {
-    cx: i(a),
-    cy: l(t[1] - t[0] - f),
-    r: p / 2,
-    fill: c || "var(--point-fill, #12726D)",
-    stroke: s || "var(--point-stroke, #12726D)",
-    ...u
+    cx: i(c),
+    cy: o(p),
+    r: a / 2,
+    fill: s || "var(--point-fill, #12726D)",
+    stroke: l || "var(--point-stroke, #12726D)",
+    ...f
   },
-  h
+  m
 )) });
-e.displayName = "Charts.Points";
-const x = e;
+n.displayName = "Charts.Points";
+const x = n;
 export {
   x as default
 };

package/dist/charts/Tooltip/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("./styles.cjs"),c=({value:u,x:a,y:t,height:o=16,className:d})=>{const i=String(u),r=Math.max(i.length*8,20),n=6,s=a+r/2;return e.jsxs(l.Tooltip,{transform:`translate(-${r/2} -${o*1.5})`,className:d,children:[e.jsx(l.TooltipBackground,{rx:4,width:r,height:o,x:a,y:t}),e.jsx(l.TooltipArrow,{points:`${s-n} ${t+o} ${s+n} ${t+o} ${s} ${t+o+n}`}),e.jsx(l.TooltipText,{width:r,height:o,x:s,y:t+o/2,children:i})]})};c.displayName="Charts.Tooltip";const p=c;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("./styles.cjs"),m=(e,t)=>e.includes("left")?`calc(0% + ${t}px)`:e.includes("right")?`calc(-100% - ${t}px)`:(e.includes("center"),"-50%"),w=(e,t)=>e.includes("top")?`calc(0% + ${t}px)`:e.includes("bottom")?`calc(-100% - ${t}px)`:(e.includes("center"),"-50%"),y=e=>{let t="0",r="0",n="0",l="0",s="0deg";return e.includes("center")&&(t="50%",r="50%",n="-50%",l="-50%"),e.includes("top")&&(r="0",l="-100%",s="180deg"),e.includes("right")&&(t="100%",n="-25%",s="-90deg"),e.includes("left")&&(t="0",n="-75%",s="90deg"),e.includes("bottom")&&(r="100%",l="0"),{left:t,top:r,transform:`translate(${n}, ${l}) rotate(${s})`}},d=({x:e,y:t,visible:r=!0,offset:n=5,origin:l="center bottom",children:s,className:a})=>{if(typeof e>"u"||typeof t>"u")return null;const f="center center",c=[...l.split(" "),...f.split(" ")].slice(0,2).join(" "),i=6,p=m(c,i+n),$=w(c,i+n),h=c.includes("center")&&c.split(" ").filter(g=>g!=="center").length===1,x=y(c);return o.jsx("foreignObject",{x:0,y:0,width:"100%",height:"100%",pointerEvents:"none",children:o.jsxs(u.Tooltip,{className:a,style:{transform:`translate(calc(${p} + ${e}px), calc(${$} + ${t}px))`},hidden:!r,children:[s,h&&o.jsx(u.Arrow,{style:{"--arrow-size":`${i}px`,...x}})]})})};d.displayName="Charts.Tooltip";const O=d;exports.default=O;

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

@@ -1,10 +1,11 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, PropsWithChildren } from "react";
 export interface TooltipProps {
-    value: number | string;
     x: number;
     y: number;
-    height?: number;
+    visible: boolean;
+    offset?: number;
+    origin?: string;
     className?: string;
 }
-declare const Tooltip: FunctionComponent<TooltipProps>;
+declare const Tooltip: FunctionComponent<PropsWithChildren<TooltipProps>>;
 export default Tooltip;

package/dist/charts/Tooltip/index.js

@@ -1,51 +1,49 @@
-import { jsxs as T, jsx as s } from "react/jsx-runtime";
-import { Tooltip as d, TooltipBackground as m, TooltipArrow as x, TooltipText as e } from "./styles.js";
-const i = ({
-  value: $,
-  x: a,
-  y: t,
-  height: o = 16,
-  className: c
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { Tooltip as w, Arrow as O } from "./styles.js";
+const g = (t, e) => t.includes("left") ? `calc(0% + ${e}px)` : t.includes("right") ? `calc(-100% - ${e}px)` : (t.includes("center"), "-50%"), y = (t, e) => t.includes("top") ? `calc(0% + ${e}px)` : t.includes("bottom") ? `calc(-100% - ${e}px)` : (t.includes("center"), "-50%"), T = (t) => {
+  let e = "0", r = "0", n = "0", l = "0", s = "0deg";
+  return t.includes("center") && (e = "50%", r = "50%", n = "-50%", l = "-50%"), t.includes("top") && (r = "0", l = "-100%", s = "180deg"), t.includes("right") && (e = "100%", n = "-25%", s = "-90deg"), t.includes("left") && (e = "0", n = "-75%", s = "90deg"), t.includes("bottom") && (r = "100%", l = "0"), {
+    left: e,
+    top: r,
+    transform: `translate(${n}, ${l}) rotate(${s})`
+  };
+}, f = ({
+  x: t,
+  y: e,
+  visible: r = !0,
+  offset: n = 5,
+  origin: l = "center bottom",
+  children: s,
+  className: u
 }) => {
-  const p = String($), r = Math.max(p.length * 8, 20), n = 6, l = a + r / 2;
-  return /* @__PURE__ */ T(
-    d,
+  if (typeof t > "u" || typeof e > "u")
+    return null;
+  const d = "center center", c = [...l.split(" "), ...d.split(" ")].slice(0, 2).join(" "), o = 6, a = g(c, o + n), p = y(c, o + n), $ = c.includes("center") && c.split(" ").filter((x) => x !== "center").length === 1, h = T(c);
+  return /* @__PURE__ */ i("foreignObject", { x: 0, y: 0, width: "100%", height: "100%", pointerEvents: "none", children: /* @__PURE__ */ m(
+    w,
     {
-      transform: `translate(-${r / 2} -${o * 1.5})`,
-      className: c,
+      className: u,
+      style: {
+        transform: `translate(calc(${a} + ${t}px), calc(${p} + ${e}px))`
+      },
+      hidden: !r,
       children: [
-        /* @__PURE__ */ s(
-          m,
+        s,
+        $ && /* @__PURE__ */ i(
+          O,
           {
-            rx: 4,
-            width: r,
-            height: o,
-            x: a,
-            y: t
-          }
-        ),
-        /* @__PURE__ */ s(
-          x,
-          {
-            points: `${l - n} ${t + o} ${l + n} ${t + o} ${l} ${t + o + n}`
-          }
-        ),
-        /* @__PURE__ */ s(
-          e,
-          {
-            width: r,
-            height: o,
-            x: l,
-            y: t + o / 2,
-            children: p
+            style: {
+              "--arrow-size": `${o}px`,
+              ...h
+            }
           }
         )
       ]
     }
-  );
+  ) });
 };
-i.displayName = "Charts.Tooltip";
-const w = i;
+f.displayName = "Charts.Tooltip";
+const A = f;
 export {
-  w as default
+  A as default
 };

package/dist/charts/Tooltip/styles.cjs

@@ -1,13 +1,19 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("styled-components"),e=t=>t&&t.__esModule?t:{default:t},o=e(l),c=o.default.g`
-  cursor: default;
-`,i=o.default.rect`
-  fill: #dce0e3;
-`,r=o.default.text`
-  font-size: 12px;
-  color: var(--black, #000);
-  dominant-baseline: central;
-  text-anchor: middle;
-  fill: var(--black, #000);
-`,a=o.default.polygon`
-  fill: #dce0e3;
-`;exports.Tooltip=c;exports.TooltipArrow=a;exports.TooltipBackground=i;exports.TooltipText=r;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=t=>t&&t.__esModule?t:{default:t},e=r(o),i=e.default.div`
+  background-color: #dce0e3;
+  border-radius: 4px;
+  font-size: 0.5em;
+  line-height: 1;
+  padding: 2px 4px;
+  text-align: center;
+  position: absolute;
+`,d=e.default.div`
+  width: 0;
+  height: 0;
+  border-left: var(--arrow-width, 6px) solid transparent;
+  border-right: var(--arrow-width, 6px) solid transparent;
+
+  border-top: var(--arrow-width, 6px) solid #dce0e3;
+
+  position: absolute;
+  left: 0;
+`;exports.Arrow=d;exports.Tooltip=i;