@unovis/react 1.0.0-beta.8 → 1.0.0
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/README.md
CHANGED
|
@@ -13,6 +13,7 @@ npm install -P @unovis/ts @unovis/react
|
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## Quick Start
|
|
16
|
+
#### TypeScript
|
|
16
17
|
```typescript jsx
|
|
17
18
|
import React, { useCallback } from 'react'
|
|
18
19
|
import { VisXYContainer, VisLine, VisAxis } from '@unovis/react'
|
|
@@ -38,6 +39,31 @@ export function BasicLineChart (): JSX.Element {
|
|
|
38
39
|
}
|
|
39
40
|
```
|
|
40
41
|
|
|
42
|
+
#### JavaScript
|
|
43
|
+
```jsx
|
|
44
|
+
import React, { useCallback } from 'react'
|
|
45
|
+
import { VisXYContainer, VisLine, VisAxis } from '@unovis/react'
|
|
46
|
+
|
|
47
|
+
export const data = [
|
|
48
|
+
{ x: 0, y: 0 },
|
|
49
|
+
{ x: 1, y: 2 },
|
|
50
|
+
{ x: 2, y: 1 },
|
|
51
|
+
]
|
|
52
|
+
|
|
53
|
+
export function BasicLineChart () {
|
|
54
|
+
return (
|
|
55
|
+
<VisXYContainer data={data} height={600}>
|
|
56
|
+
<VisLine
|
|
57
|
+
x={useCallback(d => d.x, [])}
|
|
58
|
+
y={useCallback(d => d.y, [])}
|
|
59
|
+
></VisLine>
|
|
60
|
+
<VisAxis type="x"></VisAxis>
|
|
61
|
+
<VisAxis type="y"></VisAxis>
|
|
62
|
+
</VisXYContainer>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
41
67
|
## Documentation
|
|
42
68
|
https://unovis.dev/docs
|
|
43
69
|
|
|
@@ -15,7 +15,11 @@ function VisSingleContainerFC(props) {
|
|
|
15
15
|
setData(props.data);
|
|
16
16
|
const c = new SingleContainer(container.current, getConfig(), props.data);
|
|
17
17
|
setChart(c);
|
|
18
|
-
return () =>
|
|
18
|
+
return () => {
|
|
19
|
+
if (animationFrameRef.current)
|
|
20
|
+
cancelAnimationFrame(animationFrameRef.current);
|
|
21
|
+
c.destroy();
|
|
22
|
+
};
|
|
19
23
|
}, []);
|
|
20
24
|
useEffect(() => {
|
|
21
25
|
const preventRender = true;
|
|
@@ -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 [chart, setChart] = useState<SingleContainer<Data>>()\n const [data, setData] = useState<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 setData(props.data)\n const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n return () => c.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 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 (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => 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;AAC7D,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAErD,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,MAAM,CAAC,GAAG,IAAI,eAAe,CAAO,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACjG,QAAQ,CAAC,CAAC,CAAC,CAAA;AACX,QAAA,OAAO,
|
|
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 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 setData(props.data)\n const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n return () => {\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\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 !== data)) {\n chart?.setData(props.data, preventRender)\n setData(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 (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => 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;AAC7D,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAErD,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,MAAM,CAAC,GAAG,IAAI,eAAe,CAAO,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACjG,QAAQ,CAAC,CAAC,CAAC,CAAA;AACX,QAAA,OAAO,MAAK;YACV,IAAI,iBAAiB,CAAC,OAAO;AAAE,gBAAA,oBAAoB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;YAC9E,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,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;QASD,IAAI,iBAAiB,CAAC,OAAO;AAAE,YAAA,oBAAoB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;QAC9E,iBAAiB,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AAC9F,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;;;;"}
|
|
@@ -23,7 +23,11 @@ function VisXYContainerFC(props) {
|
|
|
23
23
|
setData(props.data);
|
|
24
24
|
const c = new XYContainer(container.current, getConfig(), props.data);
|
|
25
25
|
setChart(c);
|
|
26
|
-
return () =>
|
|
26
|
+
return () => {
|
|
27
|
+
if (animationFrameRef.current)
|
|
28
|
+
cancelAnimationFrame(animationFrameRef.current);
|
|
29
|
+
c.destroy();
|
|
30
|
+
};
|
|
27
31
|
}, []);
|
|
28
32
|
useEffect(() => {
|
|
29
33
|
const preventRender = true;
|
|
@@ -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 [chart, setChart] = useState<XYContainer<Datum>>()\n const [data, setData] = useState<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 setData(props.data)\n const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n\n return () => c.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 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 (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => 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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
|
|
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 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 setData(props.data)\n const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n\n return () => {\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\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 !== data)) {\n chart?.setData(props.data, preventRender)\n setData(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 (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => 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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unovis/react",
|
|
3
3
|
"description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
|
|
4
|
-
"version": "1.0.0
|
|
4
|
+
"version": "1.0.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@emotion/css": "^11.7.1",
|
|
39
|
-
"@unovis/ts": "1.0.0
|
|
39
|
+
"@unovis/ts": "1.0.0",
|
|
40
40
|
"react": ">=16.8.0",
|
|
41
41
|
"react-dom": ">=16.8.0"
|
|
42
42
|
},
|