Merge remote-tracking branch 'origin/dev' into sgratzl/annotationlog

Author: sgratzl

src/modes/mobile/HistoryLineChart.svelte

@@ -53,6 +53,10 @@
    */
   export let ends = null;
 
+  export let expandableWindow = false;
+
+  let showFull = false;
+
   /**
    * @type {import("../../stores/params").Region}
    */
@@ -66,18 +70,19 @@
   };
 
   $: highlightDate = date.value;
+  $: timeFrame = showFull && expandableWindow ? date.sensorTimeFrame : date.windowTimeFrame;
 
   /**
    * @param {import('../../stores/params').SensorParam} sensor
    * @param {import('../../stores/params').RegionParam} region
    * @param {import('../../stores/params').DateParam} date
    */
-  function genSpec(sensor, region, date, height, zero, singleRaw, isMobile) {
+  function genSpec(sensor, region, date, timeFrame, height, zero, singleRaw, isMobile) {
     const options = {
       initialDate: highlightDate || date.value,
       height,
       color: MULTI_COLORS[0],
-      domain: date.windowTimeFrame.domain,
+      domain: timeFrame.domain,
       zero,
       xTitle: sensor.xAxis,
       title: [sensor.name, `in ${region.displayName}`],
@@ -111,26 +116,26 @@
    * @param {import("../../stores/params").DateParam} date
    * @param {import("../../stores/params").RegionParam} region
    */
-  function loadData(sensor, region, date) {
-    if (!region.value || !date.value) {
+  function loadData(sensor, region, timeFrame) {
+    if (!region.value) {
       return null;
     }
-    const selfData = fetcher.fetch1Sensor1RegionNDates(sensor, region, date.windowTimeFrame);
+    const selfData = fetcher.fetch1Sensor1RegionNDates(sensor, region, timeFrame);
 
     const data = [selfData];
 
     if (region.level === 'county') {
       const state = getInfoByName(region.state);
-      const stateData = fetcher.fetch1Sensor1RegionNDates(sensor, state, date.windowTimeFrame);
+      const stateData = fetcher.fetch1Sensor1RegionNDates(sensor, state, timeFrame);
       const relatedCounties = getRelatedCounties(region.value);
       const relatedData = fetcher
-        .fetch1SensorNRegionsNDates(sensor, relatedCounties, date.windowTimeFrame)
+        .fetch1SensorNRegionsNDates(sensor, relatedCounties, timeFrame)
         .then((r) => averageByDate(r, sensor, neighboringInfo))
         .then((r) => addMissing(r, sensor));
       data.push(relatedData, stateData);
     }
     if (region.level !== 'nation') {
-      data.push(fetcher.fetch1Sensor1RegionNDates(sensor, nationInfo, date.windowTimeFrame));
+      data.push(fetcher.fetch1Sensor1RegionNDates(sensor, nationInfo, timeFrame));
     }
     return Promise.all(data).then((rows) => rows.reverse().flat());
   }
@@ -140,12 +145,12 @@
    * @param {import("../../stores/params").DateParam} date
    * @param {import("../../stores/params").RegionParam} region
    */
-  function loadSingleData(sensor, region, date) {
-    if (!region.value || !date.value) {
+  function loadSingleData(sensor, region, timeFrame) {
+    if (!region.value) {
       return null;
     }
-    const selfData = fetcher.fetch1Sensor1RegionNDates(sensor, region, date.windowTimeFrame);
-    const rawData = fetcher.fetch1Sensor1RegionNDates(sensor.rawValue, region, date.windowTimeFrame);
+    const selfData = fetcher.fetch1Sensor1RegionNDates(sensor, region, timeFrame);
+    const rawData = fetcher.fetch1Sensor1RegionNDates(sensor.rawValue, region, timeFrame);
 
     return Promise.all([selfData, rawData]).then((data) => {
       return combineSignals(data, data[0], ['smoothed', 'raw']);
@@ -174,28 +179,25 @@
   /**
    * @param {import("../../stores/params").SensorParam} sensor
    * @param {import("../../stores/params").Region[]} region
-   * @param {import("../../stores/params").DateParam} date
    */
-  function generateFileName(sensor, regions, date, raw) {
+  function generateFileName(sensor, regions, timeFrame, raw) {
     const regionName = regions.map((region) => `${region.propertyId}-${region.displayName}`).join(',');
     let suffix = '';
     if (raw) {
       suffix = '_RawVsSmoothed';
     }
-    return `${sensor.name}_${regionName}_${formatDateISO(date.windowTimeFrame.min)}-${formatDateISO(
-      date.windowTimeFrame.max,
-    )}${suffix}`;
+    return `${sensor.name}_${regionName}_${formatDateISO(timeFrame.min)}-${formatDateISO(timeFrame.max)}${suffix}`;
   }
 
-  function injectRanges(spec, date, annotations) {
+  function injectRanges(spec, timeFrame, annotations) {
     if (annotations.length > 0) {
-      spec.layer.unshift(genAnnotationLayer(annotations, date.windowTimeFrame));
+      spec.layer.unshift(genAnnotationLayer(annotations, timeFrame));
     }
-    if (starts && starts > date.windowTimeFrame.min) {
-      spec.layer.unshift(genDateHighlight(starts > date.windowTimeFrame.max ? date.windowTimeFrame.max : starts));
+    if (starts && starts > timeFrame.min) {
+      spec.layer.unshift(genDateHighlight(starts > timeFrame.max ? timeFrame.max : starts));
     }
-    if (ends && ends < date.windowTimeFrame.max) {
-      spec.layer.unshift(genDateHighlight(ends < date.windowTimeFrame.min ? date.windowTimeFrame.min : ends));
+    if (ends && ends < timeFrame.max) {
+      spec.layer.unshift(genDateHighlight(ends < timeFrame.min ? timeFrame.min : ends));
     }
     return spec;
   }
@@ -204,16 +206,15 @@
   let singleRaw = false;
 
   $: regions = raw ? [region.value] : resolveRegions(region.value);
-  $: annotations = $annotationManager.getWindowAnnotations(
-    sensor.value,
-    regions,
-    date.windowTimeFrame.min,
-    date.windowTimeFrame.max,
-  );
+  $: annotations = $annotationManager.getWindowAnnotations(sensor.value, regions, timeFrame.min, timeFrame.max);
   $: raw = singleRaw && sensor.rawValue != null;
-  $: spec = injectRanges(genSpec(sensor, region, date, height, !zoom, raw, $isMobileDevice), date, annotations);
-  $: data = raw ? loadSingleData(sensor, region, date) : loadData(sensor, region, date);
-  $: fileName = generateFileName(sensor, regions, date, raw);
+  $: spec = injectRanges(
+    genSpec(sensor, region, date, timeFrame, height, !zoom, raw, $isMobileDevice),
+    timeFrame,
+    annotations,
+  );
+  $: data = raw ? loadSingleData(sensor, region, timeFrame) : loadData(sensor, region, timeFrame);
+  $: fileName = generateFileName(sensor, regions, timeFrame, raw);
 
   function findValue(region, data, date, prop = 'value') {
     if (!date) {
@@ -243,7 +244,7 @@
 
 <Vega
   bind:this={vegaRef}
-  {className}
+  className="{className} {showFull && expandableWindow ? 'chart-breakout' : ''}"
   {spec}
   {data}
   tooltip={HistoryLineTooltip}
@@ -258,6 +259,9 @@
   {#if sensor.rawValue != null}
     <Toggle bind:checked={singleRaw}>Raw Data</Toggle>
   {/if}
+  {#if expandableWindow}
+    <Toggle bind:checked={showFull}>Show All Dates</Toggle>
+  {/if}
   <div class="spacer" />
   <DownloadMenu {fileName} {vegaRef} {data} {sensor} {raw} />
 </div>

src/modes/mobile/MobileIndicatorOverview.svelte

@@ -67,7 +67,7 @@
       <hr />
       <FancyHeader invert sub="Chart" anchor="chart">{sensor.name}</FancyHeader>
       <div class="chart-300">
-        <HistoryLineChart {sensor} {date} {region} {fetcher} />
+        <HistoryLineChart {sensor} {date} {region} {fetcher} expandableWindow />
       </div>
     </div>
   </div>

src/modes/mobile/MobileOverview.svelte

@@ -49,7 +49,7 @@
       <hr />
       <FancyHeader invert sub="Chart" anchor="chart">{CASES.name}</FancyHeader>
       <div class="chart-300">
-        <HistoryLineChart sensor={CASES} {date} {region} {fetcher} />
+        <HistoryLineChart sensor={CASES} {date} {region} {fetcher} expandableWindow />
       </div>
       <hr />
       <AllIndicatorOverview {date} {region} {fetcher} />

src/modes/mobile/common.css

@@ -235,6 +235,21 @@
   height: 100%;
 }
 
+.chart-breakout.vega-embed,
+.chart-breakout > .vega-embed {
+  --max-width: 95vw;
+  /* breakout the chart up to 80vw */
+  width: max(100%, var(--max-width));
+  margin-left: calc(-0.5 * var(--max-width) + 50%);
+}
+
+@media only screen and (min-width: 1600px) {
+  .chart-breakout.vega-embed,
+  .chart-breakout > .vega-embed {
+    --max-width: 80vw;
+  }
+}
+
 .mobile-map > canvas {
   border: 1px solid #f0f1f3;
   border-radius: 3px;

src/stores/descriptions.raw.txt

@@ -31,7 +31,7 @@ Id: safegraph
 Signal: part_time_work_prop_7dav
 RawSignal: part_time_work_prop
 Type: public
-Levels: [county, state, nation]
+Levels: [county, state, hhs, nation]
 XAxis: Date
 YAxis: Fraction of population
 Format: fraction
@@ -58,7 +58,7 @@ Name: Bar Visits
 Id: safegraph
 Signal: bars_visit_prop
 Type: public
-Levels: [county, msa, state, hrr, nation]
+Levels: [county, msa, state, hhs, hrr, nation]
 XAxis: Date
 YAxis: Visits per 100,000 people
 Format: per100k
@@ -81,7 +81,7 @@ Name: Restaurant Visits
 Id: safegraph
 Signal: restaurants_visit_prop
 Type: public
-Levels: [county, msa, state, hrr, nation]
+Levels: [county, msa, state, hhs, hrr, nation]
 XAxis: Date
 YAxis: Visits per 100,000 people
 Format: per100k
@@ -165,7 +165,7 @@ Id: google-symptoms
 Signal: sum_anosmia_ageusia_smoothed_search
 RawSignal: sum_anosmia_ageusia_raw_search
 Type: public
-Levels: [state, msa, hrr, county]
+Levels: [state, msa, hrr, county, hhs, nation]
 XAxis: Date
 YAxis: Scaled search volume (arbitrary scale)
 Format: raw
@@ -189,7 +189,7 @@ Id: doctor-visits
 Signal: smoothed_adj_cli
 RawSignal: null
 Type: early
-Levels: [county, msa, state, hrr]
+Levels: [county, msa, state, hrr, hhs, nation]
 XAxis: Date
 YAxis: Percentage
 Format: percent
@@ -303,7 +303,7 @@ Id: hospital-admissions
 Signal: smoothed_adj_covid19_from_claims
 RawSignal: null
 Type: late
-Levels: [county, msa, state, hrr, nation]
+Levels: [county, msa, state, hrr, hhs, nation]
 XAxis: Date
 YAxis: Percentage
 Format: percent
@@ -340,7 +340,7 @@ CasesOrDeathSignals:
 
 
 Type: late
-Levels: [msa, county, state, hrr, nation]
+Levels: [msa, county, state, hrr, hhs, nation]
 XAxis: Reported Date
 YAxis: Cases
 Format: per100k
@@ -383,7 +383,7 @@ CasesOrDeathSignals:
 
 
 Type: late
-Levels: [msa, county, state, hrr, nation]
+Levels: [msa, county, state, hrr, hhs, nation]
 XAxis: Reported Date
 YAxis: Deaths
 Format: per100k