@elliemae/ds-dataviz 3.13.0 → 3.14.0-next.1
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/useChart.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useValidateProps.js +1 -1
- package/dist/cjs/graphs/Chart/config/useValidateProps.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js +3 -4
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Bars.js +3 -14
- package/dist/cjs/graphs/Chart/series/Bars.js.map +2 -2
- package/dist/cjs/graphs/Chart/styles.js +1 -5
- package/dist/cjs/graphs/Chart/styles.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useChart.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useValidateProps.js +1 -1
- package/dist/esm/graphs/Chart/config/useValidateProps.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/ChartContainer.js +3 -4
- package/dist/esm/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Bars.js +3 -14
- package/dist/esm/graphs/Chart/series/Bars.js.map +2 -2
- package/dist/esm/graphs/Chart/styles.js +1 -5
- package/dist/esm/graphs/Chart/styles.js.map +2 -2
- package/package.json +4 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useChart.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqD;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { ScaleBand } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { defaultProps, propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useValidateProps } from './useValidateProps';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n const [dimensions, setDimensions] = useState<number>(0);\n\n useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.width));\n });\n }, 200),\n );\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n }, [ref]);\n return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n useValidateProps(props, propTypes);\n\n // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n const originalSeries = useMemo(() => {\n if (series.length === 0) {\n return defaultProps.series;\n }\n return series;\n }, [series]);\n const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n const svgRef = useRef(null);\n\n const dimensionWidth = useResizeObserver(containerRef);\n const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n const [isGrabbed, setIsGrabbed] = useState(false);\n const [startPosition, setStartPosition] = useState(0);\n\n // zoom\n\n const [isZooming, setIsZooming] = useState(false);\n const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n const [movingPosition, setMovingPosition] = useState(0);\n\n //\n\n const [activePoint, setActivePoint] = useState(null);\n const [activeSerie, setActiveSerie] = useState('');\n const [scrapperPosY, setScrapperPosY] = useState('');\n const [scrapperPosX, setScrapperPosX] = useState('');\n const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n const [containerRatio, setContainerRatio] = useState(\n props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n );\n\n const lastPosition = useRef(0);\n\n const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n const {\n toolbarHeight,\n axisBottomHeight,\n axisRightWidth,\n bottomLabelHeight,\n internalMargin,\n leftLegendWidth,\n rightLabelWidth,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n } = useInternalMargins({\n axisLeftRef,\n axisBottomRef,\n axisRightRef,\n leftLabel,\n leftLegend,\n rightLegend,\n topLegend,\n bottomLegend,\n rightLabel,\n bottomLabel,\n toolbarRef,\n });\n\n const innerWidth = useMemo(\n () => width - internalMargin.left - internalMargin.right,\n [internalMargin.left, internalMargin.right, width],\n );\n const innerHeight = useMemo(\n () => height - internalMargin.top - internalMargin.bottom,\n [internalMargin.top, internalMargin.bottom, height],\n );\n\n const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n const currentData = useMemo(\n () =>\n originalSeries\n .filter((serie) => !hiddenSeries.includes(serie.name))\n .map((d, i) => ({\n ...d,\n key: `${d.name}-${i}`,\n data: d.data\n .map((value, index) => ({\n key: `${d.name}-${i}-${index}`,\n value,\n position: index,\n serie: d.name,\n scale: d.scale,\n }))\n .filter((datum) => datum.value !== null && datum.value !== undefined), // basically converting from DSChartT.SeriesT to DSChartT.InternalData...\n })) as DSChartT.InternalData,\n [hiddenSeries, originalSeries],\n );\n\n const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n // @TODO we need to create a logic to get this from both axis\n // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n props,\n originalSeries,\n innerHeight,\n innerWidth,\n groups,\n stackedData,\n currentData,\n containerRatio,\n });\n\n const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n xAxis,\n yAxis,\n isHorizontal,\n xScale,\n yScale,\n y2Scale,\n });\n const chartId = useMemo(() => uid(6), []);\n\n return useMemo(\n () => ({\n props,\n originalSeries,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n svgRef,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n setScrapperPosY,\n scrapperPosX,\n setScrapperPosX,\n activePoint,\n setActivePoint,\n activeSerie,\n setActiveSerie,\n xScrollbarPosition,\n setXScrollbarPosition,\n isGrabbed,\n setIsGrabbed,\n setContainerRef,\n startPosition,\n setStartPosition,\n isScrollbarVisible,\n setIsScrollbarVisible,\n lastPosition,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n setAxisLeftRef,\n setLeftLegend,\n setRightLegend,\n rightLegend,\n setTopLegend,\n setBottomLegend,\n setAxisBottomRef,\n axisBottomHeight,\n setAxisRightRef,\n setRightLabel,\n setBottomLabel,\n getXScaleValue,\n getYScaleValue,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n setLeftLabel,\n leftLabel,\n chartId,\n hiddenSeries,\n setHiddenSeries,\n height,\n width,\n setContainerRatio,\n toolbarHeight,\n setToolbarRef,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n }),\n [\n props,\n originalSeries,\n isZooming,\n zoomStartingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n scrapperPosX,\n activePoint,\n activeSerie,\n xScrollbarPosition,\n isGrabbed,\n startPosition,\n isScrollbarVisible,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n rightLegend,\n axisBottomHeight,\n getXScaleValue,\n getYScaleValue,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n leftLabel,\n chartId,\n hiddenSeries,\n height,\n width,\n toolbarHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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A,EACF,CAAC;AACD,QAAM,cAAU,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAExC,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["ResizeObserver"]
|
|
7
7
|
}
|
|
@@ -30,7 +30,7 @@ module.exports = __toCommonJS(useValidateProps_exports);
|
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
const useValidateProps = (props, propTypes) => {
|
|
32
32
|
const componentName = "Chart";
|
|
33
|
-
if (props.series
|
|
33
|
+
if (props.series?.length === 0 || !props.series) {
|
|
34
34
|
throw new Error(`${componentName}:: series is required or cannot be an empty array`);
|
|
35
35
|
}
|
|
36
36
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useValidateProps.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\n\nimport type { DSChartT } from '../react-desc-prop-types';\nexport const useValidateProps = (props: DSChartT.Props, propTypes: WeakValidationMap<unknown>): void => {\n const componentName = 'Chart';\n\n if (props.series
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,mBAAmB,CAAC,OAAuB,cAAgD;AACtG,QAAM,gBAAgB;AAEtB,MAAI,MAAM,
|
|
4
|
+
"sourcesContent": ["// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\n\nimport type { DSChartT } from '../react-desc-prop-types';\nexport const useValidateProps = (props: DSChartT.Props, propTypes: WeakValidationMap<unknown>): void => {\n const componentName = 'Chart';\n\n if (props.series?.length === 0 || !props.series) {\n throw new Error(`${componentName}:: series is required or cannot be an empty array`);\n }\n // todo use generic useValidateTypescriptPropTypes for the rest of the props\n // useValidateTypescriptPropTypes(props, propTypes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,mBAAmB,CAAC,OAAuB,cAAgD;AACtG,QAAM,gBAAgB;AAEtB,MAAI,MAAM,QAAQ,WAAW,KAAK,CAAC,MAAM,QAAQ;AAC/C,UAAM,IAAI,MAAM,GAAG,gEAAgE;AAAA,EACrF;AAGF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,8 +48,7 @@ var import_VerticalScrapper = require("./Scrapper/VerticalScrapper");
|
|
|
48
48
|
var import_Controllers = require("./Scroller/Controllers");
|
|
49
49
|
const ChartContainer = () => {
|
|
50
50
|
const {
|
|
51
|
-
props: {
|
|
52
|
-
containerRef,
|
|
51
|
+
props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },
|
|
53
52
|
activePoint,
|
|
54
53
|
internalMargin,
|
|
55
54
|
setScrapperPosY,
|
|
@@ -76,7 +75,7 @@ const ChartContainer = () => {
|
|
|
76
75
|
const onMouseEnterHandler = (0, import_react.useCallback)(() => {
|
|
77
76
|
setIsScrollbarVisible(true);
|
|
78
77
|
setActivePoint(null);
|
|
79
|
-
}, [setIsScrollbarVisible]);
|
|
78
|
+
}, [setActivePoint, setIsScrollbarVisible]);
|
|
80
79
|
const onMouseLeaveHandler = (0, import_react.useCallback)(() => {
|
|
81
80
|
setScrapperPosY("");
|
|
82
81
|
setScrapperPosX("");
|
|
@@ -91,7 +90,7 @@ const ChartContainer = () => {
|
|
|
91
90
|
setStartPosition(e.touches[0].clientX);
|
|
92
91
|
e.preventDefault();
|
|
93
92
|
},
|
|
94
|
-
[setIsGrabbed]
|
|
93
|
+
[setIsGrabbed, setScrapperPosX, setStartPosition]
|
|
95
94
|
);
|
|
96
95
|
const handleOnTouchEnd = (0, import_react.useCallback)(() => {
|
|
97
96
|
lastPosition.current = xScrollbarPosition;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/parts/ChartContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n activePoint,\n internalMargin,\n setScrapperPosY,\n setScrapperPosX,\n setContainerRef,\n svgRef,\n isGrabbed,\n setIsGrabbed,\n startPosition,\n innerWidth,\n innerHeight,\n setActivePoint,\n setXScrollbarPosition,\n xScrollbarPosition,\n containerRatio,\n lastPosition,\n setIsScrollbarVisible,\n currentData,\n setStartPosition,\n width,\n height,\n } = useContext(ChartContext);\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n // const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n const onMouseEnterHandler = useCallback(() => {\n setIsScrollbarVisible(true);\n setActivePoint(null);\n }, [setActivePoint, setIsScrollbarVisible]);\n const onMouseLeaveHandler = useCallback(() => {\n setScrapperPosY('');\n setScrapperPosX('');\n setIsScrollbarVisible(false);\n setIsGrabbed(false);\n }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n const handleOnTouchStart: React.TouchEventHandler = useCallback(\n (e) => {\n e.stopPropagation();\n setScrapperPosX('');\n setIsGrabbed(true);\n setStartPosition(e.touches[0].clientX);\n e.preventDefault();\n },\n [setIsGrabbed, setScrapperPosX, setStartPosition],\n );\n const handleOnTouchEnd = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [setIsGrabbed, xScrollbarPosition, lastPosition]);\n const handleMouseMove: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed) return;\n e.preventDefault();\n const clientX = e.clientX ?? e.touches[0].clientX;\n const clientY = e.clientY ?? e.touches[0].clientY;\n\n setActivePoint(null);\n if (xScroll) {\n const newPosition = lastPosition?.current + clientX - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerWidth - innerWidth / containerRatio)\n setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n if (yScroll) {\n const newPosition = lastPosition?.current + clientY - startPosition;\n\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerHeight - innerHeight / containerRatio)\n setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n },\n [\n isGrabbed,\n setActivePoint,\n xScroll,\n yScroll,\n lastPosition,\n startPosition,\n setXScrollbarPosition,\n innerWidth,\n containerRatio,\n innerHeight,\n ],\n );\n const handleMouseUp = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n // const key = useMemo(\n // () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n // [internalMargin, width],\n // );\n\n const render = useMemo(() => {\n if (currentData.length === 0) return null;\n if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n return (\n <>\n {y2Axis ? <AxisRight /> : null}\n <AxisLeft />\n <ScrollableContainerX />\n </>\n );\n }\n if (yScroll) {\n return (\n <>\n {y2Axis ? <AxisRight /> : null}\n <AxisBottom />\n <ScrollableContainerY />\n </>\n );\n }\n return (\n <>\n {y2Axis ? <AxisRight /> : null}\n <AxisLeft />\n <AxisBottom />\n <SeriesFactory />\n {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n </>\n );\n }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n return (\n <StyledSVGWrapper\n ref={setContainerRef}\n onKeyDown={onInputKeyDown}\n onKeyUp={handleOnKeyUp}\n aria-hidden=\"true\"\n tabIndex={activePoint ? -1 : 0}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onTouchMove={handleMouseMove}\n onTouchStart={handleOnTouchStart}\n onTouchEnd={handleOnTouchEnd}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n onMouseMove={handleMouseMove}\n onMouseUp={handleMouseUp}\n onMouseDown={(e) => e.preventDefault()}\n isGrabbed={isGrabbed}\n style={{ width: userWidth, height }}\n >\n {width !== 0 ? (\n <svg ref={svgRef} width={width} height={height}>\n {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n <ClipPaths />\n <BlurMask />\n <g>\n <g>\n <Controllers />\n <Legend />\n <Label />\n </g>\n <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n {render}\n {/* <ActivePoint/> @todo */}\n </g>\n </g>\n </svg>\n ) : null}\n </StyledSVGWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,27 +33,16 @@ var import_react = require("react");
|
|
|
33
33
|
var import_Rect = require("./Rect");
|
|
34
34
|
var import_ChartContext = require("../ChartContext");
|
|
35
35
|
const Bars = ({ serie }) => {
|
|
36
|
-
const {
|
|
37
|
-
innerHeight,
|
|
38
|
-
xScale,
|
|
39
|
-
yScale,
|
|
40
|
-
y2Scale,
|
|
41
|
-
subGroupScale,
|
|
42
|
-
colorScale,
|
|
43
|
-
getXValue,
|
|
44
|
-
getYValue,
|
|
45
|
-
isHorizontal,
|
|
46
|
-
chartId
|
|
47
|
-
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
36
|
+
const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
48
37
|
const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
|
|
49
38
|
const negativeSize = innerHeight - finalYScale(0);
|
|
50
39
|
const positiveSize = innerHeight - negativeSize;
|
|
51
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), clipPath: `url(#rect-focus-ring-${chartId})`, children: serie.data.map((bar
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), clipPath: `url(#rect-focus-ring-${chartId})`, children: serie.data.map((bar) => {
|
|
52
41
|
const x = getXValue(bar);
|
|
53
42
|
const y = getYValue(bar);
|
|
54
43
|
const width = subGroupScale?.bandwidth();
|
|
55
44
|
const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);
|
|
56
|
-
const transformX =
|
|
45
|
+
const transformX = !xScale.bandwidth ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0) : subGroupScale(serie.name) + xScale(x);
|
|
57
46
|
const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);
|
|
58
47
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: `${serie.name}-rects`, transform: `translate(${transformX},0)`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
48
|
import_Rect.Rect,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/series/Bars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\n\nexport const Bars = ({ serie }) => {\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\n\nexport const Bars = ({ serie }) => {\n const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n useContext(ChartContext);\n const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n const negativeSize = innerHeight - finalYScale(0);\n const positiveSize = innerHeight - negativeSize;\n\n return (\n <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n {serie.data.map((bar) => {\n const x = getXValue(bar);\n const y = getYValue(bar);\n\n const width = subGroupScale?.bandwidth();\n const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n const transformX = !xScale.bandwidth\n ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n : subGroupScale(serie.name) + xScale(x);\n\n const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n return (\n <g id={`${serie.name}-rects`} key={bar.key} transform={`translate(${transformX},0)`}>\n <Rect\n name={serie.name}\n xValue={x}\n yValue={y}\n width={width}\n height={height}\n id={bar.key}\n y={transformY}\n isNegative={y < 0}\n datum={bar}\n />\n </g>\n );\n })}\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BX;AA7BZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,aAAa,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACrG,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,QAAQ;AACvB,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,UAAM,aAAa,CAAC,OAAO,YACvB,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS,KACrG,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAExC,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,4CAAC,OAAE,IAAI,GAAG,MAAM,cAA4B,WAAW,aAAa,iBAClE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAXiC,IAAI,GAYvC;AAAA,EAEJ,CAAC,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -81,11 +81,7 @@ const StyledAxisLabel = (0, import_ds_system.styled)("text")`
|
|
|
81
81
|
`;
|
|
82
82
|
const StyledGrid = (0, import_ds_system.styled)("g")`
|
|
83
83
|
line {
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.domain {
|
|
88
|
-
display: none;
|
|
84
|
+
opacity: 0.2;
|
|
89
85
|
}
|
|
90
86
|
`;
|
|
91
87
|
const StyleFocusableRegion = (0, import_ds_system.styled)("div")`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/graphs/Chart/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n axisColor: string;\n tickColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n :focus {\n outline: none;\n }\n :focus-within {\n outline: none;\n }\n\n cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n .domain {\n stroke-width: 1px;\n }\n\n min-width: 300px;\n`;\n\nexport const StyledAxis = styled('g')<StyledAxisT>`\n text {\n fill: #635f5d;\n }\n\n .tick text {\n font-size: 12px;\n ${({ tickColor }) => (tickColor ? `fill: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n .tick line {\n ${({ tickColor }) => (tickColor ? `stroke: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n\n line {\n stroke: #c0c0bb;\n }\n\n .domain {\n ${({ axisColor }) => (axisColor ? `stroke: ${COLOR_PALLET[axisColor] ?? axisColor}` : '')}\n }\n`;\n\nexport const StyledAxisLabel = styled('text')`\n font-size: 13px;\n font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n line {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,yBAA6B;AAMtB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n axisColor: string;\n tickColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n :focus {\n outline: none;\n }\n :focus-within {\n outline: none;\n }\n\n cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n .domain {\n stroke-width: 1px;\n }\n\n min-width: 300px;\n`;\n\nexport const StyledAxis = styled('g')<StyledAxisT>`\n text {\n fill: #635f5d;\n }\n\n .tick text {\n font-size: 12px;\n ${({ tickColor }) => (tickColor ? `fill: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n .tick line {\n ${({ tickColor }) => (tickColor ? `stroke: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n\n line {\n stroke: #c0c0bb;\n }\n\n .domain {\n ${({ axisColor }) => (axisColor ? `stroke: ${COLOR_PALLET[axisColor] ?? axisColor}` : '')}\n }\n`;\n\nexport const StyledAxisLabel = styled('text')`\n font-size: 13px;\n font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n line {\n opacity: 0.2;\n }\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n width: ${({ s }) => s * 2 ?? '1'}px;\n height: ${({ s }) => s * 2 ?? '1'}px;\n :focus {\n outline: none;\n }\n`;\n\nexport const StyledLine = styled('path')`\n fill: none;\n stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n stroke-linejoin: round;\n opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n max-width: 350px;\n background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,yBAA6B;AAMtB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
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/config/useChart.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,WAAW,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { ScaleBand } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { defaultProps, propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useValidateProps } from './useValidateProps';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n const [dimensions, setDimensions] = useState<number>(0);\n\n useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.width));\n });\n }, 200),\n );\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n }, [ref]);\n return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n useValidateProps(props, propTypes);\n\n // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n const originalSeries = useMemo(() => {\n if (series.length === 0) {\n return defaultProps.series;\n }\n return series;\n }, [series]);\n const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n const svgRef = useRef(null);\n\n const dimensionWidth = useResizeObserver(containerRef);\n const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n const [isGrabbed, setIsGrabbed] = useState(false);\n const [startPosition, setStartPosition] = useState(0);\n\n // zoom\n\n const [isZooming, setIsZooming] = useState(false);\n const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n const [movingPosition, setMovingPosition] = useState(0);\n\n //\n\n const [activePoint, setActivePoint] = useState(null);\n const [activeSerie, setActiveSerie] = useState('');\n const [scrapperPosY, setScrapperPosY] = useState('');\n const [scrapperPosX, setScrapperPosX] = useState('');\n const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n const [containerRatio, setContainerRatio] = useState(\n props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n );\n\n const lastPosition = useRef(0);\n\n const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n const {\n toolbarHeight,\n axisBottomHeight,\n axisRightWidth,\n bottomLabelHeight,\n internalMargin,\n leftLegendWidth,\n rightLabelWidth,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n } = useInternalMargins({\n axisLeftRef,\n axisBottomRef,\n axisRightRef,\n leftLabel,\n leftLegend,\n rightLegend,\n topLegend,\n bottomLegend,\n rightLabel,\n bottomLabel,\n toolbarRef,\n });\n\n const innerWidth = useMemo(\n () => width - internalMargin.left - internalMargin.right,\n [internalMargin.left, internalMargin.right, width],\n );\n const innerHeight = useMemo(\n () => height - internalMargin.top - internalMargin.bottom,\n [internalMargin.top, internalMargin.bottom, height],\n );\n\n const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n const currentData = useMemo(\n () =>\n originalSeries\n .filter((serie) => !hiddenSeries.includes(serie.name))\n .map((d, i) => ({\n ...d,\n key: `${d.name}-${i}`,\n data: d.data\n .map((value, index) => ({\n key: `${d.name}-${i}-${index}`,\n value,\n position: index,\n serie: d.name,\n scale: d.scale,\n }))\n .filter((datum) => datum.value !== null && datum.value !== undefined), // basically converting from DSChartT.SeriesT to DSChartT.InternalData...\n })) as DSChartT.InternalData,\n [hiddenSeries, originalSeries],\n );\n\n const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n // @TODO we need to create a logic to get this from both axis\n // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n props,\n originalSeries,\n innerHeight,\n innerWidth,\n groups,\n stackedData,\n currentData,\n containerRatio,\n });\n\n const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n xAxis,\n yAxis,\n isHorizontal,\n xScale,\n yScale,\n y2Scale,\n });\n const chartId = useMemo(() => uid(6), []);\n\n return useMemo(\n () => ({\n props,\n originalSeries,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n svgRef,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n setScrapperPosY,\n scrapperPosX,\n setScrapperPosX,\n activePoint,\n setActivePoint,\n activeSerie,\n setActiveSerie,\n xScrollbarPosition,\n setXScrollbarPosition,\n isGrabbed,\n setIsGrabbed,\n setContainerRef,\n startPosition,\n setStartPosition,\n isScrollbarVisible,\n setIsScrollbarVisible,\n lastPosition,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n setAxisLeftRef,\n setLeftLegend,\n setRightLegend,\n rightLegend,\n setTopLegend,\n setBottomLegend,\n setAxisBottomRef,\n axisBottomHeight,\n setAxisRightRef,\n setRightLabel,\n setBottomLabel,\n getXScaleValue,\n getYScaleValue,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n setLeftLabel,\n leftLabel,\n chartId,\n hiddenSeries,\n setHiddenSeries,\n height,\n width,\n setContainerRatio,\n toolbarHeight,\n setToolbarRef,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n }),\n [\n props,\n originalSeries,\n isZooming,\n zoomStartingPosition,\n movingPosition,\n innerHeight,\n innerWidth,\n groups,\n currentData,\n colorScale,\n stackedData,\n subGroupScale,\n xScale,\n yScale,\n y2Scale,\n containerRef,\n getBandwidth,\n scrapperPosY,\n scrapperPosX,\n activePoint,\n activeSerie,\n xScrollbarPosition,\n isGrabbed,\n startPosition,\n isScrollbarVisible,\n containerRatio,\n internalMargin,\n axisLeftRef,\n leftLegendWidth,\n leftLegend,\n rightLegend,\n axisBottomHeight,\n getXScaleValue,\n getYScaleValue,\n bottomLabelHeight,\n rightLabelWidth,\n axisRightWidth,\n getXValue,\n getYValue,\n isHorizontal,\n leftLabel,\n chartId,\n hiddenSeries,\n height,\n width,\n toolbarHeight,\n leftLabelHeight,\n rightLegendHeight,\n bottomLegendWidth,\n bottomLegend,\n leftLabelWidth,\n axisLeftWidth,\n topLegendHeight,\n leftLegendHeight,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "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MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAExC,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
const useValidateProps = (props, propTypes) => {
|
|
3
3
|
const componentName = "Chart";
|
|
4
|
-
if (props.series
|
|
4
|
+
if (props.series?.length === 0 || !props.series) {
|
|
5
5
|
throw new Error(`${componentName}:: series is required or cannot be an empty array`);
|
|
6
6
|
}
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useValidateProps.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\n\nimport type { DSChartT } from '../react-desc-prop-types';\nexport const useValidateProps = (props: DSChartT.Props, propTypes: WeakValidationMap<unknown>): void => {\n const componentName = 'Chart';\n\n if (props.series
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIhB,MAAM,mBAAmB,CAAC,OAAuB,cAAgD;AACtG,QAAM,gBAAgB;AAEtB,MAAI,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\n\nimport type { DSChartT } from '../react-desc-prop-types';\nexport const useValidateProps = (props: DSChartT.Props, propTypes: WeakValidationMap<unknown>): void => {\n const componentName = 'Chart';\n\n if (props.series?.length === 0 || !props.series) {\n throw new Error(`${componentName}:: series is required or cannot be an empty array`);\n }\n // todo use generic useValidateTypescriptPropTypes for the rest of the props\n // useValidateTypescriptPropTypes(props, propTypes);\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIhB,MAAM,mBAAmB,CAAC,OAAuB,cAAgD;AACtG,QAAM,gBAAgB;AAEtB,MAAI,MAAM,QAAQ,WAAW,KAAK,CAAC,MAAM,QAAQ;AAC/C,UAAM,IAAI,MAAM,GAAG,gEAAgE;AAAA,EACrF;AAGF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,8 +19,7 @@ import { VerticalScrapper } from "./Scrapper/VerticalScrapper";
|
|
|
19
19
|
import { Controllers } from "./Scroller/Controllers";
|
|
20
20
|
const ChartContainer = () => {
|
|
21
21
|
const {
|
|
22
|
-
props: {
|
|
23
|
-
containerRef,
|
|
22
|
+
props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },
|
|
24
23
|
activePoint,
|
|
25
24
|
internalMargin,
|
|
26
25
|
setScrapperPosY,
|
|
@@ -47,7 +46,7 @@ const ChartContainer = () => {
|
|
|
47
46
|
const onMouseEnterHandler = useCallback(() => {
|
|
48
47
|
setIsScrollbarVisible(true);
|
|
49
48
|
setActivePoint(null);
|
|
50
|
-
}, [setIsScrollbarVisible]);
|
|
49
|
+
}, [setActivePoint, setIsScrollbarVisible]);
|
|
51
50
|
const onMouseLeaveHandler = useCallback(() => {
|
|
52
51
|
setScrapperPosY("");
|
|
53
52
|
setScrapperPosX("");
|
|
@@ -62,7 +61,7 @@ const ChartContainer = () => {
|
|
|
62
61
|
setStartPosition(e.touches[0].clientX);
|
|
63
62
|
e.preventDefault();
|
|
64
63
|
},
|
|
65
|
-
[setIsGrabbed]
|
|
64
|
+
[setIsGrabbed, setScrapperPosX, setStartPosition]
|
|
66
65
|
);
|
|
67
66
|
const handleOnTouchEnd = useCallback(() => {
|
|
68
67
|
lastPosition.current = xScrollbarPosition;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ChartContainer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n const {\n props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n activePoint,\n internalMargin,\n setScrapperPosY,\n setScrapperPosX,\n setContainerRef,\n svgRef,\n isGrabbed,\n setIsGrabbed,\n startPosition,\n innerWidth,\n innerHeight,\n setActivePoint,\n setXScrollbarPosition,\n xScrollbarPosition,\n containerRatio,\n lastPosition,\n setIsScrollbarVisible,\n currentData,\n setStartPosition,\n width,\n height,\n } = useContext(ChartContext);\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n // const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n const onMouseEnterHandler = useCallback(() => {\n setIsScrollbarVisible(true);\n setActivePoint(null);\n }, [setActivePoint, setIsScrollbarVisible]);\n const onMouseLeaveHandler = useCallback(() => {\n setScrapperPosY('');\n setScrapperPosX('');\n setIsScrollbarVisible(false);\n setIsGrabbed(false);\n }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n const handleOnTouchStart: React.TouchEventHandler = useCallback(\n (e) => {\n e.stopPropagation();\n setScrapperPosX('');\n setIsGrabbed(true);\n setStartPosition(e.touches[0].clientX);\n e.preventDefault();\n },\n [setIsGrabbed, setScrapperPosX, setStartPosition],\n );\n const handleOnTouchEnd = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [setIsGrabbed, xScrollbarPosition, lastPosition]);\n const handleMouseMove: React.MouseEventHandler = useCallback(\n (e) => {\n if (!isGrabbed) return;\n e.preventDefault();\n const clientX = e.clientX ?? e.touches[0].clientX;\n const clientY = e.clientY ?? e.touches[0].clientY;\n\n setActivePoint(null);\n if (xScroll) {\n const newPosition = lastPosition?.current + clientX - startPosition;\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerWidth - innerWidth / containerRatio)\n setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n if (yScroll) {\n const newPosition = lastPosition?.current + clientY - startPosition;\n\n if (newPosition < 0) setXScrollbarPosition(0);\n else if (newPosition > innerHeight - innerHeight / containerRatio)\n setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n else setXScrollbarPosition(newPosition);\n }\n },\n [\n isGrabbed,\n setActivePoint,\n xScroll,\n yScroll,\n lastPosition,\n startPosition,\n setXScrollbarPosition,\n innerWidth,\n containerRatio,\n innerHeight,\n ],\n );\n const handleMouseUp = useCallback(() => {\n lastPosition.current = xScrollbarPosition;\n setIsGrabbed(false);\n }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n // const key = useMemo(\n // () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n // [internalMargin, width],\n // );\n\n const render = useMemo(() => {\n if (currentData.length === 0) return null;\n if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n return (\n <>\n {y2Axis ? <AxisRight /> : null}\n <AxisLeft />\n <ScrollableContainerX />\n </>\n );\n }\n if (yScroll) {\n return (\n <>\n {y2Axis ? <AxisRight /> : null}\n <AxisBottom />\n <ScrollableContainerY />\n </>\n );\n }\n return (\n <>\n {y2Axis ? <AxisRight /> : null}\n <AxisLeft />\n <AxisBottom />\n <SeriesFactory />\n {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n </>\n );\n }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n return (\n <StyledSVGWrapper\n ref={setContainerRef}\n onKeyDown={onInputKeyDown}\n onKeyUp={handleOnKeyUp}\n aria-hidden=\"true\"\n tabIndex={activePoint ? -1 : 0}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onTouchMove={handleMouseMove}\n onTouchStart={handleOnTouchStart}\n onTouchEnd={handleOnTouchEnd}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n onMouseMove={handleMouseMove}\n onMouseUp={handleMouseUp}\n onMouseDown={(e) => e.preventDefault()}\n isGrabbed={isGrabbed}\n style={{ width: userWidth, height }}\n >\n {width !== 0 ? (\n <svg ref={svgRef} width={width} height={height}>\n {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n <ClipPaths />\n <BlurMask />\n <g>\n <g>\n <Controllers />\n <Legend />\n <Label />\n </g>\n <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n {render}\n {/* <ActivePoint/> @todo */}\n </g>\n </g>\n </svg>\n ) : null}\n </StyledSVGWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,27 +4,16 @@ import { useContext } from "react";
|
|
|
4
4
|
import { Rect } from "./Rect";
|
|
5
5
|
import { ChartContext } from "../ChartContext";
|
|
6
6
|
const Bars = ({ serie }) => {
|
|
7
|
-
const {
|
|
8
|
-
innerHeight,
|
|
9
|
-
xScale,
|
|
10
|
-
yScale,
|
|
11
|
-
y2Scale,
|
|
12
|
-
subGroupScale,
|
|
13
|
-
colorScale,
|
|
14
|
-
getXValue,
|
|
15
|
-
getYValue,
|
|
16
|
-
isHorizontal,
|
|
17
|
-
chartId
|
|
18
|
-
} = useContext(ChartContext);
|
|
7
|
+
const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = useContext(ChartContext);
|
|
19
8
|
const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
|
|
20
9
|
const negativeSize = innerHeight - finalYScale(0);
|
|
21
10
|
const positiveSize = innerHeight - negativeSize;
|
|
22
|
-
return /* @__PURE__ */ jsx("g", { fill: colorScale(serie.name), clipPath: `url(#rect-focus-ring-${chartId})`, children: serie.data.map((bar
|
|
11
|
+
return /* @__PURE__ */ jsx("g", { fill: colorScale(serie.name), clipPath: `url(#rect-focus-ring-${chartId})`, children: serie.data.map((bar) => {
|
|
23
12
|
const x = getXValue(bar);
|
|
24
13
|
const y = getYValue(bar);
|
|
25
14
|
const width = subGroupScale?.bandwidth();
|
|
26
15
|
const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);
|
|
27
|
-
const transformX =
|
|
16
|
+
const transformX = !xScale.bandwidth ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0) : subGroupScale(serie.name) + xScale(x);
|
|
28
17
|
const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);
|
|
29
18
|
return /* @__PURE__ */ jsx("g", { id: `${serie.name}-rects`, transform: `translate(${transformX},0)`, children: /* @__PURE__ */ jsx(
|
|
30
19
|
Rect,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Bars.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\n\nexport const Bars = ({ serie }) => {\n const {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\n\nexport const Bars = ({ serie }) => {\n const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n useContext(ChartContext);\n const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n const negativeSize = innerHeight - finalYScale(0);\n const positiveSize = innerHeight - negativeSize;\n\n return (\n <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n {serie.data.map((bar) => {\n const x = getXValue(bar);\n const y = getYValue(bar);\n\n const width = subGroupScale?.bandwidth();\n const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n const transformX = !xScale.bandwidth\n ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n : subGroupScale(serie.name) + xScale(x);\n\n const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n return (\n <g id={`${serie.name}-rects`} key={bar.key} transform={`translate(${transformX},0)`}>\n <Rect\n name={serie.name}\n xValue={x}\n yValue={y}\n width={width}\n height={height}\n id={bar.key}\n y={transformY}\n isNegative={y < 0}\n datum={bar}\n />\n </g>\n );\n })}\n </g>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8BX;AA7BZ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,aAAa,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,IACrG,WAAW,YAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,oBAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,QAAQ;AACvB,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,UAAM,aAAa,CAAC,OAAO,YACvB,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS,KACrG,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAExC,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,oBAAC,OAAE,IAAI,GAAG,MAAM,cAA4B,WAAW,aAAa,iBAClE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAXiC,IAAI,GAYvC;AAAA,EAEJ,CAAC,GACH;AAEJ;",
|
|
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/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n axisColor: string;\n tickColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n :focus {\n outline: none;\n }\n :focus-within {\n outline: none;\n }\n\n cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n .domain {\n stroke-width: 1px;\n }\n\n min-width: 300px;\n`;\n\nexport const StyledAxis = styled('g')<StyledAxisT>`\n text {\n fill: #635f5d;\n }\n\n .tick text {\n font-size: 12px;\n ${({ tickColor }) => (tickColor ? `fill: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n .tick line {\n ${({ tickColor }) => (tickColor ? `stroke: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n\n line {\n stroke: #c0c0bb;\n }\n\n .domain {\n ${({ axisColor }) => (axisColor ? `stroke: ${COLOR_PALLET[axisColor] ?? axisColor}` : '')}\n }\n`;\n\nexport const StyledAxisLabel = styled('text')`\n font-size: 13px;\n font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n line {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAmB;AAC5B,SAAS,oBAAoB;AAMtB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,kBAAkB,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n axisColor: string;\n tickColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n :focus {\n outline: none;\n }\n :focus-within {\n outline: none;\n }\n\n cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n .domain {\n stroke-width: 1px;\n }\n\n min-width: 300px;\n`;\n\nexport const StyledAxis = styled('g')<StyledAxisT>`\n text {\n fill: #635f5d;\n }\n\n .tick text {\n font-size: 12px;\n ${({ tickColor }) => (tickColor ? `fill: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n .tick line {\n ${({ tickColor }) => (tickColor ? `stroke: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n }\n\n line {\n stroke: #c0c0bb;\n }\n\n .domain {\n ${({ axisColor }) => (axisColor ? `stroke: ${COLOR_PALLET[axisColor] ?? axisColor}` : '')}\n }\n`;\n\nexport const StyledAxisLabel = styled('text')`\n font-size: 13px;\n font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n line {\n opacity: 0.2;\n }\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n width: ${({ s }) => s * 2 ?? '1'}px;\n height: ${({ s }) => s * 2 ?? '1'}px;\n :focus {\n outline: none;\n }\n`;\n\nexport const StyledLine = styled('path')`\n fill: none;\n stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n stroke-linejoin: round;\n opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n max-width: 350px;\n background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAmB;AAC5B,SAAS,oBAAoB;AAMtB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,kBAAkB,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,uBAAuB,OAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,aAAa,OAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.14.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"d3-shape": "~3.1.0",
|
|
41
41
|
"resize-observer-polyfill": "~1.5.1",
|
|
42
42
|
"uid": "~2.0.0",
|
|
43
|
-
"@elliemae/ds-popperjs": "3.
|
|
44
|
-
"@elliemae/ds-system": "3.
|
|
45
|
-
"@elliemae/ds-utilities": "3.
|
|
43
|
+
"@elliemae/ds-popperjs": "3.14.0-next.1",
|
|
44
|
+
"@elliemae/ds-system": "3.14.0-next.1",
|
|
45
|
+
"@elliemae/ds-utilities": "3.14.0-next.1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-theme": "~2.6.0",
|