@elliemae/ds-dataviz 3.12.1 → 3.13.0-next.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 +13 -17
- package/dist/cjs/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Labels/LeftLabel.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useInternalMargins.js +13 -17
- package/dist/esm/graphs/Chart/config/useInternalMargins.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Labels/LeftLabel.js.map +2 -2
- package/package.json +4 -4
|
@@ -29,6 +29,8 @@ __export(useInternalMargins_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(useInternalMargins_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_react = require("react");
|
|
32
|
+
const getElementWidthCeiled = (element, offset = 0) => element?.getBoundingClientRect()?.width ? Math.ceil(element?.getBoundingClientRect()?.width + offset) : 0;
|
|
33
|
+
const getElementHeightCeiled = (element, offset = 0) => element?.getBoundingClientRect()?.height ? Math.ceil(element?.getBoundingClientRect()?.height + offset) : 0;
|
|
32
34
|
const useInternalMargins = ({
|
|
33
35
|
axisLeftRef,
|
|
34
36
|
axisBottomRef,
|
|
@@ -42,23 +44,17 @@ const useInternalMargins = ({
|
|
|
42
44
|
bottomLabel,
|
|
43
45
|
toolbarRef
|
|
44
46
|
}) => {
|
|
45
|
-
const axisLeftWidth = (0, import_react.useMemo)(() => axisLeftRef
|
|
46
|
-
const axisBottomHeight = (0, import_react.useMemo)(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
);
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
);
|
|
55
|
-
const
|
|
56
|
-
const leftLabelWidth = (0, import_react.useMemo)(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);
|
|
57
|
-
const topLegendHeight = (0, import_react.useMemo)(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);
|
|
58
|
-
const bottomLegendHeight = (0, import_react.useMemo)(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);
|
|
59
|
-
const rightLegendWidth = (0, import_react.useMemo)(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);
|
|
60
|
-
const leftLegendWidth = (0, import_react.useMemo)(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);
|
|
61
|
-
const toolbarHeight = (0, import_react.useMemo)(() => toolbarRef?.getBoundingClientRect()?.height || 0, [toolbarRef]);
|
|
47
|
+
const axisLeftWidth = (0, import_react.useMemo)(() => getElementWidthCeiled(axisLeftRef), [axisLeftRef]);
|
|
48
|
+
const axisBottomHeight = (0, import_react.useMemo)(() => getElementHeightCeiled(axisBottomRef, 20), [axisBottomRef]);
|
|
49
|
+
const axisRightWidth = (0, import_react.useMemo)(() => getElementWidthCeiled(axisRightRef), [axisRightRef]);
|
|
50
|
+
const bottomLabelHeight = (0, import_react.useMemo)(() => getElementHeightCeiled(bottomLabel, 10), [bottomLabel]);
|
|
51
|
+
const rightLabelWidth = (0, import_react.useMemo)(() => getElementWidthCeiled(rightLabel), [rightLabel]);
|
|
52
|
+
const leftLabelWidth = (0, import_react.useMemo)(() => getElementWidthCeiled(leftLabel), [leftLabel]);
|
|
53
|
+
const topLegendHeight = (0, import_react.useMemo)(() => getElementHeightCeiled(topLegend), [topLegend]);
|
|
54
|
+
const bottomLegendHeight = (0, import_react.useMemo)(() => getElementHeightCeiled(bottomLegend), [bottomLegend]);
|
|
55
|
+
const rightLegendWidth = (0, import_react.useMemo)(() => getElementWidthCeiled(rightLegend), [rightLegend]);
|
|
56
|
+
const leftLegendWidth = (0, import_react.useMemo)(() => getElementWidthCeiled(leftLegend), [leftLegend]);
|
|
57
|
+
const toolbarHeight = (0, import_react.useMemo)(() => getElementHeightCeiled(toolbarRef), [toolbarRef]);
|
|
62
58
|
const internalMargin = (0, import_react.useMemo)(
|
|
63
59
|
() => ({
|
|
64
60
|
bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwB;
|
|
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}\n\nconst getElementWidthCeiled = (element: SVGGElement | null, offset = 0) =>\n element?.getBoundingClientRect()?.width ? Math.ceil(element?.getBoundingClientRect()?.width + offset) : 0;\n\nconst getElementHeightCeiled = (element: SVGGElement | null, offset = 0) =>\n element?.getBoundingClientRect()?.height ? Math.ceil(element?.getBoundingClientRect()?.height + offset) : 0;\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 // We get the measurements of the elements that are outside of the chart\n // We ceil those numbers to avoid having double datatype on the variables\n // So that the use memos don't retrigger to often because of the dependency\n\n // Axis\n const axisLeftWidth = useMemo(() => getElementWidthCeiled(axisLeftRef), [axisLeftRef]);\n const axisBottomHeight = useMemo(() => getElementHeightCeiled(axisBottomRef, 20), [axisBottomRef]);\n const axisRightWidth = useMemo(() => getElementWidthCeiled(axisRightRef), [axisRightRef]);\n\n // Labels\n const bottomLabelHeight = useMemo(() => getElementHeightCeiled(bottomLabel, 10), [bottomLabel]);\n const rightLabelWidth = useMemo(() => getElementWidthCeiled(rightLabel), [rightLabel]);\n const leftLabelWidth = useMemo(() => getElementWidthCeiled(leftLabel), [leftLabel]);\n // Legends\n const topLegendHeight = useMemo(() => getElementHeightCeiled(topLegend), [topLegend]);\n const bottomLegendHeight = useMemo(() => getElementHeightCeiled(bottomLegend), [bottomLegend]);\n const rightLegendWidth = useMemo(() => getElementWidthCeiled(rightLegend), [rightLegend]);\n const leftLegendWidth = useMemo(() => getElementWidthCeiled(leftLegend), [leftLegend]);\n\n const toolbarHeight = useMemo(() => getElementHeightCeiled(toolbarRef), [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;AAgBxB,MAAM,wBAAwB,CAAC,SAA6B,SAAS,MACnE,SAAS,sBAAsB,GAAG,QAAQ,KAAK,KAAK,SAAS,sBAAsB,GAAG,QAAQ,MAAM,IAAI;AAE1G,MAAM,yBAAyB,CAAC,SAA6B,SAAS,MACpE,SAAS,sBAAsB,GAAG,SAAS,KAAK,KAAK,SAAS,sBAAsB,GAAG,SAAS,MAAM,IAAI;AAErG,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;AAMzB,QAAM,oBAAgB,sBAAQ,MAAM,sBAAsB,WAAW,GAAG,CAAC,WAAW,CAAC;AACrF,QAAM,uBAAmB,sBAAQ,MAAM,uBAAuB,eAAe,EAAE,GAAG,CAAC,aAAa,CAAC;AACjG,QAAM,qBAAiB,sBAAQ,MAAM,sBAAsB,YAAY,GAAG,CAAC,YAAY,CAAC;AAGxF,QAAM,wBAAoB,sBAAQ,MAAM,uBAAuB,aAAa,EAAE,GAAG,CAAC,WAAW,CAAC;AAC9F,QAAM,sBAAkB,sBAAQ,MAAM,sBAAsB,UAAU,GAAG,CAAC,UAAU,CAAC;AACrF,QAAM,qBAAiB,sBAAQ,MAAM,sBAAsB,SAAS,GAAG,CAAC,SAAS,CAAC;AAElF,QAAM,sBAAkB,sBAAQ,MAAM,uBAAuB,SAAS,GAAG,CAAC,SAAS,CAAC;AACpF,QAAM,yBAAqB,sBAAQ,MAAM,uBAAuB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC7F,QAAM,uBAAmB,sBAAQ,MAAM,sBAAsB,WAAW,GAAG,CAAC,WAAW,CAAC;AACxF,QAAM,sBAAkB,sBAAQ,MAAM,sBAAsB,UAAU,GAAG,CAAC,UAAU,CAAC;AAErF,QAAM,oBAAgB,sBAAQ,MAAM,uBAAuB,UAAU,GAAG,CAAC,UAAU,CAAC;AAEpF,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Labels/LeftLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBjB;AArBN,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const LeftLabel = () => {\n const {\n innerHeight,\n internalMargin,\n setLeftLabel,\n leftLegendWidth,\n props: { yAxis },\n } = useContext(ChartContext);\n\n return (\n <g\n ref={setLeftLabel}\n transform={`translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${\n innerHeight / 2 + internalMargin.top\n }) rotate(-90)`}\n >\n {/* <rect height=\"30\" width=\"1\" fill=\"transparent\" /> */}\n <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={15}>\n {yAxis?.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;ADqBjB;AArBN,mBAAkC;AAClC,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,kBAAkB,IAAI,kBAAkB,IAAI,KAClE,cAAc,IAAI,eAAe;AAAA,MAInC,sDAAC,iCAAgB,WAAU,cAAa,YAAW,UAAS,IAAI,IAC7D,iBAAO,OACV;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
|
+
const getElementWidthCeiled = (element, offset = 0) => element?.getBoundingClientRect()?.width ? Math.ceil(element?.getBoundingClientRect()?.width + offset) : 0;
|
|
4
|
+
const getElementHeightCeiled = (element, offset = 0) => element?.getBoundingClientRect()?.height ? Math.ceil(element?.getBoundingClientRect()?.height + offset) : 0;
|
|
3
5
|
const useInternalMargins = ({
|
|
4
6
|
axisLeftRef,
|
|
5
7
|
axisBottomRef,
|
|
@@ -13,23 +15,17 @@ const useInternalMargins = ({
|
|
|
13
15
|
bottomLabel,
|
|
14
16
|
toolbarRef
|
|
15
17
|
}) => {
|
|
16
|
-
const axisLeftWidth = useMemo(() => axisLeftRef
|
|
17
|
-
const axisBottomHeight = useMemo(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
);
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
);
|
|
26
|
-
const
|
|
27
|
-
const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);
|
|
28
|
-
const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);
|
|
29
|
-
const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);
|
|
30
|
-
const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);
|
|
31
|
-
const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);
|
|
32
|
-
const toolbarHeight = useMemo(() => toolbarRef?.getBoundingClientRect()?.height || 0, [toolbarRef]);
|
|
18
|
+
const axisLeftWidth = useMemo(() => getElementWidthCeiled(axisLeftRef), [axisLeftRef]);
|
|
19
|
+
const axisBottomHeight = useMemo(() => getElementHeightCeiled(axisBottomRef, 20), [axisBottomRef]);
|
|
20
|
+
const axisRightWidth = useMemo(() => getElementWidthCeiled(axisRightRef), [axisRightRef]);
|
|
21
|
+
const bottomLabelHeight = useMemo(() => getElementHeightCeiled(bottomLabel, 10), [bottomLabel]);
|
|
22
|
+
const rightLabelWidth = useMemo(() => getElementWidthCeiled(rightLabel), [rightLabel]);
|
|
23
|
+
const leftLabelWidth = useMemo(() => getElementWidthCeiled(leftLabel), [leftLabel]);
|
|
24
|
+
const topLegendHeight = useMemo(() => getElementHeightCeiled(topLegend), [topLegend]);
|
|
25
|
+
const bottomLegendHeight = useMemo(() => getElementHeightCeiled(bottomLegend), [bottomLegend]);
|
|
26
|
+
const rightLegendWidth = useMemo(() => getElementWidthCeiled(rightLegend), [rightLegend]);
|
|
27
|
+
const leftLegendWidth = useMemo(() => getElementWidthCeiled(leftLegend), [leftLegend]);
|
|
28
|
+
const toolbarHeight = useMemo(() => getElementHeightCeiled(toolbarRef), [toolbarRef]);
|
|
33
29
|
const internalMargin = useMemo(
|
|
34
30
|
() => ({
|
|
35
31
|
bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;
|
|
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}\n\nconst getElementWidthCeiled = (element: SVGGElement | null, offset = 0) =>\n element?.getBoundingClientRect()?.width ? Math.ceil(element?.getBoundingClientRect()?.width + offset) : 0;\n\nconst getElementHeightCeiled = (element: SVGGElement | null, offset = 0) =>\n element?.getBoundingClientRect()?.height ? Math.ceil(element?.getBoundingClientRect()?.height + offset) : 0;\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 // We get the measurements of the elements that are outside of the chart\n // We ceil those numbers to avoid having double datatype on the variables\n // So that the use memos don't retrigger to often because of the dependency\n\n // Axis\n const axisLeftWidth = useMemo(() => getElementWidthCeiled(axisLeftRef), [axisLeftRef]);\n const axisBottomHeight = useMemo(() => getElementHeightCeiled(axisBottomRef, 20), [axisBottomRef]);\n const axisRightWidth = useMemo(() => getElementWidthCeiled(axisRightRef), [axisRightRef]);\n\n // Labels\n const bottomLabelHeight = useMemo(() => getElementHeightCeiled(bottomLabel, 10), [bottomLabel]);\n const rightLabelWidth = useMemo(() => getElementWidthCeiled(rightLabel), [rightLabel]);\n const leftLabelWidth = useMemo(() => getElementWidthCeiled(leftLabel), [leftLabel]);\n // Legends\n const topLegendHeight = useMemo(() => getElementHeightCeiled(topLegend), [topLegend]);\n const bottomLegendHeight = useMemo(() => getElementHeightCeiled(bottomLegend), [bottomLegend]);\n const rightLegendWidth = useMemo(() => getElementWidthCeiled(rightLegend), [rightLegend]);\n const leftLegendWidth = useMemo(() => getElementWidthCeiled(leftLegend), [leftLegend]);\n\n const toolbarHeight = useMemo(() => getElementHeightCeiled(toolbarRef), [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;AAgBxB,MAAM,wBAAwB,CAAC,SAA6B,SAAS,MACnE,SAAS,sBAAsB,GAAG,QAAQ,KAAK,KAAK,SAAS,sBAAsB,GAAG,QAAQ,MAAM,IAAI;AAE1G,MAAM,yBAAyB,CAAC,SAA6B,SAAS,MACpE,SAAS,sBAAsB,GAAG,SAAS,KAAK,KAAK,SAAS,sBAAsB,GAAG,SAAS,MAAM,IAAI;AAErG,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;AAMzB,QAAM,gBAAgB,QAAQ,MAAM,sBAAsB,WAAW,GAAG,CAAC,WAAW,CAAC;AACrF,QAAM,mBAAmB,QAAQ,MAAM,uBAAuB,eAAe,EAAE,GAAG,CAAC,aAAa,CAAC;AACjG,QAAM,iBAAiB,QAAQ,MAAM,sBAAsB,YAAY,GAAG,CAAC,YAAY,CAAC;AAGxF,QAAM,oBAAoB,QAAQ,MAAM,uBAAuB,aAAa,EAAE,GAAG,CAAC,WAAW,CAAC;AAC9F,QAAM,kBAAkB,QAAQ,MAAM,sBAAsB,UAAU,GAAG,CAAC,UAAU,CAAC;AACrF,QAAM,iBAAiB,QAAQ,MAAM,sBAAsB,SAAS,GAAG,CAAC,SAAS,CAAC;AAElF,QAAM,kBAAkB,QAAQ,MAAM,uBAAuB,SAAS,GAAG,CAAC,SAAS,CAAC;AACpF,QAAM,qBAAqB,QAAQ,MAAM,uBAAuB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC7F,QAAM,mBAAmB,QAAQ,MAAM,sBAAsB,WAAW,GAAG,CAAC,WAAW,CAAC;AACxF,QAAM,kBAAkB,QAAQ,MAAM,sBAAsB,UAAU,GAAG,CAAC,UAAU,CAAC;AAErF,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,UAAU,GAAG,CAAC,UAAU,CAAC;AAEpF,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/LeftLabel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACqBjB;AArBN,SAAgB,
|
|
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 LeftLabel = () => {\n const {\n innerHeight,\n internalMargin,\n setLeftLabel,\n leftLegendWidth,\n props: { yAxis },\n } = useContext(ChartContext);\n\n return (\n <g\n ref={setLeftLabel}\n transform={`translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${\n innerHeight / 2 + internalMargin.top\n }) rotate(-90)`}\n >\n {/* <rect height=\"30\" width=\"1\" fill=\"transparent\" /> */}\n <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={15}>\n {yAxis?.label}\n </StyledAxisLabel>\n </g>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqBjB;AArBN,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,kBAAkB,IAAI,kBAAkB,IAAI,KAClE,cAAc,IAAI,eAAe;AAAA,MAInC,8BAAC,mBAAgB,WAAU,cAAa,YAAW,UAAS,IAAI,IAC7D,iBAAO,OACV;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.13.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"d3-shape": "~3.1.0",
|
|
41
41
|
"resize-observer-polyfill": "~1.5.1",
|
|
42
42
|
"uid": "~2.0.0",
|
|
43
|
-
"@elliemae/ds-popperjs": "3.
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
43
|
+
"@elliemae/ds-popperjs": "3.13.0-next.2",
|
|
44
|
+
"@elliemae/ds-utilities": "3.13.0-next.2",
|
|
45
|
+
"@elliemae/ds-system": "3.13.0-next.2"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-theme": "~2.6.0",
|