mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-24 18:26:20 +01:00
New Dashboard component.
This commit is contained in:
parent
33c921a32f
commit
20622116a8
@ -11,6 +11,7 @@ function MenuButton({
|
|||||||
value,
|
value,
|
||||||
options,
|
options,
|
||||||
buttonClassName,
|
buttonClassName,
|
||||||
|
buttonVariant,
|
||||||
menuClassName,
|
menuClassName,
|
||||||
menuPosition = 'bottom',
|
menuPosition = 'bottom',
|
||||||
menuAlign = 'right',
|
menuAlign = 'right',
|
||||||
@ -43,7 +44,7 @@ function MenuButton({
|
|||||||
icon={icon}
|
icon={icon}
|
||||||
className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })}
|
className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })}
|
||||||
onClick={toggleMenu}
|
onClick={toggleMenu}
|
||||||
variant="light"
|
variant={buttonVariant}
|
||||||
>
|
>
|
||||||
{!hideLabel && (
|
{!hideLabel && (
|
||||||
<div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
|
<div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
|
||||||
|
@ -9,7 +9,8 @@ import styles from './ActiveUsers.module.css';
|
|||||||
|
|
||||||
export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
|
export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
|
||||||
const shareToken = useShareToken();
|
const shareToken = useShareToken();
|
||||||
const { data } = useFetch(!value && `/website/${websiteId}/active`, {
|
const url = value !== undefined && websiteId ? `/website/${websiteId}/active` : null;
|
||||||
|
const { data } = useFetch(url, {
|
||||||
interval,
|
interval,
|
||||||
headers: { [TOKEN_HEADER]: shareToken?.token },
|
headers: { [TOKEN_HEADER]: shareToken?.token },
|
||||||
});
|
});
|
||||||
|
46
components/pages/Dashboard.js
Normal file
46
components/pages/Dashboard.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import Page from 'components/layout/Page';
|
||||||
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
|
import WebsiteList from 'components/pages/WebsiteList';
|
||||||
|
import Button from 'components/common/Button';
|
||||||
|
import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
|
||||||
|
import useFetch from 'hooks/useFetch';
|
||||||
|
import useStore from 'store/app';
|
||||||
|
import styles from './WebsiteList.module.css';
|
||||||
|
|
||||||
|
const selector = state => state.dashboard;
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { id } = router.query;
|
||||||
|
const userId = id?.[0];
|
||||||
|
const store = useStore(selector);
|
||||||
|
const { showCharts, limit } = store;
|
||||||
|
const [max, setMax] = useState(limit);
|
||||||
|
const { data } = useFetch('/websites', { params: { user_id: userId } });
|
||||||
|
|
||||||
|
function handleMore() {
|
||||||
|
setMax(max + limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<PageHeader>
|
||||||
|
<div>Dashboard</div>
|
||||||
|
<DashboardSettingsButton />
|
||||||
|
</PageHeader>
|
||||||
|
<WebsiteList websites={data} showCharts={showCharts} limit={max} />
|
||||||
|
{max < data.length && (
|
||||||
|
<Button className={styles.button} onClick={handleMore}>
|
||||||
|
<FormattedMessage id="label.more" defaultMessage="More" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Page>
|
||||||
|
);
|
||||||
|
}
|
@ -1,32 +1,13 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import Link from 'components/common/Link';
|
import Link from 'components/common/Link';
|
||||||
import WebsiteChart from 'components/metrics/WebsiteChart';
|
import WebsiteChart from 'components/metrics/WebsiteChart';
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||||
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 Arrow from 'assets/arrow-right.svg';
|
||||||
import styles from './WebsiteList.module.css';
|
import styles from './WebsiteList.module.css';
|
||||||
|
|
||||||
const selector = state => state.dashboard;
|
export default function WebsiteList({ websites, showCharts, limit }) {
|
||||||
|
if (websites.length === 0) {
|
||||||
export default function WebsiteList({ userId }) {
|
|
||||||
const { data } = useFetch('/websites', { params: { user_id: userId } });
|
|
||||||
const { showCharts, limit } = useStore(selector);
|
|
||||||
const [max, setMax] = useState(limit);
|
|
||||||
|
|
||||||
function handleMore() {
|
|
||||||
setMax(max + limit);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.length === 0) {
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<EmptyPlaceholder
|
<EmptyPlaceholder
|
||||||
@ -46,12 +27,9 @@ export default function WebsiteList({ userId }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<div>
|
||||||
<div className={styles.menubar}>
|
{websites.map(({ website_id, name, domain }, index) =>
|
||||||
<DashboardSettingsButton />
|
index < limit ? (
|
||||||
</div>
|
|
||||||
{data.map(({ website_id, name, domain }, index) =>
|
|
||||||
index < max ? (
|
|
||||||
<div key={website_id} className={styles.website}>
|
<div key={website_id} className={styles.website}>
|
||||||
<WebsiteChart
|
<WebsiteChart
|
||||||
websiteId={website_id}
|
websiteId={website_id}
|
||||||
@ -63,11 +41,6 @@ export default function WebsiteList({ userId }) {
|
|||||||
</div>
|
</div>
|
||||||
) : null,
|
) : null,
|
||||||
)}
|
)}
|
||||||
{max < data.length && (
|
</div>
|
||||||
<Button className={styles.button} onClick={handleMore}>
|
|
||||||
<FormattedMessage id="label.more" defaultMessage="More" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Page>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -7,17 +7,5 @@
|
|||||||
|
|
||||||
.website:last-child {
|
.website:last-child {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
.menubar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
align-self: center;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import MenuButton from 'components/common/MenuButton';
|
import MenuButton from 'components/common/MenuButton';
|
||||||
import Gear from 'assets/gear.svg';
|
import Gear from 'assets/gear.svg';
|
||||||
import useStore, { setDashboard } from 'store/app';
|
import useStore, { setDashboard, defaultDashboardConfig } from 'store/app';
|
||||||
|
|
||||||
const selector = state => state.dashboard;
|
const selector = state => state.dashboard;
|
||||||
|
|
||||||
@ -18,7 +18,7 @@ export default function DashboardSettingsButton() {
|
|||||||
|
|
||||||
function handleSelect(value) {
|
function handleSelect(value) {
|
||||||
if (value === 'charts') {
|
if (value === 'charts') {
|
||||||
setDashboard({ showCharts: !settings.showCharts });
|
setDashboard({ ...defaultDashboardConfig, showCharts: !settings.showCharts });
|
||||||
}
|
}
|
||||||
//setDashboard(value);
|
//setDashboard(value);
|
||||||
}
|
}
|
||||||
|
@ -19,6 +19,7 @@ export default function LanguageButton() {
|
|||||||
options={menuOptions}
|
options={menuOptions}
|
||||||
value={locale}
|
value={locale}
|
||||||
menuClassName={styles.menu}
|
menuClassName={styles.menu}
|
||||||
|
buttonVariant="light"
|
||||||
onSelect={handleSelect}
|
onSelect={handleSelect}
|
||||||
hideLabel
|
hideLabel
|
||||||
/>
|
/>
|
||||||
|
@ -43,6 +43,7 @@ export default function UserButton() {
|
|||||||
<MenuButton
|
<MenuButton
|
||||||
icon={<Icon icon={<User />} size="large" />}
|
icon={<Icon icon={<User />} size="large" />}
|
||||||
value={<Icon icon={<Chevron />} size="small" />}
|
value={<Icon icon={<Chevron />} size="small" />}
|
||||||
|
buttonVariant="light"
|
||||||
options={menuOptions}
|
options={menuOptions}
|
||||||
onSelect={handleSelect}
|
onSelect={handleSelect}
|
||||||
/>
|
/>
|
||||||
|
@ -1,14 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import Layout from 'components/layout/Layout';
|
import Layout from 'components/layout/Layout';
|
||||||
import WebsiteList from 'components/pages/WebsiteList';
|
import Dashboard from 'components/pages/Dashboard';
|
||||||
import useRequireLogin from 'hooks/useRequireLogin';
|
import useRequireLogin from 'hooks/useRequireLogin';
|
||||||
|
|
||||||
export default function DashboardPage() {
|
export default function DashboardPage() {
|
||||||
const { loading } = useRequireLogin();
|
const { loading } = useRequireLogin();
|
||||||
const router = useRouter();
|
|
||||||
const { id } = router.query;
|
|
||||||
const userId = id?.[0];
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return null;
|
return null;
|
||||||
@ -16,7 +12,7 @@ export default function DashboardPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<WebsiteList userId={userId} />
|
<Dashboard />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ import {
|
|||||||
} from 'lib/constants';
|
} from 'lib/constants';
|
||||||
import { getItem } from 'lib/web';
|
import { getItem } from 'lib/web';
|
||||||
|
|
||||||
const defaultDashboardConfig = {
|
export const defaultDashboardConfig = {
|
||||||
showCharts: true,
|
showCharts: true,
|
||||||
limit: DEFAULT_WEBSITE_LIMIT,
|
limit: DEFAULT_WEBSITE_LIMIT,
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user