From d24ec0317770c96fbba73e58bef185a4ea39190b Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 11 May 2022 12:50:05 +0200
Subject: [PATCH] Updated Paid breakdown tooltip positioning

---
 .../components/dashboard/v5/charts/paid-breakdown.js   | 10 +++++++++-
 .../app/components/dashboard/v5/charts/paid-mix.js     |  2 +-
 ghost/admin/app/styles/layouts/dashboard-v5.css        |  6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
index 8360ac499e..02340fd754 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
@@ -89,6 +89,7 @@ export default class PaidBreakdown extends Component {
 
     get chartOptions() {
         const barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
+        let maxWidth = 0;
 
         return {
             responsive: true,
@@ -123,6 +124,8 @@ export default class PaidBreakdown extends Component {
                 custom: function (tooltip) {
                     // get tooltip element
                     const tooltipEl = document.getElementById('gh-dashboard5-breakdown-tooltip');
+                    const chartContainerEl = tooltipEl.parentElement;
+                    const chartWidth = chartContainerEl.offsetWidth;
                     const tooltipWidth = tooltipEl.offsetWidth;
 
                     // only show tooltip when active
@@ -132,11 +135,16 @@ export default class PaidBreakdown extends Component {
                         return; 
                     }
 
+                    let offsetX = 0;
+                    if (tooltip.x > chartWidth - tooltipWidth) {
+                        offsetX = tooltipWidth - 10;
+                    }
+
                     // update tooltip styles
                     tooltipEl.style.display = 'block';
                     tooltipEl.style.opacity = 1;
                     tooltipEl.style.position = 'absolute';
-                    tooltipEl.style.left = tooltip.x - (tooltipWidth / 2) + 'px';
+                    tooltipEl.style.left = tooltip.x - offsetX + 'px';
                     tooltipEl.style.top = '70px';    
                 },
                 callbacks: {
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
index 93a79fb02a..57f1f4009f 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
@@ -183,7 +183,7 @@ export default class PaidMix extends Component {
                     tooltipEl.style.opacity = 1;
                     tooltipEl.style.position = 'absolute';
                     tooltipEl.style.left = tooltip.x - offsetX + 'px';
-                    tooltipEl.style.top = '30px';    
+                    tooltipEl.style.top = '30px';
                 },
                 callbacks: {
                     label: (tooltipItems, data) => {
diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css
index 0d85476b06..6055bafeae 100644
--- a/ghost/admin/app/styles/layouts/dashboard-v5.css
+++ b/ghost/admin/app/styles/layouts/dashboard-v5.css
@@ -1808,9 +1808,13 @@ Dashboard v5 Tooltips */
     border-color: #8E42FF;
 }
 
+.gh-dashboard5-breakdown .gh-dashboard5-tooltip {
+    min-width: 140px;
+}
+
 .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto 1fr;
 }
 
 .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 {