Refactored tracker. Added handling for buttons.

src/components/hooks/useDateRange.ts

@@ -46,7 +46,7 @@ export function useDateRange(websiteId?: string) {
   };
 
   return [dateRange, saveDateRange] as [
-    { startDate: Date; endDate: Date; modified?: number; value?: string },
+    { startDate: Date; endDate: Date; modified?: number; value?: string; unit?: string },
     (value: string | DateRange) => void,
   ];
 }

src/components/metrics/EventsChart.tsx

@@ -77,10 +77,10 @@ export function EventsChart({ websiteId, className, token }: EventsChartProps) {
       className={className}
       datasets={datasets}
       unit={unit}
-      loading={isLoading}
-      stacked
+      stacked={true}
       renderXLabel={renderDateLabels(unit, locale)}
       renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
+      isLoading={isLoading}
     />
   );
 }

src/components/metrics/Legend.tsx

@@ -10,7 +10,7 @@ export function Legend({ chart }) {
   const { locale } = useLocale();
   const forceUpdate = useForceUpdate();
 
-  const handleClick = index => {
+  const handleClick = (index: string | number) => {
     const meta = chart.getDatasetMeta(index);
 
     meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;