feat(domain): scale data to a specific domain via axis spec

src/lib/axes/axis_utils.test.ts

@@ -1,8 +1,8 @@
 import { XDomain } from '../series/domains/x_domain';
 import { YDomain } from '../series/domains/y_domain';
-import { Position } from '../series/specs';
+import { AxisSpec, DomainRange, Position } from '../series/specs';
 import { LIGHT_THEME } from '../themes/light_theme';
-import { getAxisId, getGroupId } from '../utils/ids';
+import { getAxisId, getGroupId, GroupId } from '../utils/ids';
 import { ScaleType } from '../utils/scales/scales';
 import {
   centerRotationOrigin,
@@ -14,15 +14,17 @@ import {
   getAxisTicksPositions,
   getHorizontalAxisGridLineProps,
   getHorizontalAxisTickLineProps,
-  getHorizontalDomain,
   getMaxBboxDimensions,
   getMinMaxRange,
   getScaleForAxisSpec,
   getTickLabelProps,
   getVerticalAxisGridLineProps,
   getVerticalAxisTickLineProps,
-  getVerticalDomain,
   getVisibleTicks,
+  isHorizontal,
+  isVertical,
+  isYDomain,
+  mergeDomainsByGroupId,
 } from './axis_utils';
 import { CanvasTextBBoxCalculator } from './canvas_text_bbox_calculator';
 import { SvgTextBBoxCalculator } from './svg_text_bbox_calculator';
@@ -71,7 +73,7 @@ describe('Axis computational utils', () => {
     maxLabelTextWidth: 10,
     maxLabelTextHeight: 10,
   };
-  const verticalAxisSpec = {
+  const verticalAxisSpec: AxisSpec = {
     id: getAxisId('axis_1'),
     groupId: getGroupId('group_1'),
     hide: false,
@@ -86,7 +88,7 @@ describe('Axis computational utils', () => {
     showGridLines: true,
   };
 
-  const horizontalAxisSpec = {
+  const horizontalAxisSpec: AxisSpec = {
     id: getAxisId('axis_2'),
     groupId: getGroupId('group_1'),
     hide: false,
@@ -149,6 +151,21 @@ describe('Axis computational utils', () => {
     bboxCalculator.destroy();
   });
 
+  test('should not compute axis dimensions when spec is configured to hide', () => {
+    const bboxCalculator = new SvgTextBBoxCalculator();
+    verticalAxisSpec.hide = true;
+    const axisDimensions = computeAxisTicksDimensions(
+      verticalAxisSpec,
+      xDomain,
+      [yDomain],
+      1,
+      bboxCalculator,
+      0,
+      axes,
+    );
+    expect(axisDimensions).toBe(null);
+  });
+
   test('should compute dimensions for the bounding box containing a rotated label', () => {
     expect(computeRotatedLabelDimensions({ width: 1, height: 2 }, 0)).toEqual({
       width: 1,
@@ -914,13 +931,94 @@ describe('Axis computational utils', () => {
     expect(horizontalAxisGridLines).toEqual([25, 0, 25, 100]);
   });
 
-  test('should return correct domain based on rotation', () => {
-    const chartRotation = 180;
-    expect(getHorizontalDomain(xDomain, [yDomain], chartRotation)).toEqual(xDomain);
-    expect(getVerticalDomain(xDomain, [yDomain], chartRotation)).toEqual([yDomain]);
+  test('should determine orientation of axis position', () => {
+    expect(isVertical(Position.Left)).toBe(true);
+    expect(isVertical(Position.Right)).toBe(true);
+    expect(isVertical(Position.Top)).toBe(false);
+    expect(isVertical(Position.Bottom)).toBe(false);
+
+    expect(isHorizontal(Position.Left)).toBe(false);
+    expect(isHorizontal(Position.Right)).toBe(false);
+    expect(isHorizontal(Position.Top)).toBe(true);
+    expect(isHorizontal(Position.Bottom)).toBe(true);
+  });
+
+  test('should determine if axis belongs to yDomain', () => {
+    const verticalY = isYDomain(Position.Left, 0);
+    expect(verticalY).toBe(true);
+
+    const verticalX = isYDomain(Position.Left, 90);
+    expect(verticalX).toBe(false);
+
+    const horizontalX = isYDomain(Position.Top, 0);
+    expect(horizontalX).toBe(false);
+
+    const horizontalY = isYDomain(Position.Top, 90);
+    expect(horizontalY).toBe(true);
+  });
+
+  test('should merge axis domains by group id', () => {
+    const groupId = getGroupId('group_1');
+    const domainRange1 = {
+      min: 2,
+      max: 9,
+    };
+
+    verticalAxisSpec.domain = domainRange1;
+
+    const axesSpecs = new Map();
+    axesSpecs.set(verticalAxisSpec.id, verticalAxisSpec);
+
+    // Base case
+    const expectedSimpleMap = new Map<GroupId, DomainRange>();
+    expectedSimpleMap.set(groupId, { min: 2, max: 9 });
+
+    const simpleDomainsByGroupId = mergeDomainsByGroupId(axesSpecs, 0);
+    expect(simpleDomainsByGroupId).toEqual(expectedSimpleMap);
+
+    // Multiple definitions for the same group
+    const domainRange2 = {
+      min: 0,
+      max: 7,
+    };
+
+    const altVerticalAxisSpec = { ...verticalAxisSpec, id: getAxisId('axis2') };
+
+    altVerticalAxisSpec.domain = domainRange2;
+    axesSpecs.set(altVerticalAxisSpec.id, altVerticalAxisSpec);
+
+    const expectedMergedMap = new Map<GroupId, DomainRange>();
+    expectedMergedMap.set(groupId, { min: 0, max: 9 });
+
+    const mergedDomainsByGroupId = mergeDomainsByGroupId(axesSpecs, 0);
+    expect(mergedDomainsByGroupId).toEqual(expectedMergedMap);
+
+    // xDomain limit
+    horizontalAxisSpec.domain = {
+      min: 5,
+      max: 15,
+    };
+    axesSpecs.set(horizontalAxisSpec.id, horizontalAxisSpec);
+
+    const mergedMultiDomainsByGroupId = mergeDomainsByGroupId(axesSpecs, 0);
+
+    expect(mergedMultiDomainsByGroupId).toEqual(expectedMergedMap);
+  });
+
+  test('should throw on invalid domain', () => {
+    const domainRange1 = {
+      min: 9,
+      max: 2,
+    };
+
+    verticalAxisSpec.domain = domainRange1;
+
+    const axesSpecs = new Map();
+    axesSpecs.set(verticalAxisSpec.id, verticalAxisSpec);
+
+    const attemptToMerge = () => { mergeDomainsByGroupId(axesSpecs, 0); };
+    const expectedError = '[Axis axis_1]: custom domain is invalid, min is greater than max';
 
-    const skewChartRotation = 45;
-    expect(getHorizontalDomain(xDomain, [yDomain], skewChartRotation)).toEqual([yDomain]);
-    expect(getVerticalDomain(xDomain, [yDomain], skewChartRotation)).toEqual(xDomain);
+    expect(attemptToMerge).toThrowError(expectedError);
   });
 });

src/lib/axes/axis_utils.ts

@@ -1,11 +1,11 @@
 import { XDomain } from '../series/domains/x_domain';
 import { YDomain } from '../series/domains/y_domain';
 import { computeXScale, computeYScales } from '../series/scales';
-import { AxisSpec, Position, Rotation, TickFormatter } from '../series/specs';
+import { AxisSpec, DomainRange, Position, Rotation, TickFormatter } from '../series/specs';
 import { AxisConfig, Theme } from '../themes/theme';
 import { Dimensions, Margins } from '../utils/dimensions';
 import { Domain } from '../utils/domain';
-import { AxisId } from '../utils/ids';
+import { AxisId, GroupId } from '../utils/ids';
 import { Scale, ScaleType } from '../utils/scales/scales';
 import { BBox, BBoxCalculator } from './bbox_calculator';
 
@@ -54,6 +54,10 @@ export function computeAxisTicksDimensions(
   chartRotation: Rotation,
   axisConfig: AxisConfig,
 ): AxisTicksDimensions | null {
+  if (axisSpec.hide) {
+    return null;
+  }
+
   const scale = getScaleForAxisSpec(
     axisSpec,
     xDomain,
@@ -80,6 +84,16 @@ export function computeAxisTicksDimensions(
     ...dimensions,
   };
 }
+
+export function isYDomain(position: Position, chartRotation: Rotation): boolean {
+  const isStraightRotation = chartRotation === 0 || chartRotation === 180;
+  if (isVertical(position)) {
+    return isStraightRotation;
+  }
+
+  return !isStraightRotation;
+}
+
 export function getScaleForAxisSpec(
   axisSpec: AxisSpec,
   xDomain: XDomain,
@@ -89,9 +103,9 @@ export function getScaleForAxisSpec(
   minRange: number,
   maxRange: number,
 ): Scale | null {
-  const axisDomain = getAxisDomain(axisSpec.position, xDomain, yDomain, chartRotation);
-  // If axisDomain is an array of values, this is an array of YDomains
-  if (Array.isArray(axisDomain)) {
+  const axisIsYDomain = isYDomain(axisSpec.position, chartRotation);
+
+  if (axisIsYDomain) {
     const yScales = computeYScales(yDomain, minRange, maxRange);
     if (yScales.has(axisSpec.groupId)) {
       return yScales.get(axisSpec.groupId)!;
@@ -598,47 +612,50 @@ export function computeAxisGridLinePositions(
   return positions;
 }
 
-export function getVerticalDomain(
-  xDomain: XDomain,
-  yDomain: YDomain[],
-  chartRotation: number,
-): XDomain | YDomain[] {
-  if (chartRotation === 0 || chartRotation === 180) {
-    return yDomain;
-  } else {
-    return xDomain;
-  }
-}
-
-export function getHorizontalDomain(
-  xDomain: XDomain,
-  yDomain: YDomain[],
-  chartRotation: number,
-): XDomain | YDomain[] {
-  if (chartRotation === 0 || chartRotation === 180) {
-    return xDomain;
-  } else {
-    return yDomain;
-  }
-}
-
-export function getAxisDomain(
-  position: Position,
-  xDomain: XDomain,
-  yDomain: YDomain[],
-  chartRotation: number,
-): XDomain | YDomain[] {
-  if (!isHorizontal(position)) {
-    return getVerticalDomain(xDomain, yDomain, chartRotation);
-  } else {
-    return getHorizontalDomain(xDomain, yDomain, chartRotation);
-  }
-}
-
 export function isVertical(position: Position) {
   return position === Position.Left || position === Position.Right;
 }
 
 export function isHorizontal(position: Position) {
   return !isVertical(position);
 }
+
+export function mergeDomainsByGroupId(
+  axesSpecs: Map<AxisId, AxisSpec>,
+  chartRotation: Rotation,
+): Map<GroupId, DomainRange> {
+  const domainsByGroupId = new Map<GroupId, DomainRange>();
+  axesSpecs.forEach((spec: AxisSpec, id: AxisId) => {
+    const { groupId, domain } = spec;
+
+    if (domain) {
+      const isAxisYDomain = isYDomain(spec.position, chartRotation);
+
+      if (!isAxisYDomain) {
+        // tslint:disable-next-line:no-console
+        console.warn(`[Axis ${id}]: custom domain for xDomain should be defined in Settings`);
+        return;
+      }
+
+      if (domain.min > domain.max) {
+        const errorMessage = `[Axis ${id}]: custom domain is invalid, min is greater than max`;
+        throw new Error(errorMessage);
+      }
+
+      const prevGroupDomain = domainsByGroupId.get(groupId);
+
+      if (prevGroupDomain) {
+        const mergedDomain = {
+          min: Math.min(domain.min, prevGroupDomain.min),
+          max: Math.max(domain.max, prevGroupDomain.max),
+        };
+
+        domainsByGroupId.set(groupId, mergedDomain);
+      } else {
+        domainsByGroupId.set(groupId, domain);
+      }
+    }
+  });
+
+  return domainsByGroupId;
+}