ambiser
/
umami
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1 from mikecao/master 

Sync Fork
pull/338/head
maxime.io 2020-09-25 11:41:17 +02:00 committed by GitHub
parent 67787724fd 59a3c7c0e2
commit 774f47c284
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
156 changed files with 3915 additions and 2525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.github/stale.yml vendored Normal file
View File

@ -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

1
.gitignore vendored
View File

@ -17,6 +17,7 @@
/build /build
/public/umami.js /public/umami.js
/lang-compiled /lang-compiled
/lang-formatted
# misc # misc
.DS_Store .DS_Store

40
Dockerfile
View File

@ -1,15 +1,41 @@
FROM node:12.18-alpine # Build image
FROM node:12.18-alpine AS build
ARG DATABASE_TYPE ARG DATABASE_TYPE
ENV DATABASE_URL "postgresql://umami:umami@db:5432/umami" \ ENV DATABASE_URL "postgresql://umami:umami@db:5432/umami" \
DATABASE_TYPE=$DATABASE_TYPE 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 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 EXPOSE 3000
CMD ["yarn", "start"]
CMD ["npm", "start"]

1
README.md
View File

@ -92,7 +92,6 @@ Or with MySQL support:
docker pull ghcr.io/mikecao/umami:mysql-latest docker pull ghcr.io/mikecao/umami:mysql-latest
``` ```
## Getting updates ## Getting updates
To get the latest features, simply do a pull, install any new dependencies, and rebuild: To get the latest features, simply do a pull, install any new dependencies, and rebuild:

1
assets/calendar-alt.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1002 B

1
assets/external-link.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

1
assets/list-ul.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 492 B

3
assets/logo.svg
View File

@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 488 B

After

Width:  |  Height:  |  Size: 377 B

1
assets/moon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 302 B

1
assets/sun.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

76
components/WebsiteDetails.js
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useRouter } from 'next/router';
import classNames from 'classnames'; import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart'; import WebsiteChart from 'components/metrics/WebsiteChart';
import WorldMap from 'components/common/WorldMap'; import WorldMap from 'components/common/WorldMap';
@ -19,19 +20,37 @@ import EventsChart from './metrics/EventsChart';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import Loading from 'components/common/Loading'; import Loading from 'components/common/Loading';
export default function WebsiteDetails({ websiteId }) { const views = {
const { data } = useFetch(`/api/website/${websiteId}`); 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 [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState(); const [countryData, setCountryData] = useState();
const [eventsData, setEventsData] = 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 = () => ( const BackButton = () => (
<Button <Button
key="back-button"
className={styles.backButton} className={styles.backButton}
icon={<Arrow />} icon={<Arrow />}
size="xsmall" size="xsmall"
onClick={() => setExpand(null)} onClick={() => router.push(path)}
> >
<div> <div>
<FormattedMessage id="button.back" defaultMessage="Back" /> <FormattedMessage id="button.back" defaultMessage="Back" />
@ -45,53 +64,43 @@ export default function WebsiteDetails({ websiteId }) {
}, },
{ {
label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />, label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
value: 'url', value: `${path}?view=url`,
component: PagesTable,
}, },
{ {
label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />, label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
value: 'referrer', value: `${path}?view=referrer`,
component: ReferrersTable,
}, },
{ {
label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />, label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
value: 'browser', value: `${path}?view=browser`,
component: BrowsersTable,
}, },
{ {
label: <FormattedMessage id="metrics.operating-system" defaultMessage="Operating system" />, label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
value: 'os', value: `${path}?view=os`,
component: OSTable,
}, },
{ {
label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />, label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
value: 'device', value: `${path}?view=device`,
component: DevicesTable,
}, },
{ {
label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />, label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
value: 'country', value: `${path}?view=country`,
component: CountriesTable,
}, },
{ {
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />, label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
value: 'event', value: `${path}?view=event`,
component: EventsTable,
}, },
]; ];
const tableProps = { const tableProps = {
websiteId, websiteId,
token,
websiteDomain: data?.domain, websiteDomain: data?.domain,
limit: 10, limit: 10,
onExpand: handleExpand, onExpand: handleExpand,
}; };
const DetailsComponent = expand?.component; const DetailsComponent = views[view];
function getSelectedMenuOption(value) {
return menuOptions.find(e => e.value === value);
}
function handleDataLoad() { function handleDataLoad() {
if (!chartLoaded) { if (!chartLoaded) {
@ -100,11 +109,7 @@ export default function WebsiteDetails({ websiteId }) {
} }
function handleExpand(value) { function handleExpand(value) {
setExpand(getSelectedMenuOption(value)); router.push(`${path}?view=${value}`);
}
function handleMenuSelect(value) {
setExpand(getSelectedMenuOption(value));
} }
if (!data) { if (!data) {
@ -117,6 +122,7 @@ export default function WebsiteDetails({ websiteId }) {
<div className={classNames(styles.chart, 'col')}> <div className={classNames(styles.chart, 'col')}>
<WebsiteChart <WebsiteChart
websiteId={websiteId} websiteId={websiteId}
token={token}
title={data.name} title={data.name}
onDataLoad={handleDataLoad} onDataLoad={handleDataLoad}
showLink={false} showLink={false}
@ -125,7 +131,7 @@ export default function WebsiteDetails({ websiteId }) {
</div> </div>
</div> </div>
{!chartLoaded && <Loading />} {!chartLoaded && <Loading />}
{chartLoaded && !expand && ( {chartLoaded && !view && (
<> <>
<div className={classNames(styles.row, 'row')}> <div className={classNames(styles.row, 'row')}>
<div className="col-md-12 col-lg-6"> <div className="col-md-12 col-lg-6">
@ -161,19 +167,17 @@ export default function WebsiteDetails({ websiteId }) {
<EventsTable {...tableProps} onDataLoad={setEventsData} /> <EventsTable {...tableProps} onDataLoad={setEventsData} />
</div> </div>
<div className="col-12 col-md-12 col-lg-8 pt-5 pb-5"> <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
<EventsChart websiteId={websiteId} /> <EventsChart websiteId={websiteId} token={token} />
</div> </div>
</div> </div>
</> </>
)} )}
{expand && ( {view && (
<MenuLayout <MenuLayout
className={styles.expand} className={styles.view}
menuClassName={styles.menu} menuClassName={styles.menu}
optionClassName={styles.option} contentClassName={styles.content}
menu={menuOptions} menu={menuOptions}
selectedOption={expand.value}
onMenuSelect={handleMenuSelect}
> >
<DetailsComponent {...tableProps} limit={false} /> <DetailsComponent {...tableProps} limit={false} />
</MenuLayout> </MenuLayout>

9
components/WebsiteDetails.module.css
View File

@ -2,7 +2,7 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.expand { .view {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--gray300);
} }
@ -10,8 +10,9 @@
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
.menu .option { .content {
font-size: var(--font-size-small); min-height: 600px;
padding: 20px 0;
} }
.backButton { .backButton {
@ -30,7 +31,7 @@
.row > [class*='col-'] { .row > [class*='col-'] {
border-left: 1px solid var(--gray300); border-left: 1px solid var(--gray300);
padding: 0 20px; padding: 20px;
} }
.row > [class*='col-']:first-child { .row > [class*='col-']:first-child {

11
components/WebsiteList.js
View File

@ -9,9 +9,9 @@ import useFetch from 'hooks/useFetch';
import Arrow from 'assets/arrow-right.svg'; import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteList.module.css'; import styles from './WebsiteList.module.css';
export default function WebsiteList() { export default function WebsiteList({ userId }) {
const router = useRouter(); const router = useRouter();
const { data } = useFetch('/api/websites'); const { data } = useFetch('/api/websites', { user_id: userId });
if (!data) { if (!data) {
return null; return null;
@ -28,17 +28,14 @@ export default function WebsiteList() {
<EmptyPlaceholder <EmptyPlaceholder
msg={ msg={
<FormattedMessage <FormattedMessage
id="placeholder.message.no-websites-configured" id="message.no-websites-configured"
defaultMessage="You don't have any websites configured." defaultMessage="You don't have any websites configured."
/> />
} }
> >
<Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}> <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
<div> <div>
<FormattedMessage <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
id="placeholder.message.go-to-settings"
defaultMessage="Go to settings"
/>
</div> </div>
</Button> </Button>
</EmptyPlaceholder> </EmptyPlaceholder>

6
components/common/Button.js
View File

@ -13,6 +13,8 @@ export default function Button({
className, className,
tooltip, tooltip,
tooltipId, tooltipId,
disabled = false,
onClick = () => {},
...props ...props
}) { }) {
return ( return (
@ -27,7 +29,11 @@ export default function Button({
[styles.xsmall]: size === 'xsmall', [styles.xsmall]: size === 'xsmall',
[styles.action]: variant === 'action', [styles.action]: variant === 'action',
[styles.danger]: variant === 'danger', [styles.danger]: variant === 'danger',
[styles.light]: variant === 'light',
[styles.disabled]: disabled,
})} })}
disabled={disabled}
onClick={!disabled ? onClick : null}
{...props} {...props}
> >
{icon && <Icon icon={icon} size={size} />} {icon && <Icon icon={icon} size={size} />}

43
components/common/Button.module.css
View File

@ -3,6 +3,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: var(--font-size-normal); font-size: var(--font-size-normal);
color: var(--gray900);
background: var(--gray100); background: var(--gray100);
padding: 8px 16px; padding: 8px 16px;
border-radius: 4px; border-radius: 4px;
@ -14,11 +15,11 @@
} }
.button:hover { .button:hover {
background: #eaeaea; background: var(--gray200);
} }
.button:active { .button:active {
color: initial; color: var(--gray900);
} }
.large { .large {
@ -38,19 +39,45 @@
} }
.action { .action {
color: var(--gray50) !important; color: var(--gray50);
background: var(--gray900) !important; background: var(--gray900);
} }
.action:hover { .action:hover {
background: var(--gray800) !important; background: var(--gray800);
} }
.danger { .danger {
color: var(--gray50) !important; color: var(--gray50);
background: var(--red500) !important; background: var(--red500);
} }
.danger:hover { .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);
} }

4
components/common/ButtonGroup.module.css
View File

@ -7,6 +7,7 @@
.group .button { .group .button {
border-radius: 0; border-radius: 0;
color: var(--gray800);
background: var(--gray50); background: var(--gray50);
border-left: 1px solid var(--gray500); border-left: 1px solid var(--gray500);
padding: 4px 8px; padding: 4px 8px;
@ -24,6 +25,7 @@
margin: 0; margin: 0;
} }
.selected { .group .button.selected {
color: var(--gray900);
font-weight: 600; font-weight: 600;
} }

267
components/common/Calendar.js Normal file
View File

@ -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>
);
};

111
components/common/Calendar.module.css Normal file
View File

@ -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);
}
}

93
components/common/DateFilter.js
View File

@ -1,21 +1,39 @@
import React from 'react'; import React, { useState } from 'react';
import { getDateRange } from 'lib/date';
import DropDown from './DropDown';
import { FormattedMessage } from 'react-intl'; 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 = [ const filterOptions = [
{ label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
{ {
label: ( label: (
<FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} /> <FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} />
), ),
value: '24hour', value: '24hour',
}, },
{
label: <FormattedMessage id="label.this-week" defaultMessage="This week" />,
value: '1week',
divider: true,
},
{ {
label: ( label: (
<FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} /> <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} />
), ),
value: '7day', value: '7day',
}, },
{
label: <FormattedMessage id="label.this-month" defaultMessage="This month" />,
value: '1month',
divider: true,
},
{ {
label: ( label: (
<FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 30 }} /> <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 30 }} />
@ -28,21 +46,74 @@ const filterOptions = [
), ),
value: '90day', 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.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) { function handleChange(value) {
if (value === 'custom') {
setShowPicker(true);
return;
}
onChange(getDateRange(value)); onChange(getDateRange(value));
} }
function handlePickerChange(value) {
setShowPicker(false);
onChange(value);
}
return ( 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)}`}
</>
);
};

18
components/common/DropDown.js
View File

@ -15,6 +15,7 @@ export default function DropDown({
}) { }) {
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
const ref = useRef(); const ref = useRef();
const selectedOption = options.find(e => e.value === value);
function handleShowMenu() { function handleShowMenu() {
setShowMenu(state => !state); setShowMenu(state => !state);
@ -23,9 +24,8 @@ export default function DropDown({
function handleSelect(selected, e) { function handleSelect(selected, e) {
e.stopPropagation(); e.stopPropagation();
setShowMenu(false); setShowMenu(false);
if (selected !== value) {
onChange(selected); onChange(selected);
}
} }
useDocumentClick(e => { useDocumentClick(e => {
@ -37,11 +37,17 @@ export default function DropDown({
return ( return (
<div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}> <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
<div className={styles.value}> <div className={styles.value}>
{options.find(e => e.value === value)?.label} {options.find(e => e.value === value)?.label || value}
<Icon icon={<Chevron />} size="small" /> <Icon icon={<Chevron />} className={styles.icon} size="small" />
</div> </div>
{showMenu && ( {showMenu && (
<Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" /> <Menu
className={menuClassName}
options={options}
selectedOption={selectedOption}
onSelect={handleSelect}
float="bottom"
/>
)} )}
</div> </div>
); );

24
components/common/Dropdown.module.css
View File

@ -1,16 +1,24 @@
.dropdown { .dropdown {
position: relative; position: relative;
font-size: var(--font-size-small);
min-width: 140px;
}
.value {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
white-space: nowrap; align-items: center;
position: relative;
padding: 4px 16px;
border: 1px solid var(--gray500); border: 1px solid var(--gray500);
border-radius: 4px; border-radius: 4px;
cursor: pointer; 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;
}

3
components/common/Icon.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './Icon.module.css'; import styles from './Icon.module.css';
export default function Icon({ icon, className, size = 'medium' }) { export default function Icon({ icon, className, size = 'medium', ...props }) {
return ( return (
<div <div
className={classNames(styles.icon, className, { className={classNames(styles.icon, className, {
@ -12,6 +12,7 @@ export default function Icon({ icon, className, size = 'medium' }) {
[styles.small]: size === 'small', [styles.small]: size === 'small',
[styles.xsmall]: size === 'xsmall', [styles.xsmall]: size === 'xsmall',
})} })}
{...props}
> >
{icon} {icon}
</div> </div>

44
components/common/LanguageButton.js
View File

@ -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>
);
}

9
components/common/LanguageButton.module.css
View File

@ -1,9 +0,0 @@
.container {
display: flex;
position: relative;
cursor: pointer;
}
.menu {
z-index: 100;
}

14
components/common/Link.module.css
View File

@ -1,23 +1,23 @@
.link, a.link,
.link:active, a.link:active,
.link:visited { a.link:visited {
position: relative; position: relative;
color: #2c2c2c; color: var(--gray900);
text-decoration: none; text-decoration: none;
} }
.link:before { a.link:before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
width: 0; width: 0;
height: 2px; height: 2px;
background: #2680eb; background: var(--primary400);
opacity: 0.5; opacity: 0.5;
transition: width 100ms; transition: width 100ms;
} }
.link:hover:before { a.link:hover:before {
width: 100%; width: 100%;
transition: width 100ms; transition: width 100ms;
} }

6
components/common/Menu.js
View File

@ -25,7 +25,7 @@ export default function Menu({
{options {options
.filter(({ hidden }) => !hidden) .filter(({ hidden }) => !hidden)
.map(option => { .map(option => {
const { label, value, className: customClassName, render } = option; const { label, value, className: customClassName, render, divider } = option;
return render ? ( return render ? (
render(option) render(option)
@ -33,7 +33,9 @@ export default function Menu({
<div <div
key={value} key={value}
className={classNames(styles.option, optionClassName, customClassName, { className={classNames(styles.option, optionClassName, customClassName, {
[selectedClassName]: selectedOption === value, [selectedClassName]: selectedOption === option,
[styles.selected]: selectedOption === option,
[styles.divider]: divider,
})} })}
onClick={e => onSelect(value, e)} onClick={e => onSelect(value, e)}
> >

12
components/common/Menu.module.css
View File

@ -8,14 +8,14 @@
.option { .option {
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: normal; font-weight: normal;
background: #fff; background: var(--gray50);
padding: 4px 16px; padding: 4px 16px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
.option:hover { .option:hover {
background: #f5f5f5; background: var(--gray100);
} }
.float { .float {
@ -40,3 +40,11 @@
.right { .right {
right: 0; right: 0;
} }
.divider {
border-top: 1px solid var(--gray300);
}
.selected {
font-weight: 600;
}

58
components/common/MenuButton.js Normal file
View File

@ -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>
);
}

24
components/common/MenuButton.module.css Normal file
View File

@ -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);
}

7
components/common/Modal.module.css
View File

@ -1,5 +1,5 @@
.modal { .modal {
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -16,8 +16,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
background: var(--gray900); background: #000;
opacity: 0.1; opacity: 0.5;
} }
.content { .content {
@ -28,6 +28,7 @@
background: var(--gray50); background: var(--gray50);
min-width: 400px; min-width: 400px;
min-height: 100px; min-height: 100px;
max-width: 100vw;
z-index: 1; z-index: 1;
border: 1px solid var(--gray300); border: 1px solid var(--gray300);
padding: 30px; padding: 30px;

32
components/common/NavMenu.js Normal file
View File

@ -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>
);
}

22
components/common/NavMenu.module.css Normal file
View File

@ -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;
}

15
components/common/RefreshButton.js
View File

@ -1,15 +1,16 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { setDateRange } from 'redux/actions/websites'; import { setDateRange } from 'redux/actions/websites';
import Button from './Button'; import Button from './Button';
import Refresh from 'assets/redo.svg'; import Refresh from 'assets/redo.svg';
import Dots from 'assets/ellipsis-h.svg'; import Dots from 'assets/ellipsis-h.svg';
import { useDateRange } from 'hooks/useDateRange'; import useDateRange from 'hooks/useDateRange';
import { getDateRange } from '../../lib/date'; import { getDateRange } from '../../lib/date';
export default function RefreshButton({ websiteId }) { export default function RefreshButton({ websiteId }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const dateRange = useDateRange(websiteId); const [dateRange] = useDateRange(websiteId);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]); const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);
@ -24,5 +25,13 @@ export default function RefreshButton({ websiteId }) {
setLoading(false); setLoading(false);
}, [completed]); }, [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}
/>
);
} }

2
components/common/Toast.module.css
View File

@ -9,7 +9,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 16px; padding: 8px 16px;
color: var(--gray50); color: var(--msgColor);
background: var(--green400); background: var(--green400);
margin: auto; margin: auto;
z-index: 2; z-index: 2;

22
components/common/UserButton.module.css
View File

@ -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;
}

60
components/common/WorldMap.js
View File

@ -1,44 +1,57 @@
import React, { useState } from 'react'; import React, { useState, useMemo } from 'react';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
import classNames from 'classnames'; import classNames from 'classnames';
import tinycolor from 'tinycolor2'; 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'; import styles from './WorldMap.module.css';
const geoUrl = '/world-110m.json'; const geoUrl = '/world-110m.json';
export default function WorldMap({ export default function WorldMap({ data, className }) {
data,
className,
baseColor = '#e9f3fd',
fillColor = '#f5f5f5',
strokeColor = '#2680eb',
hoverColor = '#2680eb',
}) {
const [tooltip, setTooltip] = useState(); 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) { function getFillColor(code) {
if (code === 'AQ') return '#ffffff'; if (code === 'AQ') return;
const country = data?.find(({ x }) => x === code); 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) { function getOpacity(code) {
return code === 'AQ' ? '#ffffff' : strokeColor; return code === 'AQ' ? 0 : 1;
}
function getHoverColor(code) {
return code === 'AQ' ? '#ffffff' : hoverColor;
} }
function handleHover({ ISO_A2: code, NAME: name }) { function handleHover({ ISO_A2: code, NAME: name }) {
if (code === 'AQ') return;
const country = data?.find(({ x }) => x === code); const country = data?.find(({ x }) => x === code);
setTooltip(`${name}: ${country?.y || 0} visitors`); setTooltip(`${name}: ${country?.y || 0} visitors`);
} }
return ( return (
<div className={classNames(styles.container, className)}> <div
<ComposableMap data-tip="" projection="geoMercator"> 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]}> <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
<Geographies geography={geoUrl}> <Geographies geography={geoUrl}>
{({ geographies }) => { {({ geographies }) => {
@ -50,10 +63,11 @@ export default function WorldMap({
key={geo.rsmKey} key={geo.rsmKey}
geography={geo} geography={geo}
fill={getFillColor(code)} fill={getFillColor(code)}
stroke={getStrokeColor(code)} stroke={colors.strokeColor}
opacity={getOpacity(code)}
style={{ style={{
default: { outline: 'none' }, default: { outline: 'none' },
hover: { outline: 'none', fill: getHoverColor(code) }, hover: { outline: 'none', fill: colors.hoverColor },
pressed: { outline: 'none' }, pressed: { outline: 'none' },
}} }}
onMouseOver={() => handleHover(geo.properties)} onMouseOver={() => handleHover(geo.properties)}
@ -65,7 +79,7 @@ export default function WorldMap({
</Geographies> </Geographies>
</ZoomableGroup> </ZoomableGroup>
</ComposableMap> </ComposableMap>
<ReactTooltip>{tooltip}</ReactTooltip> <ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
</div> </div>
); );
} }

1
components/common/WorldMap.module.css
View File

@ -1,5 +1,4 @@
.container { .container {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff;
} }

83
components/forms/DatePickerForm.js Normal file
View File

@ -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>
);
}

40
components/forms/DatePickerForm.module.css Normal file
View File

@ -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;
}
}

14
components/forms/DeleteForm.js
View File

@ -10,10 +10,12 @@ import FormLayout, {
} from 'components/layout/FormLayout'; } from 'components/layout/FormLayout';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
const CONFIRMATION_WORD = 'DELETE';
const validate = ({ confirmation }) => { const validate = ({ confirmation }) => {
const errors = {}; const errors = {};
if (confirmation !== 'DELETE') { if (confirmation !== CONFIRMATION_WORD) {
errors.confirmation = !confirmation ? ( errors.confirmation = !confirmation ? (
<FormattedMessage id="label.required" defaultMessage="Required" /> <FormattedMessage id="label.required" defaultMessage="Required" />
) : ( ) : (
@ -44,7 +46,7 @@ export default function DeleteForm({ values, onSave, onClose }) {
validate={validate} validate={validate}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
{() => ( {props => (
<Form> <Form>
<div> <div>
<FormattedMessage <FormattedMessage
@ -63,7 +65,7 @@ export default function DeleteForm({ values, onSave, onClose }) {
<FormattedMessage <FormattedMessage
id="message.type-delete" id="message.type-delete"
defaultMessage="Type {delete} in the box below to confirm." defaultMessage="Type {delete} in the box below to confirm."
values={{ delete: <b>DELETE</b> }} values={{ delete: <b>{CONFIRMATION_WORD}</b> }}
/> />
</p> </p>
<FormRow> <FormRow>
@ -71,7 +73,11 @@ export default function DeleteForm({ values, onSave, onClose }) {
<FormError name="confirmation" /> <FormError name="confirmation" />
</FormRow> </FormRow>
<FormButtons> <FormButtons>
<Button type="submit" variant="danger"> <Button
type="submit"
variant="danger"
disabled={props.values.confirmation !== CONFIRMATION_WORD}
>
<FormattedMessage id="button.delete" defaultMessage="Delete" /> <FormattedMessage id="button.delete" defaultMessage="Delete" />
</Button> </Button>
<Button onClick={onClose}> <Button onClick={onClose}>

2
components/forms/TrackingCodeForm.js
View File

@ -2,7 +2,7 @@ import React, { useRef } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Button from 'components/common/Button'; import Button from 'components/common/Button';
import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout'; 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 }) { export default function TrackingCodeForm({ values, onClose }) {
const ref = useRef(); const ref = useRef();

14
components/layout/ButtonLayout.js
View File

@ -2,6 +2,16 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './ButtonLayout.module.css'; import styles from './ButtonLayout.module.css';
export default function ButtonLayout({ className, children }) { export default function ButtonLayout({ className, children, align = 'center' }) {
return <div className={classNames(styles.buttons, className)}>{children}</div>; return (
<div
className={classNames(styles.buttons, className, {
[styles.left]: align === 'left',
[styles.center]: align === 'center',
[styles.right]: align === 'right',
})}
>
{children}
</div>
);
} }

15
components/layout/ButtonLayout.module.css
View File

@ -1,7 +1,20 @@
.buttons { .buttons {
display: flex; display: flex;
align-items: center;
} }
.buttons button + button { .buttons button + * {
margin-left: 10px; margin-left: 10px;
} }
.center {
justify-content: center;
}
.left {
justify-content: flex-start;
}
.right {
justify-content: flex-end;
}

26
components/layout/Footer.js
View File

@ -1,21 +1,27 @@
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import classNames from 'classnames'; import Link from 'components/common/Link';
import Button from 'components/common/Button';
import Logo from 'assets/logo.svg';
import styles from './Footer.module.css'; import styles from './Footer.module.css';
export default function Footer() { export default function Footer() {
const version = process.env.VERSION; const version = process.env.VERSION;
return ( return (
<footer className="container"> <footer className="container">
<div className={classNames(styles.footer, 'row justify-content-center')}> <div className={styles.footer}>
<FormattedMessage id="footer.powered-by" defaultMessage="Powered by" /> <div />
<a href="https://umami.is"> <div>
<Button className={styles.button} icon={<Logo />} size="small"> <FormattedMessage
<b>umami</b> id="message.powered-by"
</Button> defaultMessage="Powered by {name}"
</a> values={{
name: (
<Link href="https://umami.is">
<b>umami</b>
</Link>
),
}}
/>
</div>
<div>{`v${version}`}</div> <div>{`v${version}`}</div>
</div> </div>
</footer> </footer>

8
components/layout/Footer.module.css
View File

@ -5,11 +5,3 @@
font-size: var(--font-size-small); font-size: var(--font-size-small);
min-height: 100px; min-height: 100px;
} }
.footer a {
text-decoration: none;
}
.button {
margin: 0 5px;
}

2
components/layout/FormLayout.module.css
View File

@ -39,7 +39,7 @@
} }
.msg { .msg {
color: var(--gray50); color: var(--msgColor);
background: var(--red400); background: var(--red400);
font-size: var(--font-size-small); font-size: var(--font-size-small);
padding: 4px 8px; padding: 4px 8px;

42
components/layout/Header.js
View File

@ -3,11 +3,12 @@ import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
import UserButton from '../common/UserButton'; import Icon from 'components/common/Icon';
import Icon from '../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 Logo from 'assets/logo.svg';
import styles from './Header.module.css'; import styles from './Header.module.css';
import LanguageButton from '../common/LanguageButton';
export default function Header() { export default function Header() {
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
@ -15,28 +16,29 @@ export default function Header() {
return ( return (
<header className="container"> <header className="container">
<div className={classNames(styles.header, 'row align-items-center')}> <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}> <div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} /> <Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link> <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div> </div>
</div> </div>
<div className="col-12 col-md-9"> <div className="col-12 col-md-12 col-lg-6">
<div className={styles.nav}> {user && (
{user ? ( <div className={styles.nav}>
<> <Link href="/dashboard">
<Link href="/dashboard"> <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
<FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" /> </Link>
</Link> <Link href="/settings">
<Link href="/settings"> <FormattedMessage id="label.settings" defaultMessage="Settings" />
<FormattedMessage id="header.nav.settings" defaultMessage="Settings" /> </Link>
</Link> </div>
<LanguageButton menuAlign="right" /> )}
<UserButton /> </div>
</> <div className="col-12 col-md-12 col-lg-3">
) : ( <div className={styles.buttons}>
<LanguageButton menuAlign="right" /> <ThemeButton />
)} <LanguageButton menuAlign="right" />
{user && <UserButton />}
</div> </div>
</div> </div>
</div> </div>

21
components/layout/Header.module.css
View File

@ -13,18 +13,33 @@
.nav { .nav {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
align-items: center; align-items: center;
font-size: var(--font-size-normal); font-size: var(--font-size-normal);
font-weight: 600; font-weight: 600;
} }
.nav > * { .nav a + a {
margin-left: 40px; 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 { .title {
text-align: center; text-align: center;
} }
.nav {
font-size: var(--font-size-large);
justify-content: center;
padding: 20px 0;
}
.buttons {
justify-content: center;
}
} }

6
components/layout/Layout.js
View File

@ -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" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
</Head> </Head>
{header && <Header />} {header && <Header />}
<main className="container">{children}</main> <main className="container">{children}</main>
<div id="__modals" />
{footer && <Footer />} {footer && <Footer />}
<div id="__modals" />
</> </>
); );
} }

6
components/layout/Layout.module.css Normal file
View File

@ -0,0 +1,6 @@
.layout {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}

26
components/layout/MenuLayout.js
View File

@ -1,29 +1,37 @@
import React from 'react'; import React from 'react';
import { useRouter } from 'next/router';
import classNames from 'classnames'; import classNames from 'classnames';
import Menu from 'components/common/Menu'; import NavMenu from 'components/common/NavMenu';
import styles from './MenuLayout.module.css'; import styles from './MenuLayout.module.css';
export default function MenuLayout({ export default function MenuLayout({
menu, menu,
selectedOption, selectedOption,
onMenuSelect,
className, className,
menuClassName, menuClassName,
contentClassName, contentClassName,
optionClassName,
children, children,
replace = false,
}) { }) {
const router = useRouter();
function handleSelect(url) {
if (replace) {
router.replace(url);
} else {
router.push(url);
}
}
return ( return (
<div className={classNames(styles.container, className, 'row')}> <div className={classNames(styles.container, className, 'row')}>
<Menu <NavMenu
options={menu} options={menu}
selectedOption={selectedOption} selectedOption={selectedOption}
className={classNames(styles.menu, menuClassName, 'col-12 col-lg-3')} className={classNames(styles.menu, menuClassName, 'col-12 col-lg-2')}
selectedClassName={styles.selected} onSelect={handleSelect}
optionClassName={classNames(styles.option, optionClassName)}
onSelect={onMenuSelect}
/> />
<div className={classNames(styles.content, contentClassName, 'col-12 col-lg-9')}> <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-10')}>
{children} {children}
</div> </div>
</div> </div>

19
components/layout/MenuLayout.module.css
View File

@ -10,25 +10,11 @@
} }
.container .content { .container .content {
flex: 1;
position: relative; position: relative;
border-left: 1px solid var(--gray300); border-left: 1px solid var(--gray300);
padding-left: 30px; padding-left: 30px;
} margin-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;
} }
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
@ -40,5 +26,6 @@
border-top: 1px solid var(--gray300); border-top: 1px solid var(--gray300);
border-left: 0; border-left: 0;
padding-left: 0; padding-left: 0;
margin-left: 0;
} }
} }

5
components/layout/Page.module.css
View File

@ -1,6 +1,7 @@
.page { .page {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30px; padding: 0 30px;
background: var(--gray50); background: var(--gray50);
height: 100%;
overflow: hidden;
} }

5
components/layout/PageHeader.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import styles from './PageHeader.module.css'; import styles from './PageHeader.module.css';
export default function PageHeader({ children }) { export default function PageHeader({ children, className }) {
return <div className={styles.header}>{children}</div>; return <div className={classNames(styles.header, className)}>{children}</div>;
} }

17
components/messages.js Normal file
View File

@ -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)} />;
}

6
components/metrics/ActiveUsers.js
View File

@ -4,8 +4,8 @@ import useFetch from 'hooks/useFetch';
import styles from './ActiveUsers.module.css'; import styles from './ActiveUsers.module.css';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
export default function ActiveUsers({ websiteId, className }) { export default function ActiveUsers({ websiteId, token, className }) {
const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 }); const { data } = useFetch(`/api/website/${websiteId}/active`, { token }, { interval: 60000 });
const count = useMemo(() => { const count = useMemo(() => {
return data?.[0]?.x || 0; return data?.[0]?.x || 0;
}, [data]); }, [data]);
@ -20,7 +20,7 @@ export default function ActiveUsers({ websiteId, className }) {
<div className={styles.text}> <div className={styles.text}>
<div> <div>
<FormattedMessage <FormattedMessage
id="active-users.message" id="message.active-users"
defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}" defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
values={{ x: count }} values={{ x: count }}
/> />

66
components/metrics/BarChart.js
View File

@ -6,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
import { dateFormat } from 'lib/lang'; import { dateFormat } from 'lib/lang';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import styles from './BarChart.module.css'; import styles from './BarChart.module.css';
import useTheme from 'hooks/useTheme';
import { THEME_COLORS } from 'lib/constants';
export default function BarChart({ export default function BarChart({
chartId, chartId,
@ -16,15 +18,23 @@ export default function BarChart({
animationDuration = 300, animationDuration = 300,
className, className,
stacked = false, stacked = false,
loading = false,
onCreate = () => {}, onCreate = () => {},
onUpdate = () => {}, onUpdate = () => {},
}) { }) {
const canvas = useRef(); const canvas = useRef();
const chart = useRef(); const chart = useRef();
const [tooltip, setTooltip] = useState({}); const [tooltip, setTooltip] = useState(null);
const [locale] = useLocale(); 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) { function renderXLabel(label, index, values) {
if (loading) return '';
const d = new Date(values[index].value); const d = new Date(values[index].value);
const w = canvas.current.width; const w = canvas.current.width;
@ -44,9 +54,9 @@ export default function BarChart({
return dateFormat(d, 'EEE M/d', locale); return dateFormat(d, 'EEE M/d', locale);
case 'month': case 'month':
if (w <= 660) { 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: default:
return label; return label;
} }
@ -59,23 +69,27 @@ export default function BarChart({
function renderTooltip(model) { function renderTooltip(model) {
const { opacity, title, body, labelColors } = model; const { opacity, title, body, labelColors } = model;
if (!opacity) { if (!opacity || !title) {
setTooltip(null); setTooltip(null);
} else { return;
const [label, value] = body[0].lines[0].split(':'); }
console.log( const [label, value] = body[0].lines[0].split(':');
+title[0],
new Date(+title[0]),
dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
);
setTooltip({ setTooltip({
title: dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale), title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
value, value,
label, label,
labelColor: labelColors[0].backgroundColor, 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, responsive: true,
responsiveAnimationDuration: 0, responsiveAnimationDuration: 0,
maintainAspectRatio: false, maintainAspectRatio: false,
legend: {
labels: {
fontColor: colors.text,
},
},
scales: { scales: {
xAxes: [ xAxes: [
{ {
@ -107,6 +126,7 @@ export default function BarChart({
callback: renderXLabel, callback: renderXLabel,
minRotation: 0, minRotation: 0,
maxRotation: 0, maxRotation: 0,
fontColor: colors.text,
}, },
gridLines: { gridLines: {
display: false, display: false,
@ -120,6 +140,11 @@ export default function BarChart({
ticks: { ticks: {
callback: renderYLabel, callback: renderYLabel,
beginAtZero: true, beginAtZero: true,
fontColor: colors.text,
},
gridLines: {
color: colors.line,
zeroLineColor: colors.zeroLine,
}, },
stacked, stacked,
}, },
@ -141,8 +166,13 @@ export default function BarChart({
function updateChart() { function updateChart() {
const { options } = chart.current; const { options } = chart.current;
options.legend.labels.fontColor = colors.text;
options.scales.xAxes[0].time.unit = unit; options.scales.xAxes[0].time.unit = unit;
options.scales.xAxes[0].ticks.callback = renderXLabel; 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.animation.duration = animationDuration;
options.tooltips.custom = renderTooltip; options.tooltips.custom = renderTooltip;
@ -158,7 +188,7 @@ export default function BarChart({
updateChart(); updateChart();
} }
} }
}, [datasets, unit, animationDuration, locale]); }, [datasets, unit, animationDuration, locale, theme]);
return ( return (
<> <>

2
components/metrics/BarChart.module.css
View File

@ -3,6 +3,7 @@
} }
.tooltip { .tooltip {
color: var(--msgColor);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
@ -12,7 +13,6 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--gray50);
text-align: center; text-align: center;
} }

3
components/metrics/BrowsersTable.js
View File

@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import { browserFilter } from 'lib/filters'; import { browserFilter } from 'lib/filters';
export default function BrowsersTable({ websiteId, limit, onExpand }) { export default function BrowsersTable({ websiteId, token, limit, onExpand }) {
return ( return (
<MetricsTable <MetricsTable
title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />} title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
type="browser" type="browser"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
token={token}
limit={limit} limit={limit}
dataFilter={browserFilter} dataFilter={browserFilter}
onExpand={onExpand} onExpand={onExpand}

9
components/metrics/CountriesTable.js
View File

@ -3,13 +3,20 @@ import MetricsTable from './MetricsTable';
import { countryFilter, percentFilter } from 'lib/filters'; import { countryFilter, percentFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) { export default function CountriesTable({
websiteId,
token,
limit,
onDataLoad = () => {},
onExpand,
}) {
return ( return (
<MetricsTable <MetricsTable
title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />} title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
type="country" type="country"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
token={token}
limit={limit} limit={limit}
dataFilter={countryFilter} dataFilter={countryFilter}
onDataLoad={data => onDataLoad(percentFilter(data))} onDataLoad={data => onDataLoad(percentFilter(data))}

5
components/metrics/DevicesTable.js
View File

@ -2,16 +2,19 @@ import React from 'react';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import { deviceFilter } from 'lib/filters'; import { deviceFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl'; 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 ( return (
<MetricsTable <MetricsTable
title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />} title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
type="device" type="device"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
token={token}
limit={limit} limit={limit}
dataFilter={deviceFilter} dataFilter={deviceFilter}
renderLabel={({ x }) => getDeviceMessage(x)}
onExpand={onExpand} onExpand={onExpand}
/> />
); );

32
components/metrics/EventsChart.js
View File

@ -1,31 +1,25 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import BarChart from './BarChart'; import BarChart from './BarChart';
import { getTimezone, getDateArray, getDateLength } from 'lib/date'; import { getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch'; 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 = [ export default function EventsChart({ websiteId, token }) {
'#2680eb', const [dateRange] = useDateRange(websiteId);
'#9256d9',
'#44b556',
'#e68619',
'#e34850',
'#1b959a',
'#d83790',
'#85d044',
];
export default function EventsChart({ websiteId }) {
const dateRange = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange; const { startDate, endDate, unit, modified } = dateRange;
const [timezone] = useTimezone();
const { data } = useFetch( const { data } = useFetch(
`/api/website/${websiteId}/events`, `/api/website/${websiteId}/events`,
{ {
start_at: +startDate, start_at: +startDate,
end_at: +endDate, end_at: +endDate,
unit, unit,
tz: getTimezone(), tz: timezone,
token,
}, },
{ update: [modified] }, { update: [modified] },
); );
@ -47,13 +41,13 @@ export default function EventsChart({ websiteId }) {
}); });
return Object.keys(map).map((key, index) => { return Object.keys(map).map((key, index) => {
const color = tinycolor(COLORS[index]); const color = tinycolor(EVENT_COLORS[index]);
return { return {
label: key, label: key,
data: map[key], data: map[key],
lineTension: 0, lineTension: 0,
backgroundColor: color.setAlpha(0.4).toRgbString(), backgroundColor: color.setAlpha(0.6).toRgbString(),
borderColor: color.setAlpha(0.5).toRgbString(), borderColor: color.setAlpha(0.7).toRgbString(),
borderWidth: 1, borderWidth: 1,
}; };
}); });

3
components/metrics/EventsTable.js
View File

@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import styles from './EventsTable.module.css'; import styles from './EventsTable.module.css';
export default function EventsTable({ websiteId, limit, onExpand, onDataLoad }) { export default function EventsTable({ websiteId, token, limit, onExpand, onDataLoad }) {
return ( return (
<MetricsTable <MetricsTable
title={<FormattedMessage id="metrics.events" defaultMessage="Events" />} title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
type="event" type="event"
metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />} metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
websiteId={websiteId} websiteId={websiteId}
token={token}
limit={limit} limit={limit}
renderLabel={({ x }) => <Label value={x} />} renderLabel={({ x }) => <Label value={x} />}
onExpand={onExpand} onExpand={onExpand}

4
components/metrics/MetricCard.module.css
View File

@ -2,8 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
min-width: 120px; min-width: 140px;
margin-right: 20px;
} }
.value { .value {
@ -16,4 +15,5 @@
.label { .label {
font-size: var(--font-size-normal); font-size: var(--font-size-normal);
white-space: nowrap;
} }

7
components/metrics/MetricsBar.js
View File

@ -3,19 +3,20 @@ import { FormattedMessage } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import Loading from 'components/common/Loading'; import Loading from 'components/common/Loading';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import { useDateRange } from 'hooks/useDateRange'; import useDateRange from 'hooks/useDateRange';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format'; import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import MetricCard from './MetricCard'; import MetricCard from './MetricCard';
import styles from './MetricsBar.module.css'; import styles from './MetricsBar.module.css';
export default function MetricsBar({ websiteId, className }) { export default function MetricsBar({ websiteId, token, className }) {
const dateRange = useDateRange(websiteId); const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange; const { startDate, endDate, modified } = dateRange;
const { data } = useFetch( const { data } = useFetch(
`/api/website/${websiteId}/metrics`, `/api/website/${websiteId}/metrics`,
{ {
start_at: +startDate, start_at: +startDate,
end_at: +endDate, end_at: +endDate,
token,
}, },
{ {
update: [modified], update: [modified],

9
components/metrics/MetricsBar.module.css
View File

@ -3,8 +3,15 @@
cursor: pointer; cursor: pointer;
} }
.bar > div + div {
padding-left: 20px;
}
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
.bar > div:last-child { .bar {
justify-content: space-between;
}
.bar > div:nth-child(n + 3) {
display: none; display: none;
} }
} }

10
components/metrics/MetricsTable.js
View File

@ -10,12 +10,13 @@ import useFetch from 'hooks/useFetch';
import Arrow from 'assets/arrow-right.svg'; import Arrow from 'assets/arrow-right.svg';
import { percentFilter } from 'lib/filters'; import { percentFilter } from 'lib/filters';
import { formatNumber, formatLongNumber } from 'lib/format'; import { formatNumber, formatLongNumber } from 'lib/format';
import { useDateRange } from 'hooks/useDateRange'; import useDateRange from 'hooks/useDateRange';
import styles from './MetricsTable.module.css'; import styles from './MetricsTable.module.css';
export default function MetricsTable({ export default function MetricsTable({
websiteId, websiteId,
websiteDomain, websiteDomain,
token,
title, title,
metric, metric,
type, type,
@ -23,12 +24,11 @@ export default function MetricsTable({
dataFilter, dataFilter,
filterOptions, filterOptions,
limit, limit,
headerComponent,
renderLabel, renderLabel,
onDataLoad = () => {}, onDataLoad = () => {},
onExpand = () => {}, onExpand = () => {},
}) { }) {
const dateRange = useDateRange(websiteId); const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange; const { startDate, endDate, modified } = dateRange;
const { data } = useFetch( const { data } = useFetch(
`/api/website/${websiteId}/rankings`, `/api/website/${websiteId}/rankings`,
@ -37,6 +37,7 @@ export default function MetricsTable({
start_at: +startDate, start_at: +startDate,
end_at: +endDate, end_at: +endDate,
domain: websiteDomain, domain: websiteDomain,
token,
}, },
{ onDataLoad, delay: 300, update: [modified] }, { onDataLoad, delay: 300, update: [modified] },
); );
@ -83,7 +84,6 @@ export default function MetricsTable({
<> <>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.title}>{title}</div> <div className={styles.title}>{title}</div>
{headerComponent}
<div className={styles.metric} onClick={handleSetFormat}> <div className={styles.metric} onClick={handleSetFormat}>
{metric} {metric}
</div> </div>
@ -99,7 +99,7 @@ export default function MetricsTable({
)} )}
</div> </div>
<div className={styles.footer}> <div className={styles.footer}>
{limit && data.length > limit && ( {limit && (
<Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}> <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
<div> <div>
<FormattedMessage id="button.more" defaultMessage="More" /> <FormattedMessage id="button.more" defaultMessage="More" />

3
components/metrics/MetricsTable.module.css
View File

@ -2,7 +2,6 @@
position: relative; position: relative;
min-height: 460px; min-height: 460px;
font-size: var(--font-size-small); font-size: var(--font-size-small);
padding: 20px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -74,7 +73,7 @@
position: relative; position: relative;
width: 50px; width: 50px;
color: #6e6e6e; color: #6e6e6e;
border-left: 1px solid var(--gray600); border-left: 1px solid var(--gray500);
padding-left: 10px; padding-left: 10px;
z-index: 1; z-index: 1;
} }

5
components/metrics/OSTable.js
View File

@ -3,13 +3,14 @@ import MetricsTable from './MetricsTable';
import { osFilter } from 'lib/filters'; import { osFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
export default function OSTable({ websiteId, limit, onExpand }) { export default function OSTable({ websiteId, token, limit, onExpand }) {
return ( return (
<MetricsTable <MetricsTable
title={<FormattedMessage id="metrics.operating-system" defaultMessage="Operating system" />} title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
type="os" type="os"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
token={token}
limit={limit} limit={limit}
dataFilter={osFilter} dataFilter={osFilter}
onExpand={onExpand} onExpand={onExpand}

38
components/metrics/PagesTable.js
View File

@ -4,8 +4,9 @@ import ButtonGroup from 'components/common/ButtonGroup';
import { urlFilter } from 'lib/filters'; import { urlFilter } from 'lib/filters';
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants'; import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
import MetricsTable from './MetricsTable'; 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 [filter, setFilter] = useState(FILTER_COMBINED);
const buttons = [ const buttons = [
@ -17,23 +18,28 @@ export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }
]; ];
return ( return (
<MetricsTable <>
title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />} {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
type="url" <MetricsTable
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />} title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
headerComponent={ type="url"
limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} /> metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
} websiteId={websiteId}
websiteId={websiteId} token={token}
limit={limit} limit={limit}
dataFilter={urlFilter} dataFilter={urlFilter}
filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }} filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
renderLabel={({ x }) => decodeURI(x)} renderLabel={({ x }) => decodeURI(x)}
onExpand={onExpand} onExpand={onExpand}
/> />
</>
); );
} }
const FilterButtons = ({ buttons, selected, onClick }) => { 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>
);
}; };

26
components/metrics/PageviewsChart.js
View File

@ -1,10 +1,25 @@
import React from 'react'; import React from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import tinycolor from 'tinycolor2';
import CheckVisible from 'components/helpers/CheckVisible'; import CheckVisible from 'components/helpers/CheckVisible';
import BarChart from './BarChart'; 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 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 handleUpdate = chart => {
const { const {
@ -43,8 +58,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
}), }),
data: data.uniques, data: data.uniques,
lineTension: 0, lineTension: 0,
backgroundColor: 'rgb(38, 128, 235, 0.4)', backgroundColor: colors.visitors.background,
borderColor: 'rgb(13, 102, 208, 0.4)', borderColor: colors.visitors.border,
borderWidth: 1, borderWidth: 1,
}, },
{ {
@ -54,8 +69,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
}), }),
data: data.pageviews, data: data.pageviews,
lineTension: 0, lineTension: 0,
backgroundColor: 'rgb(38, 128, 235, 0.2)', backgroundColor: colors.views.background,
borderColor: 'rgb(13, 102, 208, 0.2)', borderColor: colors.views.border,
borderWidth: 1, borderWidth: 1,
}, },
]} ]}
@ -63,6 +78,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
records={records} records={records}
animationDuration={visible ? 300 : 0} animationDuration={visible ? 300 : 0}
onUpdate={handleUpdate} onUpdate={handleUpdate}
loading={loading}
/> />
)} )}
</CheckVisible> </CheckVisible>

30
components/metrics/QuickButtons.js
View File

@ -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}
/>
);
}

33
components/metrics/QuickButtons.module.css
View File

@ -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;
}
}

60
components/metrics/ReferrersTable.js
View File

@ -4,8 +4,15 @@ import MetricsTable from './MetricsTable';
import { refFilter } from 'lib/filters'; import { refFilter } from 'lib/filters';
import ButtonGroup from 'components/common/ButtonGroup'; import ButtonGroup from 'components/common/ButtonGroup';
import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants'; 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 [filter, setFilter] = useState(FILTER_COMBINED);
const buttons = [ 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 }, { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
]; ];
const renderLink = ({ x: url }) => { const renderLink = ({ w: href, x: url }) => {
return url.startsWith('http') ? ( return (href || url).startsWith('http') ? (
<a href={url} target="_blank" rel="noreferrer"> <a href={href || url} target="_blank" rel="noreferrer">
{decodeURI(url)} {decodeURI(url)}
</a> </a>
) : ( ) : (
@ -31,28 +38,33 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
}; };
return ( return (
<MetricsTable <>
title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />} {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
type="referrer" <MetricsTable
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />} title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
headerComponent={ type="referrer"
limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} /> metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
} websiteId={websiteId}
websiteId={websiteId} websiteDomain={websiteDomain}
websiteDomain={websiteDomain} token={token}
limit={limit} limit={limit}
dataFilter={refFilter} dataFilter={refFilter}
filterOptions={{ filterOptions={{
domain: websiteDomain, domain: websiteDomain,
domainOnly: filter === FILTER_DOMAIN_ONLY, domainOnly: filter === FILTER_DOMAIN_ONLY,
raw: filter === FILTER_RAW, raw: filter === FILTER_RAW,
}} }}
onExpand={onExpand} onExpand={onExpand}
renderLabel={renderLink} renderLabel={renderLink}
/> />
</>
); );
} }
const FilterButtons = ({ buttons, selected, onClick }) => { 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>
);
}; };

45
components/metrics/WebsiteChart.js
View File

@ -1,36 +1,36 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { useDispatch } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import PageviewsChart from './PageviewsChart'; import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar'; import MetricsBar from './MetricsBar';
import QuickButtons from './QuickButtons'; import WebsiteHeader from './WebsiteHeader';
import DateFilter from 'components/common/DateFilter'; import DateFilter from 'components/common/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader'; import StickyHeader from 'components/helpers/StickyHeader';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import { getDateArray, getDateLength, getTimezone } from 'lib/date'; import useDateRange from 'hooks/useDateRange';
import { setDateRange } from 'redux/actions/websites'; import useTimezone from 'hooks/useTimezone';
import { getDateArray, getDateLength } from 'lib/date';
import styles from './WebsiteChart.module.css'; import styles from './WebsiteChart.module.css';
import WebsiteHeader from './WebsiteHeader';
import { useDateRange } from '../../hooks/useDateRange';
export default function WebsiteChart({ export default function WebsiteChart({
websiteId, websiteId,
token,
title, title,
stickyHeader = false, stickyHeader = false,
showLink = false, showLink = false,
onDataLoad = () => {}, onDataLoad = () => {},
}) { }) {
const dispatch = useDispatch(); const [dateRange, setDateRange] = useDateRange(websiteId);
const dateRange = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange; const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
const { data } = useFetch( const { data, loading } = useFetch(
`/api/website/${websiteId}/pageviews`, `/api/website/${websiteId}/pageviews`,
{ {
start_at: +startDate, start_at: +startDate,
end_at: +endDate, end_at: +endDate,
unit, unit,
tz: getTimezone(), tz: timezone,
token,
}, },
{ onDataLoad, update: [modified] }, { onDataLoad, update: [modified] },
); );
@ -45,25 +45,26 @@ export default function WebsiteChart({
return [[], []]; return [[], []];
}, [data]); }, [data]);
function handleDateChange(values) {
dispatch(setDateRange(websiteId, values));
}
return ( return (
<> <>
<WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} /> <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
<div className={classNames(styles.header, 'row')}> <div className={classNames(styles.header, 'row')}>
<StickyHeader <StickyHeader
className={classNames(styles.metrics, 'col row')} className={classNames(styles.metrics, 'col row')}
stickyClassName={styles.sticky} stickyClassName={styles.sticky}
enabled={stickyHeader} enabled={stickyHeader}
> >
<MetricsBar className="col-12 col-md-9 col-lg-10" websiteId={websiteId} /> <div className="col-12 col-lg-9">
<DateFilter <MetricsBar websiteId={websiteId} token={token} />
className="col-12 col-md-3 col-lg-2" </div>
value={value} <div className={classNames(styles.filter, 'col-12 col-lg-3')}>
onChange={handleDateChange} <DateFilter
/> value={value}
startDate={startDate}
endDate={endDate}
onChange={setDateRange}
/>
</div>
</StickyHeader> </StickyHeader>
</div> </div>
<div className="row"> <div className="row">
@ -73,8 +74,8 @@ export default function WebsiteChart({
data={{ pageviews, uniques }} data={{ pageviews, uniques }}
unit={unit} unit={unit}
records={getDateLength(startDate, endDate, unit)} records={getDateLength(startDate, endDate, unit)}
loading={loading}
/> />
<QuickButtons value={value} onChange={handleDateChange} />
</div> </div>
</div> </div>
</> </>

12
components/metrics/WebsiteChart.module.css
View File

@ -29,3 +29,15 @@
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--gray300);
z-index: 3; z-index: 3;
} }
.filter {
display: flex;
justify-content: flex-end;
align-items: center;
}
@media only screen and (max-width: 992px) {
.filter {
display: block;
}
}

35
components/metrics/WebsiteHeader.js
View File

@ -1,37 +1,30 @@
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useRouter } from 'next/router'; import Link from 'components/common/Link';
import PageHeader from 'components/layout/PageHeader'; 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 ActiveUsers from './ActiveUsers';
import Arrow from 'assets/arrow-right.svg'; import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteHeader.module.css'; 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 ( return (
<PageHeader> <PageHeader>
<div className={styles.title}>{title}</div> <div className={styles.title}>{title}</div>
<ActiveUsers className={styles.active} websiteId={websiteId} /> <ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
<ButtonLayout> <ButtonLayout align="right">
<RefreshButton websiteId={websiteId} /> <RefreshButton websiteId={websiteId} />
{showLink && ( {showLink && (
<Button <Link
icon={<Arrow />} href="/website/[...id]"
onClick={() => as={`/website/${websiteId}/${title}`}
router.push('/website/[...id]', `/website/${websiteId}/${title}`, { className={styles.link}
shallow: true,
})
}
size="small"
> >
<div> <FormattedMessage id="button.view-details" defaultMessage="View details" />
<FormattedMessage id="button.view-details" defaultMessage="View details" /> <Icon icon={<Arrow />} size="small" />
</div> </Link>
</Button>
)} )}
</ButtonLayout> </ButtonLayout>
</PageHeader> </PageHeader>

7
components/metrics/WebsiteHeader.module.css
View File

@ -4,8 +4,13 @@
line-height: var(--font-size-large); line-height: var(--font-size-large);
} }
.button { .link {
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: 600;
}
.link svg {
margin-left: 10px;
} }
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {

34
components/settings/AccountSettings.js
View File

@ -1,10 +1,13 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import Link from 'next/link';
import classNames from 'classnames'; import classNames from 'classnames';
import PageHeader from 'components/layout/PageHeader'; import PageHeader from 'components/layout/PageHeader';
import Button from 'components/common/Button'; import Button from 'components/common/Button';
import Icon from 'components/common/Icon'; import Icon from 'components/common/Icon';
import Table from 'components/common/Table'; import Table from 'components/common/Table';
import Modal from 'components/common/Modal'; import Modal from 'components/common/Modal';
import Toast from 'components/common/Toast';
import AccountEditForm from 'components/forms/AccountEditForm'; import AccountEditForm from 'components/forms/AccountEditForm';
import ButtonLayout from 'components/layout/ButtonLayout'; import ButtonLayout from 'components/layout/ButtonLayout';
import DeleteForm from 'components/forms/DeleteForm'; import DeleteForm from 'components/forms/DeleteForm';
@ -13,9 +16,8 @@ import Pen from 'assets/pen.svg';
import Plus from 'assets/plus.svg'; import Plus from 'assets/plus.svg';
import Trash from 'assets/trash.svg'; import Trash from 'assets/trash.svg';
import Check from 'assets/check.svg'; import Check from 'assets/check.svg';
import LinkIcon from 'assets/external-link.svg';
import styles from './AccountSettings.module.css'; import styles from './AccountSettings.module.css';
import Toast from '../common/Toast';
import { FormattedMessage } from 'react-intl';
export default function AccountSettings() { export default function AccountSettings() {
const [addAccount, setAddAccount] = useState(); 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 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 => const Buttons = row =>
row.username !== 'admin' ? ( row.username !== 'admin' ? (
<ButtonLayout> <ButtonLayout align="right">
<Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}> <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
<div> <div>
<FormattedMessage id="button.edit" defaultMessage="Edit" /> <FormattedMessage id="button.edit" defaultMessage="Edit" />
@ -47,16 +58,23 @@ export default function AccountSettings() {
{ {
key: 'username', key: 'username',
label: <FormattedMessage id="label.username" defaultMessage="Username" />, label: <FormattedMessage id="label.username" defaultMessage="Username" />,
className: 'col-6 col-md-4', className: 'col-4 col-md-3',
}, },
{ {
key: 'is_admin', key: 'is_admin',
label: <FormattedMessage id="label.adminsitrator" defaultMessage="Administrator" />, label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
className: 'col-6 col-md-4', className: 'col-4 col-md-3',
render: Checkmark, 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, render: Buttons,
}, },
]; ];
@ -81,7 +99,7 @@ export default function AccountSettings() {
<> <>
<PageHeader> <PageHeader>
<div> <div>
<FormattedMessage id="settings.accounts" defaultMessage="Accounts" /> <FormattedMessage id="label.accounts" defaultMessage="Accounts" />
</div> </div>
<Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}> <Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
<div> <div>

1
components/settings/AccountSettings.module.css
View File

@ -1,4 +1,5 @@
.buttons { .buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex: 1;
} }

26
components/settings/DateRangeSetting.js Normal file
View File

@ -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>
</>
);
}

3
components/settings/DateRangeSetting.module.css Normal file
View File

@ -0,0 +1,3 @@
.button {
margin-left: 10px;
}

40
components/settings/LanguageButton.js Normal file
View File

@ -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}
/>
</>
);
}

23
components/settings/ProfileSettings.js
View File

@ -6,7 +6,10 @@ import Button from 'components/common/Button';
import Modal from 'components/common/Modal'; import Modal from 'components/common/Modal';
import Toast from 'components/common/Toast'; import Toast from 'components/common/Toast';
import ChangePasswordForm from 'components/forms/ChangePasswordForm'; import ChangePasswordForm from 'components/forms/ChangePasswordForm';
import TimezoneSetting from 'components/settings/TimezoneSetting';
import Dots from 'assets/ellipsis-h.svg'; import Dots from 'assets/ellipsis-h.svg';
import styles from './ProfileSettings.module.css';
import DateRangeSetting from './DateRangeSetting';
export default function ProfileSettings() { export default function ProfileSettings() {
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
@ -23,7 +26,7 @@ export default function ProfileSettings() {
<> <>
<PageHeader> <PageHeader>
<div> <div>
<FormattedMessage id="settings.profile" defaultMessage="Profile" /> <FormattedMessage id="label.profile" defaultMessage="Profile" />
</div> </div>
<Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}> <Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}>
<div> <div>
@ -31,14 +34,28 @@ export default function ProfileSettings() {
</div> </div>
</Button> </Button>
</PageHeader> </PageHeader>
<dl> <dl className={styles.list}>
<dt> <dt>
<FormattedMessage id="label.username" defaultMessage="Username" /> <FormattedMessage id="label.username" defaultMessage="Username" />
</dt> </dt>
<dd>{user.username}</dd> <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> </dl>
{changePassword && ( {changePassword && (
<Modal title="Change password"> <Modal
title={<FormattedMessage id="title.change-password" defaultMessage="Change password" />}
>
<ChangePasswordForm <ChangePasswordForm
values={{ user_id }} values={{ user_id }}
onSave={handleSave} onSave={handleSave}

3
components/settings/ProfileSettings.module.css Normal file
View File

@ -0,0 +1,3 @@
.list dd {
display: flex;
}

24
components/settings/Settings.js
View File

@ -1,4 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useRouter } from 'next/router';
import Page from 'components/layout/Page'; import Page from 'components/layout/Page';
import MenuLayout from 'components/layout/MenuLayout'; import MenuLayout from 'components/layout/MenuLayout';
import WebsiteSettings from './WebsiteSettings'; import WebsiteSettings from './WebsiteSettings';
@ -7,33 +8,38 @@ import ProfileSettings from './ProfileSettings';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
const WEBSITES = 1; const WEBSITES = '/settings';
const ACCOUNTS = 2; const ACCOUNTS = '/settings/accounts';
const PROFILE = 3; const PROFILE = '/settings/profile';
export default function Settings() { export default function Settings() {
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
const [option, setOption] = useState(WEBSITES); const [option, setOption] = useState(WEBSITES);
const router = useRouter();
const { pathname } = router;
const menuOptions = [ const menuOptions = [
{ {
label: <FormattedMessage id="settings.websites" defaultMessage="Websites" />, label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
value: WEBSITES, value: WEBSITES,
}, },
{ {
label: <FormattedMessage id="settings.accounts" defaultMessage="Accounts" />, label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
value: ACCOUNTS, value: ACCOUNTS,
hidden: !user.is_admin, hidden: !user.is_admin,
}, },
{ label: <FormattedMessage id="settings.profile" defaultMessage="Profile" />, value: PROFILE }, {
label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
value: PROFILE,
},
]; ];
return ( return (
<Page> <Page>
<MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}> <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
{option === WEBSITES && <WebsiteSettings />} {pathname === WEBSITES && <WebsiteSettings />}
{option === ACCOUNTS && <AccountSettings />} {pathname === ACCOUNTS && <AccountSettings />}
{option === PROFILE && <ProfileSettings />} {pathname === PROFILE && <ProfileSettings />}
</MenuLayout> </MenuLayout>
</Page> </Page>
); );

44
components/settings/ThemeButton.js Normal file
View File

@ -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>
);
}

7
components/settings/ThemeButton.module.css Normal file
View File

@ -0,0 +1,7 @@
.button {
width: 50px;
}
.button svg {
position: absolute;
}

31
components/settings/TimezoneSetting.js Normal file
View File

@ -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>
</>
);
}

8
components/settings/TimezoneSetting.module.css Normal file
View File

@ -0,0 +1,8 @@
.menu {
max-height: 300px;
overflow-y: auto;
}
.button {
margin-left: 10px;
}

41
components/common/UserButton.js → components/settings/UserButton.js
View File

@ -1,18 +1,15 @@
import React, { useState, useRef } from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Menu from './Menu'; import MenuButton from 'components/common/MenuButton';
import Icon from './Icon'; import Icon from 'components/common/Icon';
import useDocumentClick from 'hooks/useDocumentClick';
import User from 'assets/user.svg'; import User from 'assets/user.svg';
import Chevron from 'assets/chevron-down.svg'; import Chevron from 'assets/chevron-down.svg';
import styles from './UserButton.module.css'; import styles from './UserButton.module.css';
export default function UserButton() { export default function UserButton() {
const [showMenu, setShowMenu] = useState(false);
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
const ref = useRef();
const router = useRouter(); const router = useRouter();
const menuOptions = [ const menuOptions = [
@ -27,38 +24,24 @@ export default function UserButton() {
value: 'username', value: 'username',
className: styles.username, className: styles.username,
}, },
{ label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
{ label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' }, { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
]; ];
function handleSelect(value) { function handleSelect(value) {
setShowMenu(false);
if (value === 'logout') { if (value === 'logout') {
router.push('/logout'); router.push('/logout');
} else if (value === 'profile') {
router.push('/settings/profile');
} }
} }
useDocumentClick(e => {
if (!ref.current.contains(e.target)) {
setShowMenu(false);
}
});
return ( return (
<div ref={ref} className={styles.container}> <MenuButton
<div className={styles.button} onClick={() => setShowMenu(state => !state)}> icon={<Icon icon={<User />} size="large" />}
<Icon icon={<User />} size="large" /> value={<Icon icon={<Chevron />} size="small" />}
<Icon icon={<Chevron />} size="small" /> options={menuOptions}
</div> onSelect={handleSelect}
{showMenu && ( />
<Menu
className={styles.menu}
options={menuOptions}
onSelect={handleSelect}
float="bottom"
align="right"
/>
)}
</div>
); );
} }

7
components/settings/UserButton.module.css Normal file
View File

@ -0,0 +1,7 @@
.username {
border-bottom: 1px solid var(--gray500);
}
.username:hover {
background: var(--gray50);
}

22
components/settings/WebsiteSettings.js
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import Link from 'components/common/Link';
import Table from 'components/common/Table'; import Table from 'components/common/Table';
import Button from 'components/common/Button'; import Button from 'components/common/Button';
import PageHeader from 'components/layout/PageHeader'; import PageHeader from 'components/layout/PageHeader';
@ -16,7 +17,7 @@ import Pen from 'assets/pen.svg';
import Trash from 'assets/trash.svg'; import Trash from 'assets/trash.svg';
import Plus from 'assets/plus.svg'; import Plus from 'assets/plus.svg';
import Code from 'assets/code.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 useFetch from 'hooks/useFetch';
import styles from './WebsiteSettings.module.css'; import styles from './WebsiteSettings.module.css';
@ -31,12 +32,12 @@ export default function WebsiteSettings() {
const { data } = useFetch(`/api/websites`, {}, { update: [saved] }); const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
const Buttons = row => ( const Buttons = row => (
<ButtonLayout> <ButtonLayout align="right">
{row.share_id && ( {row.share_id && (
<Button <Button
icon={<Link />} icon={<LinkIcon />}
size="small" 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}`} tooltipId={`button-share-${row.website_id}`}
onClick={() => setShowUrl(row)} onClick={() => setShowUrl(row)}
/> />
@ -45,7 +46,7 @@ export default function WebsiteSettings() {
icon={<Code />} icon={<Code />}
size="small" size="small"
tooltip={ 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}`} tooltipId={`button-code-${row.website_id}`}
onClick={() => setShowCode(row)} onClick={() => setShowCode(row)}
@ -63,11 +64,18 @@ export default function WebsiteSettings() {
</ButtonLayout> </ButtonLayout>
); );
const DetailsLink = ({ website_id, name }) => (
<Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
{name}
</Link>
);
const columns = [ const columns = [
{ {
key: 'name', key: 'name',
label: <FormattedMessage id="label.name" defaultMessage="Name" />, label: <FormattedMessage id="label.name" defaultMessage="Name" />,
className: 'col-6 col-xl-4', className: 'col-6 col-xl-4',
render: DetailsLink,
}, },
{ {
key: 'domain', key: 'domain',
@ -103,7 +111,7 @@ export default function WebsiteSettings() {
<EmptyPlaceholder <EmptyPlaceholder
msg={ msg={
<FormattedMessage <FormattedMessage
id="placeholder.message.no-websites-configured" id="message.no-websites-configured"
defaultMessage="You don't have any websites configured." defaultMessage="You don't have any websites configured."
/> />
} }
@ -120,7 +128,7 @@ export default function WebsiteSettings() {
<> <>
<PageHeader> <PageHeader>
<div> <div>
<FormattedMessage id="settings.websites" defaultMessage="Websites" /> <FormattedMessage id="label.websites" defaultMessage="Websites" />
</div> </div>
<Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}> <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
<div> <div>

2
docker-compose.yml
View File

@ -12,7 +12,7 @@ services:
depends_on: depends_on:
- db - db
db: db:
image: postgres:alpine image: postgres:12-alpine
environment: environment:
POSTGRES_DB: umami POSTGRES_DB: umami
POSTGRES_USER: umami POSTGRES_USER: umami

43
hooks/useDateRange.js
View File

@ -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 { 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') { export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
return useSelector( const dispatch = useDispatch();
state => state.websites[websiteId]?.dateRange || getDateRange(defaultDateRange), 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];
} }

6
hooks/useFetch.js
View File

@ -7,6 +7,7 @@ export default function useFetch(url, params = {}, options = {}) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [data, setData] = useState(); const [data, setData] = useState();
const [error, setError] = useState(); const [error, setError] = useState();
const [loading, setLoadiing] = useState(false);
const keys = Object.keys(params) const keys = Object.keys(params)
.sort() .sort()
.map(key => params[key]); .map(key => params[key]);
@ -14,6 +15,7 @@ export default function useFetch(url, params = {}, options = {}) {
async function loadData() { async function loadData() {
try { try {
setLoadiing(true);
setError(null); setError(null);
const time = performance.now(); const time = performance.now();
const data = await get(url, params); const data = await get(url, params);
@ -25,6 +27,8 @@ export default function useFetch(url, params = {}, options = {}) {
} catch (e) { } catch (e) {
console.error(e); console.error(e);
setError(e); setError(e);
} finally {
setLoadiing(false);
} }
} }
@ -42,5 +46,5 @@ export default function useFetch(url, params = {}, options = {}) {
} }
}, [url, ...keys, ...update]); }, [url, ...keys, ...update]);
return { data, error, loadData }; return { data, error, loading, loadData };
} }

9
hooks/useForceUpdate.js Normal file
View File

@ -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]);
}

11
hooks/useLocale.js
View File

@ -1,13 +1,16 @@
import { useDispatch, useSelector } from 'react-redux'; 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() { export default function useLocale() {
const locale = useSelector(state => state.app.locale); const locale = useSelector(state => state.app.locale);
const dispatch = useDispatch(); const dispatch = useDispatch();
function setLocale(value) { function saveLocale(value) {
dispatch(updateApp({ locale: value })); setItem(LOCALE_CONFIG, value);
dispatch(setLocale(value));
} }
return [locale, setLocale]; return [locale, saveLocale];
} }

21
hooks/useTheme.js Normal file
View File

@ -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];
}

17
hooks/useTimezone.js Normal file
View File

@ -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