m
/
umami
mirror of https://github.com/kremalicious/umami.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial expanded view in details.

This commit is contained in:
Mike Cao 2020-08-09 03:04:48 -07:00
parent b392a51676
commit f535dca7b9
14 changed files with 108 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/Settings.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import Page from 'components/layout/Page';
import MenuLayout from 'components/layout/MenuLayout';
import WebsiteSettings from './WebsiteSettings';
@ -8,21 +8,16 @@ import { useSelector } from 'react-redux';
export default function Settings() {
const user = useSelector(state => state.user);
const [option, setOption] = useState('Websites');
const menuOptions = ['Websites', user.is_admin && 'Accounts', 'Profile'];
return (
<Page>
<MenuLayout menu={menuOptions} selectedOption="Websites">
{option => {
if (option === 'Websites') {
return <WebsiteSettings />;
} else if (option === 'Accounts') {
return <AccountSettings />;
} else if (option === 'Profile') {
return <ProfileSettings />;
}
}}
<MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
{option === 'Websites' && <WebsiteSettings />}
{option === 'Accounts' && <AccountSettings />}
{option === 'Profile' && <ProfileSettings />}
</MenuLayout>
</Page>
);

28
components/WebsiteDetails.js
View File

@ -9,15 +9,18 @@ import { get } from 'lib/web';
import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
import styles from './WebsiteDetails.module.css';
import PageHeader from './layout/PageHeader';
import MenuLayout from './layout/MenuLayout';
const pageviewClasses = 'col-md-12 col-lg-6';
const sessionClasses = 'col-12 col-lg-4';
const menuOptions = ['Pages', 'Referrers', 'Browsers', 'Operating system', 'Devices', 'Countries'];
export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
const [data, setData] = useState();
const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState();
const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
const [expand, setExpand] = useState();
const { startDate, endDate } = dateRange;
async function loadData() {
@ -32,6 +35,14 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
setTimeout(() => setDateRange(values), 300);
}
function handleExpand(title) {
setExpand(title);
}
function handleMenuSelect(title) {
setExpand(title);
}
useEffect(() => {
if (websiteId) {
loadData();
@ -55,7 +66,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
/>
</div>
</div>
{chartLoaded && (
{chartLoaded && !expand && (
<>
<div className={classNames(styles.row, 'row')}>
<div className={pageviewClasses}>
@ -67,6 +78,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={urlFilter}
onExpand={handleExpand}
/>
</div>
<div className={pageviewClasses}>
@ -78,6 +90,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={refFilter(data.domain)}
onExpand={handleExpand}
/>
</div>
</div>
@ -91,6 +104,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={browserFilter}
onExpand={handleExpand}
/>
</div>
<div className={sessionClasses}>
@ -101,6 +115,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
onExpand={handleExpand}
/>
</div>
<div className={sessionClasses}>
@ -112,6 +127,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={deviceFilter}
onExpand={handleExpand}
/>
</div>
</div>
@ -129,11 +145,21 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
endDate={endDate}
dataFilter={countryFilter}
onDataLoad={data => setCountryData(data)}
onExpand={handleExpand}
/>
</div>
</div>
</>
)}
{expand && (
<MenuLayout
className={styles.expand}
menuClassName={styles.menu}
menu={menuOptions}
selectedOption={expand}
onMenuSelect={handleMenuSelect}
/>
)}
</Page>
);
}

8
components/WebsiteDetails.module.css
View File

@ -2,6 +2,14 @@
margin-bottom: 30px;
}
.expand {
border-top: 1px solid var(--gray300);
}
.menu {
font-size: var(--font-size-small);
}
.row {
border-top: 1px solid var(--gray300);
min-height: 430px;

16
components/WebsiteList.js
View File

@ -27,13 +27,15 @@ export default function WebsiteList() {
{data?.map(({ website_id, name }) => (
<div key={website_id} className={styles.website}>
<PageHeader>
<Link
href="/website/[...id]"
as={`/website/${website_id}/${name}`}
className={styles.title}
>
{name}
</Link>
<div>
<Link
href="/website/[...id]"
as={`/website/${website_id}/${name}`}
className={styles.title}
>
{name}
</Link>
</div>
<Button
icon={<Arrow />}
onClick={() =>

3
components/charts/QuickButtons.module.css
View File

@ -1,5 +1,6 @@
.buttons {
display: flex;
align-content: center;
position: absolute;
top: 0;
right: 0;
@ -10,7 +11,7 @@
margin-left: 10px;
}
.button {
.buttons .button {
font-size: var(--font-size-xsmall);
padding: 4px 8px;
}

10
components/charts/RankingsChart.js
View File

@ -1,7 +1,9 @@
import React, { useState, useEffect, useMemo } from 'react';
import { useSpring, animated, config } from 'react-spring';
import classNames from 'classnames';
import CheckVisible from '../helpers/CheckVisible';
import CheckVisible from 'components/helpers/CheckVisible';
import Button from 'components/common/Button';
import Arrow from 'assets/arrow-right.svg';
import { get } from 'lib/web';
import { percentFilter } from 'lib/filters';
import styles from './RankingsChart.module.css';
@ -16,6 +18,7 @@ export default function RankingsChart({
className,
dataFilter,
onDataLoad = () => {},
onExpand = () => {},
}) {
const [data, setData] = useState();
@ -62,6 +65,11 @@ export default function RankingsChart({
<Row key={x} label={x} value={y} percent={z} animate={visible} />
))}
</div>
<div className={styles.footer}>
<Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(title)}>
<div>More</div>
</Button>
</div>
</div>
)}
</CheckVisible>

7
components/charts/RankingsChart.module.css
View File

@ -1,6 +1,6 @@
.container {
position: relative;
min-height: 430px;
min-height: 460px;
font-size: var(--font-size-small);
padding: 20px 0;
display: flex;
@ -90,6 +90,11 @@
transform: translate(-50%, -50%);
}
.footer {
display: flex;
justify-content: center;
}
@media only screen and (max-width: 992px) {
.container {
min-height: auto;

3
components/common/Button.js
View File

@ -16,8 +16,9 @@ export default function Button({
<button
type={type}
className={classNames(styles.button, className, {
[styles.small]: size === 'small',
[styles.large]: size === 'large',
[styles.small]: size === 'small',
[styles.xsmall]: size === 'xsmall',
[styles.action]: variant === 'action',
[styles.danger]: variant === 'danger',
})}

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

@ -20,12 +20,20 @@
margin-left: 10px;
}
.large {
font-size: var(--font-size-large);
}
.medium {
font-size: var(--font-size-normal);
}
.small {
font-size: var(--font-size-small);
}
.large {
font-size: var(--font-size-large);
.xsmall {
font-size: var(--font-size-xsmall);
}
.action {

3
components/common/Icon.js
View File

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

5
components/common/Icon.module.css
View File

@ -32,3 +32,8 @@
width: 12px;
height: 12px;
}
.xsmall > svg {
width: 10px;
height: 10px;
}

32
components/layout/MenuLayout.js
View File

@ -2,26 +2,34 @@ import React, { useState } from 'react';
import classNames from 'classnames';
import styles from './MenuLayout.module.css';
export default function MenuLayout({ menu, selectedOption, onMenuSelect, children }) {
const [option, setOption] = useState(selectedOption);
export default function MenuLayout({
menu,
selectedOption,
onMenuSelect,
className,
menuClassName,
contentClassName,
children,
}) {
function handleMenuSelect(option) {
onMenuSelect(option);
}
return (
<div className={styles.container}>
<div className={styles.menu}>
{menu.map(item =>
item ? (
<div className={classNames(styles.container, className)}>
<div className={classNames(styles.menu, menuClassName)}>
{menu.map(option =>
option ? (
<div
className={classNames(styles.option, { [styles.active]: option === item })}
onClick={() => setOption(item)}
className={classNames(styles.option, { [styles.active]: option === selectedOption })}
onClick={() => handleMenuSelect(option)}
>
{item}
{option}
</div>
) : null,
)}
</div>
<div className={styles.content}>
{typeof children === 'function' ? children(option) : children}
</div>
<div className={classNames(styles.content, contentClassName)}>{children}</div>
</div>
);
}

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

@ -20,7 +20,7 @@
.option {
padding: 8px 16px;
cursor: pointer;
min-width: 140px;
min-width: 160px;
margin-right: 30px;
border-radius: 4px;
}

1
components/layout/PageHeader.module.css
View File

@ -2,6 +2,7 @@
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
line-height: 80px;
font-size: var(--font-size-large);
}