maxime.io
GitHub
commit
774f47c284
|
|
@ -0,0 +1,19 @@
|
|||
# Number of days of inactivity before an issue becomes stale
|
||||
daysUntilStale: 60
|
||||
# Number of days of inactivity before a stale issue is closed
|
||||
daysUntilClose: 7
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- pinned
|
||||
- security
|
||||
- enhancement
|
||||
- bug
|
||||
# Label to use when marking an issue as stale
|
||||
staleLabel: wontfix
|
||||
# Comment to post when marking an issue as stale. Set to `false` to disable
|
||||
markComment: >
|
||||
This issue has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed if no further activity occurs. Thank you
|
||||
for your contributions.
|
||||
# Comment to post when closing a stale issue. Set to `false` to disable
|
||||
closeComment: false
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
/build
|
||||
/public/umami.js
|
||||
/lang-compiled
|
||||
/lang-formatted
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
|
|
|||
40
Dockerfile
40
Dockerfile
|
|
@ -1,15 +1,41 @@
|
|||
FROM node:12.18-alpine
|
||||
|
||||
# Build image
|
||||
FROM node:12.18-alpine AS build
|
||||
ARG DATABASE_TYPE
|
||||
|
||||
ENV DATABASE_URL "postgresql://umami:umami@db:5432/umami" \
|
||||
DATABASE_TYPE=$DATABASE_TYPE
|
||||
WORKDIR /build
|
||||
|
||||
COPY . /app
|
||||
RUN yarn config set --home enableTelemetry 0
|
||||
COPY package.json yarn.lock /build/
|
||||
|
||||
# Install only the production dependencies
|
||||
RUN yarn install --production --frozen-lockfile
|
||||
|
||||
# Cache these modules for production
|
||||
RUN cp -R node_modules/ prod_node_modules/
|
||||
|
||||
# Install development dependencies
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
COPY . /build
|
||||
RUN yarn next telemetry disable
|
||||
RUN yarn build
|
||||
|
||||
# Production image
|
||||
FROM node:12.18-alpine AS production
|
||||
WORKDIR /app
|
||||
|
||||
RUN npm install && npm run build
|
||||
# Copy cached dependencies
|
||||
COPY --from=build /build/prod_node_modules ./node_modules
|
||||
|
||||
# Copy generated Prisma client
|
||||
COPY --from=build /build/node_modules/.prisma/ ./node_modules/.prisma/
|
||||
|
||||
COPY --from=build /build/yarn.lock /build/package.json ./
|
||||
COPY --from=build /build/.next ./.next
|
||||
COPY --from=build /build/public ./public
|
||||
|
||||
USER node
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["npm", "start"]
|
||||
CMD ["yarn", "start"]
|
||||
|
|
|
|||
|
|
@ -92,7 +92,6 @@ Or with MySQL support:
|
|||
docker pull ghcr.io/mikecao/umami:mysql-latest
|
||||
```
|
||||
|
||||
|
||||
## Getting updates
|
||||
|
||||
To get the latest features, simply do a pull, install any new dependencies, and rebuild:
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z"/></svg>
|
||||
|
After Width: | Height: | Size: 1002 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.6,0,334.4.17A14.4,14.4,0,0,0,320,14.57V47.88a14.4,14.4,0,0,0,14.69,14.4l73.63-2.72,2.06,2.06L131.52,340.49a12,12,0,0,0,0,17l23,23a12,12,0,0,0,17,0L450.38,101.62l2.06,2.06-2.72,73.63A14.4,14.4,0,0,0,464.12,192h33.31a14.4,14.4,0,0,0,14.4-14.4L512,14.4A14.4,14.4,0,0,0,497.6,0ZM432,288H416a16,16,0,0,0-16,16V458a6,6,0,0,1-6,6H54a6,6,0,0,1-6-6V118a6,6,0,0,1,6-6H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V304A16,16,0,0,0,432,288Z"/></svg>
|
||||
|
After Width: | Height: | Size: 575 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 368a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 24H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
|
||||
|
After Width: | Height: | Size: 492 B |
|
|
@ -1 +1,2 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11"><defs><style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;stroke-width:20px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_4" data-name="Layer 4"><circle class="cls-1" cx="214.15" cy="181" r="171"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></g></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11">
|
||||
<circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 488 B After Width: | Height: | Size: 377 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44,837.55C335.89,611,288.08,273.54,418.71,0A734.31,734.31,0,0,0,215.54,143.73c-287.39,287.39-287.39,753.33,0,1040.72s753.33,287.4,1040.74,0A733.8,733.8,0,0,0,1400,981.29C1126.45,1111.92,789,1064.09,562.44,837.55Z"/></svg>
|
||||
|
After Width: | Height: | Size: 302 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43,422.13a54.44,54.44,0,0,1-38.66-16L205,282.35A54.69,54.69,0,0,1,282.37,205L406.11,328.79a54.68,54.68,0,0,1-38.68,93.34Z"/><path d="M1156.3,1211a54.51,54.51,0,0,1-38.67-16L993.89,1071.21a54.68,54.68,0,1,1,77.34-77.33L1195,1117.65A54.7,54.7,0,0,1,1156.3,1211Z"/><path d="M243.7,1211A54.7,54.7,0,0,1,205,1117.65L328.74,993.89a54.69,54.69,0,0,1,77.36,77.32L282.37,1195A54.51,54.51,0,0,1,243.7,1211Z"/><path d="M1032.57,422.13a54.68,54.68,0,0,1-38.68-93.34L1117.61,205A54.69,54.69,0,0,1,1195,282.35L1071.23,406.11A54.44,54.44,0,0,1,1032.57,422.13Z"/><path d="M229.69,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M1345.31,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M700,1400a54.68,54.68,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.68,54.68,0,0,1,700,1400Z"/><path d="M700,284.38a54.7,54.7,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.7,54.7,0,0,1,700,284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useRouter } from 'next/router';
|
||||
import classNames from 'classnames';
|
||||
import WebsiteChart from 'components/metrics/WebsiteChart';
|
||||
import WorldMap from 'components/common/WorldMap';
|
||||
|
|
@ -19,19 +20,37 @@ import EventsChart from './metrics/EventsChart';
|
|||
import useFetch from 'hooks/useFetch';
|
||||
import Loading from 'components/common/Loading';
|
||||
|
||||
export default function WebsiteDetails({ websiteId }) {
|
||||
const { data } = useFetch(`/api/website/${websiteId}`);
|
||||
const views = {
|
||||
url: PagesTable,
|
||||
referrer: ReferrersTable,
|
||||
browser: BrowsersTable,
|
||||
os: OSTable,
|
||||
device: DevicesTable,
|
||||
country: CountriesTable,
|
||||
event: EventsTable,
|
||||
};
|
||||
|
||||
export default function WebsiteDetails({ websiteId, token }) {
|
||||
const router = useRouter();
|
||||
const { data } = useFetch(`/api/website/${websiteId}`, { token });
|
||||
const [chartLoaded, setChartLoaded] = useState(false);
|
||||
const [countryData, setCountryData] = useState();
|
||||
const [eventsData, setEventsData] = useState();
|
||||
const [expand, setExpand] = useState();
|
||||
const {
|
||||
query: { id, view },
|
||||
basePath,
|
||||
asPath,
|
||||
} = router;
|
||||
|
||||
const path = `${basePath}/${asPath.split('/')[1]}/${id.join('/')}`;
|
||||
|
||||
const BackButton = () => (
|
||||
<Button
|
||||
key="back-button"
|
||||
className={styles.backButton}
|
||||
icon={<Arrow />}
|
||||
size="xsmall"
|
||||
onClick={() => setExpand(null)}
|
||||
onClick={() => router.push(path)}
|
||||
>
|
||||
<div>
|
||||
<FormattedMessage id="button.back" defaultMessage="Back" />
|
||||
|
|
@ -45,53 +64,43 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
|
||||
value: 'url',
|
||||
component: PagesTable,
|
||||
value: `${path}?view=url`,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
|
||||
value: 'referrer',
|
||||
component: ReferrersTable,
|
||||
value: `${path}?view=referrer`,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
|
||||
value: 'browser',
|
||||
component: BrowsersTable,
|
||||
value: `${path}?view=browser`,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.operating-system" defaultMessage="Operating system" />,
|
||||
value: 'os',
|
||||
component: OSTable,
|
||||
label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
|
||||
value: `${path}?view=os`,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
|
||||
value: 'device',
|
||||
component: DevicesTable,
|
||||
value: `${path}?view=device`,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
|
||||
value: 'country',
|
||||
component: CountriesTable,
|
||||
value: `${path}?view=country`,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
|
||||
value: 'event',
|
||||
component: EventsTable,
|
||||
value: `${path}?view=event`,
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps = {
|
||||
websiteId,
|
||||
token,
|
||||
websiteDomain: data?.domain,
|
||||
limit: 10,
|
||||
onExpand: handleExpand,
|
||||
};
|
||||
|
||||
const DetailsComponent = expand?.component;
|
||||
|
||||
function getSelectedMenuOption(value) {
|
||||
return menuOptions.find(e => e.value === value);
|
||||
}
|
||||
const DetailsComponent = views[view];
|
||||
|
||||
function handleDataLoad() {
|
||||
if (!chartLoaded) {
|
||||
|
|
@ -100,11 +109,7 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
}
|
||||
|
||||
function handleExpand(value) {
|
||||
setExpand(getSelectedMenuOption(value));
|
||||
}
|
||||
|
||||
function handleMenuSelect(value) {
|
||||
setExpand(getSelectedMenuOption(value));
|
||||
router.push(`${path}?view=${value}`);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
|
|
@ -117,6 +122,7 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
<div className={classNames(styles.chart, 'col')}>
|
||||
<WebsiteChart
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
title={data.name}
|
||||
onDataLoad={handleDataLoad}
|
||||
showLink={false}
|
||||
|
|
@ -125,7 +131,7 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
</div>
|
||||
</div>
|
||||
{!chartLoaded && <Loading />}
|
||||
{chartLoaded && !expand && (
|
||||
{chartLoaded && !view && (
|
||||
<>
|
||||
<div className={classNames(styles.row, 'row')}>
|
||||
<div className="col-md-12 col-lg-6">
|
||||
|
|
@ -161,19 +167,17 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
<EventsTable {...tableProps} onDataLoad={setEventsData} />
|
||||
</div>
|
||||
<div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
|
||||
<EventsChart websiteId={websiteId} />
|
||||
<EventsChart websiteId={websiteId} token={token} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{expand && (
|
||||
{view && (
|
||||
<MenuLayout
|
||||
className={styles.expand}
|
||||
className={styles.view}
|
||||
menuClassName={styles.menu}
|
||||
optionClassName={styles.option}
|
||||
contentClassName={styles.content}
|
||||
menu={menuOptions}
|
||||
selectedOption={expand.value}
|
||||
onMenuSelect={handleMenuSelect}
|
||||
>
|
||||
<DetailsComponent {...tableProps} limit={false} />
|
||||
</MenuLayout>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.expand {
|
||||
.view {
|
||||
border-top: 1px solid var(--gray300);
|
||||
}
|
||||
|
||||
|
|
@ -10,8 +10,9 @@
|
|||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.menu .option {
|
||||
font-size: var(--font-size-small);
|
||||
.content {
|
||||
min-height: 600px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
|
||||
.row > [class*='col-'] {
|
||||
border-left: 1px solid var(--gray300);
|
||||
padding: 0 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.row > [class*='col-']:first-child {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ import useFetch from 'hooks/useFetch';
|
|||
import Arrow from 'assets/arrow-right.svg';
|
||||
import styles from './WebsiteList.module.css';
|
||||
|
||||
export default function WebsiteList() {
|
||||
export default function WebsiteList({ userId }) {
|
||||
const router = useRouter();
|
||||
const { data } = useFetch('/api/websites');
|
||||
const { data } = useFetch('/api/websites', { user_id: userId });
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
|
|
@ -28,17 +28,14 @@ export default function WebsiteList() {
|
|||
<EmptyPlaceholder
|
||||
msg={
|
||||
<FormattedMessage
|
||||
id="placeholder.message.no-websites-configured"
|
||||
id="message.no-websites-configured"
|
||||
defaultMessage="You don't have any websites configured."
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="placeholder.message.go-to-settings"
|
||||
defaultMessage="Go to settings"
|
||||
/>
|
||||
<FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
|
||||
</div>
|
||||
</Button>
|
||||
</EmptyPlaceholder>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ export default function Button({
|
|||
className,
|
||||
tooltip,
|
||||
tooltipId,
|
||||
disabled = false,
|
||||
onClick = () => {},
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
|
|
@ -27,7 +29,11 @@ export default function Button({
|
|||
[styles.xsmall]: size === 'xsmall',
|
||||
[styles.action]: variant === 'action',
|
||||
[styles.danger]: variant === 'danger',
|
||||
[styles.light]: variant === 'light',
|
||||
[styles.disabled]: disabled,
|
||||
})}
|
||||
disabled={disabled}
|
||||
onClick={!disabled ? onClick : null}
|
||||
{...props}
|
||||
>
|
||||
{icon && <Icon icon={icon} size={size} />}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-normal);
|
||||
color: var(--gray900);
|
||||
background: var(--gray100);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -14,11 +15,11 @@
|
|||
}
|
||||
|
||||
.button:hover {
|
||||
background: #eaeaea;
|
||||
background: var(--gray200);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
color: initial;
|
||||
color: var(--gray900);
|
||||
}
|
||||
|
||||
.large {
|
||||
|
|
@ -38,19 +39,45 @@
|
|||
}
|
||||
|
||||
.action {
|
||||
color: var(--gray50) !important;
|
||||
background: var(--gray900) !important;
|
||||
color: var(--gray50);
|
||||
background: var(--gray900);
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
background: var(--gray800) !important;
|
||||
background: var(--gray800);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--gray50) !important;
|
||||
background: var(--red500) !important;
|
||||
color: var(--gray50);
|
||||
background: var(--red500);
|
||||
}
|
||||
|
||||
.danger:hover {
|
||||
background: var(--red400) !important;
|
||||
background: var(--red400);
|
||||
}
|
||||
|
||||
.light {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.light:hover {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
cursor: default;
|
||||
color: var(--gray500);
|
||||
background: var(--gray75);
|
||||
}
|
||||
|
||||
.button:disabled:active {
|
||||
color: var(--gray500);
|
||||
}
|
||||
|
||||
.button:disabled:hover {
|
||||
background: var(--gray75);
|
||||
}
|
||||
|
||||
.button.light:disabled {
|
||||
background: var(--gray50);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
.group .button {
|
||||
border-radius: 0;
|
||||
color: var(--gray800);
|
||||
background: var(--gray50);
|
||||
border-left: 1px solid var(--gray500);
|
||||
padding: 4px 8px;
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.group .button.selected {
|
||||
color: var(--gray900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,267 @@
|
|||
import React, { useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
startOfWeek,
|
||||
startOfMonth,
|
||||
startOfYear,
|
||||
endOfMonth,
|
||||
addDays,
|
||||
subDays,
|
||||
addYears,
|
||||
subYears,
|
||||
addMonths,
|
||||
setMonth,
|
||||
setYear,
|
||||
isSameDay,
|
||||
isBefore,
|
||||
isAfter,
|
||||
} from 'date-fns';
|
||||
import Button from './Button';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import { dateFormat } from 'lib/lang';
|
||||
import { chunk } from 'lib/array';
|
||||
import Chevron from 'assets/chevron-down.svg';
|
||||
import Cross from 'assets/times.svg';
|
||||
import styles from './Calendar.module.css';
|
||||
import Icon from './Icon';
|
||||
|
||||
export default function Calendar({ date, minDate, maxDate, onChange }) {
|
||||
const [locale] = useLocale();
|
||||
const [selectMonth, setSelectMonth] = useState(false);
|
||||
const [selectYear, setSelectYear] = useState(false);
|
||||
|
||||
const month = dateFormat(date, 'MMMM', locale);
|
||||
const year = date.getFullYear();
|
||||
|
||||
function toggleMonthSelect() {
|
||||
setSelectYear(false);
|
||||
setSelectMonth(state => !state);
|
||||
}
|
||||
|
||||
function toggleYearSelect() {
|
||||
setSelectMonth(false);
|
||||
setSelectYear(state => !state);
|
||||
}
|
||||
|
||||
function handleChange(value) {
|
||||
setSelectMonth(false);
|
||||
setSelectYear(false);
|
||||
if (value) {
|
||||
onChange(value);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.calendar}>
|
||||
<div className={styles.header}>
|
||||
<div>{date.getDate()}</div>
|
||||
<div
|
||||
className={classNames(styles.selector, { [styles.open]: selectMonth })}
|
||||
onClick={toggleMonthSelect}
|
||||
>
|
||||
{month}
|
||||
<Icon className={styles.icon} icon={selectMonth ? <Cross /> : <Chevron />} size="small" />
|
||||
</div>
|
||||
<div
|
||||
className={classNames(styles.selector, { [styles.open]: selectYear })}
|
||||
onClick={toggleYearSelect}
|
||||
>
|
||||
{year}
|
||||
<Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.body}>
|
||||
{!selectMonth && !selectYear && (
|
||||
<DaySelector
|
||||
date={date}
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
locale={locale}
|
||||
onSelect={handleChange}
|
||||
/>
|
||||
)}
|
||||
{selectMonth && (
|
||||
<MonthSelector
|
||||
date={date}
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
locale={locale}
|
||||
onSelect={handleChange}
|
||||
onClose={toggleMonthSelect}
|
||||
/>
|
||||
)}
|
||||
{selectYear && (
|
||||
<YearSelector
|
||||
date={date}
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
onSelect={handleChange}
|
||||
onClose={toggleYearSelect}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
|
||||
const startWeek = startOfWeek(date);
|
||||
const startMonth = startOfMonth(date);
|
||||
const startDay = subDays(startMonth, startMonth.getDay());
|
||||
const month = date.getMonth();
|
||||
const year = date.getFullYear();
|
||||
|
||||
const daysOfWeek = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
daysOfWeek.push(addDays(startWeek, i));
|
||||
}
|
||||
|
||||
const days = [];
|
||||
for (let i = 0; i < 35; i++) {
|
||||
days.push(addDays(startDay, i));
|
||||
}
|
||||
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{daysOfWeek.map((day, i) => (
|
||||
<th key={i} className={locale}>
|
||||
{dateFormat(day, 'EEE', locale)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{chunk(days, 7).map((week, i) => (
|
||||
<tr key={i}>
|
||||
{week.map((day, j) => {
|
||||
const disabled = isBefore(day, minDate) || isAfter(day, maxDate);
|
||||
return (
|
||||
<td
|
||||
key={j}
|
||||
className={classNames({
|
||||
[styles.selected]: isSameDay(date, day),
|
||||
[styles.faded]: day.getMonth() !== month || day.getFullYear() !== year,
|
||||
[styles.disabled]: disabled,
|
||||
})}
|
||||
onClick={!disabled ? () => onSelect(day) : null}
|
||||
>
|
||||
{day.getDate()}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
const MonthSelector = ({ date, minDate, maxDate, locale, onSelect }) => {
|
||||
const start = startOfYear(date);
|
||||
const months = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
months.push(addMonths(start, i));
|
||||
}
|
||||
|
||||
function handleSelect(value) {
|
||||
onSelect(setMonth(date, value));
|
||||
}
|
||||
|
||||
return (
|
||||
<table>
|
||||
<tbody>
|
||||
{chunk(months, 3).map((row, i) => (
|
||||
<tr key={i}>
|
||||
{row.map((month, j) => {
|
||||
const disabled =
|
||||
isBefore(endOfMonth(month), minDate) || isAfter(startOfMonth(month), maxDate);
|
||||
return (
|
||||
<td
|
||||
key={j}
|
||||
className={classNames(locale, {
|
||||
[styles.selected]: month.getMonth() === date.getMonth(),
|
||||
[styles.disabled]: disabled,
|
||||
})}
|
||||
onClick={!disabled ? () => handleSelect(month.getMonth()) : null}
|
||||
>
|
||||
{dateFormat(month, 'MMMM', locale)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
|
||||
const [currentDate, setCurrentDate] = useState(date);
|
||||
const year = date.getFullYear();
|
||||
const currentYear = currentDate.getFullYear();
|
||||
const minYear = minDate.getFullYear();
|
||||
const maxYear = maxDate.getFullYear();
|
||||
const years = [];
|
||||
for (let i = 0; i < 15; i++) {
|
||||
years.push(currentYear - 7 + i);
|
||||
}
|
||||
|
||||
function handleSelect(value) {
|
||||
onSelect(setYear(date, value));
|
||||
}
|
||||
|
||||
function handlePrevClick() {
|
||||
setCurrentDate(state => subYears(state, 15));
|
||||
}
|
||||
|
||||
function handleNextClick() {
|
||||
setCurrentDate(state => addYears(state, 15));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.pager}>
|
||||
<div className={styles.left}>
|
||||
<Button
|
||||
icon={<Chevron />}
|
||||
size="small"
|
||||
onClick={handlePrevClick}
|
||||
disabled={years[0] <= minYear}
|
||||
variant="light"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.middle}>
|
||||
<table>
|
||||
<tbody>
|
||||
{chunk(years, 5).map((row, i) => (
|
||||
<tr key={i}>
|
||||
{row.map((n, j) => (
|
||||
<td
|
||||
key={j}
|
||||
className={classNames({
|
||||
[styles.selected]: n === year,
|
||||
[styles.disabled]: n < minYear || n > maxYear,
|
||||
})}
|
||||
onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
|
||||
>
|
||||
{n}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={styles.right}>
|
||||
<Button
|
||||
icon={<Chevron />}
|
||||
size="small"
|
||||
onClick={handleNextClick}
|
||||
disabled={years[years.length - 1] > maxYear}
|
||||
variant="light"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--font-size-small);
|
||||
flex: 1;
|
||||
min-height: 306px;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
width: 100%;
|
||||
border-spacing: 5px;
|
||||
}
|
||||
|
||||
.calendar td {
|
||||
color: var(--gray800);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.calendar td:hover {
|
||||
border: 1px solid var(--gray300);
|
||||
background: var(--gray75);
|
||||
}
|
||||
|
||||
.calendar td.faded {
|
||||
color: var(--gray500);
|
||||
}
|
||||
|
||||
.calendar td.selected {
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--gray600);
|
||||
}
|
||||
|
||||
.calendar td.selected:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.calendar td.disabled {
|
||||
color: var(--gray400);
|
||||
background: var(--gray75);
|
||||
}
|
||||
|
||||
.calendar td.disabled:hover {
|
||||
cursor: default;
|
||||
background: var(--gray75);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.calendar td.faded.disabled {
|
||||
background: var(--gray100);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
line-height: 40px;
|
||||
font-size: var(--font-size-normal);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.selector {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.right svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.calendar table {
|
||||
max-width: calc(100vw - 30px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +1,39 @@
|
|||
import React from 'react';
|
||||
import { getDateRange } from 'lib/date';
|
||||
import DropDown from './DropDown';
|
||||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { endOfYear, isSameDay } from 'date-fns';
|
||||
import Modal from './Modal';
|
||||
import DropDown from './DropDown';
|
||||
import DatePickerForm from 'components/forms/DatePickerForm';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import { getDateRange } from 'lib/date';
|
||||
import { dateFormat } from 'lib/lang';
|
||||
import Calendar from 'assets/calendar-alt.svg';
|
||||
import Icon from './Icon';
|
||||
|
||||
const filterOptions = [
|
||||
{ label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
|
||||
{
|
||||
label: (
|
||||
<FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} />
|
||||
),
|
||||
value: '24hour',
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="label.this-week" defaultMessage="This week" />,
|
||||
value: '1week',
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} />
|
||||
),
|
||||
value: '7day',
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="label.this-month" defaultMessage="This month" />,
|
||||
value: '1month',
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 30 }} />
|
||||
|
|
@ -28,21 +46,74 @@ const filterOptions = [
|
|||
),
|
||||
value: '90day',
|
||||
},
|
||||
{ label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
|
||||
{ label: <FormattedMessage id="label.this-week" defaultMessage="This week" />, value: '1week' },
|
||||
{
|
||||
label: <FormattedMessage id="label.this-month" defaultMessage="This month" />,
|
||||
value: '1month',
|
||||
},
|
||||
{ label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' },
|
||||
{
|
||||
label: <FormattedMessage id="label.custom-range" defaultMessage="Custom range" />,
|
||||
value: 'custom',
|
||||
divider: true,
|
||||
},
|
||||
];
|
||||
|
||||
export default function DateFilter({ value, onChange, className }) {
|
||||
export default function DateFilter({ value, startDate, endDate, onChange, className }) {
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
const displayValue =
|
||||
value === 'custom' ? (
|
||||
<CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
|
||||
) : (
|
||||
value
|
||||
);
|
||||
|
||||
function handleChange(value) {
|
||||
if (value === 'custom') {
|
||||
setShowPicker(true);
|
||||
return;
|
||||
}
|
||||
onChange(getDateRange(value));
|
||||
}
|
||||
|
||||
function handlePickerChange(value) {
|
||||
setShowPicker(false);
|
||||
onChange(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<DropDown className={className} value={value} options={filterOptions} onChange={handleChange} />
|
||||
<>
|
||||
<DropDown
|
||||
className={className}
|
||||
value={displayValue}
|
||||
options={filterOptions}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{showPicker && (
|
||||
<Modal>
|
||||
<DatePickerForm
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
minDate={new Date(2000, 0, 1)}
|
||||
maxDate={endOfYear(new Date())}
|
||||
onChange={handlePickerChange}
|
||||
onClose={() => setShowPicker(false)}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const CustomRange = ({ startDate, endDate, onClick }) => {
|
||||
const [locale] = useLocale();
|
||||
|
||||
function handleClick(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
onClick();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Icon icon={<Calendar />} className="mr-2" onClick={handleClick} />
|
||||
{dateFormat(startDate, 'd LLL y', locale)}
|
||||
{!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export default function DropDown({
|
|||
}) {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const ref = useRef();
|
||||
const selectedOption = options.find(e => e.value === value);
|
||||
|
||||
function handleShowMenu() {
|
||||
setShowMenu(state => !state);
|
||||
|
|
@ -23,9 +24,8 @@ export default function DropDown({
|
|||
function handleSelect(selected, e) {
|
||||
e.stopPropagation();
|
||||
setShowMenu(false);
|
||||
if (selected !== value) {
|
||||
onChange(selected);
|
||||
}
|
||||
|
||||
onChange(selected);
|
||||
}
|
||||
|
||||
useDocumentClick(e => {
|
||||
|
|
@ -37,11 +37,17 @@ export default function DropDown({
|
|||
return (
|
||||
<div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
|
||||
<div className={styles.value}>
|
||||
{options.find(e => e.value === value)?.label}
|
||||
<Icon icon={<Chevron />} size="small" />
|
||||
{options.find(e => e.value === value)?.label || value}
|
||||
<Icon icon={<Chevron />} className={styles.icon} size="small" />
|
||||
</div>
|
||||
{showMenu && (
|
||||
<Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
|
||||
<Menu
|
||||
className={menuClassName}
|
||||
options={options}
|
||||
selectedOption={selectedOption}
|
||||
onSelect={handleSelect}
|
||||
float="bottom"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,24 @@
|
|||
.dropdown {
|
||||
position: relative;
|
||||
font-size: var(--font-size-small);
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
padding: 4px 16px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--gray500);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--font-size-small);
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
padding: 4px 16px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import classNames from 'classnames';
|
||||
import styles from './Icon.module.css';
|
||||
|
||||
export default function Icon({ icon, className, size = 'medium' }) {
|
||||
export default function Icon({ icon, className, size = 'medium', ...props }) {
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.icon, className, {
|
||||
|
|
@ -12,6 +12,7 @@ export default function Icon({ icon, className, size = 'medium' }) {
|
|||
[styles.small]: size === 'small',
|
||||
[styles.xsmall]: size === 'xsmall',
|
||||
})}
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import Globe from 'assets/globe.svg';
|
||||
import useDocumentClick from 'hooks/useDocumentClick';
|
||||
import Menu from './Menu';
|
||||
import Button from './Button';
|
||||
import { menuOptions } from 'lib/lang';
|
||||
import styles from './LanguageButton.module.css';
|
||||
import useLocale from '../../hooks/useLocale';
|
||||
|
||||
export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [locale, setLocale] = useLocale();
|
||||
const ref = useRef();
|
||||
const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
|
||||
|
||||
function handleSelect(value) {
|
||||
setLocale(value);
|
||||
window.localStorage.setItem('locale', value);
|
||||
setShowMenu(false);
|
||||
}
|
||||
|
||||
useDocumentClick(e => {
|
||||
if (!ref.current.contains(e.target)) {
|
||||
setShowMenu(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={ref} className={styles.container}>
|
||||
<Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
|
||||
<div className={locale}>{selectedLocale}</div>
|
||||
</Button>
|
||||
{showMenu && (
|
||||
<Menu
|
||||
className={styles.menu}
|
||||
options={menuOptions}
|
||||
onSelect={handleSelect}
|
||||
float={menuPosition}
|
||||
align={menuAlign}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
.link,
|
||||
.link:active,
|
||||
.link:visited {
|
||||
a.link,
|
||||
a.link:active,
|
||||
a.link:visited {
|
||||
position: relative;
|
||||
color: #2c2c2c;
|
||||
color: var(--gray900);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link:before {
|
||||
a.link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #2680eb;
|
||||
background: var(--primary400);
|
||||
opacity: 0.5;
|
||||
transition: width 100ms;
|
||||
}
|
||||
|
||||
.link:hover:before {
|
||||
a.link:hover:before {
|
||||
width: 100%;
|
||||
transition: width 100ms;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function Menu({
|
|||
{options
|
||||
.filter(({ hidden }) => !hidden)
|
||||
.map(option => {
|
||||
const { label, value, className: customClassName, render } = option;
|
||||
const { label, value, className: customClassName, render, divider } = option;
|
||||
|
||||
return render ? (
|
||||
render(option)
|
||||
|
|
@ -33,7 +33,9 @@ export default function Menu({
|
|||
<div
|
||||
key={value}
|
||||
className={classNames(styles.option, optionClassName, customClassName, {
|
||||
[selectedClassName]: selectedOption === value,
|
||||
[selectedClassName]: selectedOption === option,
|
||||
[styles.selected]: selectedOption === option,
|
||||
[styles.divider]: divider,
|
||||
})}
|
||||
onClick={e => onSelect(value, e)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
.option {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: normal;
|
||||
background: #fff;
|
||||
background: var(--gray50);
|
||||
padding: 4px 16px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: #f5f5f5;
|
||||
background: var(--gray100);
|
||||
}
|
||||
|
||||
.float {
|
||||
|
|
@ -40,3 +40,11 @@
|
|||
.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-top: 1px solid var(--gray300);
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Menu from 'components/common/Menu';
|
||||
import Button from 'components/common/Button';
|
||||
import useDocumentClick from 'hooks/useDocumentClick';
|
||||
import styles from './MenuButton.module.css';
|
||||
|
||||
export default function MenuButton({
|
||||
icon,
|
||||
value,
|
||||
options,
|
||||
menuPosition = 'bottom',
|
||||
menuAlign = 'right',
|
||||
onSelect,
|
||||
renderValue,
|
||||
}) {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const ref = useRef();
|
||||
const selectedOption = options.find(e => e.value === value);
|
||||
|
||||
function handleSelect(value) {
|
||||
onSelect(value);
|
||||
setShowMenu(false);
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
setShowMenu(state => !state);
|
||||
}
|
||||
|
||||
useDocumentClick(e => {
|
||||
if (!ref.current.contains(e.target)) {
|
||||
setShowMenu(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.container} ref={ref}>
|
||||
<Button
|
||||
icon={icon}
|
||||
className={classNames(styles.button, { [styles.open]: showMenu })}
|
||||
onClick={toggleMenu}
|
||||
variant="light"
|
||||
>
|
||||
<div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
|
||||
</Button>
|
||||
{showMenu && (
|
||||
<Menu
|
||||
className={styles.menu}
|
||||
options={options}
|
||||
selectedOption={selectedOption}
|
||||
onSelect={handleSelect}
|
||||
float={menuPosition}
|
||||
align={menuAlign}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.open,
|
||||
.open:hover {
|
||||
background: var(--gray50);
|
||||
border: 1px solid var(--gray500);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.modal {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: var(--gray900);
|
||||
opacity: 0.1;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
background: var(--gray50);
|
||||
min-width: 400px;
|
||||
min-height: 100px;
|
||||
max-width: 100vw;
|
||||
z-index: 1;
|
||||
border: 1px solid var(--gray300);
|
||||
padding: 30px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import classNames from 'classnames';
|
||||
import styles from './NavMenu.module.css';
|
||||
|
||||
export default function NavMenu({ options = [], className, onSelect = () => {} }) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.menu, className)}>
|
||||
{options
|
||||
.filter(({ hidden }) => !hidden)
|
||||
.map(option => {
|
||||
const { label, value, className: customClassName, render } = option;
|
||||
|
||||
return render ? (
|
||||
render(option)
|
||||
) : (
|
||||
<div
|
||||
key={value}
|
||||
className={classNames(styles.option, customClassName, {
|
||||
[styles.selected]: router.asPath === value,
|
||||
})}
|
||||
onClick={e => onSelect(value, e)}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.menu {
|
||||
color: var(--gray800);
|
||||
border: 1px solid var(--gray500);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: var(--gray75);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--gray900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { setDateRange } from 'redux/actions/websites';
|
||||
import Button from './Button';
|
||||
import Refresh from 'assets/redo.svg';
|
||||
import Dots from 'assets/ellipsis-h.svg';
|
||||
import { useDateRange } from 'hooks/useDateRange';
|
||||
import useDateRange from 'hooks/useDateRange';
|
||||
import { getDateRange } from '../../lib/date';
|
||||
|
||||
export default function RefreshButton({ websiteId }) {
|
||||
const dispatch = useDispatch();
|
||||
const dateRange = useDateRange(websiteId);
|
||||
const [dateRange] = useDateRange(websiteId);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);
|
||||
|
||||
|
|
@ -24,5 +25,13 @@ export default function RefreshButton({ websiteId }) {
|
|||
setLoading(false);
|
||||
}, [completed]);
|
||||
|
||||
return <Button icon={loading ? <Dots /> : <Refresh />} size="small" onClick={handleClick} />;
|
||||
return (
|
||||
<Button
|
||||
icon={loading ? <Dots /> : <Refresh />}
|
||||
tooltip={<FormattedMessage id="button.refresh" defaultMessage="Refresh" />}
|
||||
tooltipId="button-refresh"
|
||||
size="small"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
color: var(--gray50);
|
||||
color: var(--msgColor);
|
||||
background: var(--green400);
|
||||
margin: auto;
|
||||
z-index: 2;
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.username {
|
||||
border-bottom: 1px solid var(--gray500);
|
||||
}
|
||||
|
||||
.username:hover {
|
||||
background: var(--gray50);
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -1,44 +1,57 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
|
||||
import classNames from 'classnames';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
|
||||
import useTheme from 'hooks/useTheme';
|
||||
import { THEME_COLORS } from 'lib/constants';
|
||||
import styles from './WorldMap.module.css';
|
||||
|
||||
const geoUrl = '/world-110m.json';
|
||||
|
||||
export default function WorldMap({
|
||||
data,
|
||||
className,
|
||||
baseColor = '#e9f3fd',
|
||||
fillColor = '#f5f5f5',
|
||||
strokeColor = '#2680eb',
|
||||
hoverColor = '#2680eb',
|
||||
}) {
|
||||
export default function WorldMap({ data, className }) {
|
||||
const [tooltip, setTooltip] = useState();
|
||||
const [theme] = useTheme();
|
||||
const colors = useMemo(
|
||||
() => ({
|
||||
baseColor: THEME_COLORS[theme].primary,
|
||||
fillColor: THEME_COLORS[theme].gray100,
|
||||
strokeColor: THEME_COLORS[theme].primary,
|
||||
hoverColor: THEME_COLORS[theme].primary,
|
||||
}),
|
||||
[theme],
|
||||
);
|
||||
|
||||
function getFillColor(code) {
|
||||
if (code === 'AQ') return '#ffffff';
|
||||
if (code === 'AQ') return;
|
||||
const country = data?.find(({ x }) => x === code);
|
||||
return country ? tinycolor(baseColor).darken(country.z) : fillColor;
|
||||
|
||||
if (!country) {
|
||||
return colors.fillColor;
|
||||
}
|
||||
|
||||
return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
|
||||
40 * (1.0 - country.z / 100),
|
||||
);
|
||||
}
|
||||
|
||||
function getStrokeColor(code) {
|
||||
return code === 'AQ' ? '#ffffff' : strokeColor;
|
||||
}
|
||||
|
||||
function getHoverColor(code) {
|
||||
return code === 'AQ' ? '#ffffff' : hoverColor;
|
||||
function getOpacity(code) {
|
||||
return code === 'AQ' ? 0 : 1;
|
||||
}
|
||||
|
||||
function handleHover({ ISO_A2: code, NAME: name }) {
|
||||
if (code === 'AQ') return;
|
||||
const country = data?.find(({ x }) => x === code);
|
||||
setTooltip(`${name}: ${country?.y || 0} visitors`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.container, className)}>
|
||||
<ComposableMap data-tip="" projection="geoMercator">
|
||||
<div
|
||||
className={classNames(styles.container, className)}
|
||||
data-tip=""
|
||||
data-for="world-map-tooltip"
|
||||
>
|
||||
<ComposableMap projection="geoMercator">
|
||||
<ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
|
||||
<Geographies geography={geoUrl}>
|
||||
{({ geographies }) => {
|
||||
|
|
@ -50,10 +63,11 @@ export default function WorldMap({
|
|||
key={geo.rsmKey}
|
||||
geography={geo}
|
||||
fill={getFillColor(code)}
|
||||
stroke={getStrokeColor(code)}
|
||||
stroke={colors.strokeColor}
|
||||
opacity={getOpacity(code)}
|
||||
style={{
|
||||
default: { outline: 'none' },
|
||||
hover: { outline: 'none', fill: getHoverColor(code) },
|
||||
hover: { outline: 'none', fill: colors.hoverColor },
|
||||
pressed: { outline: 'none' },
|
||||
}}
|
||||
onMouseOver={() => handleHover(geo.properties)}
|
||||
|
|
@ -65,7 +79,7 @@ export default function WorldMap({
|
|||
</Geographies>
|
||||
</ZoomableGroup>
|
||||
</ComposableMap>
|
||||
<ReactTooltip>{tooltip}</ReactTooltip>
|
||||
<ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { isAfter, isBefore, isSameDay } from 'date-fns';
|
||||
import Calendar from 'components/common/Calendar';
|
||||
import Button from 'components/common/Button';
|
||||
import { FormButtons } from 'components/layout/FormLayout';
|
||||
import { getDateRangeValues } from 'lib/date';
|
||||
import styles from './DatePickerForm.module.css';
|
||||
import ButtonGroup from 'components/common/ButtonGroup';
|
||||
|
||||
const FILTER_DAY = 0;
|
||||
const FILTER_RANGE = 1;
|
||||
|
||||
export default function DatePickerForm({
|
||||
startDate: defaultStartDate,
|
||||
endDate: defaultEndDate,
|
||||
minDate,
|
||||
maxDate,
|
||||
onChange,
|
||||
onClose,
|
||||
}) {
|
||||
const [selected, setSelected] = useState(
|
||||
isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
|
||||
);
|
||||
const [date, setDate] = useState(defaultStartDate);
|
||||
const [startDate, setStartDate] = useState(defaultStartDate);
|
||||
const [endDate, setEndDate] = useState(defaultEndDate);
|
||||
|
||||
const disabled =
|
||||
selected === FILTER_DAY
|
||||
? isAfter(minDate, date) && isBefore(maxDate, date)
|
||||
: isAfter(startDate, endDate);
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
label: <FormattedMessage id="button.single-day" defaultMessage="Single day" />,
|
||||
value: FILTER_DAY,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="button.date-range" defaultMessage="Date range" />,
|
||||
value: FILTER_RANGE,
|
||||
},
|
||||
];
|
||||
|
||||
function handleSave() {
|
||||
if (selected === FILTER_DAY) {
|
||||
onChange({ ...getDateRangeValues(date, date), value: 'custom' });
|
||||
} else {
|
||||
onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.filter}>
|
||||
<ButtonGroup size="small" items={buttons} selectedItem={selected} onClick={setSelected} />
|
||||
</div>
|
||||
<div className={styles.calendars}>
|
||||
{selected === FILTER_DAY ? (
|
||||
<Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
|
||||
) : (
|
||||
<>
|
||||
<Calendar
|
||||
date={startDate}
|
||||
minDate={minDate}
|
||||
maxDate={endDate}
|
||||
onChange={setStartDate}
|
||||
/>
|
||||
<Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<FormButtons>
|
||||
<Button variant="action" onClick={handleSave} disabled={disabled}>
|
||||
<FormattedMessage id="button.save" defaultMessage="Save" />
|
||||
</Button>
|
||||
<Button onClick={onClose}>
|
||||
<FormattedMessage id="button.cancel" defaultMessage="Cancel" />
|
||||
</Button>
|
||||
</FormButtons>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.calendars {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendars > div {
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
.calendars > div + div {
|
||||
margin-left: 20px;
|
||||
padding-left: 20px;
|
||||
border-left: 1px solid var(--gray300);
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.calendars {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.calendars > div + div {
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
margin-top: 20px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,10 +10,12 @@ import FormLayout, {
|
|||
} from 'components/layout/FormLayout';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
const CONFIRMATION_WORD = 'DELETE';
|
||||
|
||||
const validate = ({ confirmation }) => {
|
||||
const errors = {};
|
||||
|
||||
if (confirmation !== 'DELETE') {
|
||||
if (confirmation !== CONFIRMATION_WORD) {
|
||||
errors.confirmation = !confirmation ? (
|
||||
<FormattedMessage id="label.required" defaultMessage="Required" />
|
||||
) : (
|
||||
|
|
@ -44,7 +46,7 @@ export default function DeleteForm({ values, onSave, onClose }) {
|
|||
validate={validate}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{() => (
|
||||
{props => (
|
||||
<Form>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
|
|
@ -63,7 +65,7 @@ export default function DeleteForm({ values, onSave, onClose }) {
|
|||
<FormattedMessage
|
||||
id="message.type-delete"
|
||||
defaultMessage="Type {delete} in the box below to confirm."
|
||||
values={{ delete: <b>DELETE</b> }}
|
||||
values={{ delete: <b>{CONFIRMATION_WORD}</b> }}
|
||||
/>
|
||||
</p>
|
||||
<FormRow>
|
||||
|
|
@ -71,7 +73,11 @@ export default function DeleteForm({ values, onSave, onClose }) {
|
|||
<FormError name="confirmation" />
|
||||
</FormRow>
|
||||
<FormButtons>
|
||||
<Button type="submit" variant="danger">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="danger"
|
||||
disabled={props.values.confirmation !== CONFIRMATION_WORD}
|
||||
>
|
||||
<FormattedMessage id="button.delete" defaultMessage="Delete" />
|
||||
</Button>
|
||||
<Button onClick={onClose}>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useRef } from 'react';
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
import Button from 'components/common/Button';
|
||||
import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
|
||||
import CopyButton from '../common/CopyButton';
|
||||
import CopyButton from 'components/common/CopyButton';
|
||||
|
||||
export default function TrackingCodeForm({ values, onClose }) {
|
||||
const ref = useRef();
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@ import React from 'react';
|
|||
import classNames from 'classnames';
|
||||
import styles from './ButtonLayout.module.css';
|
||||
|
||||
export default function ButtonLayout({ className, children }) {
|
||||
return <div className={classNames(styles.buttons, className)}>{children}</div>;
|
||||
export default function ButtonLayout({ className, children, align = 'center' }) {
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.buttons, className, {
|
||||
[styles.left]: align === 'left',
|
||||
[styles.center]: align === 'center',
|
||||
[styles.right]: align === 'right',
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,20 @@
|
|||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buttons button + button {
|
||||
.buttons button + * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import Button from 'components/common/Button';
|
||||
import Logo from 'assets/logo.svg';
|
||||
import Link from 'components/common/Link';
|
||||
import styles from './Footer.module.css';
|
||||
|
||||
export default function Footer() {
|
||||
const version = process.env.VERSION;
|
||||
return (
|
||||
<footer className="container">
|
||||
<div className={classNames(styles.footer, 'row justify-content-center')}>
|
||||
<FormattedMessage id="footer.powered-by" defaultMessage="Powered by" />
|
||||
<a href="https://umami.is">
|
||||
<Button className={styles.button} icon={<Logo />} size="small">
|
||||
<b>umami</b>
|
||||
</Button>
|
||||
</a>
|
||||
<div className={styles.footer}>
|
||||
<div />
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="message.powered-by"
|
||||
defaultMessage="Powered by {name}"
|
||||
values={{
|
||||
name: (
|
||||
<Link href="https://umami.is">
|
||||
<b>umami</b>
|
||||
</Link>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>{`v${version}`}</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,3 @@
|
|||
font-size: var(--font-size-small);
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
|
||||
.msg {
|
||||
color: var(--gray50);
|
||||
color: var(--msgColor);
|
||||
background: var(--red400);
|
||||
font-size: var(--font-size-small);
|
||||
padding: 4px 8px;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@ import { FormattedMessage } from 'react-intl';
|
|||
import { useSelector } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import Link from 'components/common/Link';
|
||||
import UserButton from '../common/UserButton';
|
||||
import Icon from '../common/Icon';
|
||||
import Icon from 'components/common/Icon';
|
||||
import LanguageButton from 'components/settings/LanguageButton';
|
||||
import ThemeButton from 'components/settings/ThemeButton';
|
||||
import UserButton from 'components/settings/UserButton';
|
||||
import Logo from 'assets/logo.svg';
|
||||
import styles from './Header.module.css';
|
||||
import LanguageButton from '../common/LanguageButton';
|
||||
|
||||
export default function Header() {
|
||||
const user = useSelector(state => state.user);
|
||||
|
|
@ -15,28 +16,29 @@ export default function Header() {
|
|||
return (
|
||||
<header className="container">
|
||||
<div className={classNames(styles.header, 'row align-items-center')}>
|
||||
<div className="col-12 col-md-3">
|
||||
<div className="col-12 col-md-12 col-lg-3">
|
||||
<div className={styles.title}>
|
||||
<Icon icon={<Logo />} size="large" className={styles.logo} />
|
||||
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-9">
|
||||
<div className={styles.nav}>
|
||||
{user ? (
|
||||
<>
|
||||
<Link href="/dashboard">
|
||||
<FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
|
||||
</Link>
|
||||
<Link href="/settings">
|
||||
<FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
|
||||
</Link>
|
||||
<LanguageButton menuAlign="right" />
|
||||
<UserButton />
|
||||
</>
|
||||
) : (
|
||||
<LanguageButton menuAlign="right" />
|
||||
)}
|
||||
<div className="col-12 col-md-12 col-lg-6">
|
||||
{user && (
|
||||
<div className={styles.nav}>
|
||||
<Link href="/dashboard">
|
||||
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
|
||||
</Link>
|
||||
<Link href="/settings">
|
||||
<FormattedMessage id="label.settings" defaultMessage="Settings" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-12 col-lg-3">
|
||||
<div className={styles.buttons}>
|
||||
<ThemeButton />
|
||||
<LanguageButton menuAlign="right" />
|
||||
{user && <UserButton />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,18 +13,33 @@
|
|||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-normal);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav > * {
|
||||
.nav a + a {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-size: var(--font-size-large);
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,15 +13,11 @@ export default function Layout({ title, children, header = true, footer = true }
|
|||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
{header && <Header />}
|
||||
<main className="container">{children}</main>
|
||||
<div id="__modals" />
|
||||
{footer && <Footer />}
|
||||
<div id="__modals" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,29 +1,37 @@
|
|||
import React from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import classNames from 'classnames';
|
||||
import Menu from 'components/common/Menu';
|
||||
import NavMenu from 'components/common/NavMenu';
|
||||
import styles from './MenuLayout.module.css';
|
||||
|
||||
export default function MenuLayout({
|
||||
menu,
|
||||
selectedOption,
|
||||
onMenuSelect,
|
||||
className,
|
||||
menuClassName,
|
||||
contentClassName,
|
||||
optionClassName,
|
||||
children,
|
||||
replace = false,
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
function handleSelect(url) {
|
||||
if (replace) {
|
||||
router.replace(url);
|
||||
} else {
|
||||
router.push(url);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.container, className, 'row')}>
|
||||
<Menu
|
||||
<NavMenu
|
||||
options={menu}
|
||||
selectedOption={selectedOption}
|
||||
className={classNames(styles.menu, menuClassName, 'col-12 col-lg-3')}
|
||||
selectedClassName={styles.selected}
|
||||
optionClassName={classNames(styles.option, optionClassName)}
|
||||
onSelect={onMenuSelect}
|
||||
className={classNames(styles.menu, menuClassName, 'col-12 col-lg-2')}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
<div className={classNames(styles.content, contentClassName, 'col-12 col-lg-9')}>
|
||||
<div className={classNames(styles.content, contentClassName, 'col-12 col-lg-10')}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,25 +10,11 @@
|
|||
}
|
||||
|
||||
.container .content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-left: 1px solid var(--gray300);
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.option {
|
||||
font-size: var(--font-size-normal);
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
margin-right: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: var(--gray75);
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: 600;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
|
|
@ -40,5 +26,6 @@
|
|||
border-top: 1px solid var(--gray300);
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30px;
|
||||
background: var(--gray50);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import styles from './PageHeader.module.css';
|
||||
|
||||
export default function PageHeader({ children }) {
|
||||
return <div className={styles.header}>{children}</div>;
|
||||
export default function PageHeader({ children, className }) {
|
||||
return <div className={classNames(styles.header, className)}>{children}</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage } from 'react-intl';
|
||||
|
||||
export const labels = defineMessages({
|
||||
unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
|
||||
});
|
||||
|
||||
export const devices = defineMessages({
|
||||
desktop: { id: 'metrics.device.desktop', defaultMessage: 'Desktop' },
|
||||
laptop: { id: 'metrics.device.laptop', defaultMessage: 'Laptop' },
|
||||
tablet: { id: 'metrics.device.tablet', defaultMessage: 'Tablet' },
|
||||
mobile: { id: 'metrics.device.mobile', defaultMessage: 'Mobile' },
|
||||
});
|
||||
|
||||
export function getDeviceMessage(device) {
|
||||
return <FormattedMessage {...(devices[device] || labels.unknown)} />;
|
||||
}
|
||||
|
|
@ -4,8 +4,8 @@ import useFetch from 'hooks/useFetch';
|
|||
import styles from './ActiveUsers.module.css';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export default function ActiveUsers({ websiteId, className }) {
|
||||
const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 });
|
||||
export default function ActiveUsers({ websiteId, token, className }) {
|
||||
const { data } = useFetch(`/api/website/${websiteId}/active`, { token }, { interval: 60000 });
|
||||
const count = useMemo(() => {
|
||||
return data?.[0]?.x || 0;
|
||||
}, [data]);
|
||||
|
|
@ -20,7 +20,7 @@ export default function ActiveUsers({ websiteId, className }) {
|
|||
<div className={styles.text}>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="active-users.message"
|
||||
id="message.active-users"
|
||||
defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
|
||||
values={{ x: count }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
|
|||
import { dateFormat } from 'lib/lang';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import styles from './BarChart.module.css';
|
||||
import useTheme from 'hooks/useTheme';
|
||||
import { THEME_COLORS } from 'lib/constants';
|
||||
|
||||
export default function BarChart({
|
||||
chartId,
|
||||
|
|
@ -16,15 +18,23 @@ export default function BarChart({
|
|||
animationDuration = 300,
|
||||
className,
|
||||
stacked = false,
|
||||
loading = false,
|
||||
onCreate = () => {},
|
||||
onUpdate = () => {},
|
||||
}) {
|
||||
const canvas = useRef();
|
||||
const chart = useRef();
|
||||
const [tooltip, setTooltip] = useState({});
|
||||
const [tooltip, setTooltip] = useState(null);
|
||||
const [locale] = useLocale();
|
||||
const [theme] = useTheme();
|
||||
const colors = {
|
||||
text: THEME_COLORS[theme].gray700,
|
||||
line: THEME_COLORS[theme].gray200,
|
||||
zeroLine: THEME_COLORS[theme].gray500,
|
||||
};
|
||||
|
||||
function renderXLabel(label, index, values) {
|
||||
if (loading) return '';
|
||||
const d = new Date(values[index].value);
|
||||
const w = canvas.current.width;
|
||||
|
||||
|
|
@ -44,9 +54,9 @@ export default function BarChart({
|
|||
return dateFormat(d, 'EEE M/d', locale);
|
||||
case 'month':
|
||||
if (w <= 660) {
|
||||
return dateFormat(d, 'MMM', locale);
|
||||
return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
|
||||
}
|
||||
return dateFormat(d, 'MMMM', locale);
|
||||
return dateFormat(d, 'MMM', locale);
|
||||
default:
|
||||
return label;
|
||||
}
|
||||
|
|
@ -59,23 +69,27 @@ export default function BarChart({
|
|||
function renderTooltip(model) {
|
||||
const { opacity, title, body, labelColors } = model;
|
||||
|
||||
if (!opacity) {
|
||||
if (!opacity || !title) {
|
||||
setTooltip(null);
|
||||
} else {
|
||||
const [label, value] = body[0].lines[0].split(':');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(
|
||||
+title[0],
|
||||
new Date(+title[0]),
|
||||
dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
|
||||
);
|
||||
const [label, value] = body[0].lines[0].split(':');
|
||||
|
||||
setTooltip({
|
||||
title: dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
|
||||
value,
|
||||
label,
|
||||
labelColor: labelColors[0].backgroundColor,
|
||||
});
|
||||
setTooltip({
|
||||
title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
|
||||
value,
|
||||
label,
|
||||
labelColor: labelColors[0].backgroundColor,
|
||||
});
|
||||
}
|
||||
|
||||
function getTooltipFormat(unit) {
|
||||
switch (unit) {
|
||||
case 'hour':
|
||||
return 'EEE ha — MMM d yyyy';
|
||||
default:
|
||||
return 'EEE MMMM d yyyy';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +108,11 @@ export default function BarChart({
|
|||
responsive: true,
|
||||
responsiveAnimationDuration: 0,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: colors.text,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
|
|
@ -107,6 +126,7 @@ export default function BarChart({
|
|||
callback: renderXLabel,
|
||||
minRotation: 0,
|
||||
maxRotation: 0,
|
||||
fontColor: colors.text,
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
|
|
@ -120,6 +140,11 @@ export default function BarChart({
|
|||
ticks: {
|
||||
callback: renderYLabel,
|
||||
beginAtZero: true,
|
||||
fontColor: colors.text,
|
||||
},
|
||||
gridLines: {
|
||||
color: colors.line,
|
||||
zeroLineColor: colors.zeroLine,
|
||||
},
|
||||
stacked,
|
||||
},
|
||||
|
|
@ -141,8 +166,13 @@ export default function BarChart({
|
|||
function updateChart() {
|
||||
const { options } = chart.current;
|
||||
|
||||
options.legend.labels.fontColor = colors.text;
|
||||
options.scales.xAxes[0].time.unit = unit;
|
||||
options.scales.xAxes[0].ticks.callback = renderXLabel;
|
||||
options.scales.xAxes[0].ticks.fontColor = colors.text;
|
||||
options.scales.yAxes[0].ticks.fontColor = colors.text;
|
||||
options.scales.yAxes[0].gridLines.color = colors.line;
|
||||
options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
|
||||
options.animation.duration = animationDuration;
|
||||
options.tooltips.custom = renderTooltip;
|
||||
|
||||
|
|
@ -158,7 +188,7 @@ export default function BarChart({
|
|||
updateChart();
|
||||
}
|
||||
}
|
||||
}, [datasets, unit, animationDuration, locale]);
|
||||
}, [datasets, unit, animationDuration, locale, theme]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
}
|
||||
|
||||
.tooltip {
|
||||
color: var(--msgColor);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -12,7 +13,6 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--gray50);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
|
|||
import MetricsTable from './MetricsTable';
|
||||
import { browserFilter } from 'lib/filters';
|
||||
|
||||
export default function BrowsersTable({ websiteId, limit, onExpand }) {
|
||||
export default function BrowsersTable({ websiteId, token, limit, onExpand }) {
|
||||
return (
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
|
||||
type="browser"
|
||||
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
limit={limit}
|
||||
dataFilter={browserFilter}
|
||||
onExpand={onExpand}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,20 @@ import MetricsTable from './MetricsTable';
|
|||
import { countryFilter, percentFilter } from 'lib/filters';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) {
|
||||
export default function CountriesTable({
|
||||
websiteId,
|
||||
token,
|
||||
limit,
|
||||
onDataLoad = () => {},
|
||||
onExpand,
|
||||
}) {
|
||||
return (
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
|
||||
type="country"
|
||||
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
limit={limit}
|
||||
dataFilter={countryFilter}
|
||||
onDataLoad={data => onDataLoad(percentFilter(data))}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,19 @@ import React from 'react';
|
|||
import MetricsTable from './MetricsTable';
|
||||
import { deviceFilter } from 'lib/filters';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { getDeviceMessage } from 'components/messages';
|
||||
|
||||
export default function DevicesTable({ websiteId, limit, onExpand }) {
|
||||
export default function DevicesTable({ websiteId, token, limit, onExpand }) {
|
||||
return (
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
|
||||
type="device"
|
||||
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
limit={limit}
|
||||
dataFilter={deviceFilter}
|
||||
renderLabel={({ x }) => getDeviceMessage(x)}
|
||||
onExpand={onExpand}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,31 +1,25 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import BarChart from './BarChart';
|
||||
import { getTimezone, getDateArray, getDateLength } from 'lib/date';
|
||||
import { getDateArray, getDateLength } from 'lib/date';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import { useDateRange } from 'hooks/useDateRange';
|
||||
import useDateRange from 'hooks/useDateRange';
|
||||
import useTimezone from 'hooks/useTimezone';
|
||||
import { EVENT_COLORS } from 'lib/constants';
|
||||
|
||||
const COLORS = [
|
||||
'#2680eb',
|
||||
'#9256d9',
|
||||
'#44b556',
|
||||
'#e68619',
|
||||
'#e34850',
|
||||
'#1b959a',
|
||||
'#d83790',
|
||||
'#85d044',
|
||||
];
|
||||
|
||||
export default function EventsChart({ websiteId }) {
|
||||
const dateRange = useDateRange(websiteId);
|
||||
export default function EventsChart({ websiteId, token }) {
|
||||
const [dateRange] = useDateRange(websiteId);
|
||||
const { startDate, endDate, unit, modified } = dateRange;
|
||||
const [timezone] = useTimezone();
|
||||
|
||||
const { data } = useFetch(
|
||||
`/api/website/${websiteId}/events`,
|
||||
{
|
||||
start_at: +startDate,
|
||||
end_at: +endDate,
|
||||
unit,
|
||||
tz: getTimezone(),
|
||||
tz: timezone,
|
||||
token,
|
||||
},
|
||||
{ update: [modified] },
|
||||
);
|
||||
|
|
@ -47,13 +41,13 @@ export default function EventsChart({ websiteId }) {
|
|||
});
|
||||
|
||||
return Object.keys(map).map((key, index) => {
|
||||
const color = tinycolor(COLORS[index]);
|
||||
const color = tinycolor(EVENT_COLORS[index]);
|
||||
return {
|
||||
label: key,
|
||||
data: map[key],
|
||||
lineTension: 0,
|
||||
backgroundColor: color.setAlpha(0.4).toRgbString(),
|
||||
borderColor: color.setAlpha(0.5).toRgbString(),
|
||||
backgroundColor: color.setAlpha(0.6).toRgbString(),
|
||||
borderColor: color.setAlpha(0.7).toRgbString(),
|
||||
borderWidth: 1,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
|
|||
import MetricsTable from './MetricsTable';
|
||||
import styles from './EventsTable.module.css';
|
||||
|
||||
export default function EventsTable({ websiteId, limit, onExpand, onDataLoad }) {
|
||||
export default function EventsTable({ websiteId, token, limit, onExpand, onDataLoad }) {
|
||||
return (
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
|
||||
type="event"
|
||||
metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
limit={limit}
|
||||
renderLabel={({ x }) => <Label value={x} />}
|
||||
onExpand={onExpand}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 120px;
|
||||
margin-right: 20px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
|
@ -16,4 +15,5 @@
|
|||
|
||||
.label {
|
||||
font-size: var(--font-size-normal);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,20 @@ import { FormattedMessage } from 'react-intl';
|
|||
import classNames from 'classnames';
|
||||
import Loading from 'components/common/Loading';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import { useDateRange } from 'hooks/useDateRange';
|
||||
import useDateRange from 'hooks/useDateRange';
|
||||
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
|
||||
import MetricCard from './MetricCard';
|
||||
import styles from './MetricsBar.module.css';
|
||||
|
||||
export default function MetricsBar({ websiteId, className }) {
|
||||
const dateRange = useDateRange(websiteId);
|
||||
export default function MetricsBar({ websiteId, token, className }) {
|
||||
const [dateRange] = useDateRange(websiteId);
|
||||
const { startDate, endDate, modified } = dateRange;
|
||||
const { data } = useFetch(
|
||||
`/api/website/${websiteId}/metrics`,
|
||||
{
|
||||
start_at: +startDate,
|
||||
end_at: +endDate,
|
||||
token,
|
||||
},
|
||||
{
|
||||
update: [modified],
|
||||
|
|
|
|||
|
|
@ -3,8 +3,15 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bar > div + div {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.bar > div:last-child {
|
||||
.bar {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bar > div:nth-child(n + 3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@ import useFetch from 'hooks/useFetch';
|
|||
import Arrow from 'assets/arrow-right.svg';
|
||||
import { percentFilter } from 'lib/filters';
|
||||
import { formatNumber, formatLongNumber } from 'lib/format';
|
||||
import { useDateRange } from 'hooks/useDateRange';
|
||||
import useDateRange from 'hooks/useDateRange';
|
||||
import styles from './MetricsTable.module.css';
|
||||
|
||||
export default function MetricsTable({
|
||||
websiteId,
|
||||
websiteDomain,
|
||||
token,
|
||||
title,
|
||||
metric,
|
||||
type,
|
||||
|
|
@ -23,12 +24,11 @@ export default function MetricsTable({
|
|||
dataFilter,
|
||||
filterOptions,
|
||||
limit,
|
||||
headerComponent,
|
||||
renderLabel,
|
||||
onDataLoad = () => {},
|
||||
onExpand = () => {},
|
||||
}) {
|
||||
const dateRange = useDateRange(websiteId);
|
||||
const [dateRange] = useDateRange(websiteId);
|
||||
const { startDate, endDate, modified } = dateRange;
|
||||
const { data } = useFetch(
|
||||
`/api/website/${websiteId}/rankings`,
|
||||
|
|
@ -37,6 +37,7 @@ export default function MetricsTable({
|
|||
start_at: +startDate,
|
||||
end_at: +endDate,
|
||||
domain: websiteDomain,
|
||||
token,
|
||||
},
|
||||
{ onDataLoad, delay: 300, update: [modified] },
|
||||
);
|
||||
|
|
@ -83,7 +84,6 @@ export default function MetricsTable({
|
|||
<>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
{headerComponent}
|
||||
<div className={styles.metric} onClick={handleSetFormat}>
|
||||
{metric}
|
||||
</div>
|
||||
|
|
@ -99,7 +99,7 @@ export default function MetricsTable({
|
|||
)}
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
{limit && data.length > limit && (
|
||||
{limit && (
|
||||
<Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
|
||||
<div>
|
||||
<FormattedMessage id="button.more" defaultMessage="More" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
position: relative;
|
||||
min-height: 460px;
|
||||
font-size: var(--font-size-small);
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -74,7 +73,7 @@
|
|||
position: relative;
|
||||
width: 50px;
|
||||
color: #6e6e6e;
|
||||
border-left: 1px solid var(--gray600);
|
||||
border-left: 1px solid var(--gray500);
|
||||
padding-left: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@ import MetricsTable from './MetricsTable';
|
|||
import { osFilter } from 'lib/filters';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export default function OSTable({ websiteId, limit, onExpand }) {
|
||||
export default function OSTable({ websiteId, token, limit, onExpand }) {
|
||||
return (
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.operating-system" defaultMessage="Operating system" />}
|
||||
title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
|
||||
type="os"
|
||||
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
limit={limit}
|
||||
dataFilter={osFilter}
|
||||
onExpand={onExpand}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@ import ButtonGroup from 'components/common/ButtonGroup';
|
|||
import { urlFilter } from 'lib/filters';
|
||||
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
|
||||
import MetricsTable from './MetricsTable';
|
||||
import ButtonLayout from '../layout/ButtonLayout';
|
||||
|
||||
export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }) {
|
||||
export default function PagesTable({ websiteId, token, websiteDomain, limit, onExpand }) {
|
||||
const [filter, setFilter] = useState(FILTER_COMBINED);
|
||||
|
||||
const buttons = [
|
||||
|
|
@ -17,23 +18,28 @@ export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }
|
|||
];
|
||||
|
||||
return (
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
|
||||
type="url"
|
||||
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
|
||||
headerComponent={
|
||||
limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
|
||||
}
|
||||
websiteId={websiteId}
|
||||
limit={limit}
|
||||
dataFilter={urlFilter}
|
||||
filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
|
||||
renderLabel={({ x }) => decodeURI(x)}
|
||||
onExpand={onExpand}
|
||||
/>
|
||||
<>
|
||||
{!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
|
||||
type="url"
|
||||
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
limit={limit}
|
||||
dataFilter={urlFilter}
|
||||
filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
|
||||
renderLabel={({ x }) => decodeURI(x)}
|
||||
onExpand={onExpand}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const FilterButtons = ({ buttons, selected, onClick }) => {
|
||||
return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
|
||||
return (
|
||||
<ButtonLayout>
|
||||
<ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
|
||||
</ButtonLayout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,25 @@
|
|||
import React from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import CheckVisible from 'components/helpers/CheckVisible';
|
||||
import BarChart from './BarChart';
|
||||
import useTheme from 'hooks/useTheme';
|
||||
import { THEME_COLORS } from 'lib/constants';
|
||||
|
||||
export default function PageviewsChart({ websiteId, data, unit, records, className }) {
|
||||
export default function PageviewsChart({ websiteId, data, unit, records, className, loading }) {
|
||||
const intl = useIntl();
|
||||
const [theme] = useTheme();
|
||||
const primaryColor = tinycolor(THEME_COLORS[theme].primary);
|
||||
const colors = {
|
||||
views: {
|
||||
background: primaryColor.setAlpha(0.4).toRgbString(),
|
||||
border: primaryColor.setAlpha(0.5).toRgbString(),
|
||||
},
|
||||
visitors: {
|
||||
background: primaryColor.setAlpha(0.6).toRgbString(),
|
||||
border: primaryColor.setAlpha(0.7).toRgbString(),
|
||||
},
|
||||
};
|
||||
|
||||
const handleUpdate = chart => {
|
||||
const {
|
||||
|
|
@ -43,8 +58,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
|
|||
}),
|
||||
data: data.uniques,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.4)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.4)',
|
||||
backgroundColor: colors.visitors.background,
|
||||
borderColor: colors.visitors.border,
|
||||
borderWidth: 1,
|
||||
},
|
||||
{
|
||||
|
|
@ -54,8 +69,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
|
|||
}),
|
||||
data: data.pageviews,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.2)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.2)',
|
||||
backgroundColor: colors.views.background,
|
||||
borderColor: colors.views.border,
|
||||
borderWidth: 1,
|
||||
},
|
||||
]}
|
||||
|
|
@ -63,6 +78,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
|
|||
records={records}
|
||||
animationDuration={visible ? 300 : 0}
|
||||
onUpdate={handleUpdate}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
</CheckVisible>
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
import React from 'react';
|
||||
import ButtonGroup from 'components/common/ButtonGroup';
|
||||
import { getDateRange } from 'lib/date';
|
||||
import styles from './QuickButtons.module.css';
|
||||
|
||||
const options = [
|
||||
{ label: '24h', value: '24hour' },
|
||||
{ label: '7d', value: '7day' },
|
||||
{ label: '30d', value: '30day' },
|
||||
];
|
||||
|
||||
export default function QuickButtons({ value, onChange }) {
|
||||
const selectedItem = options.find(item => item.value === value)?.value;
|
||||
|
||||
function handleClick(selected) {
|
||||
if (selected !== value) {
|
||||
onChange(getDateRange(selected));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ButtonGroup
|
||||
size="xsmall"
|
||||
className={styles.buttons}
|
||||
items={options}
|
||||
selectedItem={selectedItem}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
.buttons {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.buttons button + button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.buttons .button {
|
||||
font-size: var(--font-size-xsmall);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.buttons button:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,15 @@ import MetricsTable from './MetricsTable';
|
|||
import { refFilter } from 'lib/filters';
|
||||
import ButtonGroup from 'components/common/ButtonGroup';
|
||||
import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
|
||||
import ButtonLayout from '../layout/ButtonLayout';
|
||||
|
||||
export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpand = () => {} }) {
|
||||
export default function ReferrersTable({
|
||||
websiteId,
|
||||
websiteDomain,
|
||||
token,
|
||||
limit,
|
||||
onExpand = () => {},
|
||||
}) {
|
||||
const [filter, setFilter] = useState(FILTER_COMBINED);
|
||||
|
||||
const buttons = [
|
||||
|
|
@ -20,9 +27,9 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
|
|||
{ label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
|
||||
];
|
||||
|
||||
const renderLink = ({ x: url }) => {
|
||||
return url.startsWith('http') ? (
|
||||
<a href={url} target="_blank" rel="noreferrer">
|
||||
const renderLink = ({ w: href, x: url }) => {
|
||||
return (href || url).startsWith('http') ? (
|
||||
<a href={href || url} target="_blank" rel="noreferrer">
|
||||
{decodeURI(url)}
|
||||
</a>
|
||||
) : (
|
||||
|
|
@ -31,28 +38,33 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
|
|||
};
|
||||
|
||||
return (
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
|
||||
type="referrer"
|
||||
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
|
||||
headerComponent={
|
||||
limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
|
||||
}
|
||||
websiteId={websiteId}
|
||||
websiteDomain={websiteDomain}
|
||||
limit={limit}
|
||||
dataFilter={refFilter}
|
||||
filterOptions={{
|
||||
domain: websiteDomain,
|
||||
domainOnly: filter === FILTER_DOMAIN_ONLY,
|
||||
raw: filter === FILTER_RAW,
|
||||
}}
|
||||
onExpand={onExpand}
|
||||
renderLabel={renderLink}
|
||||
/>
|
||||
<>
|
||||
{!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
|
||||
<MetricsTable
|
||||
title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
|
||||
type="referrer"
|
||||
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
|
||||
websiteId={websiteId}
|
||||
websiteDomain={websiteDomain}
|
||||
token={token}
|
||||
limit={limit}
|
||||
dataFilter={refFilter}
|
||||
filterOptions={{
|
||||
domain: websiteDomain,
|
||||
domainOnly: filter === FILTER_DOMAIN_ONLY,
|
||||
raw: filter === FILTER_RAW,
|
||||
}}
|
||||
onExpand={onExpand}
|
||||
renderLabel={renderLink}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const FilterButtons = ({ buttons, selected, onClick }) => {
|
||||
return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
|
||||
return (
|
||||
<ButtonLayout>
|
||||
<ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
|
||||
</ButtonLayout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import PageviewsChart from './PageviewsChart';
|
||||
import MetricsBar from './MetricsBar';
|
||||
import QuickButtons from './QuickButtons';
|
||||
import WebsiteHeader from './WebsiteHeader';
|
||||
import DateFilter from 'components/common/DateFilter';
|
||||
import StickyHeader from 'components/helpers/StickyHeader';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import { getDateArray, getDateLength, getTimezone } from 'lib/date';
|
||||
import { setDateRange } from 'redux/actions/websites';
|
||||
import useDateRange from 'hooks/useDateRange';
|
||||
import useTimezone from 'hooks/useTimezone';
|
||||
import { getDateArray, getDateLength } from 'lib/date';
|
||||
import styles from './WebsiteChart.module.css';
|
||||
import WebsiteHeader from './WebsiteHeader';
|
||||
import { useDateRange } from '../../hooks/useDateRange';
|
||||
|
||||
export default function WebsiteChart({
|
||||
websiteId,
|
||||
token,
|
||||
title,
|
||||
stickyHeader = false,
|
||||
showLink = false,
|
||||
onDataLoad = () => {},
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
const dateRange = useDateRange(websiteId);
|
||||
const [dateRange, setDateRange] = useDateRange(websiteId);
|
||||
const { startDate, endDate, unit, value, modified } = dateRange;
|
||||
const [timezone] = useTimezone();
|
||||
|
||||
const { data } = useFetch(
|
||||
const { data, loading } = useFetch(
|
||||
`/api/website/${websiteId}/pageviews`,
|
||||
{
|
||||
start_at: +startDate,
|
||||
end_at: +endDate,
|
||||
unit,
|
||||
tz: getTimezone(),
|
||||
tz: timezone,
|
||||
token,
|
||||
},
|
||||
{ onDataLoad, update: [modified] },
|
||||
);
|
||||
|
|
@ -45,25 +45,26 @@ export default function WebsiteChart({
|
|||
return [[], []];
|
||||
}, [data]);
|
||||
|
||||
function handleDateChange(values) {
|
||||
dispatch(setDateRange(websiteId, values));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
|
||||
<WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
|
||||
<div className={classNames(styles.header, 'row')}>
|
||||
<StickyHeader
|
||||
className={classNames(styles.metrics, 'col row')}
|
||||
stickyClassName={styles.sticky}
|
||||
enabled={stickyHeader}
|
||||
>
|
||||
<MetricsBar className="col-12 col-md-9 col-lg-10" websiteId={websiteId} />
|
||||
<DateFilter
|
||||
className="col-12 col-md-3 col-lg-2"
|
||||
value={value}
|
||||
onChange={handleDateChange}
|
||||
/>
|
||||
<div className="col-12 col-lg-9">
|
||||
<MetricsBar websiteId={websiteId} token={token} />
|
||||
</div>
|
||||
<div className={classNames(styles.filter, 'col-12 col-lg-3')}>
|
||||
<DateFilter
|
||||
value={value}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onChange={setDateRange}
|
||||
/>
|
||||
</div>
|
||||
</StickyHeader>
|
||||
</div>
|
||||
<div className="row">
|
||||
|
|
@ -73,8 +74,8 @@ export default function WebsiteChart({
|
|||
data={{ pageviews, uniques }}
|
||||
unit={unit}
|
||||
records={getDateLength(startDate, endDate, unit)}
|
||||
loading={loading}
|
||||
/>
|
||||
<QuickButtons value={value} onChange={handleDateChange} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -29,3 +29,15 @@
|
|||
border-bottom: 1px solid var(--gray300);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.filter {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,30 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useRouter } from 'next/router';
|
||||
import Link from 'components/common/Link';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Button from 'components/common/Button';
|
||||
import RefreshButton from 'components/common/RefreshButton';
|
||||
import ButtonLayout from 'components/layout/ButtonLayout';
|
||||
import Icon from 'components/common/Icon';
|
||||
import ActiveUsers from './ActiveUsers';
|
||||
import Arrow from 'assets/arrow-right.svg';
|
||||
import styles from './WebsiteHeader.module.css';
|
||||
import RefreshButton from '../common/RefreshButton';
|
||||
import ButtonLayout from '../layout/ButtonLayout';
|
||||
|
||||
export default function WebsiteHeader({ websiteId, title, showLink = false }) {
|
||||
const router = useRouter();
|
||||
|
||||
export default function WebsiteHeader({ websiteId, token, title, showLink = false }) {
|
||||
return (
|
||||
<PageHeader>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<ActiveUsers className={styles.active} websiteId={websiteId} />
|
||||
<ButtonLayout>
|
||||
<ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
|
||||
<ButtonLayout align="right">
|
||||
<RefreshButton websiteId={websiteId} />
|
||||
{showLink && (
|
||||
<Button
|
||||
icon={<Arrow />}
|
||||
onClick={() =>
|
||||
router.push('/website/[...id]', `/website/${websiteId}/${title}`, {
|
||||
shallow: true,
|
||||
})
|
||||
}
|
||||
size="small"
|
||||
<Link
|
||||
href="/website/[...id]"
|
||||
as={`/website/${websiteId}/${title}`}
|
||||
className={styles.link}
|
||||
>
|
||||
<div>
|
||||
<FormattedMessage id="button.view-details" defaultMessage="View details" />
|
||||
</div>
|
||||
</Button>
|
||||
<FormattedMessage id="button.view-details" defaultMessage="View details" />
|
||||
<Icon icon={<Arrow />} size="small" />
|
||||
</Link>
|
||||
)}
|
||||
</ButtonLayout>
|
||||
</PageHeader>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@
|
|||
line-height: var(--font-size-large);
|
||||
}
|
||||
|
||||
.button {
|
||||
.link {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.link svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import Link from 'next/link';
|
||||
import classNames from 'classnames';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Button from 'components/common/Button';
|
||||
import Icon from 'components/common/Icon';
|
||||
import Table from 'components/common/Table';
|
||||
import Modal from 'components/common/Modal';
|
||||
import Toast from 'components/common/Toast';
|
||||
import AccountEditForm from 'components/forms/AccountEditForm';
|
||||
import ButtonLayout from 'components/layout/ButtonLayout';
|
||||
import DeleteForm from 'components/forms/DeleteForm';
|
||||
|
|
@ -13,9 +16,8 @@ import Pen from 'assets/pen.svg';
|
|||
import Plus from 'assets/plus.svg';
|
||||
import Trash from 'assets/trash.svg';
|
||||
import Check from 'assets/check.svg';
|
||||
import LinkIcon from 'assets/external-link.svg';
|
||||
import styles from './AccountSettings.module.css';
|
||||
import Toast from '../common/Toast';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export default function AccountSettings() {
|
||||
const [addAccount, setAddAccount] = useState();
|
||||
|
|
@ -27,9 +29,18 @@ export default function AccountSettings() {
|
|||
|
||||
const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
|
||||
|
||||
const DashboardLink = row =>
|
||||
row.is_admin ? null : (
|
||||
<Link href={`/dashboard/${row.user_id}/${row.username}`}>
|
||||
<a>
|
||||
<Icon icon={<LinkIcon />} />
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const Buttons = row =>
|
||||
row.username !== 'admin' ? (
|
||||
<ButtonLayout>
|
||||
<ButtonLayout align="right">
|
||||
<Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
|
||||
<div>
|
||||
<FormattedMessage id="button.edit" defaultMessage="Edit" />
|
||||
|
|
@ -47,16 +58,23 @@ export default function AccountSettings() {
|
|||
{
|
||||
key: 'username',
|
||||
label: <FormattedMessage id="label.username" defaultMessage="Username" />,
|
||||
className: 'col-6 col-md-4',
|
||||
className: 'col-4 col-md-3',
|
||||
},
|
||||
{
|
||||
key: 'is_admin',
|
||||
label: <FormattedMessage id="label.adminsitrator" defaultMessage="Administrator" />,
|
||||
className: 'col-6 col-md-4',
|
||||
label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
|
||||
className: 'col-4 col-md-3',
|
||||
render: Checkmark,
|
||||
},
|
||||
{
|
||||
className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'),
|
||||
key: 'dashboard',
|
||||
label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
|
||||
className: 'col-4 col-md-3',
|
||||
render: DashboardLink,
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
className: classNames(styles.buttons, 'col-12 col-md-3 pt-2 pt-md-0'),
|
||||
render: Buttons,
|
||||
},
|
||||
];
|
||||
|
|
@ -81,7 +99,7 @@ export default function AccountSettings() {
|
|||
<>
|
||||
<PageHeader>
|
||||
<div>
|
||||
<FormattedMessage id="settings.accounts" defaultMessage="Accounts" />
|
||||
<FormattedMessage id="label.accounts" defaultMessage="Accounts" />
|
||||
</div>
|
||||
<Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import DateFilter from 'components/common/DateFilter';
|
||||
import Button from 'components/common/Button';
|
||||
import useDateRange from 'hooks/useDateRange';
|
||||
import { DEFAULT_DATE_RANGE } from 'lib/constants';
|
||||
import { getDateRange } from 'lib/date';
|
||||
import styles from './DateRangeSetting.module.css';
|
||||
|
||||
export default function DateRangeSetting() {
|
||||
const [dateRange, setDateRange] = useDateRange();
|
||||
const { startDate, endDate, value } = dateRange;
|
||||
|
||||
function handleReset() {
|
||||
setDateRange(getDateRange(DEFAULT_DATE_RANGE));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
|
||||
<Button className={styles.button} size="small" onClick={handleReset}>
|
||||
<FormattedMessage id="button.reset" defaultMessage="Reset" />
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
import { menuOptions } from 'lib/lang';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import MenuButton from 'components/common/MenuButton';
|
||||
import Globe from 'assets/globe.svg';
|
||||
|
||||
export default function LanguageButton() {
|
||||
const [locale, setLocale] = useLocale();
|
||||
|
||||
function handleSelect(value) {
|
||||
setLocale(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
{locale === 'zh-CN' && (
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
)}
|
||||
{locale === 'ja-JP' && (
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
)}
|
||||
</Head>
|
||||
<MenuButton
|
||||
icon={<Globe />}
|
||||
options={menuOptions}
|
||||
value={locale}
|
||||
renderValue={option => option?.display}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,7 +6,10 @@ import Button from 'components/common/Button';
|
|||
import Modal from 'components/common/Modal';
|
||||
import Toast from 'components/common/Toast';
|
||||
import ChangePasswordForm from 'components/forms/ChangePasswordForm';
|
||||
import TimezoneSetting from 'components/settings/TimezoneSetting';
|
||||
import Dots from 'assets/ellipsis-h.svg';
|
||||
import styles from './ProfileSettings.module.css';
|
||||
import DateRangeSetting from './DateRangeSetting';
|
||||
|
||||
export default function ProfileSettings() {
|
||||
const user = useSelector(state => state.user);
|
||||
|
|
@ -23,7 +26,7 @@ export default function ProfileSettings() {
|
|||
<>
|
||||
<PageHeader>
|
||||
<div>
|
||||
<FormattedMessage id="settings.profile" defaultMessage="Profile" />
|
||||
<FormattedMessage id="label.profile" defaultMessage="Profile" />
|
||||
</div>
|
||||
<Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}>
|
||||
<div>
|
||||
|
|
@ -31,14 +34,28 @@ export default function ProfileSettings() {
|
|||
</div>
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<dl>
|
||||
<dl className={styles.list}>
|
||||
<dt>
|
||||
<FormattedMessage id="label.username" defaultMessage="Username" />
|
||||
</dt>
|
||||
<dd>{user.username}</dd>
|
||||
<dt>
|
||||
<FormattedMessage id="label.timezone" defaultMessage="Timezone" />
|
||||
</dt>
|
||||
<dd>
|
||||
<TimezoneSetting />
|
||||
</dd>
|
||||
<dt>
|
||||
<FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
|
||||
</dt>
|
||||
<dd>
|
||||
<DateRangeSetting />
|
||||
</dd>
|
||||
</dl>
|
||||
{changePassword && (
|
||||
<Modal title="Change password">
|
||||
<Modal
|
||||
title={<FormattedMessage id="title.change-password" defaultMessage="Change password" />}
|
||||
>
|
||||
<ChangePasswordForm
|
||||
values={{ user_id }}
|
||||
onSave={handleSave}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.list dd {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Page from 'components/layout/Page';
|
||||
import MenuLayout from 'components/layout/MenuLayout';
|
||||
import WebsiteSettings from './WebsiteSettings';
|
||||
|
|
@ -7,33 +8,38 @@ import ProfileSettings from './ProfileSettings';
|
|||
import { useSelector } from 'react-redux';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
const WEBSITES = 1;
|
||||
const ACCOUNTS = 2;
|
||||
const PROFILE = 3;
|
||||
const WEBSITES = '/settings';
|
||||
const ACCOUNTS = '/settings/accounts';
|
||||
const PROFILE = '/settings/profile';
|
||||
|
||||
export default function Settings() {
|
||||
const user = useSelector(state => state.user);
|
||||
const [option, setOption] = useState(WEBSITES);
|
||||
const router = useRouter();
|
||||
const { pathname } = router;
|
||||
|
||||
const menuOptions = [
|
||||
{
|
||||
label: <FormattedMessage id="settings.websites" defaultMessage="Websites" />,
|
||||
label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
|
||||
value: WEBSITES,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="settings.accounts" defaultMessage="Accounts" />,
|
||||
label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
|
||||
value: ACCOUNTS,
|
||||
hidden: !user.is_admin,
|
||||
},
|
||||
{ label: <FormattedMessage id="settings.profile" defaultMessage="Profile" />, value: PROFILE },
|
||||
{
|
||||
label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
|
||||
value: PROFILE,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
|
||||
{option === WEBSITES && <WebsiteSettings />}
|
||||
{option === ACCOUNTS && <AccountSettings />}
|
||||
{option === PROFILE && <ProfileSettings />}
|
||||
{pathname === WEBSITES && <WebsiteSettings />}
|
||||
{pathname === ACCOUNTS && <AccountSettings />}
|
||||
{pathname === PROFILE && <ProfileSettings />}
|
||||
</MenuLayout>
|
||||
</Page>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import React from 'react';
|
||||
import { useTransition, animated } from 'react-spring';
|
||||
import Button from 'components/common/Button';
|
||||
import useTheme from 'hooks/useTheme';
|
||||
import Sun from 'assets/sun.svg';
|
||||
import Moon from 'assets/moon.svg';
|
||||
import styles from './ThemeButton.module.css';
|
||||
import Icon from '../common/Icon';
|
||||
|
||||
export default function ThemeButton() {
|
||||
const [theme, setTheme] = useTheme();
|
||||
|
||||
const transitions = useTransition(theme, theme => theme, {
|
||||
from: {
|
||||
opacity: 0,
|
||||
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
|
||||
},
|
||||
enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
|
||||
leave: {
|
||||
opacity: 0,
|
||||
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
|
||||
},
|
||||
});
|
||||
|
||||
function handleClick() {
|
||||
setTheme(theme === 'light' ? 'dark' : 'light');
|
||||
}
|
||||
|
||||
return (
|
||||
<Button className={styles.button} variant="light" onClick={handleClick}>
|
||||
{transitions.map(({ item, key, props }) =>
|
||||
item === 'light' ? (
|
||||
<animated.div key={key} style={props}>
|
||||
<Icon icon={<Sun />} />
|
||||
</animated.div>
|
||||
) : (
|
||||
<animated.div key={key} style={props}>
|
||||
<Icon icon={<Moon />} />
|
||||
</animated.div>
|
||||
),
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.button {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.button svg {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { listTimeZones } from 'timezone-support';
|
||||
import DropDown from 'components/common/DropDown';
|
||||
import Button from 'components/common/Button';
|
||||
import useTimezone from 'hooks/useTimezone';
|
||||
import { getTimezone } from 'lib/date';
|
||||
import styles from './TimezoneSetting.module.css';
|
||||
|
||||
export default function TimezoneSetting() {
|
||||
const [timezone, saveTimezone] = useTimezone();
|
||||
const options = listTimeZones().map(n => ({ label: n, value: n }));
|
||||
|
||||
function handleReset() {
|
||||
saveTimezone(getTimezone());
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropDown
|
||||
menuClassName={styles.menu}
|
||||
value={timezone}
|
||||
options={options}
|
||||
onChange={saveTimezone}
|
||||
/>
|
||||
<Button className={styles.button} size="small" onClick={handleReset}>
|
||||
<FormattedMessage id="button.reset" defaultMessage="Reset" />
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.menu {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -1,18 +1,15 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useRouter } from 'next/router';
|
||||
import Menu from './Menu';
|
||||
import Icon from './Icon';
|
||||
import useDocumentClick from 'hooks/useDocumentClick';
|
||||
import MenuButton from 'components/common/MenuButton';
|
||||
import Icon from 'components/common/Icon';
|
||||
import User from 'assets/user.svg';
|
||||
import Chevron from 'assets/chevron-down.svg';
|
||||
import styles from './UserButton.module.css';
|
||||
|
||||
export default function UserButton() {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const user = useSelector(state => state.user);
|
||||
const ref = useRef();
|
||||
const router = useRouter();
|
||||
|
||||
const menuOptions = [
|
||||
|
|
@ -27,38 +24,24 @@ export default function UserButton() {
|
|||
value: 'username',
|
||||
className: styles.username,
|
||||
},
|
||||
{ label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
|
||||
{ label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
|
||||
];
|
||||
|
||||
function handleSelect(value) {
|
||||
setShowMenu(false);
|
||||
|
||||
if (value === 'logout') {
|
||||
router.push('/logout');
|
||||
} else if (value === 'profile') {
|
||||
router.push('/settings/profile');
|
||||
}
|
||||
}
|
||||
|
||||
useDocumentClick(e => {
|
||||
if (!ref.current.contains(e.target)) {
|
||||
setShowMenu(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={ref} className={styles.container}>
|
||||
<div className={styles.button} onClick={() => setShowMenu(state => !state)}>
|
||||
<Icon icon={<User />} size="large" />
|
||||
<Icon icon={<Chevron />} size="small" />
|
||||
</div>
|
||||
{showMenu && (
|
||||
<Menu
|
||||
className={styles.menu}
|
||||
options={menuOptions}
|
||||
onSelect={handleSelect}
|
||||
float="bottom"
|
||||
align="right"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<MenuButton
|
||||
icon={<Icon icon={<User />} size="large" />}
|
||||
value={<Icon icon={<Chevron />} size="small" />}
|
||||
options={menuOptions}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.username {
|
||||
border-bottom: 1px solid var(--gray500);
|
||||
}
|
||||
|
||||
.username:hover {
|
||||
background: var(--gray50);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import Link from 'components/common/Link';
|
||||
import Table from 'components/common/Table';
|
||||
import Button from 'components/common/Button';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
|
|
@ -16,7 +17,7 @@ import Pen from 'assets/pen.svg';
|
|||
import Trash from 'assets/trash.svg';
|
||||
import Plus from 'assets/plus.svg';
|
||||
import Code from 'assets/code.svg';
|
||||
import Link from 'assets/link.svg';
|
||||
import LinkIcon from 'assets/link.svg';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import styles from './WebsiteSettings.module.css';
|
||||
|
||||
|
|
@ -31,12 +32,12 @@ export default function WebsiteSettings() {
|
|||
const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
|
||||
|
||||
const Buttons = row => (
|
||||
<ButtonLayout>
|
||||
<ButtonLayout align="right">
|
||||
{row.share_id && (
|
||||
<Button
|
||||
icon={<Link />}
|
||||
icon={<LinkIcon />}
|
||||
size="small"
|
||||
tooltip={<FormattedMessage id="tooltip.get-share-url" defaultMessage="Get share URL" />}
|
||||
tooltip={<FormattedMessage id="message.get-share-url" defaultMessage="Get share URL" />}
|
||||
tooltipId={`button-share-${row.website_id}`}
|
||||
onClick={() => setShowUrl(row)}
|
||||
/>
|
||||
|
|
@ -45,7 +46,7 @@ export default function WebsiteSettings() {
|
|||
icon={<Code />}
|
||||
size="small"
|
||||
tooltip={
|
||||
<FormattedMessage id="tooltip.get-tracking-code" defaultMessage="Get tracking code" />
|
||||
<FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
|
||||
}
|
||||
tooltipId={`button-code-${row.website_id}`}
|
||||
onClick={() => setShowCode(row)}
|
||||
|
|
@ -63,11 +64,18 @@ export default function WebsiteSettings() {
|
|||
</ButtonLayout>
|
||||
);
|
||||
|
||||
const DetailsLink = ({ website_id, name }) => (
|
||||
<Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
|
||||
{name}
|
||||
</Link>
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'name',
|
||||
label: <FormattedMessage id="label.name" defaultMessage="Name" />,
|
||||
className: 'col-6 col-xl-4',
|
||||
render: DetailsLink,
|
||||
},
|
||||
{
|
||||
key: 'domain',
|
||||
|
|
@ -103,7 +111,7 @@ export default function WebsiteSettings() {
|
|||
<EmptyPlaceholder
|
||||
msg={
|
||||
<FormattedMessage
|
||||
id="placeholder.message.no-websites-configured"
|
||||
id="message.no-websites-configured"
|
||||
defaultMessage="You don't have any websites configured."
|
||||
/>
|
||||
}
|
||||
|
|
@ -120,7 +128,7 @@ export default function WebsiteSettings() {
|
|||
<>
|
||||
<PageHeader>
|
||||
<div>
|
||||
<FormattedMessage id="settings.websites" defaultMessage="Websites" />
|
||||
<FormattedMessage id="label.websites" defaultMessage="Websites" />
|
||||
</div>
|
||||
<Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ services:
|
|||
depends_on:
|
||||
- db
|
||||
db:
|
||||
image: postgres:alpine
|
||||
image: postgres:12-alpine
|
||||
environment:
|
||||
POSTGRES_DB: umami
|
||||
POSTGRES_USER: umami
|
||||
|
|
|
|||
|
|
@ -1,8 +1,41 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { parseISO } from 'date-fns';
|
||||
import { getDateRange } from 'lib/date';
|
||||
import { getItem, setItem } from 'lib/web';
|
||||
import { setDateRange } from '../redux/actions/websites';
|
||||
import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
|
||||
import useForceUpdate from './useForceUpdate';
|
||||
|
||||
export function useDateRange(websiteId, defaultDateRange = '7day') {
|
||||
return useSelector(
|
||||
state => state.websites[websiteId]?.dateRange || getDateRange(defaultDateRange),
|
||||
);
|
||||
export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
|
||||
const dispatch = useDispatch();
|
||||
const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
|
||||
const forceUpdate = useForceUpdate();
|
||||
|
||||
const globalDefault = getItem(DATE_RANGE_CONFIG);
|
||||
let globalDateRange;
|
||||
|
||||
if (globalDefault) {
|
||||
if (typeof globalDefault === 'string') {
|
||||
globalDateRange = getDateRange(globalDefault);
|
||||
} else if (typeof globalDefault === 'object') {
|
||||
globalDateRange = {
|
||||
...globalDefault,
|
||||
startDate: parseISO(globalDefault.startDate),
|
||||
endDate: parseISO(globalDefault.endDate),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function saveDateRange(values) {
|
||||
const { value } = values;
|
||||
|
||||
if (websiteId) {
|
||||
dispatch(setDateRange(websiteId, values));
|
||||
} else {
|
||||
setItem(DATE_RANGE_CONFIG, value === 'custom' ? values : value);
|
||||
forceUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
return [dateRange || globalDateRange || getDateRange(defaultDateRange), saveDateRange];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export default function useFetch(url, params = {}, options = {}) {
|
|||
const dispatch = useDispatch();
|
||||
const [data, setData] = useState();
|
||||
const [error, setError] = useState();
|
||||
const [loading, setLoadiing] = useState(false);
|
||||
const keys = Object.keys(params)
|
||||
.sort()
|
||||
.map(key => params[key]);
|
||||
|
|
@ -14,6 +15,7 @@ export default function useFetch(url, params = {}, options = {}) {
|
|||
|
||||
async function loadData() {
|
||||
try {
|
||||
setLoadiing(true);
|
||||
setError(null);
|
||||
const time = performance.now();
|
||||
const data = await get(url, params);
|
||||
|
|
@ -25,6 +27,8 @@ export default function useFetch(url, params = {}, options = {}) {
|
|||
} catch (e) {
|
||||
console.error(e);
|
||||
setError(e);
|
||||
} finally {
|
||||
setLoadiing(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -42,5 +46,5 @@ export default function useFetch(url, params = {}, options = {}) {
|
|||
}
|
||||
}, [url, ...keys, ...update]);
|
||||
|
||||
return { data, error, loadData };
|
||||
return { data, error, loading, loadData };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { useCallback, useState } from 'react';
|
||||
|
||||
export default function useForceUpdate() {
|
||||
const [, update] = useState(Object.create(null));
|
||||
|
||||
return useCallback(() => {
|
||||
update(Object.create(null));
|
||||
}, [update]);
|
||||
}
|
||||
|
|
@ -1,13 +1,16 @@
|
|||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { updateApp } from 'redux/actions/app';
|
||||
import { setLocale } from 'redux/actions/app';
|
||||
import { setItem } from 'lib/web';
|
||||
import { LOCALE_CONFIG } from 'lib/constants';
|
||||
|
||||
export default function useLocale() {
|
||||
const locale = useSelector(state => state.app.locale);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
function setLocale(value) {
|
||||
dispatch(updateApp({ locale: value }));
|
||||
function saveLocale(value) {
|
||||
setItem(LOCALE_CONFIG, value);
|
||||
dispatch(setLocale(value));
|
||||
}
|
||||
|
||||
return [locale, setLocale];
|
||||
return [locale, saveLocale];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { setTheme } from 'redux/actions/app';
|
||||
import { getItem, setItem } from 'lib/web';
|
||||
import { THEME_CONFIG } from 'lib/constants';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function useLocale() {
|
||||
const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || 'light');
|
||||
const dispatch = useDispatch();
|
||||
|
||||
function saveTheme(value) {
|
||||
setItem(THEME_CONFIG, value);
|
||||
dispatch(setTheme(value));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
document.body.setAttribute('data-theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
return [theme, saveTheme];
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { useState, useCallback } from 'react';
|
||||
import { getTimezone } from 'lib/date';
|
||||
import { getItem, setItem } from 'lib/web';
|
||||
|
||||
export default function useTimezone() {
|
||||
const [timezone, setTimezone] = useState(getItem('umami.timezone') || getTimezone());
|
||||
|
||||
const saveTimezone = useCallback(
|
||||
value => {
|
||||
setItem('umami.timezone', value);
|
||||
setTimezone(value);
|
||||
},
|
||||
[setTimezone],
|
||||
);
|
||||
|
||||
return [timezone, saveTimezone];
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue