Faceting title and empty data

src/plots/PlotlyPlot.tsx

@@ -44,6 +44,8 @@ export interface PlotProps<T> 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 */
@@ -87,6 +89,7 @@ function PlotlyPlot<T>(
     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
@@ -144,12 +147,6 @@ function PlotlyPlot<T>(
               ) + '...'
             : 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 +352,39 @@ function PlotlyPlot<T>(
           onUpdate={onUpdate}
           onInitialized={sharedPlotCreation.run}
         />
+        {title && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 31,
+              left: 80,
+              fontSize: 17,
+            }}
+          >
+            {title}
+          </div>
+        )}
+        {showNoDataOverlay && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              backgroundColor: 'black',
+              opacity: '50%',
+              color: 'white',
+              fontSize: 32,
+              userSelect: 'none',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            No Data
+          </div>
+        )}
         {showSpinner && <Spinner />}
       </div>
     </Suspense>

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({});
@@ -43,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,
+};