chore: attempt deep defaults in spec factory

packages/charts/src/chart_types/xy_chart/specs/axis.tsx

@@ -10,26 +10,30 @@ import React from 'react';
 
 import { ChartType } from '../..';
 import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
+import { specComponentFactory, getConnect, DefaultFactorProps } from '../../../state/spec_factory';
 import { Position } from '../../../utils/common';
 import { AxisSpec, DEFAULT_GLOBAL_ID } from '../utils/specs';
 
-const defaultProps = {
+const defaultProps: DefaultProps = {
   chartType: ChartType.XYAxis,
   specType: SpecType.Axis,
   groupId: DEFAULT_GLOBAL_ID,
   hide: false,
   showOverlappingTicks: false,
   showOverlappingLabels: false,
   position: Position.Left,
+  domain: {
+    min: NaN,
+    max: NaN,
+  },
 };
 
 type SpecRequired = Pick<AxisSpec, 'id'>;
 type SpecOptionals = Partial<Omit<AxisSpec, 'chartType' | 'specType' | 'seriesType' | 'id'>>;
+type DefaultKeys = 'groupId' | 'hide' | 'showOverlappingTicks' | 'showOverlappingLabels' | 'position' | 'domain';
+type DefaultProps = DefaultFactorProps<AxisSpec, DefaultKeys>;
 
 /** @public */
 export const Axis: React.FunctionComponent<SpecRequired & SpecOptionals> = getConnect()(
-  specComponentFactory<AxisSpec, 'groupId' | 'hide' | 'showOverlappingTicks' | 'showOverlappingLabels' | 'position'>(
-    defaultProps,
-  ),
+  specComponentFactory<AxisSpec, DefaultKeys>(defaultProps, ['domain']),
 );

packages/charts/src/state/spec_factory.ts

@@ -11,23 +11,46 @@ import { connect } from 'react-redux';
 import { Dispatch, bindActionCreators } from 'redux';
 
 import { Spec } from '../specs';
-import { upsertSpec, removeSpec } from './actions/specs';
+import { isObject } from '../utils/common';
+import { upsertSpec as upsertSpecAction, removeSpec as removeSpecAction } from './actions/specs';
 
 /** @internal */
 export interface DispatchProps {
-  upsertSpec: (spec: Spec) => void;
-  removeSpec: (id: string) => void;
+  upsertSpec: typeof upsertSpecAction;
+  removeSpec: typeof removeSpecAction;
 }
 
-/** @internal */
-export function specComponentFactory<U extends Spec, D extends keyof U>(
-  defaultProps: Pick<U, D | 'chartType' | 'specType'>,
+/**
+ * Get default factory props type
+ * @internal */
+export type DefaultFactorProps<S extends Spec, Props extends keyof S> = Pick<S, Props | 'chartType' | 'specType'>;
+
+/**
+ * Spec instance factory
+ * @param defaultProps
+ * @param deepDefaults objects to do a shallow spread
+ * @returns spec instance Component
+ * @internal
+ */
+export function specComponentFactory<S extends Spec, Props extends keyof S>(
+  defaultProps: DefaultFactorProps<S, Props>,
+  deepDefaults: (keyof DefaultFactorProps<S, Props>)[] = [],
 ) {
   /* eslint-disable no-shadow, react-hooks/exhaustive-deps, unicorn/consistent-function-scoping */
-  const SpecInstance = (props: U & DispatchProps) => {
+  const SpecInstance = (props: S & DispatchProps) => {
     const { removeSpec, upsertSpec, ...SpecInstance } = props;
+
     useEffect(() => {
-      upsertSpec(SpecInstance);
+      upsertSpec({
+        ...SpecInstance,
+        ...deepDefaults.reduce((acc, k) => {
+          const key = k as keyof typeof SpecInstance;
+          if (SpecInstance && isObject(SpecInstance[key])) {
+            acc[key] = { ...defaultProps, ...props[key] } as any;
+          }
+          return acc;
+        }, {} as any),
+      });
     });
     useEffect(
       () => () => {
@@ -45,8 +68,8 @@ export function specComponentFactory<U extends Spec, D extends keyof U>(
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps =>
   bindActionCreators(
     {
-      upsertSpec,
-      removeSpec,
+      upsertSpec: upsertSpecAction,
+      removeSpec: removeSpecAction,
     },
     dispatch,
   );

packages/charts/src/utils/common.tsx

@@ -623,3 +623,8 @@ export function range(start: number, stop: number, step: number): Array<number>
   }
   return output;
 }
+
+/** @internal */
+export function isObject(o: unknown): o is Record<string, unknown> {
+  return Boolean(o) && typeof o === 'object' && !Array.isArray(o);
+}

storybook/stories/bar/32_scale_to_extent.story.tsx

@@ -9,7 +9,7 @@
 import { boolean, number, select } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Axis, Chart, DomainPaddingUnit, Position, ScaleType, Settings } from '@elastic/charts';
+import { Axis, Chart, DomainPaddingUnit, Position, ScaleType, Settings, YDomainRange } from '@elastic/charts';
 import { computeContinuousDataDomain } from '@elastic/charts/src/utils/domain';
 
 import { useBaseTheme } from '../../use_base_theme';
@@ -67,10 +67,9 @@ export const Example = () => {
     default:
       data = mixed;
   }
-  const customDomain = { fit, padding, paddingUnit, constrainPadding, nice, min: NaN, max: NaN };
 
   if (shouldLogDomains) {
-    logDomains(data, customDomain);
+    logDomains(data, { fit, padding, paddingUnit, constrainPadding });
   }
 
   return (
@@ -79,7 +78,7 @@ export const Example = () => {
       <Axis id="top" position={Position.Top} title="Top axis" />
       <Axis
         id="left"
-        domain={customDomain}
+        domain={{ fit, padding, paddingUnit, constrainPadding }}
         title="Left axis"
         position={Position.Left}
         tickFormat={(d: any) => Number(d).toFixed(2)}