Progress check-in for date compare.

src/components/metrics/EventsChart.tsx

@@ -13,7 +13,9 @@ export interface EventsChartProps {
 }
 
 export function EventsChart({ websiteId, className }: EventsChartProps) {
-  const [{ startDate, endDate, unit }] = useDateRange(websiteId);
+  const {
+    dateRange: { startDate, endDate, unit },
+  } = useDateRange(websiteId);
   const { locale } = useLocale();
   const { data, isLoading } = useWebsiteEvents(websiteId);
 

src/components/metrics/FilterTags.tsx

@@ -24,7 +24,7 @@ export function FilterTags({
 }) {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
-  const [dateRange] = useDateRange(websiteId);
+  const { dateRange } = useDateRange(websiteId);
   const {
     router,
     renderUrl,

src/components/metrics/MetricCard.module.css

@@ -5,13 +5,9 @@
   min-width: 150px;
 }
 
-.card.compare {
-  gap: 10px;
-}
-
 .card.compare .change {
   font-size: 16px;
-  padding: 5px 10px;
+  margin: 10px 0;
 }
 
 .card:first-child {
@@ -23,7 +19,7 @@
 }
 
 .value {
-  font-size: 40px;
+  font-size: 36px;
   font-weight: 700;
   white-space: nowrap;
   color: var(--base900);
@@ -46,7 +42,7 @@
   gap: 5px;
   font-size: 13px;
   font-weight: 700;
-  padding: 0 5px;
+  padding: 0.1em 0.5em;
   border-radius: 5px;
   color: var(--base500);
   align-self: flex-start;

src/components/metrics/MetricCard.tsx

@@ -48,7 +48,7 @@ export const MetricCard = ({
             [styles.hide]: ~~change === 0,
           })}
         >
-          <Icon rotate={positive ? -45 : 45} size={showPrevious ? 'sm' : 'xs'}>
+          <Icon rotate={positive || reverseColors ? -45 : 45} size={showPrevious ? 'md' : 'xs'}>
             <Icons.ArrowRight />
           </Icon>
           <animated.span title={changeProps?.x as any}>

src/components/metrics/PageviewsChart.tsx

@@ -5,8 +5,12 @@ import { renderDateLabels } from 'lib/charts';
 
 export interface PageviewsChartProps extends BarChartProps {
   data: {
-    sessions: any[];
     pageviews: any[];
+    sessions: any[];
+    compare?: {
+      pageviews: any[];
+      sessions: any[];
+    };
   };
   unit: string;
   isLoading?: boolean;
@@ -36,7 +40,25 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
           borderWidth: 1,
           ...colors.chart.views,
         },
-      ],
+        data.compare
+          ? {
+              type: 'line',
+              label: formatMessage(labels.visitors),
+              data: data.compare.pageviews,
+              borderWidth: 2,
+              borderColor: '#f15bb5',
+            }
+          : null,
+        data.compare
+          ? {
+              type: 'line',
+              label: formatMessage(labels.visits),
+              data: data.compare.sessions,
+              borderWidth: 2,
+              borderColor: '#9b5de5',
+            }
+          : null,
+      ].filter(n => n),
     };
   }, [data, locale]);