@gravity-ui/charts 1.38.6 → 1.39.0

package/dist/cjs/components/AxisX/prepare-axis-data.d.ts

@@ -8,6 +8,6 @@ export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetR
     height: number;
     scale: ChartScale;
     series: PreparedSeries[];
-    split: PreparedSplit;
+    split: PreparedSplit | undefined;
     yAxis: PreparedAxis[];
 }): Promise<AxisXData[]>;

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -68,21 +68,21 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     };
     return svgLabel;
 }
-// eslint-disable-next-line complexity
 export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const xAxisItems = [];
-    for (let plotIndex = 0; plotIndex < split.plots.length; plotIndex++) {
-        const plot = split.plots[plotIndex];
+    const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
+    for (let plotIndex = 0; plotIndex < splitPlots.length; plotIndex++) {
+        const plot = splitPlots[plotIndex];
         const axisTop = plot.top;
         const axisHeight = plot.height;
         const axisWidth = boundsWidth;
-        const isBottomPlot = plotIndex === split.plots.length - 1;
+        const isBottomPlot = plotIndex === splitPlots.length - 1;
         const plotYAxes = yAxis.filter((a) => a.plotIndex === plotIndex);
-        const yDomainLeftPosition = ((_a = plotYAxes.find((a) => a.position === 'left')) === null || _a === void 0 ? void 0 : _a.visible)
+        const yDomainLeftPosition = ((_b = plotYAxes.find((a) => a.position === 'left')) === null || _b === void 0 ? void 0 : _b.visible)
             ? 0
             : null;
-        const yDomainRightPosition = ((_b = plotYAxes.find((a) => a.position === 'right')) === null || _b === void 0 ? void 0 : _b.visible)
+        const yDomainRightPosition = ((_c = plotYAxes.find((a) => a.position === 'right')) === null || _c === void 0 ? void 0 : _c.visible)
             ? axisWidth
             : null;
         let domain = null;
@@ -90,7 +90,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             domain = {
                 start: [0, axisTop + axisHeight],
                 end: [axisWidth, axisTop + axisHeight],
-                lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
+                lineColor: (_d = axis.lineColor) !== null && _d !== void 0 ? _d : '',
             };
         }
         const ticks = [];
@@ -255,7 +255,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 axisScale,
                 axis: 'x',
             });
-            const halfBandwidth = ((_e = (_d = axisScale.bandwidth) === null || _d === void 0 ? void 0 : _d.call(axisScale)) !== null && _e !== void 0 ? _e : 0) / 2;
+            const halfBandwidth = ((_f = (_e = axisScale.bandwidth) === null || _e === void 0 ? void 0 : _e.call(axisScale)) !== null && _f !== void 0 ? _f : 0) / 2;
             const startPos = halfBandwidth + Math.min(from, to);
             const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
             const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
@@ -279,7 +279,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                         text: plotBand.label.text,
                         style: plotBand.label.style,
                         x: plotBand.label.padding,
-                        y: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _f !== void 0 ? _f : 0),
+                        y: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _g !== void 0 ? _g : 0),
                         rotate: -90,
                         qa: plotBand.label.qa,
                     }

package/dist/cjs/components/AxisY/prepare-axis-data.d.ts

@@ -2,7 +2,7 @@ import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '..
 import type { AxisYData } from './types';
 export declare function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }: {
     axis: PreparedAxis;
-    split: PreparedSplit;
+    split: PreparedSplit | undefined;
     scale: ChartScale;
     top: number;
     width: number;

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -110,8 +110,8 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
 }
 export async function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
     var _a, _b, _c;
-    const axisPlotTopPosition = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-    const axisHeight = ((_b = split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
+    const axisPlotTopPosition = ((_a = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+    const axisHeight = ((_b = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
     let domain = null;
     if (axis.visible) {

package/dist/cjs/components/ChartInner/index.js

@@ -3,9 +3,6 @@ import { ArrowRotateLeft } from '@gravity-ui/icons';
 import { Button, ButtonIcon, useUniqId } from '@gravity-ui/uikit';
 import { useCrosshair, usePrevious } from '../../hooks';
 import { getPreparedRangeSlider } from '../../hooks/useAxis/range-slider';
-import { getPreparedChart } from '../../hooks/useChartOptions/chart';
-import { getPreparedTitle } from '../../hooks/useChartOptions/title';
-import { getPreparedTooltip } from '../../hooks/useChartOptions/tooltip';
 import { getClipPathIdByBounds } from '../../hooks/useShapes/utils';
 import { EventType, block, getDispatcher, isBandScale } from '../../utils';
 import { AxisX } from '../AxisX/AxisX';
@@ -21,7 +18,8 @@ import { getInitialRangeSliderState } from '../utils';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
-import { getResetZoomButtonStyle, useAsyncState, useDebouncedValue } from './utils';
+import { useDefaultState } from './useDefaultState';
+import { getPreparedChart, getPreparedTitle, getPreparedTooltip, getResetZoomButtonStyle, useAsyncState, useDebouncedValue, } from './utils';
 import './styles.css';
 const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
@@ -63,12 +61,14 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
         rangeSliderState,
         updateZoomState,
         zoomState }));
+    const prevWidth = usePrevious(width);
+    const prevHeight = usePrevious(height);
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,
         delay: DEBOUNCED_VALUE_DELAY,
@@ -97,7 +97,21 @@ export const ChartInner = (props) => {
         xScale,
         yScale,
         tooltipThrottle: preparedTooltip.throttle,
-        isOutsideBounds,
+    });
+    useDefaultState({
+        boundsHeight,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        boundsWidth,
+        defaultState: data.defaultState,
+        dispatcher,
+        shapesData,
+        shapesReady,
+        svgRef,
+        xAxis,
+        yAxis,
+        xScale,
+        yScale,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
@@ -237,7 +251,7 @@ export const ChartInner = (props) => {
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
         preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { chartWidth: width })),
-        React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
+        React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
         React.createElement("g", { className: b('content'), width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
@@ -253,7 +267,10 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
+        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
+            preparedLegend &&
+            debouncedAllPreparedSeries &&
+            preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

package/dist/cjs/components/ChartInner/useChartInnerHandlers.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from 'react';
 import type { Dispatch } from 'd3';
 import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
 import type { ChartScale } from '../../hooks/useAxisScales/types';
@@ -20,7 +20,6 @@ type Props = {
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
     tooltipThrottle: number;
-    isOutsideBounds: (x: number, y: number) => boolean;
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;

package/dist/cjs/components/ChartInner/useChartInnerHandlers.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { pointer } from 'd3';
 import get from 'lodash/get';
 import throttle from 'lodash/throttle';
@@ -6,7 +7,10 @@ import { EventType } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
 import { getHoveredPlots } from '../../utils/chart/get-hovered-plots';
 export function useChartInnerHandlers(props) {
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, xScale, yScale, tooltipThrottle, isOutsideBounds, } = props;
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, xScale, yScale, tooltipThrottle, } = props;
+    const isOutsideBounds = React.useCallback((x, y) => {
+        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+    }, [boundsHeight, boundsWidth]);
     const handleMove = ([pointerX, pointerY], event) => {
         if (tooltipPinned) {
             return;

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
+import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
+import type { PreparedChart } from '../../hooks/types';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -14,29 +15,15 @@ type Props = ChartInnerProps & {
     rangeSliderState?: RangeSliderState;
 };
 export declare function useChartInnerProps(props: Props): {
-    allPreparedSeries: import("../../hooks").PreparedSeries[];
-    boundsHeight: number;
+    preparedSeries: PreparedSeries[];
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
+    boundsHeight: number;
     boundsWidth: number;
-    handleLegendItemClick: import("../../hooks").OnLegendItemClick;
-    isOutsideBounds: (x: number, y: number) => boolean;
-    legendConfig: LegendConfig | undefined;
-    legendItems: import("../../hooks").LegendItem[][];
-    preparedLegend: PreparedLegend | null;
-    preparedSeries: import("../../hooks").PreparedSeries[];
-    preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
-    preparedSplit: import("../../hooks").PreparedSplit;
-    prevHeight: number | undefined;
-    prevWidth: number | undefined;
-    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    shapesData: import("../../hooks").ShapeData[];
-    shapesReady: boolean;
-    xAxis: import("../../hooks").PreparedXAxis | null;
-    xScale: import("../../hooks").ChartScale | undefined;
+    xAxis: PreparedXAxis | null;
     yAxis: (Omit<import("../../types").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
         type: import("../../types").ChartAxisType;
-        labels: Omit<import("../../types").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../../types").ChartAxisLabels, "margin" | "html" | "enabled" | "rotation" | "padding">> & {
+        labels: Omit<import("../../types").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../../types").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
             style: import("../../types").BaseTextStyle;
             rotation: number;
             height: number;
@@ -71,6 +58,18 @@ export declare function useChartInnerProps(props: Props): {
         plotBands: import("../../hooks").PreparedAxisPlotBand[];
         crosshair: Required<import("../../types").AxisCrosshair>;
     })[];
-    yScale: (import("../../hooks").ChartScale | undefined)[] | undefined;
+    shapesData: ShapeData[];
+    shapesReady: boolean;
+    handleLegendItemClick: OnLegendItemClick;
+    allPreparedSeries?: PreparedSeries[] | undefined;
+    legendConfig?: LegendConfig | undefined;
+    legendItems?: LegendItem[][] | undefined;
+    preparedLegend?: PreparedLegend | undefined;
+    preparedSeriesOptions?: import("../../constants").SeriesOptionsDefaults | undefined;
+    preparedSplit?: PreparedSplit | undefined;
+    shapes?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+    xScale?: ChartScale | undefined;
+    yScale?: (ChartScale | undefined)[] | undefined;
+    activeLegendItems?: string[] | undefined;
 };
 export {};