@unovis/react 1.1.0-beta.2 → 1.1.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/area/index.js +9 -5
- package/components/area/index.js.map +1 -1
- package/components/axis/index.js +9 -5
- package/components/axis/index.js.map +1 -1
- package/components/brush/index.js +9 -5
- package/components/brush/index.js.map +1 -1
- package/components/chord-diagram/index.js +30 -0
- package/components/chord-diagram/index.js.map +1 -0
- package/components/crosshair/index.js +9 -5
- package/components/crosshair/index.js.map +1 -1
- package/components/donut/index.js +9 -5
- package/components/donut/index.js.map +1 -1
- package/components/free-brush/index.js +9 -5
- package/components/free-brush/index.js.map +1 -1
- package/components/graph/index.js +9 -5
- package/components/graph/index.js.map +1 -1
- package/components/grouped-bar/index.js +9 -5
- package/components/grouped-bar/index.js.map +1 -1
- package/components/line/index.js +9 -5
- package/components/line/index.js.map +1 -1
- package/components/sankey/index.js +9 -5
- package/components/sankey/index.js.map +1 -1
- package/components/scatter/index.js +9 -5
- package/components/scatter/index.js.map +1 -1
- package/components/stacked-bar/index.js +9 -5
- package/components/stacked-bar/index.js.map +1 -1
- package/components/timeline/index.js +9 -5
- package/components/timeline/index.js.map +1 -1
- package/components/tooltip/index.js +9 -5
- package/components/tooltip/index.js.map +1 -1
- package/components/topojson-map/index.js +9 -5
- package/components/topojson-map/index.js.map +1 -1
- package/components/xy-labels/index.js +9 -5
- package/components/xy-labels/index.js.map +1 -1
- package/components.d.ts +3 -2
- package/composites/time-series/index.js +4 -5
- package/composites/time-series/index.js.map +1 -1
- package/composites/time-series/style.module.css.js +8 -0
- package/composites/time-series/style.module.css.js.map +1 -0
- package/containers/single-container/index.d.ts +3 -1
- package/containers/single-container/index.js +2 -1
- package/containers/single-container/index.js.map +1 -1
- package/containers/xy-container/index.d.ts +2 -1
- package/containers/xy-container/index.js +2 -1
- package/containers/xy-container/index.js.map +1 -1
- package/external/style-inject/dist/style-inject.es.js +29 -0
- package/external/style-inject/dist/style-inject.es.js.map +1 -0
- package/html-components/leaflet-flow-map/index.d.ts +2 -1
- package/html-components/leaflet-flow-map/index.js +1 -1
- package/html-components/leaflet-flow-map/index.js.map +1 -1
- package/html-components/leaflet-map/index.d.ts +2 -1
- package/html-components/leaflet-map/index.js +1 -1
- package/html-components/leaflet-map/index.js.map +1 -1
- package/index.js +2 -1
- package/index.js.map +1 -1
- package/package.json +4 -4
- package/composites/time-series/style.d.ts +0 -3
- package/composites/time-series/style.js +0 -21
- package/composites/time-series/style.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
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
|
|
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 componentRef = useRef<Scatter<Datum> | undefined>(undefined)\n\n // On Mount\n useEffect(() => {\n const element = (ref.current as VisComponentElement<Scatter<Datum>>)\n\n const c = new Scatter<Datum>(props)\n componentRef.current = c\n element.__component__ = c\n\n return () => {\n componentRef.current = undefined\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const component = componentRef.current\n if (props.data) component?.setData(props.data)\n component?.setConfig(props)\n })\n\n useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current])\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,YAAY,GAAG,MAAM,CAA6B,SAAS,CAAC,CAAA;IAGlE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA+C,CAAA;AAEpE,QAAA,MAAM,CAAC,GAAG,IAAI,OAAO,CAAQ,KAAK,CAAC,CAAA;AACnC,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QACtC,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAA;AAC9F,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;;;;"}
|
|
@@ -1,23 +1,27 @@
|
|
|
1
|
-
import React, { useRef,
|
|
1
|
+
import React, { useRef, useEffect, useImperativeHandle } from 'react';
|
|
2
2
|
import { StackedBar } from '@unovis/ts';
|
|
3
3
|
import { arePropsEqual } from '../../utils/react.js';
|
|
4
4
|
|
|
5
5
|
function VisStackedBarFC(props, fRef) {
|
|
6
6
|
const ref = useRef(null);
|
|
7
|
-
const
|
|
7
|
+
const componentRef = useRef(undefined);
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
const element = ref.current;
|
|
10
10
|
const c = new StackedBar(props);
|
|
11
|
-
|
|
11
|
+
componentRef.current = c;
|
|
12
12
|
element.__component__ = c;
|
|
13
|
-
return () =>
|
|
13
|
+
return () => {
|
|
14
|
+
componentRef.current = undefined;
|
|
15
|
+
c.destroy();
|
|
16
|
+
};
|
|
14
17
|
}, []);
|
|
15
18
|
useEffect(() => {
|
|
19
|
+
const component = componentRef.current;
|
|
16
20
|
if (props.data)
|
|
17
21
|
component === null || component === void 0 ? void 0 : component.setData(props.data);
|
|
18
22
|
component === null || component === void 0 ? void 0 : component.setConfig(props);
|
|
19
23
|
});
|
|
20
|
-
useImperativeHandle(fRef, () => ({ component }), [
|
|
24
|
+
useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current]);
|
|
21
25
|
return React.createElement("vis-component", { ref: ref });
|
|
22
26
|
}
|
|
23
27
|
const VisStackedBar = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 componentRef = useRef<StackedBar<Datum> | undefined>(undefined)\n\n // On Mount\n useEffect(() => {\n const element = (ref.current as VisComponentElement<StackedBar<Datum>>)\n\n const c = new StackedBar<Datum>(props)\n componentRef.current = c\n element.__component__ = c\n\n return () => {\n componentRef.current = undefined\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const component = componentRef.current\n if (props.data) component?.setData(props.data)\n component?.setConfig(props)\n })\n\n useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current])\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,YAAY,GAAG,MAAM,CAAgC,SAAS,CAAC,CAAA;IAGrE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkD,CAAA;AAEvE,QAAA,MAAM,CAAC,GAAG,IAAI,UAAU,CAAQ,KAAK,CAAC,CAAA;AACtC,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QACtC,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAA;AAC9F,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;;;;"}
|
|
@@ -1,23 +1,27 @@
|
|
|
1
|
-
import React, { useRef,
|
|
1
|
+
import React, { useRef, useEffect, useImperativeHandle } from 'react';
|
|
2
2
|
import { Timeline } from '@unovis/ts';
|
|
3
3
|
import { arePropsEqual } from '../../utils/react.js';
|
|
4
4
|
|
|
5
5
|
function VisTimelineFC(props, fRef) {
|
|
6
6
|
const ref = useRef(null);
|
|
7
|
-
const
|
|
7
|
+
const componentRef = useRef(undefined);
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
const element = ref.current;
|
|
10
10
|
const c = new Timeline(props);
|
|
11
|
-
|
|
11
|
+
componentRef.current = c;
|
|
12
12
|
element.__component__ = c;
|
|
13
|
-
return () =>
|
|
13
|
+
return () => {
|
|
14
|
+
componentRef.current = undefined;
|
|
15
|
+
c.destroy();
|
|
16
|
+
};
|
|
14
17
|
}, []);
|
|
15
18
|
useEffect(() => {
|
|
19
|
+
const component = componentRef.current;
|
|
16
20
|
if (props.data)
|
|
17
21
|
component === null || component === void 0 ? void 0 : component.setData(props.data);
|
|
18
22
|
component === null || component === void 0 ? void 0 : component.setConfig(props);
|
|
19
23
|
});
|
|
20
|
-
useImperativeHandle(fRef, () => ({ component }), [
|
|
24
|
+
useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current]);
|
|
21
25
|
return React.createElement("vis-component", { ref: ref });
|
|
22
26
|
}
|
|
23
27
|
const VisTimeline = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 componentRef = useRef<Timeline<Datum> | undefined>(undefined)\n\n // On Mount\n useEffect(() => {\n const element = (ref.current as VisComponentElement<Timeline<Datum>>)\n\n const c = new Timeline<Datum>(props)\n componentRef.current = c\n element.__component__ = c\n\n return () => {\n componentRef.current = undefined\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const component = componentRef.current\n if (props.data) component?.setData(props.data)\n component?.setConfig(props)\n })\n\n useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current])\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,YAAY,GAAG,MAAM,CAA8B,SAAS,CAAC,CAAA;IAGnE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAgD,CAAA;AAErE,QAAA,MAAM,CAAC,GAAG,IAAI,QAAQ,CAAQ,KAAK,CAAC,CAAA;AACpC,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QACtC,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAA;AAC9F,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;;;;"}
|
|
@@ -1,21 +1,25 @@
|
|
|
1
|
-
import React, { useRef,
|
|
1
|
+
import React, { useRef, useEffect, useImperativeHandle } from 'react';
|
|
2
2
|
import { Tooltip } from '@unovis/ts';
|
|
3
3
|
import { arePropsEqual } from '../../utils/react.js';
|
|
4
4
|
|
|
5
5
|
function VisTooltipFC(props, fRef) {
|
|
6
6
|
const ref = useRef(null);
|
|
7
|
-
const
|
|
7
|
+
const componentRef = useRef(undefined);
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
const element = ref.current;
|
|
10
10
|
const c = new Tooltip(props);
|
|
11
|
-
|
|
11
|
+
componentRef.current = c;
|
|
12
12
|
element.__component__ = c;
|
|
13
|
-
return () =>
|
|
13
|
+
return () => {
|
|
14
|
+
componentRef.current = undefined;
|
|
15
|
+
c.destroy();
|
|
16
|
+
};
|
|
14
17
|
}, []);
|
|
15
18
|
useEffect(() => {
|
|
19
|
+
const component = componentRef.current;
|
|
16
20
|
component === null || component === void 0 ? void 0 : component.setConfig(props);
|
|
17
21
|
});
|
|
18
|
-
useImperativeHandle(fRef, () => ({ component }), [
|
|
22
|
+
useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current]);
|
|
19
23
|
return React.createElement("vis-tooltip", { ref: ref });
|
|
20
24
|
}
|
|
21
25
|
const VisTooltip = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 componentRef = useRef<Tooltip | undefined>(undefined)\n\n // On Mount\n useEffect(() => {\n const element = (ref.current as VisComponentElement<Tooltip>)\n\n const c = new Tooltip(props)\n componentRef.current = c\n element.__component__ = c\n\n return () => {\n componentRef.current = undefined\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const component = componentRef.current\n\n component?.setConfig(props)\n })\n\n useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current])\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,YAAY,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAA;IAG3D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAwC,CAAA;AAE7D,QAAA,MAAM,CAAC,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;AAC5B,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QAEtC,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAA;AAC9F,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;;;;"}
|
|
@@ -1,23 +1,27 @@
|
|
|
1
|
-
import React, { useRef,
|
|
1
|
+
import React, { useRef, useEffect, useImperativeHandle } from 'react';
|
|
2
2
|
import { TopoJSONMap } from '@unovis/ts';
|
|
3
3
|
import { arePropsEqual } from '../../utils/react.js';
|
|
4
4
|
|
|
5
5
|
function VisTopoJSONMapFC(props, fRef) {
|
|
6
6
|
const ref = useRef(null);
|
|
7
|
-
const
|
|
7
|
+
const componentRef = useRef(undefined);
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
const element = ref.current;
|
|
10
10
|
const c = new TopoJSONMap(props);
|
|
11
|
-
|
|
11
|
+
componentRef.current = c;
|
|
12
12
|
element.__component__ = c;
|
|
13
|
-
return () =>
|
|
13
|
+
return () => {
|
|
14
|
+
componentRef.current = undefined;
|
|
15
|
+
c.destroy();
|
|
16
|
+
};
|
|
14
17
|
}, []);
|
|
15
18
|
useEffect(() => {
|
|
19
|
+
const component = componentRef.current;
|
|
16
20
|
if (props.data)
|
|
17
21
|
component === null || component === void 0 ? void 0 : component.setData(props.data);
|
|
18
22
|
component === null || component === void 0 ? void 0 : component.setConfig(props);
|
|
19
23
|
});
|
|
20
|
-
useImperativeHandle(fRef, () => ({ component }), [
|
|
24
|
+
useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current]);
|
|
21
25
|
return React.createElement("vis-component", { ref: ref });
|
|
22
26
|
}
|
|
23
27
|
const VisTopoJSONMap = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 componentRef = useRef<TopoJSONMap<AreaDatum, PointDatum, LinkDatum> | undefined>(undefined)\n\n // On Mount\n useEffect(() => {\n const element = (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>)\n\n const c = new TopoJSONMap<AreaDatum, PointDatum, LinkDatum>(props)\n componentRef.current = c\n element.__component__ = c\n\n return () => {\n componentRef.current = undefined\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const component = componentRef.current\n if (props.data) component?.setData(props.data)\n component?.setConfig(props)\n })\n\n useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current])\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,YAAY,GAAG,MAAM,CAA4D,SAAS,CAAC,CAAA;IAGjG,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA8E,CAAA;AAEnG,QAAA,MAAM,CAAC,GAAG,IAAI,WAAW,CAAmC,KAAK,CAAC,CAAA;AAClE,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QACtC,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAA;AAC9F,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;;;;"}
|
|
@@ -1,23 +1,27 @@
|
|
|
1
|
-
import React, { useRef,
|
|
1
|
+
import React, { useRef, useEffect, useImperativeHandle } from 'react';
|
|
2
2
|
import { XYLabels } from '@unovis/ts';
|
|
3
3
|
import { arePropsEqual } from '../../utils/react.js';
|
|
4
4
|
|
|
5
5
|
function VisXYLabelsFC(props, fRef) {
|
|
6
6
|
const ref = useRef(null);
|
|
7
|
-
const
|
|
7
|
+
const componentRef = useRef(undefined);
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
const element = ref.current;
|
|
10
10
|
const c = new XYLabels(props);
|
|
11
|
-
|
|
11
|
+
componentRef.current = c;
|
|
12
12
|
element.__component__ = c;
|
|
13
|
-
return () =>
|
|
13
|
+
return () => {
|
|
14
|
+
componentRef.current = undefined;
|
|
15
|
+
c.destroy();
|
|
16
|
+
};
|
|
14
17
|
}, []);
|
|
15
18
|
useEffect(() => {
|
|
19
|
+
const component = componentRef.current;
|
|
16
20
|
if (props.data)
|
|
17
21
|
component === null || component === void 0 ? void 0 : component.setData(props.data);
|
|
18
22
|
component === null || component === void 0 ? void 0 : component.setConfig(props);
|
|
19
23
|
});
|
|
20
|
-
useImperativeHandle(fRef, () => ({ component }), [
|
|
24
|
+
useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current]);
|
|
21
25
|
return React.createElement("vis-component", { ref: ref });
|
|
22
26
|
}
|
|
23
27
|
const VisXYLabels = React.memo(React.forwardRef(VisXYLabelsFC), arePropsEqual);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 componentRef = useRef<XYLabels<Datum> | undefined>(undefined)\n\n // On Mount\n useEffect(() => {\n const element = (ref.current as VisComponentElement<XYLabels<Datum>>)\n\n const c = new XYLabels<Datum>(props)\n componentRef.current = c\n element.__component__ = c\n\n return () => {\n componentRef.current = undefined\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const component = componentRef.current\n if (props.data) component?.setData(props.data)\n component?.setConfig(props)\n })\n\n useImperativeHandle(fRef, () => ({ component: componentRef.current }), [componentRef.current])\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,YAAY,GAAG,MAAM,CAA8B,SAAS,CAAC,CAAA;IAGnE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAgD,CAAA;AAErE,QAAA,MAAM,CAAC,GAAG,IAAI,QAAQ,CAAQ,KAAK,CAAC,CAAA;AACpC,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QACtC,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAA;AAC9F,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
CHANGED
|
@@ -2,9 +2,10 @@ export * from './components/line';
|
|
|
2
2
|
export * from './components/area';
|
|
3
3
|
export * from './components/axis';
|
|
4
4
|
export * from './components/brush/';
|
|
5
|
+
export * from './components/chord-diagram';
|
|
6
|
+
export * from './components/crosshair';
|
|
7
|
+
export * from './components/donut';
|
|
5
8
|
export * from './components/free-brush';
|
|
6
|
-
export * from './components/crosshair/';
|
|
7
|
-
export * from './components/donut/';
|
|
8
9
|
export * from './components/graph';
|
|
9
10
|
export * from './components/grouped-bar/';
|
|
10
11
|
export * from './components/scatter/';
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useState, useMemo } from 'react';
|
|
2
|
-
import { cx } from '@emotion/css';
|
|
3
2
|
import { Scale, TextAlign } from '@unovis/ts';
|
|
4
3
|
import { VisXYContainer } from '../../containers/xy-container/index.js';
|
|
5
4
|
import { VisArea } from '../../components/area/index.js';
|
|
@@ -7,7 +6,7 @@ import { VisAxis } from '../../components/axis/index.js';
|
|
|
7
6
|
import { VisCrosshair } from '../../components/crosshair/index.js';
|
|
8
7
|
import { VisTooltip } from '../../components/tooltip/index.js';
|
|
9
8
|
import { VisBrush } from '../../components/brush/index.js';
|
|
10
|
-
import
|
|
9
|
+
import s from './style.module.css.js';
|
|
11
10
|
|
|
12
11
|
function VisTimeSeries(props) {
|
|
13
12
|
var _a;
|
|
@@ -34,14 +33,14 @@ function VisTimeSeries(props) {
|
|
|
34
33
|
setAnimationDuration(undefined);
|
|
35
34
|
(_a = props.onBrushEnd) === null || _a === void 0 ? void 0 : _a.call(props, selection, e, userDriven);
|
|
36
35
|
}, []);
|
|
37
|
-
return (React.createElement("div", { className:
|
|
38
|
-
React.createElement(VisXYContainer, { className: timeSeriesModule, data: props.data, xScale: xScale, xDomain: selectedRange, duration: animationDuration, scaleByDomain: true },
|
|
36
|
+
return (React.createElement("div", { className: `${s.timeSeriesContainer}${props.className ? `.${props.className}` : ''}`, style: { height: props.height } },
|
|
37
|
+
React.createElement(VisXYContainer, { className: s.timeSeriesModule, data: props.data, xScale: xScale, xDomain: selectedRange, duration: animationDuration, scaleByDomain: true },
|
|
39
38
|
React.createElement(VisArea, { x: props.x, y: props.y, color: props.color }),
|
|
40
39
|
React.createElement(VisAxis, { type: 'x', numTicks: 5, tickFormat: props.formatXTicks, tickTextAlign: TextAlign.Center }),
|
|
41
40
|
React.createElement(VisAxis, { type: 'y', tickFormat: props.formatYTicks, label: props.yLabel }),
|
|
42
41
|
React.createElement(VisTooltip, null),
|
|
43
42
|
React.createElement(VisCrosshair, { template: props.crosshairTemplate })),
|
|
44
|
-
React.createElement(VisXYContainer, { className: navigationModule, duration: 0, xScale: xScaleNav, data: props.data },
|
|
43
|
+
React.createElement(VisXYContainer, { className: s.navigationModule, duration: 0, xScale: xScaleNav, data: props.data },
|
|
45
44
|
React.createElement(VisArea, { x: props.x, y: props.y }),
|
|
46
45
|
React.createElement(VisBrush, { draggable: true, onBrushStart: onBrushStart, onBrushMove: onBrushMove, onBrushEnd: onBrushEnd }),
|
|
47
46
|
React.createElement(VisAxis, { type: 'x', numTicks: 5, tickFormat: (_a = props.formatXTicks) !== null && _a !== void 0 ? _a : props.formatNavXTicks, tickTextAlign: TextAlign.Right, label: props.xLabel }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/composites/time-series/index.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react'\nimport {
|
|
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;\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) => 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":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from './../../external/style-inject/dist/style-inject.es.js';
|
|
2
|
+
|
|
3
|
+
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";
|
|
4
|
+
var s = {"timeSeriesContainer":"style-module_timeSeriesContainer__1kTlU","timeSeriesModule":"style-module_timeSeriesModule__1s3Bs","navigationModule":"style-module_navigationModule__1O8bx"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { s as default };
|
|
8
|
+
//# sourceMappingURL=style.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,uDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { PropsWithChildren } from 'react';
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
|
2
2
|
import { SingleContainerConfigInterface } from '@unovis/ts';
|
|
3
3
|
export declare type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {
|
|
4
4
|
data?: Data;
|
|
5
|
+
className?: string;
|
|
6
|
+
style?: React.CSSProperties;
|
|
5
7
|
};
|
|
6
8
|
export declare const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null);
|
|
@@ -15,6 +15,7 @@ function VisSingleContainerFC(props) {
|
|
|
15
15
|
useEffect(() => {
|
|
16
16
|
const c = new SingleContainer(container.current, getConfig(), props.data);
|
|
17
17
|
chartRef.current = c;
|
|
18
|
+
prevPropsRef.current = props;
|
|
18
19
|
dataRef.current = props.data;
|
|
19
20
|
return () => {
|
|
20
21
|
if (animationFrameRef.current) {
|
|
@@ -42,7 +43,7 @@ function VisSingleContainerFC(props) {
|
|
|
42
43
|
});
|
|
43
44
|
}
|
|
44
45
|
});
|
|
45
|
-
return (React.createElement("div", { ref: container,
|
|
46
|
+
return (React.createElement("div", { ref: container, className: props.className, style: props.style }, props.children));
|
|
46
47
|
}
|
|
47
48
|
const VisSingleContainer = React.memo(VisSingleContainerFC, arePropsEqual);
|
|
48
49
|
|
|
@@ -1 +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 } 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 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 })\n\n // On Mount\n useEffect(() => {\n const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n chartRef.current = c\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} style={
|
|
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 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 })\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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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { PropsWithChildren } from 'react';
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
|
2
2
|
import { XYContainerConfigInterface } from '@unovis/ts';
|
|
3
3
|
export declare type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {
|
|
4
4
|
data?: Datum[];
|
|
5
5
|
className?: string;
|
|
6
|
+
style?: React.CSSProperties;
|
|
6
7
|
};
|
|
7
8
|
export declare function VisXYContainerFC<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element;
|
|
8
9
|
export declare const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null);
|
|
@@ -23,6 +23,7 @@ function VisXYContainerFC(props) {
|
|
|
23
23
|
useEffect(() => {
|
|
24
24
|
const c = new XYContainer(container.current, getConfig(), props.data);
|
|
25
25
|
chartRef.current = c;
|
|
26
|
+
prevPropsRef.current = props;
|
|
26
27
|
dataRef.current = props.data;
|
|
27
28
|
return () => {
|
|
28
29
|
if (animationFrameRef.current) {
|
|
@@ -50,7 +51,7 @@ function VisXYContainerFC(props) {
|
|
|
50
51
|
});
|
|
51
52
|
}
|
|
52
53
|
});
|
|
53
|
-
return (React.createElement("div", { ref: container, className: props.className }, props.children));
|
|
54
|
+
return (React.createElement("div", { ref: container, className: props.className, style: props.style }, props.children));
|
|
54
55
|
}
|
|
55
56
|
const VisXYContainer = React.memo(VisXYContainerFC, arePropsEqual);
|
|
56
57
|
|
|
@@ -1 +1 @@
|
|
|
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 prevPropsRef = useRef<PropsWithChildren<VisXYContainerProps<Datum>>>({})\n const chartRef = useRef<XYContainer<Datum> | undefined>(undefined)\n const dataRef = useRef<Datum[] | undefined>(undefined)\n const animationFrameRef = useRef<number | null>(null)\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 const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n chartRef.current = c\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 (VisLine, VisArea, ...) 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}>\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":";;;;
|
|
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 style?: React.CSSProperties;\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 prevPropsRef = useRef<PropsWithChildren<VisXYContainerProps<Datum>>>({})\n const chartRef = useRef<XYContainer<Datum> | undefined>(undefined)\n const dataRef = useRef<Datum[] | undefined>(undefined)\n const animationFrameRef = useRef<number | null>(null)\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 const c = new XYContainer<Datum>(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 (VisLine, VisArea, ...) 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 VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
function styleInject(css, ref) {
|
|
2
|
+
if ( ref === void 0 ) ref = {};
|
|
3
|
+
var insertAt = ref.insertAt;
|
|
4
|
+
|
|
5
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
6
|
+
|
|
7
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8
|
+
var style = document.createElement('style');
|
|
9
|
+
style.type = 'text/css';
|
|
10
|
+
|
|
11
|
+
if (insertAt === 'top') {
|
|
12
|
+
if (head.firstChild) {
|
|
13
|
+
head.insertBefore(style, head.firstChild);
|
|
14
|
+
} else {
|
|
15
|
+
head.appendChild(style);
|
|
16
|
+
}
|
|
17
|
+
} else {
|
|
18
|
+
head.appendChild(style);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (style.styleSheet) {
|
|
22
|
+
style.styleSheet.cssText = css;
|
|
23
|
+
} else {
|
|
24
|
+
style.appendChild(document.createTextNode(css));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { styleInject as default };
|
|
29
|
+
//# sourceMappingURL=style-inject.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-inject.es.js","sources":["../../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ForwardedRef, Ref } from 'react';
|
|
1
|
+
import React, { ForwardedRef, Ref } from 'react';
|
|
2
2
|
import { LeafletFlowMap, LeafletFlowMapConfigInterface } from '@unovis/ts';
|
|
3
3
|
export declare type VisLeafletFlowMapProps<PointDatum extends Record<string, unknown>, FlowDatum extends Record<string, unknown>> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {
|
|
4
4
|
data?: {
|
|
@@ -7,6 +7,7 @@ export declare type VisLeafletFlowMapProps<PointDatum extends Record<string, unk
|
|
|
7
7
|
};
|
|
8
8
|
ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;
|
|
9
9
|
className?: string;
|
|
10
|
+
style?: React.CSSProperties;
|
|
10
11
|
};
|
|
11
12
|
export declare type VisLeafletFlowMapRef<PointDatum extends Record<string, unknown>, FlowDatum extends Record<string, unknown>> = {
|
|
12
13
|
component: LeafletFlowMap<PointDatum, FlowDatum> | undefined;
|
|
@@ -16,7 +16,7 @@ function VisLeafletFlowMapFC(props, ref) {
|
|
|
16
16
|
component === null || component === void 0 ? void 0 : component.setConfig(props);
|
|
17
17
|
});
|
|
18
18
|
useImperativeHandle(ref, () => ({ component }));
|
|
19
|
-
return React.createElement("div", { ref: container, className: props.className });
|
|
19
|
+
return React.createElement("div", { ref: container, className: props.className, style: props.style });
|
|
20
20
|
}
|
|
21
21
|
const VisLeafletFlowMap = React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual);
|
|
22
22
|
|