Added button to show/hide charts, closes #577.

assets/chart-bar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z"/></svg>

components/metrics/WebsiteChart.js

@@ -23,6 +23,7 @@ export default function WebsiteChart({
   domain,
   stickyHeader = false,
   showLink = false,
+  hideChart = false,
   onDataLoad = () => {},
 }) {
   const shareToken = useShareToken();
@@ -91,13 +92,15 @@ export default function WebsiteChart({
       <div className="row">
         <div className="col">
           {error && <ErrorMessage />}
-          <PageviewsChart
-            websiteId={websiteId}
-            data={chartData}
-            unit={unit}
-            records={getDateLength(startDate, endDate, unit)}
-            loading={loading}
-          />
+          {!hideChart && (
+            <PageviewsChart
+              websiteId={websiteId}
+              data={chartData}
+              unit={unit}
+              records={getDateLength(startDate, endDate, unit)}
+              loading={loading}
+            />
+          )}
         </div>
       </div>
     </div>

components/pages/WebsiteList.js

@@ -1,28 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import Page from 'components/layout/Page';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import Button from 'components/common/Button';
 import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
+import Chart from 'assets/chart-bar.svg';
 import styles from './WebsiteList.module.css';
 
 export default function WebsiteList({ userId }) {
   const { data } = useFetch('/api/websites', { params: { user_id: userId } });
+  const [hideCharts, setHideCharts] = useState(false);
 
   if (!data) {
     return null;
   }
 
-  return (
-    <Page>
-      {data.map(({ website_id, name, domain }) => (
-        <div key={website_id} className={styles.website}>
-          <WebsiteChart websiteId={website_id} title={name} domain={domain} showLink />
-        </div>
-      ))}
-      {data.length === 0 && (
+  if (data.length === 0) {
+    return (
+      <Page>
         <EmptyPlaceholder
           msg={
             <FormattedMessage
@@ -35,7 +33,26 @@ export default function WebsiteList({ userId }) {
             <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
           </Link>
         </EmptyPlaceholder>
-      )}
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <div className={styles.menubar}>
+        <Button icon={<Chart />} onClick={() => setHideCharts(!hideCharts)} />
+      </div>
+      {data.map(({ website_id, name, domain }) => (
+        <div key={website_id} className={styles.website}>
+          <WebsiteChart
+            websiteId={website_id}
+            title={name}
+            domain={domain}
+            hideChart={hideCharts}
+            showLink
+          />
+        </div>
+      ))}
     </Page>
   );
 }

components/pages/WebsiteList.module.css

@@ -9,3 +9,10 @@
   border-bottom: 0;
   margin-bottom: 0;
 }
+
+.menubar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: 10px;
+}