From 138aae7c714e12ffbff889793256b7f2e499f21b Mon Sep 17 00:00:00 2001
From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com>
Date: Fri, 18 Oct 2024 23:42:39 -0300
Subject: [PATCH] wip: website chart settings button

---
 src/components/input/WebsiteDateFilter.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/input/WebsiteDateFilter.tsx b/src/components/input/WebsiteDateFilter.tsx
index 486f5de14..ca85c7444 100644
--- a/src/components/input/WebsiteDateFilter.tsx
+++ b/src/components/input/WebsiteDateFilter.tsx
@@ -1,10 +1,12 @@
 import { useDateRange, useLocale } from 'components/hooks';
 import { isAfter } from 'date-fns';
 import { getOffsetDateRange } from 'lib/date';
+import { DateRange } from 'lib/types';
+import { useState } from 'react';
 import { Button, Icon, Icons } from 'react-basics';
 import DateFilter from './DateFilter';
+import WebsiteChartSettings from './WebsiteChartSettings';
 import styles from './WebsiteDateFilter.module.css';
-import { DateRange } from 'lib/types';
 
 export function WebsiteDateFilter({
   websiteId,
@@ -16,6 +18,7 @@ export function WebsiteDateFilter({
   const { dir } = useLocale();
   const { dateRange, saveDateRange } = useDateRange(websiteId);
   const { value, startDate, endDate, offset } = dateRange;
+  const [showChartParams, setShowChartParams] = useState(false);
   const disableForward =
     value === 'all' || isAfter(getOffsetDateRange(dateRange, 1).startDate, new Date());
 
@@ -52,6 +55,18 @@ export function WebsiteDateFilter({
           </Button>
         </div>
       )}
+      <Button onClick={() => setShowChartParams(true)}>
+        <Icon rotate={dir === 'rtl' ? 270 : 90}>
+          <Icons.Menu />
+        </Icon>
+      </Button>
+      {showChartParams && (
+        <WebsiteChartSettings
+          isOpened={showChartParams}
+          onClose={() => setShowChartParams(false)}
+          onChange={handleChange}
+        />
+      )}
     </div>
   );
 }