Expand sparklines for non-pandemic use

* Switch sparkline length from 4 weeks to 3 months
* Switch window length from 4 months to 9 months
* Increase visibility of y-axis gridlines
* Switch y-axis gridlines from marking weeks to marking months

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,
           },
         },

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);
   }