Faulty label in metric summary cards with pie charts.

The metric summary cards with pie chart wouldn't erase the center label when rerendering, causing the label to be visible multiple times. Fixes #10098.
ICTU · Oct 21, 2024 · 0f0359f · 0f0359f
1 parent 51af8c4
commit 0f0359f
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 26 deletions.
diff --git a/components/frontend/src/dashboard/MetricSummaryCard.js b/components/frontend/src/dashboard/MetricSummaryCard.js
@@ -2,7 +2,7 @@ import "./MetricSummaryCard.css"
 
 import { bool, func, number, object, oneOfType, string } from "prop-types"
 import { useContext } from "react"
-import { VictoryContainer, VictoryLabel, VictoryPortal, VictoryTooltip } from "victory"
+import { VictoryContainer, VictoryLabel, VictoryTooltip } from "victory"
 
 import { DarkMode } from "../context/DarkMode"
 import { useBoundingBox } from "../hooks/boundingbox"
@@ -69,20 +69,36 @@ export function MetricSummaryCard({ header, onClick, selected, summary, maxY })
     const dates = Object.keys(summary)
     const bbWidth = boundingBox.width ?? 0
     const bbHeight = boundingBox.height ?? 0
-    const label = (
-        <VictoryPortal x={bbWidth / 2} y={bbHeight / 2}>
+    const chartProps = {
+        animate: animate,
+        centerLabel: (
             <VictoryLabel
-                textAnchor="middle"
-                style={{ fontFamily: "Arial", fontSize: 12, fill: labelColor }}
                 text={nrMetricsLabel(sum(summary[dates[0]]))}
+                textAnchor="middle"
+                x={bbWidth / 2}
+                y={bbHeight / 2}
             />
-        </VictoryPortal>
-    )
-    const chartProps = {
-        animate: animate,
+        ),
         colors: colors,
+        events: [
+            {
+                childName: "all",
+                target: "data",
+                eventHandlers: {
+                    onClick: () => {
+                        return [
+                            {
+                                target: "labels",
+                                mutation: () => {
+                                    return { active: false } // Clear tooltip before filtering
+                                },
+                            },
+                        ]
+                    },
+                },
+            },
+        ],
         height: Math.max(bbHeight, 1), // Prevent "Failed prop type: Invalid prop range supplied to VictoryBar"
-        label: label,
         maxY: maxY,
         style: style,
         tooltip: tooltip,

diff --git a/components/frontend/src/dashboard/StatusBarChart.js b/components/frontend/src/dashboard/StatusBarChart.js
@@ -1,4 +1,4 @@
-import { number, object } from "prop-types"
+import { arrayOf, number, object } from "prop-types"
 import { VictoryBar, VictoryStack } from "victory"
 
 import { STATUS_COLORS, STATUS_NAME, STATUSES } from "../metric/status"
@@ -9,7 +9,7 @@ function nrMetricsLabel(nrMetrics) {
     return nrMetrics === 0 ? "No metrics" : nrMetrics + pluralize(" metric", nrMetrics)
 }
 
-export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY, style, width, height }) {
+export function StatusBarChart({ animate, centerLabel, colors, events, tooltip, summary, maxY, style, width, height }) {
     const nrMetrics = sum(summary[Object.keys(summary)[0]])
     const nrDates = Object.keys(summary).length
     // Calculate how many metrics this chart displays compared to the chart with the most metrics.
@@ -33,6 +33,7 @@ export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY,
         })
         return (
             <VictoryBar
+                events={events}
                 barRatio={barRatio}
                 key={status}
                 style={style}
@@ -50,7 +51,7 @@ export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY,
     const horizontalPadding = width / 8
     const verticalPadding = 10
     return nrMetrics === 0 ? (
-        label
+        centerLabel
     ) : (
         <VictoryStack
             colorScale={colors}
@@ -71,8 +72,9 @@ export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY,
 }
 StatusBarChart.propTypes = {
     animate: object,
+    centerLabel: labelPropType,
     colors: stringsPropType,
-    label: labelPropType,
+    events: arrayOf(object),
     tooltip: object,
     summary: object,
     maxY: number,

diff --git a/components/frontend/src/dashboard/StatusPieChart.js b/components/frontend/src/dashboard/StatusPieChart.js
@@ -1,8 +1,8 @@
-import { element, number, object } from "prop-types"
+import { arrayOf, element, number, object } from "prop-types"
 import { VictoryPie } from "victory"
 
 import { STATUS_COLORS, STATUS_NAME, STATUSES } from "../metric/status"
-import { stringsPropType } from "../sharedPropTypes"
+import { labelPropType, stringsPropType } from "../sharedPropTypes"
 import { pluralize, sum } from "../utils"
 
 function nrMetricsLabel(nrMetrics) {
@@ -12,10 +12,10 @@ nrMetricsLabel.PropTypes = {
     nrMetrics: number,
 }
 
-export function StatusPieChart({ animate, colors, label, tooltip, summary, style, maxY, width, height }) {
+export function StatusPieChart({ animate, centerLabel, colors, events, tooltip, summary, style, maxY, width, height }) {
     const nrMetrics = sum(summary)
     const outerRadius = 0.45 * Math.min(height, width)
-    const minInnerRadius = 0.3 * outerRadius
+    const minInnerRadius = 0.4 * outerRadius
     const maxInnerRadius = 0.8 * outerRadius
     const innerRadius = maxInnerRadius - (maxInnerRadius - minInnerRadius) * (nrMetrics / maxY)
     const data = STATUSES.map((status) => {
@@ -25,11 +25,12 @@ export function StatusPieChart({ animate, colors, label, tooltip, summary, style
     })
     return (
         <>
-            {label}
+            {centerLabel}
             {nrMetrics > 0 && (
                 <VictoryPie
                     animate={animate}
                     colorScale={colors}
+                    events={events}
                     radius={outerRadius}
                     innerRadius={innerRadius}
                     standalone={false}
@@ -46,9 +47,10 @@ export function StatusPieChart({ animate, colors, label, tooltip, summary, style
 }
 StatusPieChart.propTypes = {
     animate: object,
+    centerLabel: labelPropType,
     colors: stringsPropType,
+    events: arrayOf(object),
     height: number,
-    label: object,
     maxY: number,
     style: object,
     summary: object,

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.0, please first check the upgrade path in the [versioning policy](versioning.md).
+
+### Fixed
+
+- The metric summary cards with pie chart wouldn't erase the center label when rerendering, causing the label to be visible multiple times. Fixes [#10098](https://github.com/ICTU/quality-time/issues/10098).
+
 ## v5.17.0 - 2024-10-17
 
 ### Deployment notes

diff --git a/docs/src/versioning.md b/docs/src/versioning.md
@@ -21,12 +21,13 @@ The table below contains the *Quality-time* releases since the last minor of the
 
 | Version    | Date         | Mongo  | FC     | Migrations | Downgrade       | Upgrade         | Manual changes |
 |------------|--------------|--------|--------|------------|-----------------|-----------------|----------------|
-| v5.17.0    | 2024-10-17   | **v8** | v7     |            | v5.14.0-v5.16.2 | n/a             | no             |
-| v5.16.2    | 2024-10-03   | v7     | v7     |            | v5.14.0-v5.16.1 | v5.17.0         | no             |
-| v5.16.1    | 2024-09-26   | v7     | v7     |            | v5.14.0-v5.16.0 | v5.16.2-v5.17.0 | no             |
-| v5.16.0    | 2024-09-19   | v7     | v7     | added      | v5.14.0-v5.15.0 | v5.16.1-v5.17.0 | no             |
-| v5.15.0    | 2024-07-30   | v7     | v7     |            | v5.14.0         | v5.16.0-v5.17.0 | no             |
-| v5.14.0    | 2024-07-05   | v7     | **v7** | added      | not possible    | v5.15.0-v5.17.0 | no             |
+| v5.17.1    | [unreleased] | v8     | v7     |            | v5.14.0-v5.17.0 | n/a             | no             |
+| v5.17.0    | 2024-10-17   | **v8** | v7     |            | v5.14.0-v5.16.2 | v5.17.1         | no             |
+| v5.16.2    | 2024-10-03   | v7     | v7     |            | v5.14.0-v5.16.1 | v5.17.0-v5.17.1 | no             |
+| v5.16.1    | 2024-09-26   | v7     | v7     |            | v5.14.0-v5.16.0 | v5.16.2-v5.17.1 | no             |
+| v5.16.0    | 2024-09-19   | v7     | v7     | added      | v5.14.0-v5.15.0 | v5.16.1-v5.17.1 | no             |
+| v5.15.0    | 2024-07-30   | v7     | v7     |            | v5.14.0         | v5.16.0-v5.17.1 | no             |
+| v5.14.0    | 2024-07-05   | v7     | **v7** | added      | not possible    | v5.15.0-v5.17.1 | no             |
 | v5.13.0    | 2024-05-23   | v7     | v6     | added      | not possible    | v5.14.0-v5.16.2 | no             |
 | v5.12.0    | 2024-05-17   | v7     | v6     | added      | not possible    | v5.13.0-v5.16.2 | no             |
 | v5.11.0    | 2024-04-22   | v7     | v6     |            | v5.6.0-v5.10.0  | v5.12.0-v5.16.2 | no             |