@gravity-ui/charts 1.34.2 → 1.34.3

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/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/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.3",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",