refactor(goal): remove deprecated config (#1408)

BREAKING CHANGE: The `GoalSpec.config` prop is removed. All properties have been moved/renamed under new `Theme.goal` options with the following exceptions: - `Config.margin` is now controlled by `Theme.chartMargins` and is no longer a margin ratio as before. - `Config.backgroundColor` is now controlled by `Theme.background.color`, even though it's not yet used. - `fontFamily` moved into each respective label styles - `angleStart` and `angleEnd` are moved onto the `GoalSpec` as optional values. - `sectorLineWidth`, `width` and `height` all removed as they were never used.
elastic · Dec 15, 2021 · 312e31d · 312e31d
1 parent 9538417
commit 312e31d
Show file tree

Hide file tree

Showing 20 changed files with 46 additions and 118 deletions.
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -964,10 +964,6 @@ export interface GoalSpec extends Spec {
     centralMinor: string | GoalLabelAccessor;
     // (undocumented)
     chartType: typeof ChartType.Goal;
-    // Warning: (ae-forgotten-export) The symbol "Config" needs to be exported by the entry point index.d.ts
-    //
-    // @deprecated (undocumented)
-    config?: RecursivePartial<Config>;
     // (undocumented)
     labelMajor: string | GoalLabelAccessor;
     // (undocumented)

diff --git a/packages/charts/src/chart_types/goal_chart/layout/config/config.ts b/packages/charts/src/chart_types/goal_chart/layout/config/config.ts
@@ -16,8 +16,6 @@ import { TAU } from '../../../../common/constants';
 export const configMetadata: Record<string, ConfigItem> = {
   angleStart: { dflt: Math.PI + Math.PI / 4, min: -TAU, max: TAU, type: 'number' },
   angleEnd: { dflt: -Math.PI / 4, min: -TAU, max: TAU, type: 'number' },
-
-  // shape geometry
   margin: {
     type: 'group',
     values: {
@@ -27,17 +25,12 @@ export const configMetadata: Record<string, ConfigItem> = {
       bottom: { dflt: 0, min: -0.25, max: 0.25, type: 'number' },
     },
   },
-
-  // general text config
   fontFamily: {
     dflt: 'Sans-Serif',
     type: 'string',
   },
-
-  // fill text config
   minFontSize: { dflt: 8, min: 0.1, max: 8, type: 'number', reconfigurable: true },
   maxFontSize: { dflt: 64, min: 0.1, max: 64, type: 'number' },
-
   backgroundColor: { dflt: '#ffffff', type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
 };
diff --git a/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts
diff --git a/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts
@@ -51,7 +51,7 @@ export type PickFunction = (x: Pixels, y: Pixels) => Array<BulletViewModel>;
 
 /** @internal */
 export type ShapeViewModel = {
-  config: Theme['goal'];
+  theme: Theme['goal'];
   bulletViewModel: BulletViewModel;
   chartCenter: PointObject;
   pickQuads: PickFunction;
@@ -101,7 +101,7 @@ export const nullGoalViewModel = {
 
 /** @internal */
 export const nullShapeViewModel = ({ goal }: Theme = LIGHT_THEME): ShapeViewModel => ({
-  config: goal,
+  theme: goal,
   bulletViewModel: nullGoalViewModel,
   chartCenter: { x: 0, y: 0 },
   pickQuads: () => [],

diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts
@@ -231,7 +231,7 @@ function get<T>(o: { [k: string]: any }, name: string, dflt: T) {
 /** @internal */
 export function geoms(
   bulletViewModel: BulletViewModel,
-  config: Theme['goal'],
+  theme: Theme['goal'],
   partentDimensions: Dimensions,
   chartCenter: PointObject,
 ): Mark[] {
@@ -308,21 +308,21 @@ export function geoms(
     {
       order: 1,
       landmarks: { from: 'base', to: 'actual', yOffset: 'yOffset' },
-      aes: { shape, fillColor: config.progressLine.stroke, lineWidth: tickLength },
+      aes: { shape, fillColor: theme.progressLine.stroke, lineWidth: tickLength },
     },
     ...(target
       ? [
           {
             order: 2,
             landmarks: { at: 'target', yOffset: 'yOffset' },
-            aes: { shape, fillColor: config.targetLine.stroke, lineWidth: barThickness / GOLDEN_RATIO },
+            aes: { shape, fillColor: theme.targetLine.stroke, lineWidth: barThickness / GOLDEN_RATIO },
           },
         ]
       : []),
     ...bulletViewModel.ticks.map((b, i) => ({
       order: 3,
       landmarks: { at: `tick_${i}`, yOffset: 'yOffset' },
-      aes: { shape, fillColor: config.tickLine.stroke, lineWidth: tickLength, axisNormalOffset: tickOffset },
+      aes: { shape, fillColor: theme.tickLine.stroke, lineWidth: tickLength, axisNormalOffset: tickOffset },
     })),
     ...bulletViewModel.ticks.map((b, i) => ({
       order: 4,
@@ -331,8 +331,8 @@ export function geoms(
         shape: 'text',
         textAlign: vertical ? 'right' : 'center',
         textBaseline: vertical ? 'middle' : 'top',
-        fillColor: config.tickLabel.fill,
-        fontShape: { ...config.tickLabel, fontVariant: 'normal', fontWeight: '500' },
+        fillColor: theme.tickLabel.fill,
+        fontShape: { ...theme.tickLabel, fontVariant: 'normal', fontWeight: '500' },
         axisNormalOffset: -barThickness,
       },
     })),
@@ -345,8 +345,8 @@ export function geoms(
         axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize,
         textAlign: vertical ? 'center' : 'right',
         textBaseline: 'bottom',
-        fillColor: config.majorLabel.fill,
-        fontShape: { ...config.majorLabel, fontVariant: 'normal', fontWeight: '900' },
+        fillColor: theme.majorLabel.fill,
+        fontShape: { ...theme.majorLabel, fontVariant: 'normal', fontWeight: '900' },
       },
     },
     {
@@ -358,8 +358,8 @@ export function geoms(
         axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize,
         textAlign: vertical ? 'center' : 'right',
         textBaseline: 'top',
-        fillColor: config.minorLabel.fill,
-        fontShape: { ...config.minorLabel, fontVariant: 'normal', fontWeight: '300' },
+        fillColor: theme.minorLabel.fill,
+        fontShape: { ...theme.minorLabel, fontVariant: 'normal', fontWeight: '300' },
       },
     },
     ...(circular
@@ -371,8 +371,8 @@ export function geoms(
               shape: 'text',
               textAlign: 'center',
               textBaseline: 'bottom',
-              fillColor: config.majorCenterLabel.fill,
-              fontShape: { ...config.majorCenterLabel, fontVariant: 'normal', fontWeight: '900' },
+              fillColor: theme.majorCenterLabel.fill,
+              fontShape: { ...theme.majorCenterLabel, fontVariant: 'normal', fontWeight: '900' },
             },
           },
           {
@@ -382,8 +382,8 @@ export function geoms(
               shape: 'text',
               textAlign: 'center',
               textBaseline: 'top',
-              fillColor: config.minorCenterLabel.fill,
-              fontShape: { ...config.minorCenterLabel, fontVariant: 'normal', fontWeight: '300' },
+              fillColor: theme.minorCenterLabel.fill,
+              fontShape: { ...theme.minorCenterLabel, fontVariant: 'normal', fontWeight: '300' },
             },
           },
         ]

diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts
@@ -92,7 +92,7 @@ export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Di
       : [];
 
   return {
-    config: theme.goal,
+    theme: theme.goal,
     chartCenter,
     bulletViewModel,
     pickQuads,

diff --git a/packages/charts/src/chart_types/goal_chart/specs/index.ts b/packages/charts/src/chart_types/goal_chart/specs/index.ts
@@ -13,8 +13,7 @@ import { Color } from '../../../common/colors';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { LabelAccessor, RecursivePartial } from '../../../utils/common';
-import { Config } from '../layout/types/config_types';
+import { LabelAccessor } from '../../../utils/common';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
 import { GoalSubtype } from './constants';
 
@@ -57,11 +56,6 @@ export interface GoalSpec extends Spec {
   labelMinor: string | GoalLabelAccessor;
   centralMajor: string | GoalLabelAccessor;
   centralMinor: string | GoalLabelAccessor;
-  /**
-   * @deprecated properties have been migrated to the theme or spec.
-   * To be removed with partition, heatmap and wordmap configs.
-   */
-  config?: RecursivePartial<Config>;
   angleStart: number;
   angleEnd: number;
   bandLabels: string[];

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts
@@ -33,7 +33,7 @@ export const geometries = createCustomCachedSelector(
 export const getPrimitiveGeoms = createCustomCachedSelector(
   [geometries, getParentDimensions],
   (shapeViewModel, parentDimensions): Mark[] => {
-    const { chartCenter, bulletViewModel, config } = shapeViewModel;
-    return geoms(bulletViewModel, config, parentDimensions, chartCenter);
+    const { chartCenter, bulletViewModel, theme } = shapeViewModel;
+    return geoms(bulletViewModel, theme, parentDimensions, chartCenter);
   },
 );
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/scenegraph.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/scenegraph.ts
@@ -6,43 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { mergePartial, RecursivePartial } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
-import { PartialTheme, Theme } from '../../../../utils/themes/theme';
-import { Config } from '../../layout/types/config_types';
+import { Theme } from '../../../../utils/themes/theme';
 import { ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { shapeViewModel } from '../../layout/viewmodel/viewmodel';
 import { GoalSpec } from '../../specs';
 
-/**
- * Helper to map old config to theme
- * remove when `spec.config` is fully deprecated
- */
-const mapConfigToTheme = ({
-  margin,
-  backgroundColor,
-  minFontSize,
-  maxFontSize,
-  fontFamily,
-}: RecursivePartial<Config> = {}): PartialTheme => ({
-  chartMargins: margin,
-  background: { color: backgroundColor },
-  goal: {
-    minFontSize,
-    maxFontSize,
-    tickLabel: { fontFamily },
-    majorLabel: { fontFamily },
-    minorLabel: { fontFamily },
-  },
-});
-
 /** @internal */
 export function render(spec: GoalSpec, parentDimensions: Dimensions, theme: Theme): ShapeViewModel {
-  // override theme and spec with old deprecated config options
-  const mergedTheme: Theme = mergePartial(theme, mapConfigToTheme(spec.config));
-  const mergedSpec: GoalSpec = mergePartial(spec, {
-    angleEnd: spec?.config?.angleEnd,
-    angleStart: spec?.config?.angleStart,
-  });
-  return shapeViewModel(mergedSpec, mergedTheme, parentDimensions);
+  return shapeViewModel(spec, theme, parentDimensions);
 }
diff --git a/packages/charts/src/components/accessibility/accessibility.test.tsx b/packages/charts/src/components/accessibility/accessibility.test.tsx
@@ -139,7 +139,8 @@ describe('Accessibility', () => {
           labelMinor="(thousand USD)  "
           centralMajor="170"
           centralMinor=""
-          config={{ angleStart: Math.PI, angleEnd: 0 }}
+          angleStart={Math.PI}
+          angleEnd={0}
         />
       </Chart>,
     );
@@ -161,7 +162,8 @@ describe('Accessibility', () => {
           labelMinor="(thousand USD)  "
           centralMajor="170"
           centralMinor=""
-          config={{ angleStart: Math.PI, angleEnd: 0 }}
+          angleStart={Math.PI}
+          angleEnd={0}
           bandLabels={bandLabelsAscending}
         />
       </Chart>,

diff --git a/storybook/stories/goal/14_one_third.story.tsx b/storybook/stories/goal/14_one_third.story.tsx
@@ -42,7 +42,8 @@ export const Example = () => (
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{ angleStart: Math.PI - (Math.PI - (2 * Math.PI) / 3) / 2, angleEnd: (Math.PI - (2 * Math.PI) / 3) / 2 }}
+      angleStart={Math.PI - (Math.PI - (2 * Math.PI) / 3) / 2}
+      angleEnd={(Math.PI - (2 * Math.PI) / 3) / 2}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/15_half_circle.story.tsx b/storybook/stories/goal/15_half_circle.story.tsx
@@ -42,7 +42,8 @@ export const Example = () => (
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{ angleStart: Math.PI, angleEnd: 0 }}
+      angleStart={Math.PI}
+      angleEnd={0}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/16_two_thirds.story.tsx b/storybook/stories/goal/16_two_thirds.story.tsx
@@ -42,7 +42,8 @@ export const Example = () => (
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{ angleStart: Math.PI + (Math.PI - (2 * Math.PI) / 3) / 2, angleEnd: -(Math.PI - (2 * Math.PI) / 3) / 2 }}
+      angleStart={Math.PI + (Math.PI - (2 * Math.PI) / 3) / 2}
+      angleEnd={-(Math.PI - (2 * Math.PI) / 3) / 2}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/17_total_circle.story.tsx b/storybook/stories/goal/17_total_circle.story.tsx
@@ -42,7 +42,8 @@ export const Example = () => (
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{ angleStart: Math.PI + Math.PI / 2, angleEnd: -Math.PI / 2 }}
+      angleStart={Math.PI + Math.PI / 2}
+      angleEnd={-Math.PI / 2}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/17_very_small_gap.story.tsx b/storybook/stories/goal/17_very_small_gap.story.tsx
@@ -42,7 +42,8 @@ export const Example = () => (
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{ angleStart: Math.PI + Math.PI / 2 - Math.PI / 90, angleEnd: -Math.PI / 2 + Math.PI / 90 }}
+      angleStart={Math.PI + Math.PI / 2 - Math.PI / 90}
+      angleEnd={-Math.PI / 2 + Math.PI / 90}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/18_side_gauge.story.tsx b/storybook/stories/goal/18_side_gauge.story.tsx
@@ -40,7 +40,8 @@ export const Example = () => (
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{ angleStart: -(Math.PI - (2 * Math.PI) / 3) / 2, angleEnd: (Math.PI - (2 * Math.PI) / 3) / 2 }}
+      angleStart={-(Math.PI - (2 * Math.PI) / 3) / 2}
+      angleEnd={(Math.PI - (2 * Math.PI) / 3) / 2}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/18_side_gauge_inverted_angle_relation.story.tsx b/storybook/stories/goal/18_side_gauge_inverted_angle_relation.story.tsx
@@ -40,7 +40,8 @@ export const Example = () => (
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{ angleEnd: -(Math.PI - (2 * Math.PI) / 3) / 2, angleStart: (Math.PI - (2 * Math.PI) / 3) / 2 }}
+      angleEnd={-(Math.PI - (2 * Math.PI) / 3) / 2}
+      angleStart={(Math.PI - (2 * Math.PI) / 3) / 2}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/25_goal_semantic.story.tsx b/storybook/stories/goal/25_goal_semantic.story.tsx
@@ -48,7 +48,8 @@ export const Example = () => {
         labelMinor="(thousand USD)  "
         centralMajor="170"
         centralMinor=""
-        config={{ angleStart: Math.PI, angleEnd: 0 }}
+        angleStart={Math.PI}
+        angleEnd={0}
         bandLabels={bandLabels}
       />
     </Chart>

diff --git a/storybook/stories/goal/2_gauge_with_target.story.tsx b/storybook/stories/goal/2_gauge_with_target.story.tsx
@@ -72,7 +72,8 @@ export const Example = () => {
         labelMinor="(thousand USD)  "
         centralMajor={`${actual}`}
         centralMinor=""
-        config={{ angleStart, angleEnd }}
+        angleStart={angleStart}
+        angleEnd={angleEnd}
       />
     </Chart>
   );

diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx
@@ -153,10 +153,8 @@ function renderGoalchart() {
       labelMinor=""
       centralMajor="280 MB/s"
       centralMinor=""
-      config={{
-        angleStart: Math.PI + (Math.PI - (2 * Math.PI) / 3) / 2,
-        angleEnd: -(Math.PI - (2 * Math.PI) / 3) / 2,
-      }}
+      angleStart={Math.PI + (Math.PI - (2 * Math.PI) / 3) / 2}
+      angleEnd={-(Math.PI - (2 * Math.PI) / 3) / 2}
     />
   );
 }