fix: DH-18832: propagate min and max to plotly figure axis (deephaven#2424) (deephaven#2435)

I went with `autorangeoptions` instead of range as it provides more
intuitive behavior.

```from deephaven import read_csv
from deephaven.plot.figure import Figure
import deephaven.plot.express as dx
stocks = dx.data.stocks().where("Sym = `FISH`")

# plot the data
plot_single = (
    Figure()
    .plot_xy(
        series_name="Price",
        t=stocks,
        x="Timestamp",
        y="Price",
    )
    .y_axis(min=0.0, max=170.0)
    .x_twin()
    .plot_xy(
        series_name="SPet500",
        t=stocks,
        x="Timestamp",
        y="SPet500",
    )
    .y_axis(log=True, max=300.0)
    .show()
)
```

Co-authored-by: Joe <josephnumainville@deephaven.io>

Author: mofojed

__mocks__/dh-core.js

@@ -1789,6 +1789,8 @@ class Axis {
     formatPattern = null,
     log = false,
     businessCalendar = null,
+    minRange = undefined,
+    maxRange = undefined,
   } = {}) {
     this.label = label;
     this.type = type;
@@ -1797,6 +1799,8 @@ class Axis {
     this.formatPattern = formatPattern;
     this.log = log;
     this.businessCalendar = businessCalendar;
+    this.minRange = minRange;
+    this.maxRange = maxRange;
   }
 
   range() {}

package-lock.json

@@ -89,7 +89,7 @@
     "@types/memoizee": "^0.4.5",
     "@types/node": "^16.11.7",
     "@types/papaparse": "5.3.2",
-    "@types/plotly.js": "^2.29.1",
+    "@types/plotly.js": "^2.33.0",
     "@types/pouchdb-browser": "^6.1.3",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^17.0.2",

package.json

@@ -24,13 +24,17 @@ class ChartTestUtils {
     formatType = undefined,
     formatPattern = '###,###0.00',
     log = false,
+    minRange = undefined,
+    maxRange = undefined,
   }: {
     label?: string;
     type?: DhType.plot.AxisType;
     position?: DhType.plot.AxisPosition;
     formatType?: DhType.plot.AxisFormatType;
     formatPattern?: string;
     log?: boolean;
+    minRange?: number;
+    maxRange?: number;
   } = {}): DhType.plot.Axis {
     const { dh } = this;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -41,6 +45,8 @@ class ChartTestUtils {
       formatType: formatType ?? dh.plot.AxisFormatType.NUMBER,
       formatPattern,
       log,
+      minRange,
+      maxRange,
     });
   }
 

packages/chart/src/ChartTestUtils.ts

@@ -1538,6 +1538,26 @@ class ChartUtils {
       );
       layoutAxis.domain = [bottom, top];
     }
+
+    // autorangeoptions exists in plotly.js but not in the types
+    // axis.range only applies to the initial axis range, can't handle specifying min or max independently,
+    // and cannot be returned to if the user changes the range via interaction
+    // minallowed and maxallowed can be set independently and can be returned to if the user changes
+    // the range via interaction
+    const { minRange, maxRange, log: logAxis } = axis;
+    if (!Number.isNaN(minRange) || !Number.isNaN(maxRange)) {
+      layoutAxis.autorangeoptions = {};
+      if (!Number.isNaN(minRange)) {
+        layoutAxis.autorangeoptions.minallowed = logAxis
+          ? Math.log10(minRange)
+          : minRange;
+      }
+      if (!Number.isNaN(maxRange)) {
+        layoutAxis.autorangeoptions.maxallowed = logAxis
+          ? Math.log10(maxRange)
+          : maxRange;
+      }
+    }
   }
 
   /**

packages/chart/src/ChartUtils.ts

@@ -533,3 +533,60 @@ describe('legend visibility', () => {
     ]);
   });
 });
+
+it('handles axes min and max properly', () => {
+  const xaxis = chartTestUtils.makeAxis({
+    label: 'x1',
+    type: dh.plot.AxisType.X,
+    position: dh.plot.AxisPosition.BOTTOM,
+    minRange: 0,
+    maxRange: 100,
+  });
+
+  const xaxis2 = chartTestUtils.makeAxis({
+    label: 'x1',
+    type: dh.plot.AxisType.X,
+    position: dh.plot.AxisPosition.BOTTOM,
+    log: true,
+    minRange: 100,
+    maxRange: 1000,
+  });
+
+  const yaxis1 = chartTestUtils.makeAxis({
+    label: 'y1',
+    type: dh.plot.AxisType.Y,
+    position: dh.plot.AxisPosition.LEFT,
+    maxRange: 200,
+  });
+
+  const yaxis2 = chartTestUtils.makeAxis({
+    label: 'y2',
+    type: dh.plot.AxisType.Y,
+    position: dh.plot.AxisPosition.RIGHT,
+    minRange: -10,
+  });
+
+  const axes = [xaxis, xaxis2, yaxis1, yaxis2];
+
+  const chart = chartTestUtils.makeChart({ axes });
+  const figure = chartTestUtils.makeFigure({ charts: [chart] });
+  const model = new FigureChartModel(dh, figure);
+
+  const layout = model.getLayout();
+
+  expect(layout.xaxis?.autorangeoptions?.minallowed).toEqual(0);
+
+  expect(layout.xaxis?.autorangeoptions?.maxallowed).toEqual(100);
+
+  expect(layout.xaxis2?.autorangeoptions?.minallowed).toEqual(2);
+
+  expect(layout.xaxis2?.autorangeoptions?.maxallowed).toEqual(3);
+
+  expect(layout.yaxis?.autorangeoptions?.minallowed).toEqual(undefined);
+
+  expect(layout.yaxis?.autorangeoptions?.maxallowed).toEqual(200);
+
+  expect(layout.yaxis2?.autorangeoptions?.minallowed).toEqual(-10);
+
+  expect(layout.yaxis2?.autorangeoptions?.maxallowed).toEqual(undefined);
+});