refactor: add textColor override to fill label, improve vrt error log…

…ging

.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/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,30 @@ 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) {
+        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 +431,29 @@ 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 {
+        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 +465,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/partition_stories.test.ts

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { PartitionLayout } from '@elastic/charts/src';
+
 import { eachTheme } from '../helpers';
 import { common } from '../page_objects';
 
@@ -21,36 +23,64 @@ describe('Axis stories', () => {
     );
   });
 
-  eachTheme.describe((theme, params) => {
-    it(`should show default textColor in ${theme} theme`, async () => {
+  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 in ${theme} theme`, async () => {
+    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 in ${theme} theme`, async () => {
+    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 in ${theme} theme`, async () => {
+    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 in ${theme} theme`, async () => {
+    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 in ${theme} theme`, async () => {
+    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/src/chart_types/partition_chart/layout/config.ts

@@ -197,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,

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 };
   });
 }

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>