From 176eac82b3bc08166e0960742868ce1646cc615c Mon Sep 17 00:00:00 2001
From: Jose Farias <jose@farias.mx>
Date: Sat, 20 Apr 2024 13:12:33 -0600
Subject: [PATCH] Match tooltip designs

---
 .../time_series_chart_controller.js           | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/javascript/controllers/time_series_chart_controller.js b/app/javascript/controllers/time_series_chart_controller.js
index 6717110f..e557276c 100644
--- a/app/javascript/controllers/time_series_chart_controller.js
+++ b/app/javascript/controllers/time_series_chart_controller.js
@@ -248,22 +248,28 @@ export default class extends Controller {
         ${d3.timeFormat("%b %d, %Y")(data.date)}
       </div>
 
-      <div style="display: flex; align-items: center; gap: 8px;">
-        <svg width="10" height="10">
-          <circle
-            cx="5"
-            cy="5"
-            r="4"
-            stroke="${this.#tooltipTrendColor(data)}"
-            fill="transparent"
-            stroke-width="1"></circle>
-        </svg>
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <svg width="10" height="10">
+            <circle
+              cx="5"
+              cy="5"
+              r="4"
+              stroke="${this.#tooltipTrendColor(data)}"
+              fill="transparent"
+              stroke-width="1"></circle>
+          </svg>
 
-        ${this.#tooltipValue(data)}
+          ${this.#tooltipValue(data)}
+        </div>
 
-        <span style="color: ${this.#tooltipTrendColor(data)};">
-          ${this.#tooltipChange(data)} (${data.trend.percent}%)
-        </span>
+        ${data.trend.value == 0 || data.trend.value.amount == 0 ? `
+          <span style="width: 80px;"></span>
+        ` : `
+          <span style="color: ${this.#tooltipTrendColor(data)};">
+            ${this.#tooltipChange(data)} (${data.trend.percent}%)
+          </span>
+        `}
       </div>
     `)
   }