Fixed chart rendering when using date nav buttons.

src/components/metrics/EventsChart.tsx

@@ -1,26 +1,26 @@
 import { useMemo, useState, useEffect } from 'react';
 import { colord } from 'colord';
-import { BarChart } from '@/components/charts/BarChart';
+import { BarChart, BarChartProps } from '@/components/charts/BarChart';
 import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
-export interface EventsChartProps {
+export interface EventsChartProps extends BarChartProps {
   websiteId: string;
-  className?: string;
   focusLabel?: string;
 }
 
-export function EventsChart({ websiteId, className, focusLabel }: EventsChartProps) {
+export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
   const {
     dateRange: { startDate, endDate, unit, value },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
-  const { data, isLoading } = useWebsiteEventsSeriesQuery(websiteId);
+  const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
   const [label, setLabel] = useState<string>(focusLabel);
 
-  const chartData = useMemo(() => {
-    if (!data) return [];
+  const chartData: any = useMemo(() => {
+    if (!data) return;
 
     const map = (data as any[]).reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
@@ -55,16 +55,18 @@ export function EventsChart({ websiteId, className, focusLabel }: EventsChartPro
   }, [focusLabel]);
 
   return (
-    <BarChart
-      minDate={startDate}
-      maxDate={endDate}
-      className={className}
-      data={chartData}
-      unit={unit}
-      stacked={true}
-      renderXLabel={renderDateLabels(unit, locale)}
-      isLoading={isLoading}
-      isAllTime={value === 'all'}
-    />
+    <LoadingPanel isLoading={isLoading} error={error}>
+      {chartData && (
+        <BarChart
+          chartData={chartData}
+          minDate={value === 'all' ? undefined : startDate}
+          maxDate={endDate}
+          unit={unit}
+          stacked={true}
+          renderXLabel={renderDateLabels(unit, locale)}
+          height="400px"
+        />
+      )}
+    </LoadingPanel>
   );
 }

src/components/metrics/ListTable.tsx

@@ -96,13 +96,20 @@ const AnimatedRow = ({
 }) => {
   const props = useSpring({
     width: percent,
-    y: value,
+    y: !isNaN(value) ? value : 0,
     from: { width: 0, y: 0 },
     config: animate ? config.default : { duration: 0 },
   });
 
   return (
-    <Grid columns="1fr 50px 50px" paddingLeft="2" alignItems="center" hoverBackgroundColor="2" gap>
+    <Grid
+      columns="1fr 50px 50px"
+      paddingLeft="2"
+      alignItems="center"
+      hoverBackgroundColor="2"
+      borderRadius
+      gap
+    >
       <Row alignItems="center">
         <Text>{label}</Text>
       </Row>

src/components/metrics/PageviewsChart.tsx

@@ -15,26 +15,16 @@ export interface PageviewsChartProps extends BarChartProps {
     };
   };
   unit: string;
-  isLoading?: boolean;
-  isAllTime?: boolean;
 }
 
-export function PageviewsChart({
-  data,
-  unit,
-  isLoading,
-  isAllTime,
-  ...props
-}: PageviewsChartProps) {
+export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
   const { formatMessage, labels } = useMessages();
   const { theme } = useTheme();
   const { locale } = useLocale();
   const { colors } = useMemo(() => getThemeColors(theme), [theme]);
 
-  const chartData = useMemo(() => {
-    if (!data) {
-      return {};
-    }
+  const chartData: any = useMemo(() => {
+    if (!data) return;
 
     return {
       __id: new Date().getTime(),
@@ -84,11 +74,10 @@ export function PageviewsChart({
   return (
     <BarChart
       {...props}
-      data={chartData}
+      chartData={chartData}
       unit={unit}
-      isLoading={isLoading}
-      isAllTime={isAllTime}
       renderXLabel={renderXLabel}
+      height="400px"
     />
   );
 }

src/components/metrics/RealtimeChart.tsx

@@ -38,8 +38,8 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
   return (
     <PageviewsChart
       {...props}
-      minDate={startDate.toISOString()}
-      maxDate={endDate.toISOString()}
+      minDate={startDate}
+      maxDate={endDate}
       unit={unit}
       data={chartData}
       animationDuration={animationDuration}