@neo4j-ndl/react 3.0.17 → 3.0.19

package/lib/esm/charts/Chart.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -19,30 +19,26 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { forwardRef, useEffect, useState, useContext, createContext, useImperativeHandle, useRef, Children, isValidElement, 
-// memo,
-useMemo, } from 'react';
+import React, { forwardRef, useEffect, useState, useContext, createContext, useImperativeHandle, useRef, Children, isValidElement, useMemo, useCallback, } from 'react';
 import * as d3 from 'd3';
-import { ChartsContext,
-// type ChartSize,
-// type Metadata,
- } from './Charts';
+import { ChartsContext, } from './Charts';
 import { classNames } from '../_common/defaultImports';
-// import { TopXAxis, BottomXAxis, LeftYAxis, RightYAxis } from './Axis';
 import { Line } from './Line';
-// import { LineThreshold } from './LineThreshold';
 import { Dot } from './Dot';
-// import { da, de, he, set } from 'date-fns/locale';
 import { line } from 'd3-shape';
 import { ChartTooltip } from './ChartTooltip';
 import { useDebounceCallback, useResizeObserver } from 'usehooks-ts';
 import { useThrottle } from './utils';
+// Used to visualize the voronoi polygons.
+const SHOULD_SHOW_VORONOI_DEBUG = false;
+// Used to throttle calls to on mouse move over the polygons.
+const THROTTLE_MOUSE_MOVE_MILLISECONDS = 100;
 const defaultChartProps = {
     scales: {},
     pointSelectionType: 'single',
 };
-export const canvasLeftPadding = 8;
-export const canvasRightPadding = 8;
+export const canvasLeftPadding = 0;
+export const canvasRightPadding = 0;
 // eslint-disable-next-line no-redeclare
 export const ChartsChartContext = createContext({
     chartRef: null,
@@ -52,36 +48,99 @@ export const ChartsChartContext = createContext({
     linePointArray: [],
     mousePositionRef: undefined,
 });
-const ChartComponent = forwardRef(function ChartComponent({ children, className, 
-// scales: textScales = defaultChartProps.scales,
-// hoverAreaType = defaultChartProps.hoverAreaType,
-scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChartProps.pointSelectionType, }, ref) {
-    // console.info('Chart.tsx - ChartComponent - initiation');
+export function getPointPixels(linePoint, scales) {
+    const { accessorXAxis, scaleXAxisId } = linePoint;
+    const { accessorYAxis, scaleYAxisId } = linePoint;
+    const valueX = linePoint[accessorXAxis];
+    const valueY = linePoint[accessorYAxis];
+    const scaleXAxisObject = scales[scaleXAxisId];
+    const scaleYAxisObject = scales[scaleYAxisId];
+    const scaleXAxis = scaleXAxisObject.functionWithContentWidthAsRange;
+    const scaleYAxis = scaleYAxisObject.functionWithContentHeightAsRange;
+    const pointPixelX = scaleXAxis(valueX);
+    const pointPixelY = scaleYAxis(valueY);
+    return { pointPixelX, pointPixelY };
+}
+function dotsPropsAreEqual(prevProps, nextProps) {
+    const isEqual = JSON.stringify(prevProps.selectedPoints) ==
+        JSON.stringify(nextProps.selectedPoints) &&
+        JSON.stringify(prevProps.metadata) == JSON.stringify(nextProps.metadata) &&
+        prevProps.selectedPointRef.current.dataId ===
+            nextProps.selectedPointRef.current.dataId;
+    return isEqual;
+}
+const DotsMemoized = React.memo(function Dots({ selectedPoints, metadata, selectedPointRef, tooltipAnchorRefCallback, scales, }) {
+    console.info('DotsMemoized >> render');
+    return (_jsx(_Fragment, { children: selectedPoints.map((linePoint) => {
+            const { key, dataId, pointIndex } = linePoint;
+            const { pointPixelX, pointPixelY } = getPointPixels(linePoint, scales);
+            const { isVisible, color } = metadata[dataId];
+            if (!isVisible)
+                return false;
+            const shouldAttachTooltipAnchorRef = dataId === selectedPointRef.current.dataId &&
+                pointIndex === selectedPointRef.current.pointIndex;
+            return (_jsx(Dot, { ref: shouldAttachTooltipAnchorRef ? tooltipAnchorRefCallback : null, x: pointPixelX, y: pointPixelY, color: color }, `chart-dot-${key}`));
+        }) }));
+}, dotsPropsAreEqual);
+function tooltipPropsAreEqual(prevProps, nextProps) {
+    console.info(prevProps, nextProps);
+    const isEqual = JSON.stringify(prevProps.selectedPoints) ==
+        JSON.stringify(nextProps.selectedPoints) &&
+        JSON.stringify(prevProps.metadata) == JSON.stringify(nextProps.metadata) &&
+        prevProps.tooltipAnchorRef.current === nextProps.tooltipAnchorRef.current;
+    console.info('tooltip >>>>>>>>>>>>>>>>>>>', { isEqual });
+    return isEqual;
+}
+const TooltipMemoized = React.memo(function Tooltip({ selectedPoints, metadata, tooltipAnchorRef, }) {
     var _a, _b;
-    // useEffect(() => {
-    //   console.info('component rerendered');
-    // });
+    console.info('Tooltip >> render', tooltipAnchorRef);
+    return (_jsxs(ChartTooltip, { anchorRef: tooltipAnchorRef, isOpen: true, children: [_jsx(ChartTooltip.Title, { children: String((_b = selectedPoints[0][(_a = selectedPoints[0]) === null || _a === void 0 ? void 0 : _a.accessorXAxis]) !== null && _b !== void 0 ? _b : '') }), selectedPoints.map((linePoint) => {
+                var _a;
+                if (linePoint === undefined)
+                    return null;
+                if (metadata[linePoint.dataId].isVisible === false)
+                    return null;
+                const { key, dataId, accessorYAxis } = linePoint;
+                const contentKey = `chart-tooltip-content-${key}`;
+                console.info(contentKey);
+                return (_jsx(ChartTooltip.Content, { leftElement: metadata[dataId].label, rightElement: ((_a = linePoint[accessorYAxis]) === null || _a === void 0 ? void 0 : _a.toString()) || '', indentSquareColor: metadata[dataId].color }, contentKey));
+            })] }));
+}, tooltipPropsAreEqual);
+const ChartComponent = forwardRef(function ChartComponent({ children, className, scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChartProps.pointSelectionType, }, ref) {
+    ////////////////////////////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////////////////////////////////
+    console.info('ChartComponent');
     const chartsContextValue = useContext(ChartsContext);
     const { data, metadata } = chartsContextValue;
     const chartRef = useRef(null);
     const contentRef = useRef(null);
-    const tooltipAnchorRef = useRef(null);
+    // const tooltipAnchorRef = useRef<SVGSVGElement | null>(null);
+    const [tooltipAnchorRef, setTooltipAnchorRef] = useState(null);
+    const tooltipAnchorRefCallback = useCallback((node) => {
+        console.info('useCallback - dep: - set: setTooltipAnchorRef', node);
+        setTooltipAnchorRef({
+            current: node,
+        });
+    }, []);
     const horizontalIntersectionLineRef = useRef(null);
     const mousePositionRef = useRef({ x: 0, y: 0 });
+    const [draggingPosition, setDraggingPosition] = useState(undefined);
+    const [isMouseDown, setIsMouseDown] = useState(false);
     const [hasLines, setHasLines] = useState(false);
     const [contentSize, setContentSize] = useState(undefined);
     // The svg paths calculated for the voronoi polygons, includes
     // the assigned line point for the section for the onHover event.
-    const [voroniPolygonPaths, setVoroniPolygonPaths] = useState();
-    const [linePointArray, setLinePointArray] = useState([]);
-    // The point where the tooltip will be anchored.
+    const [voronoiPolygons, setVoronoiPolygons] = useState();
     const selectedPointRef = useRef({});
     // The points that will display a thumb and be included in the tooltip.
-    const [selectedPoints, setSelectedPoints] = useState([]);
-    // useMemo:initialScales
+    const [selectedPoints, setSelectedPoints] = useState(null);
+    ////////////////////////////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////////////////////////////////
     const initialScales = useMemo(() => {
         // Map the string scales to actual d3 function scales.
-        //Will only re-run if the scalesProp changes.
+        // Will only re-run if the scalesProp changes.
         const initialScales = {};
         Object.entries(scalesProp).forEach(([key, value]) => {
             switch (value.type) {
@@ -125,38 +184,32 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
         return initialScales;
     }, [scalesProp]);
     const [scales, setScales] = useState(initialScales);
-    // Used to visualize the voronoi polygons.
-    const shouldShowVoronoiDebug = true;
-    const pointPixelAxis = pointSelectionType === 'x-axis' || pointSelectionType === 'single'
-        ? 'pointPixelX'
-        : 'pointPixelY';
-    // useEffect:contentSize
+    const voronoiScale = useMemo(() => {
+        const initialVoronoiScale = {
+            originalDomain: null,
+            functionWithContentWidthAsRange: d3.scaleLinear(),
+            functionWithContentHeightAsRange: d3.scaleLinear(),
+            function: d3.scaleLinear(),
+        };
+        return initialVoronoiScale;
+    }, []);
     useEffect(() => {
         // Needs to run after first render to determine size of content container.
-        // console.info('Chart.tsx - ChartComponent - useEffect - contentSize');
         if (!contentRef.current)
             return;
-        // console.info(
-        //   'Chart.tsx - ChartComponent - useEffect - contentSize (past guard)',
-        // );
         const contentElement = contentRef.current;
         if (contentElement && contentElement.getBoundingClientRect) {
             const newContentSize = {
                 width: contentElement.getBoundingClientRect().width,
                 height: contentElement.getBoundingClientRect().height,
             };
-            // console.info(
-            //   'Chart.tsx - ChartComponent - useEffect - setting contentSize',
-            // );
             // Will force a re-render, calculations require
             // width and height of the content container.
             setContentSize(newContentSize);
         }
     }, [contentRef]);
     const onResize = useDebounceCallback(() => {
-        // console.info(
-        //   'Chart.tsx - ChartComponent - useResizeObserver/useDebounceCallback - contentSize',
-        // );
+        console.info('useDebounceCallback - set: contentSize');
         // Timeout to ensure all rendering is done before we get the size.
         const contentElement = contentRef.current;
         if (contentElement && contentElement.getBoundingClientRect()) {
@@ -166,9 +219,6 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
                     canvasRightPadding,
                 height: contentElement.getBoundingClientRect().height,
             };
-            // console.info(
-            //   'Chart.tsx - ChartComponent - useResizeObserver/useDebounceCallback - setting contentSize',
-            // );
             setContentSize(newContentSize);
         }
     }, 200);
@@ -177,28 +227,18 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
         onResize: onResize,
     });
     useImperativeHandle(ref, () => {
-        // console.info('Chart.tsx - ChartComponent - useImperativeHandle - ref');
         const svgChart = chartRef.current;
         if (!svgChart) {
             return null;
         }
         return svgChart;
     });
-    // useEffect:line
-    // TODO: We don't need to run this after a render, we want this to run when we
-    // have the contentRef ref and contentSize state set. This will force a re-render
-    // when setting the states at the end.
-    useEffect(() => {
-        // console.info('Chart.tsx - ChartComponent - useEffect - line');
+    // The initial line point array is the representation of the full data
+    // that came into the component via the prop.
+    // useMemo:initialLinePointArray
+    const { initialLinePointArray, lineMap } = useMemo(() => {
         if (!data)
-            return;
-        if (!contentRef.current)
-            return;
-        const width = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width;
-        const height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
-        if (!width || !height)
-            return;
-        // console.info('Chart.tsx - useEffect - line (past guard)');
+            return { initialLinePointArray: [], lineMap: {} };
         // This use effect is specific for Line components.
         // If there are no line components then we don't need to do anything.
         const arrayChildren = Children.toArray(children);
@@ -206,20 +246,18 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
         if (!hasLines)
             return;
         setHasLines(true);
+        const lineMap = {};
+        // Used by react for the key properties.
+        let key = 0;
         // Here we are figuring out the min and max values for all the scales.
         // To do this we need to iterate through all of the lines and assign
         // each lines designated scale to a min max object specific for that scale.
-        const tempLinePointArray = [];
-        let newScales = Object.assign({}, scales);
+        const newInitialLinePointArray = [];
         arrayChildren.forEach((child) => {
-            var _a, _b, _c, _d;
             // Per line.
             if (!isValidElement(child) || child.type !== Line)
                 return;
-            const { scaleXAxis: scaleXAxisId, scaleYAxis: scaleYAxisId, accessorXAxis: initialAccessorXAxis, accessorYAxis: initialAccessorYAxis, dataId, seriesInterval, seriesIntervalStartValue, } = child.props;
-            // If it's not visible, don't include it.
-            if (metadata[dataId].isVisible === false)
-                return;
+            const { scaleXAxis: scaleXAxisId, scaleYAxis: scaleYAxisId, accessorXAxis: initialAccessorXAxis, accessorYAxis: initialAccessorYAxis, accessorHollowDot, dataId, seriesInterval, seriesIntervalStartValue, } = child.props;
             // Need to set these values for series type data.
             const accessorXAxis = seriesInterval
                 ? 'xAxisValue'
@@ -238,17 +276,20 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
                 const seriesLineData = lineData;
                 singleLinePointArray = seriesLineData.data.map((dataPoint, index) => {
                     const newLinePoint = {
+                        key,
                         dataId,
                         pointIndex: index,
                         dataIndex: lineDataIndex,
                         accessorXAxis,
                         accessorYAxis,
+                        accessorHollowDot,
                         xAxisValue: dataPoint !== undefined && dataPoint !== null
                             ? seriesIntervalStartValue + seriesInterval * index
                             : null,
                         yAxisValue: dataPoint,
                         scaleXAxisId,
                         scaleYAxisId,
+                        selectionGroup: null,
                     };
                     return newLinePoint;
                 });
@@ -258,13 +299,16 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
                 const nonSeriesData = lineData;
                 singleLinePointArray = nonSeriesData.data.map((dataPointArray, index) => {
                     const newLinePoint = {
+                        key,
                         dataId,
                         pointIndex: index,
                         dataIndex: lineDataIndex,
                         accessorXAxis,
                         accessorYAxis,
+                        accessorHollowDot,
                         scaleXAxisId,
                         scaleYAxisId,
+                        selectionGroup: null,
                     };
                     dataPointArray.forEach((dataPoint, index) => {
                         newLinePoint[nonSeriesData.metadata[index]] = dataPoint;
@@ -272,19 +316,45 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
                     return newLinePoint;
                 });
             }
+            key += 1;
             // Add this single line to the array that holds all of the lines.
-            tempLinePointArray.push(...singleLinePointArray);
+            newInitialLinePointArray.push(...singleLinePointArray);
+            // Line map for easier access to points from the same line. No need
+            // to iterate through the line point array.
+            // console.info('setting lineMap', lineMap);
+            lineMap[dataId] = singleLinePointArray;
+        });
+        const initialLinePointArray = newInitialLinePointArray;
+        return { initialLinePointArray, lineMap };
+    }, [data, children]) || {};
+    useEffect(() => {
+        if (!contentRef.current)
+            return;
+        const width = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width;
+        const height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
+        if (!width || !height)
+            return;
+        if (initialLinePointArray === undefined)
+            return;
+        // Need to reset the originalDomain for each scale.
+        let newScales = {};
+        Object.entries(scales).forEach(([key, scale]) => {
+            newScales[key] = Object.assign(Object.assign({}, scale), { originalDomain: null });
+        });
+        initialLinePointArray.forEach((linePoint) => {
+            var _a, _b;
+            const { accessorXAxis, accessorYAxis, scaleXAxisId, scaleYAxisId } = linePoint;
             // Get min and max values for both x and y axis from the data point array.
-            const minValueXAxis = d3.min(tempLinePointArray, 
+            const minValueXAxis = d3.min(initialLinePointArray, 
             // @ts-expect-error d3 types are not correct
             (linePoint) => linePoint[accessorXAxis]);
-            const maxValueXAxis = d3.max(tempLinePointArray, 
+            const maxValueXAxis = d3.max(initialLinePointArray, 
             // @ts-expect-error d3 types are not correct
             (linePoint) => linePoint[accessorXAxis]);
-            const minValueYAxis = d3.min(tempLinePointArray, 
+            const minValueYAxis = d3.min(initialLinePointArray, 
             // @ts-expect-error d3 types are not correct
             (linePoint) => linePoint[accessorYAxis]);
-            const maxValueYAxis = d3.max(tempLinePointArray, 
+            const maxValueYAxis = d3.max(initialLinePointArray, 
             // @ts-expect-error d3 types are not correct
             (linePoint) => linePoint[accessorYAxis]);
             const scaleXAxis = newScales[scaleXAxisId];
@@ -297,24 +367,36 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
             let scaleYAxisMin = undefined;
             let scaleYAxisMax = undefined;
             if (scalesProp[scaleXAxisId].domain !== undefined) {
+                // The domain value is set manually.
                 scaleXAxisMin = scalesProp[scaleXAxisId].domain[0];
                 scaleXAxisMax = scalesProp[scaleXAxisId].domain[1];
             }
-            else {
+            else if (scaleXAxis !== undefined &&
+                (scaleXAxis === null || scaleXAxis === void 0 ? void 0 : scaleXAxis.originalDomain) !== null) {
                 //@ts-expect-error d3 types are not correct - it can handle undefined
-                scaleXAxisMin = d3.min([(_a = scaleXAxis.originalDomain) === null || _a === void 0 ? void 0 : _a[0], minValueXAxis]);
+                scaleXAxisMin = d3.min([scaleXAxis.originalDomain[0], minValueXAxis]);
                 //@ts-expect-error d3 types are not correct - it can handle undefined
-                scaleXAxisMax = d3.max([(_b = scaleXAxis.originalDomain) === null || _b === void 0 ? void 0 : _b[1], maxValueXAxis]);
+                scaleXAxisMax = d3.max([scaleXAxis.originalDomain[1], maxValueXAxis]);
+            }
+            else {
+                scaleXAxisMin = minValueXAxis;
+                scaleXAxisMax = maxValueXAxis;
             }
             if (scalesProp[scaleYAxisId].domain !== undefined) {
+                // The domain value is set manually.
                 scaleYAxisMin = scalesProp[scaleYAxisId].domain[0];
                 scaleYAxisMax = scalesProp[scaleYAxisId].domain[1];
             }
-            else {
+            else if (scaleYAxis !== undefined &&
+                scaleXAxis.originalDomain !== null) {
                 //@ts-expect-error d3 types are not correct - it can handle undefined
-                scaleYAxisMin = d3.min([(_c = scaleYAxis.originalDomain) === null || _c === void 0 ? void 0 : _c[0], minValueYAxis]);
+                scaleYAxisMin = d3.min([(_a = scaleYAxis.originalDomain) === null || _a === void 0 ? void 0 : _a[0], minValueYAxis]);
                 //@ts-expect-error d3 types are not correct - it can handle undefined
-                scaleYAxisMax = d3.max([(_d = scaleYAxis.originalDomain) === null || _d === void 0 ? void 0 : _d[1], maxValueYAxis]);
+                scaleYAxisMax = d3.max([(_b = scaleYAxis.originalDomain) === null || _b === void 0 ? void 0 : _b[1], maxValueYAxis]);
+            }
+            else {
+                scaleYAxisMin = minValueYAxis;
+                scaleYAxisMax = maxValueYAxis;
             }
             // D3 types are not correct it will be the same type as the original domain.
             // casting it to [number, number] to avoid type errors.
@@ -337,85 +419,265 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
             // Update the specific scale.
             newScales = Object.assign(Object.assign({}, newScales), { [scaleXAxisId]: scaleXAxis, [scaleYAxisId]: scaleYAxis });
         });
-        // The points must be created after the line points have been created.
-        // This is because the points are based on the scalers created from the line points.
-        // The min max values are constantly updated. So looping twice is inevitable.
-        const newLinePointArray = [];
-        const delaunayPointArray = [];
-        tempLinePointArray.forEach((linePoint) => {
-            const { accessorXAxis, accessorYAxis, scaleXAxisId, scaleYAxisId } = linePoint;
+        voronoiScale.function.domain([0, width !== null && width !== void 0 ? width : 0]);
+        voronoiScale.originalDomain = [0, width !== null && width !== void 0 ? width : 0];
+        voronoiScale.functionWithContentWidthAsRange.domain([0, width !== null && width !== void 0 ? width : 0]);
+        voronoiScale.functionWithContentWidthAsRange.range([0, width !== null && width !== void 0 ? width : 0]);
+        setScales(newScales);
+    }, [contentSize, scalesProp, children, initialLinePointArray]);
+    const { linePointArray, pointSelectionGroups } = useMemo(() => {
+        if (initialLinePointArray === undefined)
+            return {};
+        // The following is only used for pointSelectionType x-axis and y-axis
+        const pointSelectionGroups = {};
+        const linePointArray = initialLinePointArray.map((linePoint) => {
+            const { pointPixelX, pointPixelY } = getPointPixels(linePoint, scales);
+            const pointPixelAxis = pointSelectionType === 'x-axis' || pointSelectionType === 'single'
+                ? pointPixelX
+                : pointPixelY;
+            if (pointPixelAxis === undefined)
+                return linePoint;
+            linePoint.selectionGroup = pointPixelAxis;
+            if (!pointSelectionGroups[pointPixelAxis]) {
+                pointSelectionGroups[pointPixelAxis] = [];
+                pointSelectionGroups[pointPixelAxis].push(linePoint);
+            }
+            else {
+                // Pixel point already exists.
+                pointSelectionGroups[pointPixelAxis].push(linePoint);
+            }
+            return linePoint;
+        });
+        return { linePointArray, pointSelectionGroups };
+    }, [pointSelectionType, initialLinePointArray, scales]);
+    const voronoiPolygonPointsArray = useMemo(() => {
+        const width = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width;
+        const height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
+        if (!width || !height)
+            return;
+        if (lineMap === undefined)
+            return;
+        if (linePointArray === undefined)
+            return;
+        const visibleLinePointArray = linePointArray.filter((linePoint) => {
+            return metadata[linePoint.dataId].isVisible;
+        });
+        const delaunay = d3.Delaunay.from(visibleLinePointArray, 
+        // @ts-expect-error - d3 types are not correct, it can handle null being returned.
+        (linePoint) => {
+            const { accessorXAxis, scaleXAxisId } = linePoint;
             const valueX = linePoint[accessorXAxis];
-            const valueY = linePoint[accessorYAxis];
-            const scaleXAxisObject = newScales[scaleXAxisId];
-            const scaleYAxisObject = newScales[scaleYAxisId];
+            const scaleXAxisObject = scales[scaleXAxisId];
             const scaleXAxis = scaleXAxisObject.functionWithContentWidthAsRange;
+            const scaleXAxisCopy = scaleXAxis.copy();
+            scaleXAxisCopy.domain(scaleXAxisObject.originalDomain);
+            const pointPixelX = scaleXAxisCopy(valueX);
+            // We must return null otherwise some points won't work with voronoi/tooltips.
+            return pointPixelX === undefined ? null : pointPixelX;
+        }, (linePoint) => {
+            const { accessorYAxis, scaleYAxisId } = linePoint;
+            const valueY = linePoint[accessorYAxis];
+            const scaleYAxisObject = scales[scaleYAxisId];
             const scaleYAxis = scaleYAxisObject.functionWithContentHeightAsRange;
-            const pointPixelX = scaleXAxis(valueX);
+            const scaleYAxisCopy = scaleYAxis.copy();
+            scaleYAxisCopy.domain(scaleYAxisObject.originalDomain);
             const pointPixelY = scaleYAxis(valueY);
-            const newLinePoint = Object.assign(Object.assign({}, linePoint), { pointPixelX,
-                pointPixelY });
-            newLinePointArray.push(newLinePoint);
-            // We diss line points that have null values as they don't require
-            // an on hover event and therfor polygon paths.
-            if (valueX === null || valueY === null)
-                return;
-            if (pointPixelX === null || pointPixelY === null)
-                return;
-            // Calculating the voroni polygons requires knowing the exact
-            // pixel positions of all the line points.
-            delaunayPointArray.push([pointPixelX, pointPixelY, newLinePoint]);
+            // We must return null otherwise some points won't work with voronoi/tooltips.
+            return pointPixelY === undefined ? null : pointPixelY;
         });
-        // We have now created the line points and scales.
-        // From those we can now calculate the on hover voroni polygons.
-        // This must also be calculated after all updates as the polygon
-        // paths will change depending on the line points available.
-        const delaunayPointArrayLike = Object.assign(Object.assign({}, delaunayPointArray), { length: delaunayPointArray.length });
-        const delaunay = d3.Delaunay.from(delaunayPointArrayLike);
         const voronoi = delaunay.voronoi([0, 0, width, height]);
         const voronoiPolygons = voronoi.cellPolygons();
         const voronoiPolygonPointsArray = Array.from(voronoiPolygons);
+        return voronoiPolygonPointsArray;
+    }, [metadata, linePointArray]);
+    useEffect(() => {
+        if (isMouseDown)
+            return;
+        if (voronoiPolygonPointsArray === undefined)
+            return;
+        if (linePointArray === undefined)
+            return;
+        const visibleLinePointArray = linePointArray.filter((linePoint) => {
+            return metadata[linePoint.dataId].isVisible;
+        });
         const delaunayLineFn = line();
-        const voroniPolygonPaths = voronoiPolygonPointsArray.map((voronoiPolygonPoints, index) => {
-            const path = delaunayLineFn(voronoiPolygonPoints);
-            const linePoint = delaunayPointArray[index][2];
-            return { path, linePoint };
+        const newVoronoiPolygons = voronoiPolygonPointsArray.map((voronoiPolygonPoints) => {
+            const newVoronoiPolygonPoints = voronoiPolygonPoints.map((voronoiPolygonPoint) => {
+                const [x, y] = voronoiPolygonPoint;
+                const scale = voronoiScale.functionWithContentWidthAsRange;
+                const newX = scale(x);
+                const newVoronoiPolygonPoint = [newX, y];
+                return newVoronoiPolygonPoint;
+            });
+            newVoronoiPolygonPoints.index = voronoiPolygonPoints.index;
+            const { index } = newVoronoiPolygonPoints;
+            const path = delaunayLineFn(newVoronoiPolygonPoints);
+            const linePoint = visibleLinePointArray[index];
+            const voronoiIndex = index;
+            return {
+                path,
+                linePoint,
+                voronoiIndex,
+            };
         });
-        setVoroniPolygonPaths(voroniPolygonPaths);
-        setLinePointArray(newLinePointArray);
-        setScales(newScales);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [contentSize, scalesProp, children, data, metadata]);
-    const handleMouseMove = (event, linePoint) => {
+        setVoronoiPolygons(newVoronoiPolygons);
+    }, [voronoiPolygonPointsArray, linePointArray, scales, isMouseDown]);
+    const handleMouseMove = (event, voronoiPolygon) => {
+        const { linePoint } = voronoiPolygon;
         const [xm, ym] = d3.pointer(event, contentRef.current);
         const mousePixelX = xm;
         const mousePixelY = ym;
         mousePositionRef.current.x = mousePixelX;
         mousePositionRef.current.y = mousePixelY;
-        const { pointPixelX, pointPixelY, pointIndex, dataId } = linePoint;
+        // Zooming
+        if (isMouseDown) {
+            // We care about zooming when dragging because we want to fill space
+            // showing what is being selected.
+            const newDraggingPosition = Object.assign(Object.assign({}, draggingPosition), { endX: mousePixelX });
+            setDraggingPosition(newDraggingPosition);
+            return;
+        }
+        const { pointPixelX, pointPixelY } = getPointPixels(linePoint, scales);
+        if (pointPixelX === undefined || pointPixelY === undefined)
+            return;
+        // Line point
+        const { pointIndex, dataId } = linePoint;
         const distance = Math.hypot(pointPixelX - mousePixelX, pointPixelY - mousePixelY);
         const radius = 32;
-        const shouldTrigger = distance < radius;
+        const shouldTrigger = distance < radius && pointSelectionGroups !== undefined;
         if (shouldTrigger) {
-            // console.info('trigger');
-            const pointPixelAxisValue = linePoint[pointPixelAxis];
-            const newSelectedPoints = pointSelectionGroups[pointPixelAxisValue];
-            if (newSelectedPoints !== selectedPoints)
-                // console.info('set selected points');
+            const selectionGroup = linePoint.selectionGroup;
+            const hasSelectionGroup = selectionGroup !== null;
+            if (!hasSelectionGroup) {
+                console.warn('No selection group for point');
+                return;
+            }
+            const newSelectedPoints = pointSelectionGroups[selectionGroup];
+            const isNewSelectedPoints = newSelectedPoints !== selectedPoints;
+            if (isNewSelectedPoints) {
                 selectedPointRef.current = { dataId, pointIndex };
+            }
             setSelectedPoints(newSelectedPoints);
         }
-        else if (selectedPoints.length > 0) {
-            // console.info('unset selected points');
+        else if (selectedPoints !== null && selectedPoints.length > 0) {
             selectedPointRef.current = {};
-            setSelectedPoints([]);
+            setSelectedPoints(null);
         }
     };
-    const throttledHandleMouseMove = useThrottle(handleMouseMove, 100);
+    const throttledHandleMouseMove = useThrottle(handleMouseMove, THROTTLE_MOUSE_MOVE_MILLISECONDS);
     const handleMouseLeave = () => {
+        if (isMouseDown) {
+            return;
+        }
+        setIsMouseDown(false);
+        setDraggingPosition(undefined);
         // Mouse moves outside of the content area.
-        if (selectedPoints.length > 0)
-            setSelectedPoints([]);
+        if (selectedPoints !== null && selectedPoints.length > 0)
+            setSelectedPoints(null);
     };
+    const handleMouseDown = (event) => {
+        const amountOfMouseClicks = event.detail;
+        const isDoubleClick = amountOfMouseClicks === 2;
+        if (isDoubleClick &&
+            contentSize !== undefined &&
+            contentSize.width !== undefined) {
+            // If zoomed in, return to the original view.
+            Object.entries(scales).forEach(([scaleId, scale]) => {
+                if (scale.originalDomain === null)
+                    return;
+                const newScale = Object.assign({}, scale);
+                newScale.function.domain(scale.originalDomain);
+                newScale.functionWithContentWidthAsRange.domain(scale.originalDomain);
+                scales[scaleId] = newScale;
+            });
+            voronoiScale.function.domain([0, contentSize.width]);
+            voronoiScale.functionWithContentWidthAsRange.domain([
+                0,
+                contentSize.width,
+            ]);
+        }
+        // Set start position for dragging.
+        const [xm, ym] = d3.pointer(event, contentRef.current);
+        const mousePixelX = xm;
+        const mousePixelY = ym;
+        mousePositionRef.current.x = mousePixelX;
+        mousePositionRef.current.y = mousePixelY;
+        // Initial dragging position.
+        const newDraggingPosition = {
+            startX: mousePixelX,
+            endX: undefined,
+        };
+        // Needed for the dragging motion.
+        setIsMouseDown(true);
+        setDraggingPosition(newDraggingPosition);
+    };
+    // must attach mouse listener to window
+    const handleMouseUp = () => {
+        const [xm] = d3.pointer(event, contentRef.current);
+        const mousePixelX = xm;
+        if ((draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX) === mousePixelX) {
+            // The user clicked on the same place, no zooming.
+            setIsMouseDown(false);
+            setDraggingPosition(undefined);
+            return;
+        }
+        const leftX = (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX) > (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX)
+            ? draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX
+            : draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX;
+        const rightX = (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX) > (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX)
+            ? draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX
+            : draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX;
+        Object.entries(scales).forEach(([scaleId, scale]) => {
+            const newScale = Object.assign({}, scale);
+            newScale.function.domain([
+                newScale.function.invert(leftX),
+                newScale.function.invert(rightX),
+            ]);
+            newScale.functionWithContentWidthAsRange.domain([
+                newScale.functionWithContentWidthAsRange.invert(leftX),
+                newScale.functionWithContentWidthAsRange.invert(rightX),
+            ]);
+            scales[scaleId] = newScale;
+        });
+        // update voronoi scale
+        voronoiScale.function.domain([
+            voronoiScale.function.invert(leftX),
+            voronoiScale.function.invert(rightX),
+        ]);
+        voronoiScale.functionWithContentWidthAsRange.domain([
+            voronoiScale.functionWithContentWidthAsRange.invert(leftX),
+            voronoiScale.functionWithContentWidthAsRange.invert(rightX),
+        ]);
+        setIsMouseDown(false);
+        setDraggingPosition(undefined);
+    };
+    const isCanvasComponent = (child) => {
+        return isValidElement(child) && child.type === Line;
+    };
+    const width = (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX) && (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX)
+        ? draggingPosition.endX > draggingPosition.startX
+            ? draggingPosition.endX - draggingPosition.startX
+            : draggingPosition.startX - draggingPosition.endX
+        : 1;
+    const leftX = (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX) && (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX)
+        ? (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX) > (draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX)
+            ? draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.endX
+            : draggingPosition === null || draggingPosition === void 0 ? void 0 : draggingPosition.startX
+        : undefined;
+    const shouldRenderDots = hasLines &&
+        contentSize !== undefined &&
+        selectedPoints !== null &&
+        selectedPoints.length > 0 &&
+        metadata !== undefined;
+    const shouldRenderTooltip = hasLines &&
+        contentSize !== undefined &&
+        selectedPoints !== null &&
+        selectedPoints.length > 0 &&
+        metadata !== undefined &&
+        tooltipAnchorRef !== null &&
+        tooltipAnchorRef.current !== null;
+    if (linePointArray === undefined)
+        return null;
     const chartContextValue = {
         chartRef,
         contentRef,
@@ -425,90 +687,42 @@ scales: scalesProp = defaultChartProps.scales, pointSelectionType = defaultChart
         mousePositionRef,
     };
     const chartClasses = classNames(`ndl-charts-chart`, className);
-    const contentClasses = classNames(`ndl-charts-chart-content`, className);
-    // useMemo:pointSelectionGroups
-    const pointSelectionGroups = useMemo(() => {
-        // console.info('Chart.tsx - ChartComponent - useMemo - pointSelectionGroups');
-        // The following is only used for pointSelectionType x-axis and y-axis
-        const pointSelectionGroups = {};
-        for (let i = 0; i < linePointArray.length; i += 1) {
-            const linePoint = linePointArray[i];
-            const pointPixelAxis = pointSelectionType === 'x-axis' || pointSelectionType === 'single'
-                ? 'pointPixelX'
-                : 'pointPixelY';
-            const pointPixelAxisValue = linePoint[pointPixelAxis];
-            if (pointPixelAxisValue === undefined)
-                continue;
-            if (!pointSelectionGroups[pointPixelAxisValue]) {
-                pointSelectionGroups[pointPixelAxisValue] = [];
-                pointSelectionGroups[pointPixelAxisValue].push(linePoint);
-            }
-            else {
-                // Pixel point already exists.
-                pointSelectionGroups[pointPixelAxisValue].push(linePoint);
-            }
-        }
-        return pointSelectionGroups;
-    }, [pointSelectionType, linePointArray]);
-    const isCanvasComponent = (child) => {
-        return isValidElement(child) && child.type === Line;
-    };
-    return (_jsx(ChartsChartContext.Provider, { value: chartContextValue, children: _jsxs("div", { ref: chartRef, className: chartClasses, onMouseLeave: handleMouseLeave, children: [_jsxs("svg", { ref: contentRef, className: contentClasses, children: [_jsxs("g", { children: [Children.toArray(children).map((child) => {
+    const contentClasses = classNames(`ndl-charts-chart-content`);
+    const zoomingClasses = classNames(`ndl-charts-chart-zoom`);
+    return (_jsx(ChartsChartContext.Provider, { value: chartContextValue, children: _jsxs("div", { ref: chartRef, className: chartClasses, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, children: [_jsxs("svg", { ref: contentRef, className: contentClasses, children: [_jsxs("g", { children: [draggingPosition && contentSize && (
+                                // The zooming rectangle visualizing the selected area.
+                                _jsx("g", { children: _jsx("rect", { className: zoomingClasses, x: leftX, width: width, height: contentSize.height }) })), Children.toArray(children).map((child) => {
+                                    // Render the lines.
                                     return isCanvasComponent(child) ? child : null;
                                 }), hasLines &&
                                     contentSize &&
                                     selectedPoints &&
                                     selectedPoints.length > 0 && (
                                 // Dotted line for x-axis selection.
-                                _jsx("line", { ref: horizontalIntersectionLineRef, x1: selectedPoints[0].pointPixelX, x2: selectedPoints[0].pointPixelX, y1: "0", y2: contentSize.height, style: {
+                                _jsx("line", { ref: horizontalIntersectionLineRef, x1: getPointPixels(selectedPoints[0], scales).pointPixelX, x2: getPointPixels(selectedPoints[0], scales).pointPixelX, y1: "0", y2: contentSize.height, style: {
                                         strokeDasharray: '5,7',
                                         stroke: 'rgb(111, 117, 126)',
-                                    } })), hasLines &&
-                                    contentSize &&
-                                    selectedPoints &&
-                                    selectedPoints.length > 0 &&
-                                    // The point thumb for x-axis selection.
-                                    selectedPoints.map((linePoint, index) => {
-                                        const { dataId, pointIndex, pointPixelX, pointPixelY } = linePoint;
-                                        const { isVisible, color } = metadata[dataId];
-                                        if (isVisible) {
-                                            // We want to attach the tooltip anchor to the correctly selected point.
-                                            const { dataId: selectedPointRefDataId, pointIndex: selectedPointRefPointIndex, } = selectedPointRef.current;
-                                            const shouldAttachTooltipAnchorRef = dataId === selectedPointRefDataId &&
-                                                pointIndex === selectedPointRefPointIndex;
-                                            return (_jsx(Dot, { ref: shouldAttachTooltipAnchorRef ? tooltipAnchorRef : null, x: pointPixelX, y: pointPixelY, color: color }, index));
-                                        }
-                                        return false;
-                                    })] }), _jsx("g", { children: hasLines &&
-                                voroniPolygonPaths &&
-                                voroniPolygonPaths.map((voroniPolygonPath, index) => {
-                                    const { path, linePoint } = voroniPolygonPath;
-                                    return (_jsx("path", { d: path, className: "action-voronoi", onMouseMove: (event) => {
-                                            throttledHandleMouseMove(event, linePoint);
+                                    } })), shouldRenderDots && (_jsx(DotsMemoized
+                                // Dots together with tooltip to be rendered
+                                , { 
+                                    // Dots together with tooltip to be rendered
+                                    selectedPoints: selectedPoints, metadata: metadata, selectedPointRef: selectedPointRef, tooltipAnchorRefCallback: tooltipAnchorRefCallback, scales: scales }))] }), _jsx("g", { children: hasLines &&
+                                voronoiPolygons &&
+                                voronoiPolygons.map((voronoiPolygon, index) => {
+                                    // Hover area for each line point.
+                                    const { path } = voronoiPolygon;
+                                    return (_jsx("path", { d: path, onMouseMove: (event) => {
+                                            throttledHandleMouseMove(event, voronoiPolygon);
                                         }, style: {
                                             strokeWidth: 1,
                                             stroke: 'black',
                                             strokeOpacity: 0.5,
                                             fill: '#fff',
-                                            opacity: shouldShowVoronoiDebug ? 0.5 : 0,
+                                            opacity: SHOULD_SHOW_VORONOI_DEBUG ? 0.5 : 0,
                                         } }, index));
-                                }) })] }), _jsx(ChartTooltip
-                //@ts-expect-error SVG element ref will work in this case.
-                , { 
-                    //@ts-expect-error SVG element ref will work in this case.
-                    anchorRef: tooltipAnchorRef, isOpen: Boolean(hasLines &&
-                        contentSize &&
-                        selectedPoints &&
-                        selectedPoints.length > 0), children: hasLines &&
-                        contentSize &&
-                        selectedPoints &&
-                        selectedPoints.length > 0 && (_jsxs(_Fragment, { children: [_jsx(ChartTooltip.Title, { children: String((_b = selectedPoints[0][(_a = selectedPoints[0]) === null || _a === void 0 ? void 0 : _a.accessorXAxis]) !== null && _b !== void 0 ? _b : '') }), selectedPoints.map((linePoint) => {
-                                var _a;
-                                if (linePoint === undefined)
-                                    return null;
-                                const { dataId, accessorYAxis } = linePoint;
-                                return (_jsx(ChartTooltip.Content, { leftElement: chartsContextValue.metadata[dataId].label, rightElement: ((_a = linePoint[accessorYAxis]) === null || _a === void 0 ? void 0 : _a.toString()) || '', indentSquareColor: chartsContextValue.metadata[dataId].color }, dataId));
-                            })] })) })] }) }));
+                                }) })] }), shouldRenderTooltip && (
+                // Tooltip together with the dots to be rendered
+                _jsx(TooltipMemoized, { selectedPoints: selectedPoints, metadata: metadata, tooltipAnchorRef: tooltipAnchorRef }))] }) }));
 });
 // Issue with TypeScript forwardRef and subcomponents: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-894053907
 const Chart = Object.assign(ChartComponent, {