Merge remote-tracking branch 'origin/dev' into dev

src/components/input/DateFilter.js

@@ -13,6 +13,7 @@ export function DateFilter({
   endDate,
   className,
   onChange,
+  selectedUnit,
   showAllTime = false,
   alignment = 'end',
 }) {
@@ -66,7 +67,12 @@ export function DateFilter({
 
   const renderValue = value => {
     return value.startsWith('range') ? (
-      <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
+      <CustomRange
+        startDate={startDate}
+        endDate={endDate}
+        selectedUnit={selectedUnit}
+        onClick={() => handleChange('custom')}
+      />
     ) : (
       options.find(e => e.value === value).label
     );
@@ -120,9 +126,11 @@ export function DateFilter({
   );
 }
 
-const CustomRange = ({ startDate, endDate, onClick }) => {
+const CustomRange = ({ startDate, endDate, selectedUnit, onClick }) => {
   const { locale } = useLocale();
 
+  const monthFormat = +selectedUnit?.num === 1 && selectedUnit?.unit === 'month';
+
   function handleClick(e) {
     e.stopPropagation();
 
@@ -135,8 +143,14 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
         <Icons.Calendar />
       </Icon>
       <Text>
-        {formatDate(startDate, 'd LLL y', locale)}
-        {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
+        {monthFormat ? (
+          <>{formatDate(startDate, 'MMMM yyyy', locale)}</>
+        ) : (
+          <>
+            {formatDate(startDate, 'd LLL y', locale)}
+            {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
+          </>
+        )}
       </Text>
     </Flexbox>
   );

src/components/input/WebsiteDateFilter.js

@@ -1,24 +1,51 @@
 import useDateRange from 'components/hooks/useDateRange';
+import { isAfter } from 'date-fns';
+import { incrementDateRange } from 'lib/date';
+import { Button, Flexbox, Icon, Icons } from 'react-basics';
 import DateFilter from './DateFilter';
 import styles from './WebsiteDateFilter.module.css';
 
 export function WebsiteDateFilter({ websiteId }) {
   const [dateRange, setDateRange] = useDateRange(websiteId);
-  const { value, startDate, endDate } = dateRange;
+  const { value, startDate, endDate, selectedUnit } = dateRange;
+
+  const isFutureDate = isAfter(incrementDateRange(dateRange, -1).startDate, new Date());
 
   const handleChange = async value => {
     setDateRange(value);
   };
 
+  const handleIncrement = async value => {
+    const newValue = incrementDateRange(dateRange, value);
+
+    setDateRange(newValue);
+  };
+
   return (
-    <DateFilter
-      className={styles.dropdown}
-      value={value}
-      startDate={startDate}
-      endDate={endDate}
-      onChange={handleChange}
-      showAllTime={true}
-    />
+    <>
+      <DateFilter
+        className={styles.dropdown}
+        value={value}
+        startDate={startDate}
+        endDate={endDate}
+        selectedUnit={selectedUnit}
+        onChange={handleChange}
+        showAllTime={true}
+      />
+      <Flexbox justifyContent="center" gap={10} className={styles.container}>
+        <Button onClick={() => handleIncrement(1)}>
+          <Icon rotate={90}>
+            <Icons.ChevronDown />
+          </Icon>
+        </Button>
+
+        <Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
+          <Icon rotate={270}>
+            <Icons.ChevronDown />
+          </Icon>
+        </Button>
+      </Flexbox>
+    </>
   );
 }
 

src/components/pages/websites/WebsiteMetricsBar.js

@@ -110,8 +110,8 @@ export function WebsiteMetricsBar({ websiteId, sticky }) {
       </Column>
       <Column defaultSize={12} xl={4}>
         <div className={styles.actions}>
-          <RefreshButton websiteId={websiteId} />
           <WebsiteDateFilter websiteId={websiteId} />
+          <RefreshButton websiteId={websiteId} />
         </div>
       </Column>
     </Row>