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

.eslintrc.js

@@ -152,14 +152,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': 'error',
     'no-unused-expressions': 'error',

integration/tests/partition.test.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { eachTheme } from '../helpers';
+import { common } from '../page_objects/common';
+
+describe('Partition', () => {
+  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

@@ -67,8 +67,8 @@
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^38.0.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

@@ -1411,7 +1411,7 @@ export type OrdinalDomain = (number | string)[];
 // @public (undocumented)
 export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void;
 
-// @public (undocumented)
+// @public
 export type Padding = PerSideDistance;
 
 // @public (undocumented)
@@ -1429,17 +1429,6 @@ export type PartialTheme = RecursivePartial<Theme>;
 // @public (undocumented)
 export const Partition: React_2.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;
 
-// Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export interface PartitionConfig extends StaticConfig {
-    // @alpha (undocumented)
-    animation: {
-        duration: TimeMs;
-        keyframes: Array<AnimKeyframe>;
-    };
-}
-
 // @public (undocumented)
 export type PartitionElementEvent = [Array<LayerValue>, SeriesIdentifier];
 
@@ -2122,12 +2111,13 @@ export interface Theme {
     colors: ColorConfig;
     // (undocumented)
     crosshair: CrosshairStyle;
-    // (undocumented)
     goal: GoalStyles;
     // (undocumented)
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
+    // Warning: (ae-forgotten-export) The symbol "PartitionStyle" needs to be exported by the entry point index.d.ts
+    partition: PartitionStyle;
     // (undocumented)
     scales: ScalesConfig;
     // (undocumented)
@@ -2426,8 +2416,6 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // src/chart_types/heatmap/layout/types/config_types.ts:19:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:47:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:48:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
-// 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/chart_types/partition_chart/layout/types/config_types.ts:138:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

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

@@ -7,15 +7,13 @@
  */
 
 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 { 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) {
@@ -24,7 +22,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 */
@@ -63,7 +61,8 @@ export const VALUE_GETTERS = Object.freeze({ percent: percentValueGetter, ratio:
 /** @public */
 export type ValueGetterName = keyof typeof VALUE_GETTERS;
 
-function defaultFormatter(d: number): string {
+/** @internal */
+export function defaultValueFormatter(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(void 0, {
@@ -113,7 +112,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 },
@@ -203,7 +205,7 @@ export const configMetadata: Record<string, ConfigItem> = {
         type: 'function',
       },
       valueFormatter: {
-        dflt: defaultFormatter,
+        dflt: defaultValueFormatter,
         type: 'function',
       },
       valueFont,
@@ -302,16 +304,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

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

@@ -6,13 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { $Values as Values } from 'utility-types';
+import { $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 { PerSideDistance } from '../../../../utils/dimensions';
+import { Ratio, TimeMs } from '../../../../common/geometry';
 
 /** @public */
 export const PartitionLayout = Object.freeze({
@@ -25,100 +21,7 @@ export const PartitionLayout = Object.freeze({
 });
 
 /** @public */
-export type PartitionLayout = Values<typeof PartitionLayout>; // could use ValuesType<typeof HierarchicalChartTypes>
-
-/** @public */
-export type PerSidePadding = PerSideDistance;
-
-/** @public */
-export type Padding = Pixels | Partial<PerSidePadding>;
-
-interface LabelConfig extends Font {
-  textColor: Color;
-  valueFormatter: ValueFormatter;
-  valueFont: PartialFont;
-  padding: Padding;
-}
-
-/** @public */
-export interface FillLabelConfig extends LabelConfig {
-  clipText: boolean;
-}
-
-/** @public */
-export interface LinkLabelConfig extends LabelConfig {
-  fontSize: Pixels; // todo consider putting it in Font
-  maximumSection: Distance; // use linked labels below this limit
-  gap: Pixels;
-  spacing: Pixels;
-  minimumStemLength: Distance;
-  stemAngle: Radian;
-  horizontalStemLength: Distance;
-  radiusPadding: Distance;
-  lineWidth: Pixels;
-  maxCount: number;
-  maxTextLength: number;
-}
-
-/** @public */
-export interface FillFontSizeRange {
-  minFontSize: Pixels;
-  maxFontSize: Pixels;
-  idealFontSizeJump: Ratio;
-  /**
-   * When `maximizeFontSize` is false (the default), text font will not be larger than font sizes in larger sectors/rectangles in the same pie chart,
-   * sunburst ring or treemap layer. When it is set to true, the largest font, not exceeding `maxFontSize`, that fits in the slice/sector/rectangle
-   * will be chosen for easier text readability, irrespective of the value.
-   */
-  maximizeFontSize: boolean;
-}
-
-/** @public */
-export interface RelativeMargins {
-  left: SizeRatio;
-  right: SizeRatio;
-  top: SizeRatio;
-  bottom: SizeRatio;
-}
-
-// todo switch to `io-ts` style, generic way of combining static and runtime type info
-/** @public */
-export interface StaticConfig extends FillFontSizeRange {
-  // shape geometry
-  width: number;
-  height: number;
-  margin: RelativeMargins;
-  emptySizeRatio: SizeRatio;
-  outerSizeRatio: SizeRatio;
-  clockwiseSectors: boolean;
-  specialFirstInnermostSector: boolean;
-  partitionLayout: PartitionLayout;
-  /** @alpha */
-  drilldown: boolean;
-
-  // general text config
-  fontFamily: FontFamily;
-
-  // fill text layout config
-  circlePadding: Distance;
-  radialPadding: Distance;
-  horizontalTextAngleThreshold: Radian;
-  horizontalTextEnforcer: Ratio;
-  maxRowCount: number;
-  fillOutside: boolean;
-  radiusOutside: Radius;
-  fillRectangleWidth: Distance;
-  fillRectangleHeight: Distance;
-  fillLabel: FillLabelConfig;
-
-  // linked labels (primarily: single-line)
-  linkLabel: LinkLabelConfig;
-
-  // global
-  backgroundColor: Color;
-  sectorLineWidth: Pixels;
-  sectorLineStroke: StrokeStyle;
-}
+export type PartitionLayout = $Values<typeof PartitionLayout>; // could use ValuesType<typeof HierarchicalChartTypes>
 
 /** @alpha */
 export type EasingFunction = (x: Ratio) => Ratio;
@@ -127,14 +30,14 @@ export type EasingFunction = (x: Ratio) => Ratio;
 export interface AnimKeyframe {
   time: number;
   easingFunction: EasingFunction;
-  keyframeConfig: Partial<StaticConfig>;
+  // keyframeConfig: Partial<StaticConfig>;
 }
 
 /** @public */
-export interface Config extends StaticConfig {
+export interface AnimationConfig {
   /** @alpha */
-  animation: {
+  animation?: {
     duration: TimeMs;
-    keyframes: Array<AnimKeyframe>;
+    keyframes?: Array<AnimKeyframe>;
   };
 }

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

@@ -21,12 +21,15 @@ import {
 import { Font, VerticalAlignments } from '../../../../common/text_utils';
 import { GroupByAccessor } from '../../../../specs';
 import { LegendPath } from '../../../../state/actions/legend';
+import { Size } from '../../../../utils/dimensions';
+import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
+import { Theme } from '../../../../utils/themes/theme';
 import { ContinuousDomainFocus } from '../../renderer/canvas/partition';
 import { Layer } from '../../specs';
-import { config, MODEL_KEY, ValueGetterName } from '../config';
+import { MODEL_KEY, ValueGetterName } from '../config';
 import { ArrayNode, HierarchyOfArrays } from '../utils/group_by_rollup';
 import { LinkLabelsViewModelSpec } from '../viewmodel/link_text_layout';
-import { Config, PartitionLayout } from './config_types';
+import { AnimationConfig, PartitionLayout } from './config_types';
 
 /** @internal */
 export type LinkLabelVM = {
@@ -102,7 +105,7 @@ export type PickFunction = (x: Pixels, y: Pixels, focus: ContinuousDomainFocus)
 /** @internal */
 export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors {
   smAccessorValue: number | string;
-  partitionLayout: PartitionLayout;
+  layout: PartitionLayout;
   top: SizeRatio;
   left: SizeRatio;
   width: SizeRatio;
@@ -123,8 +126,9 @@ export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors
 }
 
 /** @internal */
-export interface ShapeViewModel extends PartitionSmallMultiplesModel {
-  config: Config;
+export interface ShapeViewModel extends PartitionSmallMultiplesModel, AnimationConfig {
+  style: Theme['partition'];
+  chartDimensions: Size;
   layers: Layer[];
   quadViewModel: QuadViewModel[];
   rowSets: RowSet[];
@@ -144,7 +148,9 @@ const defaultFont: Font = {
 };
 
 /** @internal */
-export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayout): PartitionSmallMultiplesModel => ({
+export const nullPartitionSmallMultiplesModel = (
+  layout: PartitionLayout = PartitionLayout.sunburst,
+): PartitionSmallMultiplesModel => ({
   index: 0,
   innerIndex: 0,
   smAccessorValue: '',
@@ -158,7 +164,7 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou
   innerColumnIndex: 0,
   marginLeftPx: 0,
   marginTopPx: 0,
-  partitionLayout,
+  layout,
   panel: {
     title: '',
     innerWidth: 0,
@@ -175,9 +181,13 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou
 });
 
 /** @internal */
-export const nullShapeViewModel = (specifiedConfig?: Config, diskCenter?: PointObject): ShapeViewModel => ({
-  ...nullPartitionSmallMultiplesModel((specifiedConfig || config).partitionLayout),
-  config: specifiedConfig || config,
+export const nullShapeViewModel = (
+  layout: PartitionLayout = PartitionLayout.sunburst,
+  style: Theme['partition'] = LIGHT_THEME.partition,
+  diskCenter?: PointObject,
+): ShapeViewModel => ({
+  ...nullPartitionSmallMultiplesModel(layout),
+  style,
   layers: [],
   quadViewModel: [],
   rowSets: [],
@@ -191,6 +201,10 @@ export const nullShapeViewModel = (specifiedConfig?: Config, diskCenter?: PointO
   diskCenter: diskCenter || { x: 0, y: 0 },
   pickQuads: () => [],
   outerRadius: 0,
+  chartDimensions: {
+    width: 0,
+    height: 0,
+  },
 });
 
 /** @public */