Skip to content

Commit

Permalink
Merge pull request #580 from mikecao/dev
Browse files Browse the repository at this point in the history 
v1.16.0
  • Loading branch information
@mikecao
mikecao authored Mar 27, 2021
2 parents f8ac987 + 555cb67 commit ce35a2d
Show file tree
Hide file tree
Showing 33 changed files with 1,303 additions and 304 deletions.
10 changes: 4 additions & 6 deletions components/common/WorldMap.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React, { useState, useMemo } from 'react';
import { useRouter } from 'next/router';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
import classNames from 'classnames';
import tinycolor from 'tinycolor2';
import useTheme from 'hooks/useTheme';
import { THEME_COLORS } from 'lib/constants';
import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
import styles from './WorldMap.module.css';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
import { useRouter } from 'next/router';

const geoUrl = '/world-110m.json';

function WorldMap({ data, className }) {
const { basePath } = useRouter();
Expand Down Expand Up @@ -60,10 +58,10 @@ function WorldMap({ data, className }) {
>
<ComposableMap projection="geoMercator">
<ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
<Geographies geography={`${basePath}${geoUrl}`}>
<Geographies geography={`${basePath}${MAP_FILE}`}>
{({ geographies }) => {
return geographies.map(geo => {
const code = geo.properties.ISO_A2;
const code = ISO_COUNTRIES[geo.id];

return (
<Geography
Expand Down
2 changes: 1 addition & 1 deletion components/forms/WebsiteEditForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
<FormattedMessage id="label.domain" defaultMessage="Domain" />
</label>
<div>
<Field name="domain" type="text" />
<Field name="domain" type="text" placeholder="example.com" />
<FormError name="domain" />
</div>
</FormRow>
Expand Down
76 changes: 51 additions & 25 deletions components/layout/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import classNames from 'classnames';
Expand All @@ -13,40 +13,66 @@ import styles from './Header.module.css';

export default function Header() {
const user = useSelector(state => state.user);
const [active, setActive] = useState(false);

function handleClick() {
setActive(state => !state);
}

return (
<header className="container">
<nav className="container">
{user?.is_admin && <UpdateNotice />}
<div className={classNames(styles.header, 'row align-items-center')}>
<div className="col-6 col-lg-3 order-1 order-lg-1">
<div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
<div className={styles.nav}>
<div className="">
<div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div>
</div>
</div>
<div className="col-12 col-lg-6 order-3 order-lg-2">
<button
onClick={handleClick}
role="button"
className={styles.burger}
aria-label="menu"
aria-expanded="false"
>
{active ? (
<div> X </div>
) : (
<>
<span></span>
<span></span>
<span></span>
</>
)}
</button>
{user && (
<div className={styles.nav}>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
<Link href="/realtime">
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
</Link>
<Link href="/settings">
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
<div className={styles.items}>
<div className={active ? classNames(styles.active) : ''}>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
<Link href="/realtime">
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
</Link>
<Link href="/settings">
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
</div>
</div>
)}
</div>
<div className="col-6 col-lg-3 order-2 order-lg-3">
<div className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />
{user && <UserButton />}
<div className={styles.items}>
<div className={active ? classNames(styles.active) : ''}>
<div className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />
{user && <UserButton />}
</div>
</div>
</div>
</div>
</div>
</header>
</nav>
);
}
87 changes: 84 additions & 3 deletions components/layout/Header.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
.navbar {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}

.burger {
display: none;
}

.header {
display: flex;
min-height: 100px;
width: 100%;
}

.title {
Expand All @@ -15,6 +28,15 @@
}

.nav {
display: flex;
align-items: center;
font-size: var(--font-size-normal);
font-weight: 600;
width: 100%;
justify-content: space-between;
}

.items {
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -35,16 +57,75 @@
@media only screen and (max-width: 992px) {
.nav {
font-size: var(--font-size-large);
justify-content: center;
padding: 20px 0;
justify-content: space-between;
margin: 20px 0;
}
.items {
flex-wrap: wrap;
}
}

@media only screen and (max-width: 576px) {
@media only screen and (max-width: 768px) {
.header {
padding: 0 15px;
}

.nav {
font-size: var(--font-size-normal);
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
position: relative;
}

.items {
display: flex;
justify-content: unset;
align-items: left;
font-size: var(--font-size-normal);
font-weight: 600;
}

.items > div {
display: none;
}

.header .active {
display: inherit;
width: 100%;
}

.items a {
width: 100%;
}

.burger {
display: block;
/* color: #4a4a4a; */
cursor: pointer;
height: 3.25rem;
width: 3.25rem;
margin-left: auto;
position: absolute;
right: 0;
top: 0;
}

.burger span {
transform: translateX(-50%);
padding: 1px 0px;
margin: 6px 0;
width: 20px;
display: block;
background-color: white;
}

.burger div {
height: 100%;
color: white;
text-align: center;
margin: auto;
font-size: 1.5rem;
transform: translateX(-50%);
}
}
8 changes: 0 additions & 8 deletions components/layout/Layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import Header from 'components/layout/Header';
import Footer from 'components/layout/Footer';

export default function Layout({ title, children, header = true, footer = true }) {
const { basePath } = useRouter();

return (
<>
<Head>
<title>umami{title && ` - ${title}`}</title>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
rel="stylesheet"
/>
</Head>
{header && <Header />}
<main className="container">{children}</main>
Expand Down
21 changes: 15 additions & 6 deletions components/metrics/BarChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,26 +40,35 @@ export default function BarChart({
function renderXLabel(label, index, values) {
if (loading) return '';
const d = new Date(values[index].value);
const w = canvas.current.width;
const sw = canvas.current.width / window.devicePixelRatio;

switch (unit) {
case 'minute':
return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
case 'hour':
return dateFormat(d, 'p', locale);
case 'day':
if (records > 31) {
if (w <= 500) {
if (records > 25) {
if (sw <= 275) {
return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
if (sw <= 550) {
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
if (sw <= 700) {
return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
return dateFormat(d, 'MMM d', locale);
}
if (w <= 500) {
if (sw <= 375) {
return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
}
if (sw <= 425) {
return dateFormat(d, 'MMM d', locale);
}
return dateFormat(d, 'EEE M/d', locale);
case 'month':
if (w <= 660) {
if (sw <= 330) {
return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
}
return dateFormat(d, 'MMM', locale);
Expand Down
1 change: 1 addition & 0 deletions components/settings/ThemeButton.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
justify-content: center;
align-items: center;
cursor: pointer;
padding-bottom: 3px;
}

.button svg {
Expand Down
Loading

1 comment on commit ce35a2d

@vercel
Copy link

@vercel vercel bot commented on ce35a2d Mar 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.