mirror of
https://github.com/plausible/analytics.git
synced 2024-12-24 01:54:34 +03:00
Add boundary to tooltip (#2211)
This commit is contained in:
parent
cc4d4bb8e0
commit
8d8b66d266
@ -45,7 +45,7 @@ export default class TopStats extends React.Component {
|
||||
|
||||
return (
|
||||
<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>}
|
||||
</div>
|
||||
)
|
||||
@ -99,7 +99,7 @@ export default class TopStats extends React.Component {
|
||||
})
|
||||
|
||||
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
|
||||
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}
|
||||
|
@ -48,6 +48,7 @@ export const METRIC_FORMATTER = {
|
||||
class LineGraph extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.boundary = React.createRef()
|
||||
this.regenerateChart = this.regenerateChart.bind(this);
|
||||
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
|
||||
this.state = {
|
||||
|
@ -2,7 +2,7 @@ import React, { useState } from "react";
|
||||
import { usePopper } from 'react-popper';
|
||||
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 [referenceElement, setReferenceElement] = useState(null);
|
||||
const [popperElement, setPopperElement] = useState(null);
|
||||
@ -17,6 +17,12 @@ export function Tooltip({ children, info, className, onClick }) {
|
||||
offset: [0, 4],
|
||||
},
|
||||
},
|
||||
boundary && {
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: boundary,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user