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

[sjd78]

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
• Force tooltips on the DonutChart to a constant width oVirt/ovirt-engine-ui-extensions#74

[tlabaj]

cc @dlabrecq

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[dlabrecq]

This is something that must be fixed upstream -- see https://github.com/FormidableLabs/victory/issues/2108