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

package/dist/widgets/IsochronePlot/A11Y/CurveFit.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),C=require("../../../lib/utils.cjs"),F=require("react"),b=require("react-i18next"),d=({isochrone:r,points:h,offset:m,xScale:o,yScale:s,width:c,height:i,value:p})=>{const{t:g,i18n:{language:v}}=b.useTranslation(),f=C.buildPath(r,[0,m]),P=F.useMemo(()=>{const u=h.filter(({y:e})=>e<16),n=document.createElement("canvas");n.width=c,n.height=i;const t=n.getContext("2d");if(t){t.clearRect(0,0,c,i);const e=new Path2D(f);return t.lineWidth=15,t.stroke(e),u.filter(a=>{const x=o(a.x),I=s(a.y);return t.isPointInStroke(e,x,I)}).length/u.length}return 0},[r,o,s]);return l.jsx(l.Fragment,{children:g("isochrone_plot.output_screenreader",{...p,percent:Intl.NumberFormat(v,{style:"percent"}).format(P)})})};d.displayName="IsochronePlot.A11Y.CurveFit";const k=d;exports.default=k;

package/dist/widgets/IsochronePlot/A11Y/CurveFit.d.ts

@@ -0,0 +1,15 @@
+import { Point, ScaleFunction } from '../../../types/charts';
+import { FunctionComponent } from 'react';
+
+type Props = {
+    points: Array<Point>;
+    isochrone: Array<Point>;
+    offset: number;
+    xScale: ScaleFunction;
+    yScale: ScaleFunction;
+    width: number;
+    height: number;
+    value: Record<string, string>;
+};
+declare const CurveFit: FunctionComponent<Props>;
+export default CurveFit;

package/dist/widgets/IsochronePlot/A11Y/CurveFit.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as C, Fragment as F } from "react/jsx-runtime";
+import { buildPath as I } from "../../../lib/utils.js";
+import { useMemo as k } from "react";
+import { useTranslation as y } from "react-i18next";
+const l = ({
+  isochrone: o,
+  points: m,
+  offset: p,
+  xScale: r,
+  yScale: s,
+  width: i,
+  height: c,
+  value: f
+}) => {
+  const {
+    t: h,
+    i18n: { language: d }
+  } = y(), g = I(o, [0, p]), v = k(() => {
+    const a = m.filter(({ y: e }) => e < 16), n = document.createElement("canvas");
+    n.width = i, n.height = c;
+    const t = n.getContext("2d");
+    if (t) {
+      t.clearRect(0, 0, i, c);
+      const e = new Path2D(g);
+      return t.lineWidth = 15, t.stroke(e), a.filter((u) => {
+        const P = r(u.x), x = s(u.y);
+        return t.isPointInStroke(e, P, x);
+      }).length / a.length;
+    }
+    return 0;
+  }, [o, r, s]);
+  return /* @__PURE__ */ C(F, { children: h("isochrone_plot.output_screenreader", {
+    ...f,
+    percent: Intl.NumberFormat(d, { style: "percent" }).format(
+      v
+    )
+  }) });
+};
+l.displayName = "IsochronePlot.A11Y.CurveFit";
+const A = l;
+export {
+  A as default
+};

package/dist/widgets/IsochronePlot/Controls/index.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("@rubin-epo/epo-react-lib/HorizontalSlider"),b=require("../../../atomic/ControlLabel/index.cjs"),p=require("react-i18next"),x=t=>t&&t.__esModule?t:{default:t},f=x(_),a=({value:t,onChangeCallback:r,configs:s,isDisabled:u=!1})=>{const{t:n}=p.useTranslation(),i=(e,l)=>{r&&r({...t,[e]:l})},c={isDisabled:u,color:"var(--turquoise85, #12726D)"};return o.jsx(o.Fragment,{children:Object.keys(s).map(e=>o.jsx(b.default,{label:n(`isochrone_plot.controls.${e}.label`),input:l=>o.jsx(f.default,{labelledbyId:l,value:t[e],ariaValuetext:n(`isochrone_plot.controls.${e}.textValue`,{value:t[e]})||void 0,onChangeCallback:d=>i(e,d),...c,...s[e]}),labelBy:!0},e))})};a.displayName="Widgets.IsochronePlot.Controls";const h=a;exports.default=h;

package/dist/widgets/IsochronePlot/Controls/index.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+import { IsochroneValue } from '..';
+
+interface Config {
+    min: number;
+    max: number;
+    step: number;
+    marks?: boolean;
+}
+type Props = {
+    value: Required<IsochroneValue>;
+    configs: Record<keyof IsochroneValue, Config>;
+    onChangeCallback?: (value: IsochroneValue) => void;
+    isDisabled?: boolean;
+};
+declare const Controls: FunctionComponent<Props>;
+export default Controls;

package/dist/widgets/IsochronePlot/Controls/index.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as l, Fragment as u } from "react/jsx-runtime";
+import d from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import b from "../../../atomic/ControlLabel/index.js";
+import { useTranslation as h } from "react-i18next";
+const a = ({
+  value: t,
+  onChangeCallback: e,
+  configs: n,
+  isDisabled: i = !1
+}) => {
+  const { t: s } = h(), c = (o, r) => {
+    e && e({ ...t, [o]: r });
+  }, m = {
+    isDisabled: i,
+    color: "var(--turquoise85, #12726D)"
+  };
+  return /* @__PURE__ */ l(u, { children: Object.keys(n).map((o) => /* @__PURE__ */ l(
+    b,
+    {
+      label: s(`isochrone_plot.controls.${o}.label`),
+      input: (r) => /* @__PURE__ */ l(
+        d,
+        {
+          labelledbyId: r,
+          value: t[o],
+          ariaValuetext: s(`isochrone_plot.controls.${o}.textValue`, {
+            value: t[o]
+          }) || void 0,
+          onChangeCallback: (p) => c(o, p),
+          ...m,
+          ...n[o]
+        }
+      ),
+      labelBy: !0
+    },
+    o
+  )) });
+};
+a.displayName = "Widgets.IsochronePlot.Controls";
+const g = a;
+export {
+  g as default
+};

package/dist/widgets/IsochronePlot/defaults.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={width:600,height:600,xAxis:{step:1,min:-1,max:3},yAxis:{step:2,min:22,max:8},pointRadius:{sm:4,md:6,lg:6}},t=e;exports.default=t;

package/dist/widgets/IsochronePlot/defaults.d.ts

@@ -0,0 +1,20 @@
+declare const defaults: {
+    width: number;
+    height: number;
+    xAxis: {
+        step: number;
+        min: number;
+        max: number;
+    };
+    yAxis: {
+        step: number;
+        min: number;
+        max: number;
+    };
+    pointRadius: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+};
+export default defaults;

package/dist/widgets/IsochronePlot/defaults.js

@@ -0,0 +1,14 @@
+const s = {
+  width: 600,
+  height: 600,
+  xAxis: { step: 1, min: -1, max: 3 },
+  yAxis: { step: 2, min: 22, max: 8 },
+  pointRadius: {
+    sm: 4,
+    md: 6,
+    lg: 6
+  }
+}, t = s;
+export {
+  t as default
+};

package/dist/widgets/IsochronePlot/index.d.ts

@@ -0,0 +1,23 @@
+import { FunctionComponent } from 'react';
+import { AxisConfig, Point, PlotPoint } from '../../types/charts';
+
+export type IsochroneValue = {
+    age?: number;
+    distance?: number;
+};
+export type AgeLibrary = {
+    ages: Record<string, Array<Point>>;
+};
+type Props = {
+    isDisplayOnly?: boolean;
+    isLoading?: boolean;
+    data: Array<PlotPoint>;
+    value?: IsochroneValue;
+    ageLibrary: AgeLibrary;
+    onChangeCallback?: (value: IsochroneValue) => void;
+    xAxis?: Partial<AxisConfig>;
+    yAxis?: Partial<AxisConfig>;
+    name?: string;
+};
+declare const IsochronePlot: FunctionComponent<Props>;
+export default IsochronePlot;

package/dist/widgets/IsochronePlot/mock.d.ts

@@ -0,0 +1,3 @@
+export declare const getAgeLibrary: () => Promise<{
+    ages: Record<string, any[]>;
+}>;

package/dist/widgets/LightCurvePlot/Plot/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),$=require("react-i18next"),v=require("d3-array"),C=require("../../../charts/ScatterPlot/index.cjs"),e=require("../defaults.cjs"),x=require("./styles.cjs"),L=(s,u,c)=>{const r={};return Object.keys(s).forEach(l=>{const a=l==="top"||l==="bottom"?c:u,o=`${l.charAt(0).toUpperCase()}${l.slice(1)}`;r[`padding${o}`]=`${s[l]/a*100}%`}),r},y=({data:s,activeAlertId:u,xMin:c,xMax:r,yMin:d=e.default.yMin,yMax:l=e.default.yMax,width:a=e.default.width,height:o=e.default.height,name:j,slider:m,className:_,plotChildren:g})=>{const{t:n,i18n:{language:A}}=$.useTranslation(),q=n("light_curve.plot.x_label"),M=n("light_curve.plot.y_label"),h={top:10,right:10,bottom:25,left:40};return i.jsxs(x.PlotContainer,{className:_,children:[i.jsx(C.default,{width:a,height:o,margins:h,activePointId:u,title:j,xAxis:{min:c||v.min(s,({x:t})=>t)||e.default.xMin,max:r||v.max(s,({x:t})=>t)||e.default.xMax,step:e.default.xStep,label:q},yAxis:{min:d,max:l,step:d<l?Math.abs(e.default.yStep):e.default.yStep,label:M},data:{label:n("light_curve.plot.plot_label"),points:s},tooltip:({y:t})=>n("light_curve.plot.tooltip",{magnitude:t.toLocaleString(A,{minimumFractionDigits:2,maximumFractionDigits:2})}),plotChildren:({xScale:t,yStart:f,yEnd:p,Data:b,...P})=>i.jsxs(i.Fragment,{children:[i.jsx("rect",{x:t(0),y:p,width:t(15)-t(0),height:f-p,stroke:"var(--neutral60,##6A6E6E)",strokeDasharray:6,fill:"var(--neutral20,#DCE0E3)"}),b,g&&g({xScale:t,yStart:f,yEnd:p,Data:b,...P})]})}),m&&i.jsx(x.SliderOuterWrapper,{children:i.jsx(x.SliderInnerWrapper,{style:{...L(h,a,o)},children:m})})]})};y.displayName="Widgets.LightCurve.Plot";const S=y;exports.default=S;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),$=require("react-i18next"),b=require("d3-array"),L=require("../../../charts/ScatterPlot/index.cjs"),e=require("../defaults.cjs"),y=require("./styles.cjs");require("../../../atomic/PlotWrapper/index.cjs");const S=require("../../../atomic/PlotWrapper/styles.cjs"),W=(s,u,c)=>{const i={};return Object.keys(s).forEach(l=>{const a=l==="top"||l==="bottom"?c:u,o=`${l.charAt(0).toUpperCase()}${l.slice(1)}`;i[`padding${o}`]=`${s[l]/a*100}%`}),i},v=({data:s,activeAlertId:u,xMin:c,xMax:i,yMin:d=e.default.yMin,yMax:l=e.default.yMax,width:a=e.default.width,height:o=e.default.height,name:j,slider:x,className:_,plotChildren:m})=>{const{t:n,i18n:{language:q}}=$.useTranslation(),A=n("light_curve.plot.x_label"),M=n("light_curve.plot.y_label"),g={top:10,right:10,bottom:25,left:40};return r.jsxs(S.PlotWrapper,{className:_,children:[r.jsx(L.default,{width:a,height:o,margins:g,activePointId:u,title:j,xAxis:{min:c||b.min(s,({x:t})=>t)||e.default.xMin,max:i||b.max(s,({x:t})=>t)||e.default.xMax,step:e.default.xStep,label:A},yAxis:{min:d,max:l,step:d<l?Math.abs(e.default.yStep):e.default.yStep,label:M},data:{label:n("light_curve.plot.plot_label"),points:s},tooltip:({y:t})=>n("light_curve.plot.tooltip",{magnitude:t.toLocaleString(q,{minimumFractionDigits:2,maximumFractionDigits:2})}),plotChildren:({xScale:t,yStart:h,yEnd:p,Data:f,...P})=>r.jsxs(r.Fragment,{children:[r.jsx("rect",{x:t(0),y:p,width:t(15)-t(0),height:h-p,stroke:"var(--neutral60,##6A6E6E)",strokeDasharray:6,fill:"var(--neutral20,#DCE0E3)"}),f,m&&m({xScale:t,yStart:h,yEnd:p,Data:f,...P})]})}),x&&r.jsx(y.SliderOuterWrapper,{children:r.jsx(y.SliderInnerWrapper,{style:{...W(g,a,o)},children:x})})]})};v.displayName="Widgets.LightCurve.Plot";const C=v;exports.default=C;

package/dist/widgets/LightCurvePlot/Plot/index.d.ts

@@ -1,7 +1,8 @@
-import { FunctionComponent, ReactNode } from "react";
-import { Bounds, PlotChildRenderer, Point } from '../../../types/charts';
+import { FunctionComponent, ReactNode } from 'react';
+import { Bounds, PlotChildRenderer, PlotPoint } from '../../../types/charts';
+
 export interface PlotProps extends Partial<Bounds> {
-    data: Array<Point>;
+    data: Array<PlotPoint>;
     name?: string;
     activeAlertId?: number;
     className?: string;

package/dist/widgets/LightCurvePlot/Plot/index.js

@@ -1,21 +1,23 @@
 "use client";
-import { jsxs as f, jsx as n, Fragment as L } from "react/jsx-runtime";
-import { useTranslation as M } from "react-i18next";
-import { min as j, max as D } from "d3-array";
-import E from "../../../charts/ScatterPlot/index.js";
+import { jsxs as f, jsx as n, Fragment as M } from "react/jsx-runtime";
+import { useTranslation as W } from "react-i18next";
+import { min as j, max as C } from "d3-array";
+import D from "../../../charts/ScatterPlot/index.js";
 import e from "../defaults.js";
-import { PlotContainer as F, SliderOuterWrapper as S, SliderInnerWrapper as W } from "./styles.js";
-const k = (i, m, p) => {
-  const r = {};
-  return Object.keys(i).forEach((o) => {
-    const l = o === "top" || o === "bottom" ? p : m, s = `${o.charAt(0).toUpperCase()}${o.slice(1)}`;
-    r[`padding${s}`] = `${i[o] / l * 100}%`;
-  }), r;
+import { SliderOuterWrapper as E, SliderInnerWrapper as F } from "./styles.js";
+import "../../../atomic/PlotWrapper/index.js";
+import { PlotWrapper as S } from "../../../atomic/PlotWrapper/styles.js";
+const k = (r, p, m) => {
+  const i = {};
+  return Object.keys(r).forEach((o) => {
+    const l = o === "top" || o === "bottom" ? m : p, s = `${o.charAt(0).toUpperCase()}${o.slice(1)}`;
+    i[`padding${s}`] = `${r[o] / l * 100}%`;
+  }), i;
 }, v = ({
-  data: i,
-  activeAlertId: m,
-  xMin: p,
-  xMax: r,
+  data: r,
+  activeAlertId: p,
+  xMin: m,
+  xMax: i,
   yMin: c = e.yMin,
   yMax: o = e.yMax,
   width: l = e.width,
@@ -28,24 +30,24 @@ const k = (i, m, p) => {
   const {
     t: a,
     i18n: { language: A }
-  } = M(), P = a("light_curve.plot.x_label"), $ = a("light_curve.plot.y_label"), x = {
+  } = W(), P = a("light_curve.plot.x_label"), $ = a("light_curve.plot.y_label"), x = {
     top: 10,
     right: 10,
     bottom: 25,
     left: 40
   };
-  return /* @__PURE__ */ f(F, { className: _, children: [
+  return /* @__PURE__ */ f(S, { className: _, children: [
     /* @__PURE__ */ n(
-      E,
+      D,
       {
         width: l,
         height: s,
         margins: x,
-        activePointId: m,
+        activePointId: p,
         title: y,
         xAxis: {
-          min: p || j(i, ({ x: t }) => t) || e.xMin,
-          max: r || D(i, ({ x: t }) => t) || e.xMax,
+          min: m || j(r, ({ x: t }) => t) || e.xMin,
+          max: i || C(r, ({ x: t }) => t) || e.xMax,
           step: e.xStep,
           label: P
         },
@@ -57,7 +59,7 @@ const k = (i, m, p) => {
         },
         data: {
           label: a("light_curve.plot.plot_label"),
-          points: i
+          points: r
         },
         tooltip: ({ y: t }) => a("light_curve.plot.tooltip", {
           magnitude: t.toLocaleString(A, {
@@ -65,7 +67,7 @@ const k = (i, m, p) => {
             maximumFractionDigits: 2
           })
         }),
-        plotChildren: ({ xScale: t, yStart: d, yEnd: u, Data: b, ...C }) => /* @__PURE__ */ f(L, { children: [
+        plotChildren: ({ xScale: t, yStart: d, yEnd: u, Data: b, ...L }) => /* @__PURE__ */ f(M, { children: [
           /* @__PURE__ */ n(
             "rect",
             {
@@ -79,12 +81,12 @@ const k = (i, m, p) => {
             }
           ),
           b,
-          h && h({ xScale: t, yStart: d, yEnd: u, Data: b, ...C })
+          h && h({ xScale: t, yStart: d, yEnd: u, Data: b, ...L })
         ] })
       }
     ),
-    g && /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(
-      W,
+    g && /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(
+      F,
       {
         style: { ...k(x, l, s) },
         children: g
@@ -93,7 +95,7 @@ const k = (i, m, p) => {
   ] });
 };
 v.displayName = "Widgets.LightCurve.Plot";
-const T = v;
+const q = v;
 export {
-  T as default
+  q as default
 };

package/dist/widgets/LightCurvePlot/Plot/styles.cjs

@@ -1,44 +1,13 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("@rubin-epo/epo-react-lib/styles"),o=require("../../../charts/Base/index.cjs"),n=e=>e&&e.__esModule?e:{default:e},t=n(r),l=t.default.div`
-  --label-height: 3em;
-
-  aspect-ratio: 1;
-  color: var(--neutral95, #1f2121);
-  container-type: inline-size;
-  background-color: var(--white, #fff);
-  border: 1px solid var(--turquoise55, #009fa1);
-  gap: var(--light-curve-padding);
-  position: relative;
-`;t.default(o.default)`
-  font-size: 2.5em;
-  overflow: visible;
-
-  @container (
-  min-width: ${i.token("BREAK_MOBILE")}
-) {
-    font-size: 1.75em;
-  }
-
-  @container (
-  min-width: ${i.token("BREAK_PHABLET_MIN")}
-) {
-    font-size: 1.5em;
-  }
-
-  @container (
-  min-width: ${i.token("BREAK_LARGE_TABLET_MIN")}
-) {
-    font-size: 1.25em;
-  }
-`;const a=t.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("styled-components"),r=e=>e&&e.__esModule?e:{default:e},t=r(l),i=t.default.div`
   position: absolute;
   width: calc(100% - calc(var(--label-height) * 2));
   height: calc(100% - calc(var(--label-height) * 2));
   top: var(--label-height);
   left: var(--label-height);
   pointer-events: none;
-`,d=t.default.div`
+`,a=t.default.div`
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   position: relative;
-`;exports.PlotContainer=l;exports.SliderInnerWrapper=d;exports.SliderOuterWrapper=a;
+`;exports.SliderInnerWrapper=a;exports.SliderOuterWrapper=i;