@gravity-ui/chartkit 5.6.0 → 5.8.0

package/build/plugins/d3/examples/area/NegativeValues.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NegativeValues: () => React.JSX.Element;

package/build/plugins/d3/examples/area/NegativeValues.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+export const NegativeValues = () => {
+    const data = [
+        { x: 0, y: 10 },
+        { x: 1, y: 20 },
+        { x: 2, y: -30 },
+        { x: 3, y: 100 },
+    ];
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'area',
+                    data: data,
+                    name: 'Min temperature',
+                },
+            ],
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/examples/bar-x/NegativeValues.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NegativeValues: () => React.JSX.Element;

package/build/plugins/d3/examples/bar-x/NegativeValues.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import marsWeatherData from '../mars-weather';
+export const NegativeValues = () => {
+    const data = marsWeatherData.map((d) => ({
+        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
+        y: d.min_temp,
+    }));
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'bar-x',
+                    data: data,
+                    name: 'Min temperature',
+                },
+            ],
+        },
+        yAxis: [
+            {
+                title: {
+                    text: 'Min temperature',
+                },
+            },
+        ],
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Terrestrial date',
+            },
+            ticks: { pixelInterval: 200 },
+        },
+        title: {
+            text: 'Mars weather',
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/examples/bar-y/NegativeValues.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NegativeValues: () => React.JSX.Element;

package/build/plugins/d3/examples/bar-y/NegativeValues.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import marsWeatherData from '../mars-weather';
+export const NegativeValues = () => {
+    const data = marsWeatherData.map((d) => ({
+        y: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
+        x: d.min_temp,
+    }));
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'bar-y',
+                    data: data,
+                    name: 'Min temperature',
+                },
+            ],
+        },
+        xAxis: {
+            title: {
+                text: 'Min temperature',
+            },
+        },
+        yAxis: [
+            {
+                type: 'datetime',
+                title: {
+                    text: 'Terrestrial date',
+                },
+            },
+        ],
+        title: {
+            text: 'Mars weather',
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/renderer/components/AxisX.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { ChartScale, PreparedAxis } from '../hooks';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../hooks';
 type Props = {
     axis: PreparedAxis;
     width: number;
     height: number;
     scale: ChartScale;
+    split: PreparedSplit;
 };
 export declare const AxisX: React.NamedExoticComponent<Props>;
 export {};

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

@@ -18,16 +18,26 @@ function getLabelFormatter({ axis, scale }) {
         });
     };
 }
-export const AxisX = React.memo(function AxisX({ axis, width, height, scale }) {
+export const AxisX = React.memo(function AxisX(props) {
+    const { axis, width, height: totalHeight, scale, split } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
+        let tickItems = [];
+        if (axis.grid.enabled) {
+            tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
+                var _a, _b;
+                const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+                const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
+                return [-top, -(top + height)];
+            });
+        }
         const xAxisGenerator = axisBottom({
             scale: scale,
             ticks: {
-                size: axis.grid.enabled ? height * -1 : 0,
+                items: tickItems,
                 labelFormat: getLabelFormatter({ axis, scale }),
                 labelsPaddings: axis.labels.padding,
                 labelsMargin: axis.labels.margin,
@@ -59,6 +69,6 @@ export const AxisX = React.memo(function AxisX({ axis, width, height, scale }) {
                 .text(axis.title.text)
                 .call(setEllipsisForOverflowText, width);
         }
-    }, [axis, width, height, scale]);
+    }, [axis, width, totalHeight, scale, split]);
     return React.createElement("g", { ref: ref });
 });

package/build/plugins/d3/renderer/components/AxisY.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { ChartScale, PreparedAxis } from '../hooks';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../hooks';
 type Props = {
-    axises: PreparedAxis[];
+    axes: PreparedAxis[];
     scale: ChartScale[];
     width: number;
     height: number;
+    split: PreparedSplit;
 };
-export declare const AxisY: ({ axises, width, height, scale }: Props) => React.JSX.Element;
+export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { calculateCos, calculateSin, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getTicksCount, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, } from '../utils';
+import { calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getClosestPointsRange, getScaleTicks, getTicksCount, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, } from '../utils';
 const b = block('d3-axis');
 function transformLabel(args) {
     const { node, axis } = args;
@@ -51,7 +51,9 @@ function getAxisGenerator(args) {
     }
     return axisGenerator;
 }
-export const AxisY = ({ axises, width, height, scale }) => {
+export const AxisY = (props) => {
+    const { axes, width, height: totalHeight, scale, split } = props;
+    const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -61,15 +63,22 @@ export const AxisY = ({ axises, width, height, scale }) => {
         svgElement.selectAll('*').remove();
         const axisSelection = svgElement
             .selectAll('axis')
-            .data(axises)
+            .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (_d, index) => (index === 0 ? '' : `translate(${width}px, 0)`));
+            .style('transform', (d) => {
+            var _a;
+            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            if (d.position === 'left') {
+                return `translate(0, ${top}px)`;
+            }
+            return `translate(${width}px, 0)`;
+        });
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
             const yAxisGenerator = getAxisGenerator({
-                axisGenerator: index === 0
+                axisGenerator: d.position === 'left'
                     ? axisLeft(seriesScale)
                     : axisRight(seriesScale),
                 preparedAxis: d,
@@ -136,13 +145,13 @@ export const AxisY = ({ axises, width, height, scale }) => {
             .attr('class', b('title'))
             .attr('text-anchor', 'middle')
             .attr('dy', (d) => -(d.title.margin + d.labels.margin + d.labels.width))
-            .attr('dx', (_d, index) => (index === 0 ? -height / 2 : height / 2))
+            .attr('dx', (d) => (d.position === 'left' ? -height / 2 : height / 2))
             .attr('font-size', (d) => d.title.style.fontSize)
-            .attr('transform', (_d, index) => (index === 0 ? 'rotate(-90)' : 'rotate(90)'))
+            .attr('transform', (d) => (d.position === 'left' ? 'rotate(-90)' : 'rotate(90)'))
             .text((d) => d.title.text)
             .each((_d, index, node) => {
             return setEllipsisForOverflowText(select(node[index]), height);
         });
-    }, [axises, width, height, scale]);
+    }, [axes, width, height, scale, split]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -7,10 +7,12 @@ import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShape
 import { getYAxisWidth } from '../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
+import { useSplit } from '../hooks/useSplit';
 import { getClosestPoints } from '../utils/get-closest-data';
 import { AxisX } from './AxisX';
 import { AxisY } from './AxisY';
 import { Legend } from './Legend';
+import { PlotTitle } from './PlotTitle';
 import { Title } from './Title';
 import { Tooltip } from './Tooltip';
 import './styles.css';
@@ -27,7 +29,10 @@ export const Chart = (props) => {
         data,
     });
     const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
-    const yAxis = React.useMemo(() => getPreparedYAxis({ series: data.series.data, yAxis: data.yAxis }), [data, width]);
+    const yAxis = React.useMemo(() => getPreparedYAxis({
+        series: data.series.data,
+        yAxis: data.yAxis,
+    }), [data]);
     const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
         chartWidth: width,
         chartHeight: height,
@@ -45,12 +50,14 @@ export const Chart = (props) => {
         preparedYAxis: yAxis,
         preparedSeries: preparedSeries,
     });
+    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
         series: preparedSeries,
         xAxis,
         yAxis,
+        split: preparedSplit,
     });
     const { shapes, shapesData } = useShapes({
         boundsWidth,
@@ -62,6 +69,7 @@ export const Chart = (props) => {
         xScale,
         yAxis,
         yScale,
+        split: preparedSplit,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     React.useEffect(() => {
@@ -97,11 +105,14 @@ export const Chart = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave },
             title && React.createElement(Title, Object.assign({}, title, { 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(',')})` },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
+                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));

package/build/plugins/d3/renderer/components/PlotTitle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PreparedPlotTitle } from '../hooks/useSplit/types';
+type Props = {
+    title?: PreparedPlotTitle;
+};
+export declare const PlotTitle: (props: Props) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { block } from '../../../../utils/cn';
+const b = block('d3-plot-title');
+export const PlotTitle = (props) => {
+    const { title } = props;
+    if (!title) {
+        return null;
+    }
+    const { x, y, text, style, height } = title;
+    return (React.createElement("text", { className: b(), dx: x, dy: y, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
+        React.createElement("tspan", null, text)));
+};

package/build/plugins/d3/renderer/components/styles.css

@@ -11,7 +11,7 @@
   alignment-baseline: after-edge;
 }
 
-.chartkit-d3-axis .tick line {
+.chartkit-d3-axis .tick line, .chartkit-d3-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
 
@@ -79,6 +79,12 @@
   fill: var(--g-color-text-primary);
 }
 
+.chartkit-d3-plot-title {
+  font-size: var(--g-text-subheader-3-font-size);
+  font-weight: var(--g-text-subheader-font-weight);
+  fill: var(--g-color-text-secondary);
+}
+
 .chartkit-d3-tooltip[class] {
   --g-popup-border-width: 0;
   pointer-events: none;

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

@@ -7,3 +7,4 @@ export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';
+export * from './useSplit/types';

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

@@ -7,3 +7,4 @@ export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';
+export * from './useSplit/types';

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

@@ -1,7 +1,8 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
 import { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
 import type { PreparedAxis } from '../useChartOptions/types';
-import { PreparedSeries } from '../useSeries/types';
+import type { PreparedSeries } from '../useSeries/types';
+import type { PreparedSplit } from '../useSplit/types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;
@@ -9,6 +10,7 @@ type Args = {
     series: PreparedSeries[];
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
+    split: PreparedSplit;
 };
 type ReturnValue = {
     xScale?: ChartScale;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { extent, scaleBand, scaleLinear, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
-import { getDataCategoryValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
@@ -28,9 +28,13 @@ export function createYScale(axis, series, boundsHeight) {
             const domain = getDomainDataYBySeries(series);
             const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
-                const [domainYMin, yMax] = extent(domain);
+                const [domainYMin, domainMax] = extent(domain);
                 const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                return scaleLinear().domain([yMinValue, yMax]).range(range).nice();
+                let yMaxValue = domainMax;
+                if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
+                    yMaxValue = Math.max(yMaxValue, 0);
+                }
+                return scaleLinear().domain([yMinValue, yMaxValue]).range(range).nice();
             }
             break;
         }
@@ -69,8 +73,11 @@ function calculateXAxisPadding(series) {
         switch (s.type) {
             case 'bar-y': {
                 // Since labels can be located to the right of the bar, need to add an additional space
-                const labelsMaxWidth = get(s, 'dataLabels.maxWidth', 0);
-                result = Math.max(result, labelsMaxWidth);
+                const inside = get(s, 'dataLabels.inside');
+                if (!inside) {
+                    const labelsMaxWidth = get(s, 'dataLabels.maxWidth', 0);
+                    result = Math.max(result, labelsMaxWidth);
+                }
                 break;
             }
         }
@@ -79,6 +86,7 @@ function calculateXAxisPadding(series) {
 }
 export function createXScale(axis, series, boundsWidth) {
     const xMin = get(axis, 'min');
+    const xMax = getDefaultMaxXAxisValue(series);
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const xCategories = get(axis, 'categories');
     const xTimestamps = get(axis, 'timestamps');
@@ -89,9 +97,10 @@ export function createXScale(axis, series, boundsWidth) {
         case 'linear': {
             const domain = getDomainDataXBySeries(series);
             if (isNumericalArrayData(domain)) {
-                const [domainXMin, xMax] = extent(domain);
+                const [domainXMin, domainXMax] = extent(domain);
                 const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
-                return scaleLinear().domain([xMinValue, xMax]).range(xRange).nice();
+                const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
+                return scaleLinear().domain([xMinValue, xMaxValue]).range(xRange).nice();
             }
             break;
         }
@@ -128,7 +137,7 @@ export function createXScale(axis, series, boundsWidth) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
@@ -141,7 +150,8 @@ const createScales = (args) => {
                 return seriesAxisIndex === index;
             });
             const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
-            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, boundsHeight);
+            const axisHeight = getAxisHeight({ boundsHeight, split });
+            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, axisHeight);
         }),
     };
 };
@@ -149,15 +159,21 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
-    const scales = React.useMemo(() => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    return React.useMemo(() => {
         let xScale;
         let yScale;
         const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
         if (hasAxisRelatedSeries) {
-            ({ xScale, yScale } = createScales({ boundsWidth, boundsHeight, series, xAxis, yAxis }));
+            ({ xScale, yScale } = createScales({
+                boundsWidth,
+                boundsHeight,
+                series,
+                xAxis,
+                yAxis,
+                split,
+            }));
         }
         return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis]);
-    return scales;
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split]);
 };

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.js

@@ -16,6 +16,17 @@ export function getYAxisWidth(axis) {
     return result;
 }
 export function getWidthOccupiedByYAxis(args) {
-    const { preparedAxis = [] } = args;
-    return preparedAxis.reduce((sum, axis) => sum + getYAxisWidth(axis), 0);
+    const { preparedAxis } = args;
+    let leftAxisWidth = 0;
+    let rightAxisWidth = 0;
+    preparedAxis === null || preparedAxis === void 0 ? void 0 : preparedAxis.forEach((axis) => {
+        const axisWidth = getYAxisWidth(axis);
+        if (axis.position === 'right') {
+            rightAxisWidth = Math.max(rightAxisWidth, axisWidth);
+        }
+        else {
+            leftAxisWidth = Math.max(leftAxisWidth, axisWidth);
+        }
+    });
+    return leftAxisWidth + rightAxisWidth;
 }

package/build/plugins/d3/renderer/hooks/useChartOptions/types.d.ts

@@ -28,6 +28,7 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
         pixelInterval?: number;
     };
     position: 'left' | 'right' | 'top' | 'bottom';
+    plotIndex: number;
 };
 export type PreparedTitle = ChartKitWidgetData['title'] & {
     height: number;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.d.ts

@@ -1,7 +1,7 @@
-import type { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
+import type { ChartKitWidgetSeries, ChartKitWidgetXAxis } from '../../../../../types';
 import type { PreparedAxis } from './types';
 export declare const getPreparedXAxis: ({ xAxis, series, width, }: {
-    xAxis?: ChartKitWidgetAxis | undefined;
+    xAxis?: import("../../../../../types").ChartKitWidgetAxis | undefined;
     series: ChartKitWidgetSeries[];
     width: number;
 }) => PreparedAxis;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const scale = createXScale(axis, series, width);
@@ -36,6 +36,17 @@ function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };
 }
+function getAxisMin(axis, series) {
+    const min = axis === null || axis === void 0 ? void 0 : axis.min;
+    if (typeof min === 'undefined' &&
+        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_X_AXIS.includes(s.type)))) {
+        return series.reduce((minValue, s) => {
+            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'x', 0)), 0);
+            return Math.min(minValue, minYValue);
+        }, 0);
+    }
+    return min;
+}
 export const getPreparedXAxis = ({ xAxis, series, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
@@ -71,7 +82,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
                 ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
                 : 0,
         },
-        min: get(xAxis, 'min'),
+        min: getAxisMin(xAxis, series),
         maxPadding: get(xAxis, 'maxPadding', 0.01),
         grid: {
             enabled: get(xAxis, 'grid.enabled', true),
@@ -80,6 +91,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             pixelInterval: get(xAxis, 'ticks.pixelInterval'),
         },
         position: 'bottom',
+        plotIndex: 0,
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.d.ts

@@ -1,6 +1,6 @@
-import type { ChartKitWidgetData, ChartKitWidgetSeries } from '../../../../../types';
+import type { ChartKitWidgetSeries, ChartKitWidgetYAxis } from '../../../../../types';
 import type { PreparedAxis } from './types';
 export declare const getPreparedYAxis: ({ series, yAxis, }: {
     series: ChartKitWidgetSeries[];
-    yAxis: ChartKitWidgetData['yAxis'];
+    yAxis: ChartKitWidgetYAxis[] | undefined;
 }) => PreparedAxis[];