Refactored single subplot log scaling

datavisyn · Nov 18, 2024 · f8a0e7c · f8a0e7c
1 parent c4c2ba8
commit f8a0e7c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 36 deletions.
diff --git a/src/vis/scatter/useLayout.tsx b/src/vis/scatter/useLayout.tsx
@@ -103,12 +103,12 @@ export function useLayout({
         axes[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
           ...AXIS_TICK_STYLES,
           range: toLogRange(config.xAxisScale!, pair.xDomain),
-          type: config.xAxisScale,
           // Spread the previous layout to keep things like zoom
           ...(internalLayoutRef.current?.[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'xaxis'] || {}),
+          type: config.xAxisScale,
           title: {
-            text: textMeasure.textEllipsis(pair.xTitle, xTitleSize),
-            standoff: 0,
+            text: subplots.xyPairs.length > 1 ? textMeasure.textEllipsis(pair.xTitle, xTitleSize) : pair.xTitle,
+            standoff: subplots.xyPairs.length > 1 ? 0 : undefined,
             font: {
               size: 12,
               color: VIS_NEUTRAL_COLOR,
@@ -118,15 +118,15 @@ export function useLayout({
         axes[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
           ...AXIS_TICK_STYLES,
           range: toLogRange(config.yAxisScale!, pair.yDomain),
-          type: config.yAxisScale,
           // Spread the previous layout to keep things like zoom
           ...(internalLayoutRef.current?.[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'yaxis'] || {}),
+          type: config.yAxisScale,
           title: {
             font: {
               size: 12,
               color: VIS_NEUTRAL_COLOR,
             },
-            text: textMeasure.textEllipsis(pair.yTitle, yTitleSize),
+            text: subplots.xyPairs.length > 1 ? textMeasure.textEllipsis(pair.yTitle, yTitleSize) : pair.yTitle,
           },
         };
 
@@ -149,37 +149,17 @@ export function useLayout({
       });
 
       // if we only find one facet (e.g., the categorical column only contains one value), we don't facet
-      const finalLayout: Partial<PlotlyTypes.Layout> =
-        subplots.xyPairs.length > 1
-          ? {
-              ...BASE_LAYOUT,
-              ...(internalLayoutRef.current || {}),
-              grid: { rows: nRows, columns: nColumns, xgap: xGap, ygap: yGap, pattern: 'independent' },
-              ...axes,
-              annotations: [...titleAnnotations, ...regressions.annotations],
-              shapes: regressions.shapes,
-              dragmode: config!.dragMode,
-              width,
-              height,
-            }
-          : {
-              ...BASE_LAYOUT,
-              xaxis: {
-                ...AXIS_TICK_STYLES,
-                ...internalLayoutRef.current?.xaxis,
-                title: subplots.xyPairs[0]!.xTitle,
-              },
-              yaxis: {
-                ...AXIS_TICK_STYLES,
-                ...internalLayoutRef.current?.yaxis,
-                title: subplots.xyPairs[0]!.yTitle,
-              },
-              shapes: regressions.shapes,
-              annotations: [...regressions.annotations],
-              dragmode: config.dragMode,
-              width,
-              height,
-            };
+      const finalLayout: Partial<PlotlyTypes.Layout> = {
+        ...BASE_LAYOUT,
+        ...(internalLayoutRef.current || {}),
+        ...(subplots.xyPairs.length > 1 ? { grid: { rows: nRows, columns: nColumns, xgap: xGap, ygap: yGap, pattern: 'independent' } } : {}),
+        ...axes,
+        annotations: [...titleAnnotations, ...regressions.annotations],
+        shapes: regressions.shapes,
+        dragmode: config.dragMode,
+        width,
+        height,
+      };
 
       return finalLayout;
     }

diff --git a/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx b/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx
@@ -152,6 +152,8 @@ ControlledSubplots.args = {
         title: 'Petal Length vs Petal Width',
       },
     ],
+    xAxisScale: 'log',
+    yAxisScale: 'log',
     facets: null,
     numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
     shape: null,
@@ -168,6 +170,43 @@ ControlledSubplots.args = {
   },
 };
 
+export const ControlledSingleSubplot: typeof Template = Template.bind({}) as typeof Template;
+ControlledSingleSubplot.args = {
+  externalConfig: {
+    type: ESupportedPlotlyVis.SCATTER,
+    color: null,
+    subplots: [
+      {
+        xColumn: {
+          description: '',
+          id: 'incompleteX',
+          name: 'Incomplete X',
+        },
+        yColumn: {
+          description: '',
+          id: 'incompleteY',
+          name: 'Incomplete Y',
+        },
+        title: 'Nicer Title',
+      },
+    ],
+    xAxisScale: 'log',
+    yAxisScale: 'log',
+    facets: null,
+    numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
+    shape: null,
+    dragMode: EScatterSelectSettings.RECTANGLE,
+    alphaSliderVal: 1,
+    showLabels: ELabelingOptions.NEVER,
+    regressionLineOptions: {
+      type: ERegressionLineType.NONE,
+    },
+  } as IScatterConfig,
+  filterCallback: (option) => {
+    console.log({ option });
+  },
+};
+
 export const ColorByCategory: typeof Template = Template.bind({}) as typeof Template;
 ColorByCategory.args = {
   externalConfig: {

diff --git a/src/vis/stories/fetchIrisData.tsx b/src/vis/stories/fetchIrisData.tsx
@@ -1,6 +1,10 @@
 import { EColumnTypes, VisColumn } from '../interfaces';
 import { iris as dataPromise } from './irisData';
 
+function randomNumberBetweenRange(min: number, max: number): number | null {
+  return Math.random() * (max - min) + min;
+}
+
 export function fetchIrisData(): VisColumn[] {
   return [
     {
@@ -73,5 +77,23 @@ export function fetchIrisData(): VisColumn[] {
       type: EColumnTypes.CATEGORICAL,
       values: () => dataPromise.map((r) => r.species).map((val, i) => ({ id: i.toString(), val: val ?? null })),
     },
+    {
+      info: {
+        description: 'Incomplete X',
+        id: 'incompleteX',
+        name: 'Incomplete X',
+      },
+      type: EColumnTypes.NUMERICAL,
+      values: () => dataPromise.map((val, i) => ({ id: i.toString(), val: randomNumberBetweenRange(0.96499999997, 1.3850000003299998) })),
+    },
+    {
+      info: {
+        description: 'Incomplete Y',
+        id: 'incompleteY',
+        name: 'Incomplete Y',
+      },
+      type: EColumnTypes.NUMERICAL,
+      values: () => dataPromise.map((val, i) => ({ id: i.toString(), val: randomNumberBetweenRange(-1.5419997517300001, 28.96199726903) })),
+    },
   ];
 }