@gravity-ui/charts 1.26.0 → 1.27.0

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

@@ -0,0 +1,149 @@
+import { calculateCos, calculateSin, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidth, axisLabelsWidth, }) {
+    if (!axis.title.text || axis.title.html) {
+        return null;
+    }
+    const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
+    const rotateAngle = axis.title.rotation;
+    const sin = Math.abs(calculateSin(rotateAngle));
+    const cos = Math.abs(calculateCos(rotateAngle));
+    const titleContent = [];
+    const titleMaxWidth = rotateAngle === 0 ? axis.title.maxWidth : sin * axisHeight;
+    if (axis.title.maxRowCount > 1) {
+        let titleTextRows = await wrapText({
+            text: axis.title.text,
+            style: axis.title.style,
+            width: titleMaxWidth,
+            getTextSize: getTitleTextSize,
+        });
+        titleTextRows = titleTextRows.reduce((acc, row, index) => {
+            if (index < axis.title.maxRowCount) {
+                acc.push(row);
+            }
+            else {
+                acc[axis.title.maxRowCount - 1].text += row.text;
+            }
+            return acc;
+        }, []);
+        for (let i = 0; i < titleTextRows.length; i++) {
+            const textRow = titleTextRows[i];
+            let textRowContent = textRow.text.trim();
+            if (i === titleTextRows.length - 1) {
+                textRowContent = await getTextWithElipsis({
+                    text: textRowContent,
+                    maxWidth: titleMaxWidth,
+                    getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+                });
+            }
+            const textRowSize = await getTitleTextSize(textRowContent);
+            titleContent.push({
+                text: textRowContent,
+                x: 0,
+                y: textRow.y,
+                size: textRowSize,
+            });
+        }
+    }
+    else {
+        const text = await getTextWithElipsis({
+            text: axis.title.text,
+            maxWidth: titleMaxWidth,
+            getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+        });
+        titleContent.push({
+            text,
+            x: 0,
+            y: 0,
+            size: await getTitleTextSize(text),
+        });
+    }
+    const originalTextSize = titleContent.reduce((acc, item) => {
+        acc.width = Math.max(acc.width, item.size.width);
+        acc.height += item.size.height;
+        return acc;
+    }, { width: 0, height: 0 });
+    const rotatedTitleSize = rotateAngle === 0
+        ? originalTextSize
+        : {
+            width: sin * originalTextSize.height + cos * originalTextSize.width,
+            height: sin * originalTextSize.width + cos * originalTextSize.height,
+        };
+    const bottom = Math.max(0, calculateSin(rotateAngle) * originalTextSize.width);
+    let y = 0;
+    switch (axis.title.align) {
+        case 'left': {
+            y = -bottom + axisHeight;
+            break;
+        }
+        case 'center': {
+            y = -bottom + axisHeight / 2 + rotatedTitleSize.height / 2;
+            break;
+        }
+        case 'right': {
+            y = -bottom + rotatedTitleSize.height;
+            break;
+        }
+    }
+    const left = rotateAngle === 0
+        ? Math.min(originalTextSize.width, axis.title.maxWidth)
+        : Math.min(0, calculateCos(rotateAngle) * originalTextSize.width);
+    const x = axis.position === 'left'
+        ? -left - axisLabelsWidth - axis.labels.margin - axis.title.margin
+        : -left + axisWidth + axisLabelsWidth + axis.labels.margin + axis.title.margin;
+    return {
+        html: false,
+        content: titleContent,
+        style: axis.title.style,
+        size: rotatedTitleSize,
+        x,
+        y: axisTop + y,
+        rotate: rotateAngle,
+        offset: -(originalTextSize.height / titleContent.length) * (titleContent.length - 1),
+    };
+}
+export async function prepareHtmlYAxisTitle({ axis, axisTop, axisHeight, axisWidth, axisLabelsWidth, }) {
+    if (!axis.title.text || !axis.title.html) {
+        return null;
+    }
+    const content = axis.title.text;
+    const rotateAngle = axis.title.rotation;
+    const titleMaxWidth = rotateAngle === 0 ? axis.title.maxWidth : axisHeight;
+    const labelSize = await getLabelsSize({
+        labels: [content],
+        html: true,
+        style: Object.assign(Object.assign({}, axis.title.style), { whiteSpace: 'nowrap' }),
+    });
+    const size = { width: labelSize.maxWidth, height: labelSize.maxHeight };
+    const rotatedTitleSize = rotateAngle === 0 ? size : { width: size.height, height: size.width };
+    let y = 0;
+    switch (axis.title.align) {
+        case 'left': {
+            const yOffset = rotateAngle === 0 ? -rotatedTitleSize.height : 0;
+            y = axisHeight + yOffset;
+            break;
+        }
+        case 'center': {
+            const yOffset = rotateAngle === 0 ? -rotatedTitleSize.height / 2 : rotatedTitleSize.height / 2;
+            y = axisHeight / 2 + yOffset;
+            break;
+        }
+        case 'right': {
+            y = rotateAngle === 0 ? 0 : rotatedTitleSize.height;
+            break;
+        }
+    }
+    const x = axis.position === 'left'
+        ? -Math.min(titleMaxWidth, rotatedTitleSize.width) -
+            axisLabelsWidth -
+            axis.labels.margin -
+            axis.title.margin
+        : axisWidth + axisLabelsWidth + axis.labels.margin + axis.title.margin;
+    return {
+        html: true,
+        content: `<div style="max-width: ${titleMaxWidth}px; overflow: hidden; white-space: nowrap; transform-origin: 0 0; transform: rotate(${rotateAngle}deg);">${content}</div>`,
+        style: axis.title.style,
+        size: rotatedTitleSize,
+        x,
+        y: axisTop + y,
+    };
+}

package/dist/cjs/components/AxisY/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle } from 'src/constants';
-import type { BaseTextStyle, HtmlItem, PlotLayerPlacement } from '../../types';
+import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
 export type TextRowData = {
     text: string;
     x: number;
@@ -22,14 +22,15 @@ export type AxisSvgLabelData = {
     };
 };
 export type AxisTickLine = {
-    points: [number, number][];
+    points: PointPosition[];
 };
 export type AxisTickData = {
     line: AxisTickLine | null;
     svgLabel: AxisSvgLabelData | null;
     htmlLabel: HtmlItem | null;
 };
-export type AxisTitleData = {
+export type SvgAxisTitleData = {
+    html: false;
     content: TextRowData[];
     style: BaseTextStyle;
     size: {
@@ -41,6 +42,17 @@ export type AxisTitleData = {
     rotate: number;
     offset: number;
 };
+export type HtmlAxisTitleData = {
+    html: true;
+    content: string;
+    style: BaseTextStyle & React.CSSProperties;
+    size: {
+        width: number;
+        height: number;
+    };
+    x: number;
+    y: number;
+};
 export type AxisPlotLineLabel = {
     text: string;
     style: BaseTextStyle;
@@ -76,7 +88,7 @@ export type AxisDomainData = {
 };
 export type AxisYData = {
     id: string;
-    title: AxisTitleData | null;
+    title: HtmlAxisTitleData | SvgAxisTitleData | null;
     domain: AxisDomainData | null;
     ticks: AxisTickData[];
     plotLines: AxisPlotLineData[];

package/dist/cjs/components/AxisY/utils.js

@@ -1,11 +1,4 @@
-import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCount, isBandScale } from '../../utils';
-function thinOut(items, delta) {
-    const arr = [];
-    for (let i = 0; i < items.length; i = i + delta) {
-        arr.push(items[i]);
-    }
-    return arr;
-}
+import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCount, isBandScale, thinOut, } from '../../utils';
 export function getTickValues({ scale, axis, labelLineHeight, series, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();

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

@@ -1,19 +1,22 @@
 import React from 'react';
-import { duration } from '@gravity-ui/date-utils';
 import { ArrowRotateLeft } from '@gravity-ui/icons';
 import { Button, ButtonIcon, useUniqId } from '@gravity-ui/uikit';
 import { useCrosshair } 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 { EventType, block, getDispatcher, isBandScale, isTimeScale } from '../../utils';
+import { EventType, block, getDispatcher, isBandScale } from '../../utils';
 import { AxisX } from '../AxisX/AxisX';
+import { prepareXAxisData } from '../AxisX/prepare-axis-data';
 import { AxisY } from '../AxisY/AxisY';
-import { prepareAxisData } from '../AxisY/prepare-axis-data';
+import { prepareYAxisData } from '../AxisY/prepare-axis-data';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
 import { RangeSlider } from '../RangeSlider';
 import { Title } from '../Title';
 import { Tooltip } from '../Tooltip';
+import { getInitialRangeSliderState } from '../utils';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
@@ -22,7 +25,7 @@ import './styles.css';
 const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
 export const ChartInner = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const resetZoomButtonRef = React.useRef(null);
@@ -30,8 +33,19 @@ export const ChartInner = (props) => {
     const plotRef = React.useRef(null);
     const plotBeforeRef = React.useRef(null);
     const plotAfterRef = React.useRef(null);
+    const rangeSliderRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
+    const preparedTitle = React.useMemo(() => {
+        return getPreparedTitle({ title: data.title });
+    }, [data.title]);
+    const preparedChart = React.useMemo(() => {
+        return getPreparedChart({
+            chart: data.chart,
+            seriesData: data.series.data,
+            preparedTitle,
+        });
+    }, [data.chart, data.series.data, preparedTitle]);
     const preparedTooltip = React.useMemo(() => {
         return getPreparedTooltip({
             tooltip: data.tooltip,
@@ -45,12 +59,13 @@ export const ChartInner = (props) => {
     }, [data.xAxis]);
     const { initialized, setInitialized, tooltipPinned, togglePinTooltip, unpinTooltip, rangeSliderState, updateRangeSliderState, updateZoomState, zoomState, } = useChartInnerState({
         dispatcher,
-        tooltip: preparedTooltip,
+        preparedChart,
         preparedRangeSlider,
+        tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, preparedZoom, prevHeight, prevWidth, shapes, shapesData, svgXPos, title, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
-        htmlLayout, plotNode: plotRef.current, rangeSliderState, svgContainer: svgRef.current, updateZoomState,
+        htmlLayout, plotNode: plotRef.current, preparedChart, rangeSliderDomain: (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.getDomain(), rangeSliderState, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,
@@ -80,8 +95,8 @@ export const ChartInner = (props) => {
         tooltipThrottle: preparedTooltip.throttle,
         isOutsideBounds,
     });
-    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;
+    const clickHandler = (_c = (_b = data.chart) === null || _b === void 0 ? void 0 : _b.events) === null || _c === void 0 ? void 0 : _c.click;
+    const pointerMoveHandler = (_e = (_d = data.chart) === null || _d === void 0 ? void 0 : _d.events) === null || _e === void 0 ? void 0 : _e.pointermove;
     useCrosshair({
         split: preparedSplit,
         plotElement: plotAfterRef.current,
@@ -121,7 +136,7 @@ export const ChartInner = (props) => {
             const axis = yAxis[i];
             const scale = yScale === null || yScale === void 0 ? void 0 : yScale[i];
             if (scale) {
-                const axisData = await prepareAxisData({
+                const axisData = await prepareYAxisData({
                     axis,
                     scale,
                     top: boundsOffsetTop,
@@ -136,48 +151,42 @@ export const ChartInner = (props) => {
         return items;
     }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
     const yAxisDataItems = useAsyncState([], setYAxisDataItems);
+    const setXAxisDataItems = React.useCallback(async () => {
+        const items = [];
+        const axis = xAxis;
+        const scale = xScale;
+        if (axis && scale) {
+            const axisData = await prepareXAxisData({
+                axis,
+                scale,
+                boundsWidth,
+                boundsOffsetLeft: boundsOffsetLeft,
+                boundsOffsetRight: width - boundsWidth - boundsOffsetLeft,
+                height: boundsHeight,
+            });
+            items.push(axisData);
+        }
+        return items;
+    }, [boundsHeight, boundsOffsetLeft, boundsWidth, width, xAxis, xScale]);
+    const xAxisDataItems = useAsyncState([], setXAxisDataItems);
     React.useEffect(() => {
         if (!initialized && xScale) {
-            const defaultRange = preparedRangeSlider.defaultRange;
-            if (isBandScale(xScale)) {
+            if (!preparedRangeSlider.enabled || isBandScale(xScale)) {
                 setInitialized(true);
                 return;
             }
-            if (isTimeScale(xScale)) {
-                const domain = xScale.domain();
-                const minDomainMs = domain[0].valueOf();
-                const maxDomainMs = domain[1].valueOf();
-                let minRangeMs = minDomainMs;
-                try {
-                    if (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.size) {
-                        const durationMs = duration(defaultRange.size).asMilliseconds();
-                        const minDefaultRangeMs = maxDomainMs - durationMs;
-                        if (minDefaultRangeMs < maxDomainMs) {
-                            minRangeMs = minDefaultRangeMs;
-                        }
-                    }
-                }
-                catch (_a) { }
-                updateRangeSliderState({ min: minRangeMs, max: maxDomainMs });
-                setInitialized(true);
-            }
-            else {
-                const [minDomain, maxDomain] = xScale.domain();
-                let minRange = minDomain;
-                if (typeof (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.size) === 'number') {
-                    const minDefaultRange = maxDomain - defaultRange.size;
-                    if (minDefaultRange < maxDomain) {
-                        minRange = minDefaultRange;
-                    }
-                }
-                updateRangeSliderState({ min: minRange, max: maxDomain });
-                setInitialized(true);
-            }
+            const defaultRange = preparedRangeSlider.defaultRange;
+            const initialRangeSliderState = getInitialRangeSliderState({
+                defaultRange,
+                xScale,
+            });
+            updateRangeSliderState(initialRangeSliderState);
+            setInitialized(true);
         }
     }, [
         initialized,
         preparedRangeSlider.defaultRange,
-        preparedSeries,
+        preparedRangeSlider.enabled,
         setInitialized,
         updateRangeSliderState,
         xScale,
@@ -186,13 +195,12 @@ export const ChartInner = (props) => {
         React.createElement("defs", null,
             React.createElement("clipPath", { id: clipPathId },
                 React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight }))),
-        title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
+        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 });
         })),
-        React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
-            xScale && xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))),
+        React.createElement("g", { className: b('content'), width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
+            xScale && xAxisDataItems.length && (React.createElement(AxisX, { htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: xAxisDataItems[0] })),
             Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {
                 if (!axisData) {
                     return null;
@@ -202,7 +210,7 @@ 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, width: width, xAxis: data.xAxis, yAxis: data.yAxis, zoomState: zoomState })),
+        ((_f = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _f === void 0 ? void 0 : _f.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 })),
         (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, 
@@ -212,10 +220,14 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        Object.keys(zoomState).length > 0 && preparedZoom && (React.createElement(Button, { onClick: () => updateZoomState({}), ref: resetZoomButtonRef, style: getResetZoomButtonStyle(Object.assign({ boundsHeight,
+        Object.keys(zoomState).length > 0 && preparedChart.zoom && (React.createElement(Button, { className: b('reset-zoom-button'), onClick: () => {
+                var _a;
+                updateZoomState({});
+                (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.resetState();
+            }, ref: resetZoomButtonRef, style: getResetZoomButtonStyle(Object.assign({ boundsHeight,
                 boundsOffsetLeft,
                 boundsOffsetTop,
-                boundsWidth, node: resetZoomButtonRef.current, titleHeight: title === null || title === void 0 ? void 0 : title.height }, preparedZoom.resetButton)) },
+                boundsWidth, node: resetZoomButtonRef.current, titleHeight: preparedTitle === null || preparedTitle === void 0 ? void 0 : preparedTitle.height }, preparedChart.zoom.resetButton)) },
             React.createElement(ButtonIcon, null,
                 React.createElement(ArrowRotateLeft, null)))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: preparedTooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));

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

@@ -1,15 +1,17 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     clipPathId: string;
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
+    preparedChart: PreparedChart;
     svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
+    rangeSliderDomain?: [number, number];
     rangeSliderState?: RangeSliderState;
 };
 export declare function useChartInnerProps(props: Props): {
@@ -34,25 +36,20 @@ export declare function useChartInnerProps(props: Props): {
         maxWidth: number;
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
-    preparedChart: import("../../hooks").PreparedChart;
     preparedLegend: PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
-    preparedZoom: import("../../hooks").PreparedZoom | null;
     prevHeight: number | undefined;
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
     svgXPos: number | undefined;
-    title: (import("../..").ChartTitle & {
-        height: number;
-    }) | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
     yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
         type: import("../..").ChartAxisType;
-        labels: Omit<import("../..").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "margin" | "html" | "enabled" | "padding" | "rotation">> & {
+        labels: Omit<import("../..").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "margin" | "html" | "enabled" | "rotation" | "padding">> & {
             style: import("../..").BaseTextStyle;
             rotation: number;
             height: number;
@@ -68,6 +65,9 @@ export declare function useChartInnerProps(props: Props): {
             style: import("../..").BaseTextStyle;
             align: import("../..").ChartAxisTitleAlignment;
             maxRowCount: number;
+            rotation: number;
+            maxWidth: number;
+            html: boolean;
         };
         min?: number;
         grid: {

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SERIES_TYPE } from '../../constants';
-import { useAxis, useAxisScales, useChartDimensions, useChartOptions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useZoom, } from '../../hooks';
+import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
+import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
@@ -35,21 +35,18 @@ function getBoundsOffsetLeft(args) {
 }
 export function useChartInnerProps(props) {
     var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderDomain, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
+    const colors = React.useMemo(() => {
+        var _a;
+        return (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
+    }, [data.colors]);
     const { normalizedSeriesData, normalizedXAxis, normalizedYAxis } = useNormalizedOriginalData({
         seriesData: data.series.data,
         xAxis: data.xAxis,
         yAxis: data.yAxis,
     });
-    const { chart, colors, title } = useChartOptions({
-        chart: data.chart,
-        colors: data.colors,
-        seriesData: normalizedSeriesData,
-        title: data.title,
-        xAxis: data.xAxis,
-    });
     const preparedSeriesOptions = React.useMemo(() => {
         return getPreparedOptions(data.series.options);
     }, [data.series.options]);
@@ -75,14 +72,14 @@ export function useChartInnerProps(props) {
         return getLegendComponents({
             chartWidth: width,
             chartHeight: height,
-            chartMargin: chart.margin,
+            chartMargin: preparedChart.margin,
             series: preparedSeries,
             preparedLegend,
         });
-    }, [width, height, chart.margin, preparedSeries, preparedLegend]);
+    }, [width, height, preparedChart.margin, preparedSeries, preparedLegend]);
     const { xAxis, yAxis } = useAxis({
         height,
-        preparedChart: chart,
+        preparedChart,
         preparedLegend,
         preparedSeries,
         preparedSeriesOptions,
@@ -92,7 +89,7 @@ export function useChartInnerProps(props) {
     });
     const { boundsWidth, boundsHeight } = useChartDimensions({
         height,
-        margin: chart.margin,
+        margin: preparedChart.margin,
         preparedLegend,
         preparedSeries: preparedSeries,
         preparedYAxis: yAxis,
@@ -147,19 +144,20 @@ export function useChartInnerProps(props) {
         plotContainerHeight: boundsHeight,
         plotContainerWidth: boundsWidth,
         preparedSplit,
-        preparedZoom: chart.zoom,
+        preparedZoom: preparedChart.zoom,
+        rangeSliderDomain,
         xAxis,
         xScale,
         yAxis,
         yScale,
     });
     const boundsOffsetTop = getBoundsOffsetTop({
-        chartMarginTop: chart.margin.top,
+        chartMarginTop: preparedChart.margin.top,
         preparedLegend,
     });
     // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = getBoundsOffsetLeft({
-        chartMarginLeft: chart.margin.left,
+        chartMarginLeft: preparedChart.margin.left,
         preparedLegend,
         yAxis,
         getYAxisWidth,
@@ -175,18 +173,15 @@ export function useChartInnerProps(props) {
         isOutsideBounds,
         legendConfig,
         legendItems,
-        preparedChart: chart,
         preparedLegend,
         preparedSeries,
         preparedSeriesOptions,
         preparedSplit,
-        preparedZoom: chart.zoom,
         prevHeight,
         prevWidth,
         shapes,
         shapesData,
         svgXPos: x,
-        title,
         xAxis,
         xScale,
         yAxis,

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedChart, PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
 type Props = {
     dispatcher: Dispatch<object>;
+    preparedChart: PreparedChart;
     preparedRangeSlider: PreparedRangeSlider;
     tooltip?: PreparedTooltip;
 };
@@ -13,7 +14,7 @@ export declare function useChartInnerState(props: Props): {
     tooltipPinned: boolean;
     togglePinTooltip: ((value: boolean, event: React.MouseEvent) => void) | undefined;
     unpinTooltip: (() => void) | undefined;
-    updateRangeSliderState: (nextRangeSliderState?: RangeSliderState) => void;
+    updateRangeSliderState: (nextRangeSliderState?: RangeSliderState, syncZoom?: boolean) => void;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
 };

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
+import { ZOOM_TYPE } from '../../constants';
 import { EventType, isMacintosh } from '../../utils';
+const RANGE_SLIDER_SYNC_ZOOM_TYPES = [ZOOM_TYPE.X, ZOOM_TYPE.XY];
 export function useChartInnerState(props) {
     var _a, _b;
-    const { dispatcher, preparedRangeSlider, tooltip } = props;
+    const { dispatcher, preparedChart, preparedRangeSlider, tooltip } = props;
     const [tooltipPinned, setTooltipPinned] = React.useState(false);
     const [zoomState, setZoomState] = React.useState({});
     const [rangeSliderState, setRangeSliderState] = React.useState();
@@ -11,6 +13,7 @@ export function useChartInnerState(props) {
     const tooltipEnabled = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled;
     const tooltipPinEnabled = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _a === void 0 ? void 0 : _a.enabled;
     const modifierKey = (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _b === void 0 ? void 0 : _b.modifierKey;
+    const rangeSliderEnabled = preparedRangeSlider.enabled;
     const togglePinTooltip = React.useCallback((value, event) => {
         let resultValue = value;
         if (value && modifierKey) {
@@ -33,9 +36,16 @@ export function useChartInnerState(props) {
     const updateZoomState = React.useCallback((nextZoomState) => {
         if (!isEqual(zoomState, nextZoomState)) {
             setZoomState(nextZoomState);
+            if (rangeSliderEnabled && (nextZoomState === null || nextZoomState === void 0 ? void 0 : nextZoomState.x)) {
+                const [xMin, xMax] = nextZoomState.x;
+                setRangeSliderState({
+                    max: xMax,
+                    min: xMin,
+                });
+            }
         }
-    }, [zoomState]);
-    const updateRangeSliderState = React.useCallback((nextRangeSliderState) => {
+    }, [rangeSliderEnabled, zoomState]);
+    const updateRangeSliderState = React.useCallback((nextRangeSliderState, syncZoom = true) => {
         if (!isEqual(rangeSliderState, nextRangeSliderState)) {
             setRangeSliderState(nextRangeSliderState
                 ? {
@@ -43,8 +53,17 @@ export function useChartInnerState(props) {
                     min: nextRangeSliderState.min,
                 }
                 : undefined);
+            if (syncZoom &&
+                nextRangeSliderState &&
+                preparedChart.zoom &&
+                Object.keys(zoomState || {}).length > 0 &&
+                RANGE_SLIDER_SYNC_ZOOM_TYPES.includes(preparedChart.zoom.type)) {
+                setZoomState({
+                    x: [nextRangeSliderState.min, nextRangeSliderState.max],
+                });
+            }
         }
-    }, [rangeSliderState]);
+    }, [preparedChart.zoom, rangeSliderState, zoomState]);
     return {
         initialized,
         rangeSliderState,