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

Inizia dal punto di ingresso ChartTooltip di @patternfly/react-charts e analizza come viene stimata la larghezza del testo del flyout in base al comportamento dei grafici Victory. Riproduci il problema con una traduzione in giapponese o in un’altra lingua non latina, usando come confronto il workaround flyoutWidth segnalato. Il lavoro è completato quando la larghezza del testo del tooltip non viene più sottostimata in modo sostanziale per le lingue non latine.