mirror of
https://github.com/kremalicious/umami.git
synced 2024-11-14 17:25:02 +01:00
Updated rankings styling and filters.
This commit is contained in:
parent
65d44ff6a1
commit
e4e7f5b05c
@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.value {
|
||||
padding: 4px 24px 4px 8px;
|
||||
padding: 4px 32px 4px 16px;
|
||||
border: 1px solid #b3b3b3;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
@ -24,12 +24,12 @@
|
||||
|
||||
.option {
|
||||
background: #fff;
|
||||
padding: 4px 8px;
|
||||
padding: 4px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: #eaeaea;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.caret {
|
||||
@ -41,6 +41,6 @@
|
||||
transform: rotate(45deg);
|
||||
top: -4px;
|
||||
bottom: 0;
|
||||
right: 8px;
|
||||
right: 12px;
|
||||
margin: auto;
|
||||
}
|
||||
|
@ -16,7 +16,12 @@ export default function RankingsChart({
|
||||
}) {
|
||||
const [data, setData] = useState();
|
||||
|
||||
const rankings = useMemo(() => (data && dataFilter ? dataFilter(data) : data), [data]);
|
||||
const rankings = useMemo(() => {
|
||||
if (data) {
|
||||
return (dataFilter ? dataFilter(data) : data).filter((e, i) => i < 10);
|
||||
}
|
||||
return [];
|
||||
}, [data]);
|
||||
|
||||
const total = useMemo(() => rankings?.reduce((n, { y }) => n + y, 0) || 0, [rankings]);
|
||||
|
||||
@ -46,13 +51,16 @@ export default function RankingsChart({
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.heading}>{heading}</div>
|
||||
</div>
|
||||
{rankings.map(({ x, y }, i) => (i <= 10 ? <Row label={x} value={y} total={total} /> : null))}
|
||||
{rankings.map(({ x, y }) => (
|
||||
<Row key={x} label={x} value={y} total={total} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Row = ({ label, value, total }) => {
|
||||
const props = useSpring({ width: (value / total) * 100, from: { width: 0 } });
|
||||
const pct = total ? (value / total) * 100 : 0;
|
||||
const props = useSpring({ width: pct, from: { width: 0 } });
|
||||
const valueProps = useSpring({ y: value, from: { y: 0 } });
|
||||
|
||||
return (
|
||||
|
@ -1,7 +1,19 @@
|
||||
.container {
|
||||
position: relative;
|
||||
min-height: 390px;
|
||||
min-height: 430px;
|
||||
font-size: 14px;
|
||||
border-left: 1px solid #e1e1e1;
|
||||
border-top: 1px solid #e1e1e1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.container:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@ -29,6 +41,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -38,6 +51,14 @@
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.label:empty {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.label:empty:before {
|
||||
content: 'Unknown';
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
@ -49,7 +70,7 @@
|
||||
width: 50px;
|
||||
color: #6e6e6e;
|
||||
position: relative;
|
||||
border-left: 1px solid #6e6e6e;
|
||||
border-left: 1px solid #8e8e8e;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
@ -60,4 +81,5 @@
|
||||
height: 30px;
|
||||
opacity: 0.1;
|
||||
background: #2680eb;
|
||||
z-index: -1;
|
||||
}
|
||||
|
@ -6,7 +6,8 @@ import RankingsChart from './RankingsChart';
|
||||
import { getDateRange } from '../lib/date';
|
||||
import styles from './WebsiteDetails.module.css';
|
||||
|
||||
const osFilter = data => data.map(({ x, y }) => ({ x: !x ? 'Unknown' : x, y }));
|
||||
const pageviewClasses = 'col-md-12 col-lg-6';
|
||||
const sessionClasses = 'col-12 col-lg-4';
|
||||
|
||||
const urlFilter = data => data.filter(({ x }) => x !== '' && !x.startsWith('#'));
|
||||
|
||||
@ -48,7 +49,7 @@ const browsers = {
|
||||
chrome: 'Chrome',
|
||||
'chromium-webview': 'Chrome (webview)',
|
||||
phantomjs: 'PhantomJS',
|
||||
crios: 'CriOS',
|
||||
crios: 'Chrome (iOS)',
|
||||
firefox: 'Firefox',
|
||||
fxios: 'Firefox (iOS)',
|
||||
'opera-mini': 'Opera Mini',
|
||||
@ -92,7 +93,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<div className={classNames(styles.chart, 'col')}>
|
||||
<h1>{data.label}</h1>
|
||||
<WebsiteChart websiteId={data.website_id} onDateChange={handleDateChange} />
|
||||
</div>
|
||||
@ -102,7 +103,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
|
||||
title="Top URLs"
|
||||
type="url"
|
||||
heading="Views"
|
||||
className="col-12 col-md-8 col-lg-6"
|
||||
className={pageviewClasses}
|
||||
websiteId={data.website_id}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
@ -112,7 +113,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
|
||||
title="Top referrers"
|
||||
type="referrer"
|
||||
heading="Views"
|
||||
className="col-12 col-md-8 col-lg-6"
|
||||
className={pageviewClasses}
|
||||
websiteId={data.website_id}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
@ -124,7 +125,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
|
||||
title="Browsers"
|
||||
type="browser"
|
||||
heading="Visitors"
|
||||
className="col-12 col-md-8 col-lg-4"
|
||||
className={sessionClasses}
|
||||
websiteId={data.website_id}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
@ -134,17 +135,16 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
|
||||
title="Operating system"
|
||||
type="os"
|
||||
heading="Visitors"
|
||||
className="col-12 col-md-8 col-lg-4"
|
||||
className={sessionClasses}
|
||||
websiteId={data.website_id}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
dataFilter={osFilter}
|
||||
/>
|
||||
<RankingsChart
|
||||
title="Devices"
|
||||
type="screen"
|
||||
heading="Visitors"
|
||||
className="col-12 col-md-8 col-lg-4"
|
||||
className={sessionClasses}
|
||||
websiteId={data.website_id}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
|
@ -1,3 +1,3 @@
|
||||
.row {
|
||||
margin: 20px 0;
|
||||
.chart {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user