Force ascending axes in scatter vis

Author: axelboc

apps/storybook/src/Utilities.mdx

@@ -170,18 +170,23 @@ getAxisValues([0, 1], 3); // Throws error as 2 != 3
 
 #### getAxisDomain
 
-Find the ascending or descending domain of an axis given its values and scale. Optionally extend the domain by a given factor.
+Find the ascending or descending domain of an axis given its values and scale. Optionally extend the domain by a given factor or force ascending domain.
 
 ```ts
 getAxisDomain(
   axisValues: number[],
-  scaleType: ScaleType = ScaleType.Linear,
-  extensionFactor = 0
+  opts: {
+    scaleType?: AxisScaleType, // default: ScaleType.Linear
+    extensionFactor?: number, // default: 0
+    forceAscending?: boolean, // default: false
+  }
 ): Domain | undefined
 
 getAxisDomain([-1, 0, 1]); // [-1, 1]
-getAxisDomain([4, 2, 0, -2], ScaleType.Log); // [4, 2]);
-getAxisDomain([4, 2, 0], ScaleType.Linear, 0.5); // [6, -2])
+getAxisDomain([4, 2, 0]); // [4, 0]
+getAxisDomain([4, 2, 0], { scaleType: ScaleType.Log }); // [4, 2]);
+getAxisDomain([4, 2, 0], { extensionFactor: 0.5 }); // [6, -2])
+getAxisDomain([4, 2, 0], { forceAscending: true }); // [0, 4])
 ```
 
 #### toTypedNdArray

packages/lib/src/vis/line/LineVis.tsx

@@ -89,7 +89,10 @@ function LineVis(props: PropsWithChildren<Props>) {
   const abscissas = useAxisValues(abscissaValue, dataArray.size);
   const abscissaToIndex = useValueToIndexScale(abscissas, true);
 
-  const abscissaDomain = useAxisDomain(abscissas, abscissaScaleType, 0.01);
+  const abscissaDomain = useAxisDomain(abscissas, {
+    scaleType: abscissaScaleType,
+    extensionFactor: 0.01,
+  });
   assertDefined(abscissaDomain, 'Abscissas have undefined domain');
 
   const dataDomain = useMemo(() => {

packages/lib/src/vis/scatter/ScatterVis.tsx

@@ -69,13 +69,20 @@ function ScatterVis(props: PropsWithChildren<Props>) {
     label: ordinateLabel,
     scaleType: ordinateScaleType,
   } = ordinateParams;
-
   assertLength(abscissas, dataArray.size, 'abscissa');
   assertLength(ordinates, dataArray.size, 'ordinates');
 
-  const abscissaDomain = useAxisDomain(abscissas, abscissaScaleType, 0.01);
+  const abscissaDomain = useAxisDomain(abscissas, {
+    scaleType: abscissaScaleType,
+    extensionFactor: 0.01,
+    forceAscending: true,
+  });
+  const ordinateDomain = useAxisDomain(ordinates, {
+    scaleType: ordinateScaleType,
+    extensionFactor: 0.01,
+    forceAscending: true,
+  });
   assertDefined(abscissaDomain, 'Abscissas have undefined domain');
-  const ordinateDomain = useAxisDomain(ordinates, ordinateScaleType, 0.01);
   assertDefined(ordinateDomain, 'Ordinates have undefined domain');
 
   const {

packages/lib/src/vis/utils.test.ts

@@ -405,13 +405,32 @@ describe('getAxisDomain', () => {
   });
 
   it('should respect given scale', () => {
-    expect(getAxisDomain([-1, 0, 1], ScaleType.Log)).toEqual([1, 1]);
-    expect(getAxisDomain([4, 2, 0, -2], ScaleType.Log)).toEqual([4, 2]);
+    expect(getAxisDomain([-1, 0, 1], { scaleType: ScaleType.Log })).toEqual([
+      1, 1,
+    ]);
+    expect(getAxisDomain([4, 2, 0, -2], { scaleType: ScaleType.Log })).toEqual([
+      4, 2,
+    ]);
   });
 
   it('should allow extending domain', () => {
-    expect(getAxisDomain([4, 2, 0], ScaleType.Linear, 0.5)).toEqual([6, -2]);
-    expect(getAxisDomain([-1, 0, 1], ScaleType.Log, 1)).toEqual([0.1, 10]);
+    expect(
+      getAxisDomain([4, 2, 0], {
+        scaleType: ScaleType.Linear,
+        extensionFactor: 0.5,
+      }),
+    ).toEqual([6, -2]);
+
+    expect(
+      getAxisDomain([-1, 0, 1], {
+        scaleType: ScaleType.Log,
+        extensionFactor: 1,
+      }),
+    ).toEqual([0.1, 10]);
+  });
+
+  it('should allow forcing ascending domain', () => {
+    expect(getAxisDomain([4, 2, 0], { forceAscending: true })).toEqual([0, 4]);
   });
 
   it('should return undefined when values array is empty', () => {

packages/lib/src/vis/utils.ts

@@ -357,16 +357,25 @@ function isDescending(array: NumArray): boolean {
 
 export function getAxisDomain(
   axisValues: NumArray,
-  scaleType: AxisScaleType = ScaleType.Linear,
-  extensionFactor = 0,
+  opts: {
+    scaleType?: AxisScaleType;
+    extensionFactor?: number;
+    forceAscending?: boolean;
+  } = {},
 ): Domain | undefined {
+  const {
+    scaleType = ScaleType.Linear,
+    extensionFactor = 0,
+    forceAscending = false,
+  } = opts;
+
   const rawDomain = getDomain(axisValues, { scaleType });
   if (!rawDomain) {
     return undefined;
   }
 
   const extendedDomain = extendDomain(rawDomain, extensionFactor, scaleType);
-  return isDescending(axisValues)
+  return isDescending(axisValues) && !forceAscending
     ? [extendedDomain[1], extendedDomain[0]]
     : extendedDomain;
 }