@gravity-ui/charts 1.33.0 → 1.34.1

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

@@ -6,6 +6,7 @@ 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';
 import { prepareXAxisData } from '../AxisX/prepare-axis-data';
@@ -214,8 +215,10 @@ export const ChartInner = (props) => {
     }, [height, areShapesReady, onReady, width]);
     const chartContent = (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
-            React.createElement("clipPath", { id: clipPathId },
-                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight }))),
+            React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId }) },
+                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
+            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) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
-import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useZoom, } from '../../hooks';
+import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
@@ -77,7 +77,7 @@ export function useChartInnerProps(props) {
             preparedLegend,
         });
     }, [width, height, preparedChart.margin, preparedSeries, preparedLegend]);
-    const { xAxis, yAxis } = useAxis({
+    const { xAxis, yAxis, setAxes } = useAxis({
         height,
         preparedChart,
         preparedLegend,
@@ -107,6 +107,7 @@ export function useChartInnerProps(props) {
         yAxis,
         zoomState,
     });
+    useYAxisLabelWidth({ seriesData: preparedSeries, setAxes, yAxis, yScale });
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
@@ -125,6 +126,7 @@ export function useChartInnerProps(props) {
         htmlLayout,
         clipPathId,
         isOutsideBounds,
+        zoomState,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({

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

@@ -59,6 +59,7 @@ function RangeSliderComponent(props, forwardedRef) {
         brushOptions: brush,
         node: ref.current,
         onBrushEnd,
+        preventNullSelection: true,
         selection,
         type: 'x',
     });

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -23,7 +23,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
     const restHoveredValues = pinned || !visibleRows ? [] : hoveredValues.slice(visibleRows);
     const renderRow = ({ id, name, color, active, striped, value, formattedValue, series, }) => {
         if (typeof rowRenderer === 'function') {
-            return rowRenderer({
+            const result = rowRenderer({
                 id,
                 name,
                 color,
@@ -34,6 +34,10 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                 className: b('content-row', { active, striped }),
                 hovered,
             });
+            if (typeof result === 'string') {
+                return React.createElement("div", { key: id, dangerouslySetInnerHTML: { __html: result } });
+            }
+            return result;
         }
         const colorSymbol = getTooltipRowColorSymbol({ series, color });
         return (React.createElement(Row, { key: id, active: active, color: color, colorSymbol: colorSymbol ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: colorSymbol.outerHTML } })) : undefined, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));

package/dist/cjs/hooks/index.d.ts

@@ -17,5 +17,6 @@ export * from './useShapes';
 export * from './useSplit';
 export * from './useSplit/types';
 export * from './useTooltip';
+export * from './useYAxisLabelWidth';
 export * from './useZoom';
 export * from './useZoom/types';

package/dist/cjs/hooks/index.js

@@ -17,5 +17,6 @@ export * from './useShapes';
 export * from './useSplit';
 export * from './useSplit/types';
 export * from './useTooltip';
+export * from './useYAxisLabelWidth';
 export * from './useZoom';
 export * from './useZoom/types';

package/dist/cjs/hooks/useAxis/index.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { ChartXAxis, ChartYAxis } from '../../types';
 import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
-import type { PreparedXAxis, PreparedYAxis } from './types';
+import type { AxesState } from './types';
 interface UseAxesProps {
     height: number;
     preparedChart: PreparedChart;
@@ -14,7 +15,8 @@ interface UseAxesProps {
     yAxis?: ChartYAxis[];
 }
 export declare function useAxis(props: UseAxesProps): {
-    xAxis: PreparedXAxis | null;
-    yAxis: PreparedYAxis[];
+    setAxes: React.Dispatch<React.SetStateAction<AxesState>>;
+    xAxis: import("./types").PreparedXAxis | null;
+    yAxis: import("./types").PreparedYAxis[];
 };
 export {};

package/dist/cjs/hooks/useAxis/index.js

@@ -5,7 +5,7 @@ import { getPreparedXAxis } from './x-axis';
 import { getPreparedYAxis } from './y-axis';
 export function useAxis(props) {
     const { boundsHeight, height, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
-    const [axesState, setValue] = React.useState({ xAxis: null, yAxis: [] });
+    const [axesState, setAxes] = React.useState({ xAxis: null, yAxis: [] });
     const axesStateRunRef = React.useRef(0);
     const prevAxesStateValue = React.useRef(axesState);
     const axesStateReady = React.useRef(false);
@@ -55,7 +55,7 @@ export function useAxis(props) {
             const newStateValue = { xAxis: preparedXAxis, yAxis: preparedYAxis };
             if (axesStateRunRef.current === currentRun) {
                 if (!isEqual(prevAxesStateValue.current, newStateValue)) {
-                    setValue(newStateValue);
+                    setAxes(newStateValue);
                     prevAxesStateValue.current = newStateValue;
                 }
                 axesStateReady.current = true;
@@ -72,5 +72,5 @@ export function useAxis(props) {
         xAxis,
         yAxis,
     ]);
-    return axesStateReady.current ? axesState : { xAxis: null, yAxis: [] };
+    return axesStateReady.current ? Object.assign(Object.assign({}, axesState), { setAxes }) : { xAxis: null, yAxis: [], setAxes };
 }

package/dist/cjs/hooks/useAxis/types.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { DashStyle } from '../../constants';
 import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
@@ -68,4 +69,9 @@ export type PreparedXAxis = PreparedBaseAxis & {
 };
 export type PreparedYAxis = PreparedBaseAxis;
 export type PreparedAxis = PreparedXAxis | PreparedYAxis;
+export type AxesState = {
+    xAxis: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
+};
+export type SetAxes = React.Dispatch<React.SetStateAction<AxesState>>;
 export {};

package/dist/cjs/hooks/useAxis/y-axis.d.ts

@@ -1,5 +1,15 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
+import type { ChartScale } from '../useAxisScales/types';
+import type { PreparedSeries } from '../useSeries/types';
 import type { PreparedYAxis } from './types';
+export declare const getYAxisLabelMaxWidth: (args: {
+    axis: PreparedYAxis;
+    seriesData: PreparedSeries[] | ChartSeries[];
+    scale?: ChartScale;
+}) => Promise<{
+    height: number;
+    width: number;
+}>;
 export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, yAxis, }: {
     height: number;
     boundsHeight: number;

package/dist/cjs/hooks/useAxis/y-axis.js

@@ -1,20 +1,12 @@
 import get from 'lodash/get';
 import { getTickValues } from '../../components/AxisY/utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { prepareAxisPlotLabel } from './utils';
-const getAxisLabelMaxWidth = async (args) => {
-    const { axis, seriesData, height } = args;
-    if (!axis.labels.enabled) {
-        return { height: 0, width: 0 };
-    }
-    const scale = createYScale({
-        axis,
-        boundsHeight: height,
-        series: seriesData,
-    });
-    if (!scale) {
+export const getYAxisLabelMaxWidth = async (args) => {
+    const { axis, scale, seriesData } = args;
+    if (!axis.labels.enabled || !scale) {
         return { height: 0, width: 0 };
     }
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
@@ -104,6 +96,21 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
         const shouldHideGrid = axisItem.visible === false ||
             axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
+        let gridEnabled;
+        if (shouldHideGrid) {
+            gridEnabled = false;
+        }
+        else {
+            const gridEnabledProp = get(axisItem, 'grid.enabled');
+            if (firstPlotAxis) {
+                gridEnabled = gridEnabledProp !== null && gridEnabledProp !== void 0 ? gridEnabledProp : true;
+            }
+            else {
+                gridEnabled = shouldSyncAxisWithPrimary(axisItem, axisByPlot[plotIndex][0])
+                    ? false
+                    : !((_g = axisByPlot[plotIndex][0].visible) !== null && _g !== void 0 ? _g : true);
+            }
+        }
         const preparedAxis = {
             type: axisType,
             labels: {
@@ -119,7 +126,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: (_h = calculateNumericProperty({ base: width, value: (_g = axisItem.labels) === null || _g === void 0 ? void 0 : _g.maxWidth })) !== null && _h !== void 0 ? _h : axisLabelsDefaults.maxWidth,
+                maxWidth: (_j = calculateNumericProperty({ base: width, value: (_h = axisItem.labels) === null || _h === void 0 ? void 0 : _h.maxWidth })) !== null && _j !== void 0 ? _j : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -133,20 +140,17 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 height: titleSize.maxHeight * estimatedTitleRows.length,
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
-                html: (_k = (_j = axisItem.title) === null || _j === void 0 ? void 0 : _j.html) !== null && _k !== void 0 ? _k : false,
+                html: (_l = (_k = axisItem.title) === null || _k === void 0 ? void 0 : _k.html) !== null && _l !== void 0 ? _l : false,
                 maxWidth: titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity,
                 rotation: titleRotation,
             },
-            min: (_l = get(axisItem, 'min')) !== null && _l !== void 0 ? _l : getDefaultMinYAxisValue(axisSeriesData),
+            min: (_m = get(axisItem, 'min')) !== null && _m !== void 0 ? _m : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
             startOnTick: get(axisItem, 'startOnTick'),
             endOnTick: get(axisItem, 'endOnTick'),
             maxPadding: get(axisItem, 'maxPadding', getMaxPaddingBySeries({ series: axisSeriesData })),
             grid: {
-                enabled: shouldHideGrid
-                    ? false
-                    : get(axisItem, 'grid.enabled', firstPlotAxis ||
-                        (!firstPlotAxis && !((_m = axisByPlot[plotIndex][0].visible) !== null && _m !== void 0 ? _m : true))),
+                enabled: gridEnabled,
             },
             ticks: {
                 pixelInterval: ((_o = axisItem.ticks) === null || _o === void 0 ? void 0 : _o.interval)
@@ -188,10 +192,15 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             order: axisItem.order,
         };
         if (labelsEnabled) {
-            const { height: labelsHeight, width: labelsWidth } = await getAxisLabelMaxWidth({
+            const scale = createYScale({
+                axis: preparedAxis,
+                boundsHeight,
+                series: axisSeriesData,
+            });
+            const { height: labelsHeight, width: labelsWidth } = await getYAxisLabelMaxWidth({
                 axis: preparedAxis,
                 seriesData: axisSeriesData,
-                height: boundsHeight,
+                scale,
             });
             preparedAxis.labels.height = labelsHeight;
             preparedAxis.labels.width = Math.min(preparedAxis.labels.maxWidth, labelsWidth);

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -1,6 +1,7 @@
 import type { PreparedAxis, PreparedSeries, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
-import type { ChartAxis, ChartSeries } from '../../types';
 import type { ChartScale } from './types';
+export { createXScale } from './x-scale';
+export { createYScale } from './y-scale';
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
@@ -16,22 +17,7 @@ type ReturnValue = {
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
 };
-export declare function createYScale(args: {
-    axis: PreparedAxis;
-    boundsHeight: number;
-    series: PreparedSeries[] | ChartSeries[];
-    primaryTickPositions?: number[];
-    zoomStateY?: [number, number];
-}): import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | undefined;
-export declare function createXScale(args: {
-    axis: PreparedAxis | ChartAxis;
-    boundsWidth: number;
-    series: (PreparedSeries | ChartSeries)[];
-    rangeSliderState?: RangeSliderState;
-    zoomStateX?: [number, number];
-}): import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | undefined;
 /**
  * Uses to create scales for axis related series
  */
 export declare const useAxisScales: (args: Args) => ReturnValue;
-export {};