New event data screen.

src/components/charts/PieChart.tsx

@@ -9,7 +9,7 @@ export interface PieChartProps extends ChartProps {
 
 export default function PieChart(props: PieChartProps) {
   const [tooltip, setTooltip] = useState(null);
-  const { type } = props;
+  const { type = 'pie' } = props;
 
   const handleTooltip = ({ tooltip }) => {
     const { labelColors, dataPoints } = tooltip;
@@ -23,5 +23,5 @@ export default function PieChart(props: PieChartProps) {
     );
   };
 
-  return <Chart {...props} type={type || 'pie'} tooltip={tooltip} onTooltip={handleTooltip} />;
+  return <Chart {...props} type={type} tooltip={tooltip} onTooltip={handleTooltip} />;
 }

src/components/common/LoadingPanel.module.css

@@ -0,0 +1,5 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}

src/components/common/LoadingPanel.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import styles from './LoadingPanel.module.css';
+import classNames from 'classnames';
+import ErrorMessage from 'components/common/ErrorMessage';
+import { Loading } from 'react-basics';
+import Empty from 'components/common/Empty';
+
+export function LoadingPanel({
+  data,
+  error,
+  isFetched,
+  isLoading,
+  loadingIcon = 'dots',
+  className,
+  children,
+}: {
+  data?: any;
+  error?: Error;
+  isFetched?: boolean;
+  isLoading?: boolean;
+  loadingIcon?: 'dots' | 'spinner';
+  isEmpty?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  const isEmpty = !data?.length && !isLoading && isFetched;
+
+  return (
+    <div className={classNames(styles.panel, className)}>
+      {isLoading && !isFetched && <Loading icon={loadingIcon} />}
+      {error && <ErrorMessage />}
+      {!error && isEmpty && <Empty />}
+      {!error && !isEmpty && data && children}
+    </div>
+  );
+}

src/components/hooks/index.ts

@@ -1,5 +1,8 @@
 export * from './queries/useApi';
 export * from './queries/useConfig';
+export * from './queries/useEventDataEvents';
+export * from './queries/useEventDataProperties';
+export * from './queries/useEventDataValues';
 export * from './queries/usePagedQuery';
 export * from './queries/useLogin';
 export * from './queries/useRealtime';

src/components/hooks/queries/useEventDataEvents.ts

@@ -0,0 +1,20 @@
+import useApi from './useApi';
+import { UseQueryOptions } from '@tanstack/react-query';
+import { useFilterParams } from '../useFilterParams';
+
+export function useEventDataEvents(
+  websiteId: string,
+  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['websites:event-data:events', { websiteId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/event-data/events`, { ...params }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}
+
+export default useEventDataEvents;

src/components/hooks/queries/useEventDataProperties.ts

@@ -0,0 +1,20 @@
+import useApi from './useApi';
+import { UseQueryOptions } from '@tanstack/react-query';
+import { useFilterParams } from '../useFilterParams';
+
+export function useEventDataProperties(
+  websiteId: string,
+  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery<any>({
+    queryKey: ['websites:event-data:properties', { websiteId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/event-data/properties`, { ...params }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}
+
+export default useEventDataProperties;

src/components/hooks/queries/useEventDataValues.ts

@@ -0,0 +1,21 @@
+import useApi from './useApi';
+import { UseQueryOptions } from '@tanstack/react-query';
+import { useFilterParams } from '../useFilterParams';
+
+export function useEventDataValues(
+  websiteId: string,
+  propertyName: string,
+  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery<any>({
+    queryKey: ['websites:event-data:values', { websiteId, propertyName, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/event-data/values`, { ...params, propertyName }),
+    enabled: !!(websiteId && propertyName),
+    ...options,
+  });
+}
+
+export default useEventDataValues;

src/components/messages.ts

@@ -133,7 +133,7 @@ export const labels = defineMessages({
   session: { id: 'label.session', defaultMessage: 'Session' },
   sessions: { id: 'label.sessions', defaultMessage: 'Sessions' },
   pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
-  activityLog: { id: 'label.activity-log', defaultMessage: 'Activity log' },
+  activity: { id: 'label.activity', defaultMessage: 'Activity' },
   dismiss: { id: 'label.dismiss', defaultMessage: 'Dismiss' },
   poweredBy: { id: 'label.powered-by', defaultMessage: 'Powered by {name}' },
   pageViews: { id: 'label.page-views', defaultMessage: 'Page views' },