@elliemae/ds-dataviz 3.14.0-rc.3 → 3.14.0-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/graphs/Chart/config/useGetters.js +12 -0
- package/dist/cjs/graphs/Chart/config/useGetters.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useGetters.js +12 -0
- package/dist/esm/graphs/Chart/config/useGetters.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js.map +2 -2
- package/dist/types/graphs/Chart/config/useChart.d.ts +6 -6
- package/dist/types/graphs/Chart/config/useGetters.d.ts +6 -6
- package/package.json +4 -4
|
@@ -32,6 +32,8 @@ var import_react = require("react");
|
|
|
32
32
|
const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) => {
|
|
33
33
|
const getXValue = (0, import_react.useCallback)(
|
|
34
34
|
(datum) => {
|
|
35
|
+
if (!datum)
|
|
36
|
+
return null;
|
|
35
37
|
if (!isHorizontal) {
|
|
36
38
|
if (xAxis?.cols?.[datum.position]) {
|
|
37
39
|
return xAxis?.cols?.[datum.position];
|
|
@@ -49,6 +51,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
49
51
|
);
|
|
50
52
|
const getYValue = (0, import_react.useCallback)(
|
|
51
53
|
(datum) => {
|
|
54
|
+
if (!datum)
|
|
55
|
+
return null;
|
|
52
56
|
if (!isHorizontal) {
|
|
53
57
|
if (typeof datum.value === "number") {
|
|
54
58
|
return datum.value;
|
|
@@ -66,6 +70,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
66
70
|
);
|
|
67
71
|
const getXScaleValue = (0, import_react.useCallback)(
|
|
68
72
|
(datum) => {
|
|
73
|
+
if (!datum)
|
|
74
|
+
return null;
|
|
69
75
|
if (xAxis.type === "linear") {
|
|
70
76
|
return xScale(getXValue(datum));
|
|
71
77
|
}
|
|
@@ -75,6 +81,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
75
81
|
);
|
|
76
82
|
const getYScaleValue = (0, import_react.useCallback)(
|
|
77
83
|
(datum) => {
|
|
84
|
+
if (!datum)
|
|
85
|
+
return null;
|
|
78
86
|
const finalYScale = datum?.scale === "y2" ? y2Scale : yScale;
|
|
79
87
|
if (yAxis.type === "band") {
|
|
80
88
|
return finalYScale(getYValue(datum));
|
|
@@ -85,6 +93,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
85
93
|
);
|
|
86
94
|
const getYValueFormatted = (0, import_react.useCallback)(
|
|
87
95
|
(datum) => {
|
|
96
|
+
if (!datum)
|
|
97
|
+
return null;
|
|
88
98
|
const value = getYValue(datum);
|
|
89
99
|
if (typeof yAxis.tick?.tickFormat === "function")
|
|
90
100
|
return yAxis.tick.tickFormat(value);
|
|
@@ -94,6 +104,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
94
104
|
);
|
|
95
105
|
const getXValueFormatted = (0, import_react.useCallback)(
|
|
96
106
|
(datum) => {
|
|
107
|
+
if (!datum)
|
|
108
|
+
return null;
|
|
97
109
|
const value = getXValue(datum);
|
|
98
110
|
if (typeof xAxis.tick?.tickFormat === "function")
|
|
99
111
|
return xAxis.tick.tickFormat(value);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useGetters.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n xAxis: DSChartT.AxisT;\n yAxis: DSChartT.AxisT;\n isHorizontal: boolean;\n xScale: DSChartT.Scales;\n yScale: DSChartT.Scales;\n y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n const getXValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!isHorizontal) {\n if (xAxis?.cols?.[datum.position]) {\n return xAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.x;\n return datum.position.toString();\n }\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.x;\n },\n [isHorizontal, xAxis?.cols],\n );\n\n const getYValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!isHorizontal) {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.y;\n }\n if (yAxis?.cols?.[datum.position]) {\n return yAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.y;\n return datum.position.toString();\n },\n [isHorizontal, yAxis?.cols],\n );\n\n const getXScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (xAxis.type === 'linear') {\n return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n }\n return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n },\n [getXValue, xAxis.type, xScale],\n );\n\n const getYScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n if (yAxis.type === 'band') {\n return (finalYScale as ScaleBand<string>)(getYValue(datum) as string);\n }\n return (finalYScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n },\n [getYValue, y2Scale, yAxis.type, yScale],\n );\n\n const getYValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n const value = getYValue(datum);\n if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n return value;\n },\n [getYValue, yAxis.tick],\n );\n\n const getXValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n const value = getXValue(datum);\n if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n return value;\n },\n [getXValue, xAxis.tick],\n );\n\n return useMemo(\n () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,UAAU,KAAK,CAAW;AAAA,MACtE;AACA,aAAQ,YAAmD,UAAU,KAAK,CAAW;AAAA,IACvF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n xAxis: DSChartT.AxisT;\n yAxis: DSChartT.AxisT;\n isHorizontal: boolean;\n xScale: DSChartT.Scales;\n yScale: DSChartT.Scales;\n y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n const getXValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n if (!isHorizontal) {\n if (xAxis?.cols?.[datum.position]) {\n return xAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.x;\n return datum.position.toString();\n }\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.x;\n },\n [isHorizontal, xAxis?.cols],\n );\n\n const getYValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n if (!isHorizontal) {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.y;\n }\n if (yAxis?.cols?.[datum.position]) {\n return yAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.y;\n return datum.position.toString();\n },\n [isHorizontal, yAxis?.cols],\n );\n\n const getXScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n if (xAxis.type === 'linear') {\n return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n }\n return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n },\n [getXValue, xAxis.type, xScale],\n );\n\n const getYScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n if (yAxis.type === 'band') {\n return (finalYScale as ScaleBand<string>)(getYValue(datum) as string);\n }\n return (finalYScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n },\n [getYValue, y2Scale, yAxis.type, yScale],\n );\n\n const getYValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n const value = getYValue(datum);\n if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n return value;\n },\n [getYValue, yAxis.tick],\n );\n\n const getXValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n const value = getXValue(datum);\n if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n return value;\n },\n [getXValue, xAxis.tick],\n );\n\n return useMemo(\n () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AACnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,UAAU,KAAK,CAAW;AAAA,MACtE;AACA,aAAQ,YAAmD,UAAU,KAAK,CAAW;AAAA,IACvF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,9 +59,9 @@ const AxisBottom = import_react.default.memo(() => {
|
|
|
59
59
|
if (tickCount)
|
|
60
60
|
return tickCount;
|
|
61
61
|
if (containerRatio > 1) {
|
|
62
|
-
return innerWidth /
|
|
62
|
+
return innerWidth / 80 * containerRatio;
|
|
63
63
|
}
|
|
64
|
-
return innerWidth /
|
|
64
|
+
return innerWidth / 80;
|
|
65
65
|
})();
|
|
66
66
|
const ticks = xScale.ticks?.(ticksNum);
|
|
67
67
|
if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport type { ScaleLinear, ScaleTime } from 'd3';\nimport { select, axisBottom } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth /
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkHnB;AAhHJ,mBAAqD;AAErD,gBAAmC;AACnC,oBAAuC;AACvC,0BAA6B;AAE7B,2BAA8B;AAC9B,qBAAmC;AAE5B,MAAM,aAAa,aAAAA,QAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,YAAY,gBAAgB,OAAO,cAAc,UAAU,IAC7E,MAAM,QAAS,CAAC;AAElB,QAAM,cAAc,CAAC,UAAU,QAAQ,KAAK;AAG5C,QAAM,iBAAa,oCAAc;AACjC,8BAAU,MAAM;AACd,UAAM,WAAO,sBAAW,MAAqC,EAC1D,SAAS,CAAC,WAAW,EACrB,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,WAAO,sBAAW,MAAqC,EAAE,cAAc,CAAC;AAE9E,QAAI,YAAY,SAAS,MAAM,IAAI,GAAG;AACpC,YAAM,YAAY,MAAM;AACtB,YAAI;AAAW,iBAAO;AACtB,YAAI,iBAAiB,GAAG;AACtB,iBAAQ,aAAa,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport type { ScaleLinear, ScaleTime } from 'd3';\nimport { select, axisBottom } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth / 80) * containerRatio;\n }\n return innerWidth / 80;\n })();\n const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n // we show the only the ticks values on the screen when zoomed enough\n // @todo we need to improve this logic\n if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\n const ticksName = uniqueData.map((u) => u.xValue);\n axis.tickValues(ticksName);\n grid.tickValues(ticksName);\n } else if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(xAxis.type ?? 'linear');\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n\n if (axisRef?.current && gridRef?.current) {\n if (xAxis?.showGrid) select(gridRef.current).call(grid);\n const axisNode = select(axisRef.current);\n axisNode.call(axis);\n\n // // need to remove the first tick when live under the domain line\n // const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n // if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n // firstTick.remove();\n // }\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n .attr('dy', '.71em')\n .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n .attr('transform', `rotate(${tickRotation})`);\n }\n }, [\n innerHeight,\n overwriteTicks,\n xAxis?.showGrid,\n tickFormat,\n tickValues,\n xScale,\n tickRotation,\n xAxis.type,\n ticksScales,\n tickCount,\n containerRatio,\n innerWidth,\n uniqueData.length,\n uniqueData,\n internalMargin.left,\n isHorizontal,\n ]);\n if (xAxis.hideAxis) return null;\n return (\n <g transform={`translate(0,${innerHeight})`}>\n <g ref={setAxisBottomRef}>\n <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n </g>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkHnB;AAhHJ,mBAAqD;AAErD,gBAAmC;AACnC,oBAAuC;AACvC,0BAA6B;AAE7B,2BAA8B;AAC9B,qBAAmC;AAE5B,MAAM,aAAa,aAAAA,QAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,YAAY,gBAAgB,OAAO,cAAc,UAAU,IAC7E,MAAM,QAAS,CAAC;AAElB,QAAM,cAAc,CAAC,UAAU,QAAQ,KAAK;AAG5C,QAAM,iBAAa,oCAAc;AACjC,8BAAU,MAAM;AACd,UAAM,WAAO,sBAAW,MAAqC,EAC1D,SAAS,CAAC,WAAW,EACrB,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,WAAO,sBAAW,MAAqC,EAAE,cAAc,CAAC;AAE9E,QAAI,YAAY,SAAS,MAAM,IAAI,GAAG;AACpC,YAAM,YAAY,MAAM;AACtB,YAAI;AAAW,iBAAO;AACtB,YAAI,iBAAiB,GAAG;AACtB,iBAAQ,aAAa,KAAM;AAAA,QAC7B;AACA,eAAO,aAAa;AAAA,MACtB,GAAG;AACH,YAAM,QAAS,OAA0E,QAAQ,QAAQ;AAIzG,UAAI,iBAAiB,KAAK,WAAW,SAAS,MAAM,CAAC,cAAc;AACjE,cAAM,YAAY,WAAW,IAAI,CAAC,MAAM,EAAE,MAAM;AAChD,aAAK,WAAW,SAAS;AACzB,aAAK,WAAW,SAAS;AAAA,MAC3B,WAAW,cAAc,OAAO;AAC9B,cAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,aAAK,WAAW,UAAU;AAAA,MAC5B,OAAO;AACL,aAAK,WAAW,KAAK;AACrB,aAAK,WAAW,KAAK;AAAA,MACvB;AAAA,IACF;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,sBAAkB,mCAAmB,MAAM,QAAQ,QAAQ;AACjE,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AAEA,QAAI,SAAS,WAAW,SAAS,SAAS;AACxC,UAAI,OAAO;AAAU,8BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACtD,YAAM,eAAW,kBAAO,QAAQ,OAAO;AACvC,eAAS,KAAK,IAAI;AAOlB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,eAAe,IAAI,UAAU,KAAK,EACvD,KAAK,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,eAAe,IAAI,CAAC,EACvD,KAAK,MAAM,OAAO,EAClB,KAAK,KAAK,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,GAAG,EACxE,KAAK,aAAa,UAAU,eAAe;AAAA,IAClD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,IACf;AAAA,EACF,CAAC;AACD,MAAI,MAAM;AAAU,WAAO;AAC3B,SACE,6CAAC,OAAE,WAAW,eAAe,gBAC3B;AAAA,gDAAC,OAAE,KAAK,kBACN,sDAAC,4BAAW,WAAW,MAAM,OAAO,WAAW,OAAO,KAAK,SAAS,GACtE;AAAA,IACA,4CAAC,4BAAW,KAAK,SAAS;AAAA,KAC5B;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -3,6 +3,8 @@ import { useCallback, useMemo } from "react";
|
|
|
3
3
|
const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) => {
|
|
4
4
|
const getXValue = useCallback(
|
|
5
5
|
(datum) => {
|
|
6
|
+
if (!datum)
|
|
7
|
+
return null;
|
|
6
8
|
if (!isHorizontal) {
|
|
7
9
|
if (xAxis?.cols?.[datum.position]) {
|
|
8
10
|
return xAxis?.cols?.[datum.position];
|
|
@@ -20,6 +22,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
20
22
|
);
|
|
21
23
|
const getYValue = useCallback(
|
|
22
24
|
(datum) => {
|
|
25
|
+
if (!datum)
|
|
26
|
+
return null;
|
|
23
27
|
if (!isHorizontal) {
|
|
24
28
|
if (typeof datum.value === "number") {
|
|
25
29
|
return datum.value;
|
|
@@ -37,6 +41,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
37
41
|
);
|
|
38
42
|
const getXScaleValue = useCallback(
|
|
39
43
|
(datum) => {
|
|
44
|
+
if (!datum)
|
|
45
|
+
return null;
|
|
40
46
|
if (xAxis.type === "linear") {
|
|
41
47
|
return xScale(getXValue(datum));
|
|
42
48
|
}
|
|
@@ -46,6 +52,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
46
52
|
);
|
|
47
53
|
const getYScaleValue = useCallback(
|
|
48
54
|
(datum) => {
|
|
55
|
+
if (!datum)
|
|
56
|
+
return null;
|
|
49
57
|
const finalYScale = datum?.scale === "y2" ? y2Scale : yScale;
|
|
50
58
|
if (yAxis.type === "band") {
|
|
51
59
|
return finalYScale(getYValue(datum));
|
|
@@ -56,6 +64,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
56
64
|
);
|
|
57
65
|
const getYValueFormatted = useCallback(
|
|
58
66
|
(datum) => {
|
|
67
|
+
if (!datum)
|
|
68
|
+
return null;
|
|
59
69
|
const value = getYValue(datum);
|
|
60
70
|
if (typeof yAxis.tick?.tickFormat === "function")
|
|
61
71
|
return yAxis.tick.tickFormat(value);
|
|
@@ -65,6 +75,8 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
|
|
|
65
75
|
);
|
|
66
76
|
const getXValueFormatted = useCallback(
|
|
67
77
|
(datum) => {
|
|
78
|
+
if (!datum)
|
|
79
|
+
return null;
|
|
68
80
|
const value = getXValue(datum);
|
|
69
81
|
if (typeof xAxis.tick?.tickFormat === "function")
|
|
70
82
|
return xAxis.tick.tickFormat(value);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useGetters.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n xAxis: DSChartT.AxisT;\n yAxis: DSChartT.AxisT;\n isHorizontal: boolean;\n xScale: DSChartT.Scales;\n yScale: DSChartT.Scales;\n y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n const getXValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!isHorizontal) {\n if (xAxis?.cols?.[datum.position]) {\n return xAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.x;\n return datum.position.toString();\n }\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.x;\n },\n [isHorizontal, xAxis?.cols],\n );\n\n const getYValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!isHorizontal) {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.y;\n }\n if (yAxis?.cols?.[datum.position]) {\n return yAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.y;\n return datum.position.toString();\n },\n [isHorizontal, yAxis?.cols],\n );\n\n const getXScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (xAxis.type === 'linear') {\n return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n }\n return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n },\n [getXValue, xAxis.type, xScale],\n );\n\n const getYScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n if (yAxis.type === 'band') {\n return (finalYScale as ScaleBand<string>)(getYValue(datum) as string);\n }\n return (finalYScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n },\n [getYValue, y2Scale, yAxis.type, yScale],\n );\n\n const getYValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n const value = getYValue(datum);\n if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n return value;\n },\n [getYValue, yAxis.tick],\n );\n\n const getXValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n const value = getXValue(datum);\n if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n return value;\n },\n [getXValue, xAxis.tick],\n );\n\n return useMemo(\n () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,UAAU,KAAK,CAAW;AAAA,MACtE;AACA,aAAQ,YAAmD,UAAU,KAAK,CAAW;AAAA,IACvF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n xAxis: DSChartT.AxisT;\n yAxis: DSChartT.AxisT;\n isHorizontal: boolean;\n xScale: DSChartT.Scales;\n yScale: DSChartT.Scales;\n y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n const getXValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n if (!isHorizontal) {\n if (xAxis?.cols?.[datum.position]) {\n return xAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.x;\n return datum.position.toString();\n }\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.x;\n },\n [isHorizontal, xAxis?.cols],\n );\n\n const getYValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n if (!isHorizontal) {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n return datum.value?.y;\n }\n if (yAxis?.cols?.[datum.position]) {\n return yAxis?.cols?.[datum.position];\n }\n if (typeof datum.value === 'object') return datum.value?.y;\n return datum.position.toString();\n },\n [isHorizontal, yAxis?.cols],\n );\n\n const getXScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n if (xAxis.type === 'linear') {\n return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n }\n return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n },\n [getXValue, xAxis.type, xScale],\n );\n\n const getYScaleValue = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n if (yAxis.type === 'band') {\n return (finalYScale as ScaleBand<string>)(getYValue(datum) as string);\n }\n return (finalYScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n },\n [getYValue, y2Scale, yAxis.type, yScale],\n );\n\n const getYValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n const value = getYValue(datum);\n if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n return value;\n },\n [getYValue, yAxis.tick],\n );\n\n const getXValueFormatted = useCallback(\n (datum: DSChartT.InternalDatum) => {\n if (!datum) return null;\n\n const value = getXValue(datum);\n if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n return value;\n },\n [getXValue, xAxis.tick],\n );\n\n return useMemo(\n () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AACnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,UAAU,KAAK,CAAW;AAAA,MACtE;AACA,aAAQ,YAAmD,UAAU,KAAK,CAAW;AAAA,IACvF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,9 +30,9 @@ const AxisBottom = React2.memo(() => {
|
|
|
30
30
|
if (tickCount)
|
|
31
31
|
return tickCount;
|
|
32
32
|
if (containerRatio > 1) {
|
|
33
|
-
return innerWidth /
|
|
33
|
+
return innerWidth / 80 * containerRatio;
|
|
34
34
|
}
|
|
35
|
-
return innerWidth /
|
|
35
|
+
return innerWidth / 80;
|
|
36
36
|
})();
|
|
37
37
|
const ticks = xScale.ticks?.(ticksNum);
|
|
38
38
|
if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport type { ScaleLinear, ScaleTime } from 'd3';\nimport { select, axisBottom } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth /
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkHnB,SAEI,KAFJ;AAhHJ,OAAOA,UAAS,YAAY,WAAW,cAAc;AAErD,SAAS,QAAQ,kBAAkB;AACnC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAE5B,MAAM,aAAaA,OAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,YAAY,gBAAgB,OAAO,cAAc,UAAU,IAC7E,MAAM,QAAS,CAAC;AAElB,QAAM,cAAc,CAAC,UAAU,QAAQ,KAAK;AAG5C,QAAM,aAAa,cAAc;AACjC,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,MAAqC,EAC1D,SAAS,CAAC,WAAW,EACrB,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,OAAO,WAAW,MAAqC,EAAE,cAAc,CAAC;AAE9E,QAAI,YAAY,SAAS,MAAM,IAAI,GAAG;AACpC,YAAM,YAAY,MAAM;AACtB,YAAI;AAAW,iBAAO;AACtB,YAAI,iBAAiB,GAAG;AACtB,iBAAQ,aAAa,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport type { ScaleLinear, ScaleTime } from 'd3';\nimport { select, axisBottom } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth / 80) * containerRatio;\n }\n return innerWidth / 80;\n })();\n const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n // we show the only the ticks values on the screen when zoomed enough\n // @todo we need to improve this logic\n if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\n const ticksName = uniqueData.map((u) => u.xValue);\n axis.tickValues(ticksName);\n grid.tickValues(ticksName);\n } else if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(xAxis.type ?? 'linear');\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n\n if (axisRef?.current && gridRef?.current) {\n if (xAxis?.showGrid) select(gridRef.current).call(grid);\n const axisNode = select(axisRef.current);\n axisNode.call(axis);\n\n // // need to remove the first tick when live under the domain line\n // const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n // if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n // firstTick.remove();\n // }\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n .attr('dy', '.71em')\n .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n .attr('transform', `rotate(${tickRotation})`);\n }\n }, [\n innerHeight,\n overwriteTicks,\n xAxis?.showGrid,\n tickFormat,\n tickValues,\n xScale,\n tickRotation,\n xAxis.type,\n ticksScales,\n tickCount,\n containerRatio,\n innerWidth,\n uniqueData.length,\n uniqueData,\n internalMargin.left,\n isHorizontal,\n ]);\n if (xAxis.hideAxis) return null;\n return (\n <g transform={`translate(0,${innerHeight})`}>\n <g ref={setAxisBottomRef}>\n <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n </g>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -62,15 +62,15 @@ export declare const useChart: (props: DSChartT.Props) => {
|
|
|
62
62
|
setAxisRightRef: import("react").Dispatch<import("react").SetStateAction<SVGGElement | null>>;
|
|
63
63
|
setRightLabel: import("react").Dispatch<import("react").SetStateAction<SVGGElement | null>>;
|
|
64
64
|
setBottomLabel: import("react").Dispatch<import("react").SetStateAction<SVGGElement | null>>;
|
|
65
|
-
getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;
|
|
66
|
-
getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;
|
|
67
|
-
getYValueFormatted: (datum: DSChartT.InternalDatum) => string | number;
|
|
68
|
-
getXValueFormatted: (datum: DSChartT.InternalDatum) => string | number;
|
|
65
|
+
getXScaleValue: (datum: DSChartT.InternalDatum) => number | null | undefined;
|
|
66
|
+
getYScaleValue: (datum: DSChartT.InternalDatum) => number | null | undefined;
|
|
67
|
+
getYValueFormatted: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
68
|
+
getXValueFormatted: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
69
69
|
bottomLabelHeight: number;
|
|
70
70
|
rightLabelWidth: number;
|
|
71
71
|
axisRightWidth: number;
|
|
72
|
-
getXValue: (datum: DSChartT.InternalDatum) => string | number;
|
|
73
|
-
getYValue: (datum: DSChartT.InternalDatum) => string | number;
|
|
72
|
+
getXValue: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
73
|
+
getYValue: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
74
74
|
isHorizontal: boolean;
|
|
75
75
|
setLeftLabel: import("react").Dispatch<import("react").SetStateAction<SVGGElement | null>>;
|
|
76
76
|
leftLabel: SVGGElement | null;
|
|
@@ -8,11 +8,11 @@ interface UseGettersT {
|
|
|
8
8
|
y2Scale: DSChartT.Scales;
|
|
9
9
|
}
|
|
10
10
|
export declare const useGetters: ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {
|
|
11
|
-
getYValue: (datum: DSChartT.InternalDatum) => string | number;
|
|
12
|
-
getXValue: (datum: DSChartT.InternalDatum) => string | number;
|
|
13
|
-
getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;
|
|
14
|
-
getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;
|
|
15
|
-
getYValueFormatted: (datum: DSChartT.InternalDatum) => string | number;
|
|
16
|
-
getXValueFormatted: (datum: DSChartT.InternalDatum) => string | number;
|
|
11
|
+
getYValue: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
12
|
+
getXValue: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
13
|
+
getXScaleValue: (datum: DSChartT.InternalDatum) => number | null | undefined;
|
|
14
|
+
getYScaleValue: (datum: DSChartT.InternalDatum) => number | null | undefined;
|
|
15
|
+
getYValueFormatted: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
16
|
+
getXValueFormatted: (datum: DSChartT.InternalDatum) => string | number | null;
|
|
17
17
|
};
|
|
18
18
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz",
|
|
3
|
-
"version": "3.14.0-rc.
|
|
3
|
+
"version": "3.14.0-rc.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"d3-shape": "~3.1.0",
|
|
41
41
|
"resize-observer-polyfill": "~1.5.1",
|
|
42
42
|
"uid": "~2.0.0",
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-utilities": "3.14.0-rc.
|
|
43
|
+
"@elliemae/ds-system": "3.14.0-rc.4",
|
|
44
|
+
"@elliemae/ds-popperjs": "3.14.0-rc.4",
|
|
45
|
+
"@elliemae/ds-utilities": "3.14.0-rc.4"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-theme": "~2.6.0",
|