diff --git a/src/vis/scatter/useLayout.tsx b/src/vis/scatter/useLayout.tsx index 5d1266255..8652e5bbd 100644 --- 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 = - 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 = { + ...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 index 46f11052c..4177fd8d9 100644 --- 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 index 3e19c7663..6299f55f5 100644 --- 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) })), + }, ]; }