mirror of
https://github.com/plausible/analytics.git
synced 2024-12-22 00:51:36 +03:00
dd20fc8a17
* chore(docker): improve repeat contributions workflow * This change adds two new commands to gracefully stop and remove the Postgres and Clickhouse docker containers. To do so, it also gives them a recognizable name. * Additionally, the Postgres container is updated to use a named volume for its data. This lower friction for repeat contributions where one would otherwise sign up and activate their accounts again and again each time. * Format countries modal * Remove unused imports * Run ESLint and make related fixes * ESlint formatting for entry pages modal * WIP: proof of concept for scrollable modals on mobile * Fix modals being too wide on desktop * Make modals truly responsive This fixes the desktop behaviour completely now. * Update changelog with modals responsiveness * Update desktop modal width to 860px It was an oversight to set it at 800px in the first place. Co-authored-by: Uku Taht <Uku.taht@gmail.com>
106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
import React from "react";
|
|
import { Link, withRouter } from 'react-router-dom'
|
|
import Datamap from 'datamaps'
|
|
|
|
import Modal from './modal'
|
|
import * as api from '../../api'
|
|
import numberFormatter from '../../number-formatter'
|
|
import {parseQuery} from '../../query'
|
|
|
|
class CountriesModal extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
loading: true,
|
|
query: parseQuery(props.location.search, props.site)
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/countries`, this.state.query, {limit: 100})
|
|
.then((res) => this.setState({loading: false, countries: res}))
|
|
}
|
|
|
|
label() {
|
|
return this.state.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
|
|
}
|
|
|
|
renderCountry(country) {
|
|
const query = new URLSearchParams(window.location.search)
|
|
query.set('country', country.name)
|
|
|
|
const allCountries = Datamap.prototype.worldTopo.objects.world.geometries;
|
|
const thisCountry = allCountries.find((c) => c.id === country.name) || {properties: {name: country.name}};
|
|
const countryFullName = thisCountry.properties.name
|
|
|
|
return (
|
|
<tr className="text-sm dark:text-gray-200" key={country.name}>
|
|
<td className="p-2">
|
|
<Link
|
|
className="hover:underline"
|
|
to={{search: query.toString(),
|
|
pathname: `/${ encodeURIComponent(this.props.site.domain)}`}}
|
|
>
|
|
{countryFullName}
|
|
</Link>
|
|
</td>
|
|
<td className="p-2 w-32 font-medium" align="right">
|
|
{numberFormatter(country.count)} <span className="inline-block text-xs w-8 text-right">({country.percentage}%)</span>
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
renderBody() {
|
|
if (this.state.loading) {
|
|
return (
|
|
<div className="loading mt-32 mx-auto"><div></div></div>
|
|
)
|
|
}
|
|
|
|
if (this.state.countries) {
|
|
return (
|
|
<>
|
|
<h1 className="text-xl font-bold dark:text-gray-100">Top countries</h1>
|
|
|
|
<div className="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
<main className="modal__content">
|
|
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
className="p-2 w-48 lg:w-1/2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
|
|
align="left"
|
|
>
|
|
Country
|
|
</th>
|
|
<th
|
|
// eslint-disable-next-line max-len
|
|
className="p-2 w-32 lg:w-1/2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
|
|
align="right"
|
|
>
|
|
{this.label()}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ this.state.countries.map(this.renderCountry.bind(this)) }
|
|
</tbody>
|
|
</table>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Modal site={this.props.site} show={!this.state.loading}>
|
|
{ this.renderBody() }
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withRouter(CountriesModal)
|