@gravity-ui/chartkit 5.6.0 → 5.7.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/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, 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.includes(s.type))) {
+                    yMaxValue = Math.max(yMaxValue, 0);
+                }
+                return scaleLinear().domain([yMinValue, yMaxValue]).range(range).nice();
             }
             break;
         }
@@ -79,6 +83,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 +94,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;
         }

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -24,8 +24,8 @@ const getAxisLabelMaxWidth = (args) => {
 };
 function getAxisMin(axis, series) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    const seriesWithVolume = ['bar-x', 'area', 'waterfall'];
-    if (typeof min === 'undefined' && (series === null || series === void 0 ? void 0 : series.some((s) => seriesWithVolume.includes(s.type)))) {
+    if (typeof min === 'undefined' &&
+        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME.includes(s.type)))) {
         return series.reduce((minValue, s) => {
             switch (s.type) {
                 case 'waterfall': {
@@ -33,7 +33,8 @@ function getAxisMin(axis, series) {
                     return Math.min(minValue, minSubTotal);
                 }
                 default: {
-                    return minValue;
+                    const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
+                    return Math.min(minValue, minYValue);
                 }
             }
         }, 0);

package/build/plugins/d3/renderer/hooks/useShapes/area/prepare-data.js

@@ -1,5 +1,5 @@
 import { group, sort } from 'd3';
-import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
     const text = String(point.data.label || point.data.y);
@@ -28,9 +28,12 @@ function getLabelData(point, series, xMax) {
     return labelData;
 }
 function getXValues(series, xAxis, xScale) {
+    const categories = xAxis.categories || [];
     const xValues = series.reduce((acc, s) => {
         s.data.forEach((d) => {
-            const key = String(d.x);
+            const key = String(xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x);
             if (!acc.has(key)) {
                 acc.set(key, getXValue({ point: d, xAxis, xScale }));
             }
@@ -38,7 +41,7 @@ function getXValues(series, xAxis, xScale) {
         return acc;
     }, new Map());
     if (xAxis.type === 'category') {
-        return (xAxis.categories || []).reduce((acc, category) => {
+        return categories.reduce((acc, category) => {
             const xValue = xValues.get(category);
             if (typeof xValue === 'number') {
                 acc.push([category, xValue]);
@@ -62,9 +65,16 @@ export const prepareAreaData = (args) => {
             const yAxisIndex = s.yAxis;
             const seriesYAxis = yAxis[yAxisIndex];
             const seriesYScale = yScale[yAxisIndex];
-            const [yMin, _yMax] = seriesYScale.range();
+            const yMin = getYValue({ point: { y: 0 }, yAxis: seriesYAxis, yScale: seriesYScale });
             const seriesData = s.data.reduce((m, d) => {
-                return m.set(String(d.x), d);
+                const key = String(xAxis.type === 'category'
+                    ? getDataCategoryValue({
+                        axisDirection: 'x',
+                        categories: xAxis.categories || [],
+                        data: d,
+                    })
+                    : d.x);
+                return m.set(key, d);
             }, new Map());
             const points = xValues.reduce((pointsAcc, [x, xValue]) => {
                 const accumulatedYValue = accumulatedYValues.get(x) || 0;

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

@@ -110,11 +110,13 @@ export const prepareBarXData = (args) => {
                     xCenter = xLinearScale(Number(xValue));
                 }
                 const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const y = seriesYScale(yValue.data.y);
-                const height = plotHeight - y;
+                const yDataValue = yValue.data.y;
+                const y = seriesYScale(yDataValue);
+                const base = seriesYScale(0);
+                const height = yDataValue > 0 ? base - y : y - base;
                 const barData = {
                     x,
-                    y: y - stackHeight,
+                    y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
                     width: rectWidth,
                     height,
                     opacity: get(yValue.data, 'opacity', null),

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/prepare-data.js

@@ -81,7 +81,8 @@ export const prepareBarYData = (args) => {
         const stacks = Object.values(val);
         const currentBarHeight = barHeight * stacks.length + rectGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
-            let stackSum = 0;
+            const base = xLinearScale(0);
+            let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
@@ -97,9 +98,10 @@ export const prepareBarYData = (args) => {
                     center = scale(Number(yValue));
                 }
                 const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
-                const width = xLinearScale(data.x);
+                const xValue = Number(data.x);
+                const width = xValue > 0 ? xLinearScale(xValue) - base : base - xLinearScale(xValue);
                 stackItems.push({
-                    x: stackSum,
+                    x: xValue > 0 ? stackSum : stackSum - width,
                     y,
                     width,
                     height: barHeight,

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

@@ -8,6 +8,7 @@ export * from './axis';
 export * from './labels';
 export * from './symbol';
 export * from './series';
+export declare const CHART_SERIES_WITH_VOLUME: ChartKitWidgetSeries['type'][];
 export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
@@ -39,6 +40,7 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
     }[];
 };
 export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => number[];
+export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare const getDomainDataYBySeries: (series: UnknownSeries[]) => unknown[];
 export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
 export declare const getOnlyVisibleSeries: <T extends {

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

@@ -15,6 +15,11 @@ export * from './labels';
 export * from './symbol';
 export * from './series';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
+export const CHART_SERIES_WITH_VOLUME = [
+    'bar-x',
+    'area',
+    'waterfall',
+];
 /**
  * Checks whether the series should be drawn with axes.
  *
@@ -41,6 +46,12 @@ export const getDomainDataXBySeries = (series) => {
         return acc;
     }, []);
 };
+export function getDefaultMaxXAxisValue(series) {
+    if (series.some((s) => s.type === 'bar-y')) {
+        return 0;
+    }
+    return undefined;
+}
 export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
     return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {

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

@@ -1328,8 +1328,8 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     // Callback setExtremes used because of it obligatory invocation on every zoom event
                     // setTimeout used because of absence resetZoomButton node in dom on first zoom event
                     setTimeout(() => {
-                        var _a;
-                        const text = (_a = this.chart.resetZoomButton) === null || _a === void 0 ? void 0 : _a.text;
+                        var _a, _b;
+                        const text = (_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resetZoomButton) === null || _b === void 0 ? void 0 : _b.text;
                         if (text) {
                             text.translate(0, -6);
                         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",