watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

More updates to event data report.

Browse source
This commit is contained in:
Mike Cao 2023-07-04 22:51:23 -07:00
parent 7c467db27e
commit 2f4d669836
13 changed files with 202 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/messages.js
View file

@ -137,7 +137,7 @@ export const labels = defineMessages({
untitled: { id: 'labels.untitled', defaultMessage: 'Untitled' },
type: { id: 'labels.type', defaultMessage: 'Type' },
filters: { id: 'labels.filters', defaultMessage: 'Filters' },
groupBy: { id: 'labels.group-by', defaultMessage: 'Group by' },
breakdown: { id: 'labels.breakdown', defaultMessage: 'Breakdown' },
true: { id: 'labels.true', defaultMessage: 'True' },
false: { id: 'labels.false', defaultMessage: 'False' },
equals: { id: 'labels.equals', defaultMessage: 'Equals' },
@ -150,6 +150,13 @@ export const labels = defineMessages({
doesNotContain: { id: 'labels.does-not-contain', defaultMessage: 'Does not contain' },
before: { id: 'labels.before', defaultMessage: 'Before' },
after: { id: 'labels.after', defaultMessage: 'After' },
total: { id: 'labels.total', defaultMessage: 'Total' },
sum: { id: 'labels.sum', defaultMessage: 'Sum' },
average: { id: 'labels.average', defaultMessage: 'Average' },
min: { id: 'labels.min', defaultMessage: 'Min' },
max: { id: 'labels.max', defaultMessage: 'Max' },
unique: { id: 'labels.unique', defaultMessage: 'Unique' },
value: { id: 'labels.value', defaultMessage: 'Value' },
});
export const messages = defineMessages({

39
components/pages/reports/FieldAggregateForm.js
View file

@ -1,27 +1,30 @@
import { Form, FormRow, Menu, Item } from 'react-basics';
const options = {
number: [
{ label: 'SUM', value: 'sum' },
{ label: 'AVERAGE', value: 'average' },
{ label: 'MIN', value: 'min' },
{ label: 'MAX', value: 'max' },
],
date: [
{ label: 'MIN', value: 'min' },
{ label: 'MAX', value: 'max' },
],
string: [
{ label: 'COUNT', value: 'count' },
{ label: 'DISTINCT', value: 'distinct' },
],
};
import { useMessages } from 'hooks';
export default function FieldAggregateForm({ name, type, onSelect }) {
const { formatMessage, labels } = useMessages();
const options = {
number: [
{ label: formatMessage(labels.sum), value: 'sum' },
{ label: formatMessage(labels.average), value: 'average' },
{ label: formatMessage(labels.min), value: 'min' },
{ label: formatMessage(labels.max), value: 'max' },
],
date: [
{ label: formatMessage(labels.min), value: 'min' },
{ label: formatMessage(labels.max), value: 'max' },
],
string: [
{ label: formatMessage(labels.total), value: 'total' },
{ label: formatMessage(labels.unique), value: 'unique' },
],
};
const items = options[type];
const handleSelect = value => {
onSelect({ name, value });
onSelect({ name, type, value });
};
return (

4
components/pages/reports/FieldFilterForm.js
View file

@ -17,7 +17,7 @@ export default function FieldFilterForm({ name, type, onSelect }) {
return (
<Form>
<FormRow label={name}>
<Menu onSelect={value => onSelect({ name, value: ['eq', value] })}>
<Menu onSelect={value => onSelect({ name, type, value: ['eq', value] })}>
{items.map(value => {
return <Item key={value}>{filters[value]}</Item>;
})}
@ -46,7 +46,7 @@ export default function FieldFilterForm({ name, type, onSelect }) {
</Flexbox>
<Button
variant="primary"
onClick={() => onSelect({ name, value: [filter, value] })}
onClick={() => onSelect({ name, type, value: [filter, value] })}
disabled={!filter || !value}
>
Add

2
components/pages/reports/FieldFilterForm.module.css
View file

@ -13,5 +13,5 @@
}
.dropdown {
min-width: 60px;
min-width: 180px;
}

4
components/pages/reports/ParameterList.js
View file

@ -1,4 +1,4 @@
import { Icon, Text, TooltipPopup } from 'react-basics';
import { Icon, TooltipPopup } from 'react-basics';
import Icons from 'components/icons';
import Empty from 'components/common/Empty';
import { useMessages } from 'hooks';
@ -13,7 +13,7 @@ export function ParameterList({ items = [], children, onRemove }) {
{items.map((item, index) => {
return (
<div key={index} className={styles.item}>
<Text>{typeof children === 'function' ? children(item) : item}</Text>
{typeof children === 'function' ? children(item) : item}
<TooltipPopup
className={styles.icon}
label={formatMessage(labels.remove)}

1
components/pages/reports/ParameterList.module.css
View file

@ -13,6 +13,7 @@
border: 1px solid var(--base400);
border-radius: var(--border-radius);
box-shadow: 1px 1px 1px var(--base400);
gap: 10px;
}
.icon {

57
components/pages/reports/event-data/EventDataParameters.js
View file

@ -3,11 +3,11 @@ import { useApi, useMessages } from 'hooks';
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
import { ReportContext } from 'components/pages/reports/Report';
import Empty from 'components/common/Empty';
import { DATA_TYPES } from 'lib/constants';
import BaseParameters from '../BaseParameters';
import FieldAddForm from './FieldAddForm';
import ParameterList from '../ParameterList';
import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
import Icons from 'components/icons';
import FieldAddForm from './FieldAddForm';
import BaseParameters from '../BaseParameters';
import ParameterList from '../ParameterList';
import styles from './EventDataParameters.module.css';
function useFields(websiteId, startDate, endDate) {
@ -33,15 +33,15 @@ export function EventDataParameters() {
const { parameters } = report || {};
const { websiteId, dateRange, fields, filters, groups } = parameters || {};
const { startDate, endDate } = dateRange || {};
const queryDisabled = !websiteId || !dateRange;
const queryEnabled = websiteId && dateRange && fields?.length;
const { data, error } = useFields(websiteId, startDate, endDate);
const parametersSelected = websiteId && startDate && endDate;
const hasData = data?.length !== 0;
const parameterGroups = [
{ label: formatMessage(labels.fields), type: 'fields' },
{ label: formatMessage(labels.filters), type: 'filters' },
{ label: formatMessage(labels.groupBy), type: 'groups' },
{ label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
{ label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
{ label: formatMessage(labels.breakdown), group: REPORT_PARAMETERS.groups },
];
const parameterData = {
@ -54,18 +54,21 @@ export function EventDataParameters() {
runReport(values);
};
const handleAdd = (type, value) => {
const data = parameterData[type];
updateReport({ parameters: { [type]: data.concat(value) } });
const handleAdd = (group, value) => {
const data = parameterData[group];
if (!data.find(({ name }) => name === value.name)) {
updateReport({ parameters: { [group]: data.concat(value) } });
}
};
const handleRemove = (type, index) => {
const data = [...parameterData[type]];
const handleRemove = (group, index) => {
const data = [...parameterData[group]];
data.splice(index, 1);
updateReport({ parameters: { [type]: data } });
updateReport({ parameters: { [group]: data } });
};
const AddButton = ({ type }) => {
const AddButton = ({ group }) => {
return (
<PopupTrigger>
<Icon>
@ -75,11 +78,11 @@ export function EventDataParameters() {
{(close, element) => {
return (
<FieldAddForm
type={type}
fields={data.map(({ eventKey, eventDataType }) => ({
name: eventKey,
type: DATA_TYPES[eventDataType],
}))}
group={group}
element={element}
onAdd={handleAdd}
onClose={close}
@ -97,30 +100,34 @@ export function EventDataParameters() {
{!hasData && <Empty message={formatMessage(messages.noEventData)} />}
{parametersSelected &&
hasData &&
parameterGroups.map(({ label, type }) => {
parameterGroups.map(({ label, group }) => {
return (
<FormRow key={label} label={label} action={<AddButton type={type} onAdd={handleAdd} />}>
<FormRow
key={label}
label={label}
action={<AddButton group={group} onAdd={handleAdd} />}
>
<ParameterList
items={parameterData[type]}
onRemove={index => handleRemove(type, index)}
items={parameterData[group]}
onRemove={index => handleRemove(group, index)}
>
{({ name, value }) => {
return (
<div className={styles.parameter}>
{type === 'fields' && (
{group === REPORT_PARAMETERS.fields && (
<>
<div className={styles.op}>{value}</div>
<div>{name}</div>
<div className={styles.op}>{value}</div>
</>
)}
{type === 'filters' && (
{group === REPORT_PARAMETERS.filters && (
<>
<div>{name}</div>
<div className={styles.op}>{value[0]}</div>
<div>{value[1]}</div>
</>
)}
{type === 'groups' && (
{group === REPORT_PARAMETERS.groups && (
<>
<div>{name}</div>
</>
@ -133,7 +140,7 @@ export function EventDataParameters() {
);
})}
<FormButtons>
<SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
<SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}>
{formatMessage(labels.runQuery)}
</SubmitButton>
</FormButtons>

4
components/pages/reports/event-data/EventDataParameters.module.css
View file

@ -1,6 +1,10 @@
.parameter {
display: flex;
gap: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
.op {

13
components/pages/reports/event-data/EventDataTable.js
View file

@ -1,5 +1,5 @@
import { useContext } from 'react';
import DataTable from 'components/metrics/DataTable';
import { GridTable, GridColumn } from 'react-basics';
import { useMessages } from 'hooks';
import { ReportContext } from '../Report';
@ -8,12 +8,11 @@ export function EventDataTable() {
const { formatMessage, labels } = useMessages();
return (
<DataTable
data={report?.data}
title={formatMessage(labels.eventData)}
metric="#"
showPercentage={true}
/>
<GridTable data={report?.data || []}>
<GridColumn name="field" label={formatMessage(labels.field)} />
<GridColumn name="value" label={formatMessage(labels.value)} />
<GridColumn name="total" label={formatMessage(labels.total)} />
</GridTable>
);
}

20
components/pages/reports/event-data/FieldAddForm.js
View file

@ -1,16 +1,20 @@
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { REPORT_PARAMETERS } from 'lib/constants';
import PopupForm from '../PopupForm';
import FieldSelectForm from '../FieldSelectForm';
import FieldAggregateForm from '../FieldAggregateForm';
import FieldFilterForm from '../FieldFilterForm';
import styles from './FieldAddForm.module.css';
export function FieldAddForm({ fields = [], type, element, onAdd, onClose }) {
export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
const [selected, setSelected] = useState();
const handleSelect = value => {
if (type === 'groups') {
const { type } = value;
if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
handleSave(value);
return;
}
@ -19,15 +23,19 @@ export function FieldAddForm({ fields = [], type, element, onAdd, onClose }) {
};
const handleSave = value => {
onAdd(type, value);
onAdd(group, value);
onClose();
};
return createPortal(
<PopupForm className={styles.popup} element={element} onClose={onClose}>
{!selected && <FieldSelectForm fields={fields} type={type} onSelect={handleSelect} />}
{selected && type === 'fields' && <FieldAggregateForm {...selected} onSelect={handleSave} />}
{selected && type === 'filters' && <FieldFilterForm {...selected} onSelect={handleSave} />}
{!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
{selected && group === REPORT_PARAMETERS.fields && (
<FieldAggregateForm {...selected} onSelect={handleSave} />
)}
{selected && group === REPORT_PARAMETERS.filters && (
<FieldFilterForm {...selected} onSelect={handleSave} />
)}
</PopupForm>,
document.body,
);