Weekly session data.

src/components/charts/BubbleChart.tsx

@@ -0,0 +1,27 @@
+import { Chart, ChartProps } from 'components/charts/Chart';
+import { useState } from 'react';
+import { StatusLight } from 'react-basics';
+import { formatLongNumber } from 'lib/format';
+
+export interface BubbleChartProps extends ChartProps {
+  type?: 'bubble';
+}
+
+export default function BubbleChart(props: BubbleChartProps) {
+  const [tooltip, setTooltip] = useState(null);
+  const { type = 'bubble' } = props;
+
+  const handleTooltip = ({ tooltip }) => {
+    const { labelColors, dataPoints } = tooltip;
+
+    setTooltip(
+      tooltip.opacity ? (
+        <StatusLight color={labelColors?.[0]?.backgroundColor}>
+          {formatLongNumber(dataPoints?.[0]?.raw)} {dataPoints?.[0]?.label}
+        </StatusLight>
+      ) : null,
+    );
+  };
+
+  return <Chart {...props} type={type} tooltip={tooltip} onTooltip={handleTooltip} />;
+}

src/components/common/LoadingPanel.module.css

@@ -3,4 +3,14 @@
   flex-direction: column;
   position: relative;
   flex: 1;
+  height: 100%;
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
 }

src/components/common/LoadingPanel.tsx

@@ -1,9 +1,9 @@
 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 ErrorMessage from 'components/common/ErrorMessage';
 import Empty from 'components/common/Empty';
+import styles from './LoadingPanel.module.css';
 
 export function LoadingPanel({
   data,
@@ -27,7 +27,7 @@ export function LoadingPanel({
 
   return (
     <div className={classNames(styles.panel, className)}>
-      {isLoading && !isFetched && <Loading icon={loadingIcon} />}
+      {isLoading && !isFetched && <Loading className={styles.loading} icon={loadingIcon} />}
       {error && <ErrorMessage />}
       {!error && isEmpty && <Empty />}
       {!error && !isEmpty && data && children}

src/components/hooks/index.ts

@@ -14,6 +14,7 @@ export * from './queries/useSessionDataProperties';
 export * from './queries/useSessionDataValues';
 export * from './queries/useWebsiteSession';
 export * from './queries/useWebsiteSessions';
+export * from './queries/useWebsiteSessionsWeekly';
 export * from './queries/useShareToken';
 export * from './queries/useTeam';
 export * from './queries/useTeams';

src/components/hooks/queries/useWebsiteSessionsWeekly.ts

@@ -0,0 +1,24 @@
+import { useApi } from './useApi';
+import useModified from '../useModified';
+import { useFilterParams } from 'components/hooks/useFilterParams';
+
+export function useWebsiteSessionsWeekly(
+  websiteId: string,
+  params?: { [key: string]: string | number },
+) {
+  const { get, useQuery } = useApi();
+  const { modified } = useModified(`sessions`);
+  const filters = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['sessions', { websiteId, modified, ...params, ...filters }],
+    queryFn: () => {
+      return get(`/websites/${websiteId}/sessions/weekly`, {
+        ...params,
+        ...filters,
+      });
+    },
+  });
+}
+
+export default useWebsiteSessionsWeekly;