feat(settings): expose global charts context for settings

integration/server/generate/vrt_page_template.js

@@ -41,8 +41,7 @@ ReactDOM.render(<VRTPage />, document.getElementById('story-root') as HTMLElemen
 
 function pageTemplate(imports, routes, urls) {
  return `
-import React, { Suspense } from 'react';
-import { ThemeIdProvider, BackgroundIdProvider } from '../../storybook/use_base_theme';
+import React, { Suspense, useMemo } from 'react';
 import { useGlobalsParameters } from '../server/mocks/use_global_parameters';
 
 export function VRTPage() {
@@ -52,6 +51,7 @@ export function VRTPage() {
  setParams,
  } = useGlobalsParameters();
  const urlParams = new URL(window.location.toString()).searchParams;
+ const contextValue = useMemo(() => getContext(themeId, backgroundId), [themeId, backgroundId]);
  ${imports.join('\n ')}
 
  const path = urlParams.get('path');
@@ -68,13 +68,11 @@ export function VRTPage() {
  </>);
  }
  return (
- <ThemeIdProvider value={themeId as any}>
- <BackgroundIdProvider value={backgroundId}>
- <Suspense fallback={<div>Loading...</div>}>
- ${routes.join('\n ')}
- </Suspense>
- </BackgroundIdProvider>
- </ThemeIdProvider>
+ <ElasticChartsProvider value={contextValue}>
+ <Suspense fallback={<div>Loading...</div>}>
+ ${routes.join('\n ')}
+ </Suspense>
+ </ElasticChartsProvider>
  );
 }
 

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/specs/heatmap.ts

@@ -6,35 +6,21 @@
  * 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 { SeriesScales, Spec } from '../../../specs';
+import { BaseDatum, SeriesScales, 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 { Datum, RecursivePartial } from '../../../utils/common';
+import { RecursivePartial } 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,
- xScaleType: 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
@@ -59,13 +45,13 @@ export interface HeatmapBandsColorScale {
 }
 
 /** @alpha */
-export interface HeatmapSpec extends Spec {
+export interface HeatmapSpec<D extends BaseDatum> extends Spec {
  specType: typeof SpecType.Series;
  chartType: typeof ChartType.Heatmap;
- data: Datum[];
+ data: D[];
  colorScale: HeatmapBandsColorScale;
- xAccessor: Accessor | AccessorFn;
- yAccessor: Accessor | AccessorFn;
+ xAccessor: keyof D | AccessorFn<D>;
+ yAccessor: keyof D | AccessorFn<D>;
  valueAccessor: Accessor | AccessorFn;
  valueFormatter: (value: number) => string;
  xSortPredicate: Predicate;
@@ -76,20 +62,42 @@ 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'
- | 'xScaleType'
- >(defaultProps),
-);
+/**
+ * Adds heatmap spec to chart specs
+ * @alpha
+ */
+export const Heatmap = function <Datum extends BaseDatum>(
+ props: SFProps<
+ HeatmapSpec<Datum>,
+ keyof typeof buildProps.current['overrides'],
+ keyof typeof buildProps.current['defaults'],
+ keyof typeof buildProps.current['optionals'],
+ keyof typeof buildProps.current['requires']
+ >,
+) {
+ const buildProps = useRef(
+ buildSFProps<HeatmapSpec<Datum>>()(
+ {
+ chartType: ChartType.Heatmap,
+ specType: SpecType.Series,
+ },
+ {
+ data: [],
+ // xAccessor: ({ x }: { x: string | number }) => x,
+ // yAccessor: ({ y }: { y: string | number }) => y,
+ valueAccessor: ({ value }) => value,
+ xScaleType: X_SCALE_DEFAULT.type,
+ valueFormatter: (value) => `${value}`,
+ xSortPredicate: Predicate.AlphaAsc,
+ ySortPredicate: Predicate.AlphaAsc,
+ config,
+ },
+ ),
+ );
+ const { defaults, overrides } = buildProps.current;
+ useSpecFactory<HeatmapSpec<Datum>>({ ...defaults, ...props, ...overrides });
+ return null;
+};
+
+/** @public */
+export type HeatmapProps = ComponentProps<typeof Heatmap>;

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

@@ -13,7 +13,7 @@ import { getSpecsFromStore } from '../../../../state/utils';
 import { HeatmapSpec } from '../../specs/heatmap';
 
 /** @internal */
-export function getSpecOrNull(state: GlobalChartState): HeatmapSpec | null {
- const specs = getSpecsFromStore<HeatmapSpec>(state.specs, ChartType.Heatmap, SpecType.Series);
+export function getSpecOrNull(state: GlobalChartState): HeatmapSpec<unknown> | null {
+ const specs = getSpecsFromStore<HeatmapSpec<unknown>>(state.specs, ChartType.Heatmap, SpecType.Series);
  return specs.length > 0 ? specs[0] : null;
 }