diff --git a/frontend/src/components/filter/Form.vue b/frontend/src/components/filter/Form.vue index 8c0de79..bd55fe9 100644 --- a/frontend/src/components/filter/Form.vue +++ b/frontend/src/components/filter/Form.vue @@ -172,7 +172,7 @@ name="country" placeholder="Filter by country" allow-only-values - v-model="newFilter.country" + :value="newFilter.country || ''" :values="autocompleteCountries" :disabled="disabled" @input="newFilter.country = $event" /> diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue index 86e251b..f5a3191 100644 --- a/frontend/src/views/Stats.vue +++ b/frontend/src/views/Stats.vue @@ -31,11 +31,21 @@ <tbody> <tr v-for="stat, i in stats" :key="i"> <td class="key" v-for="value, attr in stat.key" :key="attr"> - {{ displayValue(attr, value) }} + <a :href="mapURL(stat, { ascending: false })"> + {{ displayValue(attr, value) }} + </a> </td> <td class="count">{{ stat.count }}</td> - <td class="date">{{ displayDate(stat.startDate) }}</td> - <td class="date">{{ displayDate(stat.endDate) }}</td> + <td class="date"> + <a :href="mapURL(stat, { ascending: true })"> + {{ displayDate(stat.startDate) }} + </a> + </td> + <td class="date"> + <a :href="mapURL(stat, { ascending: true })"> + {{ displayDate(stat.endDate) }} + </a> + </td> </tr> </tbody> </table> @@ -129,6 +139,16 @@ export default { } }, + mapURL(stat: LocationStats, opts: { + ascending?: boolean, + }): string { + const key = Object.entries(stat.key) + .map(([k, v]) => `${k}=${encodeURIComponent(v)}`) + .join('&'); + + return `/#${key}&order=${opts.ascending ? 'asc' : 'desc'}` + }, + setURLQuery() { const enabledMetrics = Object.entries(this.metrics) .filter(([_, enabled]) => enabled) @@ -296,6 +316,10 @@ export default { &.date { opacity: 0.6; } + + a { + color: var(--color-accent); + } } } }