@elliemae/ds-dataviz 3.12.0-next.1 → 3.12.0-rc.0
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/ClipPaths.js +1 -1
- package/dist/cjs/graphs/Chart/parts/ClipPaths.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Legend/LegendItem.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Legend/LegendItem.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js +2 -1
- package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js +5 -4
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js +1 -5
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/HorizontalBars.js +18 -3
- package/dist/cjs/graphs/Chart/series/HorizontalBars.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/ClipPaths.js +1 -1
- package/dist/esm/graphs/Chart/parts/ClipPaths.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js +1 -1
- package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js +2 -1
- package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js +5 -4
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerY.js +1 -5
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerY.js.map +2 -2
- package/dist/esm/graphs/Chart/series/HorizontalBars.js +18 -3
- package/dist/esm/graphs/Chart/series/HorizontalBars.js.map +2 -2
- package/package.json +4 -4
- package/dist/cjs/graphs/Chart/parts/Axis/Axes.js +0 -75
- package/dist/cjs/graphs/Chart/parts/Axis/Axes.js.map +0 -7
- package/dist/esm/graphs/Chart/parts/Axis/Axes.js +0 -49
- package/dist/esm/graphs/Chart/parts/Axis/Axes.js.map +0 -7
|
@@ -50,7 +50,7 @@ const ClipPaths = () => {
|
|
|
50
50
|
height: innerHeight * containerRatio,
|
|
51
51
|
x: -4
|
|
52
52
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
|
|
53
|
-
width: innerWidth * containerRatio,
|
|
53
|
+
width: (innerWidth + 4) * containerRatio,
|
|
54
54
|
height: innerHeight + 4,
|
|
55
55
|
y: -4
|
|
56
56
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/parts/ClipPaths.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n const {\n innerWidth,\n containerRatio,\n innerHeight,\n chartId,\n yScale,\n props: { xAxis, yAxis },\n } = useContext(ChartContext);\n\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n return (\n <>\n <defs>\n <clipPath id={`rect-focus-ring-${chartId}`}>\n {yScroll ? (\n <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n ) : (\n <rect width={innerWidth * containerRatio} height={innerHeight + 4} y={-4} />\n )}\n </clipPath>\n </defs>\n {/* \n this can be useful when implementing animations\n <defs>\n <clipPath id={`rects-positive-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n </clipPath>\n </defs>\n {innerHeight - yScale(0) > 0 ? (\n <defs>\n <clipPath id={`rects-negative-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n </clipPath>\n </defs>\n ) : null} */}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAhBJ,mBAAkC;AAClC,0BAA6B;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE,sDAAC;AAAA,MACC,sDAAC;AAAA,QAAS,IAAI,mBAAmB;AAAA,QAC9B,oBACC,4CAAC;AAAA,UAAK,OAAO,aAAa;AAAA,UAAG,QAAQ,cAAc;AAAA,UAAgB,GAAG;AAAA,SAAI,IAE1E,4CAAC;AAAA,UAAK,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n const {\n innerWidth,\n containerRatio,\n innerHeight,\n chartId,\n yScale,\n props: { xAxis, yAxis },\n } = useContext(ChartContext);\n\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n return (\n <>\n <defs>\n <clipPath id={`rect-focus-ring-${chartId}`}>\n {yScroll ? (\n <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n ) : (\n <rect width={(innerWidth + 4) * containerRatio} height={innerHeight + 4} y={-4} />\n )}\n </clipPath>\n </defs>\n {/* \n this can be useful when implementing animations\n <defs>\n <clipPath id={`rects-positive-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n </clipPath>\n </defs>\n {innerHeight - yScale(0) > 0 ? (\n <defs>\n <clipPath id={`rects-negative-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n </clipPath>\n </defs>\n ) : null} */}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAhBJ,mBAAkC;AAClC,0BAA6B;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE,sDAAC;AAAA,MACC,sDAAC;AAAA,QAAS,IAAI,mBAAmB;AAAA,QAC9B,oBACC,4CAAC;AAAA,UAAK,OAAO,aAAa;AAAA,UAAG,QAAQ,cAAc;AAAA,UAAgB,GAAG;AAAA,SAAI,IAE1E,4CAAC;AAAA,UAAK,QAAQ,aAAa,KAAK;AAAA,UAAgB,QAAQ,cAAc;AAAA,UAAG,GAAG;AAAA,SAAI;AAAA,OAEpF;AAAA,KACF;AAAA,GAeF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -88,7 +88,7 @@ const LegendItem = ({ domainValue }) => {
|
|
|
88
88
|
() => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
|
|
89
89
|
onClick: handleOnClick,
|
|
90
90
|
className: "cell",
|
|
91
|
-
style: hiddenSeries.includes(domainValue) ? { opacity: 0.2 } :
|
|
91
|
+
style: hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: "pointer" } : { cursor: "pointer" },
|
|
92
92
|
children: [
|
|
93
93
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LegendIcon, {
|
|
94
94
|
fill: colorScale(domainValue)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n props: { series, types },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData.pointStyle] ??\n (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2 } :
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIW;AAJlC,mBAAwD;AACxD,uBAAqB;AACrB,0BAA6B;AAE7B,MAAM,iBAAiB,CAAC,UAAU,4CAAC;AAAA,EAAK,IAAI;AAAA,EAAK,IAAI;AAAA,EAAI,IAAI;AAAA,EAAG,IAAI;AAAA,EAAI,GAAG;AAAA,EAAO,aAAa;AAAA,CAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,4CAAC;AAAA,EAAO,GAAG;AAAA,EAAI,GAAG;AAAA,CAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,4CAAC;AAAA,EAAK,GAAG;AAAA,EAAI,GAAG;AAAA,EAAI,OAAO;AAAA,EAAI,QAAQ;AAAA,EAAK,GAAG;AAAA,CAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,4CAAC;AAAA,EAAE,WAAU;AAAA,EACX,sDAAC;AAAA,IAAK,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,OAAO;AAAA,IAAI,QAAQ;AAAA,IAAK,GAAG;AAAA,GAAO;AAAA,CACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MACC,SAAS;AAAA,MAET,WAAU;AAAA,MACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,IAAI,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n props: { series, types },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData.pointStyle] ??\n (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n >\n <LegendIcon fill={colorScale(domainValue)} />\n {serieData.type === 'line' ? (\n <LegendItemLine\n stroke={colorScale(domainValue)}\n strokeDasharray={LINE.DASH_STYLE_VALUES[serieData.dashStyle]}\n />\n ) : null}\n <text x={24} dy=\".32em\" fontWeight=\"600\">\n {domainValue}\n </text>\n </g>\n ),\n\n [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIW;AAJlC,mBAAwD;AACxD,uBAAqB;AACrB,0BAA6B;AAE7B,MAAM,iBAAiB,CAAC,UAAU,4CAAC;AAAA,EAAK,IAAI;AAAA,EAAK,IAAI;AAAA,EAAI,IAAI;AAAA,EAAG,IAAI;AAAA,EAAI,GAAG;AAAA,EAAO,aAAa;AAAA,CAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,4CAAC;AAAA,EAAO,GAAG;AAAA,EAAI,GAAG;AAAA,CAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,4CAAC;AAAA,EAAK,GAAG;AAAA,EAAI,GAAG;AAAA,EAAI,OAAO;AAAA,EAAI,QAAQ;AAAA,EAAK,GAAG;AAAA,CAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,4CAAC;AAAA,EAAE,WAAU;AAAA,EACX,sDAAC;AAAA,IAAK,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,OAAO;AAAA,IAAI,QAAQ;AAAA,IAAK,GAAG;AAAA,GAAO;AAAA,CACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MACC,SAAS;AAAA,MAET,WAAU;AAAA,MACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,MAEtG;AAAA,oDAAC;AAAA,UAAW,MAAM,WAAW,WAAW;AAAA,SAAG;AAAA,QAC1C,UAAU,SAAS,SAClB,4CAAC;AAAA,UACC,QAAQ,WAAW,WAAW;AAAA,UAC9B,iBAAiB,sBAAK,kBAAkB,UAAU;AAAA,SACpD,IACE;AAAA,QACJ,4CAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UAAQ,YAAW;AAAA,UAChC;AAAA,SACH;AAAA;AAAA,OAbK,WAcP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,cAAc,UAAU,WAAW,UAAU,IAAI;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,6 +36,7 @@ const Controllers = () => {
|
|
|
36
36
|
props: { xScroll },
|
|
37
37
|
width,
|
|
38
38
|
xScale,
|
|
39
|
+
yScale,
|
|
39
40
|
containerRatio,
|
|
40
41
|
setContainerRatio,
|
|
41
42
|
lastPosition,
|
|
@@ -47,7 +48,7 @@ const Controllers = () => {
|
|
|
47
48
|
setXScrollbarPosition(0);
|
|
48
49
|
lastPosition.current = 0;
|
|
49
50
|
}, [lastPosition, setContainerRatio, setXScrollbarPosition]);
|
|
50
|
-
if (xScale.bandwidth)
|
|
51
|
+
if (xScale.bandwidth || yScale.bandwidth)
|
|
51
52
|
return null;
|
|
52
53
|
if (!xScroll)
|
|
53
54
|
return null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Scroller/Controllers.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const Controllers = () => {\n const {\n props: { xScroll },\n width,\n xScale,\n containerRatio,\n setContainerRatio,\n lastPosition,\n setToolbarRef,\n setXScrollbarPosition,\n } = useContext(ChartContext);\n\n const handleOnClick = useCallback(() => {\n setContainerRatio(1);\n setXScrollbarPosition(0);\n lastPosition.current = 0;\n }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n // if is a bar chart we dont give controls\n if (xScale.bandwidth) return null;\n\n if (!xScroll) return null;\n return (\n <g\n onClick={handleOnClick}\n transform={`translate(${width - 17 * 2},4) scale(1.5,1.5)`}\n strokeLinecap=\"round\"\n opacity=\"\"\n strokeOpacity=\"1\"\n style={{ cursor: 'pointer', opacity: containerRatio > 1 ? 1 : 0.5 }}\n ref={setToolbarRef}\n >\n <rect width=\"17\" height=\"17\" fill=\"white\" stroke=\"#c0c0c0\" strokeWidth=\"1\"></rect>\n <path\n d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\"\n fill=\"#ffffff\"\n stroke=\"#c2c2c2\"\n strokeLinecap=\"round\"\n strokeWidth=\"1\"\n ></path>\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const Controllers = () => {\n const {\n props: { xScroll },\n width,\n xScale,\n yScale,\n containerRatio,\n setContainerRatio,\n lastPosition,\n setToolbarRef,\n setXScrollbarPosition,\n } = useContext(ChartContext);\n\n const handleOnClick = useCallback(() => {\n setContainerRatio(1);\n setXScrollbarPosition(0);\n lastPosition.current = 0;\n }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n // if is a bar chart we dont give controls\n if (xScale.bandwidth || yScale.bandwidth) return null;\n\n if (!xScroll) return null;\n return (\n <g\n onClick={handleOnClick}\n transform={`translate(${width - 17 * 2},4) scale(1.5,1.5)`}\n strokeLinecap=\"round\"\n opacity=\"\"\n strokeOpacity=\"1\"\n style={{ cursor: 'pointer', opacity: containerRatio > 1 ? 1 : 0.5 }}\n ref={setToolbarRef}\n >\n <rect width=\"17\" height=\"17\" fill=\"white\" stroke=\"#c0c0c0\" strokeWidth=\"1\"></rect>\n <path\n d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\"\n fill=\"#ffffff\"\n stroke=\"#c2c2c2\"\n strokeLinecap=\"round\"\n strokeWidth=\"1\"\n ></path>\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BnB;AA3BJ,mBAA+C;AAC/C,0BAA6B;AAEtB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAG3D,MAAI,OAAO,aAAa,OAAO;AAAW,WAAO;AAEjD,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,6CAAC;AAAA,IACC,SAAS;AAAA,IACT,WAAW,aAAa,QAAQ,KAAK;AAAA,IACrC,eAAc;AAAA,IACd,SAAQ;AAAA,IACR,eAAc;AAAA,IACd,OAAO,EAAE,QAAQ,WAAW,SAAS,iBAAiB,IAAI,IAAI,IAAI;AAAA,IAClE,KAAK;AAAA,IAEL;AAAA,kDAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAO;AAAA,QAAK,MAAK;AAAA,QAAQ,QAAO;AAAA,QAAU,aAAY;AAAA,OAAI;AAAA,MAC3E,4CAAC;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,QAAO;AAAA,QACP,eAAc;AAAA,QACd,aAAY;AAAA,OACb;AAAA;AAAA,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,6 +40,7 @@ const ScrollableContainerX = () => {
|
|
|
40
40
|
const {
|
|
41
41
|
props: { scrapper },
|
|
42
42
|
xScrollbarPosition,
|
|
43
|
+
xScale,
|
|
43
44
|
containerRatio,
|
|
44
45
|
innerWidth,
|
|
45
46
|
isGrabbed,
|
|
@@ -62,13 +63,13 @@ const ScrollableContainerX = () => {
|
|
|
62
63
|
const [movingPosition, setMovingPosition] = (0, import_react.useState)(0);
|
|
63
64
|
const handleOnMouseDown = (0, import_react.useCallback)(
|
|
64
65
|
(e) => {
|
|
65
|
-
if (!isGrabbed) {
|
|
66
|
+
if (!isGrabbed && !xScale.bandwidth) {
|
|
66
67
|
setIsZooming(true);
|
|
67
68
|
setStartingPosition(e.clientX);
|
|
68
69
|
setMovingPosition(0);
|
|
69
70
|
}
|
|
70
71
|
},
|
|
71
|
-
[isGrabbed]
|
|
72
|
+
[isGrabbed, xScale]
|
|
72
73
|
);
|
|
73
74
|
const handleOnMouseMove = (0, import_react.useCallback)(
|
|
74
75
|
({ clientX }) => {
|
|
@@ -120,9 +121,9 @@ const ScrollableContainerX = () => {
|
|
|
120
121
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
|
|
121
122
|
transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
|
|
122
123
|
children: [
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
|
|
123
125
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
|
|
124
|
-
Scrappers
|
|
125
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {})
|
|
126
|
+
Scrappers
|
|
126
127
|
]
|
|
127
128
|
}),
|
|
128
129
|
isZooming && movingPosition !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0ByB;AAxBhD,mBAAkE;AAClE,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n const {\n props: { scrapper },\n xScrollbarPosition,\n xScale,\n containerRatio,\n innerWidth,\n isGrabbed,\n setXScrollbarPosition,\n setContainerRatio,\n lastPosition,\n innerHeight,\n internalMargin,\n chartId,\n } = useContext(ChartContext);\n\n const Scrappers = useMemo(() => {\n if (scrapper?.type === 'horizontal') return <Scrapper />;\n if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n return null;\n }, [scrapper?.type]);\n\n const [isZooming, setIsZooming] = useState(false);\n const [startingPosition, setStartingPosition] = useState(0);\n const [movingPosition, setMovingPosition] = useState(0);\n\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed && !xScale.bandwidth) {\n setIsZooming(true);\n setStartingPosition(e.clientX);\n setMovingPosition(0);\n }\n },\n [isGrabbed, xScale],\n );\n const handleOnMouseMove: React.MouseEventHandler = useCallback(\n ({ clientX }) => {\n if (isZooming) setMovingPosition(clientX);\n },\n [isZooming],\n );\n const handleOnMouseUp: React.MouseEventHandler = useCallback(\n (e) => {\n const bounds = e.currentTarget.closest('div').getBoundingClientRect();\n if (!isZooming) return;\n setIsZooming(false);\n const endingPosition = e.clientX;\n\n const diff = Math.abs(startingPosition - endingPosition);\n if (diff <= 0) return;\n const newRatio =\n innerWidth / ((innerWidth * containerRatio) / diff) < 40\n ? innerWidth / 40\n : (innerWidth * containerRatio) / diff;\n const newPosition =\n lastPosition?.current +\n ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) /\n containerRatio;\n\n // if (newPosition < 0) setXScrollbarPosition(0);\n // if is bigger thant innerwidth possible we force the end\n if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n else setXScrollbarPosition(newPosition);\n\n setContainerRatio(newRatio);\n lastPosition.current = newPosition;\n e.stopPropagation();\n },\n [\n containerRatio,\n innerWidth,\n isZooming,\n internalMargin,\n lastPosition,\n setContainerRatio,\n setXScrollbarPosition,\n startingPosition,\n ],\n );\n return (\n <g\n className=\"scrollable-container-x\"\n onMouseDown={handleOnMouseDown}\n onMouseMove={handleOnMouseMove}\n onMouseUp={handleOnMouseUp}\n >\n <g mask={`url(#mask-${chartId})`}>\n <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n <AxisBottom />\n <SeriesFactory />\n {Scrappers}\n </g>\n {isZooming && movingPosition !== 0 ? (\n <rect\n x={(movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left}\n width={Math.abs(movingPosition - startingPosition)}\n height={innerHeight}\n fill=\"orange\"\n style={{ opacity: 0.2 }}\n />\n ) : null}\n </g>\n <ScrollBarX />\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0ByB;AAxBhD,mBAAkE;AAClE,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;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;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AACtD,QAAI,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AAC5D,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,CAAC;AAC1D,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,CAAC;AAEtD,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,CAAC,aAAa,CAAC,OAAO,WAAW;AACnC,qBAAa,IAAI;AACjB,4BAAoB,EAAE,OAAO;AAC7B,0BAAkB,CAAC;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,MAAM;AAAA,EACpB;AACA,QAAM,wBAA6C;AAAA,IACjD,CAAC,EAAE,QAAQ,MAAM;AACf,UAAI;AAAW,0BAAkB,OAAO;AAAA,IAC1C;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,YAAM,SAAS,EAAE,cAAc,QAAQ,KAAK,EAAE,sBAAsB;AACpE,UAAI,CAAC;AAAW;AAChB,mBAAa,KAAK;AAClB,YAAM,iBAAiB,EAAE;AAEzB,YAAM,OAAO,KAAK,IAAI,mBAAmB,cAAc;AACvD,UAAI,QAAQ;AAAG;AACf,YAAM,WACJ,cAAe,aAAa,iBAAkB,QAAQ,KAClD,aAAa,KACZ,aAAa,iBAAkB;AACtC,YAAM,cACJ,cAAc,YACZ,mBAAmB,iBAAiB,iBAAiB,oBAAoB,OAAO,OAAO,eAAe,QACtG;AAIJ,UAAI,cAAc,aAAa,aAAa;AAAU,8BAAsB,aAAa,aAAa,QAAQ;AAAA;AACzG,8BAAsB,WAAW;AAEtC,wBAAkB,QAAQ;AAC1B,mBAAa,UAAU;AACvB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,IAEX;AAAA,mDAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB;AAAA,uDAAC;AAAA,YAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,YAC/C;AAAA,0DAAC,gCAAW;AAAA,cACZ,4CAAC,sCAAc;AAAA,cACd;AAAA;AAAA,WACH;AAAA,UACC,aAAa,mBAAmB,IAC/B,4CAAC;AAAA,YACC,IAAI,iBAAiB,mBAAmB,iBAAiB,oBAAoB,eAAe;AAAA,YAC5F,OAAO,KAAK,IAAI,iBAAiB,gBAAgB;AAAA,YACjD,QAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAO,EAAE,SAAS,IAAI;AAAA,WACxB,IACE;AAAA;AAAA,OACN;AAAA,MACA,4CAAC,gCAAW;AAAA;AAAA,GACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,11 +41,7 @@ const ScrollableContainerY = () => {
|
|
|
41
41
|
props: { scrapper },
|
|
42
42
|
xScrollbarPosition,
|
|
43
43
|
containerRatio,
|
|
44
|
-
|
|
45
|
-
innerWidth,
|
|
46
|
-
internalMargin,
|
|
47
|
-
chartId,
|
|
48
|
-
width
|
|
44
|
+
chartId
|
|
49
45
|
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
50
46
|
const Scrappers = (0, import_react.useMemo)(() => {
|
|
51
47
|
if (scrapper?.type === "horizontal")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerY.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n const {\n props: { scrapper },\n xScrollbarPosition,\n containerRatio,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n const {\n props: { scrapper },\n xScrollbarPosition,\n containerRatio,\n chartId,\n } = useContext(ChartContext);\n\n const Scrappers = useMemo(() => {\n if (scrapper?.type === 'horizontal') return <Scrapper />;\n else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n return null;\n }, [scrapper?.type]);\n\n return (\n <g className=\"scrollable-container-y\">\n <g mask={`url(#mask-y-${chartId})`}>\n <g transform={`translate(0,${-xScrollbarPosition * containerRatio})`}>\n <SeriesFactory />\n {Scrappers}\n <AxisLeft />\n </g>\n </g>\n <ScrollBarY />\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkByB;AAhBhD,mBAA2C;AAC3C,0BAA6B;AAC7B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AACjC,sBAAyB;AAClB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IACX;AAAA,kDAAC;AAAA,QAAE,MAAM,eAAe;AAAA,QACtB,uDAAC;AAAA,UAAE,WAAW,eAAe,CAAC,qBAAqB;AAAA,UACjD;AAAA,wDAAC,sCAAc;AAAA,YACd;AAAA,YACD,4CAAC,4BAAS;AAAA;AAAA,SACZ;AAAA,OACF;AAAA,MACA,4CAAC,gCAAW;AAAA;AAAA,GACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,20 @@ var import_react = require("react");
|
|
|
33
33
|
var import_Rect = require("./Rect");
|
|
34
34
|
var import_ChartContext = require("../ChartContext");
|
|
35
35
|
const HorizontalBars = ({ serie }) => {
|
|
36
|
-
const {
|
|
36
|
+
const {
|
|
37
|
+
props: {
|
|
38
|
+
xAxis: { beginAtZero }
|
|
39
|
+
},
|
|
40
|
+
xScale,
|
|
41
|
+
yScale,
|
|
42
|
+
innerWidth,
|
|
43
|
+
y2Scale,
|
|
44
|
+
subGroupScale,
|
|
45
|
+
colorScale,
|
|
46
|
+
getXValue,
|
|
47
|
+
getYValue,
|
|
48
|
+
chartId
|
|
49
|
+
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
37
50
|
const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
|
|
38
51
|
const negativeSize = innerWidth - xScale(0);
|
|
39
52
|
const positiveSize = innerWidth - negativeSize;
|
|
@@ -44,9 +57,10 @@ const HorizontalBars = ({ serie }) => {
|
|
|
44
57
|
children: serie.data.map((bar, i) => {
|
|
45
58
|
const x = getXValue(bar);
|
|
46
59
|
const y = getYValue(bar);
|
|
47
|
-
const
|
|
60
|
+
const minX = beginAtZero ? 0 : xScale.invert(0);
|
|
61
|
+
const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);
|
|
48
62
|
const height = subGroupScale?.bandwidth();
|
|
49
|
-
const transformX = x < 0 ? xScale(0) - width : xScale(
|
|
63
|
+
const transformX = x < 0 ? xScale(0) - width : xScale(minX);
|
|
50
64
|
const transformY = subGroupScale(serie.name) + finalYScale(y);
|
|
51
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
|
|
52
66
|
transform: `translate(${transformX},${transformY})`,
|
|
@@ -64,6 +78,7 @@ const HorizontalBars = ({ serie }) => {
|
|
|
64
78
|
})
|
|
65
79
|
}),
|
|
66
80
|
[
|
|
81
|
+
beginAtZero,
|
|
67
82
|
chartId,
|
|
68
83
|
colorScale,
|
|
69
84
|
finalYScale,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/series/HorizontalBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n const { xScale
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n const {\n props: {\n xAxis: { beginAtZero },\n },\n xScale,\n yScale,\n innerWidth,\n y2Scale,\n subGroupScale,\n colorScale,\n getXValue,\n getYValue,\n chartId,\n } = useContext(ChartContext);\n const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n const negativeSize = innerWidth - xScale(0);\n const positiveSize = innerWidth - negativeSize;\n\n return useMemo(\n () => (\n <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n {serie.data.map((bar, i) => {\n const x = getXValue(bar);\n const y = getYValue(bar);\n const minX = beginAtZero ? 0 : xScale.invert(0);\n const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);\n const height = subGroupScale?.bandwidth();\n const transformX = x < 0 ? xScale(0) - width : xScale(minX);\n const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n return (\n <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n <Rect\n datum={bar}\n name={serie.name}\n width={width}\n height={height}\n id={bar.key}\n x={0}\n xValue={x}\n yValue={y}\n />\n </g>\n );\n })}\n </g>\n ),\n [\n beginAtZero,\n chartId,\n colorScale,\n finalYScale,\n getXValue,\n getYValue,\n positiveSize,\n serie.data,\n serie.name,\n subGroupScale,\n xScale,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCT;AAvCd,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL,OAAO,EAAE,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,CAAC;AAC1C,QAAM,eAAe,aAAa;AAElC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,OAAO,cAAc,IAAI,OAAO,OAAO,CAAC;AAC9C,cAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,OAAO,IAAI;AACxE,cAAM,SAAS,eAAe,UAAU;AACxC,cAAM,aAAa,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,OAAO,IAAI;AAC1D,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,eACE,4CAAC;AAAA,UAAgB,WAAW,aAAa,cAAc;AAAA,UACrD,sDAAC;AAAA,YACC,OAAO;AAAA,YACP,MAAM,MAAM;AAAA,YACZ;AAAA,YACA;AAAA,YACA,IAAI,IAAI;AAAA,YACR,GAAG;AAAA,YACH,QAAQ;AAAA,YACR,QAAQ;AAAA,WACV;AAAA,WAVM,IAAI,GAWZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;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/ClipPaths.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n const {\n innerWidth,\n containerRatio,\n innerHeight,\n chartId,\n yScale,\n props: { xAxis, yAxis },\n } = useContext(ChartContext);\n\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n return (\n <>\n <defs>\n <clipPath id={`rect-focus-ring-${chartId}`}>\n {yScroll ? (\n <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n ) : (\n <rect width={innerWidth * containerRatio} height={innerHeight + 4} y={-4} />\n )}\n </clipPath>\n </defs>\n {/* \n this can be useful when implementing animations\n <defs>\n <clipPath id={`rects-positive-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n </clipPath>\n </defs>\n {innerHeight - yScale(0) > 0 ? (\n <defs>\n <clipPath id={`rects-negative-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n </clipPath>\n </defs>\n ) : null} */}\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkBnB,mBAIQ,WAJR;AAhBJ,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE,8BAAC;AAAA,MACC,8BAAC;AAAA,QAAS,IAAI,mBAAmB;AAAA,QAC9B,oBACC,oBAAC;AAAA,UAAK,OAAO,aAAa;AAAA,UAAG,QAAQ,cAAc;AAAA,UAAgB,GAAG;AAAA,SAAI,IAE1E,oBAAC;AAAA,UAAK,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n const {\n innerWidth,\n containerRatio,\n innerHeight,\n chartId,\n yScale,\n props: { xAxis, yAxis },\n } = useContext(ChartContext);\n\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n return (\n <>\n <defs>\n <clipPath id={`rect-focus-ring-${chartId}`}>\n {yScroll ? (\n <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n ) : (\n <rect width={(innerWidth + 4) * containerRatio} height={innerHeight + 4} y={-4} />\n )}\n </clipPath>\n </defs>\n {/* \n this can be useful when implementing animations\n <defs>\n <clipPath id={`rects-positive-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n </clipPath>\n </defs>\n {innerHeight - yScale(0) > 0 ? (\n <defs>\n <clipPath id={`rects-negative-${chartId}`}>\n <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n </clipPath>\n </defs>\n ) : null} */}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkBnB,mBAIQ,WAJR;AAhBJ,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE,8BAAC;AAAA,MACC,8BAAC;AAAA,QAAS,IAAI,mBAAmB;AAAA,QAC9B,oBACC,oBAAC;AAAA,UAAK,OAAO,aAAa;AAAA,UAAG,QAAQ,cAAc;AAAA,UAAgB,GAAG;AAAA,SAAI,IAE1E,oBAAC;AAAA,UAAK,QAAQ,aAAa,KAAK;AAAA,UAAgB,QAAQ,cAAc;AAAA,UAAG,GAAG;AAAA,SAAI;AAAA,OAEpF;AAAA,KACF;AAAA,GAeF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,7 +59,7 @@ const LegendItem = ({ domainValue }) => {
|
|
|
59
59
|
() => /* @__PURE__ */ jsxs("g", {
|
|
60
60
|
onClick: handleOnClick,
|
|
61
61
|
className: "cell",
|
|
62
|
-
style: hiddenSeries.includes(domainValue) ? { opacity: 0.2 } :
|
|
62
|
+
style: hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: "pointer" } : { cursor: "pointer" },
|
|
63
63
|
children: [
|
|
64
64
|
/* @__PURE__ */ jsx(LegendIcon, {
|
|
65
65
|
fill: colorScale(domainValue)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n props: { series, types },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData.pointStyle] ??\n (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2 } :
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIW,cAsC5B,YAtC4B;AAJlC,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,CAAC,UAAU,oBAAC;AAAA,EAAK,IAAI;AAAA,EAAK,IAAI;AAAA,EAAI,IAAI;AAAA,EAAG,IAAI;AAAA,EAAI,GAAG;AAAA,EAAO,aAAa;AAAA,CAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAO,GAAG;AAAA,EAAI,GAAG;AAAA,CAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAK,GAAG;AAAA,EAAI,GAAG;AAAA,EAAI,OAAO;AAAA,EAAI,QAAQ;AAAA,EAAK,GAAG;AAAA,CAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,oBAAC;AAAA,EAAE,WAAU;AAAA,EACX,8BAAC;AAAA,IAAK,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,OAAO;AAAA,IAAI,QAAQ;AAAA,IAAK,GAAG;AAAA,GAAO;AAAA,CACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MACC,SAAS;AAAA,MAET,WAAU;AAAA,MACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,IAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n props: { series, types },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData.pointStyle] ??\n (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n >\n <LegendIcon fill={colorScale(domainValue)} />\n {serieData.type === 'line' ? (\n <LegendItemLine\n stroke={colorScale(domainValue)}\n strokeDasharray={LINE.DASH_STYLE_VALUES[serieData.dashStyle]}\n />\n ) : null}\n <text x={24} dy=\".32em\" fontWeight=\"600\">\n {domainValue}\n </text>\n </g>\n ),\n\n [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIW,cAsC5B,YAtC4B;AAJlC,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,CAAC,UAAU,oBAAC;AAAA,EAAK,IAAI;AAAA,EAAK,IAAI;AAAA,EAAI,IAAI;AAAA,EAAG,IAAI;AAAA,EAAI,GAAG;AAAA,EAAO,aAAa;AAAA,CAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAO,GAAG;AAAA,EAAI,GAAG;AAAA,CAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAK,GAAG;AAAA,EAAI,GAAG;AAAA,EAAI,OAAO;AAAA,EAAI,QAAQ;AAAA,EAAK,GAAG;AAAA,CAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,oBAAC;AAAA,EAAE,WAAU;AAAA,EACX,8BAAC;AAAA,IAAK,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,OAAO;AAAA,IAAI,QAAQ;AAAA,IAAK,GAAG;AAAA,GAAO;AAAA,CACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MACC,SAAS;AAAA,MAET,WAAU;AAAA,MACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,MAEtG;AAAA,4BAAC;AAAA,UAAW,MAAM,WAAW,WAAW;AAAA,SAAG;AAAA,QAC1C,UAAU,SAAS,SAClB,oBAAC;AAAA,UACC,QAAQ,WAAW,WAAW;AAAA,UAC9B,iBAAiB,KAAK,kBAAkB,UAAU;AAAA,SACpD,IACE;AAAA,QACJ,oBAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UAAQ,YAAW;AAAA,UAChC;AAAA,SACH;AAAA;AAAA,OAbK,WAcP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,cAAc,UAAU,WAAW,UAAU,IAAI;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ const Controllers = () => {
|
|
|
7
7
|
props: { xScroll },
|
|
8
8
|
width,
|
|
9
9
|
xScale,
|
|
10
|
+
yScale,
|
|
10
11
|
containerRatio,
|
|
11
12
|
setContainerRatio,
|
|
12
13
|
lastPosition,
|
|
@@ -18,7 +19,7 @@ const Controllers = () => {
|
|
|
18
19
|
setXScrollbarPosition(0);
|
|
19
20
|
lastPosition.current = 0;
|
|
20
21
|
}, [lastPosition, setContainerRatio, setXScrollbarPosition]);
|
|
21
|
-
if (xScale.bandwidth)
|
|
22
|
+
if (xScale.bandwidth || yScale.bandwidth)
|
|
22
23
|
return null;
|
|
23
24
|
if (!xScroll)
|
|
24
25
|
return null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/Controllers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const Controllers = () => {\n const {\n props: { xScroll },\n width,\n xScale,\n containerRatio,\n setContainerRatio,\n lastPosition,\n setToolbarRef,\n setXScrollbarPosition,\n } = useContext(ChartContext);\n\n const handleOnClick = useCallback(() => {\n setContainerRatio(1);\n setXScrollbarPosition(0);\n lastPosition.current = 0;\n }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n // if is a bar chart we dont give controls\n if (xScale.bandwidth) return null;\n\n if (!xScroll) return null;\n return (\n <g\n onClick={handleOnClick}\n transform={`translate(${width - 17 * 2},4) scale(1.5,1.5)`}\n strokeLinecap=\"round\"\n opacity=\"\"\n strokeOpacity=\"1\"\n style={{ cursor: 'pointer', opacity: containerRatio > 1 ? 1 : 0.5 }}\n ref={setToolbarRef}\n >\n <rect width=\"17\" height=\"17\" fill=\"white\" stroke=\"#c0c0c0\" strokeWidth=\"1\"></rect>\n <path\n d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\"\n fill=\"#ffffff\"\n stroke=\"#c2c2c2\"\n strokeLinecap=\"round\"\n strokeWidth=\"1\"\n ></path>\n </g>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const Controllers = () => {\n const {\n props: { xScroll },\n width,\n xScale,\n yScale,\n containerRatio,\n setContainerRatio,\n lastPosition,\n setToolbarRef,\n setXScrollbarPosition,\n } = useContext(ChartContext);\n\n const handleOnClick = useCallback(() => {\n setContainerRatio(1);\n setXScrollbarPosition(0);\n lastPosition.current = 0;\n }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n // if is a bar chart we dont give controls\n if (xScale.bandwidth || yScale.bandwidth) return null;\n\n if (!xScroll) return null;\n return (\n <g\n onClick={handleOnClick}\n transform={`translate(${width - 17 * 2},4) scale(1.5,1.5)`}\n strokeLinecap=\"round\"\n opacity=\"\"\n strokeOpacity=\"1\"\n style={{ cursor: 'pointer', opacity: containerRatio > 1 ? 1 : 0.5 }}\n ref={setToolbarRef}\n >\n <rect width=\"17\" height=\"17\" fill=\"white\" stroke=\"#c0c0c0\" strokeWidth=\"1\"></rect>\n <path\n d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\"\n fill=\"#ffffff\"\n stroke=\"#c2c2c2\"\n strokeLinecap=\"round\"\n strokeWidth=\"1\"\n ></path>\n </g>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6BnB,SASE,KATF;AA3BJ,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,oBAAoB;AAEtB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,gBAAgB,YAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAG3D,MAAI,OAAO,aAAa,OAAO;AAAW,WAAO;AAEjD,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,qBAAC;AAAA,IACC,SAAS;AAAA,IACT,WAAW,aAAa,QAAQ,KAAK;AAAA,IACrC,eAAc;AAAA,IACd,SAAQ;AAAA,IACR,eAAc;AAAA,IACd,OAAO,EAAE,QAAQ,WAAW,SAAS,iBAAiB,IAAI,IAAI,IAAI;AAAA,IAClE,KAAK;AAAA,IAEL;AAAA,0BAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAO;AAAA,QAAK,MAAK;AAAA,QAAQ,QAAO;AAAA,QAAU,aAAY;AAAA,OAAI;AAAA,MAC3E,oBAAC;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,QAAO;AAAA,QACP,eAAc;AAAA,QACd,aAAY;AAAA,OACb;AAAA;AAAA,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,6 +11,7 @@ const ScrollableContainerX = () => {
|
|
|
11
11
|
const {
|
|
12
12
|
props: { scrapper },
|
|
13
13
|
xScrollbarPosition,
|
|
14
|
+
xScale,
|
|
14
15
|
containerRatio,
|
|
15
16
|
innerWidth,
|
|
16
17
|
isGrabbed,
|
|
@@ -33,13 +34,13 @@ const ScrollableContainerX = () => {
|
|
|
33
34
|
const [movingPosition, setMovingPosition] = useState(0);
|
|
34
35
|
const handleOnMouseDown = useCallback(
|
|
35
36
|
(e) => {
|
|
36
|
-
if (!isGrabbed) {
|
|
37
|
+
if (!isGrabbed && !xScale.bandwidth) {
|
|
37
38
|
setIsZooming(true);
|
|
38
39
|
setStartingPosition(e.clientX);
|
|
39
40
|
setMovingPosition(0);
|
|
40
41
|
}
|
|
41
42
|
},
|
|
42
|
-
[isGrabbed]
|
|
43
|
+
[isGrabbed, xScale]
|
|
43
44
|
);
|
|
44
45
|
const handleOnMouseMove = useCallback(
|
|
45
46
|
({ clientX }) => {
|
|
@@ -91,9 +92,9 @@ const ScrollableContainerX = () => {
|
|
|
91
92
|
/* @__PURE__ */ jsxs("g", {
|
|
92
93
|
transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
|
|
93
94
|
children: [
|
|
95
|
+
/* @__PURE__ */ jsx(AxisBottom, {}),
|
|
94
96
|
/* @__PURE__ */ jsx(SeriesFactory, {}),
|
|
95
|
-
Scrappers
|
|
96
|
-
/* @__PURE__ */ jsx(AxisBottom, {})
|
|
97
|
+
Scrappers
|
|
97
98
|
]
|
|
98
99
|
}),
|
|
99
100
|
isZooming && movingPosition !== 0 ? /* @__PURE__ */ jsx("rect", {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0ByB,cAuExC,YAvEwC;AAxBhD,SAAgB,YAAY,UAAU,aAAa,eAAe;AAClE,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n const {\n props: { scrapper },\n xScrollbarPosition,\n xScale,\n containerRatio,\n innerWidth,\n isGrabbed,\n setXScrollbarPosition,\n setContainerRatio,\n lastPosition,\n innerHeight,\n internalMargin,\n chartId,\n } = useContext(ChartContext);\n\n const Scrappers = useMemo(() => {\n if (scrapper?.type === 'horizontal') return <Scrapper />;\n if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n return null;\n }, [scrapper?.type]);\n\n const [isZooming, setIsZooming] = useState(false);\n const [startingPosition, setStartingPosition] = useState(0);\n const [movingPosition, setMovingPosition] = useState(0);\n\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed && !xScale.bandwidth) {\n setIsZooming(true);\n setStartingPosition(e.clientX);\n setMovingPosition(0);\n }\n },\n [isGrabbed, xScale],\n );\n const handleOnMouseMove: React.MouseEventHandler = useCallback(\n ({ clientX }) => {\n if (isZooming) setMovingPosition(clientX);\n },\n [isZooming],\n );\n const handleOnMouseUp: React.MouseEventHandler = useCallback(\n (e) => {\n const bounds = e.currentTarget.closest('div').getBoundingClientRect();\n if (!isZooming) return;\n setIsZooming(false);\n const endingPosition = e.clientX;\n\n const diff = Math.abs(startingPosition - endingPosition);\n if (diff <= 0) return;\n const newRatio =\n innerWidth / ((innerWidth * containerRatio) / diff) < 40\n ? innerWidth / 40\n : (innerWidth * containerRatio) / diff;\n const newPosition =\n lastPosition?.current +\n ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) /\n containerRatio;\n\n // if (newPosition < 0) setXScrollbarPosition(0);\n // if is bigger thant innerwidth possible we force the end\n if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n else setXScrollbarPosition(newPosition);\n\n setContainerRatio(newRatio);\n lastPosition.current = newPosition;\n e.stopPropagation();\n },\n [\n containerRatio,\n innerWidth,\n isZooming,\n internalMargin,\n lastPosition,\n setContainerRatio,\n setXScrollbarPosition,\n startingPosition,\n ],\n );\n return (\n <g\n className=\"scrollable-container-x\"\n onMouseDown={handleOnMouseDown}\n onMouseMove={handleOnMouseMove}\n onMouseUp={handleOnMouseUp}\n >\n <g mask={`url(#mask-${chartId})`}>\n <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n <AxisBottom />\n <SeriesFactory />\n {Scrappers}\n </g>\n {isZooming && movingPosition !== 0 ? (\n <rect\n x={(movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left}\n width={Math.abs(movingPosition - startingPosition)}\n height={innerHeight}\n fill=\"orange\"\n style={{ opacity: 0.2 }}\n />\n ) : null}\n </g>\n <ScrollBarX />\n </g>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,11 +12,7 @@ const ScrollableContainerY = () => {
|
|
|
12
12
|
props: { scrapper },
|
|
13
13
|
xScrollbarPosition,
|
|
14
14
|
containerRatio,
|
|
15
|
-
|
|
16
|
-
innerWidth,
|
|
17
|
-
internalMargin,
|
|
18
|
-
chartId,
|
|
19
|
-
width
|
|
15
|
+
chartId
|
|
20
16
|
} = useContext(ChartContext);
|
|
21
17
|
const Scrappers = useMemo(() => {
|
|
22
18
|
if (scrapper?.type === "horizontal")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerY.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n const {\n props: { scrapper },\n xScrollbarPosition,\n containerRatio,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n const {\n props: { scrapper },\n xScrollbarPosition,\n containerRatio,\n chartId,\n } = useContext(ChartContext);\n\n const Scrappers = useMemo(() => {\n if (scrapper?.type === 'horizontal') return <Scrapper />;\n else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n return null;\n }, [scrapper?.type]);\n\n return (\n <g className=\"scrollable-container-y\">\n <g mask={`url(#mask-y-${chartId})`}>\n <g transform={`translate(0,${-xScrollbarPosition * containerRatio})`}>\n <SeriesFactory />\n {Scrappers}\n <AxisLeft />\n </g>\n </g>\n <ScrollBarY />\n </g>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkByB,cAQxC,YARwC;AAhBhD,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AAClB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,oBAAC,YAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,oBAAC,oBAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,qBAAC;AAAA,IAAE,WAAU;AAAA,IACX;AAAA,0BAAC;AAAA,QAAE,MAAM,eAAe;AAAA,QACtB,+BAAC;AAAA,UAAE,WAAW,eAAe,CAAC,qBAAqB;AAAA,UACjD;AAAA,gCAAC,iBAAc;AAAA,YACd;AAAA,YACD,oBAAC,YAAS;AAAA;AAAA,SACZ;AAAA,OACF;AAAA,MACA,oBAAC,cAAW;AAAA;AAAA,GACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,20 @@ import { useContext, useMemo } from "react";
|
|
|
4
4
|
import { Rect } from "./Rect";
|
|
5
5
|
import { ChartContext } from "../ChartContext";
|
|
6
6
|
const HorizontalBars = ({ serie }) => {
|
|
7
|
-
const {
|
|
7
|
+
const {
|
|
8
|
+
props: {
|
|
9
|
+
xAxis: { beginAtZero }
|
|
10
|
+
},
|
|
11
|
+
xScale,
|
|
12
|
+
yScale,
|
|
13
|
+
innerWidth,
|
|
14
|
+
y2Scale,
|
|
15
|
+
subGroupScale,
|
|
16
|
+
colorScale,
|
|
17
|
+
getXValue,
|
|
18
|
+
getYValue,
|
|
19
|
+
chartId
|
|
20
|
+
} = useContext(ChartContext);
|
|
8
21
|
const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
|
|
9
22
|
const negativeSize = innerWidth - xScale(0);
|
|
10
23
|
const positiveSize = innerWidth - negativeSize;
|
|
@@ -15,9 +28,10 @@ const HorizontalBars = ({ serie }) => {
|
|
|
15
28
|
children: serie.data.map((bar, i) => {
|
|
16
29
|
const x = getXValue(bar);
|
|
17
30
|
const y = getYValue(bar);
|
|
18
|
-
const
|
|
31
|
+
const minX = beginAtZero ? 0 : xScale.invert(0);
|
|
32
|
+
const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);
|
|
19
33
|
const height = subGroupScale?.bandwidth();
|
|
20
|
-
const transformX = x < 0 ? xScale(0) - width : xScale(
|
|
34
|
+
const transformX = x < 0 ? xScale(0) - width : xScale(minX);
|
|
21
35
|
const transformY = subGroupScale(serie.name) + finalYScale(y);
|
|
22
36
|
return /* @__PURE__ */ jsx("g", {
|
|
23
37
|
transform: `translate(${transformX},${transformY})`,
|
|
@@ -35,6 +49,7 @@ const HorizontalBars = ({ serie }) => {
|
|
|
35
49
|
})
|
|
36
50
|
}),
|
|
37
51
|
[
|
|
52
|
+
beginAtZero,
|
|
38
53
|
chartId,
|
|
39
54
|
colorScale,
|
|
40
55
|
finalYScale,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/HorizontalBars.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n const { xScale
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n const {\n props: {\n xAxis: { beginAtZero },\n },\n xScale,\n yScale,\n innerWidth,\n y2Scale,\n subGroupScale,\n colorScale,\n getXValue,\n getYValue,\n chartId,\n } = useContext(ChartContext);\n const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n const negativeSize = innerWidth - xScale(0);\n const positiveSize = innerWidth - negativeSize;\n\n return useMemo(\n () => (\n <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n {serie.data.map((bar, i) => {\n const x = getXValue(bar);\n const y = getYValue(bar);\n const minX = beginAtZero ? 0 : xScale.invert(0);\n const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);\n const height = subGroupScale?.bandwidth();\n const transformX = x < 0 ? xScale(0) - width : xScale(minX);\n const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n return (\n <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n <Rect\n datum={bar}\n name={serie.name}\n width={width}\n height={height}\n id={bar.key}\n x={0}\n xValue={x}\n yValue={y}\n />\n </g>\n );\n })}\n </g>\n ),\n [\n beginAtZero,\n chartId,\n colorScale,\n finalYScale,\n getXValue,\n getYValue,\n positiveSize,\n serie.data,\n serie.name,\n subGroupScale,\n xScale,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwCT;AAvCd,SAAgB,YAAY,eAAe;AAC3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL,OAAO,EAAE,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,CAAC;AAC1C,QAAM,eAAe,aAAa;AAElC,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,OAAO,cAAc,IAAI,OAAO,OAAO,CAAC;AAC9C,cAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,OAAO,IAAI;AACxE,cAAM,SAAS,eAAe,UAAU;AACxC,cAAM,aAAa,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,OAAO,IAAI;AAC1D,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,eACE,oBAAC;AAAA,UAAgB,WAAW,aAAa,cAAc;AAAA,UACrD,8BAAC;AAAA,YACC,OAAO;AAAA,YACP,MAAM,MAAM;AAAA,YACZ;AAAA,YACA;AAAA,YACA,IAAI,IAAI;AAAA,YACR,GAAG;AAAA,YACH,QAAQ;AAAA,YACR,QAAQ;AAAA,WACV;AAAA,WAVM,IAAI,GAWZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;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.12.0-
|
|
3
|
+
"version": "3.12.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-popperjs": "3.12.0-
|
|
39
|
-
"@elliemae/ds-system": "3.12.0-
|
|
40
|
-
"@elliemae/ds-utilities": "3.12.0-
|
|
38
|
+
"@elliemae/ds-popperjs": "3.12.0-rc.0",
|
|
39
|
+
"@elliemae/ds-system": "3.12.0-rc.0",
|
|
40
|
+
"@elliemae/ds-utilities": "3.12.0-rc.0",
|
|
41
41
|
"d3": "~7.6.1",
|
|
42
42
|
"d3-scale": "~4.0.2",
|
|
43
43
|
"d3-shape": "~3.1.0",
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
-
mod
|
|
23
|
-
));
|
|
24
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
-
var Axes_exports = {};
|
|
26
|
-
__export(Axes_exports, {
|
|
27
|
-
Axes: () => Axes
|
|
28
|
-
});
|
|
29
|
-
module.exports = __toCommonJS(Axes_exports);
|
|
30
|
-
var React = __toESM(require("react"));
|
|
31
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
-
var import_react = require("react");
|
|
33
|
-
var import_ChartContext = require("../../ChartContext");
|
|
34
|
-
var import_ScrollableContainerX = require("../Scroller/ScrollableContainerX");
|
|
35
|
-
var import_ScrollableContainerY = require("../Scroller/ScrollableContainerY");
|
|
36
|
-
var import_AxisBottom = require("./AxisBottom");
|
|
37
|
-
var import_AxisRight = require("./AxisRight");
|
|
38
|
-
var import_AxisLeft = require("./AxisLeft");
|
|
39
|
-
var import_SeriesFactory = require("../SeriesFactory");
|
|
40
|
-
var import_Scrapper = require("../Scrapper/Scrapper");
|
|
41
|
-
var import_VerticalScrapper = require("../Scrapper/VerticalScrapper");
|
|
42
|
-
const Axes = () => {
|
|
43
|
-
const {
|
|
44
|
-
props: { scrapper, xAxis, yAxis, xScroll }
|
|
45
|
-
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
46
|
-
const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
|
|
47
|
-
if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {
|
|
48
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
49
|
-
children: [
|
|
50
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),
|
|
51
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
|
|
52
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerX.ScrollableContainerX, {})
|
|
53
|
-
]
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
if (yScroll) {
|
|
57
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
58
|
-
children: [
|
|
59
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
|
|
60
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerY.ScrollableContainerY, {})
|
|
61
|
-
]
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
65
|
-
children: [
|
|
66
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),
|
|
67
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
|
|
68
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
|
|
69
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
|
|
70
|
-
scrapper?.type === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {}) : null,
|
|
71
|
-
scrapper?.type === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {}) : null
|
|
72
|
-
]
|
|
73
|
-
});
|
|
74
|
-
};
|
|
75
|
-
//# sourceMappingURL=Axes.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../src/graphs/Chart/parts/Axis/Axes.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\nimport { ScrollableContainerX } from '../Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from '../Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './AxisBottom';\nimport { AxisRight } from './AxisRight';\nimport { AxisLeft } from './AxisLeft';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const Axes = () => {\n const {\n props: { scrapper, xAxis, yAxis, xScroll },\n } = useContext(ChartContext);\n\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n // retrocompatibility we use the prop to\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};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBjB;AAtBN,mBAAkC;AAElC,0BAA6B;AAC7B,kCAAqC;AACrC,kCAAqC;AAErC,wBAA2B;AAC3B,uBAA0B;AAC1B,sBAAyB;AACzB,2BAA8B;AAC9B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,OAAO,MAAM;AACxB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO,OAAO,QAAQ;AAAA,EAC3C,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAGtD,MAAI,WAAW,MAAM,UAAU,cAAc,QAAQ,GAAG;AACtD,WACE;AAAA,MACE;AAAA,oDAAC,8BAAU;AAAA,QACX,4CAAC,4BAAS;AAAA,QACV,4CAAC,oDAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE;AAAA,MACE;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,oDAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,SACE;AAAA,IACE;AAAA,kDAAC,8BAAU;AAAA,MACX,4CAAC,4BAAS;AAAA,MACV,4CAAC,gCAAW;AAAA,MACZ,4CAAC,sCAAc;AAAA,MACd,UAAU,SAAS,eAAe,4CAAC,4BAAS,IAAK;AAAA,MACjD,UAAU,SAAS,aAAa,4CAAC,4CAAiB,IAAK;AAAA;AAAA,GAC1D;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext } from "react";
|
|
4
|
-
import { ChartContext } from "../../ChartContext";
|
|
5
|
-
import { ScrollableContainerX } from "../Scroller/ScrollableContainerX";
|
|
6
|
-
import { ScrollableContainerY } from "../Scroller/ScrollableContainerY";
|
|
7
|
-
import { AxisBottom } from "./AxisBottom";
|
|
8
|
-
import { AxisRight } from "./AxisRight";
|
|
9
|
-
import { AxisLeft } from "./AxisLeft";
|
|
10
|
-
import { SeriesFactory } from "../SeriesFactory";
|
|
11
|
-
import { Scrapper } from "../Scrapper/Scrapper";
|
|
12
|
-
import { VerticalScrapper } from "../Scrapper/VerticalScrapper";
|
|
13
|
-
const Axes = () => {
|
|
14
|
-
const {
|
|
15
|
-
props: { scrapper, xAxis, yAxis, xScroll }
|
|
16
|
-
} = useContext(ChartContext);
|
|
17
|
-
const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
|
|
18
|
-
if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {
|
|
19
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
20
|
-
children: [
|
|
21
|
-
/* @__PURE__ */ jsx(AxisRight, {}),
|
|
22
|
-
/* @__PURE__ */ jsx(AxisLeft, {}),
|
|
23
|
-
/* @__PURE__ */ jsx(ScrollableContainerX, {})
|
|
24
|
-
]
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
if (yScroll) {
|
|
28
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
29
|
-
children: [
|
|
30
|
-
/* @__PURE__ */ jsx(AxisBottom, {}),
|
|
31
|
-
/* @__PURE__ */ jsx(ScrollableContainerY, {})
|
|
32
|
-
]
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
36
|
-
children: [
|
|
37
|
-
/* @__PURE__ */ jsx(AxisRight, {}),
|
|
38
|
-
/* @__PURE__ */ jsx(AxisLeft, {}),
|
|
39
|
-
/* @__PURE__ */ jsx(AxisBottom, {}),
|
|
40
|
-
/* @__PURE__ */ jsx(SeriesFactory, {}),
|
|
41
|
-
scrapper?.type === "horizontal" ? /* @__PURE__ */ jsx(Scrapper, {}) : null,
|
|
42
|
-
scrapper?.type === "vertical" ? /* @__PURE__ */ jsx(VerticalScrapper, {}) : null
|
|
43
|
-
]
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
export {
|
|
47
|
-
Axes
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=Axes.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/Axes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\nimport { ScrollableContainerX } from '../Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from '../Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './AxisBottom';\nimport { AxisRight } from './AxisRight';\nimport { AxisLeft } from './AxisLeft';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const Axes = () => {\n const {\n props: { scrapper, xAxis, yAxis, xScroll },\n } = useContext(ChartContext);\n\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n // retrocompatibility we use the prop to\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};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsBjB,mBACE,KADF;AAtBN,SAAgB,kBAAkB;AAElC,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAC1B,MAAM,OAAO,MAAM;AACxB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO,OAAO,QAAQ;AAAA,EAC3C,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAGtD,MAAI,WAAW,MAAM,UAAU,cAAc,QAAQ,GAAG;AACtD,WACE;AAAA,MACE;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,YAAS;AAAA,QACV,oBAAC,wBAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE;AAAA,MACE;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,wBAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,SACE;AAAA,IACE;AAAA,0BAAC,aAAU;AAAA,MACX,oBAAC,YAAS;AAAA,MACV,oBAAC,cAAW;AAAA,MACZ,oBAAC,iBAAc;AAAA,MACd,UAAU,SAAS,eAAe,oBAAC,YAAS,IAAK;AAAA,MACjD,UAAU,SAAS,aAAa,oBAAC,oBAAiB,IAAK;AAAA;AAAA,GAC1D;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|