@rubin-epo/epo-widget-lib 0.8.1 → 0.9.1

package/dist/widgets/LightCurvePlot/PlotWithCurve/styles.js

@@ -0,0 +1,41 @@
+"use client";
+import i from "styled-components";
+import r from "../DM15Display/index.js";
+const e = i.div`
+  --light-curve-padding: var(--PADDING_SMALL, 20px);
+
+  display: grid;
+  gap: var(--light-curve-padding);
+  grid-template-rows: 1fr min-content;
+  grid-template-columns: 1fr;
+`;
+i.div`
+  display: flex;
+  flex-direction: column;
+  container-type: inline-size;
+  background-color: var(--white, #fff);
+  border: 1px solid var(--turquoise55, #009fa1);
+  gap: var(--light-curve-padding);
+  padding: var(--light-curve-padding);
+`;
+i.h3`
+  margin: 0;
+`;
+const o = i(r)`
+  background-color: var(--white, #fff);
+  margin: 2px 1em;
+  padding: 2px;
+`, d = i.form`
+  display: flex;
+  flex-direction: column;
+  gap: var(--light-curve-padding);
+`, l = i.span`
+  display: block;
+  margin-block-end: var(--light-curve-padding);
+`;
+export {
+  e as Container,
+  l as ControlLabel,
+  d as Controls,
+  o as DM15Display
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),s=require("../ScatterPlot/index.cjs"),i=require("../helpers.cjs"),n=({alerts:e,peakMjd:t,...u})=>{const o=i.formatMagnitudePoints(e,t);return r.jsx(s.default,{...u,data:o})},l=n;exports.default=l;

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { Alert } from '../../../types/astro';
+import { ScatterPlotProps } from "../ScatterPlot";
+export interface PlotWithoutCurveProps extends Omit<ScatterPlotProps, "data"> {
+    alerts: Array<Alert>;
+    peakMjd: number;
+}
+declare const PlotWithoutCurve: FunctionComponent<PlotWithoutCurveProps>;
+export default PlotWithoutCurve;

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

@@ -0,0 +1,20 @@
+import { jsx as m } from "react/jsx-runtime";
+import u from "../ScatterPlot/index.js";
+import { formatMagnitudePoints as a } from "../helpers.js";
+const e = ({
+  alerts: t,
+  peakMjd: o,
+  ...r
+}) => {
+  const i = a(t, o);
+  return /* @__PURE__ */ m(
+    u,
+    {
+      ...r,
+      data: i
+    }
+  );
+}, l = e;
+export {
+  l as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=({x:n,y:s,error:t,onMouseOver:l,onMouseOut:a,description:o})=>e.jsxs("g",{role:"listitem","aria-label":o,transform:`translate(${n},${s})`,onMouseOver:l,onMouseOut:a,children:[e.jsx("line",{x:0,y1:t,y2:-t,stroke:"var(--black, #000)",strokeWidth:1,fill:"none"}),e.jsx("line",{x1:-3,x2:3,y1:t,y2:t,stroke:"var(--black, #000)",strokeWidth:1,fill:"none"}),e.jsx("line",{x1:-3,x2:3,y1:-t,y2:-t,stroke:"var(--black, #000)",strokeWidth:1,fill:"none"}),e.jsx("circle",{fill:"var(--turquoise85, #12726D)",r:6,cursor:"pointer"})]});i.displayName="Widgets.LightCurve.Point";const r=i;exports.default=r;

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

@@ -0,0 +1,11 @@
+import { FunctionComponent } from "react";
+interface LightCurvePointProps {
+    x: number;
+    y: number;
+    error: number;
+    onMouseOver: () => void;
+    onMouseOut: () => void;
+    description?: string;
+}
+declare const LightCurvePoint: FunctionComponent<LightCurvePointProps>;
+export default LightCurvePoint;

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

@@ -0,0 +1,68 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+const n = ({
+  x: e,
+  y: a,
+  error: t,
+  onMouseOver: s,
+  onMouseOut: l,
+  description: o
+}) => /* @__PURE__ */ r(
+  "g",
+  {
+    role: "listitem",
+    "aria-label": o,
+    transform: `translate(${e},${a})`,
+    onMouseOver: s,
+    onMouseOut: l,
+    children: [
+      /* @__PURE__ */ i(
+        "line",
+        {
+          x: 0,
+          y1: t,
+          y2: -t,
+          stroke: "var(--black, #000)",
+          strokeWidth: 1,
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ i(
+        "line",
+        {
+          x1: -3,
+          x2: 3,
+          y1: t,
+          y2: t,
+          stroke: "var(--black, #000)",
+          strokeWidth: 1,
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ i(
+        "line",
+        {
+          x1: -3,
+          x2: 3,
+          y1: -t,
+          y2: -t,
+          stroke: "var(--black, #000)",
+          strokeWidth: 1,
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ i(
+        "circle",
+        {
+          fill: "var(--turquoise85, #12726D)",
+          r: 6,
+          cursor: "pointer"
+        }
+      )
+    ]
+  }
+);
+n.displayName = "Widgets.LightCurve.Point";
+const u = n;
+export {
+  u as default
+};

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

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),E=require("react"),G=require("react-i18next"),L=require("d3-array"),_=require("../../../charts/hooks/useAxis.cjs"),J=require("../../../charts/XAxis/index.cjs"),K=require("../../../charts/YAxis/index.cjs"),Q=require("../../../charts/Tooltip/index.cjs"),U=require("../../../charts/ClippingContainer/index.cjs"),V=require("../../../charts/Viewport/index.cjs"),l=require("../defaults.cjs"),X=require("../Point/index.cjs"),M=require("./styles.cjs"),S=({data:s,activeAlertId:A,xMin:I,xMax:k,yMin:F=l.default.yMin,yMax:P=l.default.yMax,width:x=l.default.width,height:f=l.default.height,name:R,children:$,className:D})=>{const{t:a,i18n:{language:T}}=G.useTranslation(),[h,b]=E.useState(),C=a("light_curve.plot.x_label"),m="xAxisLabel",H=a("light_curve.plot.y_label"),p="yAxisLabel",i=typeof h<"u"?s[h]:s.find(({id:o})=>o===A),d={top:10,left:40,right:10,bottom:25},u=[0+d.left,x-d.right],[v,O,n]=_.default({min:I||L.min(s,({x:o})=>o)||l.default.xMin,max:k||L.max(s,({x:o})=>o)||l.default.xMax,step:l.default.xStep,range:u}),g=n(v[0]),c=[0+d.top,f-d.bottom],[r,W,e]=_.default({min:F,max:P,step:l.default.yStep,range:c}),q=e(r[1]);return t.jsx(M.PlotContainer,{className:D,children:t.jsxs(M.Chart,{width:x,height:f,horizontalLabel:C,horizontalLabelId:m,verticalLabel:H,verticalLabelId:p,title:R,children:[t.jsx("rect",{x:n(0),y:e(r[0]),width:n(15)-n(0),height:q-e(r[0]),fill:"#F5F5F5"}),t.jsx(J.default,{ticks:O,y:q,labelledById:m,xDomain:v,xScale:n}),t.jsx(K.default,{ticks:W,x:g,labelledById:p,yDomain:r,yScale:e}),t.jsx(U.default,{x:g,y:e(r[0]),width:u[1]-u[0],height:c[1]-c[0],children:t.jsx("g",{role:"list","aria-label":a("light_curve.plot.plot_label")||void 0,children:s.map(({x:o,y:j,error:z,id:B},w)=>{const y=Math.round(o),N=y>0?"after":y===0?"peak":"before";return t.jsx(X.default,{x:n(o),y:e(j),error:e(z)-e(0),onMouseOver:()=>b(w),onMouseOut:()=>b(void 0),description:a("light_curve.plot.point_label",{magnitude:j,count:Math.abs(y),context:N})||void 0},B)})})}),t.jsx(V.default,{x:g,y:e(r[0]),outerWidth:u[1]-u[0],outerHeight:c[1]-c[0],innerWidth:x,innerHeight:f,children:$}),t.jsx(Q.default,{x:i?n(i.x):void 0,y:i?e(i.y):void 0,visible:!!i,offset:6,children:a("light_curve.plot.tooltip",{magnitude:i==null?void 0:i.y.toLocaleString(T,{minimumFractionDigits:2,maximumFractionDigits:2})})})]})})};S.displayName="Widgets.LightCurve.ScatterPlot";const Y=S;exports.default=Y;

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

@@ -0,0 +1,11 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import { Bounds } from '../../../charts/types';
+import { formatMagnitudePoints } from "../helpers";
+export interface ScatterPlotProps extends Partial<Bounds> {
+    data: ReturnType<typeof formatMagnitudePoints>;
+    name?: string;
+    activeAlertId?: number;
+    className?: string;
+}
+declare const ScatterPlot: FunctionComponent<PropsWithChildren<ScatterPlotProps>>;
+export default ScatterPlot;

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

@@ -0,0 +1,158 @@
+"use client";
+import { jsx as o, jsxs as V } from "react/jsx-runtime";
+import { useState as X } from "react";
+import { useTranslation as Y } from "react-i18next";
+import { min as q, max as E } from "d3-array";
+import _ from "../../../charts/hooks/useAxis.js";
+import G from "../../../charts/XAxis/index.js";
+import J from "../../../charts/YAxis/index.js";
+import K from "../../../charts/Tooltip/index.js";
+import Q from "../../../charts/ClippingContainer/index.js";
+import U from "../../../charts/Viewport/index.js";
+import r from "../defaults.js";
+import Z from "../Point/index.js";
+import { PlotContainer as $, Chart as tt } from "./styles.js";
+const M = ({
+  data: s,
+  activeAlertId: S,
+  xMin: I,
+  xMax: k,
+  yMin: C = r.yMin,
+  yMax: F = r.yMax,
+  width: p = r.width,
+  height: d = r.height,
+  name: P,
+  children: D,
+  className: R
+}) => {
+  const {
+    t: a,
+    i18n: { language: T }
+  } = Y(), [h, f] = X(), H = a("light_curve.plot.x_label"), y = "xAxisLabel", W = a("light_curve.plot.y_label"), b = "yAxisLabel", i = typeof h < "u" ? s[h] : s.find(({ id: e }) => e === S), x = {
+    top: 10,
+    left: 40,
+    right: 10,
+    bottom: 25
+  }, m = [0 + x.left, p - x.right], [v, j, n] = _({
+    min: I || q(s, ({ x: e }) => e) || r.xMin,
+    max: k || E(s, ({ x: e }) => e) || r.xMax,
+    step: r.xStep,
+    range: m
+  }), u = n(v[0]), c = [0 + x.top, d - x.bottom], [l, w, t] = _({
+    min: C,
+    max: F,
+    step: r.yStep,
+    range: c
+  }), L = t(l[1]);
+  return /* @__PURE__ */ o($, { className: R, children: /* @__PURE__ */ V(
+    tt,
+    {
+      width: p,
+      height: d,
+      horizontalLabel: H,
+      horizontalLabelId: y,
+      verticalLabel: W,
+      verticalLabelId: b,
+      title: P,
+      children: [
+        /* @__PURE__ */ o(
+          "rect",
+          {
+            x: n(0),
+            y: t(l[0]),
+            width: n(15) - n(0),
+            height: L - t(l[0]),
+            fill: "#F5F5F5"
+          }
+        ),
+        /* @__PURE__ */ o(
+          G,
+          {
+            ticks: j,
+            y: L,
+            labelledById: y,
+            xDomain: v,
+            xScale: n
+          }
+        ),
+        /* @__PURE__ */ o(
+          J,
+          {
+            ticks: w,
+            x: u,
+            labelledById: b,
+            yDomain: l,
+            yScale: t
+          }
+        ),
+        /* @__PURE__ */ o(
+          Q,
+          {
+            x: u,
+            y: t(l[0]),
+            width: m[1] - m[0],
+            height: c[1] - c[0],
+            children: /* @__PURE__ */ o(
+              "g",
+              {
+                role: "list",
+                "aria-label": a("light_curve.plot.plot_label") || void 0,
+                children: s.map(({ x: e, y: A, error: z, id: B }, O) => {
+                  const g = Math.round(e), N = g > 0 ? "after" : g === 0 ? "peak" : "before";
+                  return /* @__PURE__ */ o(
+                    Z,
+                    {
+                      x: n(e),
+                      y: t(A),
+                      error: t(z) - t(0),
+                      onMouseOver: () => f(O),
+                      onMouseOut: () => f(void 0),
+                      description: a("light_curve.plot.point_label", {
+                        magnitude: A,
+                        count: Math.abs(g),
+                        context: N
+                      }) || void 0
+                    },
+                    B
+                  );
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          U,
+          {
+            x: u,
+            y: t(l[0]),
+            outerWidth: m[1] - m[0],
+            outerHeight: c[1] - c[0],
+            innerWidth: p,
+            innerHeight: d,
+            children: D
+          }
+        ),
+        /* @__PURE__ */ o(
+          K,
+          {
+            x: i ? n(i.x) : void 0,
+            y: i ? t(i.y) : void 0,
+            visible: !!i,
+            offset: 6,
+            children: a("light_curve.plot.tooltip", {
+              magnitude: i == null ? void 0 : i.y.toLocaleString(T, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+              })
+            })
+          }
+        )
+      ]
+    }
+  ) });
+};
+M.displayName = "Widgets.LightCurve.ScatterPlot";
+const ut = M;
+export {
+  ut as default
+};

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

@@ -0,0 +1,30 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),i=require("../../../charts/Base/index.cjs"),r=e=>e&&e.__esModule?e:{default:e},n=r(o),a=n.default.div`
+  display: flex;
+  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);
+`,l=n.default(i.default)`
+  font-size: 2.25em;
+  overflow: visible;
+
+  @container (
+  min-width: ${t.token("BREAK_MOBILE")}
+) {
+    font-size: 1.5em;
+  }
+
+  @container (
+  min-width: ${t.token("BREAK_PHABLET_MIN")}
+) {
+    font-size: 1.25em;
+  }
+
+  @container (
+  min-width: ${t.token("BREAK_LARGE_TABLET_MIN")}
+) {
+    font-size: 1em;
+  }
+`;exports.Chart=l;exports.PlotContainer=a;

package/dist/widgets/LightCurvePlot/ScatterPlot/styles.d.ts

@@ -0,0 +1,288 @@
+/// <reference types="react" />
+export declare const PlotContainer: import("styled-components").IStyledComponent<"web", {
+    ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    children?: import("react").ReactNode;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "step" | "time" | "true" | "false" | "page" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+}>;
+export declare const Chart: import("styled-components").IStyledComponent<"web", {
+    className?: string | undefined;
+    title?: string | undefined;
+    verticalLabel?: string | undefined;
+    verticalLabelId?: string | undefined;
+    horizontalLabel?: string | undefined;
+    horizontalLabelId?: string | undefined;
+    xMin?: number | undefined;
+    xMax?: number | undefined;
+    width?: number | undefined;
+    yMin?: number | undefined;
+    yMax?: number | undefined;
+    height?: number | undefined;
+    children?: import("react").ReactNode;
+}> & import("react").FunctionComponent<import("react").PropsWithChildren<import("../../../charts/Base/index").BaseChartProps>>;