mirror of
https://github.com/umami-software/umami.git
synced 2026-02-12 16:45:35 +01:00
Fixed label display on metrics. Removed compare for all time.
This commit is contained in:
parent
cfe2389b8e
commit
7b0b11ffaa
8 changed files with 23 additions and 18 deletions
|
|
@ -47,7 +47,7 @@ export default function WebsiteChartList({
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</WebsiteHeader>
|
</WebsiteHeader>
|
||||||
<WebsiteMetricsBar websiteId={id} showFilter={false} />
|
<WebsiteMetricsBar websiteId={id} />
|
||||||
{showCharts && <WebsiteChart websiteId={id} />}
|
{showCharts && <WebsiteChart websiteId={id} />}
|
||||||
</div>
|
</div>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ export default function WebsiteDetailsPage({ websiteId }: { websiteId: string })
|
||||||
<WebsiteProvider websiteId={websiteId}>
|
<WebsiteProvider websiteId={websiteId}>
|
||||||
<WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
|
<WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
|
||||||
<FilterTags websiteId={websiteId} params={params} />
|
<FilterTags websiteId={websiteId} params={params} />
|
||||||
<WebsiteMetricsBar websiteId={websiteId} showChange={true} sticky={true} />
|
<WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} sticky={true} />
|
||||||
<WebsiteChart websiteId={websiteId} />
|
<WebsiteChart websiteId={websiteId} />
|
||||||
{!view && <WebsiteTableView websiteId={websiteId} />}
|
{!view && <WebsiteTableView websiteId={websiteId} />}
|
||||||
{view && <WebsiteExpandedView websiteId={websiteId} />}
|
{view && <WebsiteExpandedView websiteId={websiteId} />}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useMessages, useSticky } from 'components/hooks';
|
import { useDateRange, useMessages, useSticky } from 'components/hooks';
|
||||||
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
|
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
|
||||||
import MetricCard from 'components/metrics/MetricCard';
|
import MetricCard from 'components/metrics/MetricCard';
|
||||||
import MetricsBar from 'components/metrics/MetricsBar';
|
import MetricsBar from 'components/metrics/MetricsBar';
|
||||||
|
|
@ -15,12 +15,15 @@ export function WebsiteMetricsBar({
|
||||||
sticky,
|
sticky,
|
||||||
showChange = false,
|
showChange = false,
|
||||||
compareMode = false,
|
compareMode = false,
|
||||||
|
showFilter = false,
|
||||||
}: {
|
}: {
|
||||||
websiteId: string;
|
websiteId: string;
|
||||||
sticky?: boolean;
|
sticky?: boolean;
|
||||||
showChange?: boolean;
|
showChange?: boolean;
|
||||||
compareMode?: boolean;
|
compareMode?: boolean;
|
||||||
|
showFilter?: boolean;
|
||||||
}) {
|
}) {
|
||||||
|
const { dateRange } = useDateRange(websiteId);
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const dateCompare = useStore(state => state[websiteId]?.dateCompare);
|
const dateCompare = useStore(state => state[websiteId]?.dateCompare);
|
||||||
const { ref, isSticky } = useSticky({ enabled: sticky });
|
const { ref, isSticky } = useSticky({ enabled: sticky });
|
||||||
|
|
@ -28,6 +31,7 @@ export function WebsiteMetricsBar({
|
||||||
websiteId,
|
websiteId,
|
||||||
compareMode && dateCompare,
|
compareMode && dateCompare,
|
||||||
);
|
);
|
||||||
|
const isAllTime = dateRange.value === 'all';
|
||||||
|
|
||||||
const { pageviews, visitors, visits, bounces, totaltime } = data || {};
|
const { pageviews, visitors, visits, bounces, totaltime } = data || {};
|
||||||
|
|
||||||
|
|
@ -97,16 +101,16 @@ export function WebsiteMetricsBar({
|
||||||
change={change}
|
change={change}
|
||||||
formatValue={formatValue}
|
formatValue={formatValue}
|
||||||
reverseColors={reverseColors}
|
reverseColors={reverseColors}
|
||||||
showChange={compareMode || showChange}
|
showChange={!isAllTime && (compareMode || showChange)}
|
||||||
showPrevious={compareMode}
|
showPrevious={!isAllTime && compareMode}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</MetricsBar>
|
</MetricsBar>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.actions}>
|
<div className={styles.actions}>
|
||||||
<WebsiteFilterButton websiteId={websiteId} />
|
{showFilter && <WebsiteFilterButton websiteId={websiteId} />}
|
||||||
<WebsiteDateFilter websiteId={websiteId} />
|
<WebsiteDateFilter websiteId={websiteId} showAllTime={false} />
|
||||||
{compareMode && (
|
{compareMode && (
|
||||||
<div className={styles.vs}>
|
<div className={styles.vs}>
|
||||||
<b>VS</b>
|
<b>VS</b>
|
||||||
|
|
|
||||||
|
|
@ -14,25 +14,21 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
|
||||||
className={styles.card}
|
className={styles.card}
|
||||||
label={formatMessage(labels.views)}
|
label={formatMessage(labels.views)}
|
||||||
value={pageviews?.length}
|
value={pageviews?.length}
|
||||||
showChange
|
|
||||||
/>
|
/>
|
||||||
<MetricCard
|
<MetricCard
|
||||||
className={styles.card}
|
className={styles.card}
|
||||||
label={formatMessage(labels.visitors)}
|
label={formatMessage(labels.visitors)}
|
||||||
value={visitors?.length}
|
value={visitors?.length}
|
||||||
showChange
|
|
||||||
/>
|
/>
|
||||||
<MetricCard
|
<MetricCard
|
||||||
className={styles.card}
|
className={styles.card}
|
||||||
label={formatMessage(labels.events)}
|
label={formatMessage(labels.events)}
|
||||||
value={events?.length}
|
value={events?.length}
|
||||||
showChange
|
|
||||||
/>
|
/>
|
||||||
<MetricCard
|
<MetricCard
|
||||||
className={styles.card}
|
className={styles.card}
|
||||||
label={formatMessage(labels.countries)}
|
label={formatMessage(labels.countries)}
|
||||||
value={countries?.length}
|
value={countries?.length}
|
||||||
showChange
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,13 @@ import DateFilter from './DateFilter';
|
||||||
import styles from './WebsiteDateFilter.module.css';
|
import styles from './WebsiteDateFilter.module.css';
|
||||||
import { DateRange } from 'lib/types';
|
import { DateRange } from 'lib/types';
|
||||||
|
|
||||||
export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
|
export function WebsiteDateFilter({
|
||||||
|
websiteId,
|
||||||
|
showAllTime = true,
|
||||||
|
}: {
|
||||||
|
websiteId: string;
|
||||||
|
showAllTime?: boolean;
|
||||||
|
}) {
|
||||||
const { dir } = useLocale();
|
const { dir } = useLocale();
|
||||||
const { dateRange, saveDateRange } = useDateRange(websiteId);
|
const { dateRange, saveDateRange } = useDateRange(websiteId);
|
||||||
const { value, startDate, endDate, offset } = dateRange;
|
const { value, startDate, endDate, offset } = dateRange;
|
||||||
|
|
@ -30,7 +36,7 @@ export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
|
||||||
endDate={endDate}
|
endDate={endDate}
|
||||||
offset={offset}
|
offset={offset}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
showAllTime={true}
|
showAllTime={showAllTime}
|
||||||
/>
|
/>
|
||||||
{value !== 'all' && !value.startsWith('range') && (
|
{value !== 'all' && !value.startsWith('range') && (
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { Website, Session } from '@prisma/client';
|
||||||
import redis from '@umami/redis-client';
|
import redis from '@umami/redis-client';
|
||||||
|
|
||||||
export async function fetchWebsite(websiteId: string): Promise<Website> {
|
export async function fetchWebsite(websiteId: string): Promise<Website> {
|
||||||
let website;
|
let website = null;
|
||||||
|
|
||||||
if (redis.enabled) {
|
if (redis.enabled) {
|
||||||
website = await redis.client.fetch(`website:${websiteId}`, () => getWebsite(websiteId), 86400);
|
website = await redis.client.fetch(`website:${websiteId}`, () => getWebsite(websiteId), 86400);
|
||||||
|
|
@ -19,7 +19,7 @@ export async function fetchWebsite(websiteId: string): Promise<Website> {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchSession(sessionId: string): Promise<Session> {
|
export async function fetchSession(sessionId: string): Promise<Session> {
|
||||||
let session;
|
let session = null;
|
||||||
|
|
||||||
if (redis.enabled) {
|
if (redis.enabled) {
|
||||||
session = await redis.client.fetch(`session:${sessionId}`, () => getSession(sessionId), 86400);
|
session = await redis.client.fetch(`session:${sessionId}`, () => getSession(sessionId), 86400);
|
||||||
|
|
|
||||||
|
|
@ -144,7 +144,6 @@ export default async (req: NextApiRequestCollect, res: NextApiResponse) => {
|
||||||
eventData: data,
|
eventData: data,
|
||||||
...session,
|
...session,
|
||||||
sessionId: session.id,
|
sessionId: session.id,
|
||||||
visitId: session.visitId,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -172,8 +172,8 @@ async function clickhouseQuery(
|
||||||
startDate,
|
startDate,
|
||||||
endDate,
|
endDate,
|
||||||
},
|
},
|
||||||
).then(a => {
|
).then(result => {
|
||||||
return Object.values(a).map(a => {
|
return Object.values(result).map((a: any) => {
|
||||||
return {
|
return {
|
||||||
date: a.date,
|
date: a.date,
|
||||||
day: Number(a.day),
|
day: Number(a.day),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue