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

Bắt đầu với entry point ChartTooltip của @patternfly/react-charts và kiểm tra cách ước tính chiều rộng văn bản flyout dựa trên hành vi của các biểu đồ Victory. Tái hiện vấn đề bằng bản dịch tiếng Nhật hoặc một ngôn ngữ không dùng chữ Latinh khác, sử dụng workaround flyoutWidth đã được báo cáo để so sánh. Hoàn thành khi chiều rộng văn bản tooltip không còn bị ước tính thấp đáng kể đối với các ngôn ngữ không dùng chữ Latinh.