diff --git a/components/messages.js b/components/messages.js index 286a5788..b8605126 100644 --- a/components/messages.js +++ b/components/messages.js @@ -77,7 +77,7 @@ export const labels = defineMessages({ referrers: { id: 'label.referrers', defaultMessage: 'Referrers' }, screens: { id: 'label.screens', defaultMessage: 'Screens' }, browsers: { id: 'label.browsers', defaultMessage: 'Browsers' }, - os: { id: 'label.operating-systems', defaultMessage: 'Operating systems' }, + os: { id: 'label.os', defaultMessage: 'OS' }, devices: { id: 'label.devices', defaultMessage: 'Devices' }, countries: { id: 'label.countries', defaultMessage: 'Countries' }, languages: { id: 'label.languages', defaultMessage: 'Languages' }, @@ -133,33 +133,35 @@ export const labels = defineMessages({ runQuery: { id: 'label.run-query', defaultMessage: 'Run query' }, field: { id: 'label.field', defaultMessage: 'Field' }, fields: { id: 'label.fields', defaultMessage: 'Fields' }, - createReport: { id: 'labels.create-report', defaultMessage: 'Create report' }, - description: { id: 'labels.description', defaultMessage: 'Description' }, - untitled: { id: 'labels.untitled', defaultMessage: 'Untitled' }, - type: { id: 'labels.type', defaultMessage: 'Type' }, - filters: { id: 'labels.filters', defaultMessage: 'Filters' }, - breakdown: { id: 'labels.breakdown', defaultMessage: 'Breakdown' }, - true: { id: 'labels.true', defaultMessage: 'True' }, - false: { id: 'labels.false', defaultMessage: 'False' }, - equals: { id: 'labels.equals', defaultMessage: 'Equals' }, - doesNotEqual: { id: 'labels.does-not-equal', defaultMessage: 'Does not equal' }, - greaterThan: { id: 'labels.greater-than', defaultMessage: 'Greater than' }, - lessThan: { id: 'labels.less-than', defaultMessage: 'Less than' }, - greaterThanEquals: { id: 'labels.greater-than-equals', defaultMessage: 'Greater than or equals' }, - lessThanEquals: { id: 'labels.less-than-equals', defaultMessage: 'Less than or equals' }, - contains: { id: 'labels.contains', defaultMessage: 'Contains' }, - 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' }, - overview: { id: 'labels.overview', defaultMessage: 'Overview' }, - totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' }, + createReport: { id: 'label.create-report', defaultMessage: 'Create report' }, + description: { id: 'label.description', defaultMessage: 'Description' }, + untitled: { id: 'label.untitled', defaultMessage: 'Untitled' }, + type: { id: 'label.type', defaultMessage: 'Type' }, + filters: { id: 'label.filters', defaultMessage: 'Filters' }, + breakdown: { id: 'label.breakdown', defaultMessage: 'Breakdown' }, + true: { id: 'label.true', defaultMessage: 'True' }, + false: { id: 'label.false', defaultMessage: 'False' }, + is: { id: 'label.is', defaultMessage: 'Is' }, + isNot: { id: 'label.is-not', defaultMessage: 'Is not' }, + isSet: { id: 'label.is-set', defaultMessage: 'Is set' }, + isNotSet: { id: 'label.is-not-set', defaultMessage: 'Is not set' }, + greaterThan: { id: 'label.greater-than', defaultMessage: 'Greater than' }, + lessThan: { id: 'label.less-than', defaultMessage: 'Less than' }, + greaterThanEquals: { id: 'label.greater-than-equals', defaultMessage: 'Greater than or equals' }, + lessThanEquals: { id: 'label.less-than-equals', defaultMessage: 'Less than or equals' }, + contains: { id: 'label.contains', defaultMessage: 'Contains' }, + doesNotContain: { id: 'label.does-not-contain', defaultMessage: 'Does not contain' }, + before: { id: 'label.before', defaultMessage: 'Before' }, + after: { id: 'label.after', defaultMessage: 'After' }, + total: { id: 'label.total', defaultMessage: 'Total' }, + sum: { id: 'label.sum', defaultMessage: 'Sum' }, + average: { id: 'label.average', defaultMessage: 'Average' }, + min: { id: 'label.min', defaultMessage: 'Min' }, + max: { id: 'label.max', defaultMessage: 'Max' }, + unique: { id: 'label.unique', defaultMessage: 'Unique' }, + value: { id: 'label.value', defaultMessage: 'Value' }, + overview: { id: 'label.overview', defaultMessage: 'Overview' }, + totalRecords: { id: 'label.total-records', defaultMessage: 'Total records' }, insights: { id: 'label.insights', defaultMessage: 'Insights' }, dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' }, referrer: { id: 'label.referrer', defaultMessage: 'Referrer' }, diff --git a/components/pages/reports/FieldFilterForm.js b/components/pages/reports/FieldFilterForm.js index a2b68968..381bb7e3 100644 --- a/components/pages/reports/FieldFilterForm.js +++ b/components/pages/reports/FieldFilterForm.js @@ -1,17 +1,28 @@ import { useState } from 'react'; import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics'; -import { useFilters } from 'hooks'; +import { useMessages, useFilters, useFormat } from 'hooks'; import styles from './FieldFilterForm.module.css'; -export default function FieldFilterForm({ label, type, values, onSelect }) { +export default function FieldFilterForm({ name, label, type, values, onSelect }) { + const { formatMessage, labels } = useMessages(); const [filter, setFilter] = useState('eq'); const [value, setValue] = useState(); - const filters = useFilters(type); + const { getFilters } = useFilters(); + const { formatValue } = useFormat(); + const filters = getFilters(type); const renderFilterValue = value => { return filters.find(f => f.value === value)?.label; }; + const renderValue = value => { + return formatValue(value, name); + }; + + const handleAdd = () => { + onSelect({ name, type, filter, value }); + }; + return (
diff --git a/components/pages/reports/FilterSelectForm.js b/components/pages/reports/FilterSelectForm.js index 49238e1c..844c2a1d 100644 --- a/components/pages/reports/FilterSelectForm.js +++ b/components/pages/reports/FilterSelectForm.js @@ -27,8 +27,16 @@ export default function FilterSelectForm({ websiteId, items, onSelect }) { } if (isLoading) { - return