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

package/dist/Atomic.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./atomic/Blinker/Blinker.cjs"),l=require("./atomic/ElapsedTime/ElapsedTime.cjs"),r=require("./atomic/PlaybackControl/PlaybackControl.cjs");exports.Blinker=e.default;exports.ElapsedTime=l.default;exports.PlaybackControl=r.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./atomic/ImageStack/index.cjs"),t=require("./atomic/Blinker/Blinker.cjs"),r=require("./atomic/ElapsedTime/ElapsedTime.cjs"),l=require("./atomic/PlaybackControl/PlaybackControl.cjs");exports.ImageStack=e.default;exports.Blinker=t.default;exports.ElapsedTime=r.default;exports.PlaybackControl=l.default;

package/dist/Atomic.js

@@ -1,8 +1,10 @@
-import { default as o } from "./atomic/Blinker/Blinker.js";
+import { default as o } from "./atomic/ImageStack/index.js";
+import { default as t } from "./atomic/Blinker/Blinker.js";
 import { default as l } from "./atomic/ElapsedTime/ElapsedTime.js";
-import { default as f } from "./atomic/PlaybackControl/PlaybackControl.js";
+import { default as d } from "./atomic/PlaybackControl/PlaybackControl.js";
 export {
-  o as Blinker,
+  t as Blinker,
   l as ElapsedTime,
-  f as PlaybackControl
+  o as ImageStack,
+  d as PlaybackControl
 };

package/dist/SupernovaThreeVector.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),B=require("react"),O=require("react-i18next"),l=require("d3-array"),z=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./lib/utils.cjs"),E=require("./widgets/SupernovaThreeVector/LiveLabel/index.cjs"),i=require("./widgets/SupernovaThreeVector/styles.cjs"),N=t=>t&&t.__esModule?t:{default:t},P=N(z),k=({histogramData:t,userData:q,binnedImages:_,step:u=100})=>{const{t:C}=O.useTranslation(),r={top:30,bottom:30,left:50,right:0},x="skyMapDescription",o=600,m=o/1.6,R=[r.left,o-r.right],T=[m-r.bottom,r.top],b=6,p=7,y=0,L=l.max(t,e=>e.value)||Math.max(...t.map(({value:e})=>e)),a=l.min(t,e=>e.bin)||0,c=l.max(t,e=>e.bin)||Math.max(...t.map(({bin:e})=>e)),g=l.nice(a,c,b),S=l.nice(y,L||y,p),f=d.getLinearScale(g,R),I=d.getLinearScale(S,T),[s,j]=B.useState([a,c]),v=15,$=`calc(${r.left/o*100}% - ${v}px)`,V=`calc(${(1-f(c)/o)*100}% - ${v}px)`,h=t.map(({bin:e})=>d.between(e,s[0],s[1])),M=q.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),A=t.reduce((e,{value:H},w)=>h[w]?e+H:e,0);return n.jsxs(i.ThreeVectorContainer,{children:[n.jsxs(i.ThreeVectorLayout,{children:[n.jsx(i.HistogramContainer,{children:n.jsx(i.Histogram,{data:t,activeRange:s,xDomain:g,yDomain:S,xScale:f,yScale:I,yTicks:p,xTicks:b,step:u,margin:r,width:o,height:m})}),n.jsx(i.SliderContainer,{style:{paddingInlineStart:$,paddingInlineEnd:V},children:n.jsx(P.default,{min:a,max:c,step:u,value:s,ariaValuetext:({valueNow:e})=>C("supernova_three_vector.slider.valueLabel",{value:e}),label:"distanceSlider",color:"var(--turquoise85,#12726D)",minLabel:`${a} kpc`,maxLabel:`${c} kpc`,onChangeCallback:e=>Array.isArray(e)&&j(e)})}),n.jsx(i.SkymapContainer,{children:n.jsx(i.Skymap,{objects:M,images:_,describedById:x,visibleImages:h})}),n.jsx(i.ResetButton,{onResetCallback:()=>j([a,c])})]}),n.jsx(E.default,{id:x,objects:M,min:s[0],max:s[1]+u,supernovaCount:A})]})};k.displayName="Widgets.SupernovaThreeVector";exports.default=k;

package/dist/SupernovaThreeVector.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/SupernovaThreeVector/index'
+import _default from './widgets/SupernovaThreeVector/index'
+export default _default

package/dist/SupernovaThreeVector.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsxs as S, jsx as o } from "react/jsx-runtime";
+import { useState as q } from "react";
+import { useTranslation as z } from "react-i18next";
+import { max as k, min as E, nice as M } from "d3-array";
+import N from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import { between as C, getLinearScale as L } from "./lib/utils.js";
+import U from "./widgets/SupernovaThreeVector/LiveLabel/index.js";
+import { ThreeVectorContainer as W, ThreeVectorLayout as F, HistogramContainer as G, Histogram as J, SliderContainer as K, SkymapContainer as P, Skymap as Q, ResetButton as X } from "./widgets/SupernovaThreeVector/styles.js";
+const Y = ({
+  histogramData: n,
+  userData: R,
+  binnedImages: T,
+  step: s = 100
+}) => {
+  const { t: $ } = z(), i = {
+    top: 30,
+    bottom: 30,
+    left: 50,
+    right: 0
+  }, l = "skyMapDescription", c = 600, m = c / 1.6, j = [i.left, c - i.right], I = [m - i.bottom, i.top], d = 6, p = 7, u = 0, V = k(n, (e) => e.value) || Math.max(...n.map(({ value: e }) => e)), a = E(n, (e) => e.bin) || 0, r = k(n, (e) => e.bin) || Math.max(...n.map(({ bin: e }) => e)), x = M(a, r, d), b = M(u, V || u, p), f = L(x, j), A = L(b, I), [t, y] = q([a, r]), v = 15, B = `calc(${i.left / c * 100}% - ${v}px)`, H = `calc(${(1 - f(r) / c) * 100}% - ${v}px)`, g = n.map(
+    ({ bin: e }) => C(e, t[0], t[1])
+  ), h = R.filter(
+    ({ distance: e }) => C(e, t[0], t[1] + s)
+  ), w = n.reduce((e, { value: O }, _) => g[_] ? e + O : e, 0);
+  return /* @__PURE__ */ S(W, { children: [
+    /* @__PURE__ */ S(F, { children: [
+      /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(
+        J,
+        {
+          data: n,
+          activeRange: t,
+          xDomain: x,
+          yDomain: b,
+          xScale: f,
+          yScale: A,
+          yTicks: p,
+          xTicks: d,
+          step: s,
+          margin: i,
+          width: c,
+          height: m
+        }
+      ) }),
+      /* @__PURE__ */ o(
+        K,
+        {
+          style: {
+            paddingInlineStart: B,
+            paddingInlineEnd: H
+          },
+          children: /* @__PURE__ */ o(
+            N,
+            {
+              min: a,
+              max: r,
+              step: s,
+              value: t,
+              ariaValuetext: ({ valueNow: e }) => $("supernova_three_vector.slider.valueLabel", { value: e }),
+              label: "distanceSlider",
+              color: "var(--turquoise85,#12726D)",
+              minLabel: `${a} kpc`,
+              maxLabel: `${r} kpc`,
+              onChangeCallback: (e) => Array.isArray(e) && y(e)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(
+        Q,
+        {
+          objects: h,
+          images: T,
+          describedById: l,
+          visibleImages: g
+        }
+      ) }),
+      /* @__PURE__ */ o(
+        X,
+        {
+          onResetCallback: () => y([a, r])
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(
+      U,
+      {
+        id: l,
+        objects: h,
+        min: t[0],
+        max: t[1] + s,
+        supernovaCount: w
+      }
+    )
+  ] });
+};
+Y.displayName = "Widgets.SupernovaThreeVector";
+export {
+  Y as default
+};

package/dist/atomic/Blinker/Blinker.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),f=require("react"),A=require("../../hooks/useInterval.cjs"),o=require("./styles.cjs"),M=require("../../lib/utils.cjs"),g=({images:t=[],activeIndex:u=0,autoplay:h=!0,loop:p=!0,interval:y=200,blinkCallback:n,loadedCallback:i,className:S,showControls:j=!0,children:q})=>{const[c,a]=f.useState(h),[d,k]=f.useState(!1),s=t.length>1,B=(e=0)=>{const P=t.length-1;return M.getClampedArrayIndex(u+e,P)},x=()=>{if(s){const e=B(1);p===!1&&e===t.length-1&&r(),n&&n(e)}},r=()=>{a(!1)},I=()=>{a(e=>!e)},m=()=>{r(),x()},v=()=>{r(),n&&n(B(-1))};return A.default(x,s&&d&&c?y:null),l.jsxs(o.BlinkerContainer,{className:S,children:[l.jsx(o.BlinkerImages,{loadedCallback:()=>{k(!0),i&&i()},images:t,activeIndex:u}),q,s&&j&&l.jsx(o.BlinkerControls,{isDisabled:!d,playing:c,handleStartStop:I,handleNext:m,handlePrevious:v})]})};g.displayName="Atomic.Blinker";const N=g;exports.default=N;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),f=require("react"),A=require("../../lib/utils.cjs"),M=require("../../hooks/useInterval.cjs"),o=require("./styles.cjs"),g=({images:t=[],activeIndex:i=0,autoplay:h=!0,loop:p=!0,interval:y=200,blinkCallback:n,loadedCallback:u,className:S,showControls:j=!0,children:q})=>{const[c,a]=f.useState(h),[d,k]=f.useState(!1),s=t.length>1,B=(e=0)=>{const P=t.length-1;return A.getClampedArrayIndex(i+e,P)},x=()=>{if(s){const e=B(1);p===!1&&e===t.length-1&&r(),n&&n(e)}},r=()=>{a(!1)},v=()=>{a(e=>!e)},I=()=>{r(),x()},m=()=>{r(),n&&n(B(-1))};return M.default(x,s&&d&&c?y:null),l.jsxs(o.BlinkerContainer,{className:S,children:[l.jsx(o.BlinkerImages,{loadCallback:()=>{k(!0),u&&u()},visible:i,images:t}),q,s&&j&&l.jsx(o.BlinkerControls,{isDisabled:!d,playing:c,handleStartStop:v,handleNext:I,handlePrevious:m})]})};g.displayName="Atomic.Blinker";const N=g;exports.default=N;

package/dist/atomic/Blinker/Blinker.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsxs as P, jsx as f } from "react/jsx-runtime";
+import { jsxs as N, jsx as f } from "react/jsx-runtime";
 import { useState as m } from "react";
-import v from "../../hooks/useInterval.js";
-import { BlinkerContainer as D, BlinkerImages as L, BlinkerControls as $ } from "./styles.js";
-import { getClampedArrayIndex as q } from "../../lib/utils.js";
+import { getClampedArrayIndex as P } from "../../lib/utils.js";
+import D from "../../hooks/useInterval.js";
+import { BlinkerContainer as L, BlinkerImages as $, BlinkerControls as q } from "./styles.js";
 const p = ({
   images: e = [],
   activeIndex: s = 0,
@@ -16,12 +16,12 @@ const p = ({
   showControls: k = !0,
   children: y
 }) => {
-  const [i, a] = m(B), [d, I] = m(!1), o = e.length > 1, c = (t = 0) => {
-    const N = e.length - 1;
-    return q(s + t, N);
+  const [i, a] = m(B), [c, I] = m(!1), o = e.length > 1, d = (t = 0) => {
+    const A = e.length - 1;
+    return P(s + t, A);
   }, u = () => {
     if (o) {
-      const t = c(1);
+      const t = d(1);
       x === !1 && t === e.length - 1 && r(), n && n(t);
     }
   }, r = () => {
@@ -30,29 +30,29 @@ const p = ({
     a((t) => !t);
   }, j = () => {
     r(), u();
-  }, A = () => {
-    r(), n && n(c(-1));
+  }, v = () => {
+    r(), n && n(d(-1));
   };
-  return v(u, o && d && i ? h : null), /* @__PURE__ */ P(D, { className: g, children: [
+  return D(u, o && c && i ? h : null), /* @__PURE__ */ N(L, { className: g, children: [
     /* @__PURE__ */ f(
-      L,
+      $,
       {
-        loadedCallback: () => {
+        loadCallback: () => {
           I(!0), l && l();
         },
-        images: e,
-        activeIndex: s
+        visible: s,
+        images: e
       }
     ),
     y,
     o && k && /* @__PURE__ */ f(
-      $,
+      q,
       {
-        isDisabled: !d,
+        isDisabled: !c,
         playing: i,
         handleStartStop: S,
         handleNext: j,
-        handlePrevious: A
+        handlePrevious: v
       }
     )
   ] });

package/dist/atomic/Blinker/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("./Controls/Controls.cjs"),n=require("./Images/Images.cjs"),o=e=>e&&e.__esModule?e:{default:e},t=o(r),l=t.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("./Controls/Controls.cjs"),n=require("../ImageStack/index.cjs"),o=e=>e&&e.__esModule?e:{default:e},t=o(r),l=t.default.div`
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr min-content;

package/dist/atomic/Blinker/styles.js

@@ -1,18 +1,18 @@
 "use client";
-import r from "styled-components";
-import t from "./Controls/Controls.js";
-import i from "./Images/Images.js";
-const s = r.div`
+import t from "styled-components";
+import r from "./Controls/Controls.js";
+import i from "../ImageStack/index.js";
+const s = t.div`
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr min-content;
   justify-items: center;
   position: relative;
   height: 100%;
-`, m = r(t)`
+`, m = t(r)`
   grid-row: 2;
   margin-block-start: var(--PADDING_SMALL, 20px);
-`, l = r(i)`
+`, a = t(i)`
   aspect-ratio: 1;
   grid-row: 1;
   width: 100%;
@@ -20,5 +20,5 @@ const s = r.div`
 export {
   s as BlinkerContainer,
   m as BlinkerControls,
-  l as BlinkerImages
+  a as BlinkerImages
 };

package/dist/atomic/Button/index.d.ts

@@ -0,0 +1 @@
+export { default as Reset } from "./patterns/Reset";

package/dist/atomic/Button/patterns/Reset.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),i=require("react-i18next"),l=require("@rubin-epo/epo-react-lib/Button"),r=t=>t&&t.__esModule?t:{default:t},c=r(l),o=({isDisabled:t,onResetCallback:e,className:n})=>{const{t:s}=i.useTranslation();return u.jsx(c.default,{style:{"--button-text-align":"left"},disabled:t,icon:"RotateLeftWithCenter",iconSize:"2em",onClick:()=>e&&e(),className:n,isBlock:!0,children:s("colorTool.actions.reset")})};o.displayName="Atomic.Button.Reset";const a=o;exports.default=a;

package/dist/atomic/Button/patterns/Reset.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+interface ResetButtonProps {
+    isDisabled?: boolean;
+    onResetCallback: () => void;
+    className?: string;
+}
+declare const ResetButton: FunctionComponent<ResetButtonProps>;
+export default ResetButton;

package/dist/atomic/Button/patterns/Reset.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { useTranslation as r } from "react-i18next";
+import c from "@rubin-epo/epo-react-lib/Button";
+const o = ({
+  isDisabled: e,
+  onResetCallback: t,
+  className: n
+}) => {
+  const { t: i } = r();
+  return /* @__PURE__ */ s(
+    c,
+    {
+      style: { "--button-text-align": "left" },
+      disabled: e,
+      icon: "RotateLeftWithCenter",
+      iconSize: "2em",
+      onClick: () => t && t(),
+      className: n,
+      isBlock: !0,
+      children: i("colorTool.actions.reset")
+    }
+  );
+};
+o.displayName = "Atomic.Button.Reset";
+const a = o;
+export {
+  a as default
+};

package/dist/atomic/ImageStack/index.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),r=require("react"),E=require("lodash/after"),u=require("./styles.cjs"),q=e=>e&&e.__esModule?e:{default:e},x=q(E),g=({images:e,visible:a,describedById:h,mixBlendMode:y,loadCallback:i,className:p,width:S,height:k,showBackdrop:_=!0,showLoader:b=!0})=>{const n=r.useRef(null),[t,l]=r.useState(!0);r.useEffect(()=>{t||i&&i()},[t]);const d=r.useCallback(x.default(e.length,()=>{l(!1)}),[]);return!e||e.length===0?null:(t&&n.current&&Array.from(n.current.getElementsByTagName("img")).every(({complete:s})=>!!s)&&l(!1),c.jsxs(u.StackContainer,{ref:n,role:"img","aria-describedby":h,className:p,style:{"--image-stack-background":_&&"var(--neutral95, #1f2121)",aspectRatio:`${S||e[0].width} / ${k||e[0].height}`},children:[b&&t&&c.jsx(u.StackLoader,{isVisible:!0}),e.map(({url:f,width:m,height:s},o)=>{const j=Array.isArray(a)?a[o]:a===o;return c.jsx(u.StackedImage,{role:"presentation",src:f,width:m,height:s,onLoad:d,onError:d,style:{mixBlendMode:y},hidden:!j},o)})]}))};g.displayName="Atomic.ImageStack";const A=g;exports.default=A;

package/dist/atomic/ImageStack/index.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, FunctionComponent } from "react";
+import { ImageShape } from "@rubin-epo/epo-react-lib/Image";
+export interface ImageStackProps {
+    images: Array<ImageShape>;
+    visible?: number | Array<boolean>;
+    describedById?: string;
+    loadCallback?: () => void;
+    mixBlendMode?: CSSProperties["mixBlendMode"];
+    className?: string;
+    width?: number;
+    height?: number;
+    showBackdrop?: boolean;
+    showLoader?: boolean;
+}
+declare const ImageStack: FunctionComponent<ImageStackProps>;
+export default ImageStack;

package/dist/atomic/ImageStack/index.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs as A, jsx as f } from "react/jsx-runtime";
+import { useRef as C, useState as I, useEffect as b, useCallback as w } from "react";
+import x from "lodash/after";
+import { StackContainer as L, StackLoader as R, StackedImage as $ } from "./styles.js";
+const u = ({
+  images: e,
+  visible: r,
+  describedById: d,
+  mixBlendMode: h,
+  loadCallback: s,
+  className: g,
+  width: p,
+  height: y,
+  showBackdrop: k = !0,
+  showLoader: S = !0
+}) => {
+  const a = C(null), [t, i] = I(!0);
+  b(() => {
+    t || s && s();
+  }, [t]);
+  const c = w(
+    x(e.length, () => {
+      i(!1);
+    }),
+    []
+  );
+  return !e || e.length === 0 ? null : (t && a.current && Array.from(
+    a.current.getElementsByTagName("img")
+  ).every(({ complete: n }) => !!n) && i(!1), /* @__PURE__ */ A(
+    L,
+    {
+      ref: a,
+      role: "img",
+      "aria-describedby": d,
+      className: g,
+      style: {
+        "--image-stack-background": k && "var(--neutral95, #1f2121)",
+        aspectRatio: `${p || e[0].width} / ${y || e[0].height}`
+      },
+      children: [
+        S && t && /* @__PURE__ */ f(R, { isVisible: !0 }),
+        e.map(({ url: l, width: m, height: n }, o) => {
+          const E = Array.isArray(r) ? r[o] : r === o;
+          return /* @__PURE__ */ f(
+            $,
+            {
+              role: "presentation",
+              src: l,
+              width: m,
+              height: n,
+              onLoad: c,
+              onError: c,
+              style: { mixBlendMode: h },
+              hidden: !E
+            },
+            o
+          );
+        })
+      ]
+    }
+  ));
+};
+u.displayName = "Atomic.ImageStack";
+const T = u;
+export {
+  T as default
+};

package/dist/atomic/ImageStack/styles.cjs

@@ -0,0 +1,31 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),n=require("@rubin-epo/epo-react-lib/CircularLoader"),a=e=>e&&e.__esModule?e:{default:e},t=a(r),d=a(n),o=t.default.div`
+  background-color: var(--image-stack-background, transparent);
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "stack";
+
+  justify-items: center;
+  align-items: center;
+
+  width: 100%;
+  height: auto;
+`,s=t.default.img`
+  grid-area: stack;
+  height: auto;
+  width: 100%;
+
+  user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  -ms-user-drag: none;
+  user-drag: none;
+
+  &[hidden] {
+    display: none;
+  }
+`,i=t.default(d.default)`
+  grid-area: stack;
+`;exports.StackContainer=o;exports.StackLoader=i;exports.StackedImage=s;

package/dist/atomic/ImageStack/styles.js

@@ -0,0 +1,39 @@
+"use client";
+import e from "styled-components";
+import r from "@rubin-epo/epo-react-lib/CircularLoader";
+const n = e.div`
+  background-color: var(--image-stack-background, transparent);
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "stack";
+
+  justify-items: center;
+  align-items: center;
+
+  width: 100%;
+  height: auto;
+`, o = e.img`
+  grid-area: stack;
+  height: auto;
+  width: 100%;
+
+  user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  -ms-user-drag: none;
+  user-drag: none;
+
+  &[hidden] {
+    display: none;
+  }
+`, s = e(r)`
+  grid-area: stack;
+`;
+export {
+  n as StackContainer,
+  s as StackLoader,
+  o as StackedImage
+};

package/dist/atomic/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Blinker } from "./Blinker";
 export { default as ElapsedTime } from "./ElapsedTime";
 export { default as PlaybackControl } from "./PlaybackControl";
+export { default as ImageStack } from "./ImageStack";

package/dist/charts/Bars/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),y=require("react"),B=require("../styles.cjs"),l=({data:e,xDomain:t,yDomain:o,xScale:u,yScale:s,ticks:c})=>{if(e.length===0)return null;const i=(t[1]-t[0])/c;return p.jsx("g",{children:e.map(({stroke:f,fill:g,width:n=8,value:r,props:m},a)=>{const b=s(r);if(r===0)return null;const d=u(i*a),h=s(o[1]-r);return y.createElement(B.Bar,{height:b,x:d,y:h,width:n,fill:g||"var(--bar-fill, #12726D)",stroke:f||"var(--bar-stroke, transparent)",key:a,transform:`translate(-${n/2} 1)`,...m})})})};l.displayName="Charts.Bars";const j=l;exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),d=require("react"),h=require("../styles.cjs"),a=({data:e,yDomain:i,xScale:o,yScale:r,y:t=r(i[0])})=>e.length===0?null:b.jsx("g",{role:"list",children:e.map(({stroke:u,fill:c,width:s=8,x:f,value:l,props:m},g)=>{if(l===0)return null;const n=t-r(l);return d.createElement(h.Bar,{role:"listitem",height:n,y:t,width:s,x:o(f),fill:c||"var(--bar-fill, #12726D)",stroke:u||"var(--bar-stroke, transparent)",key:g,transform:`translate(-${s/2} -${n})`,...m})})});a.displayName="Charts.Bars";const p=a;exports.default=p;

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

@@ -5,15 +5,15 @@ export interface Bar {
     fill?: string;
     width?: number;
     value: number;
+    x: number;
     props?: HTMLProps<SVGRectElement>;
 }
 export interface BarsProps {
     data: Array<Bar>;
-    xDomain: Domain;
     yDomain: Domain;
     xScale: ScaleFunction;
     yScale: ScaleFunction;
-    ticks: number;
+    y?: number;
 }
 declare const Bars: FunctionComponent<BarsProps>;
 export default Bars;

package/dist/charts/Bars/index.js

@@ -1,40 +1,34 @@
-import { jsx as k } from "react/jsx-runtime";
-import { createElement as b } from "react";
-import { Bar as x } from "../styles.js";
-const o = ({
-  data: t,
-  xDomain: n,
-  yDomain: l,
-  xScale: f,
-  yScale: s,
-  ticks: m
-}) => {
-  if (t.length === 0)
+import { jsx as h } from "react/jsx-runtime";
+import { createElement as B } from "react";
+import { Bar as g } from "../styles.js";
+const n = ({
+  data: r,
+  yDomain: o,
+  xScale: i,
+  yScale: t,
+  y: e = t(o[0])
+}) => r.length === 0 ? null : /* @__PURE__ */ h("g", { role: "list", children: r.map(({ stroke: m, fill: f, width: s = 8, x: p, value: a, props: u }, c) => {
+  if (a === 0)
     return null;
-  const i = (n[1] - n[0]) / m;
-  return /* @__PURE__ */ k("g", { children: t.map(({ stroke: c, fill: p, width: e = 8, value: r, props: u }, a) => {
-    const h = s(r);
-    if (r === 0)
-      return null;
-    const B = f(i * a), g = s(l[1] - r);
-    return /* @__PURE__ */ b(
-      x,
-      {
-        height: h,
-        x: B,
-        y: g,
-        width: e,
-        fill: p || "var(--bar-fill, #12726D)",
-        stroke: c || "var(--bar-stroke, transparent)",
-        key: a,
-        transform: `translate(-${e / 2} 1)`,
-        ...u
-      }
-    );
-  }) });
-};
-o.displayName = "Charts.Bars";
-const j = o;
+  const l = e - t(a);
+  return /* @__PURE__ */ B(
+    g,
+    {
+      role: "listitem",
+      height: l,
+      y: e,
+      width: s,
+      x: i(p),
+      fill: f || "var(--bar-fill, #12726D)",
+      stroke: m || "var(--bar-stroke, transparent)",
+      key: c,
+      transform: `translate(-${s / 2} -${l})`,
+      ...u
+    }
+  );
+}) });
+n.displayName = "Charts.Bars";
+const b = n;
 export {
-  j as default
+  b as default
 };

package/dist/charts/Base/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),l=require("./styles.cjs"),s=({width:e=900,height:t=300,minX:r=0,minY:a=0,children:o,className:i})=>u.jsx(l.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`${r} ${a} ${e} ${t}`,className:i,style:{"--aspect-ratio":`${e} / ${t}`,"--min-width":`${e}px`},role:"group",children:o});s.displayName="Charts.Base";const n=s;exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("./styles.cjs"),o=({width:r=900,height:t=300,minX:n=0,minY:l=0,verticalLabel:i,verticalLabelId:u,horizontalLabel:a,horizontalLabelId:c,children:d,className:x})=>e.jsxs(s.ChartContainer,{children:[i&&e.jsx(s.VerticalLabel,{id:u,children:i}),e.jsx(s.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`${n} ${l} ${r} ${t}`,className:x,style:{"--aspect-ratio":`${r} / ${t}`,"--min-width":`${r}px`},role:"group",children:d}),a&&e.jsx(s.HorizontalLabel,{id:c,children:a})]});o.displayName="Charts.Base";const p=o;exports.default=p;

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

@@ -5,6 +5,10 @@ export interface BaseChartProps {
     minX?: number;
     minY?: number;
     className?: string;
+    verticalLabel?: string;
+    verticalLabelId?: string;
+    horizontalLabel?: string;
+    horizontalLabelId?: string;
 }
 declare const BaseChart: FunctionComponent<PropsWithChildren<BaseChartProps>>;
 export default BaseChart;

package/dist/charts/Base/index.js

@@ -1,28 +1,36 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { SVG as i } from "./styles.js";
-const t = ({
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { ChartContainer as $, VerticalLabel as x, SVG as B, HorizontalLabel as C } from "./styles.js";
+const i = ({
   width: e = 900,
-  height: r = 300,
-  minX: a = 0,
-  minY: s = 0,
-  children: o,
-  className: p
-}) => /* @__PURE__ */ $(
-  i,
-  {
-    preserveAspectRatio: "xMidYMid meet",
-    viewBox: `${a} ${s} ${e} ${r}`,
-    className: p,
-    style: {
-      "--aspect-ratio": `${e} / ${r}`,
-      "--min-width": `${e}px`
-    },
-    role: "group",
-    children: o
-  }
-);
-t.displayName = "Charts.Base";
-const c = t;
+  height: s = 300,
+  minX: o = 0,
+  minY: n = 0,
+  verticalLabel: t,
+  verticalLabelId: p,
+  horizontalLabel: a,
+  horizontalLabelId: d,
+  children: c,
+  className: l
+}) => /* @__PURE__ */ m($, { children: [
+  t && /* @__PURE__ */ r(x, { id: p, children: t }),
+  /* @__PURE__ */ r(
+    B,
+    {
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: `${o} ${n} ${e} ${s}`,
+      className: l,
+      style: {
+        "--aspect-ratio": `${e} / ${s}`,
+        "--min-width": `${e}px`
+      },
+      role: "group",
+      children: c
+    }
+  ),
+  a && /* @__PURE__ */ r(C, { id: d, children: a })
+] });
+i.displayName = "Charts.Base";
+const h = i;
 export {
-  c as default
+  h as default
 };