From 8d8b66d2660c4924441092a18d6cadeeb05b9675 Mon Sep 17 00:00:00 2001
From: Uku Taht <Uku.taht@gmail.com>
Date: Tue, 13 Sep 2022 12:46:01 +0300
Subject: [PATCH] Add boundary to tooltip (#2211)

---
 assets/js/dashboard/stats/graph/top-stats.js     | 4 ++--
 assets/js/dashboard/stats/graph/visitor-graph.js | 1 +
 assets/js/dashboard/util/tooltip.js              | 8 +++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/assets/js/dashboard/stats/graph/top-stats.js b/assets/js/dashboard/stats/graph/top-stats.js
index 25ad59581..b1ba6d0fe 100644
--- a/assets/js/dashboard/stats/graph/top-stats.js
+++ b/assets/js/dashboard/stats/graph/top-stats.js
@@ -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}
diff --git a/assets/js/dashboard/stats/graph/visitor-graph.js b/assets/js/dashboard/stats/graph/visitor-graph.js
index 88002f8fa..99ea8495b 100644
--- a/assets/js/dashboard/stats/graph/visitor-graph.js
+++ b/assets/js/dashboard/stats/graph/visitor-graph.js
@@ -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 = {
diff --git a/assets/js/dashboard/util/tooltip.js b/assets/js/dashboard/util/tooltip.js
index 1600138ed..8cfc77a28 100644
--- a/assets/js/dashboard/util/tooltip.js
+++ b/assets/js/dashboard/util/tooltip.js
@@ -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,
+        },
+      },
     ],
   });