Merge pull request #1214 from cmu-delphi/krivard/hex-range

Expand all line plots for slow-moving times
cmu-delphi · Apr 28, 2023 · be63317 · be63317
2 parents f853744 + 6bb20bd
commit be63317
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/blocks/RegionHexMap.svelte b/src/blocks/RegionHexMap.svelte
@@ -145,12 +145,27 @@
       {/await}
     {/each}
   </HexGrid>
+  <div class="bottom-bar">
+    <div style="display:{$isMobileDevice ? 'none' : 'auto'}">Dashed vertical lines: month boundaries</div>
+    <div style="display:{$isMobileDevice ? 'none' : 'auto'}; margin-bottom: 0.5em">
+      Red vertical line: selected date
+    </div>
+    <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} />
   </ColorLegend>
 </div>
 
 <style>
+  .bottom-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 0.5em;
+    position: relative;
+  }
+
   .title,
   .value {
     font-size: 0.65rem;

diff --git a/src/specs/lineSpec.ts b/src/specs/lineSpec.ts
@@ -704,11 +704,13 @@ export function generateSparkLine({
           formatType: 'cachedTime',
           grid: true,
           gridDash: [4, 4],
+          gridColor: color,
+          gridOpacity: 0.5,
           labels: false,
           ticks: false,
           domain: false,
           tickCount: {
-            interval: 'week',
+            interval: 'month',
             step: 1,
           },
         },

diff --git a/src/stores/params.ts b/src/stores/params.ts
@@ -1,4 +1,4 @@
-import { timeDay, timeMonth, timeWeek } from 'd3-time';
+import { timeDay, timeMonth } from 'd3-time';
 import { formatAPITime, addMissing, fitRange, parseAPITime } from '../data';
 import type { EpiDataRow } from '../data';
 import { nationInfo } from '../data/regions';
@@ -36,8 +36,8 @@ export function resolveSensorTimeFrame(
   return ALL_TIME_FRAME;
 }
 
-export const WINDOW_SIZE = 4; // months;
-export const SPARKLINE_SIZE = 4; // weeks;
+export const WINDOW_SIZE = 9; // months;
+export const SPARKLINE_SIZE = 3; // months;
 
 export class DateParam {
   readonly timeValue: number;
@@ -52,7 +52,7 @@ export class DateParam {
     this.value = date;
     this.week = EpiWeek.fromDate(date);
     this.allTimeFrame = ALL_TIME_FRAME;
-    this.sparkLineTimeFrame = TimeFrame.compute(date, (d, step) => timeWeek.offset(d, step), SPARKLINE_SIZE);
+    this.sparkLineTimeFrame = TimeFrame.compute(date, (d, step) => timeMonth.offset(d, step), SPARKLINE_SIZE);
     this.windowTimeFrame = TimeFrame.compute(date, (d, step) => timeMonth.offset(d, step), WINDOW_SIZE);
   }