Merge pull request #995 from cmu-delphi/sgratzl/weekly

add week signal support

Author: sgratzl

src/blocks/HistoryLineChart.svelte

@@ -20,7 +20,7 @@
   import SensorValue from '../components/SensorValue.svelte';
   import { combineSignals } from '../data/utils';
   import DownloadMenu from '../components/DownloadMenu.svelte';
-  import { formatDateISO } from '../formats';
+  import { formatDateISO, formatWeek } from '../formats';
   import { annotationManager, isMobileDevice } from '../stores';
   import IndicatorAnnotation from '../components/IndicatorAnnotation.svelte';
   import IndicatorAnnotations from '../components/IndicatorAnnotations.svelte';
@@ -30,19 +30,19 @@
 
   export let className = '';
   /**
-   * @type {import("../../stores/params").DateParam}
+   * @type {import("../stores/params").DateParam}
    */
   export let date;
   /**
-   * @type {import("../../stores/params").RegionParam}
+   * @type {import("../stores/params").RegionParam}
    */
   export let region;
   /**
-   * @type {import("../../stores/params").SensorParam}
+   * @type {import("../stores/params").SensorParam}
    */
   export let sensor;
   /**
-   * @type {import("../../stores/DataFetcher").DataFetcher}
+   * @type {import("../stores/DataFetcher").DataFetcher}
    */
   export let fetcher;
 
@@ -77,7 +77,7 @@
   export let domain = null;
 
   /**
-   * @type {import("../../stores/params").Region}
+   * @type {import("../stores/params").Region}
    */
   const neighboringInfo = {
     id: 'neighboring',
@@ -106,6 +106,7 @@
     timeFrame,
     { height, zero, raw, isMobile, singleRegionOnly, domain, cumulative },
   ) {
+    const isWeekly = sensor.value.isWeeklySignal;
     const options = {
       initialDate: highlightDate || date.value,
       height,
@@ -116,6 +117,7 @@
       title: joinTitle([(cumulative ? 'Cumulative ' : '') + sensor.name, `in ${region.displayName}`], isMobile),
       subTitle: sensor.unit,
       highlightRegion: true,
+      isWeeklySignal: isWeekly,
     };
     if (cumulative) {
       options.paddingLeft = 52; // more space for larger numbers
@@ -144,9 +146,9 @@
   }
 
   /**
-   * @param {import("../../stores/params").SensorParam} sensor
-   * @param {import("../../stores/params").DateParam} date
-   * @param {import("../../stores/params").RegionParam} region
+   * @param {import("../stores/params").SensorParam} sensor
+   * @param {import("../stores/params").DateParam} date
+   * @param {import("../stores/params").RegionParam} region
    */
   function loadData(sensor, region, timeFrame, singleRegionOnly) {
     if (!region.value) {
@@ -177,9 +179,9 @@
   }
 
   /**
-   * @param {import("../../stores/params").SensorParam} sensor
-   * @param {import("../../stores/params").DateParam} date
-   * @param {import("../../stores/params").RegionParam} region
+   * @param {import("../stores/params").SensorParam} sensor
+   * @param {import("../stores/params").DateParam} date
+   * @param {import("../stores/params").RegionParam} region
    */
   function loadSingleData(sensor, region, timeFrame, { cumulative }) {
     if (!region.value) {
@@ -235,8 +237,8 @@
     return [region];
   }
   /**
-   * @param {import("../../stores/params").SensorParam} sensor
-   * @param {import("../../stores/params").Region[]} region
+   * @param {import("../stores/params").SensorParam} sensor
+   * @param {import("../stores/params").Region[]} region
    */
   function generateFileName(sensor, regions, timeFrame, raw, cumulative) {
     const regionName = regions.map((region) => `${region.propertyId}-${region.displayName}`).join(',');
@@ -247,7 +249,9 @@
     if (cumulative) {
       suffix += '_Cumulative';
     }
-    return `${sensor.name}_${regionName}_${formatDateISO(timeFrame.min)}-${formatDateISO(timeFrame.max)}${suffix}`;
+    return `${sensor.name}_${regionName}_${
+      sensor.isWeeklySignal ? formatWeek(timeFrame.min_week) : formatDateISO(timeFrame.min)
+    }-${sensor.isWeeklySignal ? formatWeek(timeFrame.max_week) : formatDateISO(timeFrame.max)}${suffix}`;
   }
 
   function injectRanges(spec, timeFrame, annotations) {
@@ -296,7 +300,7 @@
       return null;
     }
     const time = toTimeValue(date);
-    const row = data.find((d) => d.id === region.id && d.time_value === time);
+    const row = data.find((d) => d.id === region.id && toTimeValue(d.date_value) === time);
     if (!row) {
       return null;
     }

src/blocks/RegionMapTooltip.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { formatDateShortDayOfWeekAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr, formatWeek } from '../formats';
   import { levelMegaCounty } from '../stores/constants';
   import { getStateOfCounty } from '../data/regions';
   import SensorValue from '../components/SensorValue.svelte';
@@ -61,7 +61,11 @@
       </tr>
     {/if}
     <tr>
-      <th>{formatDateShortDayOfWeekAbbr(item.date_value)}</th>
+      <th
+        >{sensor && sensor.isWeeklySignal
+          ? formatWeek(item.week_value)
+          : formatDateShortDayOfWeekAbbr(item.date_value)}</th
+      >
       <td>
         <SensorValue {sensor} value={item.value} medium />
       </td>

src/components/Calendar/Datepicker.svelte

@@ -5,6 +5,7 @@
   import { getMonths } from './lib/helpers';
   import { keyCodes, keyCodesArray } from './lib/keyCodes';
   import { onMount, createEventDispatcher } from 'svelte';
+  import WeekLegend from './WeekLegend.svelte';
 
   const dispatch = createEventDispatcher();
   const today = new Date();
@@ -20,32 +21,11 @@
   export let trigger = null;
   export let selectableCallback = null;
   export let weekStart = 0;
-  export let daysOfWeek = [
-    ['Sunday', 'Sun'],
-    ['Monday', 'Mon'],
-    ['Tuesday', 'Tue'],
-    ['Wednesday', 'Wed'],
-    ['Thursday', 'Thu'],
-    ['Friday', 'Fri'],
-    ['Saturday', 'Sat'],
-  ];
-  export let monthsOfYear = [
-    ['January', 'Jan'],
-    ['February', 'Feb'],
-    ['March', 'Mar'],
-    ['April', 'Apr'],
-    ['May', 'May'],
-    ['June', 'Jun'],
-    ['July', 'Jul'],
-    ['August', 'Aug'],
-    ['September', 'Sep'],
-    ['October', 'Oct'],
-    ['November', 'Nov'],
-    ['December', 'Dec'],
-  ];
 
   export let style = '';
 
+  export let pickWeek = false;
+
   // theming variables:
   export let buttonBackgroundColor = '#fff';
   export let buttonBorderColor = '#eee';
@@ -56,15 +36,6 @@
   export let dayHighlightedBackgroundColor = '#efefef';
   export let dayHighlightedTextColor = '#4a4a4a';
 
-  let sortedDaysOfWeek =
-    weekStart === 0
-      ? daysOfWeek
-      : (() => {
-          let dow = daysOfWeek.slice();
-          dow.push(dow.shift());
-          return dow;
-        })();
-
   let highlighted = today;
   let shouldShakeDate = false;
   let shakeHighlightTimeout;
@@ -205,13 +176,17 @@
     evt.preventDefault();
     switch (evt.keyCode) {
       case keyCodes.left:
-        incrementDayHighlighted(-1);
+        if (!pickWeek) {
+          incrementDayHighlighted(-1);
+        }
         break;
       case keyCodes.up:
         incrementDayHighlighted(-7);
         break;
       case keyCodes.right:
-        incrementDayHighlighted(1);
+        if (!pickWeek) {
+          incrementDayHighlighted(1);
+        }
         break;
       case keyCodes.down:
         incrementDayHighlighted(7);
@@ -268,19 +243,17 @@
         {canDecrementMonth}
         {start}
         {end}
-        {monthsOfYear}
         on:monthSelected={(e) => changeMonth(e.detail)}
         on:incrementMonth={(e) => incrementMonth(e.detail)}
       />
-      <div class="legend">
-        {#each sortedDaysOfWeek as day}<span>{day[1]}</span>{/each}
-      </div>
+      <WeekLegend {weekStart} />
       <Month
         {visibleMonth}
         {selected}
         {highlighted}
         {shouldShakeDate}
         id={visibleMonthId}
+        {pickWeek}
         on:dateSelected={(e) => registerSelection(e.detail)}
       />
     </div>
@@ -328,20 +301,8 @@
 
   @media (min-width: 480px) {
     .calendar {
-      width: 280px;
+      width: 300px;
       max-width: 100%;
     }
   }
-
-  .legend {
-    color: #4a4a4a;
-    padding: 10px 0;
-    margin-bottom: 5px;
-  }
-
-  .legend span {
-    width: 14.285714%;
-    display: inline-block;
-    text-align: center;
-  }
 </style>

src/components/Calendar/Month.svelte

@@ -2,10 +2,14 @@
   import Week from './Week.svelte';
 
   export let id;
+  /**
+   * @type {import('./lib/helpers').CalendarMonth}
+   */
   export let visibleMonth;
   export let selected;
   export let highlighted;
   export let shouldShakeDate;
+  export let pickWeek = false;
 
   let lastId = id;
   let direction;
@@ -18,7 +22,7 @@
 
 <div class="month-container">
   {#each visibleMonth.weeks as week (week.id)}
-    <Week days={week.days} {selected} {highlighted} {shouldShakeDate} {direction} on:dateSelected />
+    <Week {week} {selected} {highlighted} {shouldShakeDate} {direction} on:dateSelected {pickWeek} />
   {/each}
 </div>
 

src/components/Calendar/NavBar.svelte

@@ -9,7 +9,21 @@
   export let end;
   export let canIncrementMonth;
   export let canDecrementMonth;
-  export let monthsOfYear;
+
+  export let monthsOfYear = [
+    ['January', 'Jan'],
+    ['February', 'Feb'],
+    ['March', 'Mar'],
+    ['April', 'Apr'],
+    ['May', 'May'],
+    ['June', 'Jun'],
+    ['July', 'Jul'],
+    ['August', 'Aug'],
+    ['September', 'Sep'],
+    ['October', 'Oct'],
+    ['November', 'Nov'],
+    ['December', 'Dec'],
+  ];
 
   let monthSelectorOpen = false;
   let availableMonths;