fix(partition): rtl text label support (elastic#1433)

support rtl text labels in xy and partition charts, including mixed ltr/rtl. # Conflicts: # packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts # packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts # packages/charts/src/chart_types/xy_chart/state/selectors/visible_ticks.ts # packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts # packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts
nickofthyme · Nov 15, 2021 · 1ccca38 · 1ccca38
1 parent 671fdcd
commit 1ccca38
Show file tree

Hide file tree

Showing 65 changed files with 701 additions and 145 deletions.
diff --git a/...ual-tests-for-all-stories-test-cases-rtl-text-visually-looks-correct-1-snap.png b/...ual-tests-for-all-stories-test-cases-rtl-text-visually-looks-correct-1-snap.png
diff --git a/...tation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png b/...tation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png
diff --git a/...tion-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png b/...tion-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png
diff --git a/...ation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png b/...ation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png
diff --git a/...uld-render-marker-with-annotations-with-negative-90-degree-rotations-1-snap.png b/...uld-render-marker-with-annotations-with-negative-90-degree-rotations-1-snap.png
diff --git a/...bar-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png b/...bar-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...bar-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png b/...bar-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...bar-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png b/...bar-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...bar-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png b/...bar-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png b/...rst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...g-ar-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...g-ar-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...rt-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...stly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...stly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...rt-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...stly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...stly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...rst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png b/...rst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...g-ar-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...g-ar-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...rst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png b/...rst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...g-he-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...g-he-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...rt-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...stly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...stly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...rt-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...stly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...stly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...rst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png b/...rst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...g-he-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/...g-he-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png
diff --git a/...map-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png b/...map-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...map-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png b/...map-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...map-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png b/...map-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png
diff --git a/...rt-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/...rt-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/...map-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png b/...map-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png
diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { PartitionLayout, SeriesType } from '../../packages/charts/src';
 import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
@@ -25,12 +26,34 @@ describe('Test cases stories', () => {
       { waitSelector: '.echReactiveChart_noResults' },
     );
   });
-});
 
-describe('annotation marker rotation', () => {
-  eachRotation.it(async (rotation) => {
-    await common.expectChartAtUrlToMatchScreenshot(
-      `http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=${rotation}`,
-    );
-  }, 'should render marker with annotations with %s degree rotations');
+  describe('annotation marker rotation', () => {
+    eachRotation.it(async (rotation) => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=${rotation}`,
+      );
+    }, 'should render marker with annotations with %s degree rotations');
+  });
+
+  describe('RTL support', () => {
+    describe.each([SeriesType.Bar, PartitionLayout.treemap, PartitionLayout.sunburst])('%s chart type', (type) => {
+      describe.each(['HE', 'AR'])('lang %s', (lang) => {
+        describe.each(['rtl', 'ltr', 'mostly-rtl', 'mostly-ltr'])('%s text', (charSet) => {
+          it('should render with correct direction', async () => {
+            await common.expectChartAtUrlToMatchScreenshot(
+              `http://localhost:9001/?path=/story/test-cases--rtl-text&globals=background:white;theme:light&knob-Chart type=${type}&knob-character set=${charSet}&knob-show legend=true&knob-clockwiseSectors=true&knob-rtl language=${lang}`,
+            );
+          });
+
+          if (type === PartitionLayout.sunburst) {
+            it('should render with correct direction - clockwiseSectors', async () => {
+              await common.expectChartAtUrlToMatchScreenshot(
+                `http://localhost:9001/?path=/story/test-cases--rtl-text&globals=background:white;theme:light&knob-Chart type=${type}&knob-character set=${charSet}&knob-show legend=true&knob-clockwiseSectors=false&knob-rtl language=${lang}`,
+              );
+            });
+          }
+        });
+      });
+    });
+  });
 });
diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
@@ -92,6 +92,7 @@ export function shapeViewModel(
   const boxedYValues = yValues.map<Box & { value: NonNullable<PrimitiveValue> }>((value) => ({
     text: config.yAxisLabel.formatter(value),
     value,
+    isValue: false,
     ...config.yAxisLabel,
   }));
 
@@ -150,6 +151,7 @@ export function shapeViewModel(
     return {
       text: formatter(value, { timeZone: config.timeZone }),
       value,
+      isValue: false,
       ...config.xAxisLabel,
       x: chartDimensions.left + (scaleCallback(value) || 0),
       y: cellHeight * pageSize + config.xAxisLabel.fontSize / 2 + config.xAxisLabel.padding,

diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts b/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts
@@ -74,6 +74,7 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
         return {
           text: String(value),
           value,
+          isValue: false,
           ...config.yAxisLabel,
         };
       });

diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts
@@ -18,7 +18,7 @@ import {
   Radian,
   SizeRatio,
 } from '../../../../common/geometry';
-import { Font, VerticalAlignments } from '../../../../common/text_utils';
+import { Font, HorizontalAlignment, VerticalAlignments } from '../../../../common/text_utils';
 import { GroupByAccessor } from '../../../../specs';
 import { LegendPath } from '../../../../state/actions/legend';
 import { ContinuousDomainFocus } from '../../renderer/canvas/partition';
@@ -30,6 +30,7 @@ import { Config, PartitionLayout } from './config_types';
 
 /** @internal */
 export type LinkLabelVM = {
+  isRTL: boolean;
   linkLabels: PointTuples;
   translate: PointTuple;
   textAlign: CanvasTextAlign;
@@ -44,6 +45,7 @@ export interface RowBox extends Font {
   text: string;
   width: Distance;
   wordBeginning: Distance;
+  isValue?: boolean;
 }
 
 interface RowAnchor {
@@ -71,7 +73,8 @@ export interface RowSet {
   fontSize: number;
   rotation: Radian;
   verticalAlignment: VerticalAlignments;
-  leftAlign: boolean; // might be generalized into horizontalAlign - if needed
+  horizontalAlignment: HorizontalAlignment;
+  isRTL: boolean;
   container?: any;
   clipText?: boolean;
 }
@@ -193,6 +196,14 @@ export const nullShapeViewModel = (specifiedConfig?: Config, diskCenter?: PointO
   outerRadius: 0,
 });
 
+/** @internal */
+export const hasMostlyRTLLabels = (geoms: ShapeViewModel[]): boolean =>
+  geoms.reduce(
+    (surplus: number, { rowSets }) =>
+      surplus + rowSets.reduce((excess: number, { isRTL }) => excess + (isRTL ? 1 : -1), 0),
+    0,
+  ) > 0;
+
 /** @public */
 export type TreeLevel = number;
 

diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts
@@ -19,9 +19,16 @@ import {
   wrapToTau,
 } from '../../../../common/geometry';
 import { logarithm } from '../../../../common/math';
-import { Box, Font, PartialFont, TextMeasure, VerticalAlignments } from '../../../../common/text_utils';
+import {
+  Box,
+  Font,
+  HorizontalAlignment,
+  PartialFont,
+  TextMeasure,
+  VerticalAlignments,
+} from '../../../../common/text_utils';
 import { integerSnap, monotonicHillClimb } from '../../../../solvers/monotonic_hill_climb';
-import { ValueFormatter } from '../../../../utils/common';
+import { getOppositeAlignment, isRTLString, ValueFormatter } from '../../../../utils/common';
 import { Layer } from '../../specs';
 import { Config, Padding } from '../types/config_types';
 import {
@@ -140,6 +147,7 @@ export const getRectangleRowGeometry: GetShapeRowGeometry<RectangleConstruction>
     fontSize,
     overhang,
   );
+
   return {
     rowAnchorX: cx + left / 2 - right / 2,
     rowAnchorY,
@@ -163,8 +171,9 @@ function identityRowSet(): RowSet {
     fontSize: NaN,
     fillTextColor: '',
     rotation: NaN,
+    isRTL: false,
     verticalAlignment: VerticalAlignments.middle,
-    leftAlign: false,
+    horizontalAlignment: HorizontalAlignment.center,
   };
 }
 
@@ -179,12 +188,11 @@ function getAllBoxes(
   return rawTextGetter(node)
     .split(' ')
     .filter(Boolean)
-    .map((text) => ({ text, ...sizeInvariantFontShorthand }))
+    .map<Box>((text) => ({ text, ...sizeInvariantFontShorthand, isValue: false }))
     .concat(
-      valueFormatter(valueGetter(node))
-        .split(' ')
+      [valueFormatter(valueGetter(node))]
         .filter(Boolean)
-        .map((text) => ({ text, ...sizeInvariantFontShorthand, ...valueFont })),
+        .map<Box>((text) => ({ text, ...sizeInvariantFontShorthand, ...valueFont, isValue: true })),
     );
 }
 
@@ -224,6 +232,7 @@ function fill<C>(
     leftAlign: boolean,
     middleAlign: boolean,
   ) {
+    const horizontalAlignment = leftAlign ? HorizontalAlignment.left : HorizontalAlignment.center;
     const { maxRowCount, fillLabel } = config;
     return (allFontSizes: Pixels[][], textFillOrigin: PointTuple, node: QuadViewModel): RowSet => {
       const container = shapeConstructor(node);
@@ -257,6 +266,7 @@ function fill<C>(
         fontFamily,
         textColor: node.textColor,
       };
+      const isRtlString = isRTLString(rawTextGetter(node));
       const allBoxes = getAllBoxes(rawTextGetter, valueGetter, valueFormatter, sizeInvariantFont, valueFont, node);
       const [cx, cy] = textFillOrigin;
 
@@ -268,14 +278,15 @@ function fill<C>(
           measure,
           rotation,
           verticalAlignment,
-          leftAlign,
+          horizontalAlignment,
           container,
           getShapeRowGeometry,
           cx,
           cy,
           padding,
           node,
           clipText,
+          isRtlString,
         ),
         fillTextColor: node.textColor,
       };
@@ -287,7 +298,7 @@ function tryFontSize<C>(
   measure: TextMeasure,
   rotation: Radian,
   verticalAlignment: VerticalAlignments,
-  leftAlign: boolean,
+  horizontalAlignment: HorizontalAlignment,
   container: C,
   getShapeRowGeometry: GetShapeRowGeometry<C>,
   cx: Coordinate,
@@ -296,8 +307,10 @@ function tryFontSize<C>(
   node: ShapeTreeNode,
   boxes: Box[],
   maxRowCount: number,
-  clipText?: boolean,
+  clipText: boolean,
+  isRTL: boolean,
 ) {
+  const adjustedHorizontalAlignment = isRTL ? getOppositeAlignment(horizontalAlignment) : horizontalAlignment;
   return function tryFontSizeFn(initialRowSet: RowSet, fontSize: Pixels): { rowSet: RowSet; completed: boolean } {
     let rowSet: RowSet = initialRowSet;
 
@@ -327,8 +340,9 @@ function tryFontSize<C>(
         fillTextColor: '',
         rotation,
         verticalAlignment,
-        leftAlign,
+        horizontalAlignment: adjustedHorizontalAlignment,
         clipText,
+        isRTL,
         rows: [...new Array(targetRowCount)].map(() => ({
           rowWords: [],
           rowAnchorX: NaN,
@@ -372,7 +386,6 @@ function tryFontSize<C>(
         while (measuredBoxes.length > 0 && rowHasRoom) {
           // adding box to row
           const [currentBox] = measuredBoxes;
-
           const wordBeginning = currentRowLength;
           currentRowLength += currentBox.width + wordSpacing;
 
@@ -402,20 +415,21 @@ function getRowSet<C>(
   measure: TextMeasure,
   rotation: Radian,
   verticalAlignment: VerticalAlignments,
-  leftAlign: boolean,
+  horizontalAlignment: HorizontalAlignment,
   container: C,
   getShapeRowGeometry: GetShapeRowGeometry<C>,
   cx: Coordinate,
   cy: Coordinate,
   padding: Padding,
   node: ShapeTreeNode,
   clipText: boolean,
-) {
+  isRtl: boolean,
+): RowSet {
   const tryFunction = tryFontSize(
     measure,
     rotation,
     verticalAlignment,
-    leftAlign,
+    horizontalAlignment,
     container,
     getShapeRowGeometry,
     cx,
@@ -425,6 +439,7 @@ function getRowSet<C>(
     boxes,
     maxRowCount,
     clipText,
+    isRtl,
   );
 
   // find largest fitting font size

diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
@@ -19,7 +19,7 @@ import {
   trueBearingToStandardPositionAngle,
 } from '../../../../common/geometry';
 import { cutToLength, fitText, Font, measureOneBoxWidth, TextMeasure } from '../../../../common/text_utils';
-import { ValueFormatter } from '../../../../utils/common';
+import { isRTLString, ValueFormatter } from '../../../../utils/common';
 import { Logger } from '../../../../utils/logger';
 import { Point } from '../../../../utils/point';
 import { Config, LinkLabelConfig } from '../types/config_types';
@@ -167,13 +167,20 @@ function nodeToLinkLabel({
       [stemToX + west * linkLabel.horizontalStemLength, stemToY],
     ];
 
+    const rawLabelText = rawTextGetter(node);
+    const isRTL = isRTLString(rawLabelText);
+
     // value text is simple: the full, formatted value is always shown, not truncated
     const valueText = valueFormatter(valueGetter(node));
-    const valueWidth = measureOneBoxWidth(measure, linkLabel.fontSize, { ...valueFont, text: valueText });
+    const valueWidth = measureOneBoxWidth(measure, linkLabel.fontSize, {
+      ...valueFont,
+      text: valueText,
+      isValue: false,
+    });
     const widthAdjustment = valueWidth + 2 * linkLabel.fontSize; // gap between label and value, plus possibly 2em wide ellipsis
 
     // label text removes space allotted for value and gaps, then tries to fit as much as possible
-    const labelText = cutToLength(rawTextGetter(node), maxTextLength);
+    const labelText = cutToLength(rawLabelText, maxTextLength);
     const allottedLabelWidth = Math.max(
       0,
       rightSide ? rectWidth - diskCenter.x - translateX - widthAdjustment : diskCenter.x + translateX - widthAdjustment,
@@ -184,6 +191,7 @@ function nodeToLinkLabel({
         : { text: '', width: 0 };
 
     return {
+      isRTL,
       linkLabels,
       translate,
       text,