From f5196c06e1885e1766a82487c1a88a32907084e1 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 3 Jan 2024 13:25:01 -0300
Subject: [PATCH] fix(site): fix insights picker and disable animation (#11391)

---
 site/src/components/ActiveUserChart/ActiveUserChart.tsx   | 1 +
 .../pages/TemplatePage/TemplateInsightsPage/DateRange.tsx | 8 ++------
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
index 797abd7f7e..b9810eeaa0 100644
--- a/site/src/components/ActiveUserChart/ActiveUserChart.tsx
+++ b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -62,6 +62,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
 
   const options: ChartOptions<"line"> = {
     responsive: true,
+    animation: false,
     plugins: {
       annotation: {
         annotations: [
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
index 94b5500c83..b7cf7fa142 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
@@ -49,10 +49,6 @@ export const DateRange: FC<DateRangeProps> = ({ value, onChange }) => {
       key: "selection",
     },
   ]);
-  const currentRange = {
-    startDate: ranges[0].startDate as Date,
-    endDate: ranges[0].endDate as Date,
-  };
 
   return (
     <Popover>
@@ -60,11 +56,11 @@ export const DateRange: FC<DateRangeProps> = ({ value, onChange }) => {
         <>
           <PopoverTrigger>
             <Button>
-              <span>{format(currentRange.startDate, "MMM d, Y")}</span>
+              <span>{format(value.startDate, "MMM d, Y")}</span>
               <ArrowRightAltOutlined
                 css={{ width: 16, height: 16, marginLeft: 8, marginRight: 8 }}
               />
-              <span>{format(currentRange.endDate, "MMM d, Y")}</span>
+              <span>{format(value.endDate, "MMM d, Y")}</span>
             </Button>
           </PopoverTrigger>
           <PopoverContent>