backfill profiling viz

src/blocks/HistoryLineTooltip.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { formatDateShortWeekdayAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr } from '../formats';
   import SensorValue from '../components/SensorValue.svelte';
 
   export let hidden = false;
@@ -22,7 +22,7 @@
 </script>
 
 <div aria-label="tooltip" class="tooltip" class:hidden>
-  <h5>{formatDateShortWeekdayAbbr(item.date_value)}</h5>
+  <h5>{formatDateShortDayOfWeekAbbr(item.date_value)}</h5>
   <table>
     {#each items as i}
       <tr>

src/blocks/IndicatorWarning.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateYearDayOfWeekAbbr } from '../formats';
   import { getLevelInfo } from '../stores';
 
   /**
@@ -22,6 +22,6 @@
   </div>
 {:else if date.sensorTimeFrame.max < date.value}
   <div data-uk-alert class="uk-alert-warning">
-    The indicator "{sensor.name}" is not available for {formatDateYearWeekdayAbbr(date.value)}, yet.
+    The indicator "{sensor.name}" is not available for {formatDateYearDayOfWeekAbbr(date.value)}, yet.
   </div>
 {/if}

src/blocks/MaxDateHint.svelte

@@ -1,6 +1,6 @@
 <script>
   import UIKitHint from '../components/UIKitHint.svelte';
-  import { formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateYearDayOfWeekAbbr } from '../formats';
   import { stats } from '../stores';
   import { determineStatsInfo } from '../stores/stats';
   /**
@@ -20,9 +20,9 @@
 
 {#if info}
   <UIKitHint
-    title="Most recent available date:<br>&nbsp;{formatDateYearWeekdayAbbr(
+    title="Most recent available date:<br>&nbsp;{formatDateYearDayOfWeekAbbr(
       info.maxTime,
-    )}<br>Last update on:<br>&nbsp;{formatDateYearWeekdayAbbr(info.maxIssue)}"
+    )}<br>Last update on:<br>&nbsp;{formatDateYearDayOfWeekAbbr(info.maxIssue)}"
     noMargin={suffix.length > 0}
     inline={suffix.length === 0}
   />

src/blocks/RegionMapTooltip.svelte

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

src/components/AboutSection.svelte

@@ -1,8 +1,9 @@
 <script>
   export let details = '';
+  export let className = '';
 </script>
 
-<div class="grid-3-11 mobile-invert">
+<div class="grid-3-11 mobile-invert {className}">
   {#if details}
     <details>
       <summary>

src/components/OptionPicker.svelte

@@ -7,23 +7,67 @@
   export let value = null;
   export let label = 'Options';
   /**
-   * @type {}
+   * @type {{label: string, value: string}[]}
    */
   export let options = [];
 
+  /**
+   * @type {'select' | 'text' | 'number' | 'date'}
+   */
+  export let type = 'select';
+
   export let className = '';
   export let style = undefined;
+
+  export let modern = false;
+
+  export let step = undefined;
+  export let min = undefined;
+  export let max = undefined;
+  export let placeholder = undefined;
 </script>
 
 <div class="option-picker {className}" {style}>
-  <span class="option-picker-label">{label}</span>
-  <select {name} class="option-picker-input" bind:value on:blur {required}>
-    <slot>
-      {#each options as option}
-        <option value={option.value}>{option.label}</option>
-      {/each}
-    </slot>
-  </select>
+  <span class="option-picker-label" class:modern>{label}</span>
+  {#if type === 'select'}
+    <select {name} class="option-picker-input" class:modern bind:value on:blur {required}>
+      <slot>
+        {#each options as option}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </slot>
+    </select>
+  {:else if type === 'text'}
+    <input {name} class="option-picker-input" class:modern bind:value on:change {required} {placeholder} />
+  {:else if type === 'number'}
+    <input
+      type="number"
+      {name}
+      class="option-picker-input"
+      class:modern
+      bind:value
+      on:change
+      {required}
+      {step}
+      {min}
+      {max}
+      {placeholder}
+    />
+  {:else if type === 'date'}
+    <input
+      type="date"
+      {name}
+      class="option-picker-input"
+      class:modern
+      bind:value
+      on:change
+      {required}
+      {step}
+      {min}
+      {max}
+      {placeholder}
+    />
+  {/if}
 </div>
 
 <style>
@@ -35,13 +79,22 @@
 
   .option-picker-input {
     display: block;
+    width: 100%;
     padding: 8px 0px 8px 6px;
     border: 1px solid #d3d4d8;
     background: white;
     font-size: 0.875rem;
     line-height: 1rem;
     border-radius: 4px;
-    color: inherit;
+    box-sizing: border-box;
+    font-weight: 400;
+    color: #666;
+  }
+
+  .option-picker-input.modern {
+    padding: 10px 6px;
+    font-size: 0.75rem;
+    height: 50px;
   }
 
   .option-picker-input > :global(option) {
@@ -57,4 +110,7 @@
     background: white;
     line-height: 1;
   }
+  .option-picker-label.modern {
+    left: 24px;
+  }
 </style>

src/components/SensorDatePicker2.svelte

@@ -5,7 +5,7 @@
   import calendarIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/calendar.svg';
   import { parseAPITime } from '../data';
   import { times, stats } from '../stores';
-  import { formatDateShortWeekdayAbbr, formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr, formatDateYearDayOfWeekAbbr } from '../formats';
   import { timeDay } from 'd3-time';
   import { determineStatsInfo } from '../stores/stats';
 
@@ -54,7 +54,7 @@
       bind:selected={value}
       start={startEndDates[0]}
       end={startEndDates[1]}
-      formattedSelected={formatDateShortWeekdayAbbr(value)}
+      formattedSelected={formatDateShortDayOfWeekAbbr(value)}
     >
       <button
         aria-label="selected date"
@@ -65,7 +65,7 @@
         <span class="selected-date-icon">
           {@html calendarIcon}
         </span>
-        <span>{formatDateShortWeekdayAbbr(value)}</span>
+        <span>{formatDateShortDayOfWeekAbbr(value)}</span>
       </button>
       <svelte:fragment slot="footer">
         {#if info}
@@ -75,9 +75,9 @@
               on:click={() => (value = startEndDates[1])}
               class="uk-link-muted"
             >
-              {formatDateYearWeekdayAbbr(info.maxTime)}
+              {formatDateYearDayOfWeekAbbr(info.maxTime)}
             </button>
-            updated on <span class="uk-text-nowrap">{formatDateYearWeekdayAbbr(info.maxIssue)}</span>.
+            updated on <span class="uk-text-nowrap">{formatDateYearDayOfWeekAbbr(info.maxIssue)}</span>.
           </p>
         {/if}
       </svelte:fragment>
@@ -87,7 +87,7 @@
       <span class="inline-svg-icon">
         {@html calendarIcon}
       </span>
-      <span>{formatDateShortWeekdayAbbr(value)}</span>
+      <span>{formatDateShortDayOfWeekAbbr(value)}</span>
     </button>
   {/if}
   <button

src/components/SparkLineTooltip.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { formatDateShortWeekdayAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr } from '../formats';
   import SensorValue from './SensorValue.svelte';
 
   export let hidden = false;
@@ -15,7 +15,7 @@
 </script>
 
 <div aria-label="tooltip" class="tooltip" class:hidden>
-  <h5>{formatDateShortWeekdayAbbr(item.date_value)}</h5>
+  <h5>{formatDateShortDayOfWeekAbbr(item.date_value)}</h5>
   <table>
     <tr>
       <th>{item.displayName}</th>

src/components/TrendTextSummary.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { formatDateWeekday, formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateDayOfWeek, formatDateYearDayOfWeekAbbr } from '../formats';
   import { WINDOW_SIZE } from '../stores/params';
   import SensorValue from './SensorValue.svelte';
   import TrendText from './TrendText.svelte';
@@ -33,15 +33,15 @@
   <slot />
   {#await trend}
     We don't have data on the historical context for this indicator on
-    {formatDateWeekday(date.value, true)}.
+    {formatDateDayOfWeek(date.value, true)}.
   {:then d}
     {#if d.isUnknown}
       We don't have data on the historical context for this indicator on
-      {formatDateWeekday(date.value, true)}.
+      {formatDateDayOfWeek(date.value, true)}.
     {:else if d.highValuesAre === 'neutral'}
       {#if d.isNeutral}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -54,10 +54,10 @@
           <SensorValue {sensor} value={d.min ? d.min.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.minDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.minDate, true)}</strong>.
       {:else if +date.value === +d.minDate}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -70,10 +70,10 @@
           <SensorValue {sensor} value={d.max ? d.max.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.maxDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.maxDate, true)}</strong>.
       {:else if +date.value === +d.maxDate}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -86,10 +86,10 @@
           <SensorValue {sensor} value={d.min ? d.min.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.minDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.minDate, true)}</strong>.
       {:else}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -102,11 +102,11 @@
           <SensorValue {sensor} value={d.min ? d.min.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.minDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.minDate, true)}</strong>.
       {/if}
     {:else if +date.value === +d.worstDate}
       On
-      {formatDateWeekday(date.value, true)}
+      {formatDateDayOfWeek(date.value, true)}
       <strong>{sensor.value.name}</strong>
       was the
       {WINDOW_SIZE}
@@ -118,10 +118,10 @@
         <SensorValue {sensor} value={d.best ? d.best.refValue : null} medium /></strong
       >
       on
-      <strong>{formatDateYearWeekdayAbbr(d.bestDate, true)}</strong>.
+      <strong>{formatDateYearDayOfWeekAbbr(d.bestDate, true)}</strong>.
     {:else}
       On
-      {formatDateWeekday(date.value, true)}
+      {formatDateDayOfWeek(date.value, true)}
       <strong>{sensor.value.name}</strong>
       was
       <strong>
@@ -134,7 +134,7 @@
         <SensorValue {sensor} value={d.worst ? d.worst.refValue : null} medium /></strong
       >
       on
-      <strong>{formatDateYearWeekdayAbbr(d.worstDate, true)}</strong>.
+      <strong>{formatDateYearDayOfWeekAbbr(d.worstDate, true)}</strong>.
     {/if}
   {/await}
 </p>