mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-30 21:51:59 +02:00
Change date filter format.
This commit is contained in:
parent
efdbd1c632
commit
0c8d9eacd3
|
@ -1,10 +1,10 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { getDateRange } from 'lib/date';
|
import { getDateRange } from 'lib/date';
|
||||||
|
|
||||||
const filterOptions = ['24h', '7d', '30d'];
|
const filterOptions = ['24hour', '7day', '30day', '60day', '90day'];
|
||||||
|
|
||||||
export default function DateFilter({ onChange }) {
|
export default function DateFilter({ onChange }) {
|
||||||
const [selected, setSelected] = useState('7d');
|
const [selected, setSelected] = useState('7day');
|
||||||
|
|
||||||
function handleChange(e) {
|
function handleChange(e) {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
|
@ -15,7 +15,7 @@ export default function DateFilter({ onChange }) {
|
||||||
return (
|
return (
|
||||||
<select value={selected} onChange={handleChange}>
|
<select value={selected} onChange={handleChange}>
|
||||||
{filterOptions.map(option => (
|
{filterOptions.map(option => (
|
||||||
<option key={option} name={option}>
|
<option key={option} value={option}>
|
||||||
{option}
|
{option}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -11,10 +11,11 @@ export default function PageviewsChart({ data, unit }) {
|
||||||
const renderLabel = useCallback(
|
const renderLabel = useCallback(
|
||||||
(label, index, values) => {
|
(label, index, values) => {
|
||||||
const d = new Date(values[index].value);
|
const d = new Date(values[index].value);
|
||||||
|
const n = data.pageviews.length;
|
||||||
switch (unit) {
|
switch (unit) {
|
||||||
case 'day':
|
case 'day':
|
||||||
if (data.pageviews.length > 7) {
|
if (n > 7) {
|
||||||
return index % 2 !== 0 ? format(d, 'MMM d') : '';
|
return index % (n / 15) === 0 ? format(d, 'MMM d') : '';
|
||||||
}
|
}
|
||||||
return format(d, 'EEE M/d');
|
return format(d, 'EEE M/d');
|
||||||
default:
|
default:
|
||||||
|
|
|
@ -2,11 +2,12 @@ import React, { useState, useEffect } from 'react';
|
||||||
import { get } from 'lib/web';
|
import { get } from 'lib/web';
|
||||||
import WebsiteStats from './WebsiteStats';
|
import WebsiteStats from './WebsiteStats';
|
||||||
import DateFilter from './DateFilter';
|
import DateFilter from './DateFilter';
|
||||||
import { getDateRange } from '../lib/date';
|
import { getDateRange } from 'lib/date';
|
||||||
|
import styles from './WebsiteList.module.css';
|
||||||
|
|
||||||
export default function WebsiteList() {
|
export default function WebsiteList() {
|
||||||
const [data, setData] = useState();
|
const [data, setData] = useState();
|
||||||
const [dateRange, setDateRange] = useState(getDateRange('7d'));
|
const [dateRange, setDateRange] = useState(getDateRange('7day'));
|
||||||
const { startDate, endDate, unit } = dateRange;
|
const { startDate, endDate, unit } = dateRange;
|
||||||
|
|
||||||
async function loadData() {
|
async function loadData() {
|
||||||
|
@ -22,19 +23,18 @@ export default function WebsiteList() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.container}>
|
||||||
<DateFilter onChange={handleDateChange} />
|
<DateFilter onChange={handleDateChange} />
|
||||||
{data &&
|
{data &&
|
||||||
data.websites.map(({ website_id, label }) => (
|
data.websites.map(({ website_id, label }) => (
|
||||||
<div key={website_id}>
|
<WebsiteStats
|
||||||
<h2>{label}</h2>
|
key={website_id}
|
||||||
<WebsiteStats
|
title={label}
|
||||||
websiteId={website_id}
|
websiteId={website_id}
|
||||||
startDate={startDate}
|
startDate={startDate}
|
||||||
endDate={endDate}
|
endDate={endDate}
|
||||||
unit={unit}
|
unit={unit}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
3
components/WebsiteList.module.css
Normal file
3
components/WebsiteList.module.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.container > div {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
|
@ -3,8 +3,9 @@ import PageviewsChart from './PageviewsChart';
|
||||||
import { get } from 'lib/web';
|
import { get } from 'lib/web';
|
||||||
import { getDateArray, getTimezone } from 'lib/date';
|
import { getDateArray, getTimezone } from 'lib/date';
|
||||||
import WebsiteSummary from './WebsiteSummary';
|
import WebsiteSummary from './WebsiteSummary';
|
||||||
|
import styles from './WebsiteStats.module.css';
|
||||||
|
|
||||||
export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
|
export default function WebsiteStats({ title, websiteId, startDate, endDate, unit }) {
|
||||||
const [data, setData] = useState();
|
const [data, setData] = useState();
|
||||||
const [pageviews, uniques] = useMemo(() => {
|
const [pageviews, uniques] = useMemo(() => {
|
||||||
if (data) {
|
if (data) {
|
||||||
|
@ -32,7 +33,8 @@ export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
|
||||||
}, [websiteId, startDate, endDate, unit]);
|
}, [websiteId, startDate, endDate, unit]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.container}>
|
||||||
|
<div className={styles.title}>{title}</div>
|
||||||
<WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
|
<WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
|
||||||
<PageviewsChart data={{ pageviews, uniques }} unit={unit} />
|
<PageviewsChart data={{ pageviews, uniques }} unit={unit} />
|
||||||
</div>
|
</div>
|
||||||
|
|
10
components/WebsiteStats.module.css
Normal file
10
components/WebsiteStats.module.css
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 60px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
22
lib/date.js
22
lib/date.js
|
@ -30,24 +30,20 @@ export function getDateRange(value) {
|
||||||
const hour = endOfHour(now);
|
const hour = endOfHour(now);
|
||||||
const day = endOfDay(now);
|
const day = endOfDay(now);
|
||||||
|
|
||||||
switch (value) {
|
const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day)$/).groups;
|
||||||
case '7d':
|
|
||||||
|
switch (unit) {
|
||||||
|
case 'day':
|
||||||
return {
|
return {
|
||||||
startDate: subDays(day, 7),
|
startDate: subDays(day, num),
|
||||||
endDate: day,
|
endDate: day,
|
||||||
unit: 'day',
|
unit,
|
||||||
};
|
};
|
||||||
case '30d':
|
case 'hour':
|
||||||
return {
|
return {
|
||||||
startDate: subDays(day, 30),
|
startDate: subHours(hour, num),
|
||||||
endDate: day,
|
|
||||||
unit: 'day',
|
|
||||||
};
|
|
||||||
default:
|
|
||||||
return {
|
|
||||||
startDate: subHours(hour, 24),
|
|
||||||
endDate: hour,
|
endDate: hour,
|
||||||
unit: 'hour',
|
unit,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user