feat(heatmap): add rotation in heatmap debug state (#2594)

* feat(heatmap): add rotation in heatmap debug state * Update api.md file
elastic · Jan 29, 2025 · 9047bd2 · 9047bd2
1 parent 2d4b650
commit 9047bd2
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -993,6 +993,8 @@ export interface DebugStateAxis {
     // (undocumented)
     position: Position;
     // (undocumented)
+    rotation?: number;
+    // (undocumented)
     title?: string;
     // (undocumented)
     values: any[];

diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_debug_state.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_debug_state.ts
@@ -57,6 +57,7 @@ export const getDebugStateSelector = createCustomCachedSelector(
             // vertical lines
             gridlines: (heatmapViewModel?.gridLines?.x ?? []).map((line) => ({ x: line.x1, y: line.y2 })),
             ...(xAxisTitle ? { title: xAxisTitle } : {}),
+            rotation: heatmap.xAxisLabel.rotation,
           },
         ],
         y: [

diff --git a/packages/charts/src/state/types.ts b/packages/charts/src/state/types.ts
@@ -26,6 +26,7 @@ export interface DebugStateAxis {
     y: number;
     x: number;
   }[];
+  rotation?: number;
 }
 
 /** @public */

diff --git a/storybook/stories/heatmap/6_label_rotation.story.tsx b/storybook/stories/heatmap/6_label_rotation.story.tsx
@@ -33,6 +33,8 @@ export const Example: ChartsStory = (_, { title, description }) => {
   };
   const useCategoricalDataset = boolean('Use categorical data', false);
   const dataset = useCategoricalDataset ? ECOMMERCE_DATA : DATA_1.data;
+  const debugState = boolean('Enable debug state', true);
+
   return (
     <Chart title={title} description={description}>
       <Settings
@@ -42,6 +44,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         brushAxis="both"
         theme={{ heatmap }}
         baseTheme={useBaseTheme()}
+        debugState={debugState}
       />
       <Heatmap<{ x: number | string; y: string; value: number }>
         id="heatmap2"