Added field types.

This commit is contained in:
Mike Cao 2023-08-10 09:31:25 -07:00
parent 5039349d57
commit 39fb4fdaf8
6 changed files with 26 additions and 16 deletions

View File

@ -40,6 +40,7 @@ export default function FieldFilterForm({ name, label, type, values, onSelect })
</Dropdown>
<Dropdown
className={styles.dropdown}
menuProps={{ className: styles.menu }}
items={values}
value={value}
renderValue={renderValue}

View File

@ -15,3 +15,8 @@
.dropdown {
min-width: 180px;
}
.menu {
min-width: 360px;
max-height: 300px;
}

View File

@ -2,7 +2,7 @@ import { Menu, Item, Form, FormRow } from 'react-basics';
import { useMessages } from 'hooks';
import styles from './FieldSelectForm.module.css';
export default function FieldSelectForm({ items, onSelect }) {
export default function FieldSelectForm({ items, onSelect, showType = true }) {
const { formatMessage, labels } = useMessages();
return (
@ -13,7 +13,7 @@ export default function FieldSelectForm({ items, onSelect }) {
return (
<Item key={index} className={styles.item}>
<div>{label || name}</div>
{type && <div className={styles.type}>{type}</div>}
{showType && type && <div className={styles.type}>{type}</div>}
</Item>
);
})}

View File

@ -23,7 +23,7 @@ export default function FilterSelectForm({ websiteId, items, onSelect }) {
const { data, isLoading } = useValues(websiteId, field?.name);
if (!field) {
return <FieldSelectForm items={items} onSelect={setField} />;
return <FieldSelectForm items={items} onSelect={setField} showType={false} />;
}
if (isLoading) {
@ -34,7 +34,7 @@ export default function FilterSelectForm({ websiteId, items, onSelect }) {
<FieldFilterForm
name={field?.name}
label={field?.label}
type="string"
type={field?.type}
values={data}
onSelect={onSelect}
/>

View File

@ -32,16 +32,16 @@ export function InsightsParameters() {
const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
const fieldOptions = [
{ name: 'url', label: formatMessage(labels.url) },
{ name: 'title', label: formatMessage(labels.pageTitle) },
{ name: 'referrer', label: formatMessage(labels.referrer) },
{ name: '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: 'url', type: 'string', label: formatMessage(labels.url) },
{ name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
{ name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
{ name: '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) },
];
const parameterGroups = [
@ -85,7 +85,11 @@ export function InsightsParameters() {
return (
<PopupForm element={element} onClose={close}>
{id === 'fields' && (
<FieldSelectForm items={fieldOptions} onSelect={handleAdd.bind(null, id)} />
<FieldSelectForm
items={fieldOptions}
onSelect={handleAdd.bind(null, id)}
showType={false}
/>
)}
{id === 'filters' && (
<FilterSelectForm

View File

@ -18,7 +18,7 @@ export function InsightsTable() {
[report?.data],
);
if (!fields) {
if (!fields || !report?.parameters) {
return <EmptyPlaceholder />;
}