Metadata and download modal - Date display (all charts)

static/js/components/tiles/bar_tile.tsx

@@ -75,7 +75,9 @@ import {
   getStatFormat,
   getStatVarNames,
   ReplacementStrings,
+  StatVarFacetDateRangeMap,
   transformCsvHeader,
+  updateStatVarFacetDateRange,
 } from "../../utils/tile_utils";
 import { buildExploreUrl } from "../../utils/url_utils";
 import { ChartTileContainer } from "./chart_tile";
@@ -144,6 +146,8 @@ export interface BarChartData {
   facets: Record<string, StatMetadata>;
   // A mapping of which stat var used which facets
   statVarToFacets: StatVarFacetMap;
+  // A map of stat var dcids to facet IDs to their specific min and max date range from the chart
+  statVarFacetDateRanges: StatVarFacetDateRangeMap;
   unit: string;
   dateRange: string;
   props: BarTilePropType;
@@ -268,6 +272,7 @@ export function BarTile(props: BarTilePropType): ReactElement {
       sources={props.sources || (barChartData && barChartData.sources)}
       facets={barChartData?.facets}
       statVarToFacets={barChartData?.statVarToFacets}
+      statVarFacetDateRanges={barChartData?.statVarFacetDateRanges}
       subtitle={props.subtitle}
       title={props.title}
       statVarSpecs={props.variables}
@@ -541,6 +546,7 @@ function rawToChart(
   const sources = new Set<string>();
   const facets: Record<string, StatMetadata> = {};
   const statVarToFacets: StatVarFacetMap = {};
+  const statVarFacetDateRanges: StatVarFacetDateRangeMap = {};
   // Track original order of stat vars in props, to maintain 1:1 pairing of
   // colors to stat var labels even after sorting
   const statVarOrder = props.variables.map(
@@ -567,6 +573,14 @@ function rawToChart(
         date: stat.date,
       };
       dates.add(stat.date);
+
+      updateStatVarFacetDateRange(
+        statVarFacetDateRanges,
+        statVar,
+        stat.facet,
+        stat.date
+      );
+
       if (raw.facets[stat.facet]) {
         sources.add(raw.facets[stat.facet].provenanceUrl);
         facets[stat.facet] = raw.facets[stat.facet];
@@ -598,6 +612,13 @@ function rawToChart(
           }
           statVarToFacets[denomStatVar].add(denomInfo.facetId);
         }
+        // Update date range for the denominator stat var / facet id
+        updateStatVarFacetDateRange(
+          statVarFacetDateRanges,
+          denomStatVar,
+          denomInfo.facetId,
+          denomInfo.date
+        );
       }
       if (scaling) {
         dataPoint.value *= scaling;
@@ -671,6 +692,7 @@ function rawToChart(
     sources,
     facets,
     statVarToFacets,
+    statVarFacetDateRanges,
     dateRange: getDateRange(Array.from(dates)),
     unit,
     props,

static/js/components/tiles/chart_tile.tsx

@@ -38,6 +38,7 @@ import {
   getChartTitle,
   getMergedSvg,
   ReplacementStrings,
+  StatVarFacetDateRangeMap,
 } from "../../utils/tile_utils";
 import { ChartFooter } from "./chart_footer";
 import { LoadingHeader } from "./loading_header";
@@ -51,8 +52,8 @@ interface ChartTileContainerProp {
   facets?: Record<string, StatMetadata>;
   // A mapping of which stat var used which facets
   statVarToFacets?: StatVarFacetMap;
-  // A map of stat var dcids to their specific min and max date range from the chart
-  statVarDateRanges?: Record<string, { minDate: string; maxDate: string }>;
+  // A map of stat var dcids to facet IDs to their specific min and max date range from the chart
+  statVarFacetDateRanges?: StatVarFacetDateRangeMap;
   children: React.ReactNode;
   replacementStrings: ReplacementStrings;
   // Whether or not to allow chart embedding action.
@@ -131,7 +132,7 @@ export function ChartTileContainer(
               facets={props.facets}
               statVarToFacets={props.statVarToFacets}
               statVarSpecs={props.statVarSpecs}
-              statVarDateRanges={props.statVarDateRanges}
+              statVarFacetDateRanges={props.statVarFacetDateRanges}
               surface={props.surface}
             />
           )}
@@ -161,7 +162,7 @@ export function ChartTileContainer(
           statVarSpecs={props.statVarSpecs}
           facets={props.facets}
           statVarToFacets={props.statVarToFacets}
-          statVarDateRanges={props.statVarDateRanges}
+          statVarFacetDateRanges={props.statVarFacetDateRanges}
           apiRoot={props.apiRoot}
         />
       )}

static/js/components/tiles/highlight_tile.tsx

@@ -54,6 +54,8 @@ import {
   getNoDataErrorMsg,
   getStatFormat,
   ReplacementStrings,
+  StatVarFacetDateRangeMap,
+  updateStatVarFacetDateRange,
 } from "../../utils/tile_utils";
 
 // units that should be formatted as part of the number
@@ -85,6 +87,8 @@ export interface HighlightData extends Observation {
   facets: Record<string, StatMetadata>;
   // A mapping of which stat var used which facets
   statVarToFacets: StatVarFacetMap;
+  // A map of stat var dcids to facet IDs to their specific min and max date range from the chart
+  statVarFacetDateRanges: StatVarFacetDateRangeMap;
   numFractionDigits?: number;
   errorMsg: string;
 }
@@ -195,6 +199,7 @@ export function HighlightTile(props: HighlightTilePropType): ReactElement {
           facets={highlightData.facets}
           statVarToFacets={highlightData.statVarToFacets}
           statVarSpecs={[props.statVarSpec]}
+          statVarFacetDateRanges={highlightData.statVarFacetDateRanges}
           getObservationSpecs={getObservationSpecs}
           surface={props.surface}
         />
@@ -251,6 +256,7 @@ export const fetchData = async (
 
   const facets: Record<string, StatMetadata> = {};
   const statVarToFacets: StatVarFacetMap = {};
+  const statVarFacetDateRanges: StatVarFacetDateRangeMap = {};
 
   const facet = statResp.facets[mainStatData.facet];
 
@@ -261,6 +267,15 @@ export const fetchData = async (
     }
     statVarToFacets[statVarSpec.statVar].add(mainStatData.facet);
   }
+  // Update date range for the main stat var
+  if (mainStatData.date) {
+    updateStatVarFacetDateRange(
+      statVarFacetDateRanges,
+      statVarSpec.statVar,
+      mainStatData.facet,
+      mainStatData.date
+    );
+  }
 
   const sources = new Set<string>();
   if (facet && facet.provenanceUrl) {
@@ -300,6 +315,15 @@ export const fetchData = async (
         }
         statVarToFacets[statVarSpec.denom].add(denomInfo.facetId);
       }
+      // Update date range for the denominator stat var
+      if (denomInfo.date) {
+        updateStatVarFacetDateRange(
+          statVarFacetDateRanges,
+          statVarSpec.denom,
+          denomInfo.facetId,
+          denomInfo.date
+        );
+      }
     } else {
       value = null;
     }
@@ -328,6 +352,7 @@ export const fetchData = async (
     sources,
     facets,
     statVarToFacets,
+    statVarFacetDateRanges,
     errorMsg,
   };
 };

static/js/components/tiles/line_tile.tsx

@@ -70,7 +70,9 @@ import {
   getStatFormat,
   getStatVarNames,
   ReplacementStrings,
+  StatVarFacetDateRangeMap,
   transformCsvHeader,
+  updateStatVarFacetDateRange,
 } from "../../utils/tile_utils";
 import { buildExploreUrl } from "../../utils/url_utils";
 import { ChartTileContainer } from "./chart_tile";
@@ -142,8 +144,8 @@ export interface LineChartData {
   facets: Record<string, StatMetadata>;
   // A mapping of which stat var used which facets
   statVarToFacets: StatVarFacetMap;
-  // A map of stat var dcids to their specific min and max date range from the chart
-  statVarDateRanges?: Record<string, { minDate: string; maxDate: string }>;
+  // A map of stat var dcids to facet IDs to their specific min and max date range from the chart
+  statVarFacetDateRanges?: StatVarFacetDateRangeMap;
   unit: string;
   // props used when fetching this data
   props: LineTilePropType;
@@ -237,7 +239,7 @@ export function LineTile(props: LineTilePropType): ReactElement {
       sources={props.sources || (chartData && chartData.sources)}
       facets={chartData?.facets}
       statVarToFacets={chartData?.statVarToFacets}
-      statVarDateRanges={chartData?.statVarDateRanges}
+      statVarFacetDateRanges={chartData?.statVarFacetDateRanges}
       subtitle={props.subtitle}
       title={props.title}
       statVarSpecs={props.statVarSpec}
@@ -505,7 +507,7 @@ function rawToChart(
   const facets: Record<string, StatMetadata> = {};
   const statVarToFacets: StatVarFacetMap = {};
   const allDates = new Set<string>();
-  const statVarDates = new Map<string, Set<string>>();
+  const statVarFacetDateRanges: StatVarFacetDateRangeMap = {};
   // TODO: make a new wrapper to fetch series data & do the processing there.
   const unit2count = {};
   for (const spec of props.statVarSpec) {
@@ -538,6 +540,7 @@ function rawToChart(
     for (const placeDcid in entityToSeries) {
       const series = raw.data[spec.statVar][placeDcid];
       let obsList = series.series;
+      let denomFacetId: string;
       if (spec.denom) {
         let denomInfo = denomsByFacet[series.facet];
         // if the placeDcid is not available in the facet-specific denom, use best available
@@ -558,6 +561,7 @@ function rawToChart(
           }
           statVarToFacets[spec.denom].add(denomSeries.facet);
         }
+        denomFacetId = denomSeries?.facet;
       }
       if (obsList.length > 0) {
         const dataPoints: DataPoint[] = [];
@@ -575,20 +579,22 @@ function rawToChart(
           currentSvDates.add(obs.date);
         }
 
-        if (!statVarDates.has(spec.statVar)) {
-          statVarDates.set(spec.statVar, new Set<string>());
-        }
-        currentSvDates.forEach((date) =>
-          statVarDates.get(spec.statVar).add(date)
-        );
-        if (spec.denom) {
-          if (!statVarDates.has(spec.denom)) {
-            statVarDates.set(spec.denom, new Set<string>());
-          }
-          currentSvDates.forEach((date) =>
-            statVarDates.get(spec.denom).add(date)
+        currentSvDates.forEach((date) => {
+          updateStatVarFacetDateRange(
+            statVarFacetDateRanges,
+            spec.statVar,
+            series.facet,
+            date
           );
-        }
+          if (spec.denom && denomFacetId) {
+            updateStatVarFacetDateRange(
+              statVarFacetDateRanges,
+              spec.denom,
+              denomFacetId,
+              date
+            );
+          }
+        });
 
         const label = options.useBothLabels
           ? `${statVarDcidToName[spec.statVar]} for ${
@@ -611,20 +617,6 @@ function rawToChart(
     dataGroups[i].value = expandDataPoints(dataGroups[i].value, allDates);
   }
 
-  const statVarDateRanges: Record<
-    string,
-    { minDate: string; maxDate: string }
-  > = {};
-  for (const [dcid, dates] of statVarDates.entries()) {
-    const sortedSvDates = Array.from(dates).sort();
-    if (sortedSvDates.length > 0) {
-      statVarDateRanges[dcid] = {
-        minDate: sortedSvDates[0],
-        maxDate: sortedSvDates[sortedSvDates.length - 1],
-      };
-    }
-  }
-
   const errorMsg = _.isEmpty(dataGroups)
     ? getNoDataErrorMsg(props.statVarSpec)
     : "";
@@ -636,7 +628,7 @@ function rawToChart(
     unit,
     props,
     errorMsg,
-    statVarDateRanges,
+    statVarFacetDateRanges,
   };
 }
 

static/js/components/tiles/map_tile.tsx

@@ -95,7 +95,9 @@ import {
   getStatFormat,
   getStatVarNames,
   ReplacementStrings,
+  StatVarFacetDateRangeMap,
   transformCsvHeader,
+  updateStatVarFacetDateRange,
 } from "../../utils/tile_utils";
 import { ChartTileContainer } from "./chart_tile";
 import { ContainedInPlaceSingleVariableDataSpec } from "./tile_types";
@@ -215,6 +217,8 @@ export interface MapChartData {
   facets?: Record<string, StatMetadata>;
   // A mapping of which stat var used which facets
   statVarToFacets?: StatVarFacetMap;
+  // A map of stat var dcids to facet IDs to their specific min and max date range from the chart
+  statVarFacetDateRanges?: StatVarFacetDateRangeMap;
   // Set if the component receives a date value from a subscribed event
   dateOverride?: string;
   // A mapping of stat var to the name of the variable
@@ -385,6 +389,7 @@ export function MapTile(props: MapTilePropType): ReactElement {
       sources={props.sources || (mapChartData && mapChartData.sources)}
       facets={mapChartData?.facets}
       statVarToFacets={mapChartData?.statVarToFacets}
+      statVarFacetDateRanges={mapChartData?.statVarFacetDateRanges}
       forwardRef={containerRef}
       replacementStrings={
         mapChartData && getReplacementStrings(props, mapChartData)
@@ -630,6 +635,7 @@ function rawToChart(
   const sources: Set<string> = new Set();
   const facets: Record<string, StatMetadata> = {};
   const statVarToFacets: StatVarFacetMap = {};
+  const statVarFacetDateRanges: StatVarFacetDateRangeMap = {};
   let isUsaPlace = true; // whether all layers are about USA places
 
   for (const rawData of rawDataArray) {
@@ -701,6 +707,14 @@ function rawToChart(
           sources.add(source);
         }
       });
+
+      updateStatVarFacetDateRange(
+        statVarFacetDateRanges,
+        rawData.variable.statVar,
+        placeStat[placeDcid].facet,
+        placeChartData.date
+      );
+
       if (rawData.variable.denom) {
         const facet = placeStat[placeDcid].facet;
         const denomInfo = getDenomInfo(
@@ -727,6 +741,13 @@ function rawToChart(
           }
           statVarToFacets[denomStatVar].add(denomInfo.facetId);
         }
+        const denomFacetId = denomInfo.facetId;
+        updateStatVarFacetDateRange(
+          statVarFacetDateRanges,
+          denomStatVar,
+          denomFacetId,
+          denomInfo.date
+        );
       }
       if (scaling) {
         value = value * scaling;
@@ -764,6 +785,7 @@ function rawToChart(
     sources,
     facets,
     statVarToFacets,
+    statVarFacetDateRanges,
     dateOverride,
     statVarToVariableName,
   };