analytics/assets/js/dashboard/stats/behaviours/props.js
RobertJoonas 9ed79542f2
List props frontend (#3126)
* add the props section in behaviors

* update listReport when keyLabel (=propKey) changes

* make column min-width configurable and increase for props

* add rendering condition to limit container height

* fix filter link

* fix tests

* disable clear for single-option combobox

* improve single-option combobox styling

* fix fetchPropKeyOptions fn update on query change

* BUGFIX: searching for prop_values in property filter modal

* change the order of funnels and props section pickers

* change props section Bar color from gray to light-red

* remove disabled options from combobox dropdown (multi & single)

* display percentage metric values without a % sign

* change metric labels in goal filter view to Visitors and Events

* fix realtime update timer
2023-07-21 11:19:07 +03:00

69 lines
2.3 KiB
JavaScript

import React, { useCallback, useState } from "react";
import ListReport from "../reports/list";
import Combobox from '../../components/combobox'
import * as api from '../../api'
import * as url from '../../util/url'
import { CR_METRIC, PERCENTAGE_METRIC } from "../reports/metrics";
import * as storage from "../../util/storage";
export default function Properties(props) {
const { site, query } = props
const propKeyStorageName = `prop_key__${site.domain}`
const [propKey, setPropKey] = useState(defaultPropKey())
function defaultPropKey() {
const stored = storage.getItem(propKeyStorageName)
if (stored) { return stored }
return null
}
function fetchProps() {
return api.get(url.apiPath(site, `/custom-prop-values/${encodeURIComponent(propKey)}`), query)
}
const fetchPropKeyOptions = useCallback(() => {
return (input) => {
return api.get(url.apiPath(site, "/suggestions/prop_key"), query, { q: input.trim() })
}
}, [query])
function onPropKeySelect() {
return (selectedOptions) => {
const newPropKey = selectedOptions.length === 0 ? null : selectedOptions[0].value
if (newPropKey) { storage.setItem(propKeyStorageName, newPropKey) }
setPropKey(newPropKey)
}
}
function renderBreakdown() {
return (
<ListReport
fetchData={fetchProps}
getFilterFor={getFilterFor}
keyLabel={propKey}
metrics={[
{name: 'visitors', label: 'Visitors'},
{name: 'events', label: 'Events'},
query.filters.goal ? CR_METRIC : PERCENTAGE_METRIC
]}
query={query}
color="bg-red-50"
colMinWidth={90}
/>
)
}
const getFilterFor = (listItem) => { return {'props': JSON.stringify({[propKey]: listItem['name']})} }
const comboboxValues = propKey ? [{value: propKey, label: propKey}] : []
const boxClass = 'pl-2 pr-8 py-1 bg-transparent dark:text-gray-300 rounded-md shadow-sm border border-gray-300 dark:border-gray-500'
return (
<div className="w-full mt-4">
<div className="w-56">
<Combobox boxClass={boxClass} fetchOptions={fetchPropKeyOptions()} singleOption={true} values={comboboxValues} onSelect={onPropKeySelect()} placeholder={'Select a property'} />
</div>
{ propKey && renderBreakdown() }
</div>
)
}