feat(types): improve generic types in specs, and spec prop types

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.63",
+    "@microsoft/api-extractor": "^7.18.16",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",

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

@@ -58,8 +58,6 @@ export type ShapeViewModel = {
 };
 
 const commonDefaults = {
-  specType: SpecType.Series,
-  subtype: GoalSubtype.Goal,
   base: 0,
   actual: 50,
   ticks: [0, 25, 50, 75, 100],
@@ -85,6 +83,8 @@ export const defaultGoalSpec = {
 /** @internal */
 export const nullGoalViewModel = {
   ...commonDefaults,
+  specType: SpecType.Series,
+  subtype: GoalSubtype.Goal,
   bands: [],
   ticks: [],
   labelMajor: '',

packages/charts/src/chart_types/goal_chart/specs/index.ts

@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { Color } from '../../../common/colors';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { specComponentFactory } from '../../../state/spec_factory';
 import { LabelAccessor, RecursivePartial } from '../../../utils/common';
 import { Config } from '../layout/types/config_types';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
@@ -36,11 +36,6 @@ export type BandFillColorAccessor = (input: BandFillColorAccessorInput) => Color
 /** @alpha */
 export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
 
-const defaultProps = {
-  chartType: ChartType.Goal,
-  ...defaultGoalSpec,
-};
-
 /** @alpha */
 export interface GoalSpec extends Spec {
   specType: typeof SpecType.Series;
@@ -67,28 +62,19 @@ export interface GoalSpec extends Spec {
   bandLabels: string[];
 }
 
-type SpecRequiredProps = Pick<GoalSpec, 'id' | 'actual'>;
-type SpecOptionalProps = Partial<Omit<GoalSpec, 'chartType' | 'specType' | 'id' | 'data'>>;
-
-/** @alpha */
-export const Goal: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    GoalSpec,
-    | 'chartType'
-    | 'subtype'
-    | 'base'
-    | 'target'
-    | 'actual'
-    | 'bands'
-    | 'bandLabels'
-    | 'ticks'
-    | 'bandFillColor'
-    | 'tickValueFormatter'
-    | 'labelMajor'
-    | 'labelMinor'
-    | 'centralMajor'
-    | 'centralMinor'
-    | 'angleStart'
-    | 'angleEnd'
-  >(defaultProps),
+/**
+ * Add Goal spec to chart
+ * @alpha
+ */
+export const Goal = specComponentFactory<GoalSpec>()(
+  {
+    specType: SpecType.Series,
+    chartType: ChartType.Goal,
+  },
+  {
+    ...defaultGoalSpec,
+  },
 );
+
+/** @public */
+export type GoalProps = ComponentProps<typeof Goal>;

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

@@ -18,7 +18,7 @@ import { ScaleType } from '../../../../scales/constants';
 import { LinearScale, OrdinalScale, RasterTimeScale, SettingsSpec } from '../../../../specs';
 import { withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
 import { addIntervalToTime } from '../../../../utils/chrono/elasticsearch';
-import { clamp } from '../../../../utils/common';
+import { clamp, Datum } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { Logger } from '../../../../utils/logger';
 import { Theme } from '../../../../utils/themes/theme';
@@ -36,6 +36,7 @@ import {
   ShapeViewModel,
   TextBox,
 } from '../types/viewmodel_types';
+import { BaseDatum } from './../../../xy_chart/utils/specs';
 
 /** @public */
 export interface HeatmapCellDatum {
@@ -71,9 +72,9 @@ function estimatedNonOverlappingTickCount(
 }
 
 /** @internal */
-export function shapeViewModel(
+export function shapeViewModel<D extends BaseDatum = Datum>(
   textMeasure: TextMeasure,
-  spec: HeatmapSpec,
+  spec: HeatmapSpec<D>,
   config: Config,
   settingsSpec: SettingsSpec,
   chartDimensions: Dimensions,

packages/charts/src/chart_types/heatmap/specs/heatmap.ts

@@ -6,36 +6,22 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps, useRef } from 'react';
 
 import { ChartType } from '../..';
 import { Color } from '../../../common/colors';
 import { Predicate } from '../../../common/predicate';
 import { ScaleType } from '../../../scales/constants';
-import { Spec } from '../../../specs';
+import { BaseDatum, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
 import { Accessor, AccessorFn } from '../../../utils/accessor';
 import { ESCalendarInterval, ESFixedInterval } from '../../../utils/chrono/elasticsearch';
-import { Datum, RecursivePartial } from '../../../utils/common';
+import { Datum, RecursivePartial, stripUndefined } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
 import { X_SCALE_DEFAULT } from './scale_defaults';
 
-const defaultProps = {
-  chartType: ChartType.Heatmap,
-  specType: SpecType.Series,
-  data: [],
-  xAccessor: ({ x }: { x: string | number }) => x,
-  yAccessor: ({ y }: { y: string | number }) => y,
-  xScale: { type: X_SCALE_DEFAULT.type },
-  valueAccessor: ({ value }: { value: string | number }) => value,
-  valueFormatter: (value: number) => `${value}`,
-  xSortPredicate: Predicate.AlphaAsc,
-  ySortPredicate: Predicate.AlphaAsc,
-  config,
-};
-
 /** @public */
 export type HeatmapScaleType =
   | typeof ScaleType.Linear
@@ -80,14 +66,14 @@ export interface OrdinalScale {
 }
 
 /** @alpha */
-export interface HeatmapSpec extends Spec {
+export interface HeatmapSpec<D extends BaseDatum = Datum> extends Spec {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.Heatmap;
-  data: Datum[];
+  data: D[];
   colorScale: HeatmapBandsColorScale;
-  xAccessor: Accessor | AccessorFn;
-  yAccessor: Accessor | AccessorFn;
-  valueAccessor: Accessor | AccessorFn;
+  xAccessor: Accessor<D> | AccessorFn<D>;
+  yAccessor: Accessor<D> | AccessorFn<D>;
+  valueAccessor: Accessor<never> | AccessorFn;
   valueFormatter: (value: number) => string;
   xSortPredicate: Predicate;
   ySortPredicate: Predicate;
@@ -97,20 +83,41 @@ export interface HeatmapSpec extends Spec {
   name?: string;
 }
 
-/** @alpha */
-export const Heatmap: React.FunctionComponent<
-  Pick<HeatmapSpec, 'id' | 'data' | 'colorScale'> & Partial<Omit<HeatmapSpec, 'chartType' | 'specType' | 'id' | 'data'>>
-> = getConnect()(
-  specComponentFactory<
-    HeatmapSpec,
-    | 'xAccessor'
-    | 'yAccessor'
-    | 'valueAccessor'
-    | 'data'
-    | 'ySortPredicate'
-    | 'xSortPredicate'
-    | 'valueFormatter'
-    | 'config'
-    | 'xScale'
-  >(defaultProps),
-);
+/**
+ * Adds heatmap spec to chart specs
+ * @alpha
+ */
+export const Heatmap = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    HeatmapSpec<D>,
+    keyof typeof buildProps.current['overrides'],
+    keyof typeof buildProps.current['defaults'],
+    keyof typeof buildProps.current['optionals'],
+    keyof typeof buildProps.current['requires']
+  >,
+) {
+  const buildProps = useRef(
+    // @ts-ignore - excessively deep types
+    buildSFProps<HeatmapSpec<D>>()(
+      {
+        chartType: ChartType.Heatmap,
+        specType: SpecType.Series,
+      },
+      {
+        data: [],
+        valueAccessor: ({ value }) => value,
+        xScale: { type: X_SCALE_DEFAULT.type },
+        valueFormatter: (value) => `${value}`,
+        xSortPredicate: Predicate.AlphaAsc,
+        ySortPredicate: Predicate.AlphaAsc,
+        config,
+      },
+    ),
+  );
+  const { defaults, overrides } = buildProps.current;
+  useSpecFactory<HeatmapSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
+
+/** @public */
+export type HeatmapProps = ComponentProps<typeof Heatmap>;

packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts

@@ -33,7 +33,6 @@ export const getHeatmapTableSelector = createCustomCachedSelector(
     const resultData = data.reduce<HeatmapTable>(
       (acc, curr, index) => {
         const x = getAccessorValue(curr, xAccessor);
-
         const y = getAccessorValue(curr, yAccessor);
         const value = getAccessorValue(curr, valueAccessor);