Generate uniform titles for maps and plots

nsidc · Mar 6, 2024 · 37fad14 · 37fad14
1 parent b8aaa95
commit 37fad14
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/src/components/MainWindow/LinePlot.tsx b/src/components/MainWindow/LinePlot.tsx
@@ -52,7 +52,6 @@ const LinePlot: React.FC<ILinePlotProps> = (props) => {
     );
   }
 
-  const chartTitle = `${regionLongname} - ${varLongname}`;
   const yAxisTitle = props.selectedSatelliteVariable.labelPlotYaxis;
 
   // WARNING: It is _critical_ that the data is copied before passing to
@@ -137,24 +136,17 @@ const LinePlot: React.FC<ILinePlotProps> = (props) => {
     },
   ];
 
-  const ytdSeriesLastNonNullPoint = ytdSeries.filter(p => p[1] !== null).slice(-1)[0];
-  const ytdSeriesLastDate = new Date(ytdSeriesLastNonNullPoint[0]);
   const chartOptions: Highcharts.Options = {
     chart: {
-      height: '95%',
+      height: '90%',
       type: 'line',
     },
     accessibility: {
       // TODO: Add units text
       description: `${varLongname} plotted over the current water year.`,
     },
     title: {
-      text: chartTitle,
-      style: {fontSize: '20px'},
-    },
-    subtitle: {
-      text: `As of ${ytdSeriesLastDate.toISOString().split('T')[0]}`,
-      style: {fontSize: '16px'},
+      text: undefined,
     },
     tooltip: {
       shared: true,

diff --git a/src/components/MainWindow/Tile.tsx b/src/components/MainWindow/Tile.tsx
@@ -68,6 +68,16 @@ const Tile: React.FC<ITileProps> = (props) => {
         FallbackComponent={ErrorFallbackTileComponent}
         resetKeys={[selectedTileType, selectedRegion, selectedSatelliteVariableId]}
       >
+        <div className='tile-title'>
+          <h1><b>{selectedTileType == "map" ? selectedSatelliteVariable.longName : selectedSatelliteVariable.longNamePlot}</b></h1>
+          <h2><b>{selectedRegion.longName}</b> as of <b>{selectedSatelliteVariable.lastDateWithData}</b></h2>
+          <h3>
+            Climatology calculated over{' '}
+            <b>{selectedSatelliteVariable.historicWaterYearRange[0]}</b>
+            {' '}to{' '}
+            <b>{selectedSatelliteVariable.historicWaterYearRange[1]}</b>
+          </h3>
+        </div>
         <Suspense fallback={<LoadingIcon size={200} />}>
           {content}
         </Suspense>

diff --git a/src/style/Tile.css b/src/style/Tile.css
@@ -10,7 +10,23 @@
   flex-direction: column;
 }
 
+.tile-title h1, .tile-title h2, .tile-title h3 {
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+.tile-title h1 {
+  font-size: 1.5em;
+}
+.tile-title h2 {
+  font-size: 1.3em;
+}
+.tile-title h3 {
+  font-size: 1em;
+}
+
 .tile-citation {
+  /* line-height */
   font-size: 14px;
   background: white;
 }