mirror of
https://github.com/kremalicious/umami.git
synced 2025-02-14 21:10:34 +01:00
Updated insights report rendering.
This commit is contained in:
Mike Cao
parent
c4bbcf37b7
commit
85c593416a
@ -2,14 +2,14 @@ import { Menu, Item, Form, FormRow } from 'react-basics';
|
||||
import { useMessages } from 'hooks';
|
||||
import styles from './FieldSelectForm.module.css';
|
||||
|
||||
export default function FieldSelectForm({ fields, onSelect }) {
|
||||
export default function FieldSelectForm({ items, onSelect }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FormRow label={formatMessage(labels.fields)}>
|
||||
<Menu className={styles.menu} onSelect={key => onSelect(fields[key])}>
|
||||
{fields.map(({ label, name, type }, index) => {
|
||||
<Menu className={styles.menu} onSelect={key => onSelect(items[key])}>
|
||||
{items.map(({ name, label, type }, index) => {
|
||||
return (
|
||||
<Item key={index} className={styles.item}>
|
||||
<div>{label || name}</div>
|
||||
|
||||
@ -2,11 +2,11 @@ import { useState } from 'react';
|
||||
import FieldSelectForm from './FieldSelectForm';
|
||||
import FieldFilterForm from './FieldFilterForm';
|
||||
|
||||
export default function FilterSelectForm({ fields, onSelect }) {
|
||||
export default function FilterSelectForm({ items, onSelect }) {
|
||||
const [field, setField] = useState();
|
||||
|
||||
if (!field) {
|
||||
return <FieldSelectForm fields={fields} onSelect={setField} />;
|
||||
return <FieldSelectForm items={items} onSelect={setField} />;
|
||||
}
|
||||
|
||||
return <FieldFilterForm name={field.name} type={field.type} onSelect={onSelect} />;
|
||||
|
||||
@ -2,7 +2,6 @@ import { useContext, useRef } from 'react';
|
||||
import { useMessages } from 'hooks';
|
||||
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import { REPORT_PARAMETERS } from 'lib/constants';
|
||||
import Icons from 'components/icons';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import ParameterList from '../ParameterList';
|
||||
@ -16,52 +15,52 @@ export function InsightsParameters() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const ref = useRef(null);
|
||||
const { parameters } = report || {};
|
||||
const { websiteId, dateRange, filters, groups } = parameters || {};
|
||||
const queryEnabled = websiteId && dateRange && (filters?.length || groups?.length);
|
||||
const { websiteId, dateRange, fields, filters } = parameters || {};
|
||||
const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
|
||||
|
||||
const fieldOptions = [
|
||||
{ name: 'url_path', type: 'string', label: formatMessage(labels.url) },
|
||||
{ name: 'page_title', type: 'string', label: formatMessage(labels.pageTitle) },
|
||||
{ name: 'referrer_domain', type: 'string', label: formatMessage(labels.referrer) },
|
||||
{ name: 'url_query', type: 'string', label: formatMessage(labels.query) },
|
||||
{ name: 'browser', type: 'string', label: formatMessage(labels.browser) },
|
||||
{ name: 'os', type: 'string', label: formatMessage(labels.os) },
|
||||
{ name: 'device', type: 'string', label: formatMessage(labels.device) },
|
||||
{ name: 'country', type: 'string', label: formatMessage(labels.country) },
|
||||
{ name: 'region', type: 'string', label: formatMessage(labels.region) },
|
||||
{ name: 'city', type: 'string', label: formatMessage(labels.city) },
|
||||
{ name: 'language', type: 'string', label: formatMessage(labels.language) },
|
||||
{ name: 'url_path', label: formatMessage(labels.url) },
|
||||
{ name: 'page_title', label: formatMessage(labels.pageTitle) },
|
||||
{ name: 'referrer_domain', label: formatMessage(labels.referrer) },
|
||||
{ name: 'url_query', label: formatMessage(labels.query) },
|
||||
{ name: 'browser', label: formatMessage(labels.browser) },
|
||||
{ name: 'os', label: formatMessage(labels.os) },
|
||||
{ name: 'device', label: formatMessage(labels.device) },
|
||||
{ name: 'country', label: formatMessage(labels.country) },
|
||||
{ name: 'region', label: formatMessage(labels.region) },
|
||||
{ name: 'city', label: formatMessage(labels.city) },
|
||||
{ name: 'language', label: formatMessage(labels.language) },
|
||||
];
|
||||
|
||||
const parameterGroups = [
|
||||
{ label: formatMessage(labels.breakdown), group: REPORT_PARAMETERS.groups },
|
||||
{ label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
|
||||
{ id: 'fields', label: formatMessage(labels.fields) },
|
||||
{ id: 'filters', label: formatMessage(labels.filters) },
|
||||
];
|
||||
|
||||
const parameterData = {
|
||||
fields,
|
||||
filters,
|
||||
groups,
|
||||
};
|
||||
|
||||
const handleSubmit = values => {
|
||||
runReport(values);
|
||||
};
|
||||
|
||||
const handleAdd = (group, value) => {
|
||||
const data = parameterData[group];
|
||||
const handleAdd = (id, value) => {
|
||||
const data = parameterData[id];
|
||||
|
||||
if (!data.find(({ name }) => name === value.name)) {
|
||||
updateReport({ parameters: { [group]: data.concat(value) } });
|
||||
updateReport({ parameters: { [id]: data.concat(value) } });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (group, index) => {
|
||||
const data = [...parameterData[group]];
|
||||
const handleRemove = (id, index) => {
|
||||
const data = [...parameterData[id]];
|
||||
data.splice(index, 1);
|
||||
updateReport({ parameters: { [group]: data } });
|
||||
updateReport({ parameters: { [id]: data } });
|
||||
};
|
||||
|
||||
const AddButton = ({ group }) => {
|
||||
const AddButton = ({ id }) => {
|
||||
return (
|
||||
<PopupTrigger>
|
||||
<Icon>
|
||||
@ -71,11 +70,11 @@ export function InsightsParameters() {
|
||||
{(close, element) => {
|
||||
return (
|
||||
<PopupForm element={element} onClose={close}>
|
||||
{group === REPORT_PARAMETERS.groups && (
|
||||
<FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
|
||||
{id === 'fields' && (
|
||||
<FieldSelectForm items={fieldOptions} onSelect={handleAdd.bind(null, id)} />
|
||||
)}
|
||||
{group === REPORT_PARAMETERS.filters && (
|
||||
<FilterSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
|
||||
{id === 'filters' && (
|
||||
<FilterSelectForm items={fieldOptions} onSelect={handleAdd.bind(null, id)} />
|
||||
)}
|
||||
</PopupForm>
|
||||
);
|
||||
@ -88,22 +87,19 @@ export function InsightsParameters() {
|
||||
return (
|
||||
<Form ref={ref} values={parameters} onSubmit={handleSubmit}>
|
||||
<BaseParameters />
|
||||
{parameterGroups.map(({ label, group }) => {
|
||||
{parameterGroups.map(({ id, label }) => {
|
||||
return (
|
||||
<FormRow key={label} label={label} action={<AddButton group={group} onAdd={handleAdd} />}>
|
||||
<ParameterList
|
||||
items={parameterData[group]}
|
||||
onRemove={index => handleRemove(group, index)}
|
||||
>
|
||||
<FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
|
||||
<ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
|
||||
{({ value, label }) => {
|
||||
return (
|
||||
<div className={styles.parameter}>
|
||||
{group === REPORT_PARAMETERS.groups && (
|
||||
{id === 'fields' && (
|
||||
<>
|
||||
<div>{label}</div>
|
||||
</>
|
||||
)}
|
||||
{group === REPORT_PARAMETERS.filters && (
|
||||
{id === 'filters' && (
|
||||
<>
|
||||
<div>{label}</div>
|
||||
<div className={styles.op}>{value[0]}</div>
|
||||
|
||||
@ -1,29 +1,42 @@
|
||||
import { useContext } from 'react';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { GridTable, GridColumn } from 'react-basics';
|
||||
import { useFormat, useMessages } from 'hooks';
|
||||
import { ReportContext } from '../Report';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
|
||||
export function InsightsTable() {
|
||||
const [fields, setFields] = useState();
|
||||
const { report } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { groups = [] } = report?.parameters || {};
|
||||
const { formatValue } = useFormat();
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
setFields(report?.parameters?.fields);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[report?.data],
|
||||
);
|
||||
|
||||
if (!fields) {
|
||||
return <EmptyPlaceholder />;
|
||||
}
|
||||
|
||||
return (
|
||||
<GridTable data={report?.data || []}>
|
||||
{groups.map(({ name, label }) => {
|
||||
{fields.map(({ name, label }) => {
|
||||
return (
|
||||
<GridColumn key={name} name={name} label={label}>
|
||||
{row => formatValue(row[name], name)}
|
||||
</GridColumn>
|
||||
);
|
||||
})}
|
||||
<GridColumn name="views" label={formatMessage(labels.views)} width="100px">
|
||||
{row => row.views.toLocaleString()}
|
||||
</GridColumn>
|
||||
<GridColumn name="visitors" label={formatMessage(labels.visitors)} width="100px">
|
||||
{row => row.visitors.toLocaleString()}
|
||||
</GridColumn>
|
||||
<GridColumn name="views" label={formatMessage(labels.views)} width="100px">
|
||||
{row => row.views.toLocaleString()}
|
||||
</GridColumn>
|
||||
</GridTable>
|
||||
);
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ export default async (
|
||||
const {
|
||||
websiteId,
|
||||
dateRange: { startDate, endDate },
|
||||
groups,
|
||||
fields,
|
||||
filters,
|
||||
} = req.body;
|
||||
|
||||
@ -35,7 +35,7 @@ export default async (
|
||||
return unauthorized(res);
|
||||
}
|
||||
|
||||
const data = await getInsights(websiteId, groups, {
|
||||
const data = await getInsights(websiteId, fields, {
|
||||
...filters,
|
||||
startDate: new Date(startDate),
|
||||
endDate: new Date(endDate),
|
||||
|
||||
@ -5,7 +5,7 @@ import { EVENT_TYPE } from 'lib/constants';
|
||||
import { QueryFilters } from 'lib/types';
|
||||
|
||||
export async function getInsights(
|
||||
...args: [websiteId: string, groups: { name: string; type: string }[], filters: QueryFilters]
|
||||
...args: [websiteId: string, fields: { name: string; type?: string }[], filters: QueryFilters]
|
||||
) {
|
||||
return runQuery({
|
||||
[PRISMA]: () => relationalQuery(...args),
|
||||
@ -15,7 +15,7 @@ export async function getInsights(
|
||||
|
||||
async function relationalQuery(
|
||||
websiteId: string,
|
||||
groups: { name: string; type: string }[],
|
||||
fields: { name: string; type?: string }[],
|
||||
filters: QueryFilters,
|
||||
): Promise<
|
||||
{
|
||||
@ -49,7 +49,7 @@ async function relationalQuery(
|
||||
|
||||
async function clickhouseQuery(
|
||||
websiteId: string,
|
||||
groups: { name: string; type: string }[],
|
||||
fields: { name: string; type?: string }[],
|
||||
filters: QueryFilters,
|
||||
): Promise<
|
||||
{
|
||||
@ -66,14 +66,14 @@ async function clickhouseQuery(
|
||||
return rawQuery(
|
||||
`
|
||||
select
|
||||
${parseFields(groups)}
|
||||
${parseFields(fields)}
|
||||
from website_event
|
||||
where website_id = {websiteId:UUID}
|
||||
and created_at between {startDate:DateTime} and {endDate:DateTime}
|
||||
and event_type = {eventType:UInt32}
|
||||
${filterQuery}
|
||||
group by ${groups.map(({ name }) => name).join(',')}
|
||||
order by 1 desc
|
||||
group by ${fields.map(({ name }) => name).join(',')}
|
||||
order by 1 desc, 2 desc
|
||||
limit 500
|
||||
`,
|
||||
params,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user