Added website limit and show more button. Closes #592.

assets/gear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.265 315.978C504.265 307.326 499.658 299.134 491.906 294.586L458.998 275.615C459.643 269.099 459.966 262.549 459.966 256S459.643 242.901 458.998 236.385L491.906 217.414C499.658 212.866 504.265 204.674 504.265 196.022C504.265 174.755 454.947 67.846 419.746 67.846C415.502 67.846 411.236 68.939 407.379 71.203L374.599 90.172C363.888 82.43 352.533 75.848 340.531 70.428V32.488C340.531 21.262 333.047 11.453 322.205 8.613C300.654 2.871 278.425 0 256.181 0C233.935 0 211.675 2.871 190.06 8.613C179.218 11.453 171.734 21.262 171.734 32.488V70.428C159.732 75.848 148.377 82.43 137.666 90.172L104.886 71.203C101.031 68.939 96.763 67.846 92.519 67.846C92.517 67.846 92.514 67.846 92.512 67.846C60.048 67.846 8 169.591 8 196.022C8 204.674 12.607 212.866 20.359 217.414L53.267 236.385C52.622 242.901 52.299 249.451 52.299 256S52.622 269.099 53.267 275.615L20.359 294.586C12.607 299.134 8 307.326 8 315.978C8 337.245 57.318 444.154 92.519 444.154C96.763 444.154 101.029 443.061 104.886 440.797L137.666 421.828C148.377 429.57 159.732 436.152 171.734 441.572V479.512C171.734 490.738 179.218 500.547 190.06 503.387C211.611 509.129 233.84 512 256.084 512C278.33 512 300.59 509.129 322.205 503.387C333.047 500.547 340.531 490.738 340.531 479.512V441.572C352.533 436.152 363.888 429.57 374.599 421.828L407.379 440.797C411.234 443.061 415.502 444.154 419.746 444.154C452.209 444.154 504.265 342.423 504.265 315.978ZM415.361 389.959C391.561 376.186 404.101 383.444 371.705 364.695C329.649 395.09 339.375 389.426 292.531 410.582V460.82C279.236 463.161 266.948 464 256.093 464C240.669 464 228.14 462.306 219.734 460.824V410.582C172.779 389.376 182.552 395.044 140.56 364.695C108.748 383.105 117.896 377.811 96.924 389.949C81.181 371.256 68.849 349.895 60.517 326.84C81.643 314.663 72.361 320.014 104.088 301.723C101.549 276.083 100.277 266.079 100.277 256.04C100.277 246.018 101.545 235.96 104.088 210.277C72.198 191.892 81.571 197.295 60.504 185.152C68.818 162.109 81.187 140.686 96.904 122.041C120.704 135.814 108.164 128.556 140.56 147.305C182.616 116.91 172.89 122.574 219.734 101.418V51.18C233.029 48.839 245.318 48 256.172 48C271.597 48 284.126 49.694 292.531 51.176V101.418C339.486 122.624 329.713 116.956 371.705 147.305C405.655 127.657 394.228 134.27 415.343 122.051C431.084 140.744 443.416 162.105 451.748 185.16C430.622 197.337 439.904 191.986 408.177 210.277C410.716 235.917 411.988 245.921 411.988 255.96C411.988 265.982 410.72 276.04 408.177 301.723C440.067 320.108 430.694 314.705 451.761 326.848C443.447 349.891 431.078 371.314 415.361 389.959ZM256.133 160C203.258 160 160.133 203.125 160.133 256S203.258 352 256.133 352S352.133 308.875 352.133 256S309.008 160 256.133 160ZM256.133 304C229.666 304 208.133 282.467 208.133 256S229.666 208 256.133 208S304.133 229.533 304.133 256S282.599 304 256.133 304Z "></path></svg>

components/helpers/StickyHeader.js

@@ -25,9 +25,8 @@ export default function StickyHeader({
       }
     };
 
-    checkPosition();
-
     if (enabled) {
+      checkPosition();
       window.addEventListener('scroll', checkPosition);
     }
 

components/pages/WebsiteList.js

@@ -4,15 +4,23 @@ 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 DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
+import Button from 'components/common/Button';
+import useStore from 'store/app';
 import Arrow from 'assets/arrow-right.svg';
-import Chart from 'assets/chart-bar.svg';
 import styles from './WebsiteList.module.css';
 
+const selector = state => state.dashboard;
+
 export default function WebsiteList({ userId }) {
   const { data } = useFetch('/websites', { params: { user_id: userId } });
-  const [showCharts, setShowCharts] = useState(true);
+  const { showCharts, limit } = useStore(selector);
+  const [max, setMax] = useState(limit);
+
+  function handleMore() {
+    setMax(max + limit);
+  }
 
   if (!data) {
     return null;
@@ -40,23 +48,26 @@ export default function WebsiteList({ userId }) {
   return (
     <Page>
       <div className={styles.menubar}>
-        <Button
-          tooltip={<FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />}
-          icon={<Chart />}
-          onClick={() => setShowCharts(!showCharts)}
-        />
+        <DashboardSettingsButton />
       </div>
-      {data.map(({ website_id, name, domain }) => (
-        <div key={website_id} className={styles.website}>
-          <WebsiteChart
-            websiteId={website_id}
-            title={name}
-            domain={domain}
-            showChart={showCharts}
-            showLink
-          />
-        </div>
-      ))}
+      {data.map(({ website_id, name, domain }, index) =>
+        index < max ? (
+          <div key={website_id} className={styles.website}>
+            <WebsiteChart
+              websiteId={website_id}
+              title={name}
+              domain={domain}
+              showChart={showCharts}
+              showLink
+            />
+          </div>
+        ) : null,
+      )}
+      {max < data.length && (
+        <Button className={styles.button} onClick={handleMore}>
+          <FormattedMessage id="label.more" defaultMessage="More" />
+        </Button>
+      )}
     </Page>
   );
 }

components/pages/WebsiteList.module.css

@@ -16,3 +16,8 @@
   justify-content: flex-end;
   padding-top: 10px;
 }
+
+.button {
+  align-self: center;
+  margin-bottom: 40px;
+}

components/settings/DashboardSettingsButton.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import MenuButton from 'components/common/MenuButton';
+import Gear from 'assets/gear.svg';
+import useStore, { setDashboard } from 'store/app';
+
+const selector = state => state.dashboard;
+
+export default function DashboardSettingsButton() {
+  const settings = useStore(selector);
+
+  const menuOptions = [
+    {
+      label: <FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />,
+      value: 'charts',
+    },
+  ];
+
+  function handleSelect(value) {
+    if (value === 'charts') {
+      setDashboard({ showCharts: !settings.showCharts });
+    }
+    //setDashboard(value);
+  }
+
+  return <MenuButton icon={<Gear />} options={menuOptions} onSelect={handleSelect} hideLabel />;
+}

hooks/useDateRange.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { parseISO } from 'date-fns';
 import { getDateRange } from 'lib/date';
 import { getItem, setItem } from 'lib/web';
@@ -9,10 +9,10 @@ import useStore, { setDateRange } from 'store/websites';
 
 export default function useDateRange(websiteId) {
   const { locale } = useLocale();
+  const forceUpdate = useForceUpdate();
   const selector = useCallback(state => state?.[websiteId]?.dateRange, [websiteId]);
   const websiteDateRange = useStore(selector);
-  const forceUpdate = useForceUpdate();
-  const defaultDateRange = getDateRange(DEFAULT_DATE_RANGE, locale);
+  const defaultDateRange = useMemo(() => getDateRange(DEFAULT_DATE_RANGE, locale), [locale]);
 
   const globalDefault = getItem(DATE_RANGE_CONFIG);
   let globalDateRange;

lib/constants.js

@@ -3,6 +3,7 @@ export const LOCALE_CONFIG = 'umami.locale';
 export const TIMEZONE_CONFIG = 'umami.timezone';
 export const DATE_RANGE_CONFIG = 'umami.date-range';
 export const THEME_CONFIG = 'umami.theme';
+export const DASHBOARD_CONFIG = 'umami.dashboard';
 export const VERSION_CHECK = 'umami.version-check';
 export const TOKEN_HEADER = 'x-umami-token';
 export const HOMEPAGE_URL = 'https://umami.is';
@@ -10,9 +11,9 @@ export const VERSION_URL = 'https://github.com/mikecao/umami/releases';
 
 export const DEFAULT_LOCALE = 'en-US';
 export const DEFAULT_THEME = 'light';
-export const DEFAUL_CHART_HEIGHT = 400;
 export const DEFAULT_ANIMATION_DURATION = 300;
 export const DEFAULT_DATE_RANGE = '24hour';
+export const DEFAULT_WEBSITE_LIMIT = 10;
 
 export const REALTIME_RANGE = 30;
 export const REALTIME_INTERVAL = 3000;

store/app.js

@@ -1,10 +1,23 @@
 import create from 'zustand';
-import { DEFAULT_LOCALE, DEFAULT_THEME, LOCALE_CONFIG, THEME_CONFIG } from 'lib/constants';
+import {
+  DASHBOARD_CONFIG,
+  DEFAULT_LOCALE,
+  DEFAULT_THEME,
+  LOCALE_CONFIG,
+  THEME_CONFIG,
+  DEFAULT_WEBSITE_LIMIT,
+} from 'lib/constants';
 import { getItem } from 'lib/web';
 
+const defaultDashboardConfig = {
+  showCharts: true,
+  limit: DEFAULT_WEBSITE_LIMIT,
+};
+
 const initialState = {
   locale: getItem(LOCALE_CONFIG) || DEFAULT_LOCALE,
   theme: getItem(THEME_CONFIG) || DEFAULT_THEME,
+  dashboard: getItem(DASHBOARD_CONFIG) || defaultDashboardConfig,
   shareToken: null,
   user: null,
 };
@@ -27,4 +40,8 @@ export function setUser(user) {
   store.setState({ user });
 }
 
+export function setDashboard(dashboard) {
+  store.setState({ dashboard });
+}
+
 export default store;