@gravity-ui/charts 1.34.2 → 1.34.4

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

@@ -95,8 +95,34 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
         const ticks = [];
         const getTextSize = getTextSizeFn({ style: axis.labels.style });
         const labelLineHeight = (await getTextSize('Tmp')).height;
-        const values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
-        const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+        let values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
+        let tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+        if (axis.labels.enabled &&
+            axis.labels.rotation === 0 &&
+            !axis.labels.html &&
+            axis.type === 'datetime' &&
+            values.length > 1) {
+            let maxLabelWidth = 0;
+            for (let i = 0; i < values.length; i++) {
+                const label = formatAxisTickLabel({
+                    value: values[i].value,
+                    axis,
+                    step: tickStep,
+                });
+                const size = await getTextSize(label);
+                maxLabelWidth = Math.max(maxLabelWidth, size.width);
+            }
+            const currentSpacing = Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2;
+            if (maxLabelWidth > currentSpacing) {
+                values = getXAxisTickValues({
+                    scale,
+                    axis,
+                    labelLineHeight: maxLabelWidth,
+                    series,
+                });
+                tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+            }
+        }
         const labelMaxWidth = values.length > 1
             ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2
             : axisWidth;

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

@@ -37,7 +37,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
         }
         return false;
     };
-    const autoRotation = (_a = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.autoRotation) !== null && _a !== void 0 ? _a : true;
+    const autoRotation = (_a = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.autoRotation) !== null && _a !== void 0 ? _a : axis.type !== 'datetime';
     const overlapping = axis.labels.html ? false : await hasOverlappingLabels();
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
     const rotation = axis.labels.html ? 0 : ((_b = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.rotation) !== null && _b !== void 0 ? _b : defaultRotation);

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -22,7 +22,7 @@ async function prepareDataLabels(series) {
     const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
     const html = get(series, 'dataLabels.html', false);
     const labels = enabled
-        ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.label || d.x }, series.dataLabels)))
+        ? series.data.map((d) => { var _a; return getFormattedValue(Object.assign({ value: (_a = d.label) !== null && _a !== void 0 ? _a : d.x }, series.dataLabels)); })
         : [];
     const { maxHeight = 0, maxWidth = 0 } = await getLabelsSize({
         labels,

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -28,6 +28,7 @@ function getXValues(series, xAxis, xScale) {
     return Array.from(xValues);
 }
 async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
+    var _a;
     const svgLabels = [];
     const htmlLabels = [];
     const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
@@ -36,7 +37,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
         if (point.y === null) {
             continue;
         }
-        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
+        const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
         if (series.dataLabels.html) {
             const size = await getLabelsSize({
                 labels: [text],

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -6,10 +6,11 @@ import { getSeriesStackId } from '../../useSeries/utils';
 import { getBarXLayout } from '../../utils/bar-x';
 const isSeriesDataValid = (d) => d.y !== null;
 async function getLabelData(d) {
+    var _a;
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.y }, d.series.dataLabels));
+    const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const html = d.series.dataLabels.html;
     const { maxHeight: height, maxWidth: width } = await getLabelsSize({

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -4,7 +4,7 @@ import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSiz
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
 export async function prepareBarYData(args) {
-    var _a;
+    var _a, _b;
     const { boundsHeight, boundsWidth, series, seriesOptions, xAxis, yAxis, xScale, yScale: [yScale], } = args;
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
@@ -139,7 +139,7 @@ export async function prepareBarYData(args) {
         const dataLabels = prepared.series.dataLabels;
         if (dataLabels.enabled) {
             const data = prepared.data;
-            const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
+            const content = getFormattedValue(Object.assign({ value: (_a = data.label) !== null && _a !== void 0 ? _a : data.x }, dataLabels));
             const y = prepared.y + prepared.height / 2;
             if (dataLabels.html) {
                 const { maxHeight: height, maxWidth: width } = await getLabelsSize({
@@ -195,7 +195,7 @@ export async function prepareBarYData(args) {
             }
         }
     }
-    const allowOverlap = (_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap;
+    const allowOverlap = (_b = result[0]) === null || _b === void 0 ? void 0 : _b.series.dataLabels.allowOverlap;
     if (labels.length && !allowOverlap) {
         labels = filterOverlappingLabels(labels);
     }

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -2,7 +2,8 @@ import { getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
-    const content = String(point.data.label || point.data.y);
+    var _a;
+    const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
     const size = await getLabelsSize({ labels: [content], html: true });
     return {
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
@@ -13,7 +14,7 @@ async function getHtmlLabel(point, series, xMax) {
     };
 }
 export const prepareLineData = async (args) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
@@ -60,7 +61,7 @@ export const prepareLineData = async (args) => {
                 for (let index = 0; index < points.length; index++) {
                     const point = points[index];
                     if (point.y !== null && point.x !== null) {
-                        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, s.dataLabels));
+                        const text = getFormattedValue(Object.assign({ value: (_b = point.data.label) !== null && _b !== void 0 ? _b : point.data.y }, s.dataLabels));
                         const labelSize = await getTextSize(text);
                         const style = s.dataLabels.style;
                         const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
@@ -105,11 +106,11 @@ export const prepareLineData = async (args) => {
             id: s.id,
             htmlElements,
             color: s.color,
-            lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
+            lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
             linejoin: s.linejoin,
-            opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
+            opacity: (_d = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _d !== void 0 ? _d : s.opacity,
         };
         acc.push(result);
     }

package/dist/cjs/hooks/useShapes/pie/prepare-data.js

@@ -82,6 +82,7 @@ export function preparePieData(args) {
         return data;
     };
     const getLabels = async ({ series }) => {
+        var _a;
         const { dataLabels } = series[0];
         if (!dataLabels.enabled) {
             return {};
@@ -90,7 +91,7 @@ export function preparePieData(args) {
         const acc = {};
         for (let i = 0; i < series.length; i++) {
             const d = series[i];
-            const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
+            const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
             let labelWidth = 0;
             let labelHeight = 0;
             if (dataLabels.html) {

package/dist/cjs/types/chart/axis.d.ts

@@ -19,11 +19,14 @@ export interface ChartAxisLabels {
     dateFormat?: string;
     numberFormat?: FormatNumberOptions;
     style?: Partial<BaseTextStyle>;
-    /** For horizontal axes, enable label rotation to prevent overlapping labels.
+    /**
+     * For horizontal axes, enable label rotation to prevent overlapping labels.
      * If there is enough space, labels are not rotated.
      * As the chart gets narrower, it will start rotating the labels -45 degrees.
      *
      * Does not apply to html labels.
+     *
+     * @default true for all axis types except `datetime` (defaults to false)
      */
     autoRotation?: boolean;
     /** Rotation of the labels in degrees.

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

@@ -95,8 +95,34 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
         const ticks = [];
         const getTextSize = getTextSizeFn({ style: axis.labels.style });
         const labelLineHeight = (await getTextSize('Tmp')).height;
-        const values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
-        const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+        let values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
+        let tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+        if (axis.labels.enabled &&
+            axis.labels.rotation === 0 &&
+            !axis.labels.html &&
+            axis.type === 'datetime' &&
+            values.length > 1) {
+            let maxLabelWidth = 0;
+            for (let i = 0; i < values.length; i++) {
+                const label = formatAxisTickLabel({
+                    value: values[i].value,
+                    axis,
+                    step: tickStep,
+                });
+                const size = await getTextSize(label);
+                maxLabelWidth = Math.max(maxLabelWidth, size.width);
+            }
+            const currentSpacing = Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2;
+            if (maxLabelWidth > currentSpacing) {
+                values = getXAxisTickValues({
+                    scale,
+                    axis,
+                    labelLineHeight: maxLabelWidth,
+                    series,
+                });
+                tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+            }
+        }
         const labelMaxWidth = values.length > 1
             ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2
             : axisWidth;

package/dist/esm/hooks/useAxis/x-axis.js

@@ -37,7 +37,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
         }
         return false;
     };
-    const autoRotation = (_a = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.autoRotation) !== null && _a !== void 0 ? _a : true;
+    const autoRotation = (_a = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.autoRotation) !== null && _a !== void 0 ? _a : axis.type !== 'datetime';
     const overlapping = axis.labels.html ? false : await hasOverlappingLabels();
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
     const rotation = axis.labels.html ? 0 : ((_b = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.rotation) !== null && _b !== void 0 ? _b : defaultRotation);

package/dist/esm/hooks/useSeries/prepare-bar-y.js

@@ -22,7 +22,7 @@ async function prepareDataLabels(series) {
     const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
     const html = get(series, 'dataLabels.html', false);
     const labels = enabled
-        ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.label || d.x }, series.dataLabels)))
+        ? series.data.map((d) => { var _a; return getFormattedValue(Object.assign({ value: (_a = d.label) !== null && _a !== void 0 ? _a : d.x }, series.dataLabels)); })
         : [];
     const { maxHeight = 0, maxWidth = 0 } = await getLabelsSize({
         labels,

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -28,6 +28,7 @@ function getXValues(series, xAxis, xScale) {
     return Array.from(xValues);
 }
 async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
+    var _a;
     const svgLabels = [];
     const htmlLabels = [];
     const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
@@ -36,7 +37,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
         if (point.y === null) {
             continue;
         }
-        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
+        const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
         if (series.dataLabels.html) {
             const size = await getLabelsSize({
                 labels: [text],

package/dist/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -6,10 +6,11 @@ import { getSeriesStackId } from '../../useSeries/utils';
 import { getBarXLayout } from '../../utils/bar-x';
 const isSeriesDataValid = (d) => d.y !== null;
 async function getLabelData(d) {
+    var _a;
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.y }, d.series.dataLabels));
+    const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const html = d.series.dataLabels.html;
     const { maxHeight: height, maxWidth: width } = await getLabelsSize({

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -4,7 +4,7 @@ import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSiz
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
 export async function prepareBarYData(args) {
-    var _a;
+    var _a, _b;
     const { boundsHeight, boundsWidth, series, seriesOptions, xAxis, yAxis, xScale, yScale: [yScale], } = args;
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
@@ -139,7 +139,7 @@ export async function prepareBarYData(args) {
         const dataLabels = prepared.series.dataLabels;
         if (dataLabels.enabled) {
             const data = prepared.data;
-            const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
+            const content = getFormattedValue(Object.assign({ value: (_a = data.label) !== null && _a !== void 0 ? _a : data.x }, dataLabels));
             const y = prepared.y + prepared.height / 2;
             if (dataLabels.html) {
                 const { maxHeight: height, maxWidth: width } = await getLabelsSize({
@@ -195,7 +195,7 @@ export async function prepareBarYData(args) {
             }
         }
     }
-    const allowOverlap = (_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap;
+    const allowOverlap = (_b = result[0]) === null || _b === void 0 ? void 0 : _b.series.dataLabels.allowOverlap;
     if (labels.length && !allowOverlap) {
         labels = filterOverlappingLabels(labels);
     }

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -2,7 +2,8 @@ import { getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
-    const content = String(point.data.label || point.data.y);
+    var _a;
+    const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
     const size = await getLabelsSize({ labels: [content], html: true });
     return {
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
@@ -13,7 +14,7 @@ async function getHtmlLabel(point, series, xMax) {
     };
 }
 export const prepareLineData = async (args) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
@@ -60,7 +61,7 @@ export const prepareLineData = async (args) => {
                 for (let index = 0; index < points.length; index++) {
                     const point = points[index];
                     if (point.y !== null && point.x !== null) {
-                        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, s.dataLabels));
+                        const text = getFormattedValue(Object.assign({ value: (_b = point.data.label) !== null && _b !== void 0 ? _b : point.data.y }, s.dataLabels));
                         const labelSize = await getTextSize(text);
                         const style = s.dataLabels.style;
                         const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
@@ -105,11 +106,11 @@ export const prepareLineData = async (args) => {
             id: s.id,
             htmlElements,
             color: s.color,
-            lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
+            lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
             linejoin: s.linejoin,
-            opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
+            opacity: (_d = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _d !== void 0 ? _d : s.opacity,
         };
         acc.push(result);
     }

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -82,6 +82,7 @@ export function preparePieData(args) {
         return data;
     };
     const getLabels = async ({ series }) => {
+        var _a;
         const { dataLabels } = series[0];
         if (!dataLabels.enabled) {
             return {};
@@ -90,7 +91,7 @@ export function preparePieData(args) {
         const acc = {};
         for (let i = 0; i < series.length; i++) {
             const d = series[i];
-            const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
+            const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
             let labelWidth = 0;
             let labelHeight = 0;
             if (dataLabels.html) {

package/dist/esm/types/chart/axis.d.ts

@@ -19,11 +19,14 @@ export interface ChartAxisLabels {
     dateFormat?: string;
     numberFormat?: FormatNumberOptions;
     style?: Partial<BaseTextStyle>;
-    /** For horizontal axes, enable label rotation to prevent overlapping labels.
+    /**
+     * For horizontal axes, enable label rotation to prevent overlapping labels.
      * If there is enough space, labels are not rotated.
      * As the chart gets narrower, it will start rotating the labels -45 degrees.
      *
      * Does not apply to html labels.
+     *
+     * @default true for all axis types except `datetime` (defaults to false)
      */
     autoRotation?: boolean;
     /** Rotation of the labels in degrees.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.34.2",
+  "version": "1.34.4",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",