plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-12-24 01:54:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add boundary to tooltip (#2211)

Browse Source
This commit is contained in:
Uku Taht 2022-09-13 12:46:01 +03:00 committed by GitHub
parent cc4d4bb8e0
commit 8d8b66d266
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/js/dashboard/stats/graph/top-stats.js
View File

@ -45,7 +45,7 @@ export default class TopStats extends React.Component {
return ( return (
<div> <div>
<div>{this.topStatNumberLong(stat)} {statName}</div> <div className="whitespace-nowrap">{this.topStatNumberLong(stat)} {statName}</div>
{this.canMetricBeGraphed(stat) && <div className="font-normal text-xs">{this.titleFor(stat)}</div>} {this.canMetricBeGraphed(stat) && <div className="font-normal text-xs">{this.titleFor(stat)}</div>}
</div> </div>
) )
@ -99,7 +99,7 @@ export default class TopStats extends React.Component {
}) })
return ( return (
<Tooltip key={stat.name} info={this.topStatTooltip(stat)} className={className} onClick={() => { this.maybeUpdateMetric(stat) }}> <Tooltip key={stat.name} info={this.topStatTooltip(stat)} className={className} onClick={() => { this.maybeUpdateMetric(stat) }} boundary={this.props.tooltipBoundary}>
<div <div
className={`text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-content border-b ${isSelected ? 'text-indigo-700 dark:text-indigo-500 border-indigo-700 dark:border-indigo-500' : 'group-hover:text-indigo-700 dark:group-hover:text-indigo-500 border-transparent'}`}> className={`text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-content border-b ${isSelected ? 'text-indigo-700 dark:text-indigo-500 border-indigo-700 dark:border-indigo-500' : 'group-hover:text-indigo-700 dark:group-hover:text-indigo-500 border-transparent'}`}>
{statDisplayName} {statDisplayName}

1
assets/js/dashboard/stats/graph/visitor-graph.js
View File

@ -48,6 +48,7 @@ export const METRIC_FORMATTER = {
class LineGraph extends React.Component { class LineGraph extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.boundary = React.createRef()
this.regenerateChart = this.regenerateChart.bind(this); this.regenerateChart = this.regenerateChart.bind(this);
this.updateWindowDimensions = this.updateWindowDimensions.bind(this); this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
this.state = { this.state = {

8
assets/js/dashboard/util/tooltip.js
View File

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
import classNames from 'classnames' import classNames from 'classnames'
export function Tooltip({ children, info, className, onClick }) { export function Tooltip({ children, info, className, onClick, boundary }) {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [referenceElement, setReferenceElement] = useState(null); const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null); const [popperElement, setPopperElement] = useState(null);
@ -17,6 +17,12 @@ export function Tooltip({ children, info, className, onClick }) {
offset: [0, 4], offset: [0, 4],
}, },
}, },
boundary && {
name: 'preventOverflow',
options: {
boundary: boundary,
},
},
], ],
}); });