fix(partition): linkLabel textColor override (#1498)

.eslintrc.js

@@ -263,6 +263,7 @@ module.exports = {
      */
     'jest/no-standalone-expect': 0, // using custom expect functions
     'jest/no-disabled-tests': 0,
+    'jest/no-identical-title': 0, // does not account for <describe|it>.each
 
     /*
      * unicorn plugin

integration/helpers.ts

@@ -154,11 +154,11 @@ const themeIds = Object.values(ThemeId);
 export const eachTheme = {
   it(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
     // eslint-disable-next-line jest/valid-title
-    return it.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+    return it.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `globals=theme:${theme}`));
   },
   describe(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
     // eslint-disable-next-line jest/valid-title, jest/valid-describe
-    return describe.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+    return describe.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `globals=theme:${theme}`));
   },
 };
 

integration/page_objects/common.ts

@@ -8,8 +8,6 @@
 
 import Url from 'url';
 
-import { AXNode } from 'puppeteer';
-
 import { DRAG_DETECTION_TIMEOUT } from '../../packages/charts/src/state/reducers/interactions';
 // @ts-ignore - no type declarations
 import { port, hostname, debug, isLegacyVRTServer } from '../config';
@@ -320,23 +318,31 @@ class CommonPage {
     selector: string = 'body',
     options?: ScreenshotElementAtUrlOptions,
   ) {
-    await this.loadElementFromURL(url, options?.waitSelector ?? selector, options?.timeout);
+    try {
+      const success = await this.loadElementFromURL(url, options?.waitSelector ?? selector, options?.timeout);
 
-    if (options?.action) {
-      await options.action();
-    }
+      expect(success).toBe(true);
 
-    if (options?.delay) {
-      await page.waitFor(options.delay);
-    }
+      if (options?.action) {
+        await options.action();
+      }
 
-    const element = await this.screenshotDOMElement(options?.screenshotSelector ?? selector, options);
+      if (options?.delay) {
+        await page.waitFor(options.delay);
+      }
 
-    if (!element) {
-      throw new Error(`Error: Unable to find element\n\n\t${url}`);
-    }
+      const element = await this.screenshotDOMElement(options?.screenshotSelector ?? selector, options);
+
+      if (!element) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to find element at \`${selector}\`\n\n\t${url}`);
+      }
 
-    expect(element).toMatchImageSnapshot();
+      expect(element).toBeDefined();
+      expect(element).toMatchImageSnapshot();
+    } catch {
+      // prevent throwing error on failed assertion
+    }
   }
 
   /**
@@ -426,20 +432,30 @@ class CommonPage {
    * @param waitSelector selector of element to wait to appear in DOM
    * @param timeout timeout for waiting on element to appear in DOM
    */
-  async loadElementFromURL(url: string, waitSelector?: string, timeout?: number) {
+  async loadElementFromURL(url: string, waitSelector?: string, timeout?: number): Promise<boolean> {
     const cleanUrl = CommonPage.parseUrl(url);
     await page.goto(cleanUrl);
 
     if (waitSelector) {
-      await this.waitForElement(waitSelector, timeout);
+      try {
+        await this.waitForElement(waitSelector, timeout);
+        return true;
+      } catch {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to load url. Check story at: \n\n\tstorybook url: ${url}\n\tlocal vrt url: ${cleanUrl}`);
+        return false;
+      }
     }
 
     if (isLegacyVRTServer) {
       // activate peripheral visibility
       await page.evaluate(() => {
         document.querySelector('html')!.classList.add('echVisualTesting');
       });
+      return true;
     }
+
+    return false;
   }
 
   /**
@@ -451,19 +467,6 @@ class CommonPage {
   async waitForElement(waitSelector: string, timeout = 10000) {
     await page.waitForSelector(waitSelector, { timeout });
   }
-
-  /**
-   * puppeteer accessibility functionality
-   * @param {string} [url]
-   * @param {string} [waitSelector]
-   */
-  async testAccessibilityTree(url: string, waitSelector: string): Promise<AXNode> {
-    await this.loadElementFromURL(url, waitSelector);
-    const accessibilitySnapshot = await page.accessibility.snapshot().then((value) => {
-      return value;
-    });
-    return accessibilitySnapshot;
-  }
 }
 
 export const common = new CommonPage();

integration/tests/axis_stories.test.ts

@@ -14,7 +14,7 @@ describe('Axis stories', () => {
   eachTheme.describe((_, params) => {
     it('should switch to a 30 minute raster', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        `http://localhost:9001/?path=/story/area-chart--timeslip${params}&globals=knob-Minor%20grid%20lines=true&knob-Shorter%20X%20axis%20minor%20whiskers=true&knob-Stretch%20time=-6&knob-Time%20stretch=100&knob-Time%20zoom=119&knob-X%20axis%20minor%20whiskers=true`,
+        `http://localhost:9001/?path=/story/area-chart--timeslip&${params}&knob-Minor%20grid%20lines=true&knob-Shorter%20X%20axis%20minor%20whiskers=true&knob-Stretch%20time=-6&knob-Time%20stretch=100&knob-Time%20zoom=119&knob-X%20axis%20minor%20whiskers=true`,
       );
     });
   });

integration/tests/goal_stories.test.ts

@@ -47,19 +47,19 @@ describe('Goal stories', () => {
   eachTheme.describe((_, params) => {
     it('should render gauge with target story', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--gauge-with-target${params}`,
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--gauge-with-target&${params}`,
       );
     });
 
     it('should render minimal goal story', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--minimal-goal${params}`,
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--minimal-goal&${params}`,
       );
     });
 
     it('should render vertical negative story', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--vertical-negative${params}`,
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--vertical-negative&${params}`,
       );
     });
   });

integration/tests/partition_stories.test.ts

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { PartitionLayout } from '../../packages/charts/src';
+import { eachTheme } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Axis stories', () => {
@@ -19,4 +21,65 @@ describe('Axis stories', () => {
       'http://localhost:9001/?path=/story/mosaic-alpha--other-slices&globals=background:white;theme:light&knob-"Other" on bottom even if not the smallest=false&knob-Alphabetical outer group sorting=true',
     );
   });
+
+  eachTheme.describe((_, params) => {
+    it('should show default textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=false`,
+      );
+    });
+    it('should show custom red textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(171, 146, 146, .85)`,
+      );
+    });
+    it('should show custom white textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(255, 255, 255, 1)`,
+      );
+    });
+    it('should show custom black textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(0, 0, 0, 1)`,
+      );
+    });
+    it('should show custom white/translucent textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(255, 255, 255, 0.3)`,
+      );
+    });
+    it('should show custom black/translucent textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(0, 0, 0, 0.3)`,
+      );
+    });
+  }, 'linkLabel textcolor - %s theme');
+
+  describe.each([PartitionLayout.treemap, PartitionLayout.sunburst])('fillLabel textcolor - %s', (partitionLayout) => {
+    it('should show custom red textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(255, 0, 0, 0.85)`,
+      );
+    });
+    it('should show custom white textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(255, 255, 255, 1)`,
+      );
+    });
+    it('should show custom black textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(0, 0, 0, 1)`,
+      );
+    });
+    it('should show custom white/translucent textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(255, 255, 255, 0.3)`,
+      );
+    });
+    it('should show custom black/translucent textColor', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(0, 0, 0, 0.3)`,
+      );
+    });
+  });
 });

packages/charts/api/charts.api.md

@@ -499,6 +499,7 @@ export interface ColorConfig {
 export const ColorVariant: Readonly<{
     Series: "__use__series__color__";
     None: "__use__empty__color__";
+    Adaptive: "__use__adaptive__color__";
 }>;
 
 // @public (undocumented)

packages/charts/src/chart_types/partition_chart/layout/config.ts

@@ -10,6 +10,7 @@ import { Colors } from '../../../common/colors';
 import { ConfigItem, configMap, Numeric } from '../../../common/config_objects';
 import { GOLDEN_RATIO, TAU } from '../../../common/constants';
 import { FONT_STYLES, FONT_VARIANTS } from '../../../common/text_utils';
+import { ColorVariant } from '../../../utils/common';
 import { Config, PartitionLayout } from './types/config_types';
 import { ShapeTreeNode } from './types/viewmodel_types';
 import { AGGREGATE_KEY, STATISTICS_KEY } from './utils/group_by_rollup';
@@ -196,7 +197,7 @@ export const configMetadata: Record<string, ConfigItem> = {
   fillLabel: {
     type: 'group',
     values: {
-      textColor: { type: 'color', dflt: '#000000' },
+      textColor: { type: 'color', dflt: ColorVariant.Adaptive },
       ...fontSettings,
       valueGetter: {
         dflt: sumValueGetter,
@@ -283,7 +284,7 @@ export const configMetadata: Record<string, ConfigItem> = {
         max: 200,
         documentation: 'Limits the total number of characters in linked labels.',
       },
-      textColor: { dflt: '#000000', type: 'color' },
+      textColor: { dflt: ColorVariant.Adaptive, type: 'color' },
       minimumStemLength: {
         dflt: 0,
         min: 0,

packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts

@@ -11,7 +11,7 @@ import { $Values as Values } from 'utility-types';
 import { Color } from '../../../../common/colors';
 import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry';
 import { Font, FontFamily, PartialFont } from '../../../../common/text_utils';
-import { StrokeStyle, ValueFormatter } from '../../../../utils/common';
+import { ColorVariant, StrokeStyle, ValueFormatter } from '../../../../utils/common';
 import { PerSideDistance } from '../../../../utils/dimensions';
 
 /** @public */
@@ -34,7 +34,7 @@ export type PerSidePadding = PerSideDistance;
 export type Padding = Pixels | Partial<PerSidePadding>;
 
 interface LabelConfig extends Font {
-  textColor: Color;
+  textColor: Color | typeof ColorVariant.Adaptive;
   valueFormatter: ValueFormatter;
   valueFont: PartialFont;
   padding: Padding;

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 { isRTLString, ValueFormatter } from '../../../../utils/common';
+import { ColorVariant, isRTLString, ValueFormatter } from '../../../../utils/common';
 import { Logger } from '../../../../utils/logger';
 import { Point } from '../../../../utils/point';
 import { Config, LinkLabelConfig } from '../types/config_types';
@@ -85,7 +85,8 @@ export function linkTextLayout(
       containerBgColor,
     );
   }
-  const textColor = fillTextColor(containerBgColor);
+  const textColor =
+    linkLabel.textColor === ColorVariant.Adaptive ? fillTextColor(containerBgColor) : linkLabel.textColor;
   const labelFontSpec: Font = { ...linkLabel, textColor };
   const valueFontSpec: Font = { ...linkLabel, ...linkLabel.valueFont, textColor };
 

packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts

@@ -20,7 +20,7 @@ import {
 } from '../../../../common/geometry';
 import { Part, TextMeasure } from '../../../../common/text_utils';
 import { GroupByAccessor, SmallMultiplesStyle } from '../../../../specs';
-import { StrokeStyle, ValueFormatter, RecursivePartial } from '../../../../utils/common';
+import { StrokeStyle, ValueFormatter, RecursivePartial, ColorVariant } from '../../../../utils/common';
 import { Logger } from '../../../../utils/logger';
 import { Layer } from '../../specs';
 import { config as defaultConfig, MODEL_KEY, percentValueGetter } from '../config';
@@ -156,10 +156,13 @@ export function makeQuadViewModel(
     const strokeWidth = sectorLineWidth;
     const strokeStyle = sectorLineStroke;
     const textNegligible = node.y1px - node.y0px < minRectHeightForText;
-    const textColor =
-      !isSunburstLayout && textNegligible
-        ? Colors.Transparent.keyword
-        : fillTextColor(fillColor, containerBackgroundColor);
+
+    const textColor = textNegligible
+      ? Colors.Transparent.keyword
+      : fillLabel.textColor === ColorVariant.Adaptive
+      ? fillTextColor(fillColor, containerBackgroundColor)
+      : fillLabel.textColor;
+
     return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor, ...node };
   });
 }

packages/charts/src/utils/common.ts

@@ -49,6 +49,10 @@ export const ColorVariant = Object.freeze({
    * Uses empty color, similar to transparent.
    */
   None: '__use__empty__color__' as const,
+  /**
+   * Computes best color based on background contrast
+   */
+  Adaptive: '__use__adaptive__color__' as const,
 });
 /** @public */
 export type ColorVariant = $Values<typeof ColorVariant>;

storybook/stories/sunburst/24_linked_label.story.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { boolean, color } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
@@ -34,7 +35,12 @@ export const Example = () => (
       ]}
       config={{
         partitionLayout: PartitionLayout.sunburst,
-        linkLabel: { maximumSection: Infinity },
+        linkLabel: {
+          maximumSection: Infinity,
+          textColor: boolean('custom linkLabel.textColor', true)
+            ? color('linkLabel.textColor', 'rgba(0, 0, 0, 1)')
+            : undefined,
+        },
       }}
     />
   </Chart>

storybook/stories/treemap/2_one_layer_2.story.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { boolean, color, select } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
@@ -44,7 +45,19 @@ export const Example = () => (
         },
       ]}
       config={{
-        partitionLayout: PartitionLayout.treemap,
+        partitionLayout: select(
+          'partitionLayout',
+          {
+            Treemap: PartitionLayout.treemap,
+            Sunburst: PartitionLayout.sunburst,
+          },
+          PartitionLayout.treemap,
+        ),
+        fillLabel: {
+          textColor: boolean('custom fillLabel.textColor', false)
+            ? color('fillLabel.textColor', 'rgba(0, 0, 0, 1)')
+            : undefined,
+        },
       }}
     />
   </Chart>