@elliemae/ds-dataviz 3.14.4 → 3.14.6
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/ChartContext.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useChart.js +1 -1
- package/dist/cjs/graphs/Chart/config/useChart.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useGetters.js +4 -4
- package/dist/cjs/graphs/Chart/config/useGetters.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useInternalMargins.js +2 -2
- package/dist/cjs/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js +4 -4
- package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useScales.js +53 -37
- package/dist/cjs/graphs/Chart/config/useScales.js.map +2 -2
- package/dist/cjs/graphs/Chart/helpers/index.js +2 -2
- package/dist/cjs/graphs/Chart/helpers/index.js.map +2 -2
- package/dist/cjs/graphs/Chart/helpers/useUniqueData.js +5 -5
- package/dist/cjs/graphs/Chart/helpers/useUniqueData.js.map +2 -2
- package/dist/cjs/graphs/Chart/helpers/useVirtualizedSeries.js +4 -4
- package/dist/cjs/graphs/Chart/helpers/useVirtualizedSeries.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/Axis.js +47 -0
- package/dist/cjs/graphs/Chart/parts/Axis/Axis.js.map +7 -0
- package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js +88 -71
- package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js +88 -58
- package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js.map +3 -3
- package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js +91 -56
- package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js.map +3 -3
- package/dist/cjs/graphs/Chart/parts/{Labels/BottomLabel.js → Axis/GridLine.js} +7 -26
- package/dist/cjs/graphs/Chart/parts/Axis/GridLine.js.map +7 -0
- package/dist/cjs/graphs/Chart/parts/{Labels/LeftLabel.js → Axis/Tick.js} +12 -25
- package/dist/cjs/graphs/Chart/parts/Axis/Tick.js.map +7 -0
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js +2 -2
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Labels/Label.js +3 -18
- package/dist/cjs/graphs/Chart/parts/Labels/Label.js.map +3 -3
- package/dist/cjs/graphs/Chart/parts/Labels/index.js +102 -0
- package/dist/cjs/graphs/Chart/parts/Labels/index.js.map +7 -0
- package/dist/cjs/graphs/Chart/parts/Scrapper/Scrapper.js +5 -5
- package/dist/cjs/graphs/Chart/parts/Scrapper/Scrapper.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/ScrapperLine.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Scrapper/ScrapperLine.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js +3 -3
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js +5 -5
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/TrendHighlight.js +1 -1
- package/dist/cjs/graphs/Chart/parts/TrendHighlight.js.map +1 -1
- package/dist/cjs/graphs/Chart/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/graphs/Chart/scales/index.js +186 -0
- package/dist/cjs/graphs/Chart/scales/index.js.map +7 -0
- package/dist/cjs/graphs/Chart/series/Area.js +5 -5
- package/dist/cjs/graphs/Chart/series/Area.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Bars.js +7 -4
- package/dist/cjs/graphs/Chart/series/Bars.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/HorizontalBars.js +4 -4
- package/dist/cjs/graphs/Chart/series/HorizontalBars.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js +3 -3
- package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Line.js +2 -2
- package/dist/cjs/graphs/Chart/series/Line.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Points.js +2 -2
- package/dist/cjs/graphs/Chart/series/Points.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Rect.js +1 -1
- package/dist/cjs/graphs/Chart/series/Rect.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/StackedBar.js +3 -3
- package/dist/cjs/graphs/Chart/series/StackedBar.js.map +2 -2
- package/dist/cjs/graphs/Chart/styles.js +4 -26
- package/dist/cjs/graphs/Chart/styles.js.map +2 -2
- package/dist/esm/graphs/Chart/ChartContext.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useChart.js +1 -1
- package/dist/esm/graphs/Chart/config/useChart.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useGetters.js +4 -4
- package/dist/esm/graphs/Chart/config/useGetters.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useInternalMargins.js +2 -2
- package/dist/esm/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js +4 -4
- package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useScales.js +53 -37
- package/dist/esm/graphs/Chart/config/useScales.js.map +2 -2
- package/dist/esm/graphs/Chart/helpers/index.js +2 -2
- package/dist/esm/graphs/Chart/helpers/index.js.map +2 -2
- package/dist/esm/graphs/Chart/helpers/useUniqueData.js +5 -5
- package/dist/esm/graphs/Chart/helpers/useUniqueData.js.map +2 -2
- package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js +4 -4
- package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/Axis.js +21 -0
- package/dist/esm/graphs/Chart/parts/Axis/Axis.js.map +7 -0
- package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js +90 -73
- package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisLeft.js +89 -59
- package/dist/esm/graphs/Chart/parts/Axis/AxisLeft.js.map +3 -3
- package/dist/esm/graphs/Chart/parts/Axis/AxisRight.js +92 -57
- package/dist/esm/graphs/Chart/parts/Axis/AxisRight.js.map +3 -3
- package/dist/esm/graphs/Chart/parts/Axis/GridLine.js +8 -0
- package/dist/esm/graphs/Chart/parts/Axis/GridLine.js.map +7 -0
- package/dist/esm/graphs/Chart/parts/Axis/Tick.js +13 -0
- package/dist/esm/graphs/Chart/parts/Axis/Tick.js.map +7 -0
- package/dist/esm/graphs/Chart/parts/ChartContainer.js +2 -2
- package/dist/esm/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Labels/Label.js +4 -19
- package/dist/esm/graphs/Chart/parts/Labels/Label.js.map +3 -3
- package/dist/esm/graphs/Chart/parts/Labels/index.js +76 -0
- package/dist/esm/graphs/Chart/parts/Labels/index.js.map +7 -0
- package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js +5 -5
- package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js +1 -1
- package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js +3 -3
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js +1 -1
- package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js +5 -5
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/TrendHighlight.js +1 -1
- package/dist/esm/graphs/Chart/parts/TrendHighlight.js.map +1 -1
- package/dist/esm/graphs/Chart/react-desc-prop-types.js.map +2 -2
- package/dist/esm/graphs/Chart/scales/index.js +160 -0
- package/dist/esm/graphs/Chart/scales/index.js.map +7 -0
- package/dist/esm/graphs/Chart/series/Area.js +5 -5
- package/dist/esm/graphs/Chart/series/Area.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Bars.js +7 -4
- package/dist/esm/graphs/Chart/series/Bars.js.map +2 -2
- package/dist/esm/graphs/Chart/series/HorizontalBars.js +4 -4
- package/dist/esm/graphs/Chart/series/HorizontalBars.js.map +2 -2
- package/dist/esm/graphs/Chart/series/HorizontalStackedBars.js +3 -3
- package/dist/esm/graphs/Chart/series/HorizontalStackedBars.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Line.js +2 -2
- package/dist/esm/graphs/Chart/series/Line.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Points.js +2 -2
- package/dist/esm/graphs/Chart/series/Points.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Rect.js +1 -1
- package/dist/esm/graphs/Chart/series/Rect.js.map +2 -2
- package/dist/esm/graphs/Chart/series/StackedBar.js +3 -3
- package/dist/esm/graphs/Chart/series/StackedBar.js.map +2 -2
- package/dist/esm/graphs/Chart/styles.js +4 -26
- package/dist/esm/graphs/Chart/styles.js.map +2 -2
- package/dist/types/graphs/Chart/ChartContext.d.ts +12 -4
- package/dist/types/graphs/Chart/config/useChart.d.ts +6 -6
- package/dist/types/graphs/Chart/config/useGetters.d.ts +2 -2
- package/dist/types/graphs/Chart/config/useScales.d.ts +6 -5
- package/dist/types/graphs/Chart/parts/Axis/Axis.d.ts +26 -0
- package/dist/types/graphs/Chart/parts/Axis/AxisLeft.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Axis/AxisRight.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Axis/GridLine.d.ts +9 -0
- package/dist/types/graphs/Chart/parts/Axis/Tick.d.ts +15 -0
- package/dist/types/graphs/Chart/parts/Labels/Label.d.ts +10 -1
- package/dist/types/graphs/Chart/parts/Labels/index.d.ts +1 -0
- package/dist/types/graphs/Chart/react-desc-prop-types.d.ts +3 -2
- package/dist/types/graphs/Chart/scales/index.d.ts +53 -0
- package/dist/types/graphs/Chart/styles.d.ts +1 -2
- package/package.json +4 -4
- package/dist/cjs/graphs/Chart/parts/Labels/BottomLabel.js.map +0 -7
- package/dist/cjs/graphs/Chart/parts/Labels/LeftLabel.js.map +0 -7
- package/dist/cjs/graphs/Chart/parts/Labels/RightLabel.js +0 -56
- package/dist/cjs/graphs/Chart/parts/Labels/RightLabel.js.map +0 -7
- package/dist/esm/graphs/Chart/parts/Labels/BottomLabel.js +0 -27
- package/dist/esm/graphs/Chart/parts/Labels/BottomLabel.js.map +0 -7
- package/dist/esm/graphs/Chart/parts/Labels/LeftLabel.js +0 -26
- package/dist/esm/graphs/Chart/parts/Labels/LeftLabel.js.map +0 -7
- package/dist/esm/graphs/Chart/parts/Labels/RightLabel.js +0 -30
- package/dist/esm/graphs/Chart/parts/Labels/RightLabel.js.map +0 -7
- package/dist/types/graphs/Chart/parts/Labels/BottomLabel.d.ts +0 -1
- package/dist/types/graphs/Chart/parts/Labels/LeftLabel.d.ts +0 -1
- package/dist/types/graphs/Chart/parts/Labels/RightLabel.d.ts +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useInternalMargins.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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);\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);\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 || 10,\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,SAAS,WAAW,gBAAgB;AAC7C,OAAO,oBAAoB;AAkB3B,MAAM,oBAAoB,CACxB,KACA,EAAE,eAAe,GAAG,cAAc,EAAE,IAAI,EAAE,cAAc,GAAG,aAAa,EAAE,MACvE;AACH,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,eAAe,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,EACF,GAAG,CAAC,cAAc,aAAa,GAAG,CAAC;AACnC,SAAO,EAAE,OAAO,OAAO;AACzB;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,EAAE,QAAQ,cAAc,IAAI,kBAAkB,YAAY,EAAE,cAAc,GAAG,CAAC;AAGpF,QAAM,EAAE,OAAO,eAAe,IAAI,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 || 10,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -154,7 +154,7 @@ const useKeyboardNavigation = () => {
|
|
|
154
154
|
}
|
|
155
155
|
const { code } = e;
|
|
156
156
|
const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
|
|
157
|
-
if (isShiftKey && !isZooming && !xScale.
|
|
157
|
+
if (isShiftKey && !isZooming && !xScale.type === "BAND") {
|
|
158
158
|
setIsZooming(true);
|
|
159
159
|
setZoomStartingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);
|
|
160
160
|
}
|
|
@@ -168,14 +168,14 @@ const useKeyboardNavigation = () => {
|
|
|
168
168
|
navigateSerie,
|
|
169
169
|
setIsZooming,
|
|
170
170
|
setZoomStartingPosition,
|
|
171
|
-
xScale.
|
|
171
|
+
xScale.type === "BAND",
|
|
172
172
|
xScrollbarPosition,
|
|
173
173
|
yScale.bandwidth
|
|
174
174
|
]
|
|
175
175
|
);
|
|
176
176
|
const handleOnKeyUp = useCallback(
|
|
177
177
|
(e) => {
|
|
178
|
-
if (!isZooming && xScale.
|
|
178
|
+
if (!isZooming && xScale.type === "BAND")
|
|
179
179
|
return false;
|
|
180
180
|
const { shiftKey, code } = e;
|
|
181
181
|
const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
|
|
@@ -224,7 +224,7 @@ const useKeyboardNavigation = () => {
|
|
|
224
224
|
setMovingPosition,
|
|
225
225
|
setXScrollbarPosition,
|
|
226
226
|
setZoomStartingPosition,
|
|
227
|
-
xScale.
|
|
227
|
+
xScale.type === "BAND",
|
|
228
228
|
xScrollbarPosition,
|
|
229
229
|
zoomStartingPosition
|
|
230
230
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useKeyboardNavigation.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const findInCircularList = (\n list: string[],\n from: number,\n step = 1,\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]) return i;\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 lastPosition,\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 currentData: data,\n props: { xAxis, yAxis, xScroll, yScroll },\n } = useContext(ChartContext);\n\n const xScrollable = xAxis.advanced?.pointSpacing?.value > 1 || xScroll;\n const yScrollable = yAxis.advanced?.pointSpacing?.value > 1 || yScroll;\n\n const currentSerie = useMemo(\n () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n [activePoint?.serie, data],\n );\n\n const currentActiveItemIndex = useMemo(\n () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n [activePoint, currentSerie],\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 config = useMemo(\n // () => ({\n // onBlur: () => {\n // setActivePoint(null);\n // },\n // }),\n // [setActivePoint],\n // );\n // const handleOnBlur = useOnBlurOut(config);\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(\n currentSerie?.data.map((d) => d.value.toString()),\n currentActiveItemIndex,\n step,\n );\n setActivePoint(currentSerie?.data[newValue]);\n\n if (xScrollable) {\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 }\n if (yScrollable) {\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 currentSerie?.data,\n currentActiveItemIndex,\n setActivePoint,\n xScrollable,\n yScrollable,\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 nextSerie = data.find((d) => {\n const nextSerieIndex = findInCircularList(\n groups,\n groups.findIndex((item) => item === currentSerie.name),\n step,\n );\n\n return d.name === groups[nextSerieIndex];\n });\n setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);\n },\n [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\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.bandwidth) 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.bandwidth) 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 if (isShiftKey && !isZooming && !xScale.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,oBAAoB;AAEtB,MAAM,qBAAqB,CAChC,MACA,MACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK;AAAI,aAAO;AAAA,EACtB;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,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,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,OAAO,OAAO,SAAS,QAAQ;AAAA,EAC1C,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,cAAc,QAAQ,KAAK;AAC/D,QAAM,cAAc,MAAM,UAAU,cAAc,QAAQ,KAAK;AAE/D,QAAM,eAAe;AAAA,IACnB,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,aAAa,KAAK,KAAK,KAAK;AAAA,IAC9D,CAAC,aAAa,OAAO,IAAI;AAAA,EAC3B;AAEA,QAAM,yBAAyB;AAAA,IAC7B,MAAM,cAAc,KAAK,UAAU,CAAC,QAAQ,IAAI,QAAQ,aAAa,GAAG;AAAA,IACxE,CAAC,aAAa,YAAY;AAAA,EAC5B;AAEA,QAAM,gBAAyD;AAAA,IAC7D,CAAC,MAAM;AACL,UAAI,iBAAiB,EAAE,UAAU,gBAAgB,MAAM;AACrD,uBAAe,cAAc,KAAK,EAAE;AACpC,8BAAsB,CAAC;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,cAAc,cAAc,MAAM,gBAAgB,qBAAqB;AAAA,EACvF;AAYA,QAAM,eAA0D,YAAY,MAAM;AAChF,eAAW,MAAM;AACf,UAAI,CAAC,aAAa,SAAS,SAAS,aAAa,GAAG;AAClD,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,gBAAgB,YAAY,CAAC;AAEjC,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,WAAW;AAAA,QACf,cAAc,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AAAA,QAChD;AAAA,QACA;AAAA,MACF;AACA,qBAAe,cAAc,KAAK,SAAS;AAE3C,UAAI,aAAa;AACf,cAAM,SAAS,eAAe,cAAc,KAAK,SAAS;AAC1D,YAAI,WAAW;AAAW;AAC1B,cAAM,WAAW,aAAa;AAC9B,cAAM,QAAQ,aAAa;AAC3B,YAAI,SAAS,QAAQ;AAEnB,iCAAuB,QAAQ,cAAc,cAAc;AAAA,QAC7D,WAAW,SAAS,qBAAqB,iBAAiB;AAExD,gCAAsB,CAAC,SAAS;AAC9B,kBAAM,eAAe,QAAQ,SAAS,iBAAiB;AACvD,gBAAI,eAAe,WAAW;AAAY,qBAAO,aAAa;AAC9D,mBAAO;AAAA,UACT,CAAC;AAAA,iBAEM,SAAS,qBAAqB;AAAgB,gCAAsB,SAAS,cAAc;AAAA,MACtG;AACA,UAAI,aAAa;AACf,cAAM,SAAS,eAAe,cAAc,KAAK,SAAS;AAC1D,YAAI,WAAW;AAAW;AAC1B,cAAM,WAAW,cAAc;AAC/B,cAAM,QAAQ,cAAc;AAC5B,YAAI,SAAS,QAAQ;AAEnB,iCAAuB,QAAQ,eAAe,cAAc;AAAA,QAC9D,WAAW,SAAS,qBAAqB,iBAAiB;AAExD,gCAAsB,CAAC,SAAS;AAC9B,kBAAM,eAAe,QAAQ,SAAS,iBAAiB;AACvD,gBAAI,eAAe,WAAW;AAAa,qBAAO,cAAc;AAChE,mBAAO;AAAA,UACT,CAAC;AAAA,iBAEM,SAAS,qBAAqB;AAAgB,gCAAsB,SAAS,cAAc;AAAA,MACtG;AAAA,IACF;AAAA,IACA;AAAA,MACE,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,SAAiB;AAChB,YAAM,YAAY,KAAK,KAAK,CAAC,MAAM;AACjC,cAAM,iBAAiB;AAAA,UACrB;AAAA,UACA,OAAO,UAAU,CAAC,SAAS,SAAS,aAAa,IAAI;AAAA,UACrD;AAAA,QACF;AAEA,eAAO,EAAE,SAAS,OAAO;AAAA,MAC3B,CAAC;AACD,qBAAe,WAAW,KAAK,2BAA2B,WAAW,OAAO,MAAM,IAAI;AAAA,IACxF;AAAA,IACA,CAAC,MAAM,gBAAgB,wBAAwB,QAAQ,aAAa,IAAI;AAAA,EAC1E;AAEA,QAAM,iBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,UAAI,CAAC;AAAa;AAClB,UAAI,EAAE,SAAS,OAAO;AACpB,UAAE,eAAe;AAAA,MACnB;AACA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,YAAI,OAAO;AAAW,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA;AAC5D,wBAAc,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MACpD;AAEA,UAAI,CAAC,aAAa,SAAS,EAAE,SAAS,EAAE,IAAI,GAAG;AAC7C,YAAI,OAAO;AAAW,wBAAc,EAAE,SAAS,cAAc,IAAI,EAAE;AAAA;AAC9D,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAClD;AAEA,YAAM,EAAE,KAAK,IAAI;AACjB,YAAM,aAAa,CAAC,aAAa,YAAY,EAAE,SAAS,IAAI;AAE5D,UAAI,cAAc,CAAC,aAAa,CAAC,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const findInCircularList = (\n list: string[],\n from: number,\n step = 1,\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]) return i;\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 lastPosition,\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 currentData: data,\n props: { xAxis, yAxis, xScroll, yScroll },\n } = useContext(ChartContext);\n\n const xScrollable = xAxis.advanced?.pointSpacing?.value > 1 || xScroll;\n const yScrollable = yAxis.advanced?.pointSpacing?.value > 1 || yScroll;\n\n const currentSerie = useMemo(\n () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n [activePoint?.serie, data],\n );\n\n const currentActiveItemIndex = useMemo(\n () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n [activePoint, currentSerie],\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 config = useMemo(\n // () => ({\n // onBlur: () => {\n // setActivePoint(null);\n // },\n // }),\n // [setActivePoint],\n // );\n // const handleOnBlur = useOnBlurOut(config);\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(\n currentSerie?.data.map((d) => d.value.toString()),\n currentActiveItemIndex,\n step,\n );\n setActivePoint(currentSerie?.data[newValue]);\n\n if (xScrollable) {\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 }\n if (yScrollable) {\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 currentSerie?.data,\n currentActiveItemIndex,\n setActivePoint,\n xScrollable,\n yScrollable,\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 nextSerie = data.find((d) => {\n const nextSerieIndex = findInCircularList(\n groups,\n groups.findIndex((item) => item === currentSerie.name),\n step,\n );\n\n return d.name === groups[nextSerieIndex];\n });\n setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);\n },\n [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\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.bandwidth) 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.bandwidth) 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 if (isShiftKey && !isZooming && !xScale.type === 'BAND') {\n setIsZooming(true);\n setZoomStartingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);\n }\n },\n [\n activePoint,\n changeSerie,\n containerRatio,\n getXScaleValue,\n isZooming,\n navigateSerie,\n setIsZooming,\n setZoomStartingPosition,\n xScale.type === 'BAND',\n xScrollbarPosition,\n yScale.bandwidth,\n ],\n );\n\n const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (!isZooming && xScale.type === 'BAND') return false;\n const { shiftKey, code } = e;\n const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n if (shiftKey && ['ArrowRight', 'ArrowLeft'].includes(code)) {\n setMovingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);\n }\n if (isShiftKey) {\n setIsZooming(false);\n setZoomStartingPosition(0);\n setMovingPosition(0);\n const endingPosition = getXScaleValue(activePoint) - 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(\n currentSerie?.data.map((d) => d.value.toString()),\n currentActiveItemIndex,\n isRightDirection ? 1 : -1,\n );\n // we do this so the activePoint does not fall into the blur gradient\n const correctEndingPosition =\n getXScaleValue(currentSerie?.data[offsetActivePoint]) - 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 lastPosition?.current + (!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 lastPosition.current = newPosition;\n }\n },\n [\n activePoint,\n containerRatio,\n currentActiveItemIndex,\n currentSerie?.data,\n getXScaleValue,\n innerWidth,\n isZooming,\n lastPosition,\n setActivePoint,\n setContainerRatio,\n setIsZooming,\n setMovingPosition,\n setXScrollbarPosition,\n setZoomStartingPosition,\n xScale.type === 'BAND',\n xScrollbarPosition,\n zoomStartingPosition,\n ],\n );\n return useMemo(\n () => ({ handleOnKeyUp, onInputKeyDown, handleOnBlur, handleOnFocus }),\n [handleOnBlur, handleOnFocus, handleOnKeyUp, onInputKeyDown],\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,6 +4,7 @@ import { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } fr
|
|
|
4
4
|
import { getStackedIndex } from "../helpers";
|
|
5
5
|
import { COLOR_PALLET } from "../helpers/colorPallet";
|
|
6
6
|
import { TIME_OFFSET } from "../../constants";
|
|
7
|
+
import { BandScale, LinearScale, TimeLinearScale, LogScale } from "../scales";
|
|
7
8
|
const useScales = ({
|
|
8
9
|
props,
|
|
9
10
|
originalSeries: series,
|
|
@@ -15,8 +16,6 @@ const useScales = ({
|
|
|
15
16
|
}) => {
|
|
16
17
|
const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;
|
|
17
18
|
const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
|
|
18
|
-
const rangeToWidth = innerWidth * (xScroll ? containerRatio : 1);
|
|
19
|
-
const rangeToHeight = innerHeight * (yScroll ? containerRatio : 1);
|
|
20
19
|
const getBandDomain = useCallback(
|
|
21
20
|
(axis) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],
|
|
22
21
|
[series]
|
|
@@ -136,30 +135,52 @@ const useScales = ({
|
|
|
136
135
|
const getScaleBand = (domain, range, padding = 0.2) => scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);
|
|
137
136
|
const getScaleLinear = (domain, range) => scaleLinear().domain(domain).range(range);
|
|
138
137
|
const getScaleLog = (domain, range) => scaleLog().domain(domain).range(range);
|
|
139
|
-
const
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
const y2Scale = useMemo(() => {
|
|
155
|
-
if (!y2Axis)
|
|
138
|
+
const scaleFactory = useCallback(
|
|
139
|
+
(axis, axisProps, range) => {
|
|
140
|
+
if (!axisProps)
|
|
141
|
+
return null;
|
|
142
|
+
if (["time", "datetime"].includes(axisProps?.type)) {
|
|
143
|
+
return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);
|
|
144
|
+
}
|
|
145
|
+
if (axisProps?.type === "linear" || ["y", "y2"].includes(axis) && axisProps?.type === void 0) {
|
|
146
|
+
return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);
|
|
147
|
+
}
|
|
148
|
+
if (axisProps?.type === "log")
|
|
149
|
+
return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));
|
|
150
|
+
if (axisProps?.type === "band" || axis === "x" && axisProps?.type === void 0) {
|
|
151
|
+
return new BandScale(getScaleBand(getBandDomain(axisProps), range), axisProps);
|
|
152
|
+
}
|
|
156
153
|
return null;
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
154
|
+
},
|
|
155
|
+
[getBandDomain, getLinearDomain]
|
|
156
|
+
);
|
|
157
|
+
const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);
|
|
158
|
+
const xRangeTo = useMemo(
|
|
159
|
+
() => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),
|
|
160
|
+
[containerRatio, innerWidth, xAxis?.plotRange, xScroll]
|
|
161
|
+
);
|
|
162
|
+
const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);
|
|
163
|
+
const yRangeFrom = useMemo(
|
|
164
|
+
() => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),
|
|
165
|
+
[containerRatio, innerHeight, yAxis?.plotRange, yScroll]
|
|
166
|
+
);
|
|
167
|
+
const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);
|
|
168
|
+
const y2RangeFrom = useMemo(
|
|
169
|
+
() => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),
|
|
170
|
+
[containerRatio, innerHeight, y2Axis?.plotRange, yScroll]
|
|
171
|
+
);
|
|
172
|
+
const xScale = useMemo(
|
|
173
|
+
() => scaleFactory("x", xAxis, [xRangeFrom, xRangeTo]),
|
|
174
|
+
[scaleFactory, xAxis, xRangeFrom, xRangeTo]
|
|
175
|
+
);
|
|
176
|
+
const yScale = useMemo(
|
|
177
|
+
() => scaleFactory("y", yAxis, [yRangeFrom, yRangeTo]),
|
|
178
|
+
[scaleFactory, yAxis, yRangeFrom, yRangeTo]
|
|
179
|
+
);
|
|
180
|
+
const y2Scale = useMemo(
|
|
181
|
+
() => scaleFactory("y2", y2Axis, [y2RangeFrom, y2RangeTo]),
|
|
182
|
+
[scaleFactory, y2Axis, y2RangeFrom, y2RangeTo]
|
|
183
|
+
);
|
|
163
184
|
const colorScale = useMemo(
|
|
164
185
|
() => scaleOrdinal().domain(series.map((d) => d.name)).range(series.map((d) => COLOR_PALLET[d.color] ?? d.color)).unknown("red"),
|
|
165
186
|
[series]
|
|
@@ -176,31 +197,26 @@ const useScales = ({
|
|
|
176
197
|
}
|
|
177
198
|
return data;
|
|
178
199
|
}, [currentData, stackedSeries]);
|
|
179
|
-
const isXAxisCategorical = useMemo(
|
|
180
|
-
() => (xAxis.type === void 0 || xAxis.type === "band") && yAxis.type !== "band",
|
|
181
|
-
[xAxis.type, yAxis.type]
|
|
182
|
-
);
|
|
183
|
-
const isYAxisCategorical = useMemo(() => yAxis.type === "band", [yAxis.type]);
|
|
184
200
|
const getBandwidth = useCallback(() => {
|
|
185
|
-
if (
|
|
186
|
-
return xScale.
|
|
201
|
+
if (xScale?.type === "BAND") {
|
|
202
|
+
return xScale.getBandwidth();
|
|
187
203
|
}
|
|
188
|
-
if (
|
|
189
|
-
return yScale
|
|
204
|
+
if (yScale?.type === "BAND") {
|
|
205
|
+
return yScale?.getBandwidth();
|
|
190
206
|
}
|
|
191
207
|
const bar = currentData.filter((serie) => serie.type === "bar");
|
|
192
208
|
const barsLength = bar.length;
|
|
193
209
|
if (!barsLength)
|
|
194
210
|
return;
|
|
195
|
-
const divisor = Math.max(bar[0].data.length, xScale?.
|
|
211
|
+
const divisor = Math.max(bar[0].data.length, xScale?.getTicks(innerWidth).length, 1);
|
|
196
212
|
const width = innerWidth / divisor;
|
|
197
213
|
if (containerRatio > 1) {
|
|
198
214
|
return Math.max(0.5, width * containerRatio);
|
|
199
215
|
}
|
|
200
216
|
return Math.max(0.5, Math.trunc(width - width * 0.2));
|
|
201
|
-
}, [
|
|
217
|
+
}, [currentData, innerWidth, containerRatio, xScale, yScale]);
|
|
202
218
|
const subGroupScale = useMemo(
|
|
203
|
-
() => getBandwidth() ? scaleBand().domain(subgroupsWithBars).range([0, getBandwidth()
|
|
219
|
+
() => getBandwidth() ? scaleBand().domain(subgroupsWithBars).range([0, getBandwidth()]).paddingInner(0.55).padding(0.2).paddingOuter(0.01) : null,
|
|
204
220
|
[getBandwidth, subgroupsWithBars]
|
|
205
221
|
);
|
|
206
222
|
return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useScales.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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, ScaleBand } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex, getStackedData } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { TIME_OFFSET } from '../../constants';\ninterface UseScales {\n props: DSChartT.Props;\n innerHeight: number;\n innerWidth: number;\n stackedData: Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n currentData: DSChartT.InternalData;\n groups: string[];\n containerRatio: number;\n}\nexport const useScales = ({\n props,\n originalSeries: series,\n innerHeight,\n innerWidth,\n stackedData,\n currentData,\n containerRatio,\n}: UseScales) => {\n const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n const rangeToWidth = innerWidth * (xScroll ? containerRatio : 1);\n const rangeToHeight = innerHeight * (yScroll ? containerRatio : 1);\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\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\n const dataFlattened = data.flat();\n const stackedDataFlatten = stackedData.filter((data) => data.scale === 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\n const getMin = () => {\n const aux = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (types.includes(typeof minData)) aux.push(minData);\n if (typeof minStackedData === 'number') aux.push(minStackedData);\n return min(aux);\n };\n const getMax = () => {\n const aux = [];\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)) 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\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, stackedData],\n );\n\n const getTimeLinearDomain = 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\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\n const dataFlattened = data.flat();\n const minData = min(dataFlattened);\n const maxData = max(dataFlattened);\n const types = ['number', 'object'];\n\n const getMin = () => {\n const aux = [];\n aux.push(begin);\n if (types.includes(typeof minData)) aux.push(minData);\n return min(aux);\n };\n const getMax = () => {\n const aux = [];\n aux.push(begin);\n aux.push(end);\n if (types.includes(typeof maxData)) aux.push(maxData);\n return max(aux);\n };\n const minRange = getMin();\n const maxRange = getMax();\n\n const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\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],\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 xScale = useMemo(() => {\n if (xAxis?.type === 'time') return getScaleTime(getTimeLinearDomain(xAxis, 'x'), [0, rangeToWidth]);\n if (xAxis?.type === 'linear' || yAxis?.type === 'band') {\n return getScaleLinear(getLinearDomain(xAxis, 'x'), [0, rangeToWidth]);\n }\n\n return getScaleBand(getBandDomain(xAxis), [0, rangeToWidth]);\n }, [getBandDomain, getLinearDomain, getTimeLinearDomain, rangeToWidth, xAxis, yAxis?.type]);\n\n const yScale = useMemo(() => {\n if (yAxis?.type === 'band') return getScaleBand(getBandDomain(yAxis), [0, rangeToHeight]);\n if (yAxis?.type === 'log') return getScaleLog(getLinearDomain(yAxis, 'y'), [rangeToHeight, 0]);\n return getScaleLinear(getLinearDomain(yAxis, 'y'), [rangeToHeight, 0]);\n }, [getBandDomain, getLinearDomain, rangeToHeight, yAxis]);\n\n const y2Scale = useMemo(() => {\n if (!y2Axis) return null;\n if (y2Axis?.type === 'band') return getScaleBand(getBandDomain(y2Axis), [0, innerHeight]);\n if (y2Axis?.type === 'log') return getScaleLog(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n return getScaleLinear(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);\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 isXAxisCategorical = useMemo(\n () => (xAxis.type === undefined || xAxis.type === 'band') && yAxis.type !== 'band',\n [xAxis.type, yAxis.type],\n );\n const isYAxisCategorical = useMemo(() => yAxis.type === 'band', [yAxis.type]);\n const getBandwidth = useCallback(() => {\n if (isXAxisCategorical) {\n return (xScale as ScaleBand<string>).bandwidth();\n }\n if (isYAxisCategorical) {\n return (yScale as ScaleBand<string>).bandwidth();\n }\n // @todo explore this. is to create bars with a linear axis\n const bar = currentData.filter((serie) => serie.type === 'bar');\n const barsLength = bar.length;\n if (!barsLength) return;\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 const divisor = Math.max(bar[0].data.length, xScale?.ticks?.().length, 1);\n const width = innerWidth / divisor;\n if (containerRatio > 1) {\n return Math.max(0.5, width * containerRatio);\n }\n return Math.max(0.5, Math.trunc(width - width * 0.2));\n }, [isXAxisCategorical, isYAxisCategorical, currentData, innerWidth, containerRatio, xScale, yScale]);\n\n const subGroupScale = useMemo(\n () =>\n getBandwidth()\n ? scaleBand()\n .domain(subgroupsWithBars)\n .range([0, getBandwidth() ?? 0])\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,mBAAmB;AAErC,SAAS,KAAK,KAAK,aAAa,WAAW,UAAU,cAAc,gBAAgB;AAEnF,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { TIME_OFFSET } from '../../constants';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales';\ninterface UseScales {\n props: DSChartT.Props;\n innerHeight: number;\n innerWidth: number;\n stackedData: Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n currentData: DSChartT.InternalData;\n groups: string[];\n containerRatio: number;\n}\n\nexport const useScales = ({\n props,\n originalSeries: series,\n innerHeight,\n innerWidth,\n stackedData,\n currentData,\n containerRatio,\n}: UseScales) => {\n const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\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\n const dataFlattened = data.flat();\n const stackedDataFlatten = stackedData.filter((data) => data.scale === 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\n const getMin = () => {\n const aux = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (types.includes(typeof minData)) aux.push(minData);\n if (typeof minStackedData === 'number') aux.push(minStackedData);\n return min(aux);\n };\n const getMax = () => {\n const aux = [];\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)) 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, stackedData],\n );\n\n const getTimeLinearDomain = 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\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\n const dataFlattened = data.flat();\n const minData = min(dataFlattened);\n const maxData = max(dataFlattened);\n const types = ['number', 'object'];\n\n const getMin = () => {\n const aux = [];\n aux.push(begin);\n if (types.includes(typeof minData)) aux.push(minData);\n return min(aux);\n };\n const getMax = () => {\n const aux = [];\n aux.push(begin);\n aux.push(end);\n if (types.includes(typeof maxData)) aux.push(maxData);\n return max(aux);\n };\n const minRange = getMin();\n const maxRange = getMax();\n\n const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\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],\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), range), axisProps);\n }\n\n if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);\n }\n\n if (axisProps?.type === 'log') return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));\n\n if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n return new BandScale(getScaleBand(getBandDomain(axisProps), range), 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 bar = currentData.filter((serie) => serie.type === 'bar');\n const barsLength = bar.length;\n if (!barsLength) return;\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 const divisor = Math.max(bar[0].data.length, xScale?.getTicks(innerWidth).length, 1);\n const width = innerWidth / divisor;\n if (containerRatio > 1) {\n return Math.max(0.5, width * containerRatio);\n }\n return Math.max(0.5, Math.trunc(width - width * 0.2));\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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,mBAAmB;AAErC,SAAS,KAAK,KAAK,aAAa,WAAW,UAAU,cAAc,gBAAgB;AAEnF,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,WAAW,aAAa,iBAAiB,gBAAgB;AAgB3D,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,EAAE,OAAO,OAAO,QAAQ,QAAQ,eAAe,QAAQ,IAAI;AAGjE,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAyB,KAAK,QAAQ,CAAC,GAAG,OAAO,GAAG,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,IAAI,iBAAiB,CAAC,GAAG,CAAC;AAE7F,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAsB,eAAiC;AAGtD,YAAM,QAAQ,MAAM,cAAc,IAAI,KAAK,OAAO;AAClD,YAAM,MAAM,KAAK,OAAO;AACxB,YAAM,OAAO,YAEV,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc,eAAe,GAAG,EAClE;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI,EACtC,IAAI,CAAC,UAAU;AACd,cAAI,OAAO,MAAM,UAAU,UAAU;AACnC,mBAAO,MAAM;AAAA,UACf;AAEA,iBAAO,MAAM,MAAM,eAAe,OAAO,MAAM;AAAA,QACjD,CAAC;AAAA,MACL;AAEF,YAAM,gBAAgB,KAAK,KAAK;AAChC,YAAM,qBAAqB,YAAY,OAAO,CAACA,UAASA,MAAK,UAAU,UAAU,EAAE,KAAK;AACxF,YAAM,iBAAiB,IAAI,oBAAoB,CAAC,UAAU,IAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,iBAAiB,IAAI,oBAAoB,CAAC,UAAU,IAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,QAAQ,CAAC,UAAU,QAAQ;AAEjC,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU,YAAY,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC1E,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU,YAAY,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC1E,YAAI,OAAO,QAAQ,YAAY,OAAO,QAAQ;AAAU,cAAI,KAAK,GAAG;AACpE,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,WAAW,OAAO;AACxB,YAAM,WAAW,OAAO;AAExB,YAAM,CAAC,aAAa,YAAY,IAAI,WAAW,KAAK,aAAa;AAEjE,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAEhE,eAAO;AAAA,UACL,YAAY,WAAW,aAAa,eAAe;AAAA,UACnD,YAAY,WAAW,aAAa,gBAAgB;AAAA,QACtD;AAAA,MACF;AAEA,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,YAAI,KAAK,qBAAqB,YAAY,KAAK,oBAAoB;AACjE,iBAAO;AAAA,YACL,YAAY,KAAK,mBAAmB,OAAO,UAAU,CAAC,WAAW;AAAA,YACjE,YAAY,KAAK,mBAAmB,OAAO,UAAU,YAAY;AAAA,UACnE;AAAA,QACF;AACA,eAAO,CAAC,UAAU,QAAQ;AAAA,MAC5B;AAEA,aAAO,CAAC;AAAA,IACV;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAsB,eAAiC;AAItD,YAAM,QAAQ,MAAM,cAAc,IAAI,KAAK,OAAO;AAClD,YAAM,MAAM,KAAK,OAAO;AACxB,YAAM,OAAO,YAEV,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc,eAAe,GAAG,EAClE;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI,EACtC,IAAI,CAAC,UAAU;AACd,cAAI,OAAO,MAAM,UAAU,UAAU;AACnC,mBAAO,MAAM;AAAA,UACf;AAEA,iBAAO,MAAM,MAAM,eAAe,OAAO,MAAM;AAAA,QACjD,CAAC;AAAA,MACL;AAEF,YAAM,gBAAgB,KAAK,KAAK;AAChC,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,QAAQ,CAAC,UAAU,QAAQ;AAEjC,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,KAAK,KAAK;AACd,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,KAAK,KAAK;AACd,YAAI,KAAK,GAAG;AACZ,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,WAAW,OAAO;AACxB,YAAM,WAAW,OAAO;AAExB,YAAM,CAAC,aAAa,YAAY,IAAI,WAAW,KAAK,aAAa;AAGjE,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,YAAI,KAAK,qBAAqB,YAAY,KAAK,oBAAoB;AACjE,iBAAO;AAAA,YACL,YAAY,KAAK,mBAAmB,OAAO,UAAU,CAAC,WAAW;AAAA,YACjE,YAAY,KAAK,mBAAmB,OAAO,UAAU,YAAY;AAAA,UACnE;AAAA,QACF;AACA,eAAO,CAAC,UAAU,QAAQ;AAAA,MAC5B;AAEA,aAAO,CAAC;AAAA,IACV;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAGA,QAAM,eAAe,CAAC,QAAgB,UAAoB,SAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAE/F,QAAM,eAAe,CAAC,QAAkB,OAAiB,UAAU,QACjE,UAAU,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,aAAa,IAAI;AAC5E,QAAM,iBAAiB,CAAC,QAAkB,UAAoB,YAAY,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AACtG,QAAM,cAAc,CAAC,QAAkB,UAAoB,SAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAIhG,QAAM,eAAe;AAAA,IACnB,CAAC,MAAwB,WAA2B,UAAoB;AACtE,UAAI,CAAC;AAAW,eAAO;AACvB,UAAI,CAAC,QAAQ,UAAU,EAAE,SAAS,WAAW,IAAI,GAAG;AAClD,eAAO,IAAI,gBAAgB,aAAa,gBAAgB,WAAW,IAAI,GAAG,KAAK,GAAG,SAAS;AAAA,MAC7F;AAEA,UAAI,WAAW,SAAS,YAAa,CAAC,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,WAAW,SAAS,QAAY;AACjG,eAAO,IAAI,YAAY,eAAe,gBAAgB,WAAW,IAAI,GAAG,KAAK,GAAG,SAAS;AAAA,MAC3F;AAEA,UAAI,WAAW,SAAS;AAAO,eAAO,IAAI,SAAS,YAAY,gBAAgB,WAAW,IAAI,GAAG,KAAK,CAAC;AAEvG,UAAI,WAAW,SAAS,UAAW,SAAS,OAAO,WAAW,SAAS,QAAY;AACjF,eAAO,IAAI,UAAU,aAAa,cAAc,SAAS,GAAG,KAAK,GAAG,SAAS;AAAA,MAC/E;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,eAAe,eAAe;AAAA,EACjC;AAEA,QAAM,aAAa,QAAQ,MAAM,kBAAkB,OAAO,YAAY,MAAM,IAAI,CAAC,gBAAgB,OAAO,SAAS,CAAC;AAClH,QAAM,WAAW;AAAA,IACf,OAAO,cAAc,OAAO,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IAChF,CAAC,gBAAgB,YAAY,OAAO,WAAW,OAAO;AAAA,EACxD;AAEA,QAAM,WAAW,QAAQ,MAAM,OAAO,YAAY,MAAM,GAAG,CAAC,OAAO,SAAS,CAAC;AAC7E,QAAM,aAAa;AAAA,IACjB,OAAO,eAAe,OAAO,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IACjF,CAAC,gBAAgB,aAAa,OAAO,WAAW,OAAO;AAAA,EACzD;AAEA,QAAM,YAAY,QAAQ,MAAM,QAAQ,YAAY,MAAM,GAAG,CAAC,QAAQ,SAAS,CAAC;AAChF,QAAM,cAAc;AAAA,IAClB,OAAO,eAAe,QAAQ,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IAClF,CAAC,gBAAgB,aAAa,QAAQ,WAAW,OAAO;AAAA,EAC1D;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,aAAa,KAAK,OAAO,CAAC,YAAY,QAAQ,CAAC;AAAA,IACrD,CAAC,cAAc,OAAO,YAAY,QAAQ;AAAA,EAC5C;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,aAAa,KAAK,OAAO,CAAC,YAAY,QAAQ,CAAC;AAAA,IACrD,CAAC,cAAc,OAAO,YAAY,QAAQ;AAAA,EAC5C;AAEA,QAAM,UAAU;AAAA,IACd,MAAM,aAAa,MAAM,QAAQ,CAAC,aAAa,SAAS,CAAC;AAAA,IACzD,CAAC,cAAc,QAAQ,aAAa,SAAS;AAAA,EAC/C;AAEA,QAAM,aAAa;AAAA,IACjB,MACE,aAAa,EACV,OAAO,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAChC,MAAM,OAAO,IAAI,CAAC,MAAM,aAAa,EAAE,UAAuC,EAAE,KAAK,CAAC,EACtF,QAAQ,KAAK;AAAA,IAClB,CAAC,MAAM;AAAA,EACT;AAGA,QAAM,oBAAoB,QAAQ,MAAM;AACtC,UAAM,OAAO,YACV;AAAA,MACC,CAAC,UAAU,MAAM,SAAS,SAAS,EAAE,eAAe,UAAU,gBAAgB,eAAe,MAAM,IAAI,IAAI;AAAA,IAC7G,EACC,IAAI,CAAC,UAAU,MAAM,IAAI;AAE5B,QAAI,eAAe,QAAQ;AACzB,oBAAc,QAAQ,CAAC,cAAc,MAAM;AACzC,YAAI,aAAa,SAAS;AAAG,eAAK,KAAK,gBAAgB,GAAG;AAAA,MAC5D,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aAAO,OAAO,aAAa;AAAA,IAC7B;AACA,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aAAO,QAAQ,aAAa;AAAA,IAC9B;AAEA,UAAM,MAAM,YAAY,OAAO,CAAC,UAAU,MAAM,SAAS,KAAK;AAC9D,UAAM,aAAa,IAAI;AACvB,QAAI,CAAC;AAAY;AAGjB,UAAM,UAAU,KAAK,IAAI,IAAI,GAAG,KAAK,QAAQ,QAAQ,SAAS,UAAU,EAAE,QAAQ,CAAC;AACnF,UAAM,QAAQ,aAAa;AAC3B,QAAI,iBAAiB,GAAG;AACtB,aAAO,KAAK,IAAI,KAAK,QAAQ,cAAc;AAAA,IAC7C;AACA,WAAO,KAAK,IAAI,KAAK,KAAK,MAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,EACtD,GAAG,CAAC,aAAa,YAAY,gBAAgB,QAAQ,MAAM,CAAC;AAE5D,QAAM,gBAAgB;AAAA,IACpB,MACE,aAAa,IACT,UAAU,EACP,OAAO,iBAAiB,EACxB,MAAM,CAAC,GAAG,aAAa,CAAC,CAAC,EACzB,aAAa,IAAI,EACjB,QAAQ,GAAG,EACX,aAAa,IAAI,IACpB;AAAA,IACN,CAAC,cAAc,iBAAiB;AAAA,EAClC;AAEA,SAAO,EAAE,QAAQ,SAAS,QAAQ,eAAe,YAAY,aAAa;AAC5E;",
|
|
6
6
|
"names": ["data"]
|
|
7
7
|
}
|
|
@@ -51,9 +51,9 @@ const stackData = (groupsStacked, series) => {
|
|
|
51
51
|
return allSeriesStackedByGroups;
|
|
52
52
|
};
|
|
53
53
|
const getFormatGenerator = (type) => {
|
|
54
|
-
if (type === "
|
|
54
|
+
if (type === "DATETIME")
|
|
55
55
|
return timeFormat;
|
|
56
|
-
if (type === "
|
|
56
|
+
if (type === "LINEAR")
|
|
57
57
|
return format;
|
|
58
58
|
return null;
|
|
59
59
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { stack, timeFormat, stackOffsetDiverging, format, Series } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const getStackedIndex = (groups: string[][], serie: string) => {\n for (let i = 0; i < groups.length; i += 1) {\n for (let j = 0; j < groups[i].length; j += 1) {\n if (groups[i][j] === serie) return i;\n }\n }\n return -1;\n};\n\nexport const getStackedData = (stackedData, serie: DSChartT.SeriesT) => {\n for (let i = 0; i < stackedData?.length; i += 1) {\n const data = stackedData[i].find((d) => d.key === serie.name);\n if (data) return data;\n }\n return false;\n};\n\n// this function check if the series that are stacked share the same scale.\n// return the scale or false if they dont share it\n\n// si serie.scale === undefined ... la scala es Y\n\nconst checkSharedScale = (series: DSChartT.SeriesT[]) => {\n const scales = series\n .map((serie) => serie.scale ?? 'y')\n .filter((value, index, self) => self.indexOf(value) === index);\n if (scales.length > 1) {\n return false;\n }\n return scales[0];\n};\n\n// transform series grouped in stack into what d3 stack function need to read\nexport const stackData = (groupsStacked: string[][] | undefined, series: DSChartT.InternalData) => {\n const allSeriesStackedByGroups: DSChartT.StackedSeriesByGroupT = [];\n const scalesStackedDataMap: string[] = [];\n if (!groupsStacked) return [];\n groupsStacked?.forEach((g) => {\n const seriesFilteredByStackGroup = series.filter((serie) => g.includes(serie.name));\n const sharedScale = checkSharedScale(seriesFilteredByStackGroup);\n if (!sharedScale) return;\n scalesStackedDataMap.push(sharedScale);\n const keys = seriesFilteredByStackGroup.map((serie) => serie.name);\n const stackedData: Array<{ [serieName: string]: number }> = [];\n seriesFilteredByStackGroup.forEach((serie) => {\n serie.data.forEach((d, i) => {\n stackedData[d.position] = {\n ...stackedData[d.position],\n [serie.name]: typeof d.value === 'number' ? d.value : d.value?.y || 0,\n };\n });\n });\n allSeriesStackedByGroups.push(stack().offset(stackOffsetDiverging).keys(keys)(stackedData));\n });\n allSeriesStackedByGroups.forEach((g, i) => (g.scale = scalesStackedDataMap[i]));\n return allSeriesStackedByGroups;\n};\n\nexport const getFormatGenerator = (type: string) => {\n if (type === '
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,OAAO,YAAY,sBAAsB,cAAsB;AAGjE,MAAM,kBAAkB,CAAC,QAAoB,UAAkB;AACpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,GAAG,OAAO;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAAa,UAA4B;AACtE,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAOA,MAAM,mBAAmB,CAAC,WAA+B;AACvD,QAAM,SAAS,OACZ,IAAI,CAAC,UAAU,MAAM,SAAS,GAAG,EACjC,OAAO,CAAC,OAAO,OAAO,SAAS,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/D,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAGO,MAAM,YAAY,CAAC,eAAuC,WAAkC;AACjG,QAAM,2BAA2D,CAAC;AAClE,QAAM,uBAAiC,CAAC;AACxC,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO,OAAO,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,CAAC;AAClF,UAAM,cAAc,iBAAiB,0BAA0B;AAC/D,QAAI,CAAC;AAAa;AAClB,yBAAqB,KAAK,WAAW;AACrC,UAAM,OAAO,2BAA2B,IAAI,CAAC,UAAU,MAAM,IAAI;AACjE,UAAM,cAAsD,CAAC;AAC7D,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,oBAAY,EAAE,YAAY;AAAA,UACxB,GAAG,YAAY,EAAE;AAAA,UACjB,CAAC,MAAM,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK;AAAA,QACtE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,6BAAyB,KAAK,MAAM,EAAE,OAAO,oBAAoB,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC;AAAA,EAC5F,CAAC;AACD,2BAAyB,QAAQ,CAAC,GAAG,MAAO,EAAE,QAAQ,qBAAqB,EAAG;AAC9E,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,SAAiB;AAClD,MAAI,SAAS;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { stack, timeFormat, stackOffsetDiverging, format, Series } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const getStackedIndex = (groups: string[][], serie: string) => {\n for (let i = 0; i < groups.length; i += 1) {\n for (let j = 0; j < groups[i].length; j += 1) {\n if (groups[i][j] === serie) return i;\n }\n }\n return -1;\n};\n\nexport const getStackedData = (stackedData, serie: DSChartT.SeriesT) => {\n for (let i = 0; i < stackedData?.length; i += 1) {\n const data = stackedData[i].find((d) => d.key === serie.name);\n if (data) return data;\n }\n return false;\n};\n\n// this function check if the series that are stacked share the same scale.\n// return the scale or false if they dont share it\n\n// si serie.scale === undefined ... la scala es Y\n\nconst checkSharedScale = (series: DSChartT.SeriesT[]) => {\n const scales = series\n .map((serie) => serie.scale ?? 'y')\n .filter((value, index, self) => self.indexOf(value) === index);\n if (scales.length > 1) {\n return false;\n }\n return scales[0];\n};\n\n// transform series grouped in stack into what d3 stack function need to read\nexport const stackData = (groupsStacked: string[][] | undefined, series: DSChartT.InternalData) => {\n const allSeriesStackedByGroups: DSChartT.StackedSeriesByGroupT = [];\n const scalesStackedDataMap: string[] = [];\n if (!groupsStacked) return [];\n groupsStacked?.forEach((g) => {\n const seriesFilteredByStackGroup = series.filter((serie) => g.includes(serie.name));\n const sharedScale = checkSharedScale(seriesFilteredByStackGroup);\n if (!sharedScale) return;\n scalesStackedDataMap.push(sharedScale);\n const keys = seriesFilteredByStackGroup.map((serie) => serie.name);\n const stackedData: Array<{ [serieName: string]: number }> = [];\n seriesFilteredByStackGroup.forEach((serie) => {\n serie.data.forEach((d, i) => {\n stackedData[d.position] = {\n ...stackedData[d.position],\n [serie.name]: typeof d.value === 'number' ? d.value : d.value?.y || 0,\n };\n });\n });\n allSeriesStackedByGroups.push(stack().offset(stackOffsetDiverging).keys(keys)(stackedData));\n });\n allSeriesStackedByGroups.forEach((g, i) => (g.scale = scalesStackedDataMap[i]));\n return allSeriesStackedByGroups;\n};\n\nexport const getFormatGenerator = (type: string) => {\n if (type === 'DATETIME') return timeFormat;\n if (type === 'LINEAR') return format;\n return null;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,OAAO,YAAY,sBAAsB,cAAsB;AAGjE,MAAM,kBAAkB,CAAC,QAAoB,UAAkB;AACpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,GAAG,OAAO;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAAa,UAA4B;AACtE,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAOA,MAAM,mBAAmB,CAAC,WAA+B;AACvD,QAAM,SAAS,OACZ,IAAI,CAAC,UAAU,MAAM,SAAS,GAAG,EACjC,OAAO,CAAC,OAAO,OAAO,SAAS,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/D,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAGO,MAAM,YAAY,CAAC,eAAuC,WAAkC;AACjG,QAAM,2BAA2D,CAAC;AAClE,QAAM,uBAAiC,CAAC;AACxC,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO,OAAO,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,CAAC;AAClF,UAAM,cAAc,iBAAiB,0BAA0B;AAC/D,QAAI,CAAC;AAAa;AAClB,yBAAqB,KAAK,WAAW;AACrC,UAAM,OAAO,2BAA2B,IAAI,CAAC,UAAU,MAAM,IAAI;AACjE,UAAM,cAAsD,CAAC;AAC7D,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,oBAAY,EAAE,YAAY;AAAA,UACxB,GAAG,YAAY,EAAE;AAAA,UACjB,CAAC,MAAM,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK;AAAA,QACtE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,6BAAyB,KAAK,MAAM,EAAE,OAAO,oBAAoB,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC;AAAA,EAC5F,CAAC;AACD,2BAAyB,QAAQ,CAAC,GAAG,MAAO,EAAE,QAAQ,qBAAqB,EAAG;AAC9E,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,SAAiB;AAClD,MAAI,SAAS;AAAY,WAAO;AAChC,MAAI,SAAS;AAAU,WAAO;AAC9B,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,19 +22,19 @@ const useUniqueData = () => {
|
|
|
22
22
|
}
|
|
23
23
|
return 0;
|
|
24
24
|
}
|
|
25
|
-
const isBandAxis =
|
|
25
|
+
const isBandAxis = xScale.type === "BAND";
|
|
26
26
|
return useMemo(() => {
|
|
27
27
|
let valueToPositionPerSeries;
|
|
28
28
|
if (isBandAxis) {
|
|
29
29
|
valueToPositionPerSeries = data.map(
|
|
30
30
|
(serie) => serie.data.filter((datum) => {
|
|
31
|
-
const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
|
|
31
|
+
const xScaleValue = xScale.get(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
|
|
32
32
|
return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
|
|
33
33
|
}).map((datum) => {
|
|
34
34
|
const x = getXValue(datum);
|
|
35
35
|
const y = getYValue(datum);
|
|
36
36
|
return {
|
|
37
|
-
position: xScale(x),
|
|
37
|
+
position: xScale.get(x),
|
|
38
38
|
name: serie.name,
|
|
39
39
|
xValue: x,
|
|
40
40
|
yValue: y,
|
|
@@ -46,10 +46,10 @@ const useUniqueData = () => {
|
|
|
46
46
|
} else {
|
|
47
47
|
valueToPositionPerSeries = data.map(
|
|
48
48
|
(serie) => serie.data.filter((datum) => {
|
|
49
|
-
const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
|
|
49
|
+
const xScaleValue = xScale.get(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
|
|
50
50
|
return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
|
|
51
51
|
}).map((datum) => ({
|
|
52
|
-
position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),
|
|
52
|
+
position: xScale.get(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),
|
|
53
53
|
name: serie.name,
|
|
54
54
|
xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,
|
|
55
55
|
yValue: typeof datum.value === "number" ? datum.value : datum.value.y,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/useUniqueData.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const useUniqueData = () => {\n const {\n props: { xAxis },\n currentData: data,\n xScale,\n getBandwidth,\n xScrollbarPosition,\n containerRatio,\n innerWidth,\n getXValue,\n getYValue,\n } = useContext(ChartContext);\n\n function compare(a, b) {\n if (a.xPosition < b.xPosition) {\n return -1;\n }\n if (a.xPosition > b.xPosition) {\n return 1;\n }\n return 0;\n }\n\n const isBandAxis =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,YAAY,eAAe;AACpC,SAAS,oBAAoB;AAEtB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,WAAS,QAAQ,GAAG,GAAG;AACrB,QAAI,EAAE,YAAY,EAAE,WAAW;AAC7B,aAAO;AAAA,IACT;AACA,QAAI,EAAE,YAAY,EAAE,WAAW;AAC7B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const useUniqueData = () => {\n const {\n props: { xAxis },\n currentData: data,\n xScale,\n getBandwidth,\n xScrollbarPosition,\n containerRatio,\n innerWidth,\n getXValue,\n getYValue,\n } = useContext(ChartContext);\n\n function compare(a, b) {\n if (a.xPosition < b.xPosition) {\n return -1;\n }\n if (a.xPosition > b.xPosition) {\n return 1;\n }\n return 0;\n }\n\n const isBandAxis = xScale.type === 'BAND';\n return useMemo(() => {\n let valueToPositionPerSeries;\n if (isBandAxis) {\n valueToPositionPerSeries = data\n .map((serie) =>\n serie.data\n .filter((datum) => {\n const xScaleValue = xScale.get(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n return (\n xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n );\n })\n .map((datum) => {\n const x = getXValue(datum);\n const y = getYValue(datum);\n return {\n position: xScale.get(x),\n name: serie.name,\n xValue: x,\n yValue: y,\n key: datum.position,\n datum,\n };\n }),\n )\n .flat(1);\n } else {\n valueToPositionPerSeries = data\n .map((serie) =>\n serie.data\n .filter((datum) => {\n const xScaleValue = xScale.get(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n return (\n xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n );\n })\n .map((datum) => ({\n position: xScale.get(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),\n name: serie.name,\n xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,\n yValue: typeof datum.value === 'number' ? datum.value : datum.value.y,\n key: datum.position,\n datum,\n })),\n )\n .flat(1);\n }\n const postionUniqueData = {};\n\n // grouping points by xAxis position\n valueToPositionPerSeries.forEach((set) => {\n if (postionUniqueData[[set.position]]) {\n postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n } else {\n postionUniqueData[[set.position]] = [{ ...set }];\n }\n });\n\n const postionUniqueDataArray = Object.keys(postionUniqueData).map((key) => {\n const xPosition = parseFloat(key);\n const datum = postionUniqueData[key];\n\n return { xPosition, datum, xValue: datum[0].xValue };\n });\n\n if (isBandAxis) {\n return postionUniqueDataArray;\n }\n return postionUniqueDataArray.sort(compare).map((line, i, array) => {\n const prevPoint = parseFloat(array[i - 1]?.xPosition ?? 0);\n const postPoint = parseFloat(array[i + 1]?.xPosition ?? 0);\n const rectDetector = {\n left: (line.xPosition - prevPoint) / 2,\n right: Math.abs((postPoint === 0 ? 0 : postPoint - line.xPosition) / 2),\n };\n\n return { ...line, rectDetector };\n });\n }, [isBandAxis, data, xScale, xAxis.cols, xScrollbarPosition, containerRatio, innerWidth, getXValue, getYValue]);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,11 +18,11 @@ const useVirtualizedSeries = () => {
|
|
|
18
18
|
const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
|
|
19
19
|
return useMemo(() => {
|
|
20
20
|
if (xScroll) {
|
|
21
|
-
const offset = xScale.
|
|
21
|
+
const offset = xScale.getBandwidth() || 20;
|
|
22
22
|
return data.map((serie) => ({
|
|
23
23
|
...serie,
|
|
24
24
|
data: serie.data.filter((datum) => {
|
|
25
|
-
const xScaleValue = xScale(getXValue(datum));
|
|
25
|
+
const xScaleValue = xScale.get(getXValue(datum));
|
|
26
26
|
return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2;
|
|
27
27
|
})
|
|
28
28
|
}));
|
|
@@ -31,8 +31,8 @@ const useVirtualizedSeries = () => {
|
|
|
31
31
|
return data.map((serie) => ({
|
|
32
32
|
...serie,
|
|
33
33
|
data: serie.data.filter((datum) => {
|
|
34
|
-
const yScaleValue = yScale(getYValue(datum));
|
|
35
|
-
const offset = yScale.
|
|
34
|
+
const yScaleValue = yScale.get(getYValue(datum));
|
|
35
|
+
const offset = yScale.getBandwidth() ?? 20;
|
|
36
36
|
return yScaleValue > xScrollbarPosition * (containerRatio ?? 1) - offset && yScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerHeight;
|
|
37
37
|
})
|
|
38
38
|
}));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/useVirtualizedSeries.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const useVirtualizedSeries = () => {\n const {\n containerRatio,\n innerWidth,\n xScrollbarPosition,\n xScale,\n yScale,\n getYValue,\n getXValue,\n innerHeight,\n currentData: data,\n props: { xAxis, yAxis },\n } = useContext(ChartContext);\n\n // @TODO until we decide if we use this internal we know which axis this way\n\n const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n return useMemo(() => {\n if (xScroll) {\n const offset = xScale.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,YAAY,eAAe;AACpC,SAAS,oBAAoB;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,IAAI,WAAW,YAAY;AAI3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SAAO,QAAQ,MAAM;AACnB,QAAI,SAAS;AACX,YAAM,SAAS,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const useVirtualizedSeries = () => {\n const {\n containerRatio,\n innerWidth,\n xScrollbarPosition,\n xScale,\n yScale,\n getYValue,\n getXValue,\n innerHeight,\n currentData: data,\n props: { xAxis, yAxis },\n } = useContext(ChartContext);\n\n // @TODO until we decide if we use this internal we know which axis this way\n\n const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n return useMemo(() => {\n if (xScroll) {\n const offset = xScale.getBandwidth() || 20;\n return data.map((serie) => ({\n ...serie,\n data: serie.data.filter((datum) => {\n const xScaleValue = xScale.get(getXValue(datum));\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 = yScale.get(getYValue(datum));\n const offset = yScale.getBandwidth() ?? 20;\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 getXValue,\n getYValue,\n innerHeight,\n innerWidth,\n xScale,\n xScroll,\n xScrollbarPosition,\n yScale,\n yScroll,\n ]);\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,YAAY,eAAe;AACpC,SAAS,oBAAoB;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,IAAI,WAAW,YAAY;AAI3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SAAO,QAAQ,MAAM;AACnB,QAAI,SAAS;AACX,YAAM,SAAS,OAAO,aAAa,KAAK;AACxC,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,OAAO,IAAI,UAAU,KAAK,CAAC;AAC/C,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,OAAO,IAAI,UAAU,KAAK,CAAC;AAC/C,gBAAM,SAAS,OAAO,aAAa,KAAK;AACxC,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,IACA;AAAA,EACF,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React2 from "react";
|
|
4
|
+
import { StyledAxis } from "../../styles";
|
|
5
|
+
const Axis = React2.memo((props) => {
|
|
6
|
+
const { dimension, color, GridRenderer, TickRenderer, lineCoords, scale, innerRef } = props;
|
|
7
|
+
const ticks = scale.getTicks(dimension);
|
|
8
|
+
const ticksScaled = scale?.getTicksScaled(dimension);
|
|
9
|
+
const { x1, x2, y1, y2 } = lineCoords;
|
|
10
|
+
return /* @__PURE__ */ jsxs("g", { className: "axis", children: [
|
|
11
|
+
/* @__PURE__ */ jsxs("g", { ref: innerRef, children: [
|
|
12
|
+
/* @__PURE__ */ jsx(StyledAxis, { className: "domain", x1, x2, y1, y2, axisColor: color }),
|
|
13
|
+
/* @__PURE__ */ jsx("g", { className: "ticks", children: ticks.map((t, i) => /* @__PURE__ */ jsx(TickRenderer, { position: ticksScaled[i], tickValue: t }, ticksScaled[i])) })
|
|
14
|
+
] }),
|
|
15
|
+
/* @__PURE__ */ jsx("g", { className: "grid", children: ticks.map((t, i) => /* @__PURE__ */ jsx(GridRenderer, { position: ticksScaled[i], tickValue: t }, ticksScaled[i])) })
|
|
16
|
+
] });
|
|
17
|
+
});
|
|
18
|
+
export {
|
|
19
|
+
Axis
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=Axis.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/Axis.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { ScaleT } from '../../scales';\nimport { StyledAxis } from '../../styles';\nexport interface TickRenderPropsT {\n position: number;\n tickValue: string | number | Date;\n}\nexport interface GridRenderPropsT {\n position: number;\n tickValue?: string | number | Date;\n}\n\ninterface AxisT<S extends ScaleT> {\n lineCoords: {\n x1: number;\n x2: number;\n y1: number;\n y2: number;\n };\n innerRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n scale: S;\n dimension: number;\n TickRenderer: (props: TickRenderPropsT) => JSX.Element;\n GridRenderer: (props: GridRenderPropsT) => JSX.Element | null;\n color: string;\n}\n\nexport const Axis = React.memo(<S extends ScaleT>(props: AxisT<S>) => {\n const { dimension, color, GridRenderer, TickRenderer, lineCoords, scale, innerRef } = props;\n\n const ticks = scale.getTicks(dimension);\n\n const ticksScaled = scale?.getTicksScaled(dimension);\n\n const { x1, x2, y1, y2 } = lineCoords;\n\n return (\n <g className=\"axis\">\n <g ref={innerRef}>\n <StyledAxis className=\"domain\" x1={x1} x2={x2} y1={y1} y2={y2} axisColor={color} />\n <g className=\"ticks\">\n {ticks.map((t, i) => (\n <TickRenderer key={ticksScaled[i]} position={ticksScaled[i]} tickValue={t} />\n ))}\n </g>\n </g>\n <g className=\"grid\">\n {ticks.map((t, i) => (\n <GridRenderer key={ticksScaled[i]} position={ticksScaled[i]} tickValue={t} />\n ))}\n </g>\n </g>\n );\n});\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsCjB,SACE,KADF;AAtCN,OAAOA,YAAW;AAElB,SAAS,kBAAkB;AAyBpB,MAAM,OAAOA,OAAM,KAAK,CAAmB,UAAoB;AACpE,QAAM,EAAE,WAAW,OAAO,cAAc,cAAc,YAAY,OAAO,SAAS,IAAI;AAEtF,QAAM,QAAQ,MAAM,SAAS,SAAS;AAEtC,QAAM,cAAc,OAAO,eAAe,SAAS;AAEnD,QAAM,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI;AAE3B,SACE,qBAAC,OAAE,WAAU,QACX;AAAA,yBAAC,OAAE,KAAK,UACN;AAAA,0BAAC,cAAW,WAAU,UAAS,IAAQ,IAAQ,IAAQ,IAAQ,WAAW,OAAO;AAAA,MACjF,oBAAC,OAAE,WAAU,SACV,gBAAM,IAAI,CAAC,GAAG,MACb,oBAAC,gBAAkC,UAAU,YAAY,IAAI,WAAW,KAArD,YAAY,EAA4C,CAC5E,GACH;AAAA,OACF;AAAA,IACA,oBAAC,OAAE,WAAU,QACV,gBAAM,IAAI,CAAC,GAAG,MACb,oBAAC,gBAAkC,UAAU,YAAY,IAAI,WAAW,KAArD,YAAY,EAA4C,CAC5E,GACH;AAAA,KACF;AAEJ,CAAC;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|