diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 13849ac255c..78049a7ea24 100644 --- 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; // (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 index e60d181b32f..f2a3b70df7b 100644 --- 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 = { 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 = { 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 deleted file mode 100644 index e801747bf27..00000000000 --- a/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { Color } from '../../../../common/colors'; -import { Pixels, SizeRatio } from '../../../../common/geometry'; -import { FontFamily } from '../../../../common/text_utils'; - -// todo switch to `io-ts` style, generic way of combining static and runtime type info -/** @public */ -export interface Config { - angleStart: number; - angleEnd: number; - - // shape geometry - width: number; - height: number; - margin: { left: SizeRatio; right: SizeRatio; top: SizeRatio; bottom: SizeRatio }; - - // general text config - fontFamily: FontFamily; - - // fill text config - minFontSize: Pixels; - maxFontSize: Pixels; - - // other - backgroundColor: Color; - sectorLineWidth: Pixels; -} 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 index 4699e2b4447..07829c5d553 100644 --- 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; /** @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 index a5448e789da..00621ec3f17 100644 --- 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(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 index a3a3ad2da69..7cf8b1531a8 100644 --- 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 index ab0e1036505..adc3b8c216c 100644 --- 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; 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 index 559c87aedae..62302052da8 100644 --- 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 index aa0c1fa8deb..5afcdc0a86d 100644 --- 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 = {}): 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 index 348335b0ac9..c45cfda94e9 100644 --- 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} /> , ); @@ -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} /> , diff --git a/storybook/stories/goal/14_one_third.story.tsx b/storybook/stories/goal/14_one_third.story.tsx index 880e0e6519d..cc28b62ffdd 100644 --- 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} /> ); diff --git a/storybook/stories/goal/15_half_circle.story.tsx b/storybook/stories/goal/15_half_circle.story.tsx index 5e92eae4637..4799b373eba 100644 --- 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} /> ); diff --git a/storybook/stories/goal/16_two_thirds.story.tsx b/storybook/stories/goal/16_two_thirds.story.tsx index 52d0e7cd47d..a1050859c29 100644 --- 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} /> ); diff --git a/storybook/stories/goal/17_total_circle.story.tsx b/storybook/stories/goal/17_total_circle.story.tsx index 31085abdaf2..aa519d63cf3 100644 --- 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} /> ); diff --git a/storybook/stories/goal/17_very_small_gap.story.tsx b/storybook/stories/goal/17_very_small_gap.story.tsx index 252d549e1fb..26e27cf419a 100644 --- 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} /> ); diff --git a/storybook/stories/goal/18_side_gauge.story.tsx b/storybook/stories/goal/18_side_gauge.story.tsx index 12763b60900..8a478720fd3 100644 --- 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} /> ); 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 index 0e62be76e2b..6fdd5e4500c 100644 --- 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} /> ); diff --git a/storybook/stories/goal/25_goal_semantic.story.tsx b/storybook/stories/goal/25_goal_semantic.story.tsx index 7999d261697..673ab458160 100644 --- 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} /> diff --git a/storybook/stories/goal/2_gauge_with_target.story.tsx b/storybook/stories/goal/2_gauge_with_target.story.tsx index 896ea51bb09..f10369f9a70 100644 --- 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} /> ); diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx index d862640f675..d5c7d58e0f4 100644 --- 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} /> ); }