mirror of
https://github.com/plausible/analytics.git
synced 2025-01-05 17:16:44 +03:00
9ce9264144
* 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. * Improve bar component to work in a variety of situations This fixes two issues from #972 - Goals area has display issues depending on the name of your custom events - It is not possible to view labels for outbound links, 404 and custom props * Update changelog entry * Move content to children for Bar component * Remove redundant fallback width * Fix text color on root conversion texts Hyperlinks (<a>) inherit their color. In the case of the root conversion text, we needed to specify the color somewhere. The same color as the breakdown texts has been chosen. The Bar component no longer needs to take in text classes.
107 lines
3.5 KiB
JavaScript
107 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom'
|
|
import FlipMove from 'react-flip-move';
|
|
|
|
import FadeIn from '../../fade-in'
|
|
import Bar from '../bar'
|
|
import MoreLink from '../more-link'
|
|
import numberFormatter from '../../number-formatter'
|
|
import { eventName } from '../../query'
|
|
import * as api from '../../api'
|
|
import LazyLoader from '../../lazy-loader'
|
|
|
|
export default class EntryPages extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {loading: true}
|
|
this.onVisible = this.onVisible.bind(this)
|
|
}
|
|
|
|
onVisible() {
|
|
this.fetchPages()
|
|
if (this.props.timer) this.props.timer.onTick(this.fetchPages.bind(this))
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (this.props.query !== prevProps.query) {
|
|
this.setState({loading: true, pages: null})
|
|
this.fetchPages()
|
|
}
|
|
}
|
|
|
|
fetchPages() {
|
|
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/entry-pages`, this.props.query)
|
|
.then((res) => this.setState({loading: false, pages: res}))
|
|
}
|
|
|
|
renderPage(page) {
|
|
const query = new URLSearchParams(window.location.search)
|
|
query.set('entry_page', page.name)
|
|
|
|
return (
|
|
<div className="flex items-center justify-between my-1 text-sm" key={page.name}>
|
|
<Bar
|
|
count={page.count}
|
|
all={this.state.pages}
|
|
bg="bg-orange-50 dark:bg-gray-500 dark:bg-opacity-15"
|
|
maxWidthDeduction="4rem"
|
|
>
|
|
<span className="flex px-2 py-1.5 group dark:text-gray-300 relative break-words z-9">
|
|
<Link
|
|
to={{pathname: window.location.pathname, search: query.toString()}}
|
|
className="block hover:underline"
|
|
>
|
|
{page.name}
|
|
</Link>
|
|
<a
|
|
target="_blank"
|
|
href={`http://${ this.props.site.domain }${page.name}`}
|
|
className="hidden group-hover:block"
|
|
>
|
|
<svg className="inline w-4 h-4 ml-1 -mt-1 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg>
|
|
</a>
|
|
</span>
|
|
</Bar>
|
|
<span className="font-medium dark:text-gray-200">{numberFormatter(page.count)}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
renderList() {
|
|
if (this.state.pages && this.state.pages.length > 0) {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
|
|
<span>Page url</span>
|
|
<span>Unique Entrances</span>
|
|
</div>
|
|
|
|
<FlipMove>
|
|
{ this.state.pages.map(this.renderPage.bind(this)) }
|
|
</FlipMove>
|
|
</>
|
|
)
|
|
}
|
|
return (
|
|
<div
|
|
className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400"
|
|
>
|
|
No data yet
|
|
</div>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
const { loading } = this.state;
|
|
return (
|
|
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
|
{ loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
|
<FadeIn show={!loading} className="flex-grow">
|
|
{ this.renderList() }
|
|
</FadeIn>
|
|
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="entry-pages" />}
|
|
</LazyLoader>
|
|
)
|
|
}
|
|
}
|