From e297a793f61f5d543d46715daab6bffac737e3fb Mon Sep 17 00:00:00 2001
From: Scott Dickerson <sdickers@redhat.com>
Date: Fri, 22 Jul 2022 00:31:45 -0400
Subject: [PATCH] Force tooltips on the DonutChart to a constant width (#1618)

By default the `@patternfly/react-charts` chart tooltips use
the same text width estimation as is used in the Victory charts [1].
This estimation works ok for ASCII characters, but underestimate
sizes for other non-Latin character code pages.

Instead of creating another text size estimation function that can
handle non-Latin characters (e.g. see [2]), just pick a constant
width that should accommodate the expected text widths of most
languages we support.

[1] - https://github.com/FormidableLabs/victory/blob/main/packages/victory-core/src/victory-util/textsize.ts
[2] - https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
---
 .../cards/UtilizationCard/UtilizationCharts/DonutChart.js  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
index 706d092fc..41c3d63c8 100644
--- a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
+++ b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
@@ -1,6 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ChartDonut, ChartLabel } from '@patternfly/react-charts'
+import {
+  ChartDonut,
+  ChartLabel,
+  ChartTooltip,
+} from '@patternfly/react-charts'
 
 import style from '../style.css'
 
@@ -20,6 +24,7 @@ const DonutChart = ({ data, title, subTitle, id }) => {
         title={title}
         style={{ labels: { fontSize: 12 } }}
         titleComponent={<ChartLabel style={[{ fontSize: 30 }, { fontSize: 20, fill: '#bbb' }]} />}
+        labelComponent={<ChartTooltip flyoutWidth={180} />}
       />
     </div>
   )