@elliemae/ds-dataviz 3.50.1-next.8 → 3.51.0-beta.1
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/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js +5 -5
- package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/index.js +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/index.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useChart.js +3 -1
- package/dist/cjs/graphs/Chart/config/useChart.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useInternalMargins.js +2 -0
- package/dist/cjs/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js +2 -2
- package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useScales.js.map +2 -2
- package/dist/cjs/graphs/Chart/helpers/useVirtualizedSeries.js +2 -1
- package/dist/cjs/graphs/Chart/helpers/useVirtualizedSeries.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js +17 -16
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Legend/RightLegend.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Legend/RightLegend.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/ScrapperLine.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js +4 -3
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js.map +2 -2
- package/dist/cjs/graphs/Chart/scales/index.js +14 -0
- package/dist/cjs/graphs/Chart/scales/index.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/StackedBar.js.map +2 -2
- package/dist/cjs/graphs/Chart/styles.js +5 -4
- package/dist/cjs/graphs/Chart/styles.js.map +2 -2
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js +7 -7
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +2 -2
- package/dist/esm/graphs/Chart/SingleStackedBar/index.js +2 -2
- package/dist/esm/graphs/Chart/SingleStackedBar/index.js.map +1 -1
- package/dist/esm/graphs/Chart/config/useChart.js +3 -1
- package/dist/esm/graphs/Chart/config/useChart.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useInternalMargins.js +2 -0
- package/dist/esm/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js +2 -2
- package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useScales.js.map +2 -2
- package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js +2 -1
- package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/ChartContainer.js +18 -17
- package/dist/esm/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/RightLegend.js +1 -1
- package/dist/esm/graphs/Chart/parts/Legend/RightLegend.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js +4 -3
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js +1 -1
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerY.js +1 -1
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerY.js.map +2 -2
- package/dist/esm/graphs/Chart/scales/index.js +14 -0
- package/dist/esm/graphs/Chart/scales/index.js.map +2 -2
- package/dist/esm/graphs/Chart/series/HorizontalStackedBars.js.map +2 -2
- package/dist/esm/graphs/Chart/series/StackedBar.js.map +2 -2
- package/dist/esm/graphs/Chart/styles.js +5 -4
- package/dist/esm/graphs/Chart/styles.js.map +2 -2
- package/dist/types/graphs/Chart/SingleStackedBar/SingleStackedBar.d.ts +1 -1
- package/dist/types/graphs/Chart/SingleStackedBar/index.d.ts +3 -3
- package/dist/types/graphs/Chart/styles.d.ts +1 -1
- package/package.json +11 -11
|
@@ -34,15 +34,15 @@ __export(SingleStackedBar_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(SingleStackedBar_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
-
var import_react = __toESM(require("react"));
|
|
38
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
|
-
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
38
|
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
39
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
41
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
42
|
-
var
|
|
41
|
+
var import_react = __toESM(require("react"));
|
|
42
|
+
var import_colorPallet = require("../helpers/colorPallet.js");
|
|
43
|
+
var import_exported_related = require("./exported-related/index.js");
|
|
43
44
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
44
45
|
var import_styles = require("./styles.js");
|
|
45
|
-
var import_exported_related = require("./exported-related/index.js");
|
|
46
46
|
const Bar = import_react.default.memo((props) => {
|
|
47
47
|
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
48
48
|
const [isHover, setIsHover] = (0, import_react.useState)(false);
|
|
@@ -145,7 +145,7 @@ const DSSingleStackedBar = (props) => {
|
|
|
145
145
|
datum,
|
|
146
146
|
isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
|
|
147
147
|
borderRadius: getBorderRadius(i),
|
|
148
|
-
bg:
|
|
148
|
+
bg: import_colorPallet.COLOR_PALLET[datum.color] ?? datum.color,
|
|
149
149
|
tabIndex: i === keyBarFocused ? 0 : -1,
|
|
150
150
|
...props
|
|
151
151
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCf;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n const [isHover, setIsHover] = useState(false);\n const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n const handleRefCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (isFocused) {\n _ref?.focus();\n }\n },\n [isFocused],\n );\n\n const handleMouseEnter = useCallback(() => {\n setIsHover(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHover(false);\n }, []);\n return (\n <div>\n {(isFocused || isHover) && TooltipRenderer ? (\n <DSPopperJS referenceElement={referenceElement} showPopover>\n <StyledMouseOverDetectionBox />\n <StyledTooltipContainer>\n <TooltipRenderer datum={datum} />\n </StyledTooltipContainer>\n </DSPopperJS>\n ) : null}\n <StyledBar\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n bg={bg}\n height={height}\n borderRadius={borderRadius}\n innerRef={mergeRefs(handleRefCallback, setReferenceElement)}\n tabIndex={tabIndex}\n role=\"img\"\n // until uziel work is merged we keep this default value\n aria-label={`${datum.name} value: ${datum.data}`}\n />\n </div>\n );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n const [isChartFocused, setIsChartFocused] = useState(false);\n\n const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n const rows = useMemo(\n () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n [LegendRenderer, height],\n );\n const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n const getBorderRadius = useCallback(\n (index: number) => {\n if (index === 0) return '50px 0 0 50px';\n if (index === data.length - 1) return '0 50px 50px 0';\n return undefined;\n },\n [data.length],\n );\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'ArrowRight') {\n if (barNames[keyBarFocused + 1]) {\n setKeyBarFocused(keyBarFocused + 1);\n } else {\n setKeyBarFocused(0);\n }\n }\n if (e.code === 'ArrowLeft') {\n if (barNames[keyBarFocused - 1]) {\n setKeyBarFocused(keyBarFocused - 1);\n } else {\n setKeyBarFocused(barNames.length - 1);\n }\n }\n },\n [keyBarFocused, barNames],\n );\n\n return (\n <Wrapper\n cols={cols}\n gutter={gutter}\n role=\"region\"\n onKeyDown={handleOnKeyDown}\n tabIndex={-1}\n onFocus={() => setIsChartFocused(true)}\n onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n {...xstyledProps}\n {...globalAttributes}\n >\n {data.map((datum, i) => (\n <Grid rows={rows}>\n <Bar\n key={datum.name}\n datum={datum}\n isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n borderRadius={getBorderRadius(i)}\n bg={COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] ?? datum.color}\n tabIndex={i === keyBarFocused ? 0 : -1}\n {...props}\n />\n {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n </Grid>\n ))}\n </Wrapper>\n );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBar, DSSingleStackedBarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -26,6 +26,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
26
26
|
var SingleStackedBar_exports = {};
|
|
27
27
|
module.exports = __toCommonJS(SingleStackedBar_exports);
|
|
28
28
|
var React = __toESM(require("react"));
|
|
29
|
-
__reExport(SingleStackedBar_exports, require("
|
|
30
|
-
__reExport(SingleStackedBar_exports, require("
|
|
29
|
+
__reExport(SingleStackedBar_exports, require("./SingleStackedBar.js"), module.exports);
|
|
30
|
+
__reExport(SingleStackedBar_exports, require("./exported-related/index.js"), module.exports);
|
|
31
31
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/SingleStackedBar/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,
|
|
4
|
+
"sourcesContent": ["export * from './SingleStackedBar.js';\nexport { type DSSingleStackedBarT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,kCAAd;AAEA,qCAAc,wCAFd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,12 +35,12 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_uid = require("uid");
|
|
37
37
|
var import_lodash = require("lodash");
|
|
38
|
+
var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
|
|
38
39
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
39
40
|
var import_useScales = require("./useScales.js");
|
|
40
41
|
var import_helpers = require("../helpers/index.js");
|
|
41
42
|
var import_useInternalMargins = require("./useInternalMargins.js");
|
|
42
43
|
var import_useGetters = require("./useGetters.js");
|
|
43
|
-
var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
|
|
44
44
|
var import_useValidateProps = require("./useValidateProps.js");
|
|
45
45
|
var import_colorPallet = require("../helpers/colorPallet.js");
|
|
46
46
|
const useResizeObserver = (ref) => {
|
|
@@ -60,6 +60,8 @@ const useResizeObserver = (ref) => {
|
|
|
60
60
|
resizeObserver.unobserve(observeTarget);
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
|
+
return () => {
|
|
64
|
+
};
|
|
63
65
|
}, [ref]);
|
|
64
66
|
return dimensions;
|
|
65
67
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useChart.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { defaultProps } from '../react-desc-prop-types.js';\nimport { useScales } from './useScales.js';\nimport { stackData } from '../helpers/index.js';\nimport { useInternalMargins } from './useInternalMargins.js';\nimport { useGetters } from './useGetters.js';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useValidateProps } from './useValidateProps.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n const [dimensions, setDimensions] = useState<number>(0);\n\n useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.width));\n });\n }, 200),\n );\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n }, [ref]);\n return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n useValidateProps(props);\n\n // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n const userRatio = useMemo(\n () => props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n [props?.xAxis.advanced?.pointSpacing?.value, props?.yAxis.advanced?.pointSpacing?.value],\n );\n const originalSeries = useMemo(() => {\n if (series.length === 0) {\n return defaultProps.series;\n }\n return series;\n }, [series]);\n const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n\n const dimensionWidth = useResizeObserver(containerRef);\n\n const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n const [isGrabbed, setIsGrabbed] = useState(false);\n const [startPosition, setStartPosition] = useState(0);\n\n // zoom\n\n const [isZooming, setIsZooming] = useState(false);\n const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n const [movingPosition, setMovingPosition] = useState(0);\n\n //\n\n const [activePoint, setActivePoint] = useState<DSChartT.InternalDatum | null>(null);\n const [activeSerie, setActiveSerie] = useState('');\n const [scrapperPosY, setScrapperPosY] = useState(-1);\n const [scrapperPosX, setScrapperPosX] = useState(-1);\n const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n const [containerRatio, setContainerRatio] = useState(userRatio);\n\n const lastScrollbarPosition = useRef(0);\n\n const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n // we reset the scrollbar position when the chart resize\n useEffect(() => {\n lastScrollbarPosition.current = 0;\n setXScrollbarPosition(0);\n }, [dimensionWidth]);\n\n useEffect(() => {\n setContainerRatio(userRatio);\n }, [userRatio]);\n\n const {\n toolbarHeight,\n axisBottomHeight,\n axisRightWidth,\n bottomLabelHeight,\n internalMargin,\n leftLegendWidth,\n rightLabelWidth,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n } = useInternalMargins({\n axisLeftRef,\n axisBottomRef,\n axisRightRef,\n leftLabel,\n leftLegend,\n rightLegend,\n topLegend,\n bottomLegend,\n rightLabel,\n bottomLabel,\n toolbarRef,\n });\n\n const innerWidth = useMemo(\n () => width - internalMargin.left - internalMargin.right,\n [internalMargin.left, internalMargin.right, width],\n );\n const innerHeight = useMemo(\n () => height - internalMargin.top - internalMargin.bottom,\n [internalMargin.top, internalMargin.bottom, height],\n );\n\n const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n const defaultScale = useMemo(() => {\n if (yAxis.type === 'band') {\n return 'x';\n }\n\n if ([undefined, 'band'].includes(xAxis.type)) {\n return 'y';\n }\n\n return 'y';\n }, [xAxis.type, yAxis.type]);\n\n const [currentDataWithNullValues, currentData] = useMemo(() => {\n const baseData = originalSeries\n .filter((serie) => !hiddenSeries.includes(serie.name))\n .map((d, i) => ({\n ...d,\n // we set a default on the scale if the user do not pass it\n scale: d.scale || defaultScale,\n key: `${d.name}-${i}`,\n data: d.data.map((value, index) => ({\n key: `${d.name}-${i}-${index}`,\n value,\n position: index,\n serie: d.name,\n scale: d.scale,\n color: COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color,\n })),\n })) as DSChartT.InternalData;\n\n const currentDataWithoutNulls = baseData.map((data) => ({\n ...data,\n data: data.data.filter((datum) => datum.value !== null && datum.value !== undefined),\n }));\n\n return [baseData, currentDataWithoutNulls];\n }, [defaultScale, hiddenSeries, originalSeries]);\n\n const isHorizontal = useMemo(() => yAxis?.type === 'band', [yAxis]);\n\n const { stackedData, scalesStackedDataMap } = useMemo(\n () => stackData(groupsStacked, originalSeries, hiddenSeries, isHorizontal),\n [groupsStacked, originalSeries, hiddenSeries, isHorizontal],\n );\n\n // @TODO we need to create a logic to get this from both axis\n // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n props,\n originalSeries,\n innerHeight,\n innerWidth,\n groups,\n stackedData,\n scalesStackedDataMap,\n currentData,\n containerRatio,\n });\n\n const {\n getXValue,\n getY2ScaleValue,\n getYValue,\n getXScaleValue,\n getYScaleValue,\n getYValueFormatted,\n getXValueFormatted,\n } = useGetters({\n xAxis,\n yAxis,\n isHorizontal,\n xScale,\n yScale,\n y2Scale,\n });\n const chartId = useMemo(() => uid(6), []);\n\n return useMemo(\n () => ({\n props,\n originalSeries,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n setScrapperPosY,\n scrapperPosX,\n setScrapperPosX,\n activePoint,\n setActivePoint,\n activeSerie,\n setActiveSerie,\n xScrollbarPosition,\n setXScrollbarPosition,\n isGrabbed,\n setIsGrabbed,\n setContainerRef,\n startPosition,\n setStartPosition,\n isScrollbarVisible,\n setIsScrollbarVisible,\n lastScrollbarPosition,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n setAxisLeftRef,\n setLeftLegend,\n setRightLegend,\n rightLegend,\n setTopLegend,\n setBottomLegend,\n setAxisBottomRef,\n axisBottomHeight,\n setAxisRightRef,\n setRightLabel,\n setBottomLabel,\n getXScaleValue,\n getYScaleValue,\n getY2ScaleValue,\n getYValueFormatted,\n getXValueFormatted,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n setLeftLabel,\n leftLabel,\n chartId,\n hiddenSeries,\n setHiddenSeries,\n height,\n width,\n setContainerRatio,\n toolbarHeight,\n setToolbarRef,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n currentDataWithNullValues,\n }),\n [\n props,\n originalSeries,\n isZooming,\n zoomStartingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n getY2ScaleValue,\n scrapperPosX,\n activePoint,\n activeSerie,\n xScrollbarPosition,\n isGrabbed,\n startPosition,\n isScrollbarVisible,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n rightLegend,\n axisBottomHeight,\n getXScaleValue,\n getYScaleValue,\n getYValueFormatted,\n getXValueFormatted,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n leftLabel,\n chartId,\n hiddenSeries,\n height,\n width,\n toolbarHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n currentDataWithNullValues,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqD;AACrD,iBAAoB;AACpB,oBAAyB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { defaultProps } from '../react-desc-prop-types.js';\nimport { useScales } from './useScales.js';\nimport { stackData } from '../helpers/index.js';\nimport { useInternalMargins } from './useInternalMargins.js';\nimport { useGetters } from './useGetters.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n const [dimensions, setDimensions] = useState<number>(0);\n\n useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.width));\n });\n }, 200),\n );\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n return () => {};\n }, [ref]);\n return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n useValidateProps(props);\n\n // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n const userRatio = useMemo(\n () => props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n [props?.xAxis.advanced?.pointSpacing?.value, props?.yAxis.advanced?.pointSpacing?.value],\n );\n const originalSeries = useMemo(() => {\n if (series.length === 0) {\n return defaultProps.series;\n }\n return series;\n }, [series]);\n const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n\n const dimensionWidth = useResizeObserver(containerRef);\n\n const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n const [isGrabbed, setIsGrabbed] = useState(false);\n const [startPosition, setStartPosition] = useState(0);\n\n // zoom\n\n const [isZooming, setIsZooming] = useState(false);\n const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n const [movingPosition, setMovingPosition] = useState(0);\n\n //\n\n const [activePoint, setActivePoint] = useState<DSChartT.InternalDatum | null>(null);\n const [activeSerie, setActiveSerie] = useState('');\n const [scrapperPosY, setScrapperPosY] = useState(-1);\n const [scrapperPosX, setScrapperPosX] = useState(-1);\n const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n const [containerRatio, setContainerRatio] = useState(userRatio);\n\n const lastScrollbarPosition = useRef(0);\n\n const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n // we reset the scrollbar position when the chart resize\n useEffect(() => {\n lastScrollbarPosition.current = 0;\n setXScrollbarPosition(0);\n }, [dimensionWidth]);\n\n useEffect(() => {\n setContainerRatio(userRatio);\n }, [userRatio]);\n\n const {\n toolbarHeight,\n axisBottomHeight,\n axisRightWidth,\n bottomLabelHeight,\n internalMargin,\n leftLegendWidth,\n rightLabelWidth,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n } = useInternalMargins({\n axisLeftRef,\n axisBottomRef,\n axisRightRef,\n leftLabel,\n leftLegend,\n rightLegend,\n topLegend,\n bottomLegend,\n rightLabel,\n bottomLabel,\n toolbarRef,\n });\n\n const innerWidth = useMemo(\n () => width - internalMargin.left - internalMargin.right,\n [internalMargin.left, internalMargin.right, width],\n );\n const innerHeight = useMemo(\n () => height - internalMargin.top - internalMargin.bottom,\n [internalMargin.top, internalMargin.bottom, height],\n );\n\n const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n const defaultScale = useMemo(() => {\n if (yAxis.type === 'band') {\n return 'x';\n }\n\n if ([undefined, 'band'].includes(xAxis.type)) {\n return 'y';\n }\n\n return 'y';\n }, [xAxis.type, yAxis.type]);\n\n const [currentDataWithNullValues, currentData] = useMemo(() => {\n const baseData = originalSeries\n .filter((serie) => !hiddenSeries.includes(serie.name))\n .map((d, i) => ({\n ...d,\n // we set a default on the scale if the user do not pass it\n scale: d.scale || defaultScale,\n key: `${d.name}-${i}`,\n data: d.data.map((value, index) => ({\n key: `${d.name}-${i}-${index}`,\n value,\n position: index,\n serie: d.name,\n scale: d.scale,\n color: COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color,\n })),\n })) as DSChartT.InternalData;\n\n const currentDataWithoutNulls = baseData.map((data) => ({\n ...data,\n data: data.data.filter((datum) => datum.value !== null && datum.value !== undefined),\n }));\n\n return [baseData, currentDataWithoutNulls];\n }, [defaultScale, hiddenSeries, originalSeries]);\n\n const isHorizontal = useMemo(() => yAxis?.type === 'band', [yAxis]);\n\n const { stackedData, scalesStackedDataMap } = useMemo(\n () => stackData(groupsStacked, originalSeries, hiddenSeries, isHorizontal),\n [groupsStacked, originalSeries, hiddenSeries, isHorizontal],\n );\n\n // @TODO we need to create a logic to get this from both axis\n // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n props,\n originalSeries,\n innerHeight,\n innerWidth,\n groups,\n stackedData,\n scalesStackedDataMap,\n currentData,\n containerRatio,\n });\n\n const {\n getXValue,\n getY2ScaleValue,\n getYValue,\n getXScaleValue,\n getYScaleValue,\n getYValueFormatted,\n getXValueFormatted,\n } = useGetters({\n xAxis,\n yAxis,\n isHorizontal,\n xScale,\n yScale,\n y2Scale,\n });\n const chartId = useMemo(() => uid(6), []);\n\n return useMemo(\n () => ({\n props,\n originalSeries,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n setScrapperPosY,\n scrapperPosX,\n setScrapperPosX,\n activePoint,\n setActivePoint,\n activeSerie,\n setActiveSerie,\n xScrollbarPosition,\n setXScrollbarPosition,\n isGrabbed,\n setIsGrabbed,\n setContainerRef,\n startPosition,\n setStartPosition,\n isScrollbarVisible,\n setIsScrollbarVisible,\n lastScrollbarPosition,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n setAxisLeftRef,\n setLeftLegend,\n setRightLegend,\n rightLegend,\n setTopLegend,\n setBottomLegend,\n setAxisBottomRef,\n axisBottomHeight,\n setAxisRightRef,\n setRightLabel,\n setBottomLabel,\n getXScaleValue,\n getYScaleValue,\n getY2ScaleValue,\n getYValueFormatted,\n getXValueFormatted,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n setLeftLabel,\n leftLabel,\n chartId,\n hiddenSeries,\n setHiddenSeries,\n height,\n width,\n setContainerRatio,\n toolbarHeight,\n setToolbarRef,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n currentDataWithNullValues,\n }),\n [\n props,\n originalSeries,\n isZooming,\n zoomStartingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n getY2ScaleValue,\n scrapperPosX,\n activePoint,\n activeSerie,\n xScrollbarPosition,\n isGrabbed,\n startPosition,\n isScrollbarVisible,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n rightLegend,\n axisBottomHeight,\n getXScaleValue,\n getYScaleValue,\n getYValueFormatted,\n getXValueFormatted,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n leftLabel,\n chartId,\n hiddenSeries,\n height,\n width,\n toolbarHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n currentDataWithNullValues,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqD;AACrD,iBAAoB;AACpB,oBAAyB;AACzB,sCAA2B;AAE3B,mCAA6B;AAC7B,uBAA0B;AAC1B,qBAA0B;AAC1B,gCAAmC;AACnC,wBAA2B;AAC3B,8BAAiC;AACjC,yBAA6B;AAG7B,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAiB,CAAC;AAEtD,8BAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,gCAAAA;AAAA,YACzB,wBAAS,CAAC,YAA8C;AACtD,kBAAQ,QAAQ,CAAC,UAAU;AACzB,0BAAc,KAAK,KAAK,MAAM,YAAY,KAAK,CAAC;AAAA,UAClD,CAAC;AAAA,QACH,GAAG,GAAG;AAAA,MACR;AACA,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AACA,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,UAA0B;AACjD,gDAAiB,KAAK;AAGtB,QAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,WAAW,QAAQ,YAAY,QAAQ,cAAc,IAAI;AAC9F,QAAM,gBAAY;AAAA,IAChB,MAAM,OAAO,MAAM,UAAU,cAAc,SAAS,OAAO,MAAM,UAAU,cAAc,SAAS;AAAA,IAClG,CAAC,OAAO,MAAM,UAAU,cAAc,OAAO,OAAO,MAAM,UAAU,cAAc,KAAK;AAAA,EACzF;AACA,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,OAAO,WAAW,GAAG;AACvB,aAAO,0CAAa;AAAA,IACtB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAgC,IAAI;AAE5E,QAAM,iBAAiB,kBAAkB,YAAY;AAErD,QAAM,YAAQ,sBAAQ,MAAM,aAAa,kBAAkB,GAAG,CAAC,gBAAgB,SAAS,CAAC;AAEzF,QAAM,aAAS,sBAAQ,MAAM,cAAc,KAAK,CAAC,UAAU,CAAC;AAE5D,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAIpD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,sBAAsB,uBAAuB,QAAI,uBAAS,CAAC;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,CAAC;AAItD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwC,IAAI;AAClF,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,CAAC;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,SAAS;AAE9D,QAAM,4BAAwB,qBAAO,CAAC;AAEtC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AACvE,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAA6B,IAAI;AAC3E,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AACrE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AACvE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,IAAI;AACnE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AACrE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,IAAI;AACnE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AAEvE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AAGrE,8BAAU,MAAM;AACd,0BAAsB,UAAU;AAChC,0BAAsB,CAAC;AAAA,EACzB,GAAG,CAAC,cAAc,CAAC;AAEnB,8BAAU,MAAM;AACd,sBAAkB,SAAS;AAAA,EAC7B,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,8CAAmB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAa;AAAA,IACjB,MAAM,QAAQ,eAAe,OAAO,eAAe;AAAA,IACnD,CAAC,eAAe,MAAM,eAAe,OAAO,KAAK;AAAA,EACnD;AACA,QAAM,kBAAc;AAAA,IAClB,MAAM,SAAS,eAAe,MAAM,eAAe;AAAA,IACnD,CAAC,eAAe,KAAK,eAAe,QAAQ,MAAM;AAAA,EACpD;AAEA,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAmB,CAAC,CAAC;AAE7D,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,MAAM,SAAS,QAAQ;AACzB,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,QAAW,MAAM,EAAE,SAAS,MAAM,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAE3B,QAAM,CAAC,2BAA2B,WAAW,QAAI,sBAAQ,MAAM;AAC7D,UAAM,WAAW,eACd,OAAO,CAAC,UAAU,CAAC,aAAa,SAAS,MAAM,IAAI,CAAC,EACpD,IAAI,CAAC,GAAG,OAAO;AAAA,MACd,GAAG;AAAA;AAAA,MAEH,OAAO,EAAE,SAAS;AAAA,MAClB,KAAK,GAAG,EAAE,IAAI,IAAI,CAAC;AAAA,MACnB,MAAM,EAAE,KAAK,IAAI,CAAC,OAAO,WAAW;AAAA,QAClC,KAAK,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK;AAAA,QAC5B;AAAA,QACA,UAAU;AAAA,QACV,OAAO,EAAE;AAAA,QACT,OAAO,EAAE;AAAA,QACT,OAAO,gCAAa,EAAE,KAAkC,KAAK,EAAE;AAAA,MACjE,EAAE;AAAA,IACJ,EAAE;AAEJ,UAAM,0BAA0B,SAAS,IAAI,CAAC,UAAU;AAAA,MACtD,GAAG;AAAA,MACH,MAAM,KAAK,KAAK,OAAO,CAAC,UAAU,MAAM,UAAU,QAAQ,MAAM,UAAU,MAAS;AAAA,IACrF,EAAE;AAEF,WAAO,CAAC,UAAU,uBAAuB;AAAA,EAC3C,GAAG,CAAC,cAAc,cAAc,cAAc,CAAC;AAE/C,QAAM,mBAAe,sBAAQ,MAAM,OAAO,SAAS,QAAQ,CAAC,KAAK,CAAC;AAElE,QAAM,EAAE,aAAa,qBAAqB,QAAI;AAAA,IAC5C,UAAM,0BAAU,eAAe,gBAAgB,cAAc,YAAY;AAAA,IACzE,CAAC,eAAe,gBAAgB,cAAc,YAAY;AAAA,EAC5D;AAKA,QAAM,aAAS,sBAAQ,MAAM,YAAY,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG,CAAC,WAAW,CAAC;AAElF,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,aAAa,QAAI,4BAAU;AAAA,IACrF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,8BAAW;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,cAAU,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAExC,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["ResizeObserver"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useInternalMargins.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ninterface UseInternalMarginsT {\n axisLeftRef: SVGGElement | null;\n axisBottomRef: SVGGElement | null;\n axisRightRef: SVGGElement | null;\n leftLegend: SVGGElement | null;\n leftLabel: SVGGElement | null;\n rightLegend: SVGGElement | null;\n topLegend: SVGGElement | null;\n bottomLegend: SVGGElement | null;\n rightLabel: SVGGElement | null;\n bottomLabel: SVGGElement | null;\n toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n ref: SVGGElement | null,\n { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n });\n });\n\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n }, [offsetHeight, offsetWidth, ref]);\n return { width, height };\n};\n\nexport const useInternalMargins = ({\n axisLeftRef,\n axisBottomRef,\n axisRightRef,\n leftLabel,\n leftLegend,\n rightLegend,\n topLegend,\n bottomLegend,\n rightLabel,\n bottomLabel,\n toolbarRef,\n}: UseInternalMarginsT) => {\n // Toolbar\n const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n // Axis\n const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });\n const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n // Labels\n const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });\n const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n // Legends\n const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n offsetHeight: 10,\n });\n const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n const internalMargin = useMemo(\n () => ({\n bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n top: Math.max(topLegendHeight, toolbarHeight) || 10,\n right: rightLabelWidth + axisRightWidth + rightLegendWidth || 15,\n left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n }),\n\n [\n axisBottomHeight,\n bottomLegendHeight,\n bottomLabelHeight,\n topLegendHeight,\n toolbarHeight,\n rightLabelWidth,\n axisRightWidth,\n rightLegendWidth,\n axisLeftWidth,\n leftLabelWidth,\n leftLegendWidth,\n ],\n );\n\n return useMemo(\n () => ({\n internalMargin,\n leftLegendHeight,\n leftLegendWidth,\n axisBottomHeight,\n bottomLegendHeight,\n bottomLabelHeight,\n topLegendHeight,\n rightLabelWidth,\n axisRightWidth,\n rightLegendWidth,\n axisLeftWidth,\n leftLabelWidth,\n toolbarHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n }),\n [\n axisBottomHeight,\n toolbarHeight,\n leftLegendHeight,\n axisLeftWidth,\n axisRightWidth,\n bottomLabelHeight,\n bottomLegendHeight,\n internalMargin,\n leftLabelWidth,\n leftLegendWidth,\n rightLabelWidth,\n rightLegendWidth,\n topLegendHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA6C;AAC7C,sCAA2B;AAkB3B,MAAM,oBAAoB,CACxB,KACA,EAAE,eAAe,GAAG,cAAc,EAAE,IAAI,EAAE,cAAc,GAAG,aAAa,EAAE,MACvE;AACH,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAE9C,8BAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,gCAAAA,QAAe,CAAC,YAA8C;AACvF,gBAAQ,QAAQ,CAAC,UAAU;AACzB,mBAAS,KAAK,KAAK,MAAM,YAAY,QAAQ,WAAW,CAAC;AACzD,oBAAU,KAAK,KAAK,MAAM,YAAY,SAAS,YAAY,CAAC;AAAA,QAC9D,CAAC;AAAA,MACH,CAAC;AAED,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ninterface UseInternalMarginsT {\n axisLeftRef: SVGGElement | null;\n axisBottomRef: SVGGElement | null;\n axisRightRef: SVGGElement | null;\n leftLegend: SVGGElement | null;\n leftLabel: SVGGElement | null;\n rightLegend: SVGGElement | null;\n topLegend: SVGGElement | null;\n bottomLegend: SVGGElement | null;\n rightLabel: SVGGElement | null;\n bottomLabel: SVGGElement | null;\n toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n ref: SVGGElement | null,\n { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n });\n });\n\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n return () => {};\n }, [offsetHeight, offsetWidth, ref]);\n return { width, height };\n};\n\nexport const useInternalMargins = ({\n axisLeftRef,\n axisBottomRef,\n axisRightRef,\n leftLabel,\n leftLegend,\n rightLegend,\n topLegend,\n bottomLegend,\n rightLabel,\n bottomLabel,\n toolbarRef,\n}: UseInternalMarginsT) => {\n // Toolbar\n const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n // Axis\n const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });\n const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n // Labels\n const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });\n const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n // Legends\n const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n offsetHeight: 10,\n });\n const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n const internalMargin = useMemo(\n () => ({\n bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n top: Math.max(topLegendHeight, toolbarHeight) || 10,\n right: rightLabelWidth + axisRightWidth + rightLegendWidth || 15,\n left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n }),\n\n [\n axisBottomHeight,\n bottomLegendHeight,\n bottomLabelHeight,\n topLegendHeight,\n toolbarHeight,\n rightLabelWidth,\n axisRightWidth,\n rightLegendWidth,\n axisLeftWidth,\n leftLabelWidth,\n leftLegendWidth,\n ],\n );\n\n return useMemo(\n () => ({\n internalMargin,\n leftLegendHeight,\n leftLegendWidth,\n axisBottomHeight,\n bottomLegendHeight,\n bottomLabelHeight,\n topLegendHeight,\n rightLabelWidth,\n axisRightWidth,\n rightLegendWidth,\n axisLeftWidth,\n leftLabelWidth,\n toolbarHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n }),\n [\n axisBottomHeight,\n toolbarHeight,\n leftLegendHeight,\n axisLeftWidth,\n axisRightWidth,\n bottomLabelHeight,\n bottomLegendHeight,\n internalMargin,\n leftLabelWidth,\n leftLegendWidth,\n rightLabelWidth,\n rightLegendWidth,\n topLegendHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ResizeObserver"]
|
|
7
7
|
}
|
|
@@ -200,7 +200,7 @@ const useKeyboardNavigation = () => {
|
|
|
200
200
|
const handleOnKeyUp = (0, import_react.useCallback)(
|
|
201
201
|
(e) => {
|
|
202
202
|
if (!activePoint) return;
|
|
203
|
-
if (!isZooming && xScale?.type === "BAND") return
|
|
203
|
+
if (!isZooming && xScale?.type === "BAND") return;
|
|
204
204
|
const { shiftKey, code } = e;
|
|
205
205
|
const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
|
|
206
206
|
const xScaledActivePoint = getXScaleValue(activePoint);
|
|
@@ -219,7 +219,7 @@ const useKeyboardNavigation = () => {
|
|
|
219
219
|
const diff = Math.abs(zoomStartingPosition - correctEndingPosition);
|
|
220
220
|
if (diff <= 0) return;
|
|
221
221
|
const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
|
|
222
|
-
const newPosition = lastScrollbarPosition
|
|
222
|
+
const newPosition = lastScrollbarPosition.current + (!isRightDirection ? correctEndingPosition : zoomStartingPosition) / containerRatio;
|
|
223
223
|
if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);
|
|
224
224
|
else setXScrollbarPosition(newPosition);
|
|
225
225
|
setActivePoint(null);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useKeyboardNavigation.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const findInCircularList = (\n list: string[],\n from: number,\n step = 1,\n criteria = (item: number) => item !== undefined,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (list[i] && criteria(i)) {\n return i;\n }\n }\n return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n const {\n activePoint,\n setActivePoint,\n containerRef,\n xScale,\n yScale,\n lastScrollbarPosition,\n setXScrollbarPosition,\n containerRatio,\n xScrollbarPosition,\n innerWidth,\n innerHeight,\n getXScaleValue,\n getYScaleValue,\n groups,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n setContainerRatio,\n currentDataWithNullValues,\n props: { xScroll, yScroll },\n } = useContext(ChartContext);\n\n const currentSerie = useMemo(\n () => currentDataWithNullValues.find((d) => d.name === activePoint?.serie) ?? currentDataWithNullValues[0],\n [activePoint?.serie, currentDataWithNullValues],\n );\n\n const currentActiveItemIndex = useMemo(\n () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n [activePoint, currentSerie],\n );\n\n const listMap = useMemo(\n () =>\n currentSerie?.data.map((d) => {\n if (typeof d.value === 'object') return JSON.stringify(d.value);\n return d.value?.toString();\n }) ?? [],\n [currentSerie?.data],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (containerRef === e.target && activePoint === null) {\n setActivePoint(currentSerie?.data[0]);\n setXScrollbarPosition(0);\n }\n },\n [activePoint, containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\n );\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setTimeout(() => {\n if (!containerRef?.contains(document.activeElement)) {\n setActivePoint(null);\n }\n });\n }, [setActivePoint, containerRef]);\n\n const navigateSerie = useCallback(\n (step: number) => {\n const newValue = findInCircularList(listMap, currentActiveItemIndex, step);\n setActivePoint(currentSerie?.data[newValue]);\n\n if (xScroll) {\n const xValue = getXScaleValue(currentSerie?.data[newValue]);\n if (xValue === undefined) return;\n const barWidth = innerWidth / containerRatio;\n const total = innerWidth * containerRatio;\n if (total <= xValue) {\n // to go from the first to last\n setXScrollbarPosition((total - innerWidth) / containerRatio);\n } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n // if is not visible we move the scroll to the next best position\n setXScrollbarPosition((prev) => {\n const nextPosition = prev + (xValue / containerRatio - prev);\n if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n return nextPosition;\n });\n // move backwards - 2 because focus ring in bars\n else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n } else if (yScroll) {\n const yValue = getYScaleValue(currentSerie?.data[newValue]);\n if (yValue === undefined) return;\n const barWidth = innerHeight / containerRatio;\n const total = innerHeight * containerRatio;\n if (total <= yValue) {\n // to go from the first to last\n setXScrollbarPosition((total - innerHeight) / containerRatio);\n } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n // if is not visible we move the scroll to the next best position\n setXScrollbarPosition((prev) => {\n const nextPosition = prev + (yValue / containerRatio - prev);\n if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n return nextPosition;\n });\n // move backwards - 2 because focus ring in bars\n else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n }\n },\n [\n listMap,\n currentActiveItemIndex,\n setActivePoint,\n currentSerie?.data,\n xScroll,\n yScroll,\n getXScaleValue,\n innerWidth,\n containerRatio,\n xScrollbarPosition,\n setXScrollbarPosition,\n getYScaleValue,\n innerHeight,\n ],\n );\n\n const changeSerie = useCallback(\n (step: number) => {\n const nextSerieIndex = findInCircularList(\n groups,\n groups.findIndex((item) => item === currentSerie.name),\n step,\n (idx: number) => currentDataWithNullValues[idx].data[currentActiveItemIndex].value !== null,\n );\n setActivePoint(currentDataWithNullValues[nextSerieIndex].data[currentActiveItemIndex]);\n },\n [groups, setActivePoint, currentActiveItemIndex, currentSerie.name, currentDataWithNullValues],\n );\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (!activePoint) return;\n if (e.code !== 'Tab') {\n e.preventDefault();\n }\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n if (yScale?.type === 'BAND') changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n }\n\n if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n if (yScale?.type === 'BAND') navigateSerie(e.code === 'ArrowDown' ? 1 : -1);\n else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n }\n\n const { code } = e;\n const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n const xScaledActivePoint = getXScaleValue(activePoint);\n if (isShiftKey && !isZooming && xScale?.type !== 'BAND' && xScaledActivePoint) {\n setIsZooming(true);\n setZoomStartingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n }\n },\n [\n activePoint,\n changeSerie,\n containerRatio,\n getXScaleValue,\n isZooming,\n navigateSerie,\n setIsZooming,\n setZoomStartingPosition,\n xScale?.type,\n xScrollbarPosition,\n yScale?.type,\n ],\n );\n\n const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (!activePoint) return;\n\n if (!isZooming && xScale?.type === 'BAND') return
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const findInCircularList = (\n list: string[],\n from: number,\n step = 1,\n criteria = (item: number) => item !== undefined,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (list[i] && criteria(i)) {\n return i;\n }\n }\n return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n const {\n activePoint,\n setActivePoint,\n containerRef,\n xScale,\n yScale,\n lastScrollbarPosition,\n setXScrollbarPosition,\n containerRatio,\n xScrollbarPosition,\n innerWidth,\n innerHeight,\n getXScaleValue,\n getYScaleValue,\n groups,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n setContainerRatio,\n currentDataWithNullValues,\n props: { xScroll, yScroll },\n } = useContext(ChartContext);\n\n const currentSerie = useMemo(\n () => currentDataWithNullValues.find((d) => d.name === activePoint?.serie) ?? currentDataWithNullValues[0],\n [activePoint?.serie, currentDataWithNullValues],\n );\n\n const currentActiveItemIndex = useMemo(\n () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n [activePoint, currentSerie],\n );\n\n const listMap = useMemo(\n () =>\n currentSerie?.data.map((d) => {\n if (typeof d.value === 'object') return JSON.stringify(d.value);\n return d.value?.toString();\n }) ?? [],\n [currentSerie?.data],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (containerRef === e.target && activePoint === null) {\n setActivePoint(currentSerie?.data[0]);\n setXScrollbarPosition(0);\n }\n },\n [activePoint, containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\n );\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setTimeout(() => {\n if (!containerRef?.contains(document.activeElement)) {\n setActivePoint(null);\n }\n });\n }, [setActivePoint, containerRef]);\n\n const navigateSerie = useCallback(\n (step: number) => {\n const newValue = findInCircularList(listMap, currentActiveItemIndex, step);\n setActivePoint(currentSerie?.data[newValue]);\n\n if (xScroll) {\n const xValue = getXScaleValue(currentSerie?.data[newValue]);\n if (xValue === undefined) return;\n const barWidth = innerWidth / containerRatio;\n const total = innerWidth * containerRatio;\n if (total <= xValue) {\n // to go from the first to last\n setXScrollbarPosition((total - innerWidth) / containerRatio);\n } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n // if is not visible we move the scroll to the next best position\n setXScrollbarPosition((prev) => {\n const nextPosition = prev + (xValue / containerRatio - prev);\n if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n return nextPosition;\n });\n // move backwards - 2 because focus ring in bars\n else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n } else if (yScroll) {\n const yValue = getYScaleValue(currentSerie?.data[newValue]);\n if (yValue === undefined) return;\n const barWidth = innerHeight / containerRatio;\n const total = innerHeight * containerRatio;\n if (total <= yValue) {\n // to go from the first to last\n setXScrollbarPosition((total - innerHeight) / containerRatio);\n } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n // if is not visible we move the scroll to the next best position\n setXScrollbarPosition((prev) => {\n const nextPosition = prev + (yValue / containerRatio - prev);\n if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n return nextPosition;\n });\n // move backwards - 2 because focus ring in bars\n else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n }\n },\n [\n listMap,\n currentActiveItemIndex,\n setActivePoint,\n currentSerie?.data,\n xScroll,\n yScroll,\n getXScaleValue,\n innerWidth,\n containerRatio,\n xScrollbarPosition,\n setXScrollbarPosition,\n getYScaleValue,\n innerHeight,\n ],\n );\n\n const changeSerie = useCallback(\n (step: number) => {\n const nextSerieIndex = findInCircularList(\n groups,\n groups.findIndex((item) => item === currentSerie.name),\n step,\n (idx: number) => currentDataWithNullValues[idx].data[currentActiveItemIndex].value !== null,\n );\n setActivePoint(currentDataWithNullValues[nextSerieIndex].data[currentActiveItemIndex]);\n },\n [groups, setActivePoint, currentActiveItemIndex, currentSerie.name, currentDataWithNullValues],\n );\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (!activePoint) return;\n if (e.code !== 'Tab') {\n e.preventDefault();\n }\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n if (yScale?.type === 'BAND') changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n }\n\n if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n if (yScale?.type === 'BAND') navigateSerie(e.code === 'ArrowDown' ? 1 : -1);\n else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n }\n\n const { code } = e;\n const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n const xScaledActivePoint = getXScaleValue(activePoint);\n if (isShiftKey && !isZooming && xScale?.type !== 'BAND' && xScaledActivePoint) {\n setIsZooming(true);\n setZoomStartingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n }\n },\n [\n activePoint,\n changeSerie,\n containerRatio,\n getXScaleValue,\n isZooming,\n navigateSerie,\n setIsZooming,\n setZoomStartingPosition,\n xScale?.type,\n xScrollbarPosition,\n yScale?.type,\n ],\n );\n\n const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (!activePoint) return;\n\n if (!isZooming && xScale?.type === 'BAND') return;\n const { shiftKey, code } = e;\n const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n const xScaledActivePoint = getXScaleValue(activePoint);\n\n if (shiftKey && ['ArrowRight', 'ArrowLeft'].includes(code) && xScaledActivePoint) {\n setMovingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n }\n if (isShiftKey && xScaledActivePoint) {\n setIsZooming(false);\n setZoomStartingPosition(0);\n setMovingPosition(0);\n const endingPosition = xScaledActivePoint - xScrollbarPosition * containerRatio;\n // isRightDirection is used to know if we are zooming right or left direction\n const isRightDirection = zoomStartingPosition < endingPosition;\n const offsetActivePoint = findInCircularList(listMap, currentActiveItemIndex, isRightDirection ? 1 : -1);\n // we do this so the activePoint does not fall into the blur gradient\n const offSetXScaledActivePoint = getXScaleValue(currentSerie?.data[offsetActivePoint]);\n const correctEndingPosition = offSetXScaledActivePoint ?? 0 - xScrollbarPosition * containerRatio;\n const diff = Math.abs(zoomStartingPosition - correctEndingPosition);\n if (diff <= 0) return;\n const newRatio =\n innerWidth / ((innerWidth * containerRatio) / diff) < 40\n ? innerWidth / 40\n : (innerWidth * containerRatio) / diff;\n const newPosition =\n lastScrollbarPosition.current +\n (!isRightDirection ? correctEndingPosition : zoomStartingPosition) / containerRatio;\n\n // if is bigger thant innerwidth possible we force the end\n if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n else setXScrollbarPosition(newPosition);\n setActivePoint(null);\n setTimeout(() => setActivePoint(activePoint));\n setContainerRatio(newRatio);\n lastScrollbarPosition.current = newPosition;\n }\n },\n [\n activePoint,\n containerRatio,\n currentActiveItemIndex,\n currentSerie?.data,\n getXScaleValue,\n\n innerWidth,\n isZooming,\n lastScrollbarPosition,\n listMap,\n setActivePoint,\n setContainerRatio,\n setIsZooming,\n setMovingPosition,\n setXScrollbarPosition,\n setZoomStartingPosition,\n xScale?.type,\n xScrollbarPosition,\n zoomStartingPosition,\n ],\n );\n return useMemo(\n () => ({ handleOnKeyUp, onInputKeyDown, handleOnBlur, handleOnFocus }),\n [handleOnBlur, handleOnFocus, handleOnKeyUp, onInputKeyDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useScales.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { getStackedIndex } from '../helpers/index.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { TIME_OFFSET } from '../../constants.js';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales/index.js';\ninterface UseScales {\n props: DSChartT.Props;\n innerHeight: number;\n innerWidth: number;\n originalSeries: DSChartT.SeriesT[];\n stackedData: Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n currentData: DSChartT.InternalData;\n groups: string[];\n containerRatio: number;\n scalesStackedDataMap: string[];\n}\n\nexport const useScales = ({\n props,\n originalSeries: series,\n innerHeight,\n innerWidth,\n stackedData,\n currentData,\n scalesStackedDataMap,\n containerRatio,\n}: UseScales) => {\n const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll, yScroll } = props;\n\n const getBandDomain = useCallback(\n (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n [series],\n );\n\n const getPadding = (domainPadding?: number | Array<number>) =>\n typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n const getLinearDomain = useCallback(\n (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n // we are calculating the min and max between all the data\n // including the stacked groups if exists\n const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n const end = axis.max ?? undefined;\n const data = currentData\n // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n .filter((serie) => serie.scale === axisString || axisString === 'x')\n .map((serie) =>\n serie.data\n .filter((datum) => datum.value !== null)\n .map((datum) => {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n\n return datum.value[axisString === 'y2' ? 'y' : axisString];\n }),\n );\n const dataFlattened = data.flat();\n const stackedDataFlatten = stackedData.filter((_, i) => scalesStackedDataMap[i] === axisString).flat();\n const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n const minData = min(dataFlattened);\n const maxData = max(dataFlattened);\n const types = ['number', 'object'];\n const getMin = () => {\n const aux: (number | Date)[] = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (types.includes(typeof minData) && minData !== undefined) aux.push(minData);\n if (typeof minStackedData === 'number') aux.push(minStackedData);\n return min(aux);\n };\n const getMax = () => {\n const aux: (number | Date)[] = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n if (types.includes(typeof maxData) && maxData !== undefined) aux.push(maxData);\n if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n return max(aux);\n };\n const minRange = getMin();\n const maxRange = getMax();\n\n const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n if (typeof minRange === 'number' && typeof maxRange === 'number') {\n // @TODO fix this domain padding\n return [\n minRange - (maxRange - minRange) * (leftPadding ?? 0),\n maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n ];\n }\n // timelinear case\n if (typeof minRange === 'object' && typeof maxRange === 'object') {\n if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n return [\n TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n ];\n }\n return [minRange, maxRange];\n }\n\n return [];\n },\n [currentData, scalesStackedDataMap, stackedData],\n );\n\n // d3 scale functions\n const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n // dataviz scales\n\n const scaleFactory = useCallback(\n (axis: 'x' | 'y' | 'y2', axisProps?: DSChartT.AxisT, range: number[] = []) => {\n if (!axisProps) return null;\n if (['time', 'datetime'].includes(axisProps?.type)) {\n return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis) as Date[], range), axisProps);\n }\n\n if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n }\n\n if (axisProps?.type === 'log')\n return new LogScale(getScaleLog(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n\n if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n // we need to reverse the range in case is a horizontal bar char\n const realRange = axis === 'y' ? range.reverse() : range;\n return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n }\n return null;\n },\n [getBandDomain, getLinearDomain],\n );\n\n const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n const xRangeTo = useMemo(\n () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n );\n\n const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n const yRangeFrom = useMemo(\n () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n );\n\n const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n const y2RangeFrom = useMemo(\n () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n );\n\n const xScale = useMemo(\n () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n );\n\n const yScale = useMemo(\n () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n );\n\n const y2Scale = useMemo(\n () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n );\n\n const colorScale = useMemo(\n () =>\n scaleOrdinal()\n .domain(series.map((d) => d.name))\n .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n .unknown('red'),\n [series],\n );\n // get only groups bars to calculate the subgroup scale\n\n const subgroupsWithBars = useMemo(() => {\n const data = currentData\n .filter(\n (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n )\n .map((serie) => serie.name);\n\n if (stackedSeries?.length) {\n stackedSeries.forEach((stackedGroup, i) => {\n if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n });\n }\n return data;\n }, [currentData, stackedSeries]);\n\n const getBandwidth = useCallback(() => {\n if (xScale?.type === 'BAND') {\n return xScale?.getBandwidth();\n }\n if (yScale?.type === 'BAND') {\n return yScale?.getBandwidth();\n }\n // @todo explore this. is to create bars with a linear axis\n const bars = currentData.filter((serie) => serie.type === 'bar');\n const barsLength = bars.length;\n if (!barsLength) return 0;\n // we get the size of the bars using the length of the data or the ticks amounts\n // the biggest is the one we use to get the real width we need.\n // we are doing calculations only for x axis because we are not expecting\n // y axis linear cases.\n const maxDataLength = Math.max(...bars.map((bar) => bar.data.length));\n if (xScale && xScale instanceof BandScale) return 0;\n const divisor = Math.max(\n maxDataLength,\n xScale?.scale.ticks().length ?? 0,\n xScale?.getTicks(innerWidth, '').length ?? 0,\n 1,\n );\n\n const width = innerWidth / divisor;\n if (containerRatio > 1) {\n return Math.max(0.5, width * containerRatio);\n }\n // this reduce the width of the bars under small width graphs\n const modificator = innerWidth > 400 ? 0.5 : 0.8;\n return Math.max(0.5, Math.min(20, Math.trunc(width - width * modificator)));\n }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n const subGroupScale = useMemo(\n () =>\n getBandwidth()\n ? scaleBand()\n .domain(subgroupsWithBars)\n .range([0, getBandwidth()])\n .paddingInner(0.55)\n .padding(0.2)\n .paddingOuter(0.01)\n : null,\n [getBandwidth, subgroupsWithBars],\n );\n\n return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAErC,gBAAmF;AAEnF,qBAAgC;AAChC,yBAA6B;AAC7B,uBAA4B;AAC5B,oBAAkE;AAkB3D,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,EAAE,OAAO,OAAO,QAAQ,QAAQ,eAAe,SAAS,QAAQ,IAAI;AAE1E,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAyB,KAAK,QAAQ,CAAC,GAAG,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,SAAS,CAAC,CAAC;AAAA,IACrF,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,aAAa,CAAC,kBAClB,OAAO,kBAAkB,WAAW,CAAC,eAAe,aAAa,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { getStackedIndex } from '../helpers/index.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { TIME_OFFSET } from '../../constants.js';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales/index.js';\ninterface UseScales {\n props: DSChartT.Props;\n innerHeight: number;\n innerWidth: number;\n originalSeries: DSChartT.SeriesT[];\n stackedData: Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n currentData: DSChartT.InternalData;\n groups: string[];\n containerRatio: number;\n scalesStackedDataMap: string[];\n}\n\nexport const useScales = ({\n props,\n originalSeries: series,\n innerHeight,\n innerWidth,\n stackedData,\n currentData,\n scalesStackedDataMap,\n containerRatio,\n}: UseScales) => {\n const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll, yScroll } = props;\n\n const getBandDomain = useCallback(\n (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n [series],\n );\n\n const getPadding = (domainPadding?: number | Array<number>) =>\n typeof domainPadding === 'number' ? [domainPadding, domainPadding] : (domainPadding ?? [0, 0]);\n\n const getLinearDomain = useCallback(\n (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n // we are calculating the min and max between all the data\n // including the stacked groups if exists\n const begin = axis?.beginAtZero ? 0 : (axis.min ?? undefined);\n const end = axis.max ?? undefined;\n const data = currentData\n // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n .filter((serie) => serie.scale === axisString || axisString === 'x')\n .map((serie) =>\n serie.data\n .filter((datum) => datum.value !== null)\n .map((datum) => {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n\n return datum.value[axisString === 'y2' ? 'y' : axisString];\n }),\n );\n const dataFlattened = data.flat();\n const stackedDataFlatten = stackedData.filter((_, i) => scalesStackedDataMap[i] === axisString).flat();\n const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n const minData = min(dataFlattened);\n const maxData = max(dataFlattened);\n const types = ['number', 'object'];\n const getMin = () => {\n const aux: (number | Date)[] = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (types.includes(typeof minData) && minData !== undefined) aux.push(minData);\n if (typeof minStackedData === 'number') aux.push(minStackedData);\n return min(aux);\n };\n const getMax = () => {\n const aux: (number | Date)[] = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n if (types.includes(typeof maxData) && maxData !== undefined) aux.push(maxData);\n if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n return max(aux);\n };\n const minRange = getMin();\n const maxRange = getMax();\n\n const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n if (typeof minRange === 'number' && typeof maxRange === 'number') {\n // @TODO fix this domain padding\n return [\n minRange - (maxRange - minRange) * (leftPadding ?? 0),\n maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n ];\n }\n // timelinear case\n if (typeof minRange === 'object' && typeof maxRange === 'object') {\n if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n return [\n TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n ];\n }\n return [minRange, maxRange];\n }\n\n return [];\n },\n [currentData, scalesStackedDataMap, stackedData],\n );\n\n // d3 scale functions\n const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n // dataviz scales\n\n const scaleFactory = useCallback(\n (axis: 'x' | 'y' | 'y2', axisProps?: DSChartT.AxisT, range: number[] = []) => {\n if (!axisProps) return null;\n if (['time', 'datetime'].includes(axisProps?.type)) {\n return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis) as Date[], range), axisProps);\n }\n\n if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n }\n\n if (axisProps?.type === 'log')\n return new LogScale(getScaleLog(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n\n if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n // we need to reverse the range in case is a horizontal bar char\n const realRange = axis === 'y' ? range.reverse() : range;\n return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n }\n return null;\n },\n [getBandDomain, getLinearDomain],\n );\n\n const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n const xRangeTo = useMemo(\n () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n );\n\n const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n const yRangeFrom = useMemo(\n () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n );\n\n const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n const y2RangeFrom = useMemo(\n () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n );\n\n const xScale = useMemo(\n () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n );\n\n const yScale = useMemo(\n () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n );\n\n const y2Scale = useMemo(\n () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n );\n\n const colorScale = useMemo(\n () =>\n scaleOrdinal()\n .domain(series.map((d) => d.name))\n .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n .unknown('red'),\n [series],\n );\n // get only groups bars to calculate the subgroup scale\n\n const subgroupsWithBars = useMemo(() => {\n const data = currentData\n .filter(\n (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n )\n .map((serie) => serie.name);\n\n if (stackedSeries?.length) {\n stackedSeries.forEach((stackedGroup, i) => {\n if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n });\n }\n return data;\n }, [currentData, stackedSeries]);\n\n const getBandwidth = useCallback(() => {\n if (xScale?.type === 'BAND') {\n return xScale?.getBandwidth();\n }\n if (yScale?.type === 'BAND') {\n return yScale?.getBandwidth();\n }\n // @todo explore this. is to create bars with a linear axis\n const bars = currentData.filter((serie) => serie.type === 'bar');\n const barsLength = bars.length;\n if (!barsLength) return 0;\n // we get the size of the bars using the length of the data or the ticks amounts\n // the biggest is the one we use to get the real width we need.\n // we are doing calculations only for x axis because we are not expecting\n // y axis linear cases.\n const maxDataLength = Math.max(...bars.map((bar) => bar.data.length));\n if (xScale && xScale instanceof BandScale) return 0;\n const divisor = Math.max(\n maxDataLength,\n xScale?.scale.ticks().length ?? 0,\n xScale?.getTicks(innerWidth, '').length ?? 0,\n 1,\n );\n\n const width = innerWidth / divisor;\n if (containerRatio > 1) {\n return Math.max(0.5, width * containerRatio);\n }\n // this reduce the width of the bars under small width graphs\n const modificator = innerWidth > 400 ? 0.5 : 0.8;\n return Math.max(0.5, Math.min(20, Math.trunc(width - width * modificator)));\n }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n const subGroupScale = useMemo(\n () =>\n getBandwidth()\n ? scaleBand()\n .domain(subgroupsWithBars)\n .range([0, getBandwidth()])\n .paddingInner(0.55)\n .padding(0.2)\n .paddingOuter(0.01)\n : null,\n [getBandwidth, subgroupsWithBars],\n );\n\n return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -56,7 +56,8 @@ const useVirtualizedSeries = () => {
|
|
|
56
56
|
return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2;
|
|
57
57
|
})
|
|
58
58
|
}));
|
|
59
|
-
}
|
|
59
|
+
}
|
|
60
|
+
if (yScroll) {
|
|
60
61
|
return data.map((serie) => ({
|
|
61
62
|
...serie,
|
|
62
63
|
data: serie.data.filter((datum) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/helpers/useVirtualizedSeries.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const useVirtualizedSeries = () => {\n const {\n containerRatio,\n innerWidth,\n xScrollbarPosition,\n yScale,\n getXScaleValue,\n getYScaleValue,\n innerHeight,\n currentData: data,\n props: { xScroll, yScroll },\n } = useContext(ChartContext);\n return useMemo(() => {\n if (xScroll) {\n return data.map((serie) => ({\n ...serie,\n data: serie.data.filter((datum) => {\n const xScaleValue = getXScaleValue(datum);\n if (xScaleValue === undefined) return false;\n return (\n xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth &&\n xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2\n );\n }),\n }));\n }
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAoC;AACpC,0BAA6B;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC5B,QAAI,yBAAW,gCAAY;AAC3B,aAAO,sBAAQ,MAAM;AACnB,QAAI,SAAS;AACX,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,eAAe,KAAK;AACxC,cAAI,gBAAgB,OAAW,QAAO;AACtC,iBACE,eAAe,sBAAsB,kBAAkB,KAAK,cAC5D,eAAe,sBAAsB,kBAAkB,KAAK,aAAa;AAAA,QAE7E,CAAC;AAAA,MACH,EAAE;AAAA,IACJ,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const useVirtualizedSeries = () => {\n const {\n containerRatio,\n innerWidth,\n xScrollbarPosition,\n yScale,\n getXScaleValue,\n getYScaleValue,\n innerHeight,\n currentData: data,\n props: { xScroll, yScroll },\n } = useContext(ChartContext);\n return useMemo(() => {\n if (xScroll) {\n return data.map((serie) => ({\n ...serie,\n data: serie.data.filter((datum) => {\n const xScaleValue = getXScaleValue(datum);\n if (xScaleValue === undefined) return false;\n return (\n xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth &&\n xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2\n );\n }),\n }));\n }\n if (yScroll) {\n return data.map((serie) => ({\n ...serie,\n data: serie.data.filter((datum) => {\n const yScaleValue = getYScaleValue(datum);\n const offset = yScale?.getBandwidth() ?? 20;\n if (yScaleValue === undefined) return false;\n return (\n yScaleValue > xScrollbarPosition * (containerRatio ?? 1) - offset &&\n yScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerHeight\n );\n }),\n }));\n }\n return data;\n }, [\n containerRatio,\n data,\n getXScaleValue,\n getYScaleValue,\n innerHeight,\n innerWidth,\n xScroll,\n xScrollbarPosition,\n yScale,\n yScroll,\n ]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAoC;AACpC,0BAA6B;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC5B,QAAI,yBAAW,gCAAY;AAC3B,aAAO,sBAAQ,MAAM;AACnB,QAAI,SAAS;AACX,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,eAAe,KAAK;AACxC,cAAI,gBAAgB,OAAW,QAAO;AACtC,iBACE,eAAe,sBAAsB,kBAAkB,KAAK,cAC5D,eAAe,sBAAsB,kBAAkB,KAAK,aAAa;AAAA,QAE7E,CAAC;AAAA,MACH,EAAE;AAAA,IACJ;AACA,QAAI,SAAS;AACX,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,eAAe,KAAK;AACxC,gBAAM,SAAS,QAAQ,aAAa,KAAK;AACzC,cAAI,gBAAgB,OAAW,QAAO;AACtC,iBACE,cAAc,sBAAsB,kBAAkB,KAAK,UAC3D,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC;AAAA,MACH,EAAE;AAAA,IACJ;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,25 +34,25 @@ module.exports = __toCommonJS(ChartContainer_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
-
var import_styles = require("../styles.js");
|
|
38
37
|
var import_ChartContext = require("../ChartContext.js");
|
|
39
38
|
var import_useKeyboardNavigation = require("../config/useKeyboardNavigation.js");
|
|
40
|
-
var
|
|
41
|
-
var import_Labels = require("./Labels/index.js");
|
|
42
|
-
var import_BlurMask = require("./Scroller/BlurMask.js");
|
|
43
|
-
var import_ClipPaths = require("./ClipPaths.js");
|
|
44
|
-
var import_ScrollableContainerX = require("./Scroller/ScrollableContainerX.js");
|
|
45
|
-
var import_ScrollableContainerY = require("./Scroller/ScrollableContainerY.js");
|
|
39
|
+
var import_styles = require("../styles.js");
|
|
46
40
|
var import_AxisBottom = require("./Axis/AxisBottom.js");
|
|
47
|
-
var import_AxisRight = require("./Axis/AxisRight.js");
|
|
48
41
|
var import_AxisLeft = require("./Axis/AxisLeft.js");
|
|
49
|
-
var
|
|
42
|
+
var import_AxisRight = require("./Axis/AxisRight.js");
|
|
43
|
+
var import_ClipPaths = require("./ClipPaths.js");
|
|
44
|
+
var import_Labels = require("./Labels/index.js");
|
|
45
|
+
var import_Legend = require("./Legend/Legend.js");
|
|
50
46
|
var import_Scrapper = require("./Scrapper/Scrapper.js");
|
|
51
47
|
var import_VerticalScrapper = require("./Scrapper/VerticalScrapper.js");
|
|
48
|
+
var import_BlurMask = require("./Scroller/BlurMask.js");
|
|
52
49
|
var import_Controllers = require("./Scroller/Controllers.js");
|
|
50
|
+
var import_ScrollableContainerX = require("./Scroller/ScrollableContainerX.js");
|
|
51
|
+
var import_ScrollableContainerY = require("./Scroller/ScrollableContainerY.js");
|
|
52
|
+
var import_SeriesFactory = require("./SeriesFactory.js");
|
|
53
53
|
const ChartContainer = () => {
|
|
54
54
|
const {
|
|
55
|
-
props: { y2Axis, yScroll, xScroll, scrapper,
|
|
55
|
+
props: { y2Axis, yScroll, xScroll, scrapper, width: userWidth },
|
|
56
56
|
activePoint,
|
|
57
57
|
internalMargin,
|
|
58
58
|
setScrapperPosY,
|
|
@@ -88,18 +88,18 @@ const ChartContainer = () => {
|
|
|
88
88
|
(e) => {
|
|
89
89
|
if (!isGrabbed) return;
|
|
90
90
|
e.preventDefault();
|
|
91
|
-
const clientX = e
|
|
92
|
-
const clientY = e
|
|
91
|
+
const { clientX } = e;
|
|
92
|
+
const { clientY } = e;
|
|
93
93
|
setActivePoint(null);
|
|
94
94
|
if (xScroll) {
|
|
95
|
-
const newPosition = lastScrollbarPosition
|
|
95
|
+
const newPosition = lastScrollbarPosition.current + clientX - startPosition;
|
|
96
96
|
if (newPosition < 0) setXScrollbarPosition(0);
|
|
97
97
|
else if (newPosition > innerWidth - innerWidth / containerRatio)
|
|
98
98
|
setXScrollbarPosition(innerWidth - innerWidth / containerRatio);
|
|
99
99
|
else setXScrollbarPosition(newPosition);
|
|
100
100
|
}
|
|
101
101
|
if (yScroll) {
|
|
102
|
-
const newPosition = lastScrollbarPosition
|
|
102
|
+
const newPosition = lastScrollbarPosition.current + clientY - startPosition;
|
|
103
103
|
if (newPosition < 0) setXScrollbarPosition(0);
|
|
104
104
|
else if (newPosition > innerHeight - innerHeight / containerRatio)
|
|
105
105
|
setXScrollbarPosition(innerHeight - innerHeight / containerRatio);
|
|
@@ -131,7 +131,8 @@ const ChartContainer = () => {
|
|
|
131
131
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
|
|
132
132
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerX.ScrollableContainerX, {})
|
|
133
133
|
] });
|
|
134
|
-
}
|
|
134
|
+
}
|
|
135
|
+
if (yScroll) {
|
|
135
136
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
136
137
|
y2Axis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}) : null,
|
|
137
138
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
|
|
@@ -146,7 +147,7 @@ const ChartContainer = () => {
|
|
|
146
147
|
scrapper?.type === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {}) : null,
|
|
147
148
|
scrapper?.type === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {}) : null
|
|
148
149
|
] });
|
|
149
|
-
}, [currentData.length, scrapper?.type,
|
|
150
|
+
}, [currentData.length, scrapper?.type, xScroll, y2Axis, yScroll]);
|
|
150
151
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
151
152
|
import_styles.StyledSVGWrapper,
|
|
152
153
|
{
|