test: split knobs in axis tick truncation story

Author: biamalveiro

storybook/stories/axes/16_tick_label_truncation.story.tsx

@@ -13,10 +13,14 @@ import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/
 
 import type { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
+import { customKnobs } from '../utils/knobs';
 
 const data = [
-  { x: 'com.example.something.host.23', y: 12 },
-  { x: 'com.example.something.host.11', y: 8 },
+  {
+    x: 'com.example.something.host.23com.example.something.com.example.something',
+    y: 12,
+  },
+  { x: 'com.example.something.host.11com.example.something.host.11', y: 8 },
   { x: 'com.example.something.host.07', y: 17 },
   { x: 'com.example.something.host.02', y: 5 },
   { x: 'com.example.something.worker.04', y: 9 },
@@ -37,20 +41,35 @@ function parseThemeSize(raw: string): number | string | undefined {
 }
 
 export const Example: ChartsStory = (_, { title, description }) => {
-  const maxLength = parseThemeSize(text('maxLength', '120'));
-  const truncate = select<EllipsisPosition>('truncate', { end: 'end', start: 'start', middle: 'middle' }, 'middle');
-  const rotation = select('Chart rotation', { '0°': 0, '90°': 90, '-90°': -90 }, 90);
-
-  const tickLabel = {
-    ...(maxLength !== undefined ? { maxLength } : {}),
-    truncate,
-  };
+  const xMaxLength = parseThemeSize(text('Max length (X)', ''));
+  const xTruncate = select<EllipsisPosition>(
+    'Truncate (X)',
+    { end: 'end', start: 'start', middle: 'middle' },
+    'middle',
+  );
+  const yMaxLength = parseThemeSize(text('Max length (Y)', '120'));
+  const yTruncate = select<EllipsisPosition>(
+    'Truncate (Y)',
+    { end: 'end', start: 'start', middle: 'middle' },
+    'middle',
+  );
+  const rotation = customKnobs.enum.rotation('Chart rotation', 90);
 
   return (
     <Chart title={title} description={description}>
       <Settings baseTheme={useBaseTheme()} rotation={rotation} />
-      <Axis id="bottom" position={Position.Bottom} title="Count" style={{ tickLabel }} />
-      <Axis id="left" position={Position.Left} title="Team" style={{ tickLabel }} />
+      <Axis
+        id="bottom"
+        position={Position.Bottom}
+        title="Count"
+        style={{ tickLabel: { maxLength: xMaxLength, truncate: xTruncate } }}
+      />
+      <Axis
+        id="left"
+        position={Position.Left}
+        title="Team"
+        style={{ tickLabel: { maxLength: yMaxLength, truncate: yTruncate } }}
+      />
 
       <BarSeries
         id="bars"

storybook/stories/utils/knobs/special_enums.ts

@@ -17,7 +17,7 @@ import { getMultiSelectKnob, getNumberSelectKnob } from './custom';
 /**
  * Negative numbers do not behave well with vrt slugified naming
  */
-const getRotationKnob = (name = 'chartRotation') =>
+const getRotationKnob = (name = 'chartRotation', value: Rotation = 0) =>
   getNumberSelectKnob<Rotation>(
     name,
     {
@@ -26,7 +26,7 @@ const getRotationKnob = (name = 'chartRotation') =>
       '-90 deg': -90,
       '180 deg': 180,
     },
-    0,
+    value,
   );
 
 const boundaryMap: Record<string, TooltipProps['boundary'] | null> = {