Events filtering. Closes #3356

src/components/metrics/EventsChart.tsx

@@ -1,21 +1,23 @@
+import { useMemo, useState, useEffect } from 'react';
 import { colord } from 'colord';
 import BarChart from '@/components/charts/BarChart';
 import { useDateRange, useLocale, useWebsiteEventsSeries } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
-import { useMemo } from 'react';
 
 export interface EventsChartProps {
   websiteId: string;
   className?: string;
+  focusLabel?: string;
 }
 
-export function EventsChart({ websiteId, className }: EventsChartProps) {
+export function EventsChart({ websiteId, className, focusLabel }: EventsChartProps) {
   const {
     dateRange: { startDate, endDate, unit, value },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
   const { data, isLoading } = useWebsiteEventsSeries(websiteId);
+  const [label, setLabel] = useState<string>(focusLabel);
 
   const chartData = useMemo(() => {
     if (!data) return [];
@@ -42,8 +44,15 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
           borderWidth: 1,
         };
       }),
+      focusLabel,
     };
-  }, [data, startDate, endDate, unit]);
+  }, [data, startDate, endDate, unit, focusLabel]);
+
+  useEffect(() => {
+    if (label !== focusLabel) {
+      setLabel(focusLabel);
+    }
+  }, [focusLabel]);
 
   return (
     <BarChart

src/components/metrics/EventsTable.tsx

@@ -1,12 +1,28 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { useMessages } from '@/components/hooks';
 
-export function EventsTable(props: MetricsTableProps) {
+export interface EventsTableProps extends MetricsTableProps {
+  onLabelClick?: (value: string) => void;
+}
+
+export function EventsTable({ onLabelClick, ...props }: EventsTableProps) {
   const { formatMessage, labels } = useMessages();
 
-  function handleDataLoad(data: any) {
+  const handleDataLoad = (data: any) => {
     props.onDataLoad?.(data);
-  }
+  };
+
+  const renderLabel = ({ x: label }) => {
+    if (onLabelClick) {
+      return (
+        <div onClick={() => onLabelClick(label)} style={{ cursor: 'pointer' }}>
+          {label}
+        </div>
+      );
+    }
+
+    return label;
+  };
 
   return (
     <MetricsTable
@@ -15,6 +31,7 @@ export function EventsTable(props: MetricsTableProps) {
       type="event"
       metric={formatMessage(labels.actions)}
       onDataLoad={handleDataLoad}
+      renderLabel={renderLabel}
     />
   );
 }