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

…ch-project#98)

packages/osd-charts/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 CanvasTextBBoxCalculator();
+    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 (bad config)
+    horizontalAxisSpec.domain = {
+      min: 5,
+      max: 15,
+    };
+    axesSpecs.set(horizontalAxisSpec.id, horizontalAxisSpec);
+
+    const attemptToMerge = () => { mergeDomainsByGroupId(axesSpecs, 0); };
+
+    expect(attemptToMerge).toThrowError('[Axis axis_2]: custom domain for xDomain should be defined in Settings');
+  });
+
+  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);
   });
 });

packages/osd-charts/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,52 @@ 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) {
+      return;
+    }
+
+    const isAxisYDomain = isYDomain(spec.position, chartRotation);
+
+    if (!isAxisYDomain) {
+      const errorMessage = `[Axis ${id}]: custom domain for xDomain should be defined in Settings`;
+      throw new Error(errorMessage);
+    }
+
+    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;
+}

packages/osd-charts/src/lib/series/domains/x_domain.test.ts

@@ -590,12 +590,12 @@ describe('X Domain', () => {
     specDataSeries.set(ds1.id, ds1);
     specDataSeries.set(ds2.id, ds2);
     const { xValues } = getSplittedSeries(specDataSeries);
+
     const mergedDomain = mergeXDomain(
       [
         {
           seriesType: 'area',
           xScaleType: ScaleType.Linear,
-          xDomain: [0, 10],
         },
         {
           seriesType: 'line',
@@ -630,4 +630,36 @@ describe('X Domain', () => {
     const minInterval = findMinInterval([100]);
     expect(minInterval).toBe(1);
   });
+  test('should account for custom domain when merging a linear domain', () => {
+    const xValues = new Set([1, 2, 3, 4, 5]);
+    const xDomain = { min: 0, max: 3 };
+    const specs: Array<Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType'>> =
+      [{ seriesType: 'line', xScaleType: ScaleType.Linear }];
+
+    const basicMergedDomain = mergeXDomain(specs, xValues, xDomain);
+    expect(basicMergedDomain.domain).toEqual([0, 3]);
+
+    const arrayXDomain = [1, 2];
+    const attemptToMergeArrayDomain = () => { mergeXDomain(specs, xValues, arrayXDomain); };
+    const errorMessage = 'xDomain for continuous scale should be a DomainRange object, not an array';
+    expect(attemptToMergeArrayDomain).toThrowError(errorMessage);
+
+    const invalidXDomain = { min: 10, max: 0 };
+    const attemptToMerge = () => { mergeXDomain(specs, xValues, invalidXDomain); };
+    expect(attemptToMerge).toThrowError('custom xDomain is invalid, min is greater than max');
+  });
+
+  test('should account for custom domain when merging an ordinal domain', () => {
+    const xValues = new Set(['a', 'b', 'c', 'd']);
+    const xDomain = ['a', 'b', 'c'];
+    const specs: Array<Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType'>> =
+      [{ seriesType: 'bar', xScaleType: ScaleType.Ordinal }];
+    const basicMergedDomain = mergeXDomain(specs, xValues, xDomain);
+    expect(basicMergedDomain.domain).toEqual(['a', 'b', 'c']);
+
+    const objectXDomain = { max: 10, min: 0 };
+    const attemptToMerge = () => { mergeXDomain(specs, xValues, objectXDomain); };
+    const errorMessage = 'xDomain for ordinal scale should be an array of values, not a DomainRange object';
+    expect(attemptToMerge).toThrowError(errorMessage);
+  });
 });