plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-26 23:27:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix default value behaviour

Browse Source
This commit is contained in:
Uku Taht 2021-06-29 11:48:33 +03:00
parent d92ac265c3
commit cf66581a86
3 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/dashboard/components/search-select.js
View File

@ -10,7 +10,7 @@ function selectInputText(e) {
function ChevronDown() {
return (
<svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/>
<path stroke="#6B7280" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M6 8l4 4 4-4"/>
</svg>
)
}

2
assets/js/dashboard/filters.js
View File

@ -285,7 +285,7 @@ class Filters extends React.Component {
{(this.appliedFilters.map((filter) => this.renderListFilter(history, filter, query)))}
<Link to={`/${encodeURIComponent(site.domain)}/filter${window.location.search}`} className={`inline-flex items-center text-sm font-medium px-4 py-2 mr-2 cursor-pointer ml-auto text-gray-500 dark:text-gray-200 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900 rounded`}>
<svg class="mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
<svg className="mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
Filter
</Link>

48
assets/js/dashboard/stats/modals/filter.js
View File

@ -8,18 +8,27 @@ import { parseQuery, formattedFilters, navigateToQuery } from '../../query'
import Transition from "../../../transition";
import * as api from '../../api'
function getFilterValue(selectedFilter, query) {
const negated = !!query.filters[selectedFilter] && query.filters[selectedFilter][0] === '!'
let filterValue = negated ? query.filters[selectedFilter].slice(1) : (query.filters[selectedFilter] || "")
if (selectedFilter == 'country') {
const allCountries = Datamap.prototype.worldTopo.objects.world.geometries;
const selectedCountry = allCountries.find((c) => c.id === filterValue) || { properties: { name: filterValue } };
filterValue = selectedCountry.properties.name
}
return {filterValue, negated}
}
class FilterModal extends React.Component {
constructor(props) {
super(props)
const query = parseQuery(props.location.search, props.site)
const selectedFilter = this.props.match.params.field || 'page'
this.state = {
query,
selectedFilter,
negated: false,
filterValue: query.filters[selectedFilter] || '',
}
this.state = Object.assign({selectedFilter, query}, getFilterValue(selectedFilter, query))
this.handleKeydown = this.handleKeydown.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
@ -29,23 +38,6 @@ class FilterModal extends React.Component {
document.addEventListener("keydown", this.handleKeydown)
}
componentDidUpdate(prevProps, prevState) {
const { query, selectedFilter, filterValue } = this.state
if (prevState.selectedFilter !== selectedFilter) {
const negated = !!query.filters[selectedFilter] && query.filters[selectedFilter][0] == '!' && this.negationSupported(selectedFilter)
let filterValue = negated ? query.filters[selectedFilter].slice(1) : (query.filters[selectedFilter] || "")
if (selectedFilter == 'country') {
const allCountries = Datamap.prototype.worldTopo.objects.world.geometries;
const selectedCountry = allCountries.find((c) => c.id === filterValue) || { properties: { name: filterValue } };
filterValue = selectedCountry.properties.name
}
this.setState({ filterValue, negated })
}
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeydown);
}
@ -88,7 +80,7 @@ class FilterModal extends React.Component {
<SearchSelect
key={this.state.selectedFilter}
fetchOptions={this.fetchOptions.bind(this)}
initialSelectedItem={this.state.query.filters[this.state.selectedFilter]}
initialSelectedItem={this.state.filterValue}
onInput={this.onInput.bind(this)}
/>
)
@ -119,6 +111,10 @@ class FilterModal extends React.Component {
this.selectFilterAndCloseModal(selectedFilter, finalFilterValue)
}
updateSelectedFilter(e) {
this.setState(Object.assign({selectedFilter: e.target.value}, getFilterValue(e.target.value, this.state.query)))
}
renderBody() {
const { selectedFilter, negated, filterValue, query } = this.state;
const editableFilters = Object.keys(this.state.query.filters).filter(filter => !['props'].includes(filter))
@ -134,7 +130,7 @@ class FilterModal extends React.Component {
value={selectedFilter}
className="my-2 block w-full pr-10 border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300 cursor-pointer"
placeholder="Select a Filter"
onChange={(e) => this.setState({ selectedFilter: e.target.value })}
onChange={this.updateSelectedFilter.bind(this)}
>
<option disabled value="" className="hidden">Select a Filter</option>
{editableFilters.map(filter => <option key={filter} value={filter}>{formattedFilters[filter]}</option>)}
@ -155,7 +151,7 @@ class FilterModal extends React.Component {
</div>
)}
{this.renderSearchSelector(selectedFilter)}
{this.renderSearchSelector()}
<button
type="submit"