feat(web): Record time slider interactions with plausible (#6707)

* feat(web): Record time slider interactions with plausible

* feat(web): include time average in time slider tracking

* feat(web): improve format

web/src/components/TimeSlider.tsx

@@ -3,6 +3,7 @@ import { scaleLinear } from 'd3-scale';
 import { useNightTimes } from 'hooks/nightTimes';
 import { useDarkMode } from 'hooks/theme';
 import { useAtom } from 'jotai/react';
+import trackEvent from 'utils/analytics';
 import { TimeAverages } from 'utils/constants';
 import { getZoneFromPath } from 'utils/helpers';
 import { timeAverageAtom } from 'utils/state/atoms';
@@ -71,6 +72,12 @@ export const getThumbIcon = (
   return isValueAtNight ? 'slider-thumb-night.svg' : 'slider-thumb-day.svg';
 };
 
+function trackTimeSliderEvent(selectedIndex: number, timeAverage: TimeAverages) {
+  trackEvent('Time Slider Button Interaction', {
+    selectedIndex: `${timeAverage}: ${selectedIndex}`,
+  });
+}
+
 export type TimeSliderBasicProps = TimeSliderProps & {
   trackBackground: string;
   thumbIcon: ThumbIconPath;
@@ -82,13 +89,17 @@ export function TimeSliderBasic({
   trackBackground,
   thumbIcon,
 }: TimeSliderBasicProps) {
+  const [timeAverage] = useAtom(timeAverageAtom);
   return (
     <SliderPrimitive.Root
       defaultValue={[0]}
       max={numberOfEntries}
       step={1}
       value={selectedIndex && selectedIndex > 0 ? [selectedIndex] : [0]}
-      onValueChange={(value) => onChange(value[0])}
+      onValueChange={(value) => {
+        onChange(value[0]);
+        trackTimeSliderEvent(value[0], timeAverage);
+      }}
       aria-label="choose time"
       className="relative mb-2 flex h-5 w-full touch-none items-center hover:cursor-pointer"
     >