feat: add option to fit y domain to data

nickofthyme · nickofthyme · commit 4b567295ac39 · 2020-01-07T22:41:17.000-06:00
diff --git a/src/chart_types/xy_chart/domains/y_domain.ts b/src/chart_types/xy_chart/domains/y_domain.ts
@@ -75,27 +75,32 @@ function mergeYDomainForGroup(
 
   let domain: number[];
   if (isPercentageStack) {
-    domain = computeContinuousDataDomain([0, 1], identity);
+    domain = computeContinuousDataDomain([0, 1], identity, customDomain?.fit);
   } else {
     // compute stacked domain
     const isStackedScaleToExtent = groupSpecs.stacked.some((spec) => {
       return spec.yScaleToDataExtent;
     });
     const stackedDataSeries = getDataSeriesOnGroup(dataSeries, groupSpecs.stacked);
-    const stackedDomain = computeYStackedDomain(stackedDataSeries, isStackedScaleToExtent);
+    const stackedDomain = computeYStackedDomain(stackedDataSeries, isStackedScaleToExtent, customDomain?.fit);
 
     // compute non stacked domain
     const isNonStackedScaleToExtent = groupSpecs.nonStacked.some((spec) => {
       return spec.yScaleToDataExtent;
     });
     const nonStackedDataSeries = getDataSeriesOnGroup(dataSeries, groupSpecs.nonStacked);
-    const nonStackedDomain = computeYNonStackedDomain(nonStackedDataSeries, isNonStackedScaleToExtent);
+    const nonStackedDomain = computeYNonStackedDomain(
+      nonStackedDataSeries,
+      isNonStackedScaleToExtent,
+      customDomain?.fit,
+    );
 
     // merge stacked and non stacked domain together
     domain = computeContinuousDataDomain(
       [...stackedDomain, ...nonStackedDomain],
       identity,
       isStackedScaleToExtent || isNonStackedScaleToExtent,
+      customDomain?.fit,
     );
 
     const [computedDomainMin, computedDomainMax] = domain;
@@ -136,7 +141,11 @@ export function getDataSeriesOnGroup(
   }, [] as RawDataSeries[]);
 }
 
-function computeYStackedDomain(dataseries: RawDataSeries[], scaleToExtent: boolean): number[] {
+function computeYStackedDomain(
+  dataseries: RawDataSeries[],
+  scaleToExtent: boolean,
+  fitToExtent: boolean = false,
+): number[] {
   const stackMap = new Map<any, any[]>();
   dataseries.forEach((ds, index) => {
     ds.data.forEach((datum) => {
@@ -155,10 +164,10 @@ function computeYStackedDomain(dataseries: RawDataSeries[], scaleToExtent: boole
   if (dataValues.length === 0) {
     return [];
   }
-  return computeContinuousDataDomain(dataValues, identity, scaleToExtent);
+  return computeContinuousDataDomain(dataValues, identity, scaleToExtent, fitToExtent);
 }
 
-function computeYNonStackedDomain(dataseries: RawDataSeries[], scaleToExtent: boolean) {
+function computeYNonStackedDomain(dataseries: RawDataSeries[], scaleToExtent: boolean, fitToExtent: boolean = false) {
   const yValues = new Set<any>();
   dataseries.forEach((ds) => {
     ds.data.forEach((datum) => {
@@ -171,7 +180,7 @@ function computeYNonStackedDomain(dataseries: RawDataSeries[], scaleToExtent: bo
   if (yValues.size === 0) {
     return [];
   }
-  return computeContinuousDataDomain([...yValues.values()], identity, scaleToExtent);
+  return computeContinuousDataDomain([...yValues.values()], identity, scaleToExtent, fitToExtent);
 }
 
 export function splitSpecsByGroupId(specs: YBasicSeriesSpec[]) {
diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts
@@ -70,18 +70,6 @@ export type SubSeriesStringPredicate = (
   isTooltip: boolean,
 ) => string | number | null;
 
-interface DomainMinInterval {
-  /** Custom minInterval for the domain which will affect data bucket size.
-   * The minInterval cannot be greater than the computed minimum interval between any two adjacent data points.
-   * Further, if you specify a custom numeric minInterval for a timeseries, please note that due to the restriction
-   * above, the specified numeric minInterval will be interpreted as a fixed interval.
-   * This means that, for example, if you have yearly timeseries data that ranges from 2016 to 2019 and you manually
-   * compute the interval between 2016 and 2017, you'll have 366 days due to 2016 being a leap year.  This will not
-   * be a valid interval because it is greater than the computed minInterval of 365 days betwen the other years.
-   */
-  minInterval?: number;
-}
-
 /**
  * The fit function type
  */
@@ -166,20 +154,43 @@ export const Fit = Object.freeze({
 
 export type Fit = $Values<typeof Fit>;
 
+interface DomainBase {
+  /**
+   * Custom minInterval for the domain which will affect data bucket size.
+   * The minInterval cannot be greater than the computed minimum interval between any two adjacent data points.
+   * Further, if you specify a custom numeric minInterval for a timeseries, please note that due to the restriction
+   * above, the specified numeric minInterval will be interpreted as a fixed interval.
+   * This means that, for example, if you have yearly timeseries data that ranges from 2016 to 2019 and you manually
+   * compute the interval between 2016 and 2017, you'll have 366 days due to 2016 being a leap year.  This will not
+   * be a valid interval because it is greater than the computed minInterval of 365 days betwen the other years.
+   */
+  minInterval?: number;
+  /**
+   * Whether to fit the domain to the data. ONLY applies to `yDomains`
+   *
+   * Setting `max` or `min` will override this functionality.
+   */
+  fit?: boolean;
+}
+
 interface LowerBound {
-  /** Lower bound of domain range */
+  /**
+   * Lower bound of domain range
+   */
   min: number;
 }
 
 interface UpperBound {
-  /** Upper bound of domain range */
+  /**
+   * Upper bound of domain range
+   */
   max: number;
 }
 
-export type LowerBoundedDomain = DomainMinInterval & LowerBound;
-export type UpperBoundedDomain = DomainMinInterval & UpperBound;
-export type CompleteBoundedDomain = DomainMinInterval & LowerBound & UpperBound;
-export type UnboundedDomainWithInterval = DomainMinInterval;
+export type LowerBoundedDomain = DomainBase & LowerBound;
+export type UpperBoundedDomain = DomainBase & UpperBound;
+export type CompleteBoundedDomain = DomainBase & LowerBound & UpperBound;
+export type UnboundedDomainWithInterval = DomainBase;
 
 export type DomainRange = LowerBoundedDomain | UpperBoundedDomain | CompleteBoundedDomain | UnboundedDomainWithInterval;
 
diff --git a/src/utils/data_generators/data_generator.ts b/src/utils/data_generators/data_generator.ts
@@ -7,6 +7,15 @@ export class DataGenerator {
     this.generator = new Simple1DNoise(randomNumberGenerator);
     this.frequency = frequency;
   }
+  generateBasicSeries(totalPoints = 50, offset = 0, amplitude = 1) {
+    const dataPoints = new Array(totalPoints).fill(0).map((_, i) => {
+      return {
+        x: i,
+        y: (this.generator.getValue(i) + offset) * amplitude,
+      };
+    });
+    return dataPoints;
+  }
   generateSimpleSeries(totalPoints = 50, groupIndex = 1, groupPrefix = '') {
     const group = String.fromCharCode(97 + groupIndex);
     const dataPoints = new Array(totalPoints).fill(0).map((_, i) => {
diff --git a/src/utils/domain.test.ts b/src/utils/domain.test.ts
@@ -126,17 +126,55 @@ describe('utils/domain', () => {
     expect(stackedDataDomain).toEqual(expectedStackedDomain);
   });
 
-  test('should compute domain based on scaleToExtent', () => {
-    // start & end are positive
-    expect(computeDomainExtent([5, 10], true)).toEqual([5, 10]);
-    expect(computeDomainExtent([5, 10], false)).toEqual([0, 10]);
-
-    // start & end are negative
-    expect(computeDomainExtent([-15, -10], true)).toEqual([-15, -10]);
-    expect(computeDomainExtent([-15, -10], false)).toEqual([-15, 0]);
-
-    // start is negative, end is positive
-    expect(computeDomainExtent([-15, 10], true)).toEqual([-15, 10]);
-    expect(computeDomainExtent([-15, 10], false)).toEqual([-15, 10]);
+  describe('scaleToExtent', () => {
+    describe('true', () => {
+      it('should find domain when start & end are positive', () => {
+        expect(computeDomainExtent([5, 10], true)).toEqual([5, 10]);
+      });
+      it('should find domain when start & end are negative', () => {
+        expect(computeDomainExtent([-15, -10], true)).toEqual([-15, -10]);
+      });
+      it('should find domain when start is negative, end is positive', () => {
+        expect(computeDomainExtent([-15, 10], true)).toEqual([-15, 10]);
+      });
+    });
+    describe('false', () => {
+      it('should find domain when start & end are positive', () => {
+        expect(computeDomainExtent([5, 10], false)).toEqual([0, 10]);
+      });
+      it('should find domain when start & end are negative', () => {
+        expect(computeDomainExtent([-15, -10], false)).toEqual([-15, 0]);
+      });
+      it('should find domain when start is negative, end is positive', () => {
+        expect(computeDomainExtent([-15, 10], false)).toEqual([-15, 10]);
+      });
+    });
+  });
+
+  describe('fitToExtent', () => {
+    it('should not effect domain when scaleToExtent is true', () => {
+      expect(computeDomainExtent([5, 10], true)).toEqual([5, 10]);
+    });
+
+    describe('baseline far from zero', () => {
+      it('should get domain from positive domain', () => {
+        expect(computeDomainExtent([10, 70], false, true)).toEqual([5, 75]);
+      });
+      it('should get domain from positive & negative domain', () => {
+        expect(computeDomainExtent([-30, 30], false, true)).toEqual([-35, 35]);
+      });
+      it('should get domain from negative domain', () => {
+        expect(computeDomainExtent([-70, -10], false, true)).toEqual([-75, -5]);
+      });
+    });
+
+    describe('baseline near zero', () => {
+      it('should set min baseline as 0 if original domain is less than zero', () => {
+        expect(computeDomainExtent([5, 65], false, true)).toEqual([0, 70]);
+      });
+      it('should set max baseline as 0 if original domain is less than zero', () => {
+        expect(computeDomainExtent([-65, -5], false, true)).toEqual([-70, 0]);
+      });
+    });
   });
 });
diff --git a/src/utils/domain.ts b/src/utils/domain.ts
@@ -45,17 +45,31 @@ export function computeOrdinalDataDomain(
     : uniqueValues;
 }
 
+function computeFittedDomain(start?: number, end?: number) {
+  if (start === undefined || end === undefined) {
+    return [start, end];
+  }
+
+  const delta = Math.abs(end - start);
+  const padding = (delta === 0 ? end - 0 : delta) / 12;
+  const newStart = start - padding;
+  const newEnd = end + padding;
+
+  return [start >= 0 && newStart < 0 ? 0 : newStart, end <= 0 && newEnd > 0 ? 0 : newEnd];
+}
+
 export function computeDomainExtent(
   computedDomain: [number, number] | [undefined, undefined],
   scaleToExtent: boolean,
+  fitToExtent: boolean = false,
 ): [number, number] {
-  const [start, end] = computedDomain;
+  const [start, end] = fitToExtent && !scaleToExtent ? computeFittedDomain(...computedDomain) : computedDomain;
 
   if (start != null && end != null) {
     if (start >= 0 && end >= 0) {
-      return scaleToExtent ? [start, end] : [0, end];
+      return scaleToExtent || fitToExtent ? [start, end] : [0, end];
     } else if (start < 0 && end < 0) {
-      return scaleToExtent ? [start, end] : [start, 0];
+      return scaleToExtent || fitToExtent ? [start, end] : [start, 0];
     }
     return [start, end];
   }
@@ -64,11 +78,18 @@ export function computeDomainExtent(
   return [0, 0];
 }
 
-export function computeContinuousDataDomain(data: any[], accessor: AccessorFn, scaleToExtent = false): number[] {
+export function computeContinuousDataDomain(
+  data: any[],
+  accessor: AccessorFn,
+  scaleToExtent = false,
+  fitToExtent = false,
+): number[] {
   const range = extent(data, accessor);
-  return computeDomainExtent(range, scaleToExtent);
+
+  return computeDomainExtent(range, scaleToExtent, fitToExtent);
 }
 
+// TODO: remove or incorporate this function
 export function computeStackedContinuousDomain(
   data: any[],
   xAccessor: AccessorFn,
diff --git a/stories/axis.tsx b/stories/axis.tsx
@@ -1,4 +1,4 @@
-import { boolean, number } from '@storybook/addon-knobs';
+import { boolean, number, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 
@@ -614,4 +614,51 @@ storiesOf('Axis', module)
         />
       </Chart>
     );
+  })
+  .add('fit domain to extent in y axis', () => {
+    const dg = new SeededDataGenerator();
+    const base = dg.generateBasicSeries(100, 0, 50);
+    const positive = base.map(({ x, y }) => ({ x, y: y + 1000 }));
+    const both = base.map(({ x, y }) => ({ x, y: y - 100 }));
+    const negative = base.map(({ x, y }) => ({ x, y: y - 1000 }));
+
+    const dataTypes = {
+      positive,
+      both,
+      negative,
+    };
+    const dataKey = select<string>(
+      'dataset',
+      {
+        'Positive values only': 'positive',
+        'Positive and negative': 'both',
+        'Negtive values only': 'negative',
+      },
+      'both',
+    );
+    // @ts-ignore
+    const dataset = dataTypes[dataKey];
+    const fit = boolean('fit domain to data', true);
+
+    return (
+      <Chart className={'story-chart'}>
+        <Axis id={getAxisId('bottom')} title={'index'} position={Position.Bottom} />
+        <Axis
+          domain={{ fit }}
+          id={getAxisId('left')}
+          title="Value"
+          position={Position.Left}
+          tickFormat={(d) => Number(d).toFixed(2)}
+        />
+
+        <LineSeries
+          id={getSpecId('lines')}
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          data={dataset}
+        />
+      </Chart>
+    );
   });
