Adds goals as auto-complete capable filter

This commit is contained in:
Vignesh Joglekar 2021-05-27 16:36:31 -05:00
parent 4ca39cc406
commit 1cb7732a08
4 changed files with 22 additions and 8 deletions

View File

@ -174,7 +174,7 @@ class Filters extends React.Component {
} }
renderDropdownFilter(history, [key, value], query) { renderDropdownFilter(history, [key, value], query) {
if (['goal', 'props'].includes(key)) { if ('props' == key) {
return ( return (
<div className="px-4 sm:py-2 py-3 md:text-sm leading-tight flex items-center justify-between" key={key + value}> <div className="px-4 sm:py-2 py-3 md:text-sm leading-tight flex items-center justify-between" key={key + value}>
{this.filterText(key, value, query)} {this.filterText(key, value, query)}
@ -201,7 +201,7 @@ class Filters extends React.Component {
renderListFilter(history, [key, value], query) { renderListFilter(history, [key, value], query) {
return ( return (
<span key={key} title={value} className="flex bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow text-sm rounded mr-2 items-center"> <span key={key} title={value} className="flex bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow text-sm rounded mr-2 items-center">
{['goal', 'props'].includes(key) ? ( {'props' == key ? (
<span className="flex w-full h-full items-center py-2 pl-3"> <span className="flex w-full h-full items-center py-2 pl-3">
{this.filterText(key, value, query)} {this.filterText(key, value, query)}
</span> </span>

View File

@ -162,7 +162,7 @@ export function eventName(query) {
export const formattedFilters = { export const formattedFilters = {
'goal': 'Goal', 'goal': 'Goal',
'props': 'Props', 'props': 'Goal properties',
'source': 'Source', 'source': 'Source',
'utm_medium': 'UTM Medium', 'utm_medium': 'UTM Medium',
'utm_source': 'UTM Source', 'utm_source': 'UTM Source',

View File

@ -22,7 +22,7 @@ class FilterModal extends React.Component {
preventSuggestions: true preventSuggestions: true
} }
this.editableGoals = Object.keys(this.state.query.filters).filter(filter => !['goal', 'props'].includes(filter)) this.editableGoals = Object.keys(this.state.query.filters).filter(filter => !['props'].includes(filter))
this.renderSelector = this.renderSelector.bind(this) this.renderSelector = this.renderSelector.bind(this)
this.fetchSuggestions = this.fetchSuggestions.bind(this) this.fetchSuggestions = this.fetchSuggestions.bind(this)
this.handleKeydown = this.handleKeydown.bind(this) this.handleKeydown = this.handleKeydown.bind(this)
@ -166,7 +166,7 @@ class FilterModal extends React.Component {
{suggestions.map((suggestion, index) => ( {suggestions.map((suggestion, index) => (
<span <span
key={suggestion} key={suggestion}
className={`${focusedSuggestionIndex == index ? 'ring-2 ring-opacity-50' : ''} rounded px-4 py-2 md:text-sm leading-tight hover:bg-gray-200 dark:hover:bg-gray-950 hover:text-gray-900 dark:hover:text-gray-100 flex items-center justify-between cursor-pointer`} className={`${focusedSuggestionIndex == index ? 'ring-2 ring-inset ring-opacity-50' : ''} rounded px-4 py-2 md:text-sm leading-tight hover:bg-gray-200 dark:hover:bg-gray-950 hover:text-gray-900 dark:hover:text-gray-100 flex items-center justify-between cursor-pointer`}
onClick={() => { onClick={() => {
this.setState({ updatedValue: suggestion, preventSuggestions: true, suggestions: [] }) this.setState({ updatedValue: suggestion, preventSuggestions: true, suggestions: [] })
}} }}

View File

@ -1718,10 +1718,24 @@ defmodule Plausible.Stats.Clickhouse do
select: {e.screen_size}, select: {e.screen_size},
where: fragment("? ilike ?", e.screen_size, ^filter_query) where: fragment("? ilike ?", e.screen_size, ^filter_query)
) )
"goal" ->
nil
end end
ClickhouseRepo.all(q) if filter_name == "goal" do
|> Enum.map(fn {suggestion} -> suggestion end) Repo.all(from g in Plausible.Goal, where: g.domain == ^site.domain)
|> Enum.filter(fn suggestion -> suggestion != "" end) |> Enum.map(fn x -> if x.event_name, do: x.event_name, else: "Visit #{x.page_path}" end)
|> Enum.filter(fn goal ->
String.contains?(
String.downcase(goal),
String.downcase(filter_search) || filter_search == ""
)
end)
else
ClickhouseRepo.all(q)
|> Enum.map(fn {suggestion} -> suggestion end)
|> Enum.filter(fn suggestion -> suggestion != "" end)
end
end end
end end