@gravity-ui/chartkit 3.4.1 → 3.4.3

package/build/components/ChartKit.js

@@ -1,13 +1,13 @@
 import { __rest } from "tslib";
 import React from 'react';
-import block from 'bem-cn-lite';
 import { i18n } from '../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError, settings } from '../libs';
 import { getRandomCKId, typedMemo } from '../utils';
+import { cn } from '../utils/cn';
 import { ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
 import { Loader } from './Loader/Loader';
 import './ChartKit.css';
-const b = block('chartkit');
+const b = cn('chartkit');
 const ChartKitComponent = (props) => {
     const widgetRef = React.useRef();
     const { instanceRef, id: propsId, type, isMobile, renderPluginLoader } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile", "renderPluginLoader"]);

package/build/components/Loader/Loader.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { Loader as BaseLoader } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
 import './Loader.css';
-const b = block('chartkit-loader');
+const b = block('loader');
 export const Loader = (props) => {
     return (React.createElement("div", { className: b() },
         React.createElement(BaseLoader, Object.assign({}, props))));

package/build/plugins/d3/renderer/components/AxisX.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { axisBottom, select } from 'd3';
+import { block } from '../../../../utils/cn';
 import { formatAxisTickLabel, parseTransformStyle } from '../utils';
-const b = block('chartkit-d3-axis');
+const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 // Note: this method do not prepared for rotated labels
 const removeOverlappingXTicks = (axis) => {

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { axisLeft, select } from 'd3';
+import { block } from '../../../../utils/cn';
 import { formatAxisTickLabel, parseTransformStyle } from '../utils';
-const b = block('chartkit-d3-axis');
+const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 // Note: this method do not prepared for rotated labels
 const removeOverlappingYTicks = (axis) => {

package/build/plugins/d3/renderer/components/Chart.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../utils/cn';
 import { AxisY } from './AxisY';
 import { AxisX } from './AxisX';
 import { Legend } from './Legend';
 import { Title } from './Title';
 import { Tooltip } from './Tooltip';
-import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useScales, useSeries, useShapes, useTooltip, } from '../hooks';
+import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useAxisScales, useSeries, useShapes, useTooltip, } from '../hooks';
 import { isAxisRelatedSeries } from '../utils';
 import './styles.css';
-const b = block('chartkit-d3');
+const b = block('d3');
 export const Chart = ({ width, height, data }) => {
     // FIXME: add data validation
     const { series } = data;
@@ -27,7 +27,7 @@ export const Chart = ({ width, height, data }) => {
     });
     const { activeLegendItems, handleLegendItemClick } = useLegend({ series: series.data });
     const { chartSeries } = useSeries({ activeLegendItems, series: series.data });
-    const { xScale, yScale } = useScales({
+    const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
         series: chartSeries,
@@ -54,7 +54,7 @@ export const Chart = ({ width, height, data }) => {
                     chart.margin.left,
                     chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
                 ].join(',')})` },
-                hasAxisRelatedSeries && (React.createElement(React.Fragment, null,
+                hasAxisRelatedSeries && xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),

package/build/plugins/d3/renderer/components/Legend.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { select } from 'd3';
-const b = block('chartkit-d3-legend');
+import { block } from '../../../../utils/cn';
+const b = block('d3-legend');
 export const Legend = (props) => {
     const { width, offsetWidth, height, offsetHeight, chartSeries, onItemClick } = props;
     return (React.createElement("g", { width: width, height: height, ref: (node) => {

package/build/plugins/d3/renderer/components/Title.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import block from 'bem-cn-lite';
-const b = block('chartkit-d3-title');
+import { block } from '../../../../utils/cn';
+const b = block('d3-title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
     return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: { fontSize: style === null || style === void 0 ? void 0 : style.fontSize, lineHeight: `${height}px` } },

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
-const b = block('chartkit-d3-tooltip');
+const b = block('d3-tooltip');
 const POINTER_OFFSET_X = 20;
 export const Tooltip = (props) => {
     const { hovered, pointerPosition, tooltip, xAxis, yAxis } = props;

package/build/plugins/d3/renderer/hooks/index.d.ts

@@ -3,7 +3,7 @@ export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useLegend';
-export * from './useScales';
+export * from './useAxisScales';
 export * from './useSeries';
 export * from './useShapes';
 export * from './useTooltip';

package/build/plugins/d3/renderer/hooks/index.js

@@ -3,7 +3,7 @@ export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useLegend';
-export * from './useScales';
+export * from './useAxisScales';
 export * from './useSeries';
 export * from './useShapes';
 export * from './useTooltip';

package/build/plugins/d3/renderer/hooks/{useScales → useAxisScales}/index.d.ts

@@ -10,8 +10,11 @@ type Args = {
     yAxis: ChartOptions['yAxis'];
 };
 type ReturnValue = {
-    xScale: ChartScale;
-    yScale: ChartScale;
+    xScale?: ChartScale;
+    yScale?: ChartScale;
 };
-export declare const useScales: (args: Args) => ReturnValue;
+/**
+ * Uses to create scales for axis related series
+ */
+export declare const useAxisScales: (args: Args) => ReturnValue;
 export {};

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
+import get from 'lodash/get';
+import { getOnlyVisibleSeries, getDomainDataXBySeries, getDomainDataYBySeries, isAxisRelatedSeries, } from '../../utils';
+const isNumericalArrayData = (data) => {
+    return data.every((d) => typeof d === 'number' || d === null);
+};
+const filterCategoriesByVisibleSeries = (categories, series) => {
+    return categories.filter((category) => {
+        return series.some((s) => {
+            return s.data.some((d) => 'category' in d && d.category === category);
+        });
+    });
+};
+const createScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    const xMin = get(xAxis, 'min');
+    const xType = get(xAxis, 'type', 'linear');
+    const xCategories = get(xAxis, 'categories');
+    const xTimestamps = get(xAxis, 'timestamps');
+    const yType = get(yAxis[0], 'type', 'linear');
+    const yMin = get(yAxis[0], 'min');
+    const yCategories = get(yAxis[0], 'categories');
+    const yTimestamps = get(xAxis, 'timestamps');
+    let visibleSeries = getOnlyVisibleSeries(series);
+    // Reassign to all series in case of all series unselected,
+    // otherwise we will get an empty space without grid
+    visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
+    let xScale;
+    let yScale;
+    switch (xType) {
+        case 'linear': {
+            const domain = getDomainDataXBySeries(visibleSeries);
+            const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
+            if (isNumericalArrayData(domain)) {
+                const [domainXMin, xMax] = extent(domain);
+                const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
+                xScale = scaleLinear().domain([xMinValue, xMax]).range(range).nice();
+            }
+            break;
+        }
+        case 'category': {
+            if (xCategories) {
+                const filteredCategories = filterCategoriesByVisibleSeries(xCategories, visibleSeries);
+                xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
+            }
+            break;
+        }
+        case 'datetime': {
+            const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
+            if (xTimestamps) {
+                const [xMin, xMax] = extent(xTimestamps);
+                xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
+            }
+            else {
+                const domain = getDomainDataXBySeries(visibleSeries);
+                if (isNumericalArrayData(domain)) {
+                    const [xMin, xMax] = extent(domain);
+                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
+                }
+            }
+            break;
+        }
+    }
+    if (!xScale) {
+        throw new Error('Failed to create xScale');
+    }
+    switch (yType) {
+        case 'linear': {
+            const domain = getDomainDataYBySeries(visibleSeries);
+            const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
+            if (isNumericalArrayData(domain)) {
+                const [domainYMin, yMax] = extent(domain);
+                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
+                yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
+            }
+            break;
+        }
+        case 'category': {
+            if (yCategories) {
+                const filteredCategories = filterCategoriesByVisibleSeries(yCategories, visibleSeries);
+                yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
+            }
+            break;
+        }
+        case 'datetime': {
+            const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
+            if (yTimestamps) {
+                const [yMin, yMax] = extent(yTimestamps);
+                yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
+            }
+            else {
+                const domain = getDomainDataYBySeries(visibleSeries);
+                if (isNumericalArrayData(domain)) {
+                    const [yMin, yMax] = extent(domain);
+                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
+                }
+            }
+            break;
+        }
+    }
+    if (!yScale) {
+        throw new Error('Failed to create yScale');
+    }
+    return { xScale, yScale };
+};
+/**
+ * Uses to create scales for axis related series
+ */
+export const useAxisScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    const scales = React.useMemo(() => {
+        let xScale;
+        let yScale;
+        const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+        if (hasAxisRelatedSeries) {
+            ({ xScale, yScale } = createScales({ boundsWidth, boundsHeight, series, xAxis, yAxis }));
+        }
+        return { xScale, yScale };
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis]);
+    return scales;
+};

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartOptions } from '../useChartOptions/types';
-import { ChartScale } from '../useScales';
+import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { BarXSeries } from '../../../../../types/widget-data';
 type Args = {

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../../utils/cn';
 const DEFAULT_BAR_RECT_WIDTH = 50;
 const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
 const MIN_RECT_GAP = 1;
-const b = block('chartkit-d3-bar');
+const b = block('d3-bar');
 const getRectProperties = (args) => {
     const { point, xAxis, xScale, yAxis, yScale, minPointDistance } = args;
     let cx;

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 import type { ChartOptions } from '../useChartOptions/types';
-import type { ChartScale } from '../useScales';
+import type { ChartScale } from '../useAxisScales';
 import type { ChartSeries } from '../useSeries';
 import type { OnSeriesMouseMove, OnSeriesMouseLeave } from '../useTooltip/types';
 type Args = {
     series: ChartSeries[];
     xAxis: ChartOptions['xAxis'];
-    xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];
-    yScale: ChartScale;
     svgContainer: SVGSVGElement | null;
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
+    xScale?: ChartScale;
+    yScale?: ChartScale;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -12,28 +12,32 @@ export const useShapes = (args) => {
             const [seriesType, chartSeries] = item;
             switch (seriesType) {
                 case 'bar-x': {
-                    acc.push(...prepareBarXSeries({
-                        series: chartSeries,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        onSeriesMouseMove,
-                        onSeriesMouseLeave,
-                    }));
+                    if (xScale && yScale) {
+                        acc.push(...prepareBarXSeries({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                            onSeriesMouseMove,
+                            onSeriesMouseLeave,
+                        }));
+                    }
                     break;
                 }
                 case 'scatter': {
-                    acc.push(...prepareScatterSeries({
-                        series: chartSeries,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        onSeriesMouseMove,
-                        onSeriesMouseLeave,
-                        svgContainer,
-                    }));
+                    if (xScale && yScale) {
+                        acc.push(...prepareScatterSeries({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                            onSeriesMouseMove,
+                            onSeriesMouseLeave,
+                            svgContainer,
+                        }));
+                    }
                     break;
                 }
             }

package/build/plugins/d3/renderer/hooks/useShapes/scatter.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartOptions } from '../useChartOptions/types';
-import { ChartScale } from '../useScales';
+import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { ScatterSeries } from '../../../../../types/widget-data';
 type PrepareScatterSeriesArgs = {

package/build/plugins/d3/renderer/hooks/useShapes/scatter.js

@@ -1,7 +1,7 @@
 import { pointer } from 'd3';
 import React from 'react';
-import block from 'bem-cn-lite';
-const b = block('chartkit-d3-scatter');
+import { block } from '../../../../../utils/cn';
+const b = block('d3-scatter');
 const DEFAULT_SCATTER_POINT_RADIUS = 4;
 const prepareCategoricalScatterData = (data) => {
     return data.filter((d) => typeof d.category === 'string');

package/build/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import React from 'react';
 import SplitPane, { Pane } from 'react-split-pane';
-import block from 'bem-cn-lite';
+import { cn } from '../../../../../utils/cn';
 import './StyledSplitPane.css';
-const b = block('styled-split-pane');
+const b = cn('styled-split-pane');
 const resizerClassName = b('pane-resizer');
 export const StyledSplitPane = (_a) => {
     var { paneOneRender, paneTwoRender } = _a, splitPaneProps = __rest(_a, ["paneOneRender", "paneTwoRender"]);

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.js

@@ -1,12 +1,12 @@
 /* eslint callback-return: 0 */
 import React from 'react';
-import block from 'bem-cn-lite';
 import { debounce, get } from 'lodash';
 import { getRandomCKId } from '../../../../../utils';
+import { cn } from '../../../../../utils/cn';
 import { chartTypesWithoutCrosshair } from '../../helpers/config/config';
 import { StyledSplitPane } from '../StyledSplitPane/StyledSplitPane';
 import './WithSplitPane.css';
-const b = block('with-split-pane');
+const b = cn('with-split-pane');
 const PANE_RESIZER_HEIGHT = 24;
 const CHART_SECTION_PERCENTAGE = 0.6;
 const MIN_TOOLTIP_SECTION_HEIGHT = 62;

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -1,6 +1,5 @@
 /* eslint new-cap: 0, complexity: 0 */
 import Highcharts from 'highcharts';
-import block from 'bem-cn-lite';
 import merge from 'lodash/merge';
 import mergeWith from 'lodash/mergeWith';
 import get from 'lodash/get';
@@ -13,13 +12,14 @@ import debounce from 'lodash/debounce';
 import { dateTime } from '@gravity-ui/date-utils';
 import { i18n } from '../../../../../i18n';
 import { formatNumber } from '../../../../shared';
+import { block } from '../../../../../utils/cn';
 import { getCommentsOnLine, drawComments, hideComments, drawOnlyRendererComments, } from '../comments/drawing';
 import formatTooltip, { TOOLTIP_ROW_CLASS_NAME, SERIES_NAME_DATA_ATTRIBUTE, TOOLTIP_HEADER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NANE, } from '../tooltip';
 import defaultOptions from './options';
 import { calculatePrecision, isTooltipShared, isSafari, mergeArrayWithObject, concatStrings, buildNavigatorFallback, addShowInNavigatorToSeries, setNavigatorDefaultPeriod, numberFormat, getFormatOptionsFromLine, checkTooltipPinningAvailability, getSortedData, } from './utils';
 import { handleLegendItemClick } from './handleLegendItemClick';
 import { getChartKitFormattedValue } from './utils/getChartKitFormattedValue';
-const b = block('chartkit-tooltip');
+const b = block('tooltip');
 const TOOLTIP_OFFSET_FROM_CURSOR = 15;
 const TOOLTIP_ROOT_CLASS_NAME = 'chartkit-highcharts-tooltip-container';
 const MOBILE_TOOLTIP_OFFSET_FROM_POINTER = 30;

package/build/plugins/highcharts/renderer/helpers/config/options.js

@@ -1,10 +1,10 @@
 /** Default options for Highcharts & Highstock */
-import block from 'bem-cn-lite';
 import merge from 'lodash/merge';
 import { i18n } from '../../../../../i18n';
+import { block } from '../../../../../utils/cn';
 import { getChartKitFormattedValue } from './utils';
 import LocalStorage from './utils/localStorage';
-const b = block('chartkit-tooltip');
+const b = block('tooltip');
 function getTooltipHeaderFormat(format, showColor) {
     return `<div class="${b('header')}">
         ${showColor

package/build/plugins/indicator/renderer/IndicatorItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import block from 'bem-cn-lite';
-const b = block('chartkit-indicator');
+import { block } from '../../../utils/cn';
+const b = block('indicator');
 export const IndicatorItem = (props) => {
     const { formatNumber, content, color, defaultColor, size, title, nowrap } = props;
     const mods = { size, nowrap };

package/build/plugins/indicator/renderer/IndicatorWidget.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { isEmpty } from 'lodash';
 import { i18n } from '../../../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
 import { CHARTKIT_SCROLLABLE_NODE_CLASSNAME } from '../../../constants';
 import { getChartPerformanceDuration, getRandomCKId, markChartPerformance } from '../../../utils';
+import { block } from '../../../utils/cn';
 import { IndicatorItem } from './IndicatorItem';
 import './IndicatorWidget.css';
-const b = block('chartkit-indicator');
+const b = block('indicator');
 const IndicatorWidget = React.forwardRef(
 // _ref needs to avoid this React warning:
 // "forwardRef render functions accept exactly two parameters: props and ref"

package/build/utils/cn.d.ts

@@ -0,0 +1,3 @@
+export declare const NAMESPACE = "chartkit-";
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;

package/build/utils/cn.js

@@ -0,0 +1,4 @@
+import { withNaming } from '@bem-react/classname';
+export const NAMESPACE = 'chartkit-';
+export const cn = withNaming({ e: '__', m: '_' });
+export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.4.1",
+  "version": "3.4.3",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -14,13 +14,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": [
-    "*.css"
-  ],
   "dependencies": {
+    "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.7.9",
-    "bem-cn-lite": "^4.1.0",
+    "@gravity-ui/yagr": "^3.7.10",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"
@@ -34,7 +31,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.0.0",
+    "@gravity-ui/uikit": "^5.6.0",
     "@storybook/addon-essentials": "^7.0.26",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/cli": "^7.0.26",

package/build/plugins/d3/renderer/hooks/useScales/index.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
-import get from 'lodash/get';
-import { getOnlyVisibleSeries, getDomainDataXBySeries, getDomainDataYBySeries } from '../../utils';
-const isNumericalArrayData = (data) => {
-    return data.every((d) => typeof d === 'number' || d === null);
-};
-const filterCategoriesByVisibleSeries = (categories, series) => {
-    return categories.filter((category) => {
-        return series.some((s) => {
-            return s.data.some((d) => 'category' in d && d.category === category);
-        });
-    });
-};
-export const useScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
-    const scales = React.useMemo(() => {
-        const xMin = get(xAxis, 'min');
-        const xType = get(xAxis, 'type', 'linear');
-        const xCategories = get(xAxis, 'categories');
-        const xTimestamps = get(xAxis, 'timestamps');
-        const yType = get(yAxis[0], 'type', 'linear');
-        const yMin = get(yAxis[0], 'min');
-        const yCategories = get(yAxis[0], 'categories');
-        const yTimestamps = get(xAxis, 'timestamps');
-        let visibleSeries = getOnlyVisibleSeries(series);
-        // Reassign to all series in case of all series unselected,
-        // otherwise we will get an empty space without grid
-        visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
-        let xScale;
-        let yScale;
-        switch (xType) {
-            case 'linear': {
-                const domain = getDomainDataXBySeries(visibleSeries);
-                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
-                if (isNumericalArrayData(domain)) {
-                    const [domainXMin, xMax] = extent(domain);
-                    const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
-                    xScale = scaleLinear().domain([xMinValue, xMax]).range(range).nice();
-                }
-                break;
-            }
-            case 'category': {
-                if (xCategories) {
-                    const filteredCategories = filterCategoriesByVisibleSeries(xCategories, visibleSeries);
-                    xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
-                }
-                break;
-            }
-            case 'datetime': {
-                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
-                if (xTimestamps) {
-                    const [xMin, xMax] = extent(xTimestamps);
-                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
-                }
-                else {
-                    const domain = getDomainDataXBySeries(visibleSeries);
-                    if (isNumericalArrayData(domain)) {
-                        const [xMin, xMax] = extent(domain);
-                        xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
-                    }
-                }
-                break;
-            }
-        }
-        if (!xScale) {
-            throw new Error('Failed to create xScale');
-        }
-        switch (yType) {
-            case 'linear': {
-                const domain = getDomainDataYBySeries(visibleSeries);
-                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
-                if (isNumericalArrayData(domain)) {
-                    const [domainYMin, yMax] = extent(domain);
-                    const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                    yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
-                }
-                break;
-            }
-            case 'category': {
-                if (yCategories) {
-                    const filteredCategories = filterCategoriesByVisibleSeries(yCategories, visibleSeries);
-                    yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
-                }
-                break;
-            }
-            case 'datetime': {
-                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
-                if (yTimestamps) {
-                    const [yMin, yMax] = extent(yTimestamps);
-                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
-                }
-                else {
-                    const domain = getDomainDataYBySeries(visibleSeries);
-                    if (isNumericalArrayData(domain)) {
-                        const [yMin, yMax] = extent(domain);
-                        yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
-                    }
-                }
-                break;
-            }
-        }
-        if (!yScale) {
-            throw new Error('Failed to create yScale');
-        }
-        return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis]);
-    return scales;
-};