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

.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;
 }
@@ -751,6 +747,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 +1570,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 +1588,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 +1632,43 @@ 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;
+    // (undocumented)
+    textColor: Color;
+}
+
 // @public (undocumented)
 export const PATH_KEY = "path";
 
@@ -1910,8 +1937,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 +2318,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 +2599,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/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

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 { ColorVariant, 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 | typeof ColorVariant.Adaptive;
-  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>;
   };
 }