@elliemae/ds-dataviz 3.11.1-rc.1 → 3.11.2
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/config/useInternalMargins.js +2 -8
- package/dist/cjs/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js +1 -2
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Labels/BottomLabel.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Labels/BottomLabel.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Legend/BottomLegend.js +15 -8
- package/dist/cjs/graphs/Chart/parts/Legend/BottomLegend.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useInternalMargins.js +2 -8
- package/dist/esm/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/ChartContainer.js +1 -2
- package/dist/esm/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Labels/BottomLabel.js +1 -1
- package/dist/esm/graphs/Chart/parts/Labels/BottomLabel.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js +16 -9
- package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js.map +2 -2
- package/package.json +8 -8
|
@@ -43,15 +43,9 @@ const useInternalMargins = ({
|
|
|
43
43
|
toolbarRef
|
|
44
44
|
}) => {
|
|
45
45
|
const axisLeftWidth = (0, import_react.useMemo)(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);
|
|
46
|
-
const axisBottomHeight = (0, import_react.useMemo)(
|
|
47
|
-
() => axisBottomRef?.getBoundingClientRect()?.height ? axisBottomRef?.getBoundingClientRect()?.height + 20 : 0,
|
|
48
|
-
[axisBottomRef]
|
|
49
|
-
);
|
|
46
|
+
const axisBottomHeight = (0, import_react.useMemo)(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);
|
|
50
47
|
const axisRightWidth = (0, import_react.useMemo)(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);
|
|
51
|
-
const bottomLabelHeight = (0, import_react.useMemo)(
|
|
52
|
-
() => bottomLabel?.getBoundingClientRect()?.height ? bottomLabel?.getBoundingClientRect()?.height + 10 : 0,
|
|
53
|
-
[bottomLabel]
|
|
54
|
-
);
|
|
48
|
+
const bottomLabelHeight = (0, import_react.useMemo)(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);
|
|
55
49
|
const rightLabelWidth = (0, import_react.useMemo)(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);
|
|
56
50
|
const leftLabelWidth = (0, import_react.useMemo)(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);
|
|
57
51
|
const topLegendHeight = (0, import_react.useMemo)(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useInternalMargins.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\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}\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 // Axis\n const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n const axisBottomHeight = useMemo(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwB;AAejB,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,oBAAgB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,uBAAmB
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\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}\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 // Axis\n const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);\n const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n // Labels\n const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);\n const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n // Legends\n const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n\n const toolbarHeight = useMemo(() => toolbarRef?.getBoundingClientRect()?.height || 0, [toolbarRef]);\n\n const internalMargin = useMemo(\n () => ({\n bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n top: 10 + topLegendHeight + toolbarHeight,\n right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\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 leftLegendWidth,\n axisBottomHeight,\n bottomLegendHeight,\n bottomLabelHeight,\n topLegendHeight,\n rightLabelWidth,\n axisRightWidth,\n rightLegendWidth,\n axisLeftWidth,\n leftLabelWidth,\n toolbarHeight,\n }),\n [\n axisBottomHeight,\n toolbarHeight,\n axisLeftWidth,\n axisRightWidth,\n bottomLabelHeight,\n bottomLegendHeight,\n internalMargin,\n leftLabelWidth,\n leftLegendWidth,\n rightLabelWidth,\n rightLegendWidth,\n topLegendHeight,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwB;AAejB,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,oBAAgB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,uBAAmB,sBAAQ,MAAM,eAAe,sBAAsB,GAAG,UAAU,GAAG,CAAC,aAAa,CAAC;AAC3G,QAAM,qBAAiB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,wBAAoB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,UAAU,GAAG,CAAC,WAAW,CAAC;AACxG,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,qBAAiB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,sBAAkB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,yBAAqB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,uBAAmB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,oBAAgB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,UAAU,GAAG,CAAC,UAAU,CAAC;AAElG,QAAM,qBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK,kBAAkB;AAAA,MAC5B,OAAO,KAAK,kBAAkB,iBAAiB;AAAA,MAC/C,MAAM,KAAK,gBAAgB,iBAAiB;AAAA,IAC9C;AAAA,IAEA;AAAA,MACE;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,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -124,7 +124,7 @@ const ChartContainer = () => {
|
|
|
124
124
|
setIsGrabbed(false);
|
|
125
125
|
}, [lastPosition, setIsGrabbed, xScrollbarPosition]);
|
|
126
126
|
const key = (0, import_react.useMemo)(
|
|
127
|
-
() =>
|
|
127
|
+
() => `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,
|
|
128
128
|
[internalMargin, width]
|
|
129
129
|
);
|
|
130
130
|
if (currentData.length === 0)
|
|
@@ -171,7 +171,6 @@ const ChartContainer = () => {
|
|
|
171
171
|
onMouseUp: handleMouseUp,
|
|
172
172
|
onMouseDown: (e) => e.preventDefault(),
|
|
173
173
|
isGrabbed,
|
|
174
|
-
style: { width, height },
|
|
175
174
|
children: width !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
|
|
176
175
|
ref: svgRef,
|
|
177
176
|
width,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/parts/ChartContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: { yAxis, xScroll, scrapper, xAxis },\n containerRef,\n activePoint,\n internalMargin,\n setScrapperPosY,\n setScrapperPosX,\n setContainerRef,\n svgRef,\n isGrabbed,\n setIsGrabbed,\n startPosition,\n innerWidth,\n innerHeight,\n setActivePoint,\n setXScrollbarPosition,\n xScrollbarPosition,\n containerRatio,\n lastPosition,\n setIsScrollbarVisible,\n width,\n height,\n currentData,\n } = useContext(ChartContext);\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n const onMouseEnterHandler = useCallback(() => {\n setIsScrollbarVisible(true);\n }, [setIsScrollbarVisible]);\n const onMouseLeaveHandler = useCallback(() => {\n setScrapperPosY('');\n setScrapperPosX('');\n setIsScrollbarVisible(false);\n setIsGrabbed(false);\n }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n const handleMouseMove: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed) return;\n setActivePoint(null);\n if (xScroll) {\n const newPosition = lastPosition?.current + e.clientX - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerWidth - innerWidth / containerRatio)\n setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n if (yScroll) {\n const newPosition = lastPosition?.current + e.clientY - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerHeight - innerHeight / containerRatio)\n setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n },\n [\n isGrabbed,\n setActivePoint,\n xScroll,\n yScroll,\n lastPosition,\n startPosition,\n setXScrollbarPosition,\n innerWidth,\n containerRatio,\n innerHeight,\n ],\n );\n const handleMouseUp = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n const key = useMemo(\n ()
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAmE;AACnE,oBAAiC;AAEjC,0BAA6B;AAC7B,mCAAsC;AACtC,oBAAuB;AACvB,mBAAsB;AACtB,sBAAyB;AACzB,uBAA0B;AAC1B,kCAAqC;AACrC,kCAAqC;AAErC,wBAA2B;AAC3B,uBAA0B;AAC1B,sBAAyB;AACzB,2BAA8B;AAC9B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AACrB,MAAM,iBAAiB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS,UAAU,MAAM;AAAA,IACzC;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,EACF,QAAI,yBAAW,gCAAY;AAG3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI,CAAC;AAAW;AAChB,qBAAe,IAAI;AACnB,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,aAAa,aAAa;AAC/C,gCAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,gCAAsB,WAAW;AAAA,MACxC;AACA,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,cAAc,cAAc;AACjD,gCAAsB,cAAc,cAAc,cAAc;AAAA;AAC7D,gCAAsB,WAAW;AAAA,MACxC;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,iBAAa,UAAU;AACvB,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,cAAc,kBAAkB,CAAC;AAEnD,QAAM,UAAM;AAAA,IACV,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: { yAxis, xScroll, scrapper, xAxis },\n containerRef,\n activePoint,\n internalMargin,\n setScrapperPosY,\n setScrapperPosX,\n setContainerRef,\n svgRef,\n isGrabbed,\n setIsGrabbed,\n startPosition,\n innerWidth,\n innerHeight,\n setActivePoint,\n setXScrollbarPosition,\n xScrollbarPosition,\n containerRatio,\n lastPosition,\n setIsScrollbarVisible,\n width,\n height,\n currentData,\n } = useContext(ChartContext);\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n const onMouseEnterHandler = useCallback(() => {\n setIsScrollbarVisible(true);\n }, [setIsScrollbarVisible]);\n const onMouseLeaveHandler = useCallback(() => {\n setScrapperPosY('');\n setScrapperPosX('');\n setIsScrollbarVisible(false);\n setIsGrabbed(false);\n }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n const handleMouseMove: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed) return;\n setActivePoint(null);\n if (xScroll) {\n const newPosition = lastPosition?.current + e.clientX - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerWidth - innerWidth / containerRatio)\n setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n if (yScroll) {\n const newPosition = lastPosition?.current + e.clientY - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerHeight - innerHeight / containerRatio)\n setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n },\n [\n isGrabbed,\n setActivePoint,\n xScroll,\n yScroll,\n lastPosition,\n startPosition,\n setXScrollbarPosition,\n innerWidth,\n containerRatio,\n innerHeight,\n ],\n );\n const handleMouseUp = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n const key = useMemo(\n () =>\n `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,\n [internalMargin, width],\n );\n\n if (currentData.length === 0) return null;\n\n const render = useMemo(() => {\n if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n return (\n <>\n <AxisRight />\n <AxisLeft />\n <ScrollableContainerX />\n </>\n );\n }\n if (yScroll) {\n return (\n <>\n <AxisBottom />\n <ScrollableContainerY />\n </>\n );\n }\n return (\n <>\n <AxisRight />\n <AxisLeft />\n <AxisBottom />\n <SeriesFactory />\n {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n </>\n );\n }, [scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, yScroll]);\n return (\n <StyledSVGWrapper\n ref={setContainerRef}\n onKeyDown={onInputKeyDown}\n aria-hidden=\"true\"\n tabIndex={activePoint ? -1 : 0}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n onMouseMove={handleMouseMove}\n onMouseUp={handleMouseUp}\n onMouseDown={(e) => e.preventDefault()}\n isGrabbed={isGrabbed}\n >\n {width !== 0 ? (\n <svg ref={svgRef} width={width} height={height}>\n <ClipPaths />\n <BlurMask />\n <g key={key}>\n <g>\n <Controllers />\n <Legend />\n <Label />\n </g>\n <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n {render}\n {/* <ActivePoint/> @todo */}\n </g>\n </g>\n {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n </svg>\n ) : null}\n </StyledSVGWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,7 +43,7 @@ const BottomLabel = () => {
|
|
|
43
43
|
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
44
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
|
|
45
45
|
ref: setBottomLabel,
|
|
46
|
-
transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top})`,
|
|
46
|
+
transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top + 20})`,
|
|
47
47
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, {
|
|
48
48
|
className: "axis-label",
|
|
49
49
|
textAnchor: "middle",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Labels/BottomLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n const {\n internalMargin,\n setBottomLabel,\n innerHeight,\n innerWidth,\n axisBottomHeight,\n props: { xAxis },\n } = useContext(ChartContext);\n\n return (\n <g\n ref={setBottomLabel}\n transform={`translate(${innerWidth / 2 + internalMargin.left},${\n innerHeight + axisBottomHeight + internalMargin.top\n })`}\n >\n <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n {xAxis?.label}\n </StyledAxisLabel>\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QACtD,cAAc,mBAAmB,eAAe;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n const {\n internalMargin,\n setBottomLabel,\n innerHeight,\n innerWidth,\n axisBottomHeight,\n props: { xAxis },\n } = useContext(ChartContext);\n\n return (\n <g\n ref={setBottomLabel}\n transform={`translate(${innerWidth / 2 + internalMargin.left},${\n innerHeight + axisBottomHeight + internalMargin.top + 20\n })`}\n >\n <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n {xAxis?.label}\n </StyledAxisLabel>\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QACtD,cAAc,mBAAmB,eAAe,MAAM;AAAA,IAGxD,sDAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAChD,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,7 +39,7 @@ const BottomLegend = () => {
|
|
|
39
39
|
const firstRender = (0, import_react.useRef)(true);
|
|
40
40
|
const [xTransform, setXTransform] = (0, import_react.useState)(innerWidth / 2);
|
|
41
41
|
(0, import_react.useLayoutEffect)(() => {
|
|
42
|
-
if (ref.current) {
|
|
42
|
+
if (ref.current && firstRender.current) {
|
|
43
43
|
const cells = (0, import_d3.select)(ref.current).selectAll(".cell");
|
|
44
44
|
const padding = 30;
|
|
45
45
|
let offset = 0;
|
|
@@ -66,23 +66,30 @@ const BottomLegend = () => {
|
|
|
66
66
|
const margin = (0, import_react.useMemo)(() => {
|
|
67
67
|
let counter = 0;
|
|
68
68
|
if (bottomLabelHeight > 0) {
|
|
69
|
-
counter += bottomLabelHeight;
|
|
69
|
+
counter += bottomLabelHeight + 20;
|
|
70
70
|
}
|
|
71
71
|
if (axisBottomHeight > 0) {
|
|
72
|
-
counter += axisBottomHeight;
|
|
72
|
+
counter += axisBottomHeight + 15;
|
|
73
73
|
}
|
|
74
74
|
return counter;
|
|
75
|
-
}, [
|
|
75
|
+
}, [bottomLabelHeight, axisBottomHeight]);
|
|
76
76
|
return (0, import_react.useMemo)(
|
|
77
77
|
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
|
|
78
78
|
ref: setBottomLegend,
|
|
79
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.
|
|
79
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
|
|
80
80
|
ref,
|
|
81
81
|
transform: `translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`,
|
|
82
82
|
className: "bottom-legend",
|
|
83
|
-
children:
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
|
|
85
|
+
height: 30,
|
|
86
|
+
width: 1,
|
|
87
|
+
fill: "transparent"
|
|
88
|
+
}),
|
|
89
|
+
colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
|
|
90
|
+
domainValue
|
|
91
|
+
}, domainValue))
|
|
92
|
+
]
|
|
86
93
|
})
|
|
87
94
|
}),
|
|
88
95
|
[colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Legend/BottomLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n useContext(ChartContext);\n\n const ref = useRef<SVGGElement>(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2);\n useLayoutEffect(() => {\n if (ref.current) {\n const cells = select(ref.current).selectAll('.cell');\n const padding = 30;\n let offset = 0;\n let verticalOffset = 0;\n\n cells.each((d, i) => {\n if (cells._groups[0][i - 1]) {\n const lastCell = select(cells._groups[0][i - 1]);\n const d3sel = select(cells._groups[0][i]);\n\n const { width } = lastCell.node().getBBox();\n if (offset + width + padding > innerWidth - innerWidth / 3) {\n offset = 0;\n verticalOffset += 20;\n } else {\n offset += width + padding;\n }\n\n d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n }\n });\n const bounds = ref.current.getBoundingClientRect();\n setXTransform((prev) => prev - bounds.width / 2);\n firstRender.current = false;\n }\n }, [innerWidth]);\n\n const margin = useMemo(() => {\n let counter = 0;\n if (bottomLabelHeight > 0) {\n counter += bottomLabelHeight;\n }\n if (axisBottomHeight > 0) {\n counter += axisBottomHeight;\n }\n return counter;\n }, [
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8E;AAC9E,gBAAuB;AACvB,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,QAChH,yBAAW,gCAAY;AAEzB,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,CAAC;AAC3D,oCAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n useContext(ChartContext);\n\n const ref = useRef<SVGGElement>(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2);\n useLayoutEffect(() => {\n if (ref.current && firstRender.current) {\n const cells = select(ref.current).selectAll('.cell');\n const padding = 30;\n let offset = 0;\n let verticalOffset = 0;\n\n cells.each((d, i) => {\n if (cells._groups[0][i - 1]) {\n const lastCell = select(cells._groups[0][i - 1]);\n const d3sel = select(cells._groups[0][i]);\n\n const { width } = lastCell.node().getBBox();\n if (offset + width + padding > innerWidth - innerWidth / 3) {\n offset = 0;\n verticalOffset += 20;\n } else {\n offset += width + padding;\n }\n\n d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n }\n });\n const bounds = ref.current.getBoundingClientRect();\n setXTransform((prev) => prev - bounds.width / 2);\n firstRender.current = false;\n }\n }, [innerWidth]);\n\n const margin = useMemo(() => {\n let counter = 0;\n if (bottomLabelHeight > 0) {\n counter += bottomLabelHeight + 20;\n }\n if (axisBottomHeight > 0) {\n counter += axisBottomHeight + 15;\n }\n return counter;\n }, [bottomLabelHeight, axisBottomHeight]);\n\n return useMemo(\n () => (\n <g ref={setBottomLegend}>\n <g\n ref={ref}\n transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n className=\"bottom-legend\"\n >\n <rect height={30} width={1} fill=\"transparent\" />\n {colorScale.domain().map((domainValue, i) => (\n <LegendItem domainValue={domainValue} key={domainValue} />\n ))}\n </g>\n </g>\n ),\n\n [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8E;AAC9E,gBAAuB;AACvB,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,QAChH,yBAAW,gCAAY;AAEzB,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,CAAC;AAC3D,oCAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,YAAQ,kBAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,oBAAoB,GAAG;AACzB,iBAAW,oBAAoB;AAAA,IACjC;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW,mBAAmB;AAAA,IAChC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,CAAC;AAExC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,KAAK;AAAA,MACN,uDAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAEV;AAAA,sDAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,YAAW;AAAA,aAA+B,WAAa,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,15 +14,9 @@ const useInternalMargins = ({
|
|
|
14
14
|
toolbarRef
|
|
15
15
|
}) => {
|
|
16
16
|
const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);
|
|
17
|
-
const axisBottomHeight = useMemo(
|
|
18
|
-
() => axisBottomRef?.getBoundingClientRect()?.height ? axisBottomRef?.getBoundingClientRect()?.height + 20 : 0,
|
|
19
|
-
[axisBottomRef]
|
|
20
|
-
);
|
|
17
|
+
const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);
|
|
21
18
|
const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);
|
|
22
|
-
const bottomLabelHeight = useMemo(
|
|
23
|
-
() => bottomLabel?.getBoundingClientRect()?.height ? bottomLabel?.getBoundingClientRect()?.height + 10 : 0,
|
|
24
|
-
[bottomLabel]
|
|
25
|
-
);
|
|
19
|
+
const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);
|
|
26
20
|
const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);
|
|
27
21
|
const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);
|
|
28
22
|
const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);
|
|
@@ -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 } from 'react';\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}\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 // Axis\n const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n const axisBottomHeight = useMemo(
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;AAejB,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,gBAAgB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,mBAAmB
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\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}\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 // Axis\n const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);\n const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n // Labels\n const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);\n const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n // Legends\n const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n\n const toolbarHeight = useMemo(() => toolbarRef?.getBoundingClientRect()?.height || 0, [toolbarRef]);\n\n const internalMargin = useMemo(\n () => ({\n bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n top: 10 + topLegendHeight + toolbarHeight,\n right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\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 leftLegendWidth,\n axisBottomHeight,\n bottomLegendHeight,\n bottomLabelHeight,\n topLegendHeight,\n rightLabelWidth,\n axisRightWidth,\n rightLegendWidth,\n axisLeftWidth,\n leftLabelWidth,\n toolbarHeight,\n }),\n [\n axisBottomHeight,\n toolbarHeight,\n axisLeftWidth,\n axisRightWidth,\n bottomLabelHeight,\n bottomLegendHeight,\n internalMargin,\n leftLabelWidth,\n leftLegendWidth,\n rightLabelWidth,\n rightLegendWidth,\n topLegendHeight,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;AAejB,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,gBAAgB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,mBAAmB,QAAQ,MAAM,eAAe,sBAAsB,GAAG,UAAU,GAAG,CAAC,aAAa,CAAC;AAC3G,QAAM,iBAAiB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,oBAAoB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,UAAU,GAAG,CAAC,WAAW,CAAC;AACxG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,iBAAiB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,kBAAkB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,qBAAqB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,mBAAmB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,gBAAgB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,UAAU,GAAG,CAAC,UAAU,CAAC;AAElG,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK,kBAAkB;AAAA,MAC5B,OAAO,KAAK,kBAAkB,iBAAiB;AAAA,MAC/C,MAAM,KAAK,gBAAgB,iBAAiB;AAAA,IAC9C;AAAA,IAEA;AAAA,MACE;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,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -95,7 +95,7 @@ const ChartContainer = () => {
|
|
|
95
95
|
setIsGrabbed(false);
|
|
96
96
|
}, [lastPosition, setIsGrabbed, xScrollbarPosition]);
|
|
97
97
|
const key = useMemo(
|
|
98
|
-
() =>
|
|
98
|
+
() => `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,
|
|
99
99
|
[internalMargin, width]
|
|
100
100
|
);
|
|
101
101
|
if (currentData.length === 0)
|
|
@@ -142,7 +142,6 @@ const ChartContainer = () => {
|
|
|
142
142
|
onMouseUp: handleMouseUp,
|
|
143
143
|
onMouseDown: (e) => e.preventDefault(),
|
|
144
144
|
isGrabbed,
|
|
145
|
-
style: { width, height },
|
|
146
145
|
children: width !== 0 ? /* @__PURE__ */ jsxs("svg", {
|
|
147
146
|
ref: svgRef,
|
|
148
147
|
width,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ChartContainer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: { yAxis, xScroll, scrapper, xAxis },\n containerRef,\n activePoint,\n internalMargin,\n setScrapperPosY,\n setScrapperPosX,\n setContainerRef,\n svgRef,\n isGrabbed,\n setIsGrabbed,\n startPosition,\n innerWidth,\n innerHeight,\n setActivePoint,\n setXScrollbarPosition,\n xScrollbarPosition,\n containerRatio,\n lastPosition,\n setIsScrollbarVisible,\n width,\n height,\n currentData,\n } = useContext(ChartContext);\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n const onMouseEnterHandler = useCallback(() => {\n setIsScrollbarVisible(true);\n }, [setIsScrollbarVisible]);\n const onMouseLeaveHandler = useCallback(() => {\n setScrapperPosY('');\n setScrapperPosX('');\n setIsScrollbarVisible(false);\n setIsGrabbed(false);\n }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n const handleMouseMove: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed) return;\n setActivePoint(null);\n if (xScroll) {\n const newPosition = lastPosition?.current + e.clientX - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerWidth - innerWidth / containerRatio)\n setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n if (yScroll) {\n const newPosition = lastPosition?.current + e.clientY - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerHeight - innerHeight / containerRatio)\n setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n },\n [\n isGrabbed,\n setActivePoint,\n xScroll,\n yScroll,\n lastPosition,\n startPosition,\n setXScrollbarPosition,\n innerWidth,\n containerRatio,\n innerHeight,\n ],\n );\n const handleMouseUp = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n const key = useMemo(\n ()
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,mBAA8B;AACnE,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AACrB,MAAM,iBAAiB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS,UAAU,MAAM;AAAA,IACzC;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,EACF,IAAI,WAAW,YAAY;AAG3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,QAAM,sBAAsB,YAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,sBAAsB,YAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,kBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI,CAAC;AAAW;AAChB,qBAAe,IAAI;AACnB,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,aAAa,aAAa;AAC/C,gCAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,gCAAsB,WAAW;AAAA,MACxC;AACA,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,cAAc,cAAc;AACjD,gCAAsB,cAAc,cAAc,cAAc;AAAA;AAC7D,gCAAsB,WAAW;AAAA,MACxC;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,gBAAgB,YAAY,MAAM;AACtC,iBAAa,UAAU;AACvB,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,cAAc,kBAAkB,CAAC;AAEnD,QAAM,MAAM;AAAA,IACV,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: { yAxis, xScroll, scrapper, xAxis },\n containerRef,\n activePoint,\n internalMargin,\n setScrapperPosY,\n setScrapperPosX,\n setContainerRef,\n svgRef,\n isGrabbed,\n setIsGrabbed,\n startPosition,\n innerWidth,\n innerHeight,\n setActivePoint,\n setXScrollbarPosition,\n xScrollbarPosition,\n containerRatio,\n lastPosition,\n setIsScrollbarVisible,\n width,\n height,\n currentData,\n } = useContext(ChartContext);\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n const onMouseEnterHandler = useCallback(() => {\n setIsScrollbarVisible(true);\n }, [setIsScrollbarVisible]);\n const onMouseLeaveHandler = useCallback(() => {\n setScrapperPosY('');\n setScrapperPosX('');\n setIsScrollbarVisible(false);\n setIsGrabbed(false);\n }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n const handleMouseMove: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed) return;\n setActivePoint(null);\n if (xScroll) {\n const newPosition = lastPosition?.current + e.clientX - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerWidth - innerWidth / containerRatio)\n setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n if (yScroll) {\n const newPosition = lastPosition?.current + e.clientY - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerHeight - innerHeight / containerRatio)\n setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n },\n [\n isGrabbed,\n setActivePoint,\n xScroll,\n yScroll,\n lastPosition,\n startPosition,\n setXScrollbarPosition,\n innerWidth,\n containerRatio,\n innerHeight,\n ],\n );\n const handleMouseUp = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n const key = useMemo(\n () =>\n `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,\n [internalMargin, width],\n );\n\n if (currentData.length === 0) return null;\n\n const render = useMemo(() => {\n if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n return (\n <>\n <AxisRight />\n <AxisLeft />\n <ScrollableContainerX />\n </>\n );\n }\n if (yScroll) {\n return (\n <>\n <AxisBottom />\n <ScrollableContainerY />\n </>\n );\n }\n return (\n <>\n <AxisRight />\n <AxisLeft />\n <AxisBottom />\n <SeriesFactory />\n {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n </>\n );\n }, [scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, yScroll]);\n return (\n <StyledSVGWrapper\n ref={setContainerRef}\n onKeyDown={onInputKeyDown}\n aria-hidden=\"true\"\n tabIndex={activePoint ? -1 : 0}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n onMouseMove={handleMouseMove}\n onMouseUp={handleMouseUp}\n onMouseDown={(e) => e.preventDefault()}\n isGrabbed={isGrabbed}\n >\n {width !== 0 ? (\n <svg ref={svgRef} width={width} height={height}>\n <ClipPaths />\n <BlurMask />\n <g key={key}>\n <g>\n <Controllers />\n <Legend />\n <Label />\n </g>\n <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n {render}\n {/* <ActivePoint/> @todo */}\n </g>\n </g>\n {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n </svg>\n ) : null}\n </StyledSVGWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,7 +14,7 @@ const BottomLabel = () => {
|
|
|
14
14
|
} = useContext(ChartContext);
|
|
15
15
|
return /* @__PURE__ */ jsx("g", {
|
|
16
16
|
ref: setBottomLabel,
|
|
17
|
-
transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top})`,
|
|
17
|
+
transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top + 20})`,
|
|
18
18
|
children: /* @__PURE__ */ jsx(StyledAxisLabel, {
|
|
19
19
|
className: "axis-label",
|
|
20
20
|
textAnchor: "middle",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/BottomLabel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n const {\n internalMargin,\n setBottomLabel,\n innerHeight,\n innerWidth,\n axisBottomHeight,\n props: { xAxis },\n } = useContext(ChartContext);\n\n return (\n <g\n ref={setBottomLabel}\n transform={`translate(${innerWidth / 2 + internalMargin.left},${\n innerHeight + axisBottomHeight + internalMargin.top\n })`}\n >\n <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n {xAxis?.label}\n </StyledAxisLabel>\n </g>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QACtD,cAAc,mBAAmB,eAAe;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n const {\n internalMargin,\n setBottomLabel,\n innerHeight,\n innerWidth,\n axisBottomHeight,\n props: { xAxis },\n } = useContext(ChartContext);\n\n return (\n <g\n ref={setBottomLabel}\n transform={`translate(${innerWidth / 2 + internalMargin.left},${\n innerHeight + axisBottomHeight + internalMargin.top + 20\n })`}\n >\n <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n {xAxis?.label}\n </StyledAxisLabel>\n </g>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QACtD,cAAc,mBAAmB,eAAe,MAAM;AAAA,IAGxD,8BAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAChD,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useContext, useMemo, useLayoutEffect, useRef, useState } from "react";
|
|
4
4
|
import { select } from "d3";
|
|
5
5
|
import { ChartContext } from "../../ChartContext";
|
|
@@ -10,7 +10,7 @@ const BottomLegend = () => {
|
|
|
10
10
|
const firstRender = useRef(true);
|
|
11
11
|
const [xTransform, setXTransform] = useState(innerWidth / 2);
|
|
12
12
|
useLayoutEffect(() => {
|
|
13
|
-
if (ref.current) {
|
|
13
|
+
if (ref.current && firstRender.current) {
|
|
14
14
|
const cells = select(ref.current).selectAll(".cell");
|
|
15
15
|
const padding = 30;
|
|
16
16
|
let offset = 0;
|
|
@@ -37,23 +37,30 @@ const BottomLegend = () => {
|
|
|
37
37
|
const margin = useMemo(() => {
|
|
38
38
|
let counter = 0;
|
|
39
39
|
if (bottomLabelHeight > 0) {
|
|
40
|
-
counter += bottomLabelHeight;
|
|
40
|
+
counter += bottomLabelHeight + 20;
|
|
41
41
|
}
|
|
42
42
|
if (axisBottomHeight > 0) {
|
|
43
|
-
counter += axisBottomHeight;
|
|
43
|
+
counter += axisBottomHeight + 15;
|
|
44
44
|
}
|
|
45
45
|
return counter;
|
|
46
|
-
}, [
|
|
46
|
+
}, [bottomLabelHeight, axisBottomHeight]);
|
|
47
47
|
return useMemo(
|
|
48
48
|
() => /* @__PURE__ */ jsx("g", {
|
|
49
49
|
ref: setBottomLegend,
|
|
50
|
-
children: /* @__PURE__ */
|
|
50
|
+
children: /* @__PURE__ */ jsxs("g", {
|
|
51
51
|
ref,
|
|
52
52
|
transform: `translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`,
|
|
53
53
|
className: "bottom-legend",
|
|
54
|
-
children:
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ jsx("rect", {
|
|
56
|
+
height: 30,
|
|
57
|
+
width: 1,
|
|
58
|
+
fill: "transparent"
|
|
59
|
+
}),
|
|
60
|
+
colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsx(LegendItem, {
|
|
61
|
+
domainValue
|
|
62
|
+
}, domainValue))
|
|
63
|
+
]
|
|
57
64
|
})
|
|
58
65
|
}),
|
|
59
66
|
[colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/BottomLegend.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n useContext(ChartContext);\n\n const ref = useRef<SVGGElement>(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2);\n useLayoutEffect(() => {\n if (ref.current) {\n const cells = select(ref.current).selectAll('.cell');\n const padding = 30;\n let offset = 0;\n let verticalOffset = 0;\n\n cells.each((d, i) => {\n if (cells._groups[0][i - 1]) {\n const lastCell = select(cells._groups[0][i - 1]);\n const d3sel = select(cells._groups[0][i]);\n\n const { width } = lastCell.node().getBBox();\n if (offset + width + padding > innerWidth - innerWidth / 3) {\n offset = 0;\n verticalOffset += 20;\n } else {\n offset += width + padding;\n }\n\n d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n }\n });\n const bounds = ref.current.getBoundingClientRect();\n setXTransform((prev) => prev - bounds.width / 2);\n firstRender.current = false;\n }\n }, [innerWidth]);\n\n const margin = useMemo(() => {\n let counter = 0;\n if (bottomLabelHeight > 0) {\n counter += bottomLabelHeight;\n }\n if (axisBottomHeight > 0) {\n counter += axisBottomHeight;\n }\n return counter;\n }, [
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAC9E,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,IAChH,WAAW,YAAY;AAEzB,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,CAAC;AAC3D,kBAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n useContext(ChartContext);\n\n const ref = useRef<SVGGElement>(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2);\n useLayoutEffect(() => {\n if (ref.current && firstRender.current) {\n const cells = select(ref.current).selectAll('.cell');\n const padding = 30;\n let offset = 0;\n let verticalOffset = 0;\n\n cells.each((d, i) => {\n if (cells._groups[0][i - 1]) {\n const lastCell = select(cells._groups[0][i - 1]);\n const d3sel = select(cells._groups[0][i]);\n\n const { width } = lastCell.node().getBBox();\n if (offset + width + padding > innerWidth - innerWidth / 3) {\n offset = 0;\n verticalOffset += 20;\n } else {\n offset += width + padding;\n }\n\n d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n }\n });\n const bounds = ref.current.getBoundingClientRect();\n setXTransform((prev) => prev - bounds.width / 2);\n firstRender.current = false;\n }\n }, [innerWidth]);\n\n const margin = useMemo(() => {\n let counter = 0;\n if (bottomLabelHeight > 0) {\n counter += bottomLabelHeight + 20;\n }\n if (axisBottomHeight > 0) {\n counter += axisBottomHeight + 15;\n }\n return counter;\n }, [bottomLabelHeight, axisBottomHeight]);\n\n return useMemo(\n () => (\n <g ref={setBottomLegend}>\n <g\n ref={ref}\n transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n className=\"bottom-legend\"\n >\n <rect height={30} width={1} fill=\"transparent\" />\n {colorScale.domain().map((domainValue, i) => (\n <LegendItem domainValue={domainValue} key={domainValue} />\n ))}\n </g>\n </g>\n ),\n\n [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAC9E,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,IAChH,WAAW,YAAY;AAEzB,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,CAAC;AAC3D,kBAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,OAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,oBAAoB,GAAG;AACzB,iBAAW,oBAAoB;AAAA,IACjC;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW,mBAAmB;AAAA,IAChC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,CAAC;AAExC,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,KAAK;AAAA,MACN,+BAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAEV;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,YAAW;AAAA,aAA+B,WAAa,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz",
|
|
3
|
-
"version": "3.11.
|
|
3
|
+
"version": "3.11.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-grid": "3.11.
|
|
39
|
-
"@elliemae/ds-icon": "3.11.
|
|
40
|
-
"@elliemae/ds-icons": "3.11.
|
|
41
|
-
"@elliemae/ds-popperjs": "3.11.
|
|
42
|
-
"@elliemae/ds-system": "3.11.
|
|
43
|
-
"@elliemae/ds-tooltip": "3.11.
|
|
44
|
-
"@elliemae/ds-utilities": "3.11.
|
|
38
|
+
"@elliemae/ds-grid": "3.11.2",
|
|
39
|
+
"@elliemae/ds-icon": "3.11.2",
|
|
40
|
+
"@elliemae/ds-icons": "3.11.2",
|
|
41
|
+
"@elliemae/ds-popperjs": "3.11.2",
|
|
42
|
+
"@elliemae/ds-system": "3.11.2",
|
|
43
|
+
"@elliemae/ds-tooltip": "3.11.2",
|
|
44
|
+
"@elliemae/ds-utilities": "3.11.2",
|
|
45
45
|
"d3": "~7.4.4"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|