refactor: remove yScaleToDataExtent option (opensearch-project#1146)

AMoo-Miki · May 28, 2021 · ea76be1 · ea76be1
1 parent 7163951
commit ea76be1
Show file tree

Hide file tree

Showing 15 changed files with 21 additions and 73 deletions.
diff --git a/packages/osd-charts/api/charts.api.md b/packages/osd-charts/api/charts.api.md
@@ -1693,8 +1693,6 @@ export interface SeriesScales {
     xNice?: boolean;
     xScaleType: XScaleType;
     yNice?: boolean;
-    // @deprecated
-    yScaleToDataExtent?: boolean;
     yScaleType: ScaleContinuousType;
 }
 

diff --git a/packages/osd-charts/docs/0-Intro/1-Overview.mdx b/packages/osd-charts/docs/0-Intro/1-Overview.mdx
@@ -187,11 +187,6 @@ export interface SeriesScales {
    * @default ScaleType.Linear
    */
   yScaleType: ScaleContinuousType;
-  /**
-   * if true, the min y value is set to the minimum domain value, 0 otherwise
-   * @default false
-   */
-  yScaleToDataExtent: boolean;
 }
 ```
 

diff --git a/packages/osd-charts/docs/1-Typesofchart/3-Stacked.mdx b/packages/osd-charts/docs/1-Typesofchart/3-Stacked.mdx
@@ -19,13 +19,13 @@ import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana
 
 <Meta title="Types of charts/Stacked Charts" />
 
-# Stacked charts 
-### Stacked line/bar/area charts include a stackAccessors prop within their seriesSpec. 
+# Stacked charts
+### Stacked line/bar/area charts include a stackAccessors prop within their seriesSpec.
 The stackAccessors prop is an array of fields that indicates the stack membership.
 ***
 
 
-## Stacked bar chart examples 
+## Stacked bar chart examples
 <Chart className={'story-chart'}>
   <Settings showLegend={true} legendPosition={Position.Right} />
   <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
@@ -56,7 +56,7 @@ The stackAccessors prop is an array of fields that indicates the stack membershi
   />
 </Chart>
 
-The code for the chart above can be found below. 
+The code for the chart above can be found below.
 <details>
 
 ```js
@@ -109,7 +109,7 @@ The code for the chart above can be found below.
   title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
   position={Position.Left}
   tickFormat={(d) => Number(d).toFixed(2)}
-  /> 
+  />
   <AreaSeries
   id={'1'}
   name={KIBANA_METRICS.metrics.kibana_os_load[2].metric.label}
@@ -159,7 +159,7 @@ The code for the chart above can be found below.
     title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
     position={Position.Left}
     tickFormat={(d) => Number(d).toFixed(2)}
-  /> 
+  />
   <AreaSeries
     id={'1'}
     name={KIBANA_METRICS.metrics.kibana_os_load[2].metric.label}
@@ -199,6 +199,7 @@ The code for the chart above can be found below.
   <Axis id={'bottom'} title={'timestamp per 1 minute'} position={Position.Bottom} showOverlappingTicks={true} tickFormat={timeFormatter('HH:mm')}/>
   <Axis
   id={'left'}
+  domain={{ fit: boolean('scale to extent', false) }}
   title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
   position={Position.Left}
   tickFormat={(d) => Number(d).toFixed(2)}
@@ -212,7 +213,6 @@ The code for the chart above can be found below.
   y0Accessors={[2]}
   data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
   stackAccessors={[0]}
-  yScaleToDataExtent={boolean('scale to extent', false)}
   />
   <AreaSeries
   id={'fixed band'}
@@ -223,7 +223,6 @@ The code for the chart above can be found below.
   y0Accessors={[2]}
   data={KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => [d[0], 20, 10])}
   stackAccessors={[0]}
-  yScaleToDataExtent={boolean('scale to extent', false)}
   />
 </Chart>
 
@@ -235,6 +234,7 @@ The code for the chart above can be found below.
   <Axis
     id={'left'}
     title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+    domain={{ fit: boolean('scale to extent', false) }}
     position={Position.Left}
     tickFormat={(d) => Number(d).toFixed(2)}
   />
@@ -247,7 +247,6 @@ The code for the chart above can be found below.
     y0Accessors={[2]}
     data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
     stackAccessors={[0]}
-    yScaleToDataExtent={boolean('scale to extent', false)}
   />
   <AreaSeries
     id={'fixed band'}
@@ -258,7 +257,6 @@ The code for the chart above can be found below.
     y0Accessors={[2]}
     data={KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => [d[0], 20, 10])}
     stackAccessors={[0]}
-    yScaleToDataExtent={boolean('scale to extent', false)}
   />
 </Chart>
 ```
@@ -290,7 +288,6 @@ The code for the chart above can be found below.
       [8, 2],
       [9, 1],
     ]}
-    yScaleToDataExtent={false}
   />
   <AreaSeries
     id={'stacked area 2'}
@@ -310,7 +307,6 @@ The code for the chart above can be found below.
       [8, 2],
       [9, 4],
     ]}
-    yScaleToDataExtent={false}
   />
   <AreaSeries
     id={'non stacked area'}
@@ -329,7 +325,6 @@ The code for the chart above can be found below.
       [8, 6],
       [9, 7],
     ]}
-    yScaleToDataExtent={false}
   />
 </Chart>
 
@@ -362,7 +357,6 @@ The code for the chart above can be found below.
       [8, 2],
       [9, 1],
     ]}
-    yScaleToDataExtent={false}
   />
   <AreaSeries
     id={'stacked area 2'}
@@ -382,7 +376,6 @@ The code for the chart above can be found below.
       [8, 2],
       [9, 4],
     ]}
-    yScaleToDataExtent={false}
   />
   <AreaSeries
     id={'non stacked area'}
@@ -401,17 +394,16 @@ The code for the chart above can be found below.
       [8, 6],
       [9, 7],
     ]}
-    yScaleToDataExtent={false}
   />
 </Chart>
 ```
 </details>
 
 ***
 
-## Stacked line charts 
+## Stacked line charts
 
-This chart shows multiple line series with an axis and legend. 
+This chart shows multiple line series with an axis and legend.
 
 <Chart className={'story-chart'}>
   <Settings showLegend={true} legendPosition={Position.Right} />
@@ -456,7 +448,7 @@ This chart shows multiple line series with an axis and legend.
   />
 </Chart>
 
-Compare the above chart with the following below. The difference between the two charts is the addition of `stackAccessors={[0]}` in the `<LineSeries />` components. 
+Compare the above chart with the following below. The difference between the two charts is the addition of `stackAccessors={[0]}` in the `<LineSeries />` components.
 
 <Chart className={'story-chart'}>
     <Settings showLegend={true} legendPosition={Position.Right} />
@@ -553,4 +545,4 @@ Compare the above chart with the following below. The difference between the two
   />
 </Chart>
 ```
-</details>
+</details>
diff --git a/packages/osd-charts/docs/2-ChartPropTables/13-AreaProps.md b/packages/osd-charts/docs/2-ChartPropTables/13-AreaProps.md
@@ -1,5 +1,5 @@
-### Area component props table 
-Default props are set in the area_series.tsx file 
+### Area component props table
+Default props are set in the area_series.tsx file
 
 | Prop | Type | Default | Note |
 |:------|:------:|:---------:|:------|
@@ -11,11 +11,10 @@ Default props are set in the area_series.tsx file
 | yAccessors `(required)`| Accessor[] |  | An array of field names one per y metric value |
 | data `(required)` | datum[] |  | An array of data |
 | chartType | `typeof ChartType.XYAxis` | ChartType.XYAxis  |  |
-| specType | `typeof SpecType.Series` | SpecType.Series | | 
+| specType | `typeof SpecType.Series` | SpecType.Series | |
 | seriesType| `typeof SeriesType.Area` | SeriesType.Area | |
-| groupId | string | DEFAULT_GLOBAL_ID | | 
-| yScaleToDataExtent | boolean | false | | 
-| hideInLegend | boolean | false | hide the series in the legend | 
+| groupId | string | DEFAULT_GLOBAL_ID | |
+| hideInLegend | boolean | false | hide the series in the legend |
 | histogramModeAlignment | `Start or Center or End` | histogramModeAlignment.Center | Determines how points in the series will align to bands in histogram mode |
 
 ***
diff --git a/packages/osd-charts/docs/2-ChartPropTables/14-LineProps.md b/packages/osd-charts/docs/2-ChartPropTables/14-LineProps.md
@@ -4,14 +4,13 @@
 |:------|:------:|:---------:|:------|
 | id `(required)`|`string` ||The id of the spec |
 | chartType | `typeof ChartType.XYAxis` | ChartType.XYAxis  |  |
-| specType  | `typeof SpecType.Series` | SpecType.Series  |  |    
+| specType  | `typeof SpecType.Series` | SpecType.Series  |  |
 | seriesTypes  | | SeriesType.Line |  |
 | groupId  || DEFAULT_GROUP_ID |The ID of the line |
 | xScaleType `(required)`| `ScaleType (ScaleType.Ordinal or ScaleType.Linear or ScaleType.Time)`|ScaleType.Ordinal | The x axis scale type |
 | yScaleType `(required)`| `ScaleType (ScaleType.Ordinal or ScaleType.Linear or ScaleType.Time)`| ScaleType.Linear | The y axis scale type |
 | xAccessor `(required)` | Accessor | 'x' | the field name of the x value on the Datum object|
 | yAccessors `(required)`||['y'] | An array of field names one per y metric value |
-| yScaleToDataExtent || false ||
 | hideInLegend | boolean | false | If the series should appear in the legend|
 | histogramModeAlignment | `Start or Center or End` | histogramModeAlignment.Center | Determines how points in the series will align to bands in histogram mode |
 | data `(required)` | datum[] |  | An array of data |

diff --git a/packages/osd-charts/src/chart_types/xy_chart/domains/x_domain.test.ts b/packages/osd-charts/src/chart_types/xy_chart/domains/x_domain.test.ts
@@ -409,7 +409,6 @@ describe('X Domain', () => {
       yAccessors: ['y'],
       xScaleType: ScaleType.Linear,
       yScaleType: ScaleType.Linear,
-      yScaleToDataExtent: false,
       data: [
         { x: 0, y: 0 },
         { x: 'a', y: 0 },
@@ -427,7 +426,6 @@ describe('X Domain', () => {
       yAccessors: ['y'],
       xScaleType: ScaleType.Linear,
       yScaleType: ScaleType.Linear,
-      yScaleToDataExtent: false,
       data: [
         { x: 0, y: 0 },
         { x: 7, y: 0 },

diff --git a/packages/osd-charts/src/chart_types/xy_chart/domains/y_domain.ts b/packages/osd-charts/src/chart_types/xy_chart/domains/y_domain.ts
@@ -35,7 +35,7 @@ import { YDomain } from './types';
 /** @internal */
 export type YBasicSeriesSpec = Pick<
   BasicSeriesSpec,
-  'id' | 'seriesType' | 'yScaleType' | 'groupId' | 'stackAccessors' | 'yScaleToDataExtent' | 'useDefaultGroupDomain'
+  'id' | 'seriesType' | 'yScaleType' | 'groupId' | 'stackAccessors' | 'useDefaultGroupDomain'
 > & { stackMode?: StackMode; enableHistogramMode?: boolean };
 
 /** @internal */
@@ -75,12 +75,7 @@ function mergeYDomainForGroup(
   if (stackMode === StackMode.Percentage) {
     domain = computeContinuousDataDomain([0, 1], identity, type, customDomain);
   } else {
-    // TODO remove when removing yScaleToDataExtent
     const newCustomDomain = customDomain ? { ...customDomain } : {};
-    const shouldScaleToExtent = dataSeries.some(({ spec: { yScaleToDataExtent } }) => yScaleToDataExtent);
-    if (customDomain?.fit !== true && shouldScaleToExtent) {
-      newCustomDomain.fit = true;
-    }
 
     // compute stacked domain
     const stackedDomain = computeYDomain(stacked, hasZeroBaselineSpecs, type, newCustomDomain);

diff --git a/packages/osd-charts/src/chart_types/xy_chart/specs/area_series.tsx b/packages/osd-charts/src/chart_types/xy_chart/specs/area_series.tsx
@@ -34,7 +34,6 @@ const defaultProps = {
   yScaleType: ScaleType.Linear,
   xAccessor: 'x',
   yAccessors: ['y'],
-  yScaleToDataExtent: false,
   hideInLegend: false,
   histogramModeAlignment: HistogramModeAlignments.Center,
 };
@@ -52,7 +51,6 @@ export const AreaSeries: React.FunctionComponent<SpecRequiredProps & SpecOptiona
     | 'yScaleType'
     | 'xAccessor'
     | 'yAccessors'
-    | 'yScaleToDataExtent'
     | 'hideInLegend'
     | 'histogramModeAlignment'
   >(defaultProps),

diff --git a/packages/osd-charts/src/chart_types/xy_chart/specs/bar_series.tsx b/packages/osd-charts/src/chart_types/xy_chart/specs/bar_series.tsx
@@ -34,7 +34,6 @@ const defaultProps = {
   yScaleType: ScaleType.Linear,
   xAccessor: 'x',
   yAccessors: ['y'],
-  yScaleToDataExtent: false,
   hideInLegend: false,
   enableHistogramMode: false,
 };
@@ -52,7 +51,6 @@ export const BarSeries: React.FunctionComponent<SpecRequiredProps & SpecOptional
     | 'yScaleType'
     | 'xAccessor'
     | 'yAccessors'
-    | 'yScaleToDataExtent'
     | 'hideInLegend'
     | 'enableHistogramMode'
   >(defaultProps),

diff --git a/packages/osd-charts/src/chart_types/xy_chart/specs/bubble_series.tsx b/packages/osd-charts/src/chart_types/xy_chart/specs/bubble_series.tsx
@@ -35,7 +35,6 @@ const defaultProps = {
   xAccessor: 'x',
   yAccessors: ['y'],
   hideInLegend: false,
-  yScaleToDataExtent: false,
 };
 type SpecRequiredProps = Pick<BubbleSeriesSpec, 'id' | 'data'>;
 type SpecOptionalProps = Partial<Omit<BubbleSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
@@ -53,13 +52,6 @@ type SpecOptionalProps = Partial<Omit<BubbleSeriesSpec, 'chartType' | 'specType'
 export const BubbleSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
   specComponentFactory<
     BubbleSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'yScaleToDataExtent'
+    'seriesType' | 'groupId' | 'xScaleType' | 'yScaleType' | 'xAccessor' | 'yAccessors' | 'hideInLegend'
   >(defaultProps),
 );
diff --git a/packages/osd-charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx b/packages/osd-charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx
@@ -34,7 +34,6 @@ const defaultProps = {
   yScaleType: ScaleType.Linear,
   xAccessor: 'x',
   yAccessors: ['y'],
-  yScaleToDataExtent: false,
   hideInLegend: false,
   enableHistogramMode: true as const,
 };
@@ -52,7 +51,6 @@ export const HistogramBarSeries: React.FunctionComponent<SpecRequiredProps & Spe
     | 'yScaleType'
     | 'xAccessor'
     | 'yAccessors'
-    | 'yScaleToDataExtent'
     | 'hideInLegend'
     | 'enableHistogramMode'
   >(defaultProps),

diff --git a/packages/osd-charts/src/chart_types/xy_chart/specs/line_series.tsx b/packages/osd-charts/src/chart_types/xy_chart/specs/line_series.tsx
@@ -34,7 +34,6 @@ const defaultProps = {
   yScaleType: ScaleType.Linear,
   xAccessor: 'x',
   yAccessors: ['y'],
-  yScaleToDataExtent: false,
   hideInLegend: false,
   histogramModeAlignment: HistogramModeAlignments.Center,
 };
@@ -51,7 +50,6 @@ export const LineSeries: React.FunctionComponent<SpecRequiredProps & SpecOptiona
     | 'yScaleType'
     | 'xAccessor'
     | 'yAccessors'
-    | 'yScaleToDataExtent'
     | 'hideInLegend'
     | 'histogramModeAlignment'
   >(defaultProps),

diff --git a/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts b/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts
@@ -489,12 +489,6 @@ export interface SeriesScales {
    * @defaultValue `false`
    */
   yNice?: boolean;
-  /**
-   * if true, the min y value is set to the minimum domain value, 0 otherwise
-   * @deprecated use `domain.fit` instead
-   * @defaultValue `false`
-   */
-  yScaleToDataExtent?: boolean;
 }
 
 /** @public */

diff --git a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`Chart should render the legend name test 1`] = `
               <SpecInstance debug={true} rendering=\\"svg\\" showLegend={true} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} id=\\"__global__settings___\\" chartType=\\"global\\" specType=\\"settings\\" rotation={0} animateData={true} resizeDebounce={10} tooltip={{...}} externalPointerEvents={{...}} hideDuplicateAxes={false} baseTheme={{...}} brushAxis=\\"x\\" minBrushDelta={2} ariaUseDefaultSummary={true} ariaLabelHeadingLevel=\\"p\\" showLegendExtra={false} legendMaxDepth={Infinity} legendPosition=\\"right\\" />
             </Connect(SpecInstance)>
             <Connect(SpecInstance) id=\\"test\\" data={{...}}>
-              <SpecInstance id=\\"test\\" data={{...}} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} chartType=\\"xy_axis\\" specType=\\"series\\" seriesType=\\"bar\\" groupId=\\"__global__\\" xScaleType=\\"ordinal\\" yScaleType=\\"linear\\" xAccessor=\\"x\\" yAccessors={{...}} yScaleToDataExtent={false} hideInLegend={false} enableHistogramMode={false} />
+              <SpecInstance id=\\"test\\" data={{...}} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} chartType=\\"xy_axis\\" specType=\\"series\\" seriesType=\\"bar\\" groupId=\\"__global__\\" xScaleType=\\"ordinal\\" yScaleType=\\"linear\\" xAccessor=\\"x\\" yAccessors={{...}} hideInLegend={false} enableHistogramMode={false} />
             </Connect(SpecInstance)>
           </SpecsParserComponent>
         </Connect(SpecsParserComponent)>