@unovis/react 1.7.0-pre.1 → 1.7.0

package/composites/time-series/index.js

@@ -1,62 +1,67 @@
-import React, { useState, useMemo } from 'react';
-import { Scale, TextAlign } from '@unovis/ts';
-import { VisXYContainer } from '../../containers/xy-container/index.js';
-import { VisArea } from '../../components/area/index.js';
-import { VisAxis } from '../../components/axis/index.js';
-import { VisCrosshair } from '../../components/crosshair/index.js';
-import { VisTooltip } from '../../components/tooltip/index.js';
-import { VisBrush } from '../../components/brush/index.js';
-import s from './style.module.css.js';
-
-function VisTimeSeries(props) {
-    var _a;
-    const [selectedRange, setSelectedRange] = useState(undefined);
-    const [animationDuration, setAnimationDuration] = useState(0);
-    const xScale = useMemo(() => Scale.scaleTime(), []);
-    const xScaleNav = useMemo(() => Scale.scaleTime(), []);
-    const onBrushStart = useMemo(() => (selection, e, userDriven) => {
-        var _a;
-        if (userDriven)
-            setAnimationDuration(0);
-        (_a = props.onBrushStart) === null || _a === void 0 ? void 0 : _a.call(props, selection, e, userDriven);
-    }, []);
-    const onBrushMove = useMemo(() => (selection, e, userDriven) => {
-        var _a;
-        if (userDriven && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange[0]) !== selection[0] && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange[1]) !== selection[1])
-            setSelectedRange(selection);
-        (_a = props.onBrushMove) === null || _a === void 0 ? void 0 : _a.call(props, selection, e, userDriven);
-    }, []);
-    const onBrushEnd = useMemo(() => (selection, e, userDriven) => {
-        var _a;
-        if (userDriven && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange[0]) !== selection[0] && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange[1]) !== selection[1])
-            setSelectedRange(selection);
-        setAnimationDuration(undefined);
-        (_a = props.onBrushEnd) === null || _a === void 0 ? void 0 : _a.call(props, selection, e, userDriven);
-    }, []);
-    return (React.createElement("div", { className: `${s.timeSeriesContainer}${props.className ? `.${props.className}` : ''}`, style: { height: props.height } },
-        React.createElement(VisXYContainer, { className: s.timeSeriesModule, data: props.data, xScale: xScale, xDomain: selectedRange, duration: animationDuration, scaleByDomain: true },
-            React.createElement(VisArea, { x: props.x, y: props.y, color: props.color }),
-            React.createElement(VisAxis, { type: 'x', numTicks: 5, tickFormat: props.formatXTicks, tickTextAlign: TextAlign.Center }),
-            React.createElement(VisAxis, { type: 'y', tickFormat: props.formatYTicks, label: props.yLabel }),
-            React.createElement(VisTooltip, null),
-            React.createElement(VisCrosshair, { template: props.crosshairTemplate })),
-        React.createElement(VisXYContainer, { className: s.navigationModule, duration: 0, xScale: xScaleNav, data: props.data },
-            React.createElement(VisArea, { x: props.x, y: props.y }),
-            React.createElement(VisBrush, { draggable: true, onBrushStart: onBrushStart, onBrushMove: onBrushMove, onBrushEnd: onBrushEnd }),
-            React.createElement(VisAxis, { type: 'x', numTicks: 5, tickFormat: (_a = props.formatXTicks) !== null && _a !== void 0 ? _a : props.formatNavXTicks, tickTextAlign: TextAlign.Right, label: props.xLabel }),
-            React.createElement(VisAxis, { type: 'y', tickFormat: props.formatYTicks, minMaxTicksOnly: true, label: props.yLabel ? ' ' : undefined }))));
-}
-VisTimeSeries.defaultProps = {
-    margin: { top: 10, bottom: 10, left: 10, right: 10 },
-    autoMargin: true,
-    padding: {},
-    x: (d) => d.timestamp,
-    y: (d) => d.value,
-    id: (d) => d.id,
-    color: (d) => null,
-    formatYTicks: (d) => d.toFixed(1),
-    crosshairTemplate: (d) => { var _a; return `<div>Date: ${new Date(d.timestamp).toLocaleDateString()}</div><div>Value: ${(_a = d.value) === null || _a === void 0 ? void 0 : _a.toFixed(1)}</div>`; },
+import React, { useState, useMemo } from "react";
+import { TextAlign } from "@unovis/ts/types/text";
+import { Scale } from "@unovis/ts/types/scale";
+import { VisXYContainer } from "../../containers/xy-container/index.js";
+import { VisArea } from "../../components/area/index.js";
+import { VisAxis } from "../../components/axis/index.js";
+import { VisCrosshair } from "../../components/crosshair/index.js";
+import { VisTooltip } from "../../components/tooltip/index.js";
+import { VisBrush } from "../../components/brush/index.js";
+import s from "./style.module.css.js";
+function VisTimeSeries(props) {
+  const [selectedRange, setSelectedRange] = useState(void 0);
+  const [animationDuration, setAnimationDuration] = useState(0);
+  const xScale = useMemo(() => Scale.scaleTime(), []);
+  const xScaleNav = useMemo(() => Scale.scaleTime(), []);
+  const onBrushStart = useMemo(() => (selection, e, userDriven) => {
+    if (userDriven) setAnimationDuration(0);
+    props.onBrushStart?.(selection, e, userDriven);
+  }, []);
+  const onBrushMove = useMemo(() => (selection, e, userDriven) => {
+    if (userDriven && selectedRange?.[0] !== selection[0] && selectedRange?.[1] !== selection[1]) setSelectedRange(selection);
+    props.onBrushMove?.(selection, e, userDriven);
+  }, []);
+  const onBrushEnd = useMemo(() => (selection, e, userDriven) => {
+    if (userDriven && selectedRange?.[0] !== selection[0] && selectedRange?.[1] !== selection[1]) setSelectedRange(selection);
+    setAnimationDuration(void 0);
+    props.onBrushEnd?.(selection, e, userDriven);
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { className: `${s.timeSeriesContainer}${props.className ? `.${props.className}` : ""}`, style: { height: props.height } }, /* @__PURE__ */ React.createElement(
+    VisXYContainer,
+    {
+      className: s.timeSeriesModule,
+      data: props.data,
+      xScale,
+      xDomain: selectedRange,
+      duration: animationDuration,
+      scaleByDomain: true
+    },
+    /* @__PURE__ */ React.createElement(
+      VisArea,
+      {
+        x: props.x,
+        y: props.y,
+        color: props.color
+      }
+    ),
+    /* @__PURE__ */ React.createElement(VisAxis, { type: "x", numTicks: 5, tickFormat: props.formatXTicks, tickTextAlign: TextAlign.Center }),
+    /* @__PURE__ */ React.createElement(VisAxis, { type: "y", tickFormat: props.formatYTicks, label: props.yLabel }),
+    /* @__PURE__ */ React.createElement(VisTooltip, null),
+    /* @__PURE__ */ React.createElement(VisCrosshair, { template: props.crosshairTemplate })
+  ), /* @__PURE__ */ React.createElement(VisXYContainer, { className: s.navigationModule, duration: 0, xScale: xScaleNav, data: props.data }, /* @__PURE__ */ React.createElement(VisArea, { x: props.x, y: props.y }), /* @__PURE__ */ React.createElement(VisBrush, { draggable: true, onBrushStart, onBrushMove, onBrushEnd }), /* @__PURE__ */ React.createElement(VisAxis, { type: "x", numTicks: 5, tickFormat: props.formatXTicks ?? props.formatNavXTicks, tickTextAlign: TextAlign.Right, label: props.xLabel }), /* @__PURE__ */ React.createElement(VisAxis, { type: "y", tickFormat: props.formatYTicks, minMaxTicksOnly: true, label: props.yLabel ? " " : void 0 })));
+}
+VisTimeSeries.defaultProps = {
+  margin: { top: 10, bottom: 10, left: 10, right: 10 },
+  autoMargin: true,
+  padding: {},
+  x: (d) => d.timestamp,
+  y: (d) => d.value,
+  id: (d) => d.id,
+  color: (d) => null,
+  formatYTicks: (d) => d.toFixed(1),
+  crosshairTemplate: (d) => `<div>Date: ${new Date(d.timestamp).toLocaleDateString()}</div><div>Value: ${d.value?.toFixed(1)}</div>`
+};
+export {
+  VisTimeSeries
 };
-
-export { VisTimeSeries };
 //# sourceMappingURL=index.js.map

package/composites/time-series/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/composites/time-series/index.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react'\nimport { Spacing, TextAlign, Scale } from '@unovis/ts'\nimport { VisXYContainer } from '@unovis/react/containers/xy-container'\nimport { VisArea } from '@unovis/react/components/area'\nimport { VisAxis } from '@unovis/react/components/axis'\nimport { VisCrosshair } from '@unovis/react/components/crosshair'\nimport { VisTooltip } from '@unovis/react/components/tooltip'\nimport { VisBrush } from '@unovis/react/components/brush'\n\nimport s from './style.module.css'\n\nexport type VisTimeSeriesDatum = {\n  timestamp: number;\n  value: number;\n  id?: string;\n  color?: string;\n}\n\nexport type VisTimeSeriesProps<Datum> = {\n  data: Datum[];\n  margin: Spacing;\n  autoMargin: boolean;\n\n  x: (d: Datum, i: number) => number;\n  y: (d: Datum, i: number) => number;\n  id: (d: Datum, i: number) => string;\n  color: (d: Datum[], i: number) => string | null;\n  cursor: string | ((d: Datum, i: number) => string);\n  formatXTicks?: (timestamp: number) => string;\n  formatYTicks?: (timestamp: number) => string;\n\n  selectionMinLength: number;\n  onBrushStart?: (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean) => void;\n  onBrushMove?: (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean) => void;\n  onBrushEnd?: (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean) => void;\n  formatNavXTicks?: (timestamp: number) => string;\n\n  xLabel?: string;\n  yLabel?: string;\n\n  crosshairTemplate?: (d: Datum) => string | HTMLElement;\n\n  className?: string;\n  height?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisTimeSeries<Datum> (props: VisTimeSeriesProps<Datum>): JSX.Element {\n  const [selectedRange, setSelectedRange] = useState<[number, number] | undefined>(undefined)\n  const [animationDuration, setAnimationDuration] = useState<number | undefined>(0)\n  const xScale = useMemo(() => Scale.scaleTime(), [])\n  const xScaleNav = useMemo(() => Scale.scaleTime(), [])\n\n  // On Mount\n  // useEffect(() => {}, [])\n\n  // On Props Update\n  // useEffect(() => {})\n\n  // Brush callbacks\n  const onBrushStart = useMemo(() => (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean): void => {\n    if (userDriven) setAnimationDuration(0)\n    props.onBrushStart?.(selection, e, userDriven)\n  }, [])\n\n  const onBrushMove = useMemo(() => (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean): void => {\n    if (userDriven && selectedRange?.[0] !== selection[0] && selectedRange?.[1] !== selection[1]) setSelectedRange(selection)\n    props.onBrushMove?.(selection, e, userDriven)\n  }, [])\n\n  const onBrushEnd = useMemo(() => (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean): void => {\n    if (userDriven && selectedRange?.[0] !== selection[0] && selectedRange?.[1] !== selection[1]) setSelectedRange(selection)\n    setAnimationDuration(undefined)\n    props.onBrushEnd?.(selection, e, userDriven)\n  }, [])\n\n  return (\n    <div className={`${s.timeSeriesContainer}${props.className ? `.${props.className}` : ''}`} style={{ height: props.height }}>\n      <VisXYContainer\n        className={s.timeSeriesModule}\n        data={props.data}\n        xScale={xScale}\n        xDomain={selectedRange}\n        duration={animationDuration}\n        scaleByDomain={true}\n      >\n        <VisArea\n          x={props.x}\n          y={props.y}\n          color={props.color}\n        />\n        <VisAxis type='x' numTicks={5} tickFormat={props.formatXTicks} tickTextAlign={TextAlign.Center}/>\n        <VisAxis type='y' tickFormat={props.formatYTicks} label={props.yLabel}/>\n        <VisTooltip />\n        <VisCrosshair template={props.crosshairTemplate}/>\n      </VisXYContainer>\n      <VisXYContainer className={s.navigationModule} duration={0} xScale={xScaleNav} data={props.data}>\n        <VisArea x={props.x} y={props.y} />\n        <VisBrush draggable={true} onBrushStart={onBrushStart} onBrushMove={onBrushMove} onBrushEnd={onBrushEnd} />\n        <VisAxis type='x' numTicks={5} tickFormat={props.formatXTicks ?? props.formatNavXTicks} tickTextAlign={TextAlign.Right} label={props.xLabel}/>\n        <VisAxis type='y' tickFormat={props.formatYTicks} minMaxTicksOnly={true} label={props.yLabel ? ' ' : undefined}/>\n      </VisXYContainer>\n    </div>\n  )\n}\n\nVisTimeSeries.defaultProps = {\n  margin: { top: 10, bottom: 10, left: 10, right: 10 },\n  autoMargin: true,\n  padding: {},\n\n  x: (d: VisTimeSeriesDatum) => d.timestamp,\n  y: (d: VisTimeSeriesDatum) => d.value,\n  id: (d: VisTimeSeriesDatum) => d.id,\n  color: (d: VisTimeSeriesDatum[]) => null,\n\n  formatYTicks: (d: number) => d.toFixed(1),\n\n  crosshairTemplate: (d: VisTimeSeriesDatum) =>\n    `<div>Date: ${new Date(d.timestamp).toLocaleDateString()}</div><div>Value: ${d.value?.toFixed(1)}</div>`,\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+CM,SAAU,aAAa,CAAS,KAAgC,EAAA;;IACpE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA+B,SAAS,CAAC,CAAA;IAC3F,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAqB,CAAC,CAAC,CAAA;AACjF,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,CAAA;AACnD,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,CAAA;AAStD,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,SAA2B,EAAE,CAA+B,EAAE,UAAoB,KAAU;;AAC9H,QAAA,IAAI,UAAU;YAAE,oBAAoB,CAAC,CAAC,CAAC,CAAA;AACvC,QAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAlB,KAAK,EAAgB,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,CAAA;KAC/C,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,SAA2B,EAAE,CAA+B,EAAE,UAAoB,KAAU;;AAC7H,QAAA,IAAI,UAAU,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAG,CAAC,CAAC,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAG,CAAC,CAAC,MAAK,SAAS,CAAC,CAAC,CAAC;YAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;AACzH,QAAA,CAAA,EAAA,GAAA,KAAK,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAjB,KAAK,EAAe,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,CAAA;KAC9C,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,SAA2B,EAAE,CAA+B,EAAE,UAAoB,KAAU;;AAC5H,QAAA,IAAI,UAAU,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAG,CAAC,CAAC,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAG,CAAC,CAAC,MAAK,SAAS,CAAC,CAAC,CAAC;YAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;QACzH,oBAAoB,CAAC,SAAS,CAAC,CAAA;AAC/B,QAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAhB,KAAK,EAAc,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,CAAA;KAC7C,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,GAAG,CAAC,CAAC,mBAAmB,CAAA,EAAG,KAAK,CAAC,SAAS,GAAG,CAAI,CAAA,EAAA,KAAK,CAAC,SAAS,CAAE,CAAA,GAAG,EAAE,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,EAAA;AACxH,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,aAAa,EAAE,IAAI,EAAA;AAEnB,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,CAAC,EAAE,KAAK,CAAC,CAAC,EACV,CAAC,EAAE,KAAK,CAAC,CAAC,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,CAAA;YACF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,YAAY,EAAE,aAAa,EAAE,SAAS,CAAC,MAAM,EAAG,CAAA;AACjG,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,UAAU,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAG,CAAA;AACxE,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAG,IAAA,CAAA;YACd,KAAC,CAAA,aAAA,CAAA,YAAY,IAAC,QAAQ,EAAE,KAAK,CAAC,iBAAiB,GAAG,CACnC;QACjB,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAA;AAC7F,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAI,CAAA;AACnC,YAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAI,CAAA;AAC3G,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,KAAK,CAAC,eAAe,EAAE,aAAa,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAG,CAAA;AAC9I,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,GAAG,EAAC,UAAU,EAAE,KAAK,CAAC,YAAY,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,GAAG,SAAS,EAAA,CAAG,CAClG,CACb,EACP;AACH,CAAC;AAED,aAAa,CAAC,YAAY,GAAG;AAC3B,IAAA,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;AACpD,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,OAAO,EAAE,EAAE;IAEX,CAAC,EAAE,CAAC,CAAqB,KAAK,CAAC,CAAC,SAAS;IACzC,CAAC,EAAE,CAAC,CAAqB,KAAK,CAAC,CAAC,KAAK;IACrC,EAAE,EAAE,CAAC,CAAqB,KAAK,CAAC,CAAC,EAAE;AACnC,IAAA,KAAK,EAAE,CAAC,CAAuB,KAAK,IAAI;IAExC,YAAY,EAAE,CAAC,CAAS,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;AAEzC,IAAA,iBAAiB,EAAE,CAAC,CAAqB,KAAI,EAAA,IAAA,EAAA,CAAA,CAC3C,OAAA,CAAA,WAAA,EAAc,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,CAAA,kBAAA,EAAqB,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,CAAC,CAAC,CAAC,CAAA,MAAA,CAAQ,CAAA,EAAA;CAC3G;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/composites/time-series/index.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react'\nimport { Spacing } from '@unovis/ts/types/spacing'\nimport { TextAlign } from '@unovis/ts/types/text'\nimport { Scale } from '@unovis/ts/types/scale'\nimport { VisXYContainer } from '@unovis/react/containers/xy-container'\nimport { VisArea } from '@unovis/react/components/area'\nimport { VisAxis } from '@unovis/react/components/axis'\nimport { VisCrosshair } from '@unovis/react/components/crosshair'\nimport { VisTooltip } from '@unovis/react/components/tooltip'\nimport { VisBrush } from '@unovis/react/components/brush'\n\nimport s from './style.module.css'\n\nexport type VisTimeSeriesDatum = {\n  timestamp: number;\n  value: number;\n  id?: string;\n  color?: string;\n}\n\nexport type VisTimeSeriesProps<Datum> = {\n  data: Datum[];\n  margin: Spacing;\n  autoMargin: boolean;\n\n  x: (d: Datum, i: number) => number;\n  y: (d: Datum, i: number) => number;\n  id: (d: Datum, i: number) => string;\n  color: (d: Datum[], i: number) => string | null;\n  cursor: string | ((d: Datum, i: number) => string);\n  formatXTicks?: (timestamp: number) => string;\n  formatYTicks?: (timestamp: number) => string;\n\n  selectionMinLength: number;\n  onBrushStart?: (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean) => void;\n  onBrushMove?: (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean) => void;\n  onBrushEnd?: (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean) => void;\n  formatNavXTicks?: (timestamp: number) => string;\n\n  xLabel?: string;\n  yLabel?: string;\n\n  crosshairTemplate?: (d: Datum) => string | HTMLElement;\n\n  className?: string;\n  height?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisTimeSeries<Datum> (props: VisTimeSeriesProps<Datum>): JSX.Element {\n  const [selectedRange, setSelectedRange] = useState<[number, number] | undefined>(undefined)\n  const [animationDuration, setAnimationDuration] = useState<number | undefined>(0)\n  const xScale = useMemo(() => Scale.scaleTime(), [])\n  const xScaleNav = useMemo(() => Scale.scaleTime(), [])\n\n  // On Mount\n  // useEffect(() => {}, [])\n\n  // On Props Update\n  // useEffect(() => {})\n\n  // Brush callbacks\n  const onBrushStart = useMemo(() => (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean): void => {\n    if (userDriven) setAnimationDuration(0)\n    props.onBrushStart?.(selection, e, userDriven)\n  }, [])\n\n  const onBrushMove = useMemo(() => (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean): void => {\n    if (userDriven && selectedRange?.[0] !== selection[0] && selectedRange?.[1] !== selection[1]) setSelectedRange(selection)\n    props.onBrushMove?.(selection, e, userDriven)\n  }, [])\n\n  const onBrushEnd = useMemo(() => (selection: [number, number], e?: { sourceEvent: MouseEvent }, userDriven?: boolean): void => {\n    if (userDriven && selectedRange?.[0] !== selection[0] && selectedRange?.[1] !== selection[1]) setSelectedRange(selection)\n    setAnimationDuration(undefined)\n    props.onBrushEnd?.(selection, e, userDriven)\n  }, [])\n\n  return (\n    <div className={`${s.timeSeriesContainer}${props.className ? `.${props.className}` : ''}`} style={{ height: props.height }}>\n      <VisXYContainer\n        className={s.timeSeriesModule}\n        data={props.data}\n        xScale={xScale}\n        xDomain={selectedRange}\n        duration={animationDuration}\n        scaleByDomain={true}\n      >\n        <VisArea\n          x={props.x}\n          y={props.y}\n          color={props.color}\n        />\n        <VisAxis type='x' numTicks={5} tickFormat={props.formatXTicks} tickTextAlign={TextAlign.Center}/>\n        <VisAxis type='y' tickFormat={props.formatYTicks} label={props.yLabel}/>\n        <VisTooltip />\n        <VisCrosshair template={props.crosshairTemplate}/>\n      </VisXYContainer>\n      <VisXYContainer className={s.navigationModule} duration={0} xScale={xScaleNav} data={props.data}>\n        <VisArea x={props.x} y={props.y} />\n        <VisBrush draggable={true} onBrushStart={onBrushStart} onBrushMove={onBrushMove} onBrushEnd={onBrushEnd} />\n        <VisAxis type='x' numTicks={5} tickFormat={props.formatXTicks ?? props.formatNavXTicks} tickTextAlign={TextAlign.Right} label={props.xLabel}/>\n        <VisAxis type='y' tickFormat={props.formatYTicks} minMaxTicksOnly={true} label={props.yLabel ? ' ' : undefined}/>\n      </VisXYContainer>\n    </div>\n  )\n}\n\nVisTimeSeries.defaultProps = {\n  margin: { top: 10, bottom: 10, left: 10, right: 10 },\n  autoMargin: true,\n  padding: {},\n\n  x: (d: VisTimeSeriesDatum) => d.timestamp,\n  y: (d: VisTimeSeriesDatum) => d.value,\n  id: (d: VisTimeSeriesDatum) => d.id,\n  color: (d: VisTimeSeriesDatum[]) => null,\n\n  formatYTicks: (d: number) => d.toFixed(1),\n\n  crosshairTemplate: (d: VisTimeSeriesDatum) =>\n    `<div>Date: ${new Date(d.timestamp).toLocaleDateString()}</div><div>Value: ${d.value?.toFixed(1)}</div>`,\n}\n"],"names":[],"mappings":"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"}

package/composites/time-series/style.module.css.js

@@ -1,8 +1,15 @@
-import styleInject from './../../external/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".style-module_timeSeriesContainer__1kTlU {\n  position: relative;\n  height: 400px;\n  width: 100%;\n  font-family: sans-serif;\n}\n\n.style-module_timeSeriesModule__1s3Bs {\n  width: 100%;\n  height: 70%;\n  position: relative;\n}\n\n.style-module_navigationModule__1O8bx {\n  width: 100%;\n  height: 30%;\n  position: relative;\n}\n";
-var s = {"timeSeriesContainer":"style-module_timeSeriesContainer__1kTlU","timeSeriesModule":"style-module_timeSeriesModule__1s3Bs","navigationModule":"style-module_navigationModule__1O8bx"};
-styleInject(css_248z);
-
-export { s as default };
+const timeSeriesContainer = "_timeSeriesContainer_1ayv5_1";
+const timeSeriesModule = "_timeSeriesModule_1ayv5_8";
+const navigationModule = "_navigationModule_1ayv5_14";
+const s = {
+  timeSeriesContainer,
+  timeSeriesModule,
+  navigationModule
+};
+export {
+  s as default,
+  navigationModule,
+  timeSeriesContainer,
+  timeSeriesModule
+};
 //# sourceMappingURL=style.module.css.js.map

package/composites/time-series/style.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,uDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/composites.d.ts

@@ -1 +1 @@
-export * from './composites/time-series';
+export * from './composites/time-series';

package/containers/single-container/index.d.ts

@@ -1,8 +1,9 @@
-import React, { PropsWithChildren } from 'react';
-import { SingleContainerConfigInterface } from '@unovis/ts';
-export declare type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {
-    data?: Data;
-    className?: string;
-    style?: React.CSSProperties;
-};
-export declare const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null);
+import { default as React, PropsWithChildren } from 'react';
+import { SingleContainerConfigInterface } from '@unovis/ts/containers/single-container/config';
+
+export type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {
+    data?: Data;
+    className?: string;
+    style?: React.CSSProperties | Record<`--${string}`, string | number>;
+};
+export declare const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null);

package/containers/single-container/index.js

@@ -1,51 +1,69 @@
-import React, { useRef, useEffect } from 'react';
-import { SingleContainer } from '@unovis/ts';
-import { arePropsEqual } from '../../utils/react.js';
-
-function VisSingleContainerFC(props) {
-    const container = useRef(null);
-    const prevPropsRef = useRef({});
-    const chartRef = useRef(undefined);
-    const dataRef = useRef(undefined);
-    const animationFrameRef = useRef(null);
-    const getConfig = () => {
-        var _a, _b, _c, _d, _e, _f;
-        return (Object.assign(Object.assign({}, props), { component: (_b = (_a = container.current) === null || _a === void 0 ? void 0 : _a.querySelector('vis-component')) === null || _b === void 0 ? void 0 : _b.__component__, tooltip: (_d = (_c = container.current) === null || _c === void 0 ? void 0 : _c.querySelector('vis-tooltip')) === null || _d === void 0 ? void 0 : _d.__component__, annotations: (_f = (_e = container.current) === null || _e === void 0 ? void 0 : _e.querySelector('vis-annotations')) === null || _f === void 0 ? void 0 : _f.__component__ }));
-    };
-    useEffect(() => {
-        const c = new SingleContainer(container.current, getConfig(), props.data);
-        chartRef.current = c;
-        prevPropsRef.current = props;
-        dataRef.current = props.data;
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-                animationFrameRef.current = null;
-                prevPropsRef.current = {};
-            }
-            c.destroy();
-        };
-    }, []);
-    useEffect(() => {
-        var _a;
-        const preventRender = true;
-        if (props.data && (props.data !== dataRef.current)) {
-            (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.setData(props.data, preventRender);
-            dataRef.current = props.data;
-        }
-        if (!arePropsEqual(prevPropsRef.current, props)) {
-            prevPropsRef.current = props;
-            if (animationFrameRef.current)
-                cancelAnimationFrame(animationFrameRef.current);
-            animationFrameRef.current = requestAnimationFrame(() => {
-                var _a;
-                (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.updateContainer(getConfig());
-            });
-        }
-    });
-    return (React.createElement("div", { ref: container, className: props.className, style: props.style }, props.children));
-}
+import React, { useRef, useMemo, useEffect } from "react";
+import { SingleContainer } from "@unovis/ts/containers/single-container";
+import { arePropsEqual } from "../../utils/react.js";
+import { VisContainerContext } from "../../utils/container.js";
+function VisSingleContainerFC(props) {
+  const container = useRef(null);
+  const prevPropsRef = useRef({});
+  const chartRef = useRef(void 0);
+  const dataRef = useRef(void 0);
+  const animationFrameRef = useRef(null);
+  const renderRequestFrameRef = useRef(null);
+  const containerContext = useMemo(() => ({
+    requestRender: () => {
+      if (renderRequestFrameRef.current !== null) return;
+      renderRequestFrameRef.current = requestAnimationFrame(() => {
+        renderRequestFrameRef.current = null;
+        if (animationFrameRef.current !== null) return;
+        chartRef.current?.render();
+      });
+    }
+  }), []);
+  const getConfig = () => ({
+    ...props,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    component: container.current?.querySelector("vis-component")?.__component__,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    tooltip: container.current?.querySelector("vis-tooltip")?.__component__,
+    annotations: container.current?.querySelector("vis-annotations")?.__component__
+  });
+  useEffect(() => {
+    const c = new SingleContainer(container.current, getConfig(), props.data);
+    chartRef.current = c;
+    prevPropsRef.current = props;
+    dataRef.current = props.data;
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+        prevPropsRef.current = {};
+      }
+      if (renderRequestFrameRef.current !== null) {
+        cancelAnimationFrame(renderRequestFrameRef.current);
+        renderRequestFrameRef.current = null;
+      }
+      c.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    const preventRender = true;
+    if (props.data && props.data !== dataRef.current) {
+      chartRef.current?.setData(props.data, preventRender);
+      dataRef.current = props.data;
+    }
+    if (!arePropsEqual(prevPropsRef.current, props)) {
+      prevPropsRef.current = props;
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = requestAnimationFrame(() => {
+        animationFrameRef.current = null;
+        chartRef.current?.updateContainer(getConfig());
+      });
+    }
+  });
+  return /* @__PURE__ */ React.createElement("div", { ref: container, className: props.className, style: props.style }, /* @__PURE__ */ React.createElement(VisContainerContext.Provider, { value: containerContext }, props.children));
+}
 const VisSingleContainer = React.memo(VisSingleContainerFC, arePropsEqual);
-
-export { VisSingleContainer };
+export {
+  VisSingleContainer
+};
 //# sourceMappingURL=index.js.map

package/containers/single-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer, SingleContainerConfigInterface, ComponentCore, Tooltip, Annotations } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n  data?: Data;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const prevPropsRef = useRef<PropsWithChildren<VisSingleContainerProps<Data>>>({})\n  const chartRef = useRef<SingleContainer<Data> | undefined>(undefined)\n  const dataRef = useRef<Data | undefined>(undefined)\n  const animationFrameRef = useRef<number | null>(null)\n\n  const getConfig = (): SingleContainerConfigInterface<Data> => ({\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n    annotations: container.current?.querySelector<VisComponentElement<Annotations>>('vis-annotations')?.__component__,\n  })\n\n  // On Mount\n  useEffect(() => {\n    const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n    chartRef.current = c\n    prevPropsRef.current = props\n    dataRef.current = props.data\n\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n        animationFrameRef.current = null\n        prevPropsRef.current = {}\n      }\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== dataRef.current)) {\n      chartRef.current?.setData(props.data, preventRender)\n      dataRef.current = props.data\n    }\n\n    // Update and render\n    // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n    // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n    // the first render of its children (VisSankey, VisGraph, ...) meaning that their wrong instances (the ones\n    // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n    // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n    // components are available at `__component__`.\n    if (!arePropsEqual(prevPropsRef.current, props)) { // Checking whether the props have changed do avoid multiple renders\n      prevPropsRef.current = props\n      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n      animationFrameRef.current = requestAnimationFrame(() => {\n        chartRef.current?.updateContainer(getConfig())\n      })\n    }\n  })\n\n  return (\n    <div ref={container} className={props.className} style={props.style}>\n      {props.children}\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n  React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useMemo, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer } from '@unovis/ts/containers/single-container'\nimport { SingleContainerConfigInterface } from '@unovis/ts/containers/single-container/config'\nimport { ComponentCore } from '@unovis/ts/core/component'\nimport { Tooltip } from '@unovis/ts/components/tooltip'\nimport { Annotations } from '@unovis/ts/components/annotations'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\nimport { VisContainerContext, VisContainerContextValue } from 'src/utils/container'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n  data?: Data;\n  className?: string;\n  style?: React.CSSProperties | Record<`--${string}`, string | number>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const prevPropsRef = useRef<PropsWithChildren<VisSingleContainerProps<Data>>>({})\n  const chartRef = useRef<SingleContainer<Data> | undefined>(undefined)\n  const dataRef = useRef<Data | undefined>(undefined)\n  const animationFrameRef = useRef<number | null>(null)\n  const renderRequestFrameRef = useRef<number | null>(null)\n\n  // Children ask for a re-render when their own config changes. We coalesce the requests into a single\n  // frame, and skip them when this container's props changed too, because the `updateContainer` call\n  // scheduled below renders on its own.\n  const containerContext = useMemo<VisContainerContextValue>(() => ({\n    requestRender: () => {\n      if (renderRequestFrameRef.current !== null) return\n      renderRequestFrameRef.current = requestAnimationFrame(() => {\n        renderRequestFrameRef.current = null\n        if (animationFrameRef.current !== null) return\n        chartRef.current?.render()\n      })\n    },\n  }), [])\n\n  const getConfig = (): SingleContainerConfigInterface<Data> => ({\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n    annotations: container.current?.querySelector<VisComponentElement<Annotations>>('vis-annotations')?.__component__,\n  })\n\n  // On Mount\n  useEffect(() => {\n    const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n    chartRef.current = c\n    prevPropsRef.current = props\n    dataRef.current = props.data\n\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n        animationFrameRef.current = null\n        prevPropsRef.current = {}\n      }\n      if (renderRequestFrameRef.current !== null) {\n        cancelAnimationFrame(renderRequestFrameRef.current)\n        renderRequestFrameRef.current = null\n      }\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== dataRef.current)) {\n      chartRef.current?.setData(props.data, preventRender)\n      dataRef.current = props.data\n    }\n\n    // Update and render\n    // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n    // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n    // the first render of its children (VisSankey, VisGraph, ...) meaning that their wrong instances (the ones\n    // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n    // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n    // components are available at `__component__`.\n    if (!arePropsEqual(prevPropsRef.current, props)) { // Checking whether the props have changed do avoid multiple renders\n      prevPropsRef.current = props\n      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = null\n        chartRef.current?.updateContainer(getConfig())\n      })\n    }\n  })\n\n  return (\n    <div ref={container} className={props.className} style={props.style}>\n      <VisContainerContext.Provider value={containerContext}>\n        {props.children}\n      </VisContainerContext.Provider>\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n  React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAsBA,SAAS,qBAA4B,OAAsE;AACzG,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,eAAe,OAAyD,EAAE;AAChF,QAAM,WAAW,OAA0C,MAAS;AACpE,QAAM,UAAU,OAAyB,MAAS;AAClD,QAAM,oBAAoB,OAAsB,IAAI;AACpD,QAAM,wBAAwB,OAAsB,IAAI;AAKxD,QAAM,mBAAmB,QAAkC,OAAO;AAAA,IAChE,eAAe,MAAM;AACnB,UAAI,sBAAsB,YAAY,KAAM;AAC5C,4BAAsB,UAAU,sBAAsB,MAAM;AAC1D,8BAAsB,UAAU;AAChC,YAAI,kBAAkB,YAAY,KAAM;AACxC,iBAAS,SAAS,OAAA;AAAA,MACpB,CAAC;AAAA,IACH;AAAA,EAAA,IACE,CAAA,CAAE;AAEN,QAAM,YAAY,OAA6C;AAAA,IAC7D,GAAG;AAAA;AAAA,IAEH,WAAW,UAAU,SAAS,cAAwD,eAAe,GAAG;AAAA;AAAA,IAExG,SAAS,UAAU,SAAS,cAA4C,aAAa,GAAG;AAAA,IACxF,aAAa,UAAU,SAAS,cAAgD,iBAAiB,GAAG;AAAA,EAAA;AAItG,YAAU,MAAM;AACd,UAAM,IAAI,IAAI,gBAAsB,UAAU,SAA2B,UAAA,GAAa,MAAM,IAAI;AAChG,aAAS,UAAU;AACnB,iBAAa,UAAU;AACvB,YAAQ,UAAU,MAAM;AAExB,WAAO,MAAM;AACX,UAAI,kBAAkB,SAAS;AAC7B,6BAAqB,kBAAkB,OAAO;AAC9C,0BAAkB,UAAU;AAC5B,qBAAa,UAAU,CAAA;AAAA,MACzB;AACA,UAAI,sBAAsB,YAAY,MAAM;AAC1C,6BAAqB,sBAAsB,OAAO;AAClD,8BAAsB,UAAU;AAAA,MAClC;AACA,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,gBAAgB;AAGtB,QAAI,MAAM,QAAS,MAAM,SAAS,QAAQ,SAAU;AAClD,eAAS,SAAS,QAAQ,MAAM,MAAM,aAAa;AACnD,cAAQ,UAAU,MAAM;AAAA,IAC1B;AASA,QAAI,CAAC,cAAc,aAAa,SAAS,KAAK,GAAG;AAC/C,mBAAa,UAAU;AACvB,UAAI,kBAAkB,QAAS,sBAAqB,kBAAkB,OAAO;AAC7E,wBAAkB,UAAU,sBAAsB,MAAM;AACtD,0BAAkB,UAAU;AAC5B,iBAAS,SAAS,gBAAgB,WAAW;AAAA,MAC/C,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,6CACG,OAAA,EAAI,KAAK,WAAW,WAAW,MAAM,WAAW,OAAO,MAAM,MAAA,GAC5D,sBAAA,cAAC,oBAAoB,UAApB,EAA6B,OAAO,iBAAA,GAClC,MAAM,QACT,CACF;AAEJ;AAIO,MAAM,qBACX,MAAM,KAAK,sBAAsB,aAAa;"}

package/containers/xy-container/index.d.ts

@@ -1,9 +1,10 @@
-import React, { PropsWithChildren } from 'react';
-import { XYContainerConfigInterface } from '@unovis/ts';
-export declare type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {
-    data?: Datum[];
-    className?: string;
-    style?: React.CSSProperties;
-};
-export declare function VisXYContainerFC<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element;
-export declare const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null);
+import { default as React, PropsWithChildren } from 'react';
+import { XYContainerConfigInterface } from '@unovis/ts/containers/xy-container/config';
+
+export type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {
+    data?: Datum[];
+    className?: string;
+    style?: React.CSSProperties | Record<`--${string}`, string | number>;
+};
+export declare function VisXYContainerFC<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element;
+export declare const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null);

package/containers/xy-container/index.js

@@ -1,59 +1,73 @@
-import React, { useRef, useEffect } from 'react';
-import { XYContainer, AxisType } from '@unovis/ts';
-import { arePropsEqual } from '../../utils/react.js';
-
-function VisXYContainerFC(props) {
-    const container = useRef(null);
-    const prevPropsRef = useRef({});
-    const chartRef = useRef(undefined);
-    const dataRef = useRef(undefined);
-    const animationFrameRef = useRef(null);
-    const getConfig = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (Object.assign({ components: Array
-                .from((_b = (_a = container.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('vis-component')) !== null && _b !== void 0 ? _b : [])
-                .map(c => c.__component__), tooltip: (_d = (_c = container.current) === null || _c === void 0 ? void 0 : _c.querySelector('vis-tooltip')) === null || _d === void 0 ? void 0 : _d.__component__, crosshair: (_f = (_e = container.current) === null || _e === void 0 ? void 0 : _e.querySelector('vis-crosshair')) === null || _f === void 0 ? void 0 : _f.__component__, annotations: (_h = (_g = container.current) === null || _g === void 0 ? void 0 : _g.querySelector('vis-annotations')) === null || _h === void 0 ? void 0 : _h.__component__, xAxis: Array
-                .from((_k = (_j = container.current) === null || _j === void 0 ? void 0 : _j.querySelectorAll('vis-axis')) !== null && _k !== void 0 ? _k : [])
-                .map(c => c.__component__)
-                .find(c => c.config.type === AxisType.X), yAxis: Array
-                .from((_m = (_l = container.current) === null || _l === void 0 ? void 0 : _l.querySelectorAll('vis-axis')) !== null && _m !== void 0 ? _m : [])
-                .map(c => c.__component__)
-                .find(c => c.config.type === AxisType.Y), margin: { top: 5, left: 5, right: 5, bottom: 5 } }, props));
-    };
-    useEffect(() => {
-        const c = new XYContainer(container.current, getConfig(), props.data);
-        chartRef.current = c;
-        prevPropsRef.current = props;
-        dataRef.current = props.data;
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-                animationFrameRef.current = null;
-                prevPropsRef.current = {};
-            }
-            c.destroy();
-        };
-    }, []);
-    useEffect(() => {
-        var _a;
-        const preventRender = true;
-        if (props.data && (props.data !== dataRef.current)) {
-            (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.setData(props.data, preventRender);
-            dataRef.current = props.data;
-        }
-        if (!arePropsEqual(prevPropsRef.current, props)) {
-            prevPropsRef.current = props;
-            if (animationFrameRef.current)
-                cancelAnimationFrame(animationFrameRef.current);
-            animationFrameRef.current = requestAnimationFrame(() => {
-                var _a;
-                (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.updateContainer(getConfig());
-            });
-        }
-    });
-    return (React.createElement("div", { ref: container, className: props.className, style: props.style }, props.children));
-}
+import React, { useRef, useMemo, useEffect } from "react";
+import { XYContainer } from "@unovis/ts/containers/xy-container";
+import { AxisType } from "@unovis/ts/components/axis/types";
+import { arePropsEqual } from "../../utils/react.js";
+import { VisContainerContext } from "../../utils/container.js";
+function VisXYContainerFC(props) {
+  const container = useRef(null);
+  const prevPropsRef = useRef({});
+  const chartRef = useRef(void 0);
+  const dataRef = useRef(void 0);
+  const animationFrameRef = useRef(null);
+  const renderRequestFrameRef = useRef(null);
+  const containerContext = useMemo(() => ({
+    requestRender: () => {
+      if (renderRequestFrameRef.current !== null) return;
+      renderRequestFrameRef.current = requestAnimationFrame(() => {
+        renderRequestFrameRef.current = null;
+        if (animationFrameRef.current !== null) return;
+        chartRef.current?.render();
+      });
+    }
+  }), []);
+  const getConfig = () => ({
+    components: Array.from(container.current?.querySelectorAll("vis-component") ?? []).map((c) => c.__component__).filter(Boolean),
+    tooltip: container.current?.querySelector("vis-tooltip")?.__component__,
+    crosshair: container.current?.querySelector("vis-crosshair")?.__component__,
+    annotations: container.current?.querySelector("vis-annotations")?.__component__,
+    xAxis: Array.from(container.current?.querySelectorAll("vis-axis") ?? []).map((c) => c.__component__).find((c) => c.config.type === AxisType.X),
+    yAxis: Array.from(container.current?.querySelectorAll("vis-axis") ?? []).map((c) => c.__component__).find((c) => c.config.type === AxisType.Y),
+    margin: { top: 5, left: 5, right: 5, bottom: 5 },
+    ...props
+  });
+  useEffect(() => {
+    const c = new XYContainer(container.current, getConfig(), props.data);
+    chartRef.current = c;
+    prevPropsRef.current = props;
+    dataRef.current = props.data;
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+        prevPropsRef.current = {};
+      }
+      if (renderRequestFrameRef.current !== null) {
+        cancelAnimationFrame(renderRequestFrameRef.current);
+        renderRequestFrameRef.current = null;
+      }
+      c.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    const preventRender = true;
+    if (props.data && props.data !== dataRef.current) {
+      chartRef.current?.setData(props.data, preventRender);
+      dataRef.current = props.data;
+    }
+    if (!arePropsEqual(prevPropsRef.current, props)) {
+      prevPropsRef.current = props;
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = requestAnimationFrame(() => {
+        animationFrameRef.current = null;
+        chartRef.current?.updateContainer(getConfig());
+      });
+    }
+  });
+  return /* @__PURE__ */ React.createElement("div", { ref: container, className: props.className, style: props.style }, /* @__PURE__ */ React.createElement(VisContainerContext.Provider, { value: containerContext }, props.children));
+}
 const VisXYContainer = React.memo(VisXYContainerFC, arePropsEqual);
-
-export { VisXYContainer, VisXYContainerFC };
+export {
+  VisXYContainer,
+  VisXYContainerFC
+};
 //# sourceMappingURL=index.js.map