@unovis/react 1.0.0-beta.0

package/components/sankey/index.js

@@ -0,0 +1,22 @@
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Sankey } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisSankeyFC(props, fRef) {
+    const ref = useRef(null);
+    const [component] = useState(new Sankey(props));
+    useEffect(() => {
+        ref.current.__component__ = component;
+    }, []);
+    useEffect(() => {
+        if (props.data)
+            component === null || component === void 0 ? void 0 : component.setData(props.data);
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ component }));
+    return React.createElement("vis-component", { ref: ref });
+}
+const VisSankey = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual);
+
+export { VisSankey };
+//# sourceMappingURL=index.js.map

package/components/sankey/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/sankey/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Sankey, SankeyConfigInterface, SankeyInputNode, SankeyInputLink } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSankeyRef<N extends SankeyInputNode, L extends SankeyInputLink> = {\n  component: Sankey<N, L>;\n}\n\nexport type VisSankeyProps<N extends SankeyInputNode, L extends SankeyInputLink> = SankeyConfigInterface<N, L> & {\n  data?: any;\n  ref?: Ref<VisSankeyRef<N, L>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSankeyFC<N extends SankeyInputNode, L extends SankeyInputLink> (props: VisSankeyProps<N, L>, fRef: ForwardedRef<VisSankeyRef<N, L>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Sankey<N, L>>>(null)\n  const [component] = useState<Sankey<N, L>>(new Sankey(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Sankey<N, L>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\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 VisSankey: (<N extends SankeyInputNode, L extends SankeyInputLink>(props: VisSankeyProps<N, L>) => JSX.Element | null) = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,WAAW,CAAwD,KAA2B,EAAE,IAAsC,EAAA;AAC7I,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;AAC3D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAe,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;IAG7D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA6C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC7E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,SAAS,GAAgH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa;;;;"}

package/components/scatter/index.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { Scatter, ScatterConfigInterface } from '@unovis/ts';
+export declare type VisScatterRef<Datum> = {
+    component: Scatter<Datum>;
+};
+export declare type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisScatterRef<Datum>>;
+};
+export declare const VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null);

package/components/scatter/index.js

@@ -0,0 +1,22 @@
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Scatter } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisScatterFC(props, fRef) {
+    const ref = useRef(null);
+    const [component] = useState(new Scatter(props));
+    useEffect(() => {
+        ref.current.__component__ = component;
+    }, []);
+    useEffect(() => {
+        if (props.data)
+            component === null || component === void 0 ? void 0 : component.setData(props.data);
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ component }));
+    return React.createElement("vis-component", { ref: ref });
+}
+const VisScatter = React.memo(React.forwardRef(VisScatterFC), arePropsEqual);
+
+export { VisScatter };
+//# sourceMappingURL=index.js.map

package/components/scatter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Scatter, ScatterConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisScatterRef<Datum> = {\n  component: Scatter<Datum>;\n}\n\nexport type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisScatterRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisScatterFC<Datum> (props: VisScatterProps<Datum>, fRef: ForwardedRef<VisScatterRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Scatter<Datum>>>(null)\n  const [component] = useState<Scatter<Datum>>(new Scatter(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Scatter<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\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 VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisScatterFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAS,KAA6B,EAAE,IAAwC,EAAA;AACnG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAsC,IAAI,CAAC,CAAA;AAC7D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAiB,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;IAGhE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA+C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC/E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,UAAU,GAAmE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}

package/components/stacked-bar/index.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { StackedBar, StackedBarConfigInterface } from '@unovis/ts';
+export declare type VisStackedBarRef<Datum> = {
+    component: StackedBar<Datum>;
+};
+export declare type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisStackedBarRef<Datum>>;
+};
+export declare const VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null);

package/components/stacked-bar/index.js

@@ -0,0 +1,22 @@
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { StackedBar } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisStackedBarFC(props, fRef) {
+    const ref = useRef(null);
+    const [component] = useState(new StackedBar(props));
+    useEffect(() => {
+        ref.current.__component__ = component;
+    }, []);
+    useEffect(() => {
+        if (props.data)
+            component === null || component === void 0 ? void 0 : component.setData(props.data);
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ component }));
+    return React.createElement("vis-component", { ref: ref });
+}
+const VisStackedBar = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual);
+
+export { VisStackedBar };
+//# sourceMappingURL=index.js.map

package/components/stacked-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/stacked-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { StackedBar, StackedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisStackedBarRef<Datum> = {\n  component: StackedBar<Datum>;\n}\n\nexport type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisStackedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisStackedBarFC<Datum> (props: VisStackedBarProps<Datum>, fRef: ForwardedRef<VisStackedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<StackedBar<Datum>>>(null)\n  const [component] = useState<StackedBar<Datum>>(new StackedBar(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<StackedBar<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\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 VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;AAChE,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAoB,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IAGtE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAkD,CAAC,aAAa,GAAG,SAAS,CAAA;KAClF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

package/components/timeline/index.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { Timeline, TimelineConfigInterface } from '@unovis/ts';
+export declare type VisTimelineRef<Datum> = {
+    component: Timeline<Datum>;
+};
+export declare type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisTimelineRef<Datum>>;
+};
+export declare const VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null);

package/components/timeline/index.js

@@ -0,0 +1,22 @@
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Timeline } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisTimelineFC(props, fRef) {
+    const ref = useRef(null);
+    const [component] = useState(new Timeline(props));
+    useEffect(() => {
+        ref.current.__component__ = component;
+    }, []);
+    useEffect(() => {
+        if (props.data)
+            component === null || component === void 0 ? void 0 : component.setData(props.data);
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ component }));
+    return React.createElement("vis-component", { ref: ref });
+}
+const VisTimeline = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual);
+
+export { VisTimeline };
+//# sourceMappingURL=index.js.map

package/components/timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/timeline/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Timeline, TimelineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTimelineRef<Datum> = {\n  component: Timeline<Datum>;\n}\n\nexport type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisTimelineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTimelineFC<Datum> (props: VisTimelineProps<Datum>, fRef: ForwardedRef<VisTimelineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Timeline<Datum>>>(null)\n  const [component] = useState<Timeline<Datum>>(new Timeline(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Timeline<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\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 VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;AAC9D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAkB,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;IAGlE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAgD,CAAC,aAAa,GAAG,SAAS,CAAA;KAChF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}

package/components/tooltip/index.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { Tooltip, TooltipConfigInterface } from '@unovis/ts';
+export declare type VisTooltipRef = {
+    component: Tooltip;
+};
+export declare type VisTooltipProps = TooltipConfigInterface & {
+    data?: null;
+    ref?: Ref<VisTooltipRef>;
+};
+export declare const VisTooltip: ((props: VisTooltipProps) => JSX.Element | null);

package/components/tooltip/index.js

@@ -0,0 +1,20 @@
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Tooltip } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisTooltipFC(props, fRef) {
+    const ref = useRef(null);
+    const [component] = useState(new Tooltip(props));
+    useEffect(() => {
+        ref.current.__component__ = component;
+    }, []);
+    useEffect(() => {
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ component }));
+    return React.createElement("vis-tooltip", { ref: ref });
+}
+const VisTooltip = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual);
+
+export { VisTooltip };
+//# sourceMappingURL=index.js.map

package/components/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Tooltip, TooltipConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTooltipRef = {\n  component: Tooltip;\n}\n\nexport type VisTooltipProps = TooltipConfigInterface & {\n  data?: null;\n  ref?: Ref<VisTooltipRef>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTooltipFC (props: VisTooltipProps, fRef: ForwardedRef<VisTooltipRef>): JSX.Element {\n  const ref = useRef<VisComponentElement<Tooltip>>(null)\n  const [component] = useState<Tooltip>(new Tooltip(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Tooltip>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-tooltip ref={ref} />\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 VisTooltip: ((props: VisTooltipProps) => JSX.Element | null) = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAE,KAAsB,EAAE,IAAiC,EAAA;AAC9E,IAAA,MAAM,GAAG,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAA;AACtD,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAU,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;IAGzD,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAwC,CAAC,aAAa,GAAG,SAAS,CAAA;KACxE,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAa,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AAClC,CAAC;AAIY,MAAA,UAAU,GAAqD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}

package/components/topojson-map/index.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+import { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts';
+export declare type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {
+    component: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;
+};
+export declare type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {
+    data?: {
+        areas?: AreaDatum[];
+        points?: PointDatum[];
+        links?: LinkDatum[];
+    };
+    ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;
+};
+export declare const VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null);

package/components/topojson-map/index.js

@@ -0,0 +1,22 @@
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { TopoJSONMap } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisTopoJSONMapFC(props, fRef) {
+    const ref = useRef(null);
+    const [component] = useState(new TopoJSONMap(props));
+    useEffect(() => {
+        ref.current.__component__ = component;
+    }, []);
+    useEffect(() => {
+        if (props.data)
+            component === null || component === void 0 ? void 0 : component.setData(props.data);
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ component }));
+    return React.createElement("vis-component", { ref: ref });
+}
+const VisTopoJSONMap = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual);
+
+export { VisTopoJSONMap };
+//# sourceMappingURL=index.js.map

package/components/topojson-map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/topojson-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {\n  component: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;\n}\n\nexport type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {\n  data?: {areas?: AreaDatum[]; points?: PointDatum[]; links?: LinkDatum[]};\n  ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTopoJSONMapFC<AreaDatum, PointDatum, LinkDatum> (props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>, fRef: ForwardedRef<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>>(null)\n  const [component] = useState<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>(new TopoJSONMap(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\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 VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,gBAAgB,CAAoC,KAA4D,EAAE,IAAuE,EAAA;AAChM,IAAA,MAAM,GAAG,GAAG,MAAM,CAAqE,IAAI,CAAC,CAAA;AAC5F,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAgD,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;IAGnG,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA8E,CAAC,aAAa,GAAG,SAAS,CAAA;KAC9G,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,cAAc,GAA6H,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,aAAa;;;;"}

package/components/xy-labels/index.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { XYLabels, XYLabelsConfigInterface } from '@unovis/ts';
+export declare type VisXYLabelsRef<Datum> = {
+    component: XYLabels<Datum>;
+};
+export declare type VisXYLabelsProps<Datum> = XYLabelsConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisXYLabelsRef<Datum>>;
+};
+export declare const VisXYLabels: (<Datum>(props: VisXYLabelsProps<Datum>) => JSX.Element | null);

package/components/xy-labels/index.js

@@ -0,0 +1,22 @@
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { XYLabels } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisXYLabelsFC(props, fRef) {
+    const ref = useRef(null);
+    const [component] = useState(new XYLabels(props));
+    useEffect(() => {
+        ref.current.__component__ = component;
+    }, []);
+    useEffect(() => {
+        if (props.data)
+            component === null || component === void 0 ? void 0 : component.setData(props.data);
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ component }));
+    return React.createElement("vis-component", { ref: ref });
+}
+const VisXYLabels = React.memo(React.forwardRef(VisXYLabelsFC), arePropsEqual);
+
+export { VisXYLabels };
+//# sourceMappingURL=index.js.map

package/components/xy-labels/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/xy-labels/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { XYLabels, XYLabelsConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYLabelsRef<Datum> = {\n  component: XYLabels<Datum>;\n}\n\nexport type VisXYLabelsProps<Datum> = XYLabelsConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisXYLabelsRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisXYLabelsFC<Datum> (props: VisXYLabelsProps<Datum>, fRef: ForwardedRef<VisXYLabelsRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<XYLabels<Datum>>>(null)\n  const [component] = useState<XYLabels<Datum>>(new XYLabels(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<XYLabels<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\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 VisXYLabels: (<Datum>(props: VisXYLabelsProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisXYLabelsFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;AAC9D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAkB,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;IAGlE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAgD,CAAC,aAAa,GAAG,SAAS,CAAA;KAChF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}

package/components.d.ts

@@ -0,0 +1,19 @@
+export * from './components/line';
+export * from './components/area';
+export * from './components/axis';
+export * from './components/brush/';
+export * from './components/free-brush';
+export * from './components/crosshair/';
+export * from './components/donut/';
+export * from './components/graph';
+export * from './components/grouped-bar/';
+export * from './components/scatter/';
+export * from './components/sankey';
+export * from './components/stacked-bar/';
+export * from './components/tooltip/';
+export * from './components/timeline/';
+export * from './components/topojson-map/';
+export * from './components/xy-labels';
+export * from './html-components/bullet-legend';
+export * from './html-components/leaflet-map';
+export * from './html-components/leaflet-flow-map';

package/composites/time-series/index.d.ts

@@ -0,0 +1,54 @@
+import { Spacing } from '@unovis/ts';
+export declare type VisTimeSeriesDatum = {
+    timestamp: number;
+    value: number;
+    id?: string;
+    color?: string;
+};
+export declare type VisTimeSeriesProps<Datum> = {
+    data: Datum[];
+    margin: Spacing;
+    autoMargin: boolean;
+    x: (d: Datum, i: number) => number;
+    y: (d: Datum, i: number) => number;
+    id: (d: Datum, i: number) => string;
+    color: (d: Datum, i: number) => string;
+    cursor: string | ((d: Datum, i: number) => string);
+    formatXTicks?: (timestamp: number) => string;
+    formatYTicks?: (timestamp: number) => string;
+    selectionMinLength: number;
+    onBrushStart?: (selection: [number, number], e?: {
+        sourceEvent: MouseEvent;
+    }, userDriven?: boolean) => void;
+    onBrushMove?: (selection: [number, number], e?: {
+        sourceEvent: MouseEvent;
+    }, userDriven?: boolean) => void;
+    onBrushEnd?: (selection: [number, number], e?: {
+        sourceEvent: MouseEvent;
+    }, userDriven?: boolean) => void;
+    formatNavXTicks?: (timestamp: number) => string;
+    xLabel?: string;
+    yLabel?: string;
+    crosshairTemplate?: (d: Datum) => string | HTMLElement;
+    className?: string;
+    height?: string;
+};
+export declare function VisTimeSeries<Datum>(props: VisTimeSeriesProps<Datum>): JSX.Element;
+export declare namespace VisTimeSeries {
+    var defaultProps: {
+        margin: {
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+        };
+        autoMargin: boolean;
+        padding: {};
+        x: (d: VisTimeSeriesDatum) => number;
+        y: (d: VisTimeSeriesDatum) => number;
+        id: (d: VisTimeSeriesDatum) => string | undefined;
+        color: (d: VisTimeSeriesDatum) => string | undefined;
+        formatYTicks: (d: number) => string;
+        crosshairTemplate: (d: VisTimeSeriesDatum) => string;
+    };
+}

package/composites/time-series/index.js

@@ -0,0 +1,63 @@
+import React, { useState, useMemo } from 'react';
+import { cx } from '@emotion/css';
+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 { timeSeriesContainer, timeSeriesModule, navigationModule } from './style.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: cx(timeSeriesContainer, props.className), style: { height: props.height } },
+        React.createElement(VisXYContainer, { className: 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: 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) => d.color,
+    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>`; },
+};
+
+export { VisTimeSeries };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/composites/time-series/index.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react'\nimport { cx } from '@emotion/css'\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 * as s from './style'\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;\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={cx(s.timeSeriesContainer, 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) => d.color,\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":["s.timeSeriesContainer","s.timeSeriesModule","s.navigationModule"],"mappings":"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"}

package/composites/time-series/style.d.ts

@@ -0,0 +1,3 @@
+export declare const timeSeriesContainer: string;
+export declare const timeSeriesModule: string;
+export declare const navigationModule: string;

package/composites/time-series/style.js

@@ -0,0 +1,21 @@
+import { css } from '@emotion/css';
+
+const timeSeriesContainer = css `
+  position: relative;
+  height: 400px;
+  width: 100%;
+  font-family: sans-serif;
+`;
+const timeSeriesModule = css `
+  width: 100%;
+  height: 70%;
+  position: relative;
+`;
+const navigationModule = css `
+  width: 100%;
+  height: 30%;
+  position: relative;
+`;
+
+export { navigationModule, timeSeriesContainer, timeSeriesModule };
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/composites/time-series/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\nexport const timeSeriesContainer = css`\n  position: relative;\n  height: 400px;\n  width: 100%;\n  font-family: sans-serif;\n`\n\nexport const timeSeriesModule = css`\n  width: 100%;\n  height: 70%;\n  position: relative;\n`\n\nexport const navigationModule = css`\n  width: 100%;\n  height: 30%;\n  position: relative;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;EAKrC;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;EAIlC;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

package/composites.d.ts

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

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { SingleContainerConfigInterface } from '@unovis/ts';
+export declare type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {
+    data?: Data;
+};
+export declare const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null);

package/containers/single-container/index.js

@@ -0,0 +1,31 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { SingleContainer } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisSingleContainerFC(props) {
+    const container = useRef(null);
+    const [chart, setChart] = useState();
+    const [data, setData] = useState(undefined);
+    const getConfig = () => {
+        var _a, _b, _c, _d;
+        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__ }));
+    };
+    useEffect(() => {
+        setData(props.data);
+        setChart(new SingleContainer(container.current, getConfig(), props.data));
+        return () => chart === null || chart === void 0 ? void 0 : chart.destroy();
+    }, []);
+    useEffect(() => {
+        const preventRender = true;
+        if (props.data && (props.data !== data)) {
+            chart === null || chart === void 0 ? void 0 : chart.setData(props.data, preventRender);
+            setData(props.data);
+        }
+        chart === null || chart === void 0 ? void 0 : chart.updateContainer(getConfig());
+    });
+    return (React.createElement("div", { ref: container, style: { width: '100%', height: '100%', position: 'relative' } }, props.children));
+}
+const VisSingleContainer = React.memo(VisSingleContainerFC, arePropsEqual);
+
+export { VisSingleContainer };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 } 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}\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 [chart, setChart] = useState<SingleContainer<Data>>()\n  const [data, setData] = useState<Data | undefined>(undefined)\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  })\n\n  // On Mount\n  useEffect(() => {\n    setData(props.data)\n    setChart(\n      new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n    )\n    return () => chart?.destroy()\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 !== data)) {\n      chart?.setData(props.data, preventRender)\n      setData(props.data)\n    }\n\n    // Update Container and render\n    chart?.updateContainer(getConfig())\n  })\n\n  return (\n    <div ref={container} style={{ width: '100%', height: '100%', position: 'relative' }}>\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":";;;;AAeA,SAAS,oBAAoB,CAAQ,KAAuD,EAAA;AAC1F,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,SAAS,CAAC,CAAA;IAE7D,MAAM,SAAS,GAAG,MAA2C;;AAAC,QAAA,QACzD,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAER,EAAA,EAAA,SAAS,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAA2C,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EAErH,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAA+B,aAAa,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,KACrG;KAAA,CAAA;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACnB,QAAA,QAAQ,CACN,IAAI,eAAe,CAAO,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CACxF,CAAA;QACD,OAAO,MAAM,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,OAAO,EAAE,CAAA;KAC9B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,aAAa,GAAG,IAAI,CAAA;QAG1B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AACzC,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;QAGD,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAA;AACrC,KAAC,CAAC,CAAA;IAEF,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAChF,EAAA,KAAK,CAAC,QAAQ,CACX,EACP;AACH,CAAC;AAIM,MAAM,kBAAkB,GAC7B,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,aAAa;;;;"}

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { XYContainerConfigInterface } from '@unovis/ts';
+export declare type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {
+    data?: Datum[];
+    className?: string;
+};
+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

@@ -0,0 +1,39 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { XYContainer, AxisType } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+function VisXYContainerFC(props) {
+    const container = useRef(null);
+    const [chart, setChart] = useState();
+    const [data, setData] = useState(undefined);
+    const getConfig = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        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__, xAxis: Array
+                .from((_h = (_g = container.current) === null || _g === void 0 ? void 0 : _g.querySelectorAll('vis-axis')) !== null && _h !== void 0 ? _h : [])
+                .map(c => c.__component__)
+                .find(c => c.config.type === AxisType.X), yAxis: 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.Y), margin: { top: 5, left: 5, right: 5, bottom: 5 } }, props));
+    };
+    useEffect(() => {
+        setData(props.data);
+        setChart(new XYContainer(container.current, getConfig(), props.data));
+        return () => chart === null || chart === void 0 ? void 0 : chart.destroy();
+    }, []);
+    useEffect(() => {
+        const preventRender = true;
+        if (props.data && (props.data !== data)) {
+            chart === null || chart === void 0 ? void 0 : chart.setData(props.data, preventRender);
+            setData(props.data);
+        }
+        chart === null || chart === void 0 ? void 0 : chart.updateContainer(getConfig());
+    });
+    return (React.createElement("div", { ref: container, className: props.className }, props.children));
+}
+const VisXYContainer = React.memo(VisXYContainerFC, arePropsEqual);
+
+export { VisXYContainer, VisXYContainerFC };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/containers/xy-container/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { XYContainer, XYContainerConfigInterface, XYComponentCore, Tooltip, Crosshair, Axis, AxisType } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {\n  data?: Datum[];\n  className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisXYContainerFC<Datum> (props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [chart, setChart] = useState<XYContainer<Datum>>()\n  const [data, setData] = useState<Datum[] | undefined>(undefined)\n\n  const getConfig = (): XYContainerConfigInterface<Datum> => ({\n    components: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<XYComponentCore<Datum>>>('vis-component') ?? [])\n      .map(c => c.__component__),\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n    crosshair: container.current?.querySelector<VisComponentElement<Crosshair<Datum>>>('vis-crosshair')?.__component__,\n    xAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.X),\n    yAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.Y),\n    margin: { top: 5, left: 5, right: 5, bottom: 5 },\n    ...props,\n  })\n\n  // On Mount\n  useEffect(() => {\n    setData(props.data)\n    setChart(\n      new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n    )\n\n    return () => chart?.destroy()\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 !== data)) {\n      chart?.setData(props.data, preventRender)\n      setData(props.data)\n    }\n    // Update Container and render\n    chart?.updateContainer(getConfig())\n  })\n\n  return (\n    <div ref={container} className={props.className}>\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 VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n  React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":"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"}

package/containers.d.ts

@@ -0,0 +1,2 @@
+export * from './containers/xy-container';
+export * from './containers/single-container';