fix(domain): set domain bounds dependent on negative/positive values (#149)

emmacunningham · web-flow · commit 5b16be6d4f31 · 2019-04-05T08:18:36.000-07:00
diff --git a/src/lib/utils/domain.test.ts b/src/lib/utils/domain.test.ts
@@ -1,5 +1,10 @@
 import { AccessorFn } from './accessor';
-import { computeContinuousDataDomain, computeOrdinalDataDomain, computeStackedContinuousDomain } from './domain';
+import {
+  computeContinuousDataDomain,
+  computeDomainExtent,
+  computeOrdinalDataDomain,
+  computeStackedContinuousDomain,
+} from './domain';
 
 describe('utils/domain', () => {
   test('should compute ordinal data domain: sort & remove nulls', () => {
@@ -151,4 +156,18 @@ 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]);
+  });
 });
diff --git a/src/lib/utils/domain.ts b/src/lib/utils/domain.ts
@@ -40,18 +40,37 @@ export function computeOrdinalDataDomain(
   const uniqueValues = [...new Set(domain)];
   return sorted
     ? uniqueValues.sort((a, b) => {
-        return `${a}`.localeCompare(`${b}`);
-      })
+      return `${a}`.localeCompare(`${b}`);
+    })
     : uniqueValues;
 }
 
+export function computeDomainExtent(
+  computedDomain: [number, number] | [undefined, undefined],
+  scaleToExtent: boolean,
+): [number, number] {
+  const [start, end] = computedDomain;
+
+  if (start != null && end != null) {
+    if (start >= 0 && end >= 0) {
+      return scaleToExtent ? [start, end] : [0, end];
+    } else if (start < 0 && end < 0) {
+      return scaleToExtent ? [start, end] : [start, 0];
+    }
+    return [start, end];
+  }
+
+  // if any of the values are null
+  return [0, 0];
+}
+
 export function computeContinuousDataDomain(
   data: any[],
   accessor: AccessorFn,
   scaleToExtent = false,
 ): number[] {
   const range = extent(data, accessor);
-  return scaleToExtent ? range : [0, range[1] || 0];
+  return computeDomainExtent(range, scaleToExtent);
 }
 
 export function computeStackedContinuousDomain(
diff --git a/stories/bar_chart.tsx b/stories/bar_chart.tsx
@@ -1,4 +1,4 @@
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -831,6 +831,61 @@ storiesOf('Bar Chart', module)
       </Chart>
     );
   })
+  .add('scale to extent', () => {
+    const yScaleToDataExtent = boolean('yScaleDataToExtent', false);
+    const mixed = [
+      { x: 3, y: 1 },
+      { x: 0, y: -4 },
+      { x: 2, y: 2 },
+      { x: 1, y: -3 },
+      { x: 2, y: 2 },
+      { x: 1, y: -3 },
+      { x: 3, y: 1 },
+    ];
+
+    const allPositive = mixed.map((datum) => ({ x: datum.x, y: Math.abs(datum.y) }));
+    const allNegative = mixed.map((datum) => ({ x: datum.x, y: Math.abs(datum.y) * -1 }));
+
+    const dataChoice = select('data', {
+      mixed: 'mixed',
+      allPositive: 'all positive',
+      allNegative: 'all negative',
+    }, 'mixed');
+
+    let data = mixed;
+    switch (dataChoice) {
+      case 'all positive':
+        data = allPositive;
+        break;
+      case 'all negative':
+        data = allNegative;
+        break;
+    }
+
+    return (
+      <Chart renderer="canvas" className={'story-chart'}>
+        <Axis id={getAxisId('top')} position={Position.Top} title={'Top axis'} />
+        <Axis
+          id={getAxisId('left2')}
+          title={'Left axis'}
+          position={Position.Left}
+          tickFormat={(d) => Number(d).toFixed(2)}
+        />
+
+        <BarSeries
+          id={getSpecId('bars')}
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          splitSeriesAccessors={['g']}
+          stackAccessors={['x']}
+          data={data}
+          yScaleToDataExtent={yScaleToDataExtent}
+        />
+      </Chart>
+    );
+  })
   .add('[test] - linear', () => {
     const data = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 4], [7, 3], [8, 2], [9, 1]];
     return (
