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

Comienza con el punto de entrada ChartTooltip de @patternfly/react-charts e inspecciona cómo se estima el ancho del texto del flyout a partir del comportamiento de los gráficos de Victory. Reproduce el problema con una traducción al japonés o a otro idioma no latino, usando como comparación el workaround flyoutWidth indicado. Se considera terminado cuando el ancho del texto del tooltip ya no se subestima considerablemente para los idiomas no latinos.