diff --git a/assets/gear.svg b/assets/gear.svg
new file mode 100644
index 00000000..ab97a693
--- /dev/null
+++ b/assets/gear.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/helpers/StickyHeader.js b/components/helpers/StickyHeader.js
index 477bd393..9c42e4fd 100644
--- a/components/helpers/StickyHeader.js
+++ b/components/helpers/StickyHeader.js
@@ -25,9 +25,8 @@ export default function StickyHeader({
}
};
- checkPosition();
-
if (enabled) {
+ checkPosition();
window.addEventListener('scroll', checkPosition);
}
diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index 0a29d8ed..f2094f03 100644
--- a/components/pages/WebsiteList.js
+++ b/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 (
- }
- icon={}
- onClick={() => setShowCharts(!showCharts)}
- />
+
- {data.map(({ website_id, name, domain }) => (
-
-
-
- ))}
+ {data.map(({ website_id, name, domain }, index) =>
+ index < max ? (
+
+
+
+ ) : null,
+ )}
+ {max < data.length && (
+
+ )}
);
}
diff --git a/components/pages/WebsiteList.module.css b/components/pages/WebsiteList.module.css
index 4c2952d6..d9899574 100644
--- a/components/pages/WebsiteList.module.css
+++ b/components/pages/WebsiteList.module.css
@@ -16,3 +16,8 @@
justify-content: flex-end;
padding-top: 10px;
}
+
+.button {
+ align-self: center;
+ margin-bottom: 40px;
+}
diff --git a/components/settings/DashboardSettingsButton.js b/components/settings/DashboardSettingsButton.js
new file mode 100644
index 00000000..41dc3bf2
--- /dev/null
+++ b/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: ,
+ value: 'charts',
+ },
+ ];
+
+ function handleSelect(value) {
+ if (value === 'charts') {
+ setDashboard({ showCharts: !settings.showCharts });
+ }
+ //setDashboard(value);
+ }
+
+ return } options={menuOptions} onSelect={handleSelect} hideLabel />;
+}
diff --git a/hooks/useDateRange.js b/hooks/useDateRange.js
index 5b2b3a19..81fc6846 100644
--- a/hooks/useDateRange.js
+++ b/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;
diff --git a/lib/constants.js b/lib/constants.js
index de9cef20..cdeebf72 100644
--- a/lib/constants.js
+++ b/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;
diff --git a/store/app.js b/store/app.js
index 0fe8ac02..4182abed 100644
--- a/store/app.js
+++ b/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;