Fix cut off borders of popups in the dashboard.

Fixes #10175.
ICTU · Oct 25, 2024 · dbe2090 · dbe2090
1 parent 2888572
commit dbe2090
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/components/frontend/src/dashboard/MetricSummaryCard.js b/components/frontend/src/dashboard/MetricSummaryCard.js
@@ -52,23 +52,20 @@ export function MetricSummaryCard({ header, onClick, selected, summary, maxY })
     const flyoutBgColor = useContext(DarkMode) ? "rgba(60, 65, 70)" : "white"
     const animate = { duration: 0, onLoad: { duration: 0 } }
     const colors = STATUSES.map((status) => STATUS_COLORS_RGB[status])
-    const style = {
-        labels: { fontFamily: "Arial", fontSize: 12, fill: labelColor },
-    }
+    const bbWidth = boundingBox.width ?? 0
+    const bbHeight = boundingBox.height ?? 0
     const tooltip = (
         <VictoryTooltip
+            center={{ x: bbWidth / 2, y: bbHeight / 2 }}
             constrainToVisibleArea={true}
             cornerRadius={4}
-            flyoutPadding={5}
+            flyoutHeight={54} // If we don't pass this, a height is calculated by Victory, but it's much too high
             flyoutStyle={{ fill: flyoutBgColor }}
-            pointerWidth={20}
             renderInPortal={false}
-            style={{ fontFamily: "Arial", fontSize: 12, fill: labelColor }}
+            style={{ fontFamily: "Arial", fontSize: 16, fill: labelColor }}
         />
     )
     const dates = Object.keys(summary)
-    const bbWidth = boundingBox.width ?? 0
-    const bbHeight = boundingBox.height ?? 0
     const chartProps = {
         animate: animate,
         colors: colors,
@@ -83,7 +80,6 @@ export function MetricSummaryCard({ header, onClick, selected, summary, maxY })
             />
         ),
         maxY: maxY,
-        style: style,
         tooltip: tooltip,
         width: Math.max(bbWidth, 1), // Prevent "Failed prop type: Invalid prop range supplied to VictoryBar"
     }

diff --git a/docs/src/changelog.md b/docs/src/changelog.md
@@ -8,6 +8,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 <!-- The line "## <square-bracket>Unreleased</square-bracket>" is replaced by the release/release.py script with the new release version and release date. -->
 
+## [Unreleased]
+
+### Deployment notes
+
+If your currently installed *Quality-time* version is not v5.17.1, please first check the upgrade path in the [versioning policy](versioning.md).
+
+### Fixed
+
+- Fix cut off borders of popups in the dashboard. Fixes [#10175](https://github.com/ICTU/quality-time/issues/10175).
+
 ## v5.17.1 - 2024-10-25
 
 ### Deployment notes