[UIK-4320][d3-chart] added support for multiline tick labels (#2525)

<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

Added support for multiline ticks for chart axises.

## How has this been tested?

I've added a browser test.

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue).
- [x] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have updated the documentation accordingly.
- [x] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [x] I have added new tests on added of fixed functionality.

---------

Co-authored-by: Valeryia Zimnitskaya <[email protected]>
Co-authored-by: Julia Mnizhek <[email protected]>

Author: 3 people

semcore/d3-chart/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [16.3.0] - 2025-10-17
+
+### Added
+
+- New `multiline` property for `XAxis.Ticks/YAxis.Ticks` and `multilineXTicks/multilineYTicks` for `Chart`.
+
+### Fixed
+
+- Chart content remains visible after unchecking single legend item in Bar, Horizontal Bar, Histogram, and Stacked Horizontal Bar charts.
+
 ## [16.2.1] - 2025-10-17
 
 ### Fixed

semcore/d3-chart/__tests__/bar-chart.browser-test.tsx

@@ -297,4 +297,23 @@ test.describe('Bar chart', () => {
     await page.waitForTimeout(500);
     await expect(page).toHaveScreenshot();
   });
+
+  test('Verify multiline tick labels', async ({ page }) => {
+    const standPath = 'stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx';
+    const htmlContent = await e2eStandToHtml(standPath, 'en', {
+      data: [
+        { category: 'Google AI Mode 0 Top', bar: 2 },
+        { category: 'Google AI Mode 1 Top', bar: 5 },
+        { category: 'Google AI Mode 2 Top', bar: 7 },
+        { category: 'Google AI Mode 3 Top', bar: 4 },
+        { category: 'Google AI Mode 4 Top', bar: 8 },
+      ],
+      multilineXTicks: true,
+      marginX: 60,
+    });
+
+    await page.setContent(htmlContent);
+
+    await expect(page).toHaveScreenshot();
+  });
 });

semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/Bar-chart-Verify-multiline-tick-labels-1-chromium-linux.png

@@ -1,5 +1,5 @@
 import { Component, sstyled } from '@semcore/core';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import createElement from './createElement';
 import style from './style/axis.shadow.css';
@@ -186,6 +186,54 @@ function renderValue(value) {
   return value;
 }
 
+function splitTextByWidth(root, text, maxWidth) {
+  if (!text || !maxWidth || maxWidth <= 0) return [];
+
+  const words = text.split(/\s+/).filter((word) => word.length > 0);
+  if (words.length === 0) return [];
+
+  const lines = [];
+  let currentLine = words[0];
+
+  for (let i = 1; i < words.length; i++) {
+    const testLine = `${currentLine} ${words[i]}`.trim();
+    const testWidth = measureTextWidth(root, testLine);
+
+    if (testWidth <= maxWidth) {
+      currentLine = testLine;
+    } else {
+      if (currentLine) {
+        lines.push(currentLine);
+      }
+
+      currentLine = words[i];
+
+      if (measureTextWidth(root, currentLine) > maxWidth) {
+        lines.push(currentLine);
+        currentLine = '';
+      }
+    }
+  }
+
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return lines;
+}
+
+function measureTextWidth(rootRef, text, fontSize = 12) {
+  const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  textEl.setAttribute('font-size', fontSize);
+  textEl.setAttribute('visibility', 'hidden');
+  textEl.textContent = text;
+
+  rootRef.appendChild(textEl);
+  const width = textEl.getComputedTextLength();
+  rootRef.removeChild(textEl);
+  return width;
+}
+
 class AxisRoot extends Component {
   static displayName = 'Axis';
 
@@ -246,8 +294,31 @@ function Ticks(props) {
     dataHintsHandler,
     children,
     childrenPosition = 'inside',
+    rootRef,
+    multiline,
   } = props;
 
+  const [ticksState, setTicksState] = useState([]);
+
+  useEffect(() => {
+    const tickBandwidth = scale[indexScale]?.bandwidth?.();
+
+    const ticksWithLines = ticks.map((tick) => {
+      let lines = [];
+
+      if (typeof tick === 'string' && multiline) {
+        lines = splitTextByWidth(rootRef.current, tick, tickBandwidth);
+      }
+
+      return {
+        tick,
+        lines,
+      };
+    });
+
+    setTicksState(ticksWithLines);
+  }, [ticks, multiline]);
+
   const pos = MAP_POSITION_TICK[position] ?? MAP_POSITION_TICK[MAP_INDEX_SCALE_SYMBOL[indexScale]];
   const positionClass = MAP_POSITION_TICK[position] ? position : `custom_${indexScale}`;
 
@@ -263,7 +334,7 @@ function Ticks(props) {
     }
   }
 
-  return ticks.map((value, i) => {
+  return ticksState.map(({ tick: value, lines }, i) => {
     const displayValue = typeof children === 'function' ? undefined : renderValue(value);
 
     return sstyled(styles)(
@@ -277,9 +348,14 @@ function Ticks(props) {
         index={i}
         position={positionClass}
         hide={hide}
+        multiline={multiline}
         {...pos(scale, value, position)}
       >
-        {displayValue}
+        { lines.length > 1
+          ? lines.map((line, lineIndex) => (
+              <tspan key={line} {...pos(scale, value, position)} dy={lineIndex * 15}>{line}</tspan>
+            ))
+          : displayValue}
       </STick>,
     );
   });

semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/Bar-chart-Verify-multiline-tick-labels-1-firefox-linux.png

@@ -401,8 +401,16 @@ export abstract class AbstractChart<
   }
 
   protected renderAxis(): React.ReactNode {
-    const { invertAxis, showXAxis, showYAxis, data, axisXValueFormatter, axisYValueFormatter } =
-      this.asProps;
+    const {
+      invertAxis,
+      showXAxis,
+      showYAxis,
+      data,
+      axisXValueFormatter,
+      axisYValueFormatter,
+      multilineXTicks,
+      multilineYTicks,
+    } = this.asProps;
 
     if (!Array.isArray(data)) {
       return null;
@@ -424,10 +432,10 @@ export abstract class AbstractChart<
           <YAxis>
             {yTicks
               ? (
-                  <YAxis.Ticks ticks={yTicks}>{childrenY}</YAxis.Ticks>
+                  <YAxis.Ticks multiline={multilineYTicks} ticks={yTicks}>{childrenY}</YAxis.Ticks>
                 )
               : (
-                  <YAxis.Ticks>{childrenY}</YAxis.Ticks>
+                  <YAxis.Ticks multiline={multilineYTicks}>{childrenY}</YAxis.Ticks>
                 )}
             {invertAxis !== true && (yTicks ? <YAxis.Grid ticks={yTicks} /> : <YAxis.Grid />)}
           </YAxis>
@@ -437,10 +445,10 @@ export abstract class AbstractChart<
           <XAxis>
             {xTicks
               ? (
-                  <XAxis.Ticks ticks={xTicks}>{childrenX}</XAxis.Ticks>
+                  <XAxis.Ticks multiline={multilineXTicks} ticks={xTicks}>{childrenX}</XAxis.Ticks>
                 )
               : (
-                  <XAxis.Ticks>{childrenX}</XAxis.Ticks>
+                  <XAxis.Ticks multiline={multilineXTicks}>{childrenX}</XAxis.Ticks>
                 )}
             {invertAxis === true && (xTicks ? <XAxis.Grid ticks={xTicks} /> : <XAxis.Grid />)}
           </XAxis>