@elliemae/ds-dataviz 3.11.0-next.2 → 3.11.0-next.3
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/parts/Legend/BottomLegend.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Legend/BottomLegend.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js +11 -5
- package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js +1 -1
- package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/TopLegend.js +12 -6
- package/dist/esm/graphs/Chart/parts/Legend/TopLegend.js.map +2 -2
- package/package.json +8 -8
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8E;AAC9E,
|
|
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
|
}
|
|
@@ -40,23 +40,29 @@ const TopLegend = () => {
|
|
|
40
40
|
const [xTransform, setXTransform] = (0, import_react.useState)(innerWidth / 2 + internalMargin.left);
|
|
41
41
|
(0, import_react.useLayoutEffect)(() => {
|
|
42
42
|
if (ref.current && firstRender.current) {
|
|
43
|
-
const cells = (0, import_d3.
|
|
44
|
-
const padding =
|
|
43
|
+
const cells = (0, import_d3.select)(ref.current).selectAll(".cell");
|
|
44
|
+
const padding = 30;
|
|
45
45
|
let offset = 0;
|
|
46
|
+
let verticalOffset = 0;
|
|
46
47
|
cells.each((d, i) => {
|
|
47
48
|
if (cells._groups[0][i - 1]) {
|
|
48
49
|
const lastCell = (0, import_d3.select)(cells._groups[0][i - 1]);
|
|
49
50
|
const d3sel = (0, import_d3.select)(cells._groups[0][i]);
|
|
50
51
|
const { width } = lastCell.node().getBBox();
|
|
51
|
-
offset
|
|
52
|
-
|
|
52
|
+
if (offset + width + padding > innerWidth - innerWidth / 3) {
|
|
53
|
+
offset = 0;
|
|
54
|
+
verticalOffset += 20;
|
|
55
|
+
} else {
|
|
56
|
+
offset += width + padding;
|
|
57
|
+
}
|
|
58
|
+
d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
|
|
53
59
|
}
|
|
54
60
|
});
|
|
55
61
|
const bounds = ref.current.getBoundingClientRect();
|
|
56
62
|
setXTransform((prev) => prev - bounds.width / 2);
|
|
57
63
|
firstRender.current = false;
|
|
58
64
|
}
|
|
59
|
-
}, []);
|
|
65
|
+
}, [innerWidth]);
|
|
60
66
|
const render = (0, import_react.useMemo)(
|
|
61
67
|
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
|
|
62
68
|
ref,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Legend/TopLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\n\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);\n\n const ref = useRef(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\n useLayoutEffect(() => {\n if (ref.current && firstRender.current) {\n const cells = selectAll('.cell');\n const padding =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8E;AAE9E,gBAAkC;AAClC,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,cAAc,cAAc,QAAI,yBAAW,gCAAY;AAEvG,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,oCAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,YAAQ,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\n\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);\n\n const ref = useRef(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\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 const render = useMemo(\n () => (\n <g ref={ref} transform={`translate(${xTransform},${toolbarHeight + 30})`}>\n <g ref={setTopLegend}>\n <rect height={40} width={1} fill=\"transparent\" />\n {colorScale.domain().map((domainValue, i) => (\n <LegendItem key={domainValue} domainValue={domainValue} />\n ))}\n </g>\n </g>\n ),\n\n [colorScale, setTopLegend, xTransform, toolbarHeight],\n );\n\n return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8E;AAE9E,gBAAkC;AAClC,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,cAAc,cAAc,QAAI,yBAAW,gCAAY;AAEvG,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,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;AACf,QAAM,aAAS;AAAA,IACb,MACE,4CAAC;AAAA,MAAE;AAAA,MAAU,WAAW,aAAa,cAAc,gBAAgB;AAAA,MACjE,uDAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,sDAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,YAA6B;AAAA,aAAb,WAAuC,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,cAAc,YAAY,aAAa;AAAA,EACtD;AAEA,SAAO;AACT;",
|
|
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/Legend/BottomLegend.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAC9E,
|
|
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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useContext, useMemo, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { select } from "d3";
|
|
5
5
|
import { ChartContext } from "../../ChartContext";
|
|
6
6
|
import { LegendItem } from "./LegendItem";
|
|
7
7
|
const TopLegend = () => {
|
|
@@ -11,23 +11,29 @@ const TopLegend = () => {
|
|
|
11
11
|
const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);
|
|
12
12
|
useLayoutEffect(() => {
|
|
13
13
|
if (ref.current && firstRender.current) {
|
|
14
|
-
const cells = selectAll(".cell");
|
|
15
|
-
const padding =
|
|
14
|
+
const cells = select(ref.current).selectAll(".cell");
|
|
15
|
+
const padding = 30;
|
|
16
16
|
let offset = 0;
|
|
17
|
+
let verticalOffset = 0;
|
|
17
18
|
cells.each((d, i) => {
|
|
18
19
|
if (cells._groups[0][i - 1]) {
|
|
19
20
|
const lastCell = select(cells._groups[0][i - 1]);
|
|
20
21
|
const d3sel = select(cells._groups[0][i]);
|
|
21
22
|
const { width } = lastCell.node().getBBox();
|
|
22
|
-
offset
|
|
23
|
-
|
|
23
|
+
if (offset + width + padding > innerWidth - innerWidth / 3) {
|
|
24
|
+
offset = 0;
|
|
25
|
+
verticalOffset += 20;
|
|
26
|
+
} else {
|
|
27
|
+
offset += width + padding;
|
|
28
|
+
}
|
|
29
|
+
d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
|
|
24
30
|
}
|
|
25
31
|
});
|
|
26
32
|
const bounds = ref.current.getBoundingClientRect();
|
|
27
33
|
setXTransform((prev) => prev - bounds.width / 2);
|
|
28
34
|
firstRender.current = false;
|
|
29
35
|
}
|
|
30
|
-
}, []);
|
|
36
|
+
}, [innerWidth]);
|
|
31
37
|
const render = useMemo(
|
|
32
38
|
() => /* @__PURE__ */ jsx("g", {
|
|
33
39
|
ref,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/TopLegend.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\n\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);\n\n const ref = useRef(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\n useLayoutEffect(() => {\n if (ref.current && firstRender.current) {\n const cells = selectAll('.cell');\n const padding =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAE9E,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\n\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);\n\n const ref = useRef(null);\n const firstRender = useRef(true);\n\n const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\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 const render = useMemo(\n () => (\n <g ref={ref} transform={`translate(${xTransform},${toolbarHeight + 30})`}>\n <g ref={setTopLegend}>\n <rect height={40} width={1} fill=\"transparent\" />\n {colorScale.domain().map((domainValue, i) => (\n <LegendItem key={domainValue} domainValue={domainValue} />\n ))}\n </g>\n </g>\n ),\n\n [colorScale, setTopLegend, xTransform, toolbarHeight],\n );\n\n return render;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAE9E,SAAoB,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,cAAc,cAAc,IAAI,WAAW,YAAY;AAEvG,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,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;AACf,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE;AAAA,MAAU,WAAW,aAAa,cAAc,gBAAgB;AAAA,MACjE,+BAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,YAA6B;AAAA,aAAb,WAAuC,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,cAAc,YAAY,aAAa;AAAA,EACtD;AAEA,SAAO;AACT;",
|
|
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.0-next.
|
|
3
|
+
"version": "3.11.0-next.3",
|
|
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.0-next.
|
|
39
|
-
"@elliemae/ds-icon": "3.11.0-next.
|
|
40
|
-
"@elliemae/ds-icons": "3.11.0-next.
|
|
41
|
-
"@elliemae/ds-popperjs": "3.11.0-next.
|
|
42
|
-
"@elliemae/ds-system": "3.11.0-next.
|
|
43
|
-
"@elliemae/ds-tooltip": "3.11.0-next.
|
|
44
|
-
"@elliemae/ds-utilities": "3.11.0-next.
|
|
38
|
+
"@elliemae/ds-grid": "3.11.0-next.3",
|
|
39
|
+
"@elliemae/ds-icon": "3.11.0-next.3",
|
|
40
|
+
"@elliemae/ds-icons": "3.11.0-next.3",
|
|
41
|
+
"@elliemae/ds-popperjs": "3.11.0-next.3",
|
|
42
|
+
"@elliemae/ds-system": "3.11.0-next.3",
|
|
43
|
+
"@elliemae/ds-tooltip": "3.11.0-next.3",
|
|
44
|
+
"@elliemae/ds-utilities": "3.11.0-next.3",
|
|
45
45
|
"d3": "~7.4.4"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|