From da22b157a938a82d27f8712ddccbcd1347602918 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 16 Nov 2021 13:49:09 -0500 Subject: [PATCH 01/10] Make plot title outside of Plotly --- src/plots/PlotlyPlot.tsx | 18 ++++++++++++------ src/stories/plots/Barplot.stories.tsx | 1 + 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index 57941b80..69f08f90 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -144,12 +144,6 @@ function PlotlyPlot( ) + '...' : plotlyProps?.layout?.yaxis?.title, }, - title: { - text: title, - xref: 'paper', - x: 0, - xanchor: 'left', // left aligned to left edge (y-axis) of plot - }, showlegend: displayLegend ?? true, margin: { t: spacingOptions?.marginTop, @@ -355,6 +349,18 @@ function PlotlyPlot( onUpdate={onUpdate} onInitialized={sharedPlotCreation.run} /> + {title && ( +
+ {title} +
+ )} {showSpinner && } diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index a87f5dd2..07254ecc 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -29,6 +29,7 @@ Basic.args = { independentAxisLabel: 'Animal', legendTitle: 'Domesticated', opacity: 0.75, + title: 'Awesomeness of animals stratified by domestication', }; export const EmptyData = Template.bind({}); From 811305f37626580dfcc7983784b61e7d4766ca04 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 16 Nov 2021 17:19:24 -0500 Subject: [PATCH 02/10] Add No Data overlay controlled by boolean prop --- src/plots/PlotlyPlot.tsx | 23 +++++++++++++++++++++++ src/stories/plots/Barplot.stories.tsx | 7 +++++++ 2 files changed, 30 insertions(+) diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index 69f08f90..9ba87e3b 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -56,6 +56,7 @@ export interface PlotProps extends ColorPaletteAddon { storedIndependentAxisTickLabel?: string[]; /** list of checked legend items via checkbox input */ checkedLegendItems?: string[]; + showNoDataOverlay?: boolean; } const Plot = lazy(() => import('react-plotly.js')); @@ -95,6 +96,7 @@ function PlotlyPlot( storedIndependentAxisTickLabel, checkedLegendItems, colorPalette = ColorPaletteDefault, + showNoDataOverlay, ...plotlyProps } = props; @@ -361,6 +363,27 @@ function PlotlyPlot( {title} )} + {showNoDataOverlay && ( +
+ No Data +
+ )} {showSpinner && } diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index 07254ecc..fbe56d7f 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -44,3 +44,10 @@ EmptyDataLoading.args = { independentAxisLabel: 'Independent axis label', showSpinner: true, }; + +export const NoDataOverlay = Template.bind({}); +NoDataOverlay.args = { + dependentAxisLabel: 'Dependent axis label', + independentAxisLabel: 'Independent axis label', + showNoDataOverlay: true, +}; From 9b9db8a93a24bec3ce1d806808dabbcb9feeabba Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 16 Nov 2021 17:23:48 -0500 Subject: [PATCH 03/10] Add comment --- src/plots/PlotlyPlot.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index 9ba87e3b..d01f7662 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -44,6 +44,8 @@ export interface PlotProps extends ColorPaletteAddon { displayLibraryControls?: boolean; /** show a loading... spinner in the middle of the container div */ showSpinner?: boolean; + /** Show an overlay with the words 'No Data' */ + showNoDataOverlay?: boolean; /** Options for customizing plot legend layout and appearance. */ legendOptions?: PlotLegendAddon; /** legend title */ @@ -56,7 +58,6 @@ export interface PlotProps extends ColorPaletteAddon { storedIndependentAxisTickLabel?: string[]; /** list of checked legend items via checkbox input */ checkedLegendItems?: string[]; - showNoDataOverlay?: boolean; } const Plot = lazy(() => import('react-plotly.js')); @@ -88,6 +89,7 @@ function PlotlyPlot( legendTitle, spacingOptions, showSpinner, + showNoDataOverlay, // set default max number of characters (20) for legend ellipsis maxLegendTextLength = DEFAULT_MAX_LEGEND_TEXT_LENGTH, // expose data for applying legend ellipsis @@ -96,7 +98,6 @@ function PlotlyPlot( storedIndependentAxisTickLabel, checkedLegendItems, colorPalette = ColorPaletteDefault, - showNoDataOverlay, ...plotlyProps } = props; From 1ad2c63029117c543e74ae90a2d596ab297a77dd Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 16 Nov 2021 17:54:27 -0500 Subject: [PATCH 04/10] Add showNoDataOverlay prop to FacetedPlot --- src/plots/FacetedPlot.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index e194d3bc..b72ee09b 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -77,6 +77,7 @@ function renderFacetedPlot>( interactive={false} // pass checkedLegendItems to PlotlyPlot checkedLegendItems={checkedLegendItems} + showNoDataOverlay={data == null} /> ))} From 72536b7ddfd6d5d905bacd0497ccb70699342ba2 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 17 Nov 2021 10:40:10 -0500 Subject: [PATCH 05/10] Compute title spacing dynamically and make minor layout changes --- src/plots/MosaicPlot.tsx | 14 +++++++------- src/plots/PlotlyPlot.tsx | 20 +++++++++++--------- src/stories/plots/Barplot.stories.tsx | 1 + src/types/plots/addOns.ts | 7 +++++++ 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/plots/MosaicPlot.tsx b/src/plots/MosaicPlot.tsx index bd6f9ec1..b5c88236 100644 --- a/src/plots/MosaicPlot.tsx +++ b/src/plots/MosaicPlot.tsx @@ -11,6 +11,7 @@ import _ from 'lodash'; // util functions for handling long tick labels with ellipsis import { axisTickLableEllipsis } from '../utils/axis-tick-label-ellipsis'; import { makeStyles } from '@material-ui/core/styles'; +import { PlotSpacingDefault } from '../types/plots/addOns'; export interface MosaicPlotProps extends PlotProps { /** label for independent axis */ @@ -87,10 +88,6 @@ const MosaicPlot = makePlotlyPlotComponent( // The gap between each legend item let legendTraceGroupGap: number | undefined; - // ploltly.js default for left, bottom, and right margins is the same - const defaultMargin = 80; - const defaultMarginTop = 100; - if (restProps.displayLegend) { // Not currently calculating this---just using the default // Might need to be calculated or adjusted if more flexibility is needed @@ -110,8 +107,10 @@ const MosaicPlot = makePlotlyPlotComponent( if (containerHeight) { // Estimate the plot proper height - const marginTop = spacingOptions?.marginTop ?? defaultMarginTop; - const marginBottom = spacingOptions?.marginBottom ?? defaultMargin; + const marginTop = + spacingOptions?.marginTop ?? PlotSpacingDefault.marginTop; + const marginBottom = + spacingOptions?.marginBottom ?? PlotSpacingDefault.marginBottom; // Subtraction at end is due to x-axis automargin shrinking the plot const plotHeight = containerHeight - @@ -148,7 +147,8 @@ const MosaicPlot = makePlotlyPlotComponent( // Leave yAxisTitleStandoff and legendTraceGroupGap undefined } - const marginLeft = spacingOptions?.marginLeft ?? defaultMargin; + const marginLeft = + spacingOptions?.marginLeft ?? PlotSpacingDefault.marginLeft; const newSpacingOptions = { ...spacingOptions, marginLeft: marginLeft + marginLeftExtra, diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index d01f7662..d9e3e3a2 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -15,6 +15,7 @@ import { PlotRef } from '../types/plots'; import { PlotLegendAddon, PlotSpacingAddon, + PlotSpacingDefault, ColorPaletteAddon, ColorPaletteDefault, } from '../types/plots/addOns'; @@ -356,8 +357,9 @@ function PlotlyPlot(
@@ -368,13 +370,13 @@ function PlotlyPlot(
( alignItems: 'center', }} > - No Data + No data
)} {showSpinner && } diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index fbe56d7f..1fe8d09a 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -50,4 +50,5 @@ NoDataOverlay.args = { dependentAxisLabel: 'Dependent axis label', independentAxisLabel: 'Independent axis label', showNoDataOverlay: true, + title: 'Awesomeness of animals stratified by domestication', }; diff --git a/src/types/plots/addOns.ts b/src/types/plots/addOns.ts index a7099843..271a24db 100644 --- a/src/types/plots/addOns.ts +++ b/src/types/plots/addOns.ts @@ -41,6 +41,13 @@ export type PlotSpacingAddon = { /** Padding, applied equally on all sides. */ padding?: number; }; +export const PlotSpacingDefault: Required = { + marginTop: 100, + marginRight: 80, + marginBottom: 80, + marginLeft: 80, + padding: 0, +}; export type OrientationAddon = { /** Orientation of plot - default is vertical (e.g. independent axis at bottom) */ From 73c884206058de0ea08a2f0d408b32f6332e5434 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 17 Nov 2021 10:42:24 -0500 Subject: [PATCH 06/10] Factor margin calculations into variables --- src/plots/PlotlyPlot.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index d9e3e3a2..2c1cf19d 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -335,6 +335,10 @@ function PlotlyPlot( [plotId] ); + const marginTop = spacingOptions?.marginTop ?? PlotSpacingDefault.marginTop; + const marginLeft = + spacingOptions?.marginLeft ?? PlotSpacingDefault.marginLeft; + return (
(
@@ -370,9 +373,7 @@ function PlotlyPlot(
Date: Wed, 17 Nov 2021 11:07:01 -0500 Subject: [PATCH 07/10] Fix small styling bug --- src/plots/PlotlyPlot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index 2c1cf19d..53ce0575 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -373,7 +373,7 @@ function PlotlyPlot(
Date: Wed, 17 Nov 2021 11:15:57 -0500 Subject: [PATCH 08/10] Remove NO DATA text addition to title --- src/plots/FacetedPlot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index b72ee09b..a8e41567 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -72,7 +72,7 @@ function renderFacetedPlot>( }} key={index} data={data} - title={data == null ? `NO DATA: ${label}` : label} + title={label} displayLegend={false} interactive={false} // pass checkedLegendItems to PlotlyPlot From 31ee96af437cd63f99d221622d861c6c15b298d9 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 18 Nov 2021 15:40:33 -0500 Subject: [PATCH 09/10] Unique styling for No data title & minor styling changes --- src/plots/PlotlyPlot.tsx | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index 53ce0575..abdba54f 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -357,35 +357,39 @@ function PlotlyPlot( onUpdate={onUpdate} onInitialized={sharedPlotCreation.run} /> - {title && ( -
- {title} -
- )} {showNoDataOverlay && (
- No data + {title === 'No data' ? 'No missing data' : 'No data'} +
+ )} + {title && ( +
+ {title}
)} {showSpinner && } From de793f573b354ffa1c2830dd662153001e72dabe Mon Sep 17 00:00:00 2001 From: Bob Date: Fri, 19 Nov 2021 17:22:18 +0000 Subject: [PATCH 10/10] add italics for 'No data' title --- src/plots/PlotlyPlot.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index abdba54f..d5194b0f 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -387,6 +387,7 @@ function PlotlyPlot( top: marginTop / 3, left: marginLeft, fontSize: 17, + fontStyle: title === 'No data' ? 'italic' : 'normal', }} > {title}