Plot tweaks

web/src/components/Regions/RegionPlotDots.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { useTheme } from 'styled-components'
+import type { Props as DotProps } from 'recharts/types/shape/Dot'
+
+const AREA_FACTOR = 0.6
+const CIRCLE_LINEWIDTH = 2
+
+export interface CustomizedDotProps extends DotProps {
+  value: number
+  payload: {
+    counts: Record<string, number>
+    ranges: Record<string, [number, number]>
+    totals: Record<string, number>
+  }
+}
+
+/** Line plot dot component which displays a bubble in proportion to frequency */
+export function CustomizedDot(props: CustomizedDotProps) {
+  const theme = useTheme()
+  const y0 = theme.plot.margin.top
+
+  const {
+    cx,
+    cy,
+    stroke,
+    name,
+    payload: { counts, totals },
+    height,
+  } = props
+
+  if (!name || typeof height != 'number' || !cy || totals[name] === 0) {
+    return null
+  }
+
+  const freq = counts[name] / totals[name]
+
+  const cy2 = height * (1 - freq) + y0
+
+  const rad = 1 + AREA_FACTOR * Math.sqrt(counts[name])
+
+  return (
+    <>
+      <circle cx={cx} cy={cy2} stroke={stroke} strokeWidth={CIRCLE_LINEWIDTH} fill="#ffffff88" r={rad} />
+      <line x1={cx} y1={cy} x2={cx} y2={cy < cy2 ? cy2 - rad : cy2 + rad} stroke={stroke} strokeWidth={1} />
+    </>
+  )
+}
+
+/**
+ * Line plot active (on mouse hover) dot component which displays either a filled bubble in proportion to frequency
+ * or a confidence line
+ */
+export function CustomizedActiveDot(props: CustomizedDotProps & { shouldShowRanges: boolean }) {
+  const theme = useTheme()
+  const y0 = theme.plot.margin.top
+
+  const {
+    cx,
+    cy,
+    fill,
+    name,
+    payload: { counts, ranges, totals },
+    value,
+    shouldShowRanges,
+  } = props
+
+  if (!name || !cy || totals[name] === 0) {
+    return null
+  }
+
+  if (shouldShowRanges) {
+    // confidence intervals already displayed as shaded areas, fill circles instead
+
+    const freq = counts[name] / totals[name]
+    // map freq from (0,1) to plot region
+    const cy2 = value === 1 ? y0 : ((cy - y0) * (1 - freq)) / (1 - value) + y0
+
+    return (
+      <circle
+        cx={cx}
+        cy={cy2}
+        stroke={fill}
+        strokeWidth={CIRCLE_LINEWIDTH}
+        fill={fill}
+        r={1 + AREA_FACTOR * Math.sqrt(counts[name])}
+      />
+    )
+  }
+
+  // display confidence interval as vertical line segment
+  const [r1, r2] = ranges[name]
+
+  return (
+    <line
+      x1={cx}
+      y1={((cy - y0) * (1 - r2)) / (1 - value) + y0}
+      x2={cx}
+      y2={((cy - y0) * (1 - r1)) / (1 - value) + y0}
+      stroke={fill}
+      strokeWidth={5}
+    />
+  )
+}

web/src/components/Regions/RegionsPlot.tsx

@@ -17,6 +17,7 @@ import { getCountryColor, getCountryStrokeDashArray, Pathogen, useRegionDataQuer
 import { shouldShowRangesOnRegionsPlotAtom } from 'src/state/settings.state'
 import { variantsAtom } from 'src/state/variants.state'
 import { RegionsPlotTooltip } from 'src/components/Regions/RegionsPlotTooltip'
+import { CustomizedDot, CustomizedActiveDot } from 'src/components/Regions/RegionPlotDots'
 import { DateSlider } from 'src/components/Common/DateSlider'
 import { localeAtom } from 'src/state/locale.state'
 
@@ -37,7 +38,7 @@ function RegionsPlotImpl<T>({ width, height, data, minDate, maxDate, pathogen, c
   const theme = useTheme()
   const locale = useRecoilValue(localeAtom)
   const shouldShowRanges = useRecoilValue(shouldShowRangesOnRegionsPlotAtom)
-  const variants = useRecoilValue(variantsAtom(pathogen.name))
+  const variants = useRecoilValue(variantsAtom(pathogen.name)) // name, color and lineStyle
   const {
     variantsData: { variantsStyles },
   } = useRegionDataQuery(pathogen.name, countryName)
@@ -48,25 +49,33 @@ function RegionsPlotImpl<T>({ width, height, data, minDate, maxDate, pathogen, c
   )
 
   const { lines, ranges } = useMemo(() => {
+    // draw trendlines
     const lines = variants
       .map(
         ({ name, enabled }) =>
           enabled && (
             <Line
               key={`line-${name}`}
-              type="monotone"
-              name={name}
+              type="linear"
+              name={name} // variant name
               dataKey={(d) => get(d.avgs, name)} // eslint-disable-line react-perf/jsx-no-new-function-as-prop
               stroke={getCountryColor(variantsStyles, name)}
               strokeWidth={theme.plot.line.strokeWidth}
               strokeDasharray={getCountryStrokeDashArray(variantsStyles, name)}
-              dot={false}
+              // HACK: this is not type safe. These components rely on props, which are not included in Recharts typings
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              dot={<CustomizedDot />} // eslint-disable-line react-perf/jsx-no-jsx-as-prop
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              activeDot={<CustomizedActiveDot name={name} shouldShowRanges={shouldShowRanges} />} // eslint-disable-line react-perf/jsx-no-jsx-as-prop
               isAnimationActive={false}
             />
           ),
       )
       .filter(Boolean)
 
+    // confidence intervals as shaded polygons
     const ranges = variants
       .map(
         ({ name, enabled }) =>
@@ -79,6 +88,7 @@ function RegionsPlotImpl<T>({ width, height, data, minDate, maxDate, pathogen, c
               fill={getCountryColor(variantsStyles, name)}
               fillOpacity={0.1}
               isAnimationActive={false}
+              activeDot={false}
               display={!shouldShowRanges ? 'none' : undefined}
             />
           ),
@@ -155,6 +165,7 @@ export function RegionsPlot({ pathogen, countryName }: RegionsPlotProps) {
   }, [])
 
   const { data, minDate, maxDate } = useMemo(() => {
+    // subset data (avgs, counts, date, ranges, totals) to date range
     const data = regionData.values
       .filter(({ date }) => {
         const ts = ymdToTimestamp(date)