@oracle/oraclejet-preact 19.0.5 → 19.0.6

package/cjs/Chart-c07adbbd.js

@@ -0,0 +1,617 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var PRIVATE_Chart_themes_ChartStyles_css = require('./PRIVATE_Chart/themes/ChartStyles.css.js');
+var TrackResizeContainer = require('./TrackResizeContainer-100be103.js');
+var useTextDimensions = require('./useTextDimensions-c8b41697.js');
+var useCssVars = require('./useCssVars-cc025013.js');
+var hooks = require('preact/hooks');
+var Gridlines = require('./Gridlines-3bdce0b7.js');
+var useId = require('./useId-6c0eeb27.js');
+var Axis = require('./Axis-2d648884.js');
+var useChartViewport = require('./useChartViewport-d2e8c46f.js');
+var utils = require('./utils-7c1b4abe.js');
+var useChartNav = require('./useChartNav-b079ab1e.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var ScrollBar = require('./ScrollBar-76e58249.js');
+var useSelectDrill = require('./useSelectDrill-d6321bb7.js');
+var useUser = require('./useUser-f900ddf1.js');
+var useTestId = require('./useTestId-9093a54b.js');
+var cssUtils = require('./cssUtils-3318fbe2.js');
+var useChartContextMenu = require('./useChartContextMenu-a8c6d928.js');
+var useChartDnd = require('./useChartDnd-2c152d6b.js');
+var eventsUtils = require('./eventsUtils-d34f8647.js');
+require('./accUtils-5c7d3255.js');
+var layoutUtils = require('./layoutUtils-e52005dc.js');
+var useTooltip = require('./useTooltip-8728f2ff.js');
+require('./logger-2b636482.js');
+require('./LayerHost-aee0e070.js');
+require('preact/compat');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-ae48fed6.js');
+var useChartMarquee = require('./useChartMarquee-41c7ea4e.js');
+var useVisTouchResponse = require('./useVisTouchResponse-376e11d5.js');
+var stringUtils = require('./stringUtils-3e19c8af.js');
+var useOverviewContext = require('./useOverviewContext-1732a3f1.js');
+var scale = require('./scale-9e43a5f6.js');
+var OverviewSlidingWindow = require('./OverviewSlidingWindow-09c08dc9.js');
+var PRIVATE_VisOverview_themes_VisOverview_css = require('./PRIVATE_VisOverview/themes/VisOverview.css.js');
+var useTranslationBundle = require('./useTranslationBundle-18b7bf8b.js');
+var useChartDatatip = require('./useChartDatatip-76d4aeaa.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Returns the parent group for the navigable item.
+ * @param levelsArray The levels array.
+ * @param levelIndex The levelIndex of current naviable group..
+ * @param groupIndex The groupIndex of current navigable group.
+ * @returns
+ */
+function getParentGroup(levelsArray, levelIndex, groupIndex, isGroupNavigable) {
+    const path = levelsArray[levelIndex][groupIndex].path;
+    if (path.length === 1) {
+        return {
+            levelIndex,
+            groupIndex
+        };
+    }
+    let lIndex = Math.max(0, levelIndex - 1);
+    const groupItem = levelsArray[levelIndex][groupIndex];
+    const { start, end } = groupItem;
+    while (lIndex >= 0) {
+        for (let i = 0; i < levelsArray[lIndex].length; i++) {
+            const { start: s, end: e } = levelsArray[lIndex][i];
+            if (s <= start && end <= e) {
+                if (isGroupNavigable(lIndex, i)) {
+                    return { groupIndex: i, levelIndex: lIndex };
+                }
+            }
+        }
+        lIndex -= 1;
+    }
+    return {
+        levelIndex,
+        groupIndex
+    };
+}
+/**
+ * @param levelsArray The levels array.
+ * @param levelIndex The levelIndex of current navigable item.
+ * @param groupIndex The groupIndex of current navigable item.
+ * @returns
+ */
+function getChildGroup(levelsArray, levelIndex, groupIndex, isGroupNavigable) {
+    if (levelIndex === levelsArray.length - 1) {
+        return { levelIndex, groupIndex };
+    }
+    const lIndex = Math.min(levelsArray.length - 1, levelIndex + 1);
+    const groupItem = levelsArray[levelIndex][groupIndex];
+    const { start, end } = groupItem;
+    while (lIndex <= levelsArray.length - 1) {
+        for (let i = 0; i < levelsArray[lIndex].length; i++) {
+            const { start: s, end: e } = levelsArray[lIndex][i];
+            if (start <= s && e <= end) {
+                if (isGroupNavigable(lIndex, i)) {
+                    return { groupIndex: i, levelIndex: lIndex };
+                }
+            }
+        }
+    }
+    return {
+        levelIndex,
+        groupIndex
+    };
+}
+function getNextGroup(levelsArray, info, isGroupNavigable) {
+    const groupIndex = info.groupIndex + 1;
+    const levelIndex = info.levelIndex;
+    const maxgroup = levelsArray[levelIndex].length - 1;
+    if (groupIndex > maxgroup) {
+        return;
+    }
+    if (isGroupNavigable(levelIndex, groupIndex)) {
+        return { groupIndex, levelIndex };
+    }
+    return getNextGroup(levelsArray, { groupIndex, levelIndex }, isGroupNavigable);
+}
+function getPreviousGroup(info, isGroupNavigable) {
+    const groupIndex = info.groupIndex - 1;
+    const levelIndex = info.levelIndex;
+    if (groupIndex < 0) {
+        return;
+    }
+    if (isGroupNavigable(levelIndex, groupIndex)) {
+        return { groupIndex, levelIndex };
+    }
+    return getPreviousGroup({ groupIndex, levelIndex }, isGroupNavigable);
+}
+function getGroupNavUtil(levelsArray, drilling, isRtl, isHoriz, isGroupLabelRendered) {
+    const isGroupNavigable = (levelIndex, groupIndex) => {
+        const group = levelsArray[levelIndex][groupIndex].item;
+        const groupName = group.name || group.id;
+        const groupsDrilling = group.drilling;
+        const isLabelRendered = !!isGroupLabelRendered?.(levelIndex, groupIndex);
+        return (isLabelRendered &&
+            groupName != null &&
+            (drilling === 'on' || drilling === 'groupsOnly') &&
+            groupsDrilling != 'off');
+    };
+    const getDefaultNavGroup = () => {
+        for (let levelIndex = 0; levelIndex < levelsArray.length; levelIndex++) {
+            const numGroups = levelsArray[levelIndex].length;
+            for (let groupIndex = 0; groupIndex < numGroups; groupIndex++) {
+                if (isGroupNavigable(levelIndex, groupIndex)) {
+                    return { groupIndex, levelIndex };
+                }
+            }
+        }
+        return { groupIndex: 0, levelIndex: 0 };
+    };
+    const getNextNavGroup = (info, arrow) => {
+        let nextGroup;
+        if (arrow === 'ArrowRight') {
+            if (isHoriz) {
+                nextGroup = !isRtl
+                    ? getChildGroup(levelsArray, info.levelIndex, info.groupIndex, isGroupNavigable)
+                    : getParentGroup(levelsArray, info.levelIndex, info.groupIndex, isGroupNavigable);
+            }
+            else {
+                nextGroup = isRtl
+                    ? getPreviousGroup(info, isGroupNavigable)
+                    : getNextGroup(levelsArray, info, isGroupNavigable);
+            }
+        }
+        else if (arrow === 'ArrowLeft') {
+            if (isHoriz) {
+                nextGroup = isRtl
+                    ? getChildGroup(levelsArray, info.levelIndex, info.groupIndex, isGroupNavigable)
+                    : getParentGroup(levelsArray, info.levelIndex, info.groupIndex, isGroupNavigable);
+            }
+            else {
+                nextGroup = isRtl
+                    ? getNextGroup(levelsArray, info, isGroupNavigable)
+                    : getPreviousGroup(info, isGroupNavigable);
+            }
+        }
+        else if (arrow === 'ArrowDown') {
+            nextGroup = isHoriz
+                ? getNextGroup(levelsArray, info, isGroupNavigable)
+                : getParentGroup(levelsArray, info.levelIndex, info.groupIndex, isGroupNavigable);
+        }
+        else if (arrow === 'ArrowUp') {
+            nextGroup = isHoriz
+                ? getPreviousGroup(info, isGroupNavigable)
+                : getChildGroup(levelsArray, info.levelIndex, info.groupIndex, isGroupNavigable);
+        }
+        return nextGroup || info;
+    };
+    return { getNextNavGroup, getDefaultNavGroup };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function useTextTruncation({ getTextAndBounds, width, isRtl }) {
+    const [text, setText] = hooks.useState();
+    const bounds = hooks.useRef();
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text,
+        position: 'top-start',
+        offset: layoutUtils.calculateOffset(isRtl, width, bounds.current)
+    });
+    const onPointerMove = (event) => {
+        const textAndBounds = getTextAndBounds(event.target);
+        if (textAndBounds) {
+            bounds.current = textAndBounds.bounds;
+            setText(textAndBounds.text);
+        }
+        else {
+            setText(undefined);
+        }
+    };
+    return {
+        tooltipContent,
+        tooltipProps: mergeProps.mergeProps({ onPointerMove }, tooltipProps)
+    };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function getWindowCoords(isRtl, xViewportExtent, xAxisExtent, yViewportExtent, yAxisExtent, plotAreaSpace) {
+    const xDomain = [xAxisExtent.min, xAxisExtent.max];
+    const xRange = (isRtl
+        ? [plotAreaSpace.x + plotAreaSpace.width, plotAreaSpace.x]
+        : [plotAreaSpace.x, plotAreaSpace.x + plotAreaSpace.width]);
+    const xScale = new scale.ScaleLinear(xDomain, xRange);
+    const yDomain = [yAxisExtent.min, yAxisExtent.max];
+    const yRange = [plotAreaSpace.y + plotAreaSpace.height, plotAreaSpace.y];
+    const yScale = new scale.ScaleLinear(yDomain, yRange);
+    const windowX = xScale.transform(xViewportExtent.viewportMin);
+    const windowWidth = Math.abs(xScale.transform(xViewportExtent.viewportMax) - xScale.transform(xViewportExtent.viewportMin));
+    return {
+        windowX: isRtl ? windowX - windowWidth : windowX,
+        windowWidth: windowWidth,
+        windowY: yScale.transform(yViewportExtent.viewportMax),
+        windowHeight: Math.abs(yScale.transform(yViewportExtent.viewportMax) - yScale.transform(yViewportExtent.viewportMin)),
+        xScale,
+        yScale
+    };
+}
+
+function OverviewBackground({ x, width, height, y, windowX, windowHeight, windowWidth, windowY }) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: x, y: y, width: Math.max(0, windowX - x), height: height, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground }), jsxRuntime.jsx("rect", { x: windowX + windowWidth, width: Math.max(0, x + width - windowX - windowWidth), y: y, height: height, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground }), jsxRuntime.jsx("rect", { x: windowX, y: y, height: Math.max(0, windowY - y), width: windowWidth, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground }), jsxRuntime.jsx("rect", { x: windowX, y: windowY + windowHeight, width: windowWidth, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground, height: Math.max(y + height - windowY - windowHeight, 0) })] }));
+}
+
+function getRenderer(xAxisExtent, isRtl, overviewXScale, plotAreaSpace, windowCoords, hasHandles, onViewportChange) {
+    return {
+        slidingWindow: (jsxRuntime.jsx(OverviewSlidingWindow.OverviewSlidingWindow, { ...plotAreaSpace, ...windowCoords, hasHandles: hasHandles, onWindowDimsChange: (props) => {
+                utils.updateViewportFromOverview(xAxisExtent, isRtl, windowCoords.windowX, windowCoords.windowWidth, props.deltaX, props.deltaWidth, overviewXScale, onViewportChange);
+            } })),
+        background: jsxRuntime.jsx(OverviewBackground, { ...plotAreaSpace, ...windowCoords })
+    };
+}
+
+const OVERVIEW_GAP = 10;
+const chartVars = cssUtils.getChartVars();
+function ChartWithDimensions({ width, height, selectedIds, hiddenIds, hideAndShowBehavior = 'none', orientation = 'vertical', xAxis, yAxis, y2Axis, plotArea, dragMode = 'user', series, groups, isStacked = false, getDataItem, selectionMode = 'none', drilling = 'off', dataCursorPosition, onSelectionChange, isDataCursorEnabled, dataCursorStyle, onViewportChange, onDataCursorPositionChange, onItemDrill, onGroupDrill, onItemHover, onItemFocus, datatip, zoomAndScroll = 'off', getNavUtil, getDataItemPos, getGapRatio, valueFormats, findNearest, getMarkerInfo, isRtl, children, testId, renderGridLinesInFront, isDataXAxis, contextMenuConfig, overview = 'off', getStartAndEndAxesOffset, defaultOverviewContentRenderer, isOverview, yAxisSize, overviewRenderer, ...props }) {
+    const testIdProps = useTestId.useTestId(testId);
+    const rootRef = hooks.useRef(null);
+    const isTestEnv = testIdProps['data-testid'] !== undefined;
+    const isHoriz = orientation === 'horizontal';
+    const { xAxisPosition, yAxisPosition, y2AxisPosition } = utils.getAxesPosition(yAxis, y2Axis, isHoriz, isRtl);
+    const { resolvedVars, cssContent } = useCssVars.useCssVars(chartVars);
+    const colors = Array.from(Array(12)).map((_, index) => {
+        return resolvedVars[`color${index + 1}`];
+    });
+    const { textMeasureContent, getTextDimensions } = useTextDimensions.useTextDimensions();
+    let availSpace = utils.getAvailSpace(width, height);
+    if (isOverview && yAxisSize) {
+        const w = availSpace.width - yAxisSize;
+        const gaps = utils.getOuterGaps(w, height);
+        availSpace.width -= yAxisSize - 2 * gaps.width;
+        availSpace.x += yAxisSize - gaps.width;
+    }
+    const isTimeAxis = xAxis?.timeAxisType != null;
+    const updatedSpace = utils.getScrollBarSpace(isTimeAxis, availSpace, zoomAndScroll, xAxisPosition, overview);
+    let scrollDims = updatedSpace.scrollDims;
+    availSpace = updatedSpace.availSpace;
+    const { locale } = useUser.useUser();
+    const { x, y, width: _width, height: _height } = availSpace;
+    const labelFontSize = resolvedVars['labelFontSize'];
+    const split = y2Axis?.split ?? 'off';
+    const isSplitDualY = split !== 'off';
+    const splitterPosition = split !== 'off' ? split : 0.5;
+    const layoutInfo = hooks.useMemo(() => {
+        const hiddenSet = new Set(hiddenIds);
+        return utils.getLayoutInfo(series, groups, getDataItem, xAxis, yAxis, y2Axis, { x, y, width: _width, height: _height }, // availSpace
+        hiddenSet, hideAndShowBehavior, isHoriz, isRtl, isStacked, labelFontSize, getStartAndEndAxesOffset, locale, isSplitDualY, splitterPosition, getTextDimensions, isTestEnv, isDataXAxis);
+    }, [
+        x,
+        y,
+        _width,
+        _height,
+        getDataItem,
+        getTextDimensions,
+        groups,
+        hiddenIds,
+        hideAndShowBehavior,
+        isDataXAxis,
+        isHoriz,
+        isRtl,
+        isStacked,
+        isTestEnv,
+        locale,
+        getStartAndEndAxesOffset,
+        labelFontSize,
+        series,
+        xAxis,
+        yAxis,
+        y2Axis,
+        splitterPosition,
+        isSplitDualY
+    ]);
+    const { getGroupFromPath, levelsArray, xAxisInfo, xProps, xScale, yProps, y2Props, yScale, y2Scale, yMaxDim, yAxisInfo, plotAreaSpace, xSpace, ySpace, y2Space, idToDataMap, y2AxisInfo } = layoutInfo;
+    const leafGroupsInfo = levelsArray.length > 0 ? levelsArray[levelsArray.length - 1] : [];
+    scrollDims = utils.updateScrollBarSpace(scrollDims, xAxisPosition === 'bottom', isRtl, yMaxDim);
+    const gapRatio = getGapRatio(xAxisInfo.startIndex, xAxisInfo.endIndex);
+    const getNextChartItem = getNavUtil(xAxisInfo.startIndex, xAxisInfo.endIndex);
+    const { getNextNavGroup, getDefaultNavGroup } = getGroupNavUtil(levelsArray, drilling, isRtl, isHoriz, xProps.isGroupLabelRendered);
+    const { ignoreSelectPointerUp, cursor, yAxisCursor, marqueeProps, marqueeContent, toggleButtonContent, isPointInsideMarquee, dragMode: mode } = useChartMarquee.useChartMarquee({
+        rootRef,
+        plotAreaSpace,
+        xSpace,
+        ySpace,
+        dragMode,
+        chartWidth: width,
+        isMultiSelection: selectionMode === 'multiple',
+        onViewportChange,
+        isZoomScroll: zoomAndScroll === 'live',
+        xScale,
+        selectedIds,
+        getDataById: (id) => idToDataMap.get(id),
+        onSelectionChange,
+        isRtl,
+        xAxisInfo
+    });
+    const { touchResponse, touchResponseStyle } = useVisTouchResponse.useVisTouchResponse({
+        type: 'auto',
+        supportsTouchDragGestures: mode !== 'off',
+        rootRef
+    });
+    const { activeId, focusedItemInfo, hoveredItemInfo, focusedGroupInfo, navProps, onFocusUpdate } = useChartNav.useChartNav({
+        rootRef,
+        getNextChartItem,
+        getNextNavGroup,
+        getDefaultNavGroup,
+        touchResponse,
+        onItemHover,
+        onItemFocus,
+        drilling,
+        xAxisInfo
+    });
+    const onContextMenuDismissed = (gesture) => {
+        if (gesture === 'keyboard') {
+            onFocusUpdate();
+        }
+    };
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const getTextAndBounds = (target) => {
+        if (target != rootRef.current) {
+            const dataSet = eventsUtils.getElementData(rootRef, target);
+            const text = dataSet?.['ojPrivateText'];
+            if (!text) {
+                return;
+            }
+            if (text === xAxis?.title) {
+                return {
+                    text,
+                    bounds: xProps.titleProps?.dims
+                };
+            }
+            else if (text === yAxis?.title) {
+                return {
+                    text,
+                    bounds: yProps.titleProps?.dims
+                };
+            }
+            else if (text === y2Axis?.title) {
+                return {
+                    text,
+                    bounds: y2Props.titleProps?.dims
+                };
+            }
+            else if (dataSet?.['ojPrivateGroupIndex'] && dataSet?.['ojPrivateLevelIndex']) {
+                return {
+                    // @ts-ignore
+                    bounds: xProps.tickLabels.find(({ dataProps }) => dataProps['data-oj-private-level-index'] === dataSet['ojPrivateLevelIndex'] &&
+                        dataProps['data-oj-private-group-index'] === dataSet['ojPrivateGroupIndex']).dims,
+                    text: text
+                };
+            }
+        }
+        if (target === rootRef.current && focusedGroupInfo.isFocusVisible) {
+            const group = groups[focusedGroupInfo.groupIndex || 0];
+            return {
+                bounds: xProps.tickLabels[focusedGroupInfo?.groupIndex || 0].dims,
+                text: group.name || group.id
+            };
+        }
+        return;
+    };
+    const { tooltipContent, tooltipProps } = useTextTruncation({
+        getTextAndBounds,
+        width,
+        isRtl
+    });
+    const viewportProps = useChartViewport.useChartViewport({
+        rootRef,
+        width,
+        height,
+        xAxisInfo,
+        yAxisInfo,
+        y2AxisInfo,
+        xScale,
+        yScale,
+        y2Scale,
+        plotAreaSpace,
+        isRtl,
+        isHoriz,
+        zoomAndScroll,
+        onViewportChange
+    });
+    const ignoreAsTrigger = (target) => {
+        if (!target) {
+            return false;
+        }
+        const dataset = eventsUtils.getElementData(rootRef, target);
+        if ((dataset &&
+            (dataset['ojPrivateObject'] === 'marquee' ||
+                dataset['ojPrivateObject'] === 'dragModeControls' ||
+                dataset['ojPrivateObject'] === 'scrollBar')) ||
+            ignoreSelectPointerUp) {
+            return true;
+        }
+        return false;
+    };
+    const { selectDrillProps, selectionContent } = useSelectDrill.useSelectDrill({
+        selectionMode,
+        selection: [...selectedIds],
+        onChange: onSelectionChange,
+        rootRef,
+        drilling,
+        onItemDrill,
+        onGroupDrill,
+        focusedGroupInfo,
+        focusedItemInfo,
+        levelsArray,
+        getDataItem,
+        getDataById: (id) => idToDataMap.get(id),
+        ignoreAsTrigger
+    });
+    const findNearestData = findNearest(xScale, yScale, y2Scale, xProps.axisStepWidth, xProps.averageGroupZ, gapRatio);
+    const getDataItemPosition = getDataItemPos(xScale, yScale, y2Scale, xProps.axisStepWidth, xProps.averageGroupZ, gapRatio);
+    const [datatipDisabled, setDatatipDisabled] = hooks.useState(false);
+    const getItemAriaLabel = useChartDatatip.getAriaLabelGenerator(series, translations, valueFormats, leafGroupsInfo, xAxis, !!isDataXAxis, getGroupFromPath, xProps.defaultLabelFormatter, yProps.defaultLabelFormatter, y2Props.defaultLabelFormatter);
+    const { datatipContent, dataCursorContent, datatipProps: { 'aria-describedby': datatipAriaDescribedby, ...datatipProps } } = useSelectDrill.useChartDatatipAndCursor({
+        series,
+        leafGroupsInfo,
+        width,
+        height,
+        findNearest: findNearestData,
+        plotAreaSpace,
+        onDataCursorPositionChange,
+        isDataCursorEnabled,
+        dataCursorPosition,
+        dataCursorStyle,
+        hoveredItemInfo,
+        focusedItemInfo,
+        getDataItem,
+        getMarkerInfo,
+        getDataItemPos: getDataItemPosition,
+        datatip,
+        valueFormats,
+        isHoriz,
+        touchResponse,
+        isDisabled: datatipDisabled,
+        xScale: xScale,
+        yScale,
+        y2Scale,
+        timeAxisType: xAxis?.timeAxisType,
+        defaultXFormatter: xProps.defaultLabelFormatter,
+        defaultYFormatter: yProps.defaultLabelFormatter,
+        defaultY2Formatter: y2Props.defaultLabelFormatter,
+        hasXYValues: isDataXAxis,
+        getGroupFromPath,
+        translations
+    });
+    const isGroupInteractive = (index) => {
+        if (xAxis?.timeAxisType != null) {
+            return false;
+        }
+        const groupDrill = groups[index]?.drilling;
+        if (groupDrill === 'on') {
+            return true;
+        }
+        if (groupDrill != 'off' && (drilling === 'on' || drilling === 'groupsOnly')) {
+            return true;
+        }
+        return false;
+    };
+    const plotAreaClipPathId = useId.useId();
+    //  const { yTicks, y2Ticks } = getYY2Ticks(yAxisInfo.ticks, y2AxisInfo.ticks, isHoriz, isSplitDualY);
+    const gridLines = (jsxRuntime.jsx(Gridlines.Gridlines, { plotArea: plotArea, availSpace: plotAreaSpace, xAxisPosition: xAxisPosition, isRtl: isRtl, yMinorTicks: yAxisInfo.minorTicks, xMinorTicks: xAxisInfo.minorTicks, xScale: xScale, yScale: yScale, y2Scale: y2Scale, isLog: yAxis?.scale === 'log', yAxisPosition: yAxisPosition, isDataXAxis: isDataXAxis, xAxis: xAxis, yAxis: yAxis, y2Axis: y2Axis, hasAxisLine: !isOverview, y2MinorTicks: y2AxisInfo?.minorTicks, y2Ticks: y2AxisInfo.ticks, yTicks: yAxisInfo.ticks, xTicks: xAxisInfo.ticks, isSplitDualY: isSplitDualY }));
+    const hasData = series.length > 0 && groups.length > 0;
+    const { contextMenuContent, contextMenuProps } = useChartContextMenu.useChartContextMenu({
+        isRtl,
+        width,
+        height,
+        getDataItemPosition,
+        series,
+        levelsArray,
+        focusedGroupInfo,
+        getDataItem,
+        focusedItemInfo,
+        rootRef,
+        xAxisTitle: xAxis?.title,
+        yAxisTitle: yAxis?.title,
+        contextMenuConfig: hasData ? contextMenuConfig : undefined,
+        onContextMenuDismissed
+    });
+    const [dragOver, setDragOver] = hooks.useState({
+        accepted: undefined,
+        type: ''
+    });
+    const { draggable, dndProps, dndContent } = useChartDnd.useChartDnd({
+        onDrag: props.onDrag,
+        onDragStart: props.onDragStart,
+        onDragEnd: props.onDragEnd,
+        onDragEnter: props.onDragEnter,
+        onDragLeave: props.onDragLeave,
+        onDragOver: props.onDragOver,
+        onDrop: props.onDrop,
+        itemsDraggable: props.itemsDraggable,
+        groupDraggable: props.groupDraggable,
+        rootRef,
+        levelsArray,
+        series,
+        selectedIds,
+        getDataItem,
+        xSpace,
+        ySpace,
+        plotAreaSpace,
+        setDragOver,
+        setDatatipDisabled,
+        onSelectionChange
+    });
+    const eventsProps = mergeProps.mergeProps(navProps, selectDrillProps, viewportProps, datatipProps, marqueeProps, tooltipProps, contextMenuProps, dndProps);
+    const overviewContentRenderer = overview != 'off' && (overview === 'on' || !overview.renderer)
+        ? defaultOverviewContentRenderer
+        : undefined;
+    const { background, slidingWindow } = overviewRenderer(plotAreaSpace);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getTextDimensions && resolvedVars['labelFontSize'] != undefined && (jsxRuntime.jsxs("div", { tabIndex: isOverview ? undefined : 0, draggable: draggable, ref: rootRef, "aria-activedescendant": activeId, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": stringUtils.l([props['aria-describedby'], datatipAriaDescribedby]), style: { ...touchResponseStyle }, role: isOverview ? undefined : 'application', className: PRIVATE_Chart_themes_ChartStyles_css.styles.baseChartStyle, "data-oj-private-selection-mode": isTestEnv ? selectionMode : undefined, ...testIdProps, ...(isOverview ? {} : eventsProps), children: [jsxRuntime.jsxs("svg", { width: "100%", height: scrollDims.height != 0 && overview != 'off'
+                            ? `${Math.ceil((updatedSpace.availSpace.height + OVERVIEW_GAP) * 100) / height}%`
+                            : '100%', children: [jsxRuntime.jsx("clipPath", { id: `${plotAreaClipPathId}`, children: jsxRuntime.jsx("rect", { ...plotAreaSpace }) }), background, jsxRuntime.jsx(Gridlines.PlotArea, { color: plotArea?.color, dragOverStyle: dragOver.type !== 'plotArea' ? 'none' : dragOver.accepted ? 'accept' : 'reject', cursor: cursor, availSpace: plotAreaSpace }), !renderGridLinesInFront && gridLines, jsxRuntime.jsx(Axis.Axis, { ...yProps, axisPosition: yAxisPosition, isRtl: isRtl, cursor: yAxisCursor, availSpace: ySpace, dragOverStyle: dragOver.type !== 'yAxis' ? 'none' : dragOver.accepted ? 'accept' : 'reject' }), jsxRuntime.jsx(Axis.Axis, { ...y2Props, axisPosition: y2AxisPosition, isRtl: isRtl, cursor: yAxisCursor, availSpace: y2Space, dragOverStyle: dragOver.type !== 'y2Axis' ? 'none' : dragOver.accepted ? 'accept' : 'reject' }), jsxRuntime.jsx(Axis.Axis, { ...xProps, isRtl: isRtl, axisPosition: xAxisPosition, isTextInteractive: isGroupInteractive, activeId: activeId, cursor: cursor, focusedGroupIndex: focusedGroupInfo.isFocusVisible ? focusedGroupInfo.groupIndex : undefined, focusedGroupLevelIndex: focusedGroupInfo.isFocusVisible ? focusedGroupInfo.levelIndex : undefined, availSpace: xSpace, dragOverStyle: dragOver.type !== 'xAxis' ? 'none' : dragOver.accepted ? 'accept' : 'reject', separatorColor: xAxis?.groupSeparators?.color }), jsxRuntime.jsxs("g", { children: [children({
+                                        xStartIndex: xAxisInfo.startIndex,
+                                        xEndIndex: xAxisInfo.endIndex,
+                                        getItemAriaLabel,
+                                        groupsInfo: leafGroupsInfo,
+                                        colors,
+                                        xScale: xScale,
+                                        yScale,
+                                        y2Scale,
+                                        isPointInsideMarquee,
+                                        defaultFontSize: resolvedVars['labelFontSize'],
+                                        gapRatio,
+                                        activeId,
+                                        focusedItemInfo,
+                                        hoveredItemInfo,
+                                        getTextDimensions,
+                                        axisStepWidth: xProps.axisStepWidth,
+                                        averageGroupZ: xProps.averageGroupZ,
+                                        plotAreaClipPathId
+                                    }), renderGridLinesInFront && gridLines, dataCursorContent] }), slidingWindow, zoomAndScroll === 'live' && !isOverview && (jsxRuntime.jsx(ScrollBar.ScrollBar, { availSpace: scrollDims, isRtl: isRtl, viewport: xAxisInfo, axisExtent: xAxisInfo, isHoriz: xAxisPosition === 'bottom' })), marqueeContent] }), jsxRuntime.jsx(useOverviewContext.OverviewContext.Provider, { value: {
+                            yAxisSize: ySpace.width,
+                            isOverview: true,
+                            width,
+                            height: scrollDims.height,
+                            overviewRenderer: (overviewChartPlotArea) => {
+                                const { xScale: overviewXScale, ...windowCoords } = getWindowCoords(isRtl, xAxisInfo, xAxisInfo, yAxisInfo, yAxisInfo, overviewChartPlotArea);
+                                return getRenderer(xAxisInfo, isRtl, overviewXScale, overviewChartPlotArea, windowCoords, true, onViewportChange);
+                            }
+                        }, children: !isOverview && overview !== 'off' && overviewContentRenderer && (jsxRuntime.jsx("div", { style: { width, height: scrollDims.height }, children: overviewContentRenderer() })) }), toggleButtonContent, datatipContent, tooltipContent, contextMenuContent, selectionContent, dndContent] })), textMeasureContent, cssContent] }));
+}
+
+function Chart({ width, height, ...props }) {
+    // TODO: reevaluate how we handle empty data
+    const { isOverview, overviewRenderer, yAxisSize, width: overviewWidth, height: overviewHeight } = useOverviewContext.useOverviewContext();
+    let chartWidth = width;
+    let chartHeight = height;
+    if (chartWidth === undefined && isOverview && overviewWidth !== undefined) {
+        chartWidth = `${overviewWidth}px`;
+    }
+    if (chartHeight === undefined && isOverview && overviewHeight !== undefined) {
+        chartHeight = `${overviewHeight}px`;
+    }
+    return (jsxRuntime.jsx(TrackResizeContainer.TrackResizeContainer, { width: chartWidth, height: chartHeight, class: PRIVATE_Chart_themes_ChartStyles_css.dimensionStyle, children: (width, height) => width || height ? (jsxRuntime.jsx(ChartWithDimensions, { width: width, height: height, ...props, yAxisSize: yAxisSize, isOverview: isOverview, overviewRenderer: overviewRenderer })) : undefined }));
+}
+
+exports.Chart = Chart;
+//# sourceMappingURL=Chart-c07adbbd.js.map