Use legacy margings for heatmap stories

elastic · Jan 16, 2025 · ee3934d · ee3934d
1 parent 1491566
commit ee3934d
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 32 deletions.
diff --git a/storybook/stories/components/tooltip/12_heatmap.story.tsx b/storybook/stories/components/tooltip/12_heatmap.story.tsx
@@ -9,7 +9,7 @@
 import { action } from '@storybook/addon-actions';
 import React, { ReactNode } from 'react';
 
-import { Chart, DEFAULT_CHART_MARGINS, Heatmap, Settings, Tooltip, TooltipValue } from '@elastic/charts';
+import { Chart, Heatmap, Settings, Tooltip, TooltipValue } from '@elastic/charts';
 import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames';
 
 import { ChartsStory } from '../../../types';
@@ -40,7 +40,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
       <Settings
         onElementClick={action('onElementClick')}
         brushAxis="both"
-        baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+        baseTheme={useBaseTheme()}
         theme={{
           heatmap: {
             grid: {

diff --git a/storybook/stories/heatmap/1_basic.story.tsx b/storybook/stories/heatmap/1_basic.story.tsx
@@ -12,7 +12,6 @@ import React, { useMemo } from 'react';
 
 import {
   Chart,
-  DEFAULT_CHART_MARGINS,
   Heatmap,
   HeatmapStyle,
   niceTimeFormatter,
@@ -84,7 +83,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         xDomain={{ min: 1572825600000, max: 1572912000000 }}
         debugState={debugState}
         theme={{ heatmap }}
-        baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+        baseTheme={useBaseTheme()}
         onBrushEnd={onBrushEnd}
       />
       <Heatmap

diff --git a/storybook/stories/heatmap/2_categorical.story.tsx b/storybook/stories/heatmap/2_categorical.story.tsx
@@ -10,7 +10,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Chart, DEFAULT_CHART_MARGINS, Heatmap, Settings } from '@elastic/charts';
+import { Chart, Heatmap, Settings } from '@elastic/charts';
 import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames';
 
 import { ChartsStory } from '../../types';
@@ -36,7 +36,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         showLegend
         legendPosition="right"
         brushAxis="both"
-        baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+        baseTheme={useBaseTheme()}
         theme={{
           heatmap: {
             grid: {

diff --git a/storybook/stories/heatmap/3_time.story.tsx b/storybook/stories/heatmap/3_time.story.tsx
@@ -10,15 +10,7 @@ import { number } from '@storybook/addon-knobs';
 import { DateTime } from 'luxon';
 import React, { useMemo } from 'react';
 
-import {
-  Chart,
-  Heatmap,
-  RecursivePartial,
-  ScaleType,
-  Settings,
-  HeatmapStyle,
-  DEFAULT_CHART_MARGINS,
-} from '@elastic/charts';
+import { Chart, Heatmap, RecursivePartial, ScaleType, Settings, HeatmapStyle } from '@elastic/charts';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
 import { ChartsStory } from '../../types';
@@ -94,7 +86,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
             max: end.toMillis() + endTimeOffset,
           }}
           theme={{ heatmap }}
-          baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+          baseTheme={useBaseTheme()}
         />
         <Heatmap
           id="heatmap1"

diff --git a/storybook/stories/heatmap/4_test_time_snap.story.tsx b/storybook/stories/heatmap/4_test_time_snap.story.tsx
@@ -11,7 +11,7 @@ import { extent } from 'd3-array';
 import { DateTime } from 'luxon';
 import React from 'react';
 
-import { Chart, DEFAULT_CHART_MARGINS, Heatmap, PartialTheme, ScaleType, Settings } from '@elastic/charts';
+import { Chart, Heatmap, PartialTheme, ScaleType, Settings } from '@elastic/charts';
 
 import { ColorBand } from '../../../packages/charts/src/chart_types/heatmap/specs/heatmap';
 import {
@@ -81,11 +81,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         {`${dataset.interval.type}: ${dataset.interval.value}${dataset.interval.unit} points:${dataset.data.length}`}
       </div>
       <Chart title={title} description={description} className="story-chart">
-        <Settings
-          theme={theme}
-          baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
-          xDomain={dataset.domain}
-        />
+        <Settings theme={theme} baseTheme={useBaseTheme()} xDomain={dataset.domain} />
         <Heatmap
           id="heatmap1"
           colorScale={{

diff --git a/storybook/stories/heatmap/5_theming.story.tsx b/storybook/stories/heatmap/5_theming.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import {
   Chart,
-  DEFAULT_CHART_MARGINS,
   Heatmap,
   HeatmapStyle,
   Margins,
@@ -126,7 +125,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         xDomain={{ min: 1572868800000, max: 1572912000000, minInterval: 1800000 }}
         debugState={debugState}
         theme={{ axes, heatmap, chartMargins, chartPaddings }}
-        baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+        baseTheme={useBaseTheme()}
         debug={debug}
       />
       <Heatmap

diff --git a/storybook/stories/heatmap/6_label_rotation.story.tsx b/storybook/stories/heatmap/6_label_rotation.story.tsx
@@ -10,7 +10,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Chart, DEFAULT_CHART_MARGINS, Heatmap, HeatmapStyle, RecursivePartial, Settings } from '@elastic/charts';
+import { Chart, Heatmap, HeatmapStyle, RecursivePartial, Settings } from '@elastic/charts';
 
 import { ScaleType } from '../../../packages/charts/src/scales/constants';
 import { DATA_1, ECOMMERCE_DATA } from '../../../packages/charts/src/utils/data_samples/test_dataset_heatmap';
@@ -41,7 +41,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         legendPosition="right"
         brushAxis="both"
         theme={{ heatmap }}
-        baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+        baseTheme={useBaseTheme()}
       />
       <Heatmap<{ x: number | string; y: string; value: number }>
         id="heatmap2"

diff --git a/storybook/stories/heatmap/7_sorting.story.tsx b/storybook/stories/heatmap/7_sorting.story.tsx
@@ -10,7 +10,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Chart, DEFAULT_CHART_MARGINS, Heatmap, Predicate, ScaleType, Settings } from '@elastic/charts';
+import { Chart, Heatmap, Predicate, ScaleType, Settings } from '@elastic/charts';
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
@@ -24,7 +24,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
   return (
     <Chart title={title} description={description} size={[200, 200]}>
       <Settings
-        baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+        baseTheme={useBaseTheme()}
         onPointerUpdate={action('onPointerUpdate')}
         pointerUpdateTrigger="both"
         theme={{

diff --git a/storybook/stories/interactions/19_multi_chart_cursor_sync.story.tsx b/storybook/stories/interactions/19_multi_chart_cursor_sync.story.tsx
@@ -21,7 +21,6 @@ import {
   LineSeries,
   Heatmap,
   Tooltip,
-  DEFAULT_CHART_MARGINS,
 } from '@elastic/charts';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
@@ -83,7 +82,7 @@ export const Example: ChartsStory = () => {
       ref3.current.dispatchExternalPointerEvent(event);
     }
   };
-  const baseTheme = { ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS };
+  const baseTheme = useBaseTheme();
 
   return (
     <>

diff --git a/storybook/stories/small_multiples/9_heatmap.story.tsx b/storybook/stories/small_multiples/9_heatmap.story.tsx
@@ -22,7 +22,6 @@ import {
   Heatmap,
   SmallMultiplesStyle,
   Margins,
-  DEFAULT_CHART_MARGINS,
 } from '@elastic/charts';
 import { SeededDataGenerator, getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
@@ -161,7 +160,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         onRenderChange={getDebugStateLogger(debugState)}
         onElementClick={onElementClick}
         showLegend={showLegend}
-        baseTheme={{ ...useBaseTheme(), chartMargins: DEFAULT_CHART_MARGINS }}
+        baseTheme={useBaseTheme()}
         theme={{
           axes: {
             axisTitle: {