@neo4j-ndl/react 3.0.27 → 3.0.29

package/lib/esm/charts/Chart.js

@@ -1,734 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- *
- *  Copyright (c) "Neo4j"
- *  Neo4j Sweden AB [http://neo4j.com]
- *
- *  This file is part of Neo4j.
- *
- *  Neo4j is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU General Public License for more details.
- *
- *  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 React, { forwardRef, useEffect, useState, useContext, createContext, useImperativeHandle, useRef, Children, isValidElement, useMemo, } from 'react';
-import * as d3 from 'd3';
-import { ChartsContext, } from './Charts';
-import { classNames } from '../_common/defaultImports';
-import { Line } from './Line';
-import { Dot } from './Dot';
-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 = 0;
-export const canvasRightPadding = 0;
-// eslint-disable-next-line no-redeclare
-export const ChartsChartContext = createContext({
-    chartRef: null,
-    contentRef: null,
-    contentSize: undefined,
-    scales: {},
-    linePointArray: [],
-    mousePositionRef: undefined,
-});
-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);
-    return isEqual;
-}
-const DotsMemoized = React.memo(function Dots({ selectedPoints, metadata, scales, }) {
-    console.info('DotsMemoized >> render');
-    return (_jsx(_Fragment, { children: selectedPoints.map((linePoint) => {
-            const { key, dataId } = linePoint;
-            const { pointPixelX, pointPixelY } = getPointPixels(linePoint, scales);
-            const { isVisible, color } = metadata[dataId];
-            if (!isVisible)
-                return null;
-            return (_jsx(Dot, { x: pointPixelX, y: pointPixelY, color: color }, `chart-dot-${key}`));
-        }) }));
-}, dotsPropsAreEqual);
-function tooltipPropsAreEqual(prevProps, nextProps) {
-    var _a, _b, _c, _d;
-    console.info(prevProps, nextProps);
-    if (prevProps.isOpen !== nextProps.isOpen)
-        return false;
-    if (((_a = prevProps.anchorPosition) === null || _a === void 0 ? void 0 : _a.x) !== ((_b = nextProps.anchorPosition) === null || _b === void 0 ? void 0 : _b.x))
-        return false;
-    if (((_c = prevProps.anchorPosition) === null || _c === void 0 ? void 0 : _c.y) !== ((_d = nextProps.anchorPosition) === null || _d === void 0 ? void 0 : _d.y))
-        return false;
-    const isEqual = JSON.stringify(prevProps.selectedPoints) ==
-        JSON.stringify(nextProps.selectedPoints) &&
-        JSON.stringify(prevProps.metadata) == JSON.stringify(nextProps.metadata);
-    return isEqual;
-}
-const TooltipMemoized = React.memo(function Tooltip({ selectedPoints, metadata, anchorPosition, isOpen, }) {
-    var _a, _b, _c;
-    return (_jsxs(ChartTooltip, { anchorPosition: anchorPosition, isOpen: isOpen, children: [_jsx(ChartTooltip.Title, { children: String((_c = (_a = selectedPoints === null || selectedPoints === void 0 ? void 0 : selectedPoints[0]) === null || _a === void 0 ? void 0 : _a[(_b = selectedPoints === null || selectedPoints === void 0 ? void 0 : selectedPoints[0]) === null || _b === void 0 ? void 0 : _b.accessorXAxis]) !== null && _c !== void 0 ? _c : '') }), 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 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 [voronoiPolygons, setVoronoiPolygons] = useState();
-    const [tooltipAnchorPosition, setTooltipAnchorPosition] = useState({
-        x: 0,
-        y: 0,
-    });
-    // The points that will display a thumb and be included in the tooltip.
-    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.
-        const initialScales = {};
-        Object.entries(scalesProp).forEach(([key, value]) => {
-            switch (value.type) {
-                case 'linear':
-                    initialScales[key] = {
-                        originalDomain: null,
-                        functionWithContentWidthAsRange: d3.scaleLinear(),
-                        functionWithContentHeightAsRange: d3.scaleLinear(),
-                        function: d3.scaleLinear(),
-                    };
-                    break;
-                case 'log':
-                    initialScales[key] = {
-                        originalDomain: null,
-                        functionWithContentWidthAsRange: d3.scaleLog(),
-                        functionWithContentHeightAsRange: d3.scaleLog(),
-                        function: d3.scaleLog(),
-                    };
-                    break;
-                case 'time':
-                    initialScales[key] = {
-                        originalDomain: null,
-                        functionWithContentWidthAsRange: d3.scaleTime(),
-                        functionWithContentHeightAsRange: d3.scaleTime(),
-                        function: d3.scaleTime(),
-                    };
-                    break;
-                case 'utc':
-                    initialScales[key] = {
-                        originalDomain: null,
-                        functionWithContentWidthAsRange: d3.scaleUtc(),
-                        functionWithContentHeightAsRange: d3.scaleUtc(),
-                        function: d3.scaleUtc(),
-                    };
-                    break;
-                default:
-                    console.error('Invalid scale type');
-                    break;
-            }
-        });
-        return initialScales;
-    }, [scalesProp]);
-    const [scales, setScales] = useState(initialScales);
-    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.
-        if (!contentRef.current)
-            return;
-        const contentElement = contentRef.current;
-        requestAnimationFrame(() => {
-            if (contentElement && contentElement.getBoundingClientRect) {
-                const newContentSize = {
-                    width: contentElement.getBoundingClientRect().width,
-                    height: contentElement.getBoundingClientRect().height,
-                };
-                // Will force a re-render, calculations require
-                // width and height of the content container.
-                setContentSize(newContentSize);
-            }
-        });
-    }, [contentRef]);
-    const onResize = useDebounceCallback(() => {
-        requestAnimationFrame(() => {
-            const contentElement = contentRef.current;
-            if (!contentElement)
-                return;
-            const rect = contentElement.getBoundingClientRect();
-            if (!rect)
-                return;
-            const newContentSize = {
-                width: rect.width - canvasLeftPadding - canvasRightPadding,
-                height: rect.height,
-            };
-            setContentSize(newContentSize);
-        });
-    }, 100);
-    useResizeObserver({
-        ref: chartRef,
-        onResize: onResize,
-    });
-    useImperativeHandle(ref, () => {
-        const svgChart = chartRef.current;
-        if (!svgChart) {
-            return null;
-        }
-        return svgChart;
-    });
-    // 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 { 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);
-        const hasLines = arrayChildren.some((child) => isValidElement(child) && child.type === Line);
-        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 newInitialLinePointArray = [];
-        arrayChildren.forEach((child) => {
-            // Per line.
-            if (!isValidElement(child) || child.type !== Line)
-                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'
-                : initialAccessorXAxis;
-            const accessorYAxis = seriesInterval
-                ? 'yAxisValue'
-                : initialAccessorYAxis;
-            const lineDataIndex = data.findIndex((data) => data.id === dataId);
-            const lineData = data[lineDataIndex];
-            if (!lineData)
-                return; // Id given does not exist in the data array.
-            // Convert line data to d3 line data.
-            let singleLinePointArray = [];
-            if (seriesInterval && seriesIntervalStartValue) {
-                // Series interval.
-                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;
-                });
-            }
-            else {
-                // At least two dimensions are required for the line data.
-                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;
-                    });
-                    return newLinePoint;
-                });
-            }
-            key += 1;
-            // Add this single line to the array that holds all of the lines.
-            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(() => {
-        var _a, _b;
-        if (!contentRef.current)
-            return;
-        // Round the width and height to avoid floating point precision issues.
-        const width = Math.round((_a = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) !== null && _a !== void 0 ? _a : 0);
-        const height = Math.round((_b = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _b !== void 0 ? _b : 0);
-        if (width === 0 || height === 0)
-            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(initialLinePointArray, 
-            // @ts-expect-error d3 types are not correct
-            (linePoint) => linePoint[accessorXAxis]);
-            const maxValueXAxis = d3.max(initialLinePointArray, 
-            // @ts-expect-error d3 types are not correct
-            (linePoint) => linePoint[accessorXAxis]);
-            const minValueYAxis = d3.min(initialLinePointArray, 
-            // @ts-expect-error d3 types are not correct
-            (linePoint) => linePoint[accessorYAxis]);
-            const maxValueYAxis = d3.max(initialLinePointArray, 
-            // @ts-expect-error d3 types are not correct
-            (linePoint) => linePoint[accessorYAxis]);
-            const scaleXAxis = newScales[scaleXAxisId];
-            const scaleYAxis = newScales[scaleYAxisId];
-            // Here we figure out the min and max values for the specific scale,
-            // this compares previous lines min max values to the current lines
-            // min max values on the same scale.
-            let scaleXAxisMin = undefined;
-            let scaleXAxisMax = undefined;
-            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 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([scaleXAxis.originalDomain[0], minValueXAxis]);
-                //@ts-expect-error d3 types are not correct - it can handle undefined
-                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 if (scaleYAxis !== undefined &&
-                scaleXAxis.originalDomain !== null) {
-                //@ts-expect-error d3 types are not correct - it can handle undefined
-                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([(_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.
-            const xValuesDomain = [scaleXAxisMin, scaleXAxisMax];
-            // D3 types are not correct it will be the same type as the original domain.
-            // casting it to [number, number] to avoid type errors.
-            const yValuesDomain = [scaleYAxisMin, scaleYAxisMax];
-            scaleXAxis.function.domain(xValuesDomain);
-            scaleXAxis.originalDomain = xValuesDomain;
-            scaleXAxis.functionWithContentWidthAsRange.domain(xValuesDomain);
-            scaleXAxis.functionWithContentWidthAsRange.range([0, width !== null && width !== void 0 ? width : 0]);
-            scaleXAxis.functionWithContentHeightAsRange.domain(xValuesDomain);
-            scaleXAxis.functionWithContentHeightAsRange.range([height !== null && height !== void 0 ? height : 0, 0]);
-            scaleYAxis.function.domain(yValuesDomain);
-            scaleYAxis.originalDomain = yValuesDomain;
-            scaleYAxis.functionWithContentWidthAsRange.domain(yValuesDomain);
-            scaleYAxis.functionWithContentWidthAsRange.range([0, width !== null && width !== void 0 ? width : 0]);
-            scaleYAxis.functionWithContentHeightAsRange.domain(yValuesDomain);
-            scaleYAxis.functionWithContentHeightAsRange.range([height !== null && height !== void 0 ? height : 0, 0]); // inverting vertical scale since SVG has 0,0 at top left.
-            // Update the specific scale.
-            newScales = Object.assign(Object.assign({}, newScales), { [scaleXAxisId]: scaleXAxis, [scaleYAxisId]: scaleYAxis });
-        });
-        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 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 scaleYAxisCopy = scaleYAxis.copy();
-            scaleYAxisCopy.domain(scaleYAxisObject.originalDomain);
-            const pointPixelY = scaleYAxis(valueY);
-            // We must return null otherwise some points won't work with voronoi/tooltips.
-            return pointPixelY === undefined ? null : pointPixelY;
-        });
-        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 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,
-            };
-        });
-        setVoronoiPolygons(newVoronoiPolygons);
-    }, [voronoiPolygonPointsArray, linePointArray, scales, isMouseDown]);
-    const handleMouseMove = (event, voronoiPolygon) => {
-        var _a;
-        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;
-        // 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;
-        const distance = Math.hypot(pointPixelX - mousePixelX, pointPixelY - mousePixelY);
-        const radius = 32;
-        const shouldTrigger = distance < radius && pointSelectionGroups !== undefined;
-        if (shouldTrigger) {
-            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 };
-                const svgRect = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                if (svgRect) {
-                    setTooltipAnchorPosition({
-                        x: svgRect.left + pointPixelX,
-                        y: svgRect.top + pointPixelY,
-                    });
-                }
-                setSelectedPoints(newSelectedPoints);
-            }
-        }
-        else if (selectedPoints !== null && selectedPoints.length > 0) {
-            setSelectedPoints(null);
-        }
-    };
-    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 !== 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;
-    if (linePointArray === undefined)
-        return null;
-    const chartContextValue = {
-        chartRef,
-        contentRef,
-        contentSize,
-        scales,
-        linePointArray,
-        mousePositionRef,
-    };
-    const chartClasses = classNames(`ndl-charts-chart`, className);
-    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) => {
-                                    return isCanvasComponent(child) ? child : null;
-                                }), hasLines &&
-                                    contentSize &&
-                                    selectedPoints &&
-                                    selectedPoints.length > 0 && (
-                                // Dotted line for x-axis selection.
-                                _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)',
-                                    } })), shouldRenderDots && (_jsx(DotsMemoized
-                                // Dots together with tooltip to be rendered
-                                , { 
-                                    // Dots together with tooltip to be rendered
-                                    selectedPoints: selectedPoints, metadata: metadata, 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: SHOULD_SHOW_VORONOI_DEBUG ? 0.5 : 0,
-                                        } }, index));
-                                }) })] }), _jsx(TooltipMemoized, { isOpen: shouldRenderTooltip, selectedPoints: selectedPoints !== null && selectedPoints !== void 0 ? selectedPoints : [], metadata: metadata, anchorPosition: tooltipAnchorPosition }), Children.toArray(children).map((child) => {
-                    return !isCanvasComponent(child) ? child : null;
-                })] }) }));
-});
-// Issue with TypeScript forwardRef and subcomponents: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-894053907
-const Chart = Object.assign(ChartComponent, {
-    Line,
-});
-export { Chart };
-//# sourceMappingURL=Chart.js.map