Bug - Tooltips on Charts - Tooltips for non-Latin character code pages are too narrow

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

How do you reproduce the problem?
Have a chart tooltip is any non-Latin character language. Japanese is a good example.

Expected behavior
The tooltips for Latin character languages have their text's width estimated well, but for non-Latin character language (such as Japanese), the text width is vastly underestimated.

Is this issue blocking you?
No, but could be very common in non-Latin languages. It was first detected in a Japanese translation.

The workaround used was to force the tooltip to a constant width wide enough to display the tooltip in every translation.

For example, in (https://github.com/oVirt/ovirt-engine-ui-extensions/blob/0642c73c45dc084bd841e1928884dd1fa61bb0b0/src/components/patternfly/DonutChart.js#L40-L52), the ChartTooltip's flyoutWidth is set to a constant value:

      <ChartDonutUtilization
        title={donutChartText}
        subTitle={donutChartSubtitle}
        themeColor={ChartThemeColor.green}
        labelComponent={<ChartTooltip flyoutWidth={180} />}
        data={{ x: 'Capacity', y: percentUsed * 100 }}
        labels={({ datum }) => datum.x ? usedLabel : availableLabel}
        thresholds={colors}
        events={[{ target: 'data', eventHandlers: { onClick: onDataClick } }]}
        height={200}
        width={200}
        padding={{ top: 15 }}
      />

Screenshots

Example 1:

Example 2:

What is your environment?

• OS: Any
• Browser: Any
• Version: "@patternfly/react-charts": "^6.74.3"

What is your product and what release date are you targeting?
oVirt

Any other information?
See:

• https://issues.redhat.com/browse/RHV-45439
• https://github.com/oVirt/ovirt-engine-ui-extensions/pull/74

Commencez par le point d’entrée ChartTooltip de @patternfly/react-charts et examinez comment la largeur du texte du flyout est estimée à partir du comportement des graphiques Victory. Reproduisez le problème avec une traduction japonaise ou dans une autre langue non latine, en utilisant le workaround flyoutWidth signalé comme comparaison. Le travail est terminé lorsque la largeur du texte du tooltip n’est plus largement sous-estimée pour les langues non latines.