mirror of
https://github.com/plausible/analytics.git
synced 2024-12-23 01:22:15 +03:00
9ed79542f2
* 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
69 lines
2.3 KiB
JavaScript
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>
|
|
)
|
|
} |