OKRF23-87 FIxed HexMap

cmu-delphi · Jan 12, 2024 · 1e2dce3 · 1e2dce3
1 parent 12ae3b5
commit 1e2dce3
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 49 deletions.
diff --git a/src/blocks/OldDateIndicatorWarning.svelte b/src/blocks/OldDateIndicatorWarning.svelte
diff --git a/src/blocks/RegionHexMap.svelte b/src/blocks/RegionHexMap.svelte
@@ -33,6 +33,10 @@
    * @type {import("../../stores/DataFetcher").DataFetcher}
    */
   export let fetcher;
+  /**
+   * @type {import("../../stores/params").DateParam}
+   */
+  export let hospitalAdmissionMaxDate;
 
   let loading = false;
   /**
@@ -74,18 +78,51 @@
     });
   }
 
-  $: tileData = loadData(sensor, date, $isMobileDevice);
-  $: spec = generateSparkLine({
-    highlightDate: false,
-    interactive: false,
-    domain: date.sparkLineTimeFrame.domain,
-  });
-  $: invertedSpec = generateSparkLine({
-    color: 'white',
-    highlightDate: false,
-    interactive: false,
-    domain: date.sparkLineTimeFrame.domain,
-  });
+  function getTileData(sensor, date, hospitalAdmissionMaxDate, isMobile) {
+    if (date.value > hospitalAdmissionMaxDate.value) {
+      return loadData(sensor, hospitalAdmissionMaxDate, isMobile);
+    } else {
+      return loadData(sensor, date, isMobile);
+    }
+  }
+
+  function getSpec(date, hospitalAdmissionMaxDate) {
+    if (date.value > hospitalAdmissionMaxDate.value) {
+      return generateSparkLine({
+        highlightDate: false,
+        interactive: false,
+        domain: hospitalAdmissionMaxDate.sparkLineTimeFrame.domain,
+      });
+    } else {
+      return generateSparkLine({
+        highlightDate: false,
+        interactive: false,
+        domain: date.sparkLineTimeFrame.domain,
+      });
+    }
+  }
+
+  function getInvertedSpec(date, hospitalAdmissionMaxDate) {
+    if (date.value > hospitalAdmissionMaxDate.value) {
+      return generateSparkLine({
+        color: 'white',
+        highlightDate: false,
+        interactive: false,
+        domain: hospitalAdmissionMaxDate.sparkLineTimeFrame.domain,
+      });
+    } else {
+      return generateSparkLine({
+        color: 'white',
+        highlightDate: false,
+        interactive: false,
+        domain: date.sparkLineTimeFrame.domain,
+      });
+    }
+  }
+
+  $: tileData = getTileData(sensor, date, hospitalAdmissionMaxDate, $isMobileDevice);
+  $: spec = getSpec(date, hospitalAdmissionMaxDate);
+  $: invertedSpec = getInvertedSpec(date, hospitalAdmissionMaxDate);
   $: colorScale = sensor.createColorScale('state');
   $: dumpData = Promise.all(tileData.map((d) => d.dump)).then((rows) => rows.flat());
 
@@ -129,12 +166,21 @@
           <span class="title">{tile.propertyId}</span>
           {#if !$isMobileDevice}
             <div class="vega-wrapper">
-              <Vega
-                spec={isInvertedColor(v) ? invertedSpec : spec}
-                data={tile.sparkLine}
-                signals={{ currentDate: date.value }}
-                noDataText="N/A"
-              />
+              {#if date.value > hospitalAdmissionMaxDate.value}
+                <Vega
+                  spec={isInvertedColor(v) ? invertedSpec : spec}
+                  data={tile.sparkLine}
+                  signals={{ currentDate: hospitalAdmissionMaxDate.value }}
+                  noDataText="N/A"
+                />
+              {:else}
+                <Vega
+                  spec={isInvertedColor(v) ? invertedSpec : spec}
+                  data={tile.sparkLine}
+                  signals={{ currentDate: date.value }}
+                  noDataText="N/A"
+                />
+              {/if}
             </div>
             <span class="value"><SensorValue {sensor} value={v ? v.value : null} /></span>
           {/if}
@@ -153,7 +199,21 @@
     <div>Hex fill color: value at selected date</div>
   </div>
   <ColorLegend {sensor} level="state" gradientLength={$isMobileDevice ? 250 : 280}>
-    <DownloadMenu fileName="{sensor.name}_US_States_{formatDateISO(date.value)}" data={dumpData} absolutePos {sensor} />
+    {#if date.value > hospitalAdmissionMaxDate.value}
+      <DownloadMenu
+        fileName="{sensor.name}_US_States_{formatDateISO(hospitalAdmissionMaxDate.value)}"
+        data={dumpData}
+        absolutePos
+        {sensor}
+      />
+    {:else}
+      <DownloadMenu
+        fileName="{sensor.name}_US_States_{formatDateISO(date.value)}"
+        data={dumpData}
+        absolutePos
+        {sensor}
+      />
+    {/if}
   </ColorLegend>
 </div>
 

diff --git a/src/blocks/RegionMapWrapper.svelte b/src/blocks/RegionMapWrapper.svelte
@@ -4,7 +4,9 @@
   import RegionHexMap from './RegionHexMap.svelte';
   import RegionMap from './RegionMap.svelte';
   import Toggle from '../components/Toggle.svelte';
-  import OldDateIndicatorWarning from './OldDateIndicatorWarning.svelte';
+  import IndicatorWarning from './IndicatorWarning.svelte';
+  import { currentDateObject } from '../stores';
+  import { DateParam } from '../stores/params';
 
   /**
    * @type {import("../../stores/params").DateParam}
@@ -28,19 +30,21 @@
   $: hasCounties = sensor.value.levels.includes('county');
   let showChoropleth = false;
 
-  $: if (sensor.timeFrame.max < date.value) {
-    date.set(sensor.timeFrame.max);
+  $: hospitalAdmissionMaxDate = sensor.timeFrame.max;
+  $: if (hospitalAdmissionMaxDate < date.value) {
+    hospitalAdmissionMaxDate = new DateParam($currentDateObject);
+    hospitalAdmissionMaxDate.set(sensor.timeFrame.max);
   }
 </script>
 
-<OldDateIndicatorWarning {sensor} {date} />
 {#if region.level === 'nation'}
   <p class="uk-text-center uk-text-italic ux-hint">
     <span class="inline-svg-icon">
       {@html mousePointerIcon}
     </span>
     Click on a state to explore further
   </p>
+  <IndicatorWarning {date} {region} {sensor} {fetcher} />
   <div class="toggle-center-wrapper">
     <Toggle bind:checked={showChoropleth} before="Beehive Grid"
       ><span>
@@ -56,7 +60,7 @@
       <RegionMap {region} {date} {sensor} {fetcher} />
     {/if}
   {:else}
-    <RegionHexMap {region} {date} {sensor} {fetcher} />
+    <RegionHexMap {region} {date} {sensor} {fetcher} {hospitalAdmissionMaxDate} />
   {/if}
 {:else}
   <RegionMap {region} {date} {sensor} {fetcher} />