refactor(partition): remove config in favor on spec and theme controls (

#1402)

BREAKING CHANGES: The `PartitionSpec.config` prop is removed. All properties have been moved/renamed under new `Theme.partition` options or `PartitionSpec` itself with the following exceptions:

- `PartitionSpec.config.margin` is removed in favor of `Theme.chartPaddings`. This no longer supports ratios.
- `PartitionSpec.config.backgroundColor` is removed in favor of `Theme.background.color`.
- `PartitionSpec.config.width` and `PartitionSpec.config.height` both removed as they were never used.

.eslintrc.js

@@ -153,14 +153,7 @@ module.exports = {
         ignoreRegExpLiterals: true,
       },
     ],
-    'no-unused-vars': [
-      'error',
-      {
-        vars: 'all',
-        args: 'after-used',
-        ignoreRestSiblings: true,
-      },
-    ],
+    'no-unused-vars': 0,
     'sort-keys': 0,
     'no-irregular-whitespace': 'warn',
     'no-unused-expressions': 'error',

integration/tests/partition_stories.test.ts

@@ -82,4 +82,10 @@ describe('Axis stories', () => {
       );
     });
   });
+
+  eachTheme.it(async (_, urlParam) => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      `http://localhost:9001/?path=/story/sunburst--value-formatted-with-categorical-color-palette&${urlParam}`,
+    );
+  }, 'should render link labels with fallback text color for %s theme');
 });

package.json

@@ -68,8 +68,8 @@
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^41.3.0",
     "@mdx-js/loader": "^1.6.6",
-    "@microsoft/api-documenter": "^7.12.7",
-    "@microsoft/api-extractor": "^7.18.9",
+    "@microsoft/api-documenter": "^7.13.54",
+    "@microsoft/api-extractor": "^7.18.11",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",

packages/charts/api/charts.api.md

@@ -51,10 +51,6 @@ export interface AnimKeyframe {
     //
     // (undocumented)
     easingFunction: EasingFunction;
-    // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    keyframeConfig: Partial<StaticConfig>;
     // (undocumented)
     time: number;
 }
@@ -237,6 +233,7 @@ export interface AxisStyle {
 // @public
 export interface BackgroundStyle {
     color: string;
+    fallbackColor: Color;
 }
 
 // @public
@@ -751,6 +748,9 @@ export const DEFAULT_TOOLTIP_SNAP = true;
 // @public
 export const DEFAULT_TOOLTIP_TYPE: "vertical";
 
+// @public (undocumented)
+export function defaultPartitionValueFormatter(d: number): string;
+
 // @public (undocumented)
 export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'pointerUpdateDebounce' | 'pointerUpdateTrigger' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'legendSize' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption' | 'allowBrushingLastHistogramBin';
 
@@ -1571,7 +1571,7 @@ export interface OrdinalScale {
 // @public (undocumented)
 export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void;
 
-// @public (undocumented)
+// @public
 export type Padding = PerSideDistance;
 
 // @public (undocumented)
@@ -1589,15 +1589,6 @@ export type PartialTheme = RecursivePartial<Theme>;
 // @public (undocumented)
 export const Partition: React_2.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;
 
-// @public (undocumented)
-export interface PartitionConfig extends StaticConfig {
-    // @alpha (undocumented)
-    animation: {
-        duration: TimeMs;
-        keyframes: Array<AnimKeyframe>;
-    };
-}
-
 // @public (undocumented)
 export type PartitionElementEvent = [Array<LayerValue>, SeriesIdentifier];
 
@@ -1642,6 +1633,41 @@ export const PartitionLayout: Readonly<{
 // @public (undocumented)
 export type PartitionLayout = $Values<typeof PartitionLayout>;
 
+// Warning: (ae-forgotten-export) The symbol "FillFontSizeRange" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export interface PartitionStyle extends FillFontSizeRange {
+    // Warning: (ae-forgotten-export) The symbol "Distance" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    circlePadding: Distance;
+    // Warning: (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
+    emptySizeRatio: SizeRatio;
+    // (undocumented)
+    fillLabel: PartitionFillLabel;
+    // Warning: (ae-forgotten-export) The symbol "FontFamily" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    fontFamily: FontFamily;
+    // (undocumented)
+    horizontalTextAngleThreshold: Radian;
+    // (undocumented)
+    horizontalTextEnforcer: Ratio;
+    // Warning: (ae-forgotten-export) The symbol "LinkLabelConfig" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    linkLabel: LinkLabelConfig;
+    outerSizeRatio: SizeRatio;
+    // (undocumented)
+    radialPadding: Distance;
+    // Warning: (ae-forgotten-export) The symbol "StrokeStyle" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    sectorLineStroke: StrokeStyle_2;
+    // (undocumented)
+    sectorLineWidth: Pixels;
+}
+
 // @public (undocumented)
 export const PATH_KEY = "path";
 
@@ -1910,8 +1936,6 @@ export type ScaleType = $Values<typeof ScaleType>;
 
 // @public (undocumented)
 export interface SectorGeomSpecY {
-    // Warning: (ae-forgotten-export) The symbol "Distance" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     y0px: Distance;
     // (undocumented)
@@ -2293,14 +2317,13 @@ export interface Theme {
     colors: ColorConfig;
     // (undocumented)
     crosshair: CrosshairStyle;
-    // (undocumented)
     goal: GoalStyles;
-    // (undocumented)
     heatmap: HeatmapStyle;
     // (undocumented)
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
+    partition: PartitionStyle;
     // (undocumented)
     scales: ScalesConfig;
     // (undocumented)
@@ -2575,9 +2598,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 
 // Warnings were encountered during analysis:
 //
-// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
-// src/utils/themes/theme.ts:216:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
-// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
+// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
+// src/utils/themes/theme.ts:218:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

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

@@ -134,7 +134,7 @@ export function shapeViewModel(
 
   if (colorToRgba(background.color)[3] < 1) {
     Logger.expected(
-      `Text contrast requires a opaque background color, using white as fallback`,
+      'Text contrast requires a opaque background color, using fallbackColor',
       'an opaque color',
       background.color,
     );
@@ -185,7 +185,7 @@ export function shapeViewModel(
       visible: !isValueHidden(d.value, bandsToHide),
       formatted: formattedValue,
       fontSize,
-      textColor: fillTextColor(cellBackgroundColor, background.color),
+      textColor: fillTextColor(background.fallbackColor, cellBackgroundColor, background.color),
     };
     return acc;
   }, {});

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

@@ -7,16 +7,14 @@
  */
 
 import { Colors } from '../../../common/colors';
-import { ConfigItem, configMap, Numeric } from '../../../common/config_objects';
+import { ConfigItem, 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 { PartitionLayout } from './types/config_types';
 import { ShapeTreeNode } from './types/viewmodel_types';
 import { AGGREGATE_KEY, STATISTICS_KEY } from './utils/group_by_rollup';
 
-const LOG_10 = Math.log(10);
-
 function significantDigitCount(d: number): number {
   let n = Math.abs(parseFloat(String(d).replace('.', '')));
   if (n === 0) {
@@ -25,7 +23,7 @@ function significantDigitCount(d: number): number {
   while (n !== 0 && n % 10 === 0) {
     n /= 10;
   }
-  return Math.floor(Math.log(n) / LOG_10) + 1;
+  return Math.floor(Math.log(n) / Math.LN10) + 1;
 }
 
 /** @internal */
@@ -64,7 +62,8 @@ export const VALUE_GETTERS = Object.freeze({ percent: percentValueGetter, ratio:
 /** @public */
 export type ValueGetterName = keyof typeof VALUE_GETTERS;
 
-function defaultFormatter(d: number): string {
+/** @public */
+export function defaultPartitionValueFormatter(d: number): string {
   return Math.abs(d) >= 10000000 || Math.abs(d) < 0.001
     ? d.toExponential(Math.min(2, Math.max(0, significantDigitCount(d) - 1)))
     : d.toLocaleString(undefined, {
@@ -114,7 +113,10 @@ const valueFont = {
   },
 };
 
-/** @internal */
+/**
+ * Keeping for future config validation checks
+ * @internal
+ */
 export const configMetadata: Record<string, ConfigItem> = {
   // shape geometry
   width: { dflt: 300, min: 0, max: 1024, type: 'number', reconfigurable: false },
@@ -204,7 +206,7 @@ export const configMetadata: Record<string, ConfigItem> = {
         type: 'function',
       },
       valueFormatter: {
-        dflt: defaultFormatter,
+        dflt: defaultPartitionValueFormatter,
         type: 'function',
       },
       valueFont,
@@ -303,16 +305,12 @@ export const configMetadata: Record<string, ConfigItem> = {
     },
   },
 
-  // other
   backgroundColor: { dflt: Colors.White.keyword, type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
   sectorLineStroke: { dflt: Colors.White.keyword, type: 'string' },
   animation: { type: 'group', values: { duration: { dflt: 0, min: 0, max: 3000, type: 'number' } } },
 };
 
-/** @internal */
-export const config: Config = configMap<Config>((item: ConfigItem) => item.dflt, configMetadata);
-
 /**
  * Part-to-whole visualizations such as treemap, sunburst, pie hinge on an aggregation
  * function such that the value is independent of the order of how the constituents are aggregated