From 8305f1ee0d731212bf967631cce1fb0e0db28867 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 21 Sep 2021 18:51:24 +0200 Subject: [PATCH 1/6] extract Color type in a separate file --- packages/charts/api/charts.api.md | 4 ++-- .../goal_chart/layout/types/config_types.ts | 2 +- .../goal_chart/renderer/canvas/canvas_renderers.ts | 2 +- .../goal_chart/renderer/canvas/connected_component.tsx | 2 +- .../charts/src/chart_types/goal_chart/specs/index.ts | 3 ++- .../chart_types/heatmap/layout/types/config_types.ts | 2 +- .../heatmap/layout/types/viewmodel_types.ts | 2 +- .../heatmap/renderer/canvas/canvas_renderers.ts | 2 +- .../heatmap/renderer/canvas/connected_component.tsx | 2 +- .../src/chart_types/heatmap/scales/band_color_scale.ts | 3 ++- .../charts/src/chart_types/heatmap/specs/heatmap.ts | 3 ++- .../heatmap/state/selectors/get_color_scale.ts | 2 +- .../partition_chart/layout/types/config_types.ts | 3 ++- .../partition_chart/layout/types/viewmodel_types.ts | 2 +- .../layout/viewmodel/link_text_layout.ts | 3 ++- .../partition_chart/layout/viewmodel/scenegraph.ts | 3 ++- .../partition_chart/layout/viewmodel/viewmodel.ts | 3 ++- .../renderer/canvas/canvas_renderers.ts | 2 +- .../partition_chart/renderer/canvas/partition.tsx | 2 +- .../wordcloud/layout/types/viewmodel_types.ts | 2 +- .../src/chart_types/xy_chart/annotations/types.ts | 3 ++- .../charts/src/chart_types/xy_chart/legend/legend.ts | 3 ++- .../xy_chart/renderer/canvas/styles/area.ts | 3 ++- .../charts/src/chart_types/xy_chart/rendering/area.ts | 2 +- .../charts/src/chart_types/xy_chart/rendering/bars.ts | 3 ++- .../src/chart_types/xy_chart/rendering/bubble.ts | 2 +- .../charts/src/chart_types/xy_chart/rendering/line.ts | 2 +- .../src/chart_types/xy_chart/rendering/points.ts | 3 ++- .../xy_chart/state/selectors/get_series_color_map.ts | 2 +- .../src/chart_types/xy_chart/state/utils/utils.ts | 3 ++- .../charts/src/chart_types/xy_chart/utils/series.ts | 3 ++- .../charts/src/chart_types/xy_chart/utils/specs.ts | 3 ++- .../charts/src/chart_types/xy_chart/utils/texture.ts | 3 ++- packages/charts/src/common/color_library_wrappers.ts | 3 ++- packages/charts/src/common/colors.tsx | 10 ++++++++++ packages/charts/src/common/fill_text_color.ts | 2 +- packages/charts/src/common/legend.ts | 2 +- packages/charts/src/components/legend/legend_icon.tsx | 2 +- packages/charts/src/components/legend/legend_item.tsx | 3 ++- packages/charts/src/index.ts | 2 +- packages/charts/src/renderers/canvas/index.ts | 2 +- packages/charts/src/specs/settings.tsx | 2 +- packages/charts/src/state/actions/colors.ts | 2 +- packages/charts/src/state/chart_state.ts | 3 ++- packages/charts/src/utils/common.tsx | 3 +-- packages/charts/src/utils/geometry.ts | 2 +- packages/charts/src/utils/themes/theme.ts | 3 ++- storybook/stories/goal/10_band_in_band.story.tsx | 2 +- storybook/stories/goal/11_gaps.story.tsx | 2 +- storybook/stories/goal/12_range.story.tsx | 2 +- storybook/stories/goal/13_confidence_level.story.tsx | 2 +- storybook/stories/goal/14_one_third.story.tsx | 2 +- storybook/stories/goal/15_half_circle.story.tsx | 2 +- storybook/stories/goal/16_two_thirds.story.tsx | 2 +- storybook/stories/goal/17_three_quarters.story.tsx | 2 +- storybook/stories/goal/17_total_circle.story.tsx | 2 +- storybook/stories/goal/17_very_small_gap.story.tsx | 2 +- .../stories/goal/19_horizontal_negative.story.tsx | 2 +- storybook/stories/goal/20_vertical_negative.story.tsx | 2 +- storybook/stories/goal/21_goal_negative.story.tsx | 2 +- .../stories/goal/22_horizontal_plusminus.story.tsx | 2 +- storybook/stories/goal/23_vertical_plusminus.story.tsx | 2 +- storybook/stories/goal/24_goal_plusminus.story.tsx | 2 +- storybook/stories/goal/2_gauge_with_target.story.tsx | 2 +- storybook/stories/goal/3_horizontal_bullet.story.tsx | 2 +- storybook/stories/goal/4_vertical_bullet.story.tsx | 2 +- storybook/stories/goal/5_minimal.story.tsx | 2 +- storybook/stories/goal/6_minimal_horizontal.story.tsx | 2 +- storybook/stories/goal/7_horizontal_bar.story.tsx | 2 +- storybook/stories/goal/8_irregular_ticks.story.tsx | 2 +- storybook/stories/goal/9_minimal_band.story.tsx | 2 +- storybook/stories/interactions/17_png_export.story.tsx | 2 +- 72 files changed, 102 insertions(+), 73 deletions(-) create mode 100644 packages/charts/src/common/colors.tsx diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 4bb3c9c78c9..8ffce405550 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -2439,8 +2439,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions; // src/chart_types/heatmap/layout/types/config_types.ts:19:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:47:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:48:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:136:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:138:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts // (No @packageDocumentation comment for this package) 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 index 3f566f9536c..e801747bf27 100644 --- 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 @@ -6,9 +6,9 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { Pixels, SizeRatio } from '../../../../common/geometry'; import { FontFamily } from '../../../../common/text_utils'; -import { Color } from '../../../../utils/common'; // todo switch to `io-ts` style, generic way of combining static and runtime type info /** @public */ diff --git a/packages/charts/src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts index 9b81c40029f..c87e14a7e86 100644 --- a/packages/charts/src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts +++ b/packages/charts/src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts @@ -6,8 +6,8 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas'; -import { Color } from '../../../../utils/common'; import { Mark } from '../../layout/viewmodel/geoms'; /** @internal */ diff --git a/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx b/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx index a1b133eec29..fe9922518d9 100644 --- a/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx +++ b/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx @@ -10,6 +10,7 @@ import React, { MouseEvent, RefObject } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; +import { Color } from '../../../../common/colors'; import { Rectangle } from '../../../../common/geometry'; import { GoalSemanticDescription, ScreenReaderSummary } from '../../../../components/accessibility'; import { onChartRendered } from '../../../../state/actions/chart'; @@ -21,7 +22,6 @@ import { } from '../../../../state/selectors/get_accessibility_config'; import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized'; -import { Color } from '../../../../utils/common'; import { Dimensions } from '../../../../utils/dimensions'; import { BandViewModel, nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types'; import { initialBoundingBox, Mark } from '../../layout/viewmodel/geoms'; 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 aec57f22703..ab0e1036505 100644 --- a/packages/charts/src/chart_types/goal_chart/specs/index.ts +++ b/packages/charts/src/chart_types/goal_chart/specs/index.ts @@ -9,10 +9,11 @@ import React 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 { Color, LabelAccessor, RecursivePartial } from '../../../utils/common'; +import { LabelAccessor, RecursivePartial } from '../../../utils/common'; import { Config } from '../layout/types/config_types'; import { defaultGoalSpec } from '../layout/types/viewmodel_types'; import { GoalSubtype } from './constants'; diff --git a/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts b/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts index a350a3c8143..7fdf528a30b 100644 --- a/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts +++ b/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts @@ -6,9 +6,9 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { Pixels, SizeRatio } from '../../../../common/geometry'; import { Font, FontFamily, TextAlign, TextBaseline } from '../../../../common/text_utils'; -import { Color } from '../../../../utils/common'; /** * @public diff --git a/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts index 8372780e429..91ee76d964d 100644 --- a/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts +++ b/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts @@ -7,11 +7,11 @@ */ import { ChartType } from '../../..'; +import { Color } from '../../../../common/colors'; import { Pixels } from '../../../../common/geometry'; import { Box } from '../../../../common/text_utils'; import { Fill, Line, Rect, Stroke } from '../../../../geoms/types'; import { HeatmapBrushEvent } from '../../../../specs/settings'; -import { Color } from '../../../../utils/common'; import { Point } from '../../../../utils/point'; import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup'; import { config } from '../config/config'; diff --git a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts index c4640c6bf97..e6ea263d044 100644 --- a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts +++ b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts @@ -6,9 +6,9 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { Font } from '../../../../common/text_utils'; import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas'; -import { Color } from '../../../../utils/common'; import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line'; import { renderRect } from '../../../xy_chart/renderer/canvas/primitives/rect'; import { renderText, wrapLines } from '../../../xy_chart/renderer/canvas/primitives/text'; diff --git a/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx b/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx index 7af736738db..2c6a07aec12 100644 --- a/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx +++ b/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx @@ -10,6 +10,7 @@ import React, { RefObject } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; +import { Color } from '../../../../common/colors'; import { ScreenReaderSummary } from '../../../../components/accessibility'; import { onChartRendered } from '../../../../state/actions/chart'; import { GlobalChartState } from '../../../../state/chart_state'; @@ -20,7 +21,6 @@ import { } from '../../../../state/selectors/get_accessibility_config'; import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized'; -import { Color } from '../../../../utils/common'; import { Dimensions } from '../../../../utils/dimensions'; import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types'; import { geometries } from '../../state/selectors/geometries'; diff --git a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts index 1f781d8e09a..599638a34dc 100644 --- a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts +++ b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts @@ -6,8 +6,9 @@ * Side Public License, v 1. */ +import { Color } from '../../../common/colors'; import { getPredicateFn } from '../../../common/predicate'; -import { Color, safeFormat, ValueFormatter } from '../../../utils/common'; +import { safeFormat, ValueFormatter } from '../../../utils/common'; import { ColorBand, HeatmapBandsColorScale } from '../specs/heatmap'; import { ColorScale } from '../state/selectors/get_color_scale'; diff --git a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts index f1c10e0ebc2..36a8fe96f79 100644 --- a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts +++ b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts @@ -9,13 +9,14 @@ import React 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 { SpecType } from '../../../specs/constants'; import { getConnect, specComponentFactory } from '../../../state/spec_factory'; import { Accessor, AccessorFn } from '../../../utils/accessor'; -import { Color, Datum, RecursivePartial } from '../../../utils/common'; +import { Datum, RecursivePartial } from '../../../utils/common'; import { config } from '../layout/config/config'; import { Config } from '../layout/types/config_types'; import { X_SCALE_DEFAULT } from './scale_defaults'; diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts index 5ecab309122..b70efacc5ff 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts @@ -6,8 +6,8 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { createCustomCachedSelector } from '../../../../state/create_selector'; -import { Color } from '../../../../utils/common'; import { getBandsColorScale } from '../../scales/band_color_scale'; import { ColorBand } from '../../specs/heatmap'; import { getHeatmapSpecSelector } from './get_heatmap_spec'; diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts index e6d0a2ac8d4..a01b2f14602 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts @@ -8,9 +8,10 @@ import { $Values as Values } from 'utility-types'; +import { Color } from '../../../../common/colors'; import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry'; import { Font, FontFamily, PartialFont } from '../../../../common/text_utils'; -import { Color, StrokeStyle, ValueFormatter } from '../../../../utils/common'; +import { StrokeStyle, ValueFormatter } from '../../../../utils/common'; import { PerSideDistance } from '../../../../utils/dimensions'; /** @public */ diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts index aba665ad932..d7285bbc08b 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts @@ -7,6 +7,7 @@ */ import { CategoryKey } from '../../../../common/category'; +import { Color } from '../../../../common/colors'; import { Coordinate, Distance, @@ -20,7 +21,6 @@ import { import { Font, VerticalAlignments } from '../../../../common/text_utils'; import { GroupByAccessor } from '../../../../specs'; import { LegendPath } from '../../../../state/actions/legend'; -import { Color } from '../../../../utils/common'; import { ContinuousDomainFocus } from '../../renderer/canvas/partition'; import { Layer } from '../../specs'; import { config, MODEL_KEY, ValueGetterName } from '../config'; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts index fb08f60dfa7..e1551cf5013 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts @@ -7,6 +7,7 @@ */ import { colorToRgba } from '../../../../common/color_library_wrappers'; +import { Color } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; import { @@ -18,7 +19,7 @@ import { trueBearingToStandardPositionAngle, } from '../../../../common/geometry'; import { cutToLength, fitText, Font, measureOneBoxWidth, TextMeasure } from '../../../../common/text_utils'; -import { Color, ValueFormatter } from '../../../../utils/common'; +import { ValueFormatter } from '../../../../utils/common'; import { Logger } from '../../../../utils/logger'; import { Point } from '../../../../utils/point'; import { Config, LinkLabelConfig } from '../types/config_types'; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts index 671af9078ff..39f27a1d5c5 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts @@ -6,9 +6,10 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { measureText } from '../../../../common/text_utils'; import { SmallMultiplesStyle } from '../../../../specs'; -import { Color, identity, mergePartial, RecursivePartial } from '../../../../utils/common'; +import { identity, mergePartial, RecursivePartial } from '../../../../utils/common'; import { Dimensions } from '../../../../utils/dimensions'; import { Layer, PartitionSpec } from '../../specs'; import { config as defaultConfig, VALUE_GETTERS } from '../config'; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts index 71cc1245253..3c897b306e4 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts @@ -7,6 +7,7 @@ */ import { colorToRgba } from '../../../../common/color_library_wrappers'; +import { Color } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; import { @@ -19,7 +20,7 @@ import { } from '../../../../common/geometry'; import { Part, TextMeasure } from '../../../../common/text_utils'; import { GroupByAccessor, SmallMultiplesStyle } from '../../../../specs'; -import { StrokeStyle, ValueFormatter, Color, RecursivePartial } from '../../../../utils/common'; +import { StrokeStyle, ValueFormatter, RecursivePartial } from '../../../../utils/common'; import { Logger } from '../../../../utils/logger'; import { Layer } from '../../specs'; import { config as defaultConfig, MODEL_KEY, percentValueGetter } from '../config'; diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts index dfaaef13fc3..38a3cd1011b 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts @@ -7,11 +7,11 @@ */ import { colorToRgba, RGBATupleToString } from '../../../../common/color_library_wrappers'; +import { Color } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { Pixels } from '../../../../common/geometry'; import { cssFontShorthand } from '../../../../common/text_utils'; import { renderLayers, withContext } from '../../../../renderers/canvas'; -import { Color } from '../../../../utils/common'; import { MIN_STROKE_WIDTH } from '../../../xy_chart/renderer/canvas/primitives/line'; import { LinkLabelVM, diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx b/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx index 2af01408c6e..0dd85f96ceb 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx @@ -10,6 +10,7 @@ import React, { MouseEvent, RefObject } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; +import { Color } from '../../../../common/colors'; import { ScreenReaderSummary, ScreenReaderPartitionTable } from '../../../../components/accessibility'; import { clearCanvas } from '../../../../renderers/canvas'; import { SettingsSpec } from '../../../../specs/settings'; @@ -24,7 +25,6 @@ import { getChartContainerDimensionsSelector } from '../../../../state/selectors import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized'; import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs'; -import { Color } from '../../../../utils/common'; import { Dimensions } from '../../../../utils/dimensions'; import { MODEL_KEY } from '../../layout/config'; import { diff --git a/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts index 3909110c2dc..d6f49ce4880 100644 --- a/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts +++ b/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts @@ -8,9 +8,9 @@ import { $Values as Values } from 'utility-types'; +import { Color } from '../../../../common/colors'; import { Pixels, PointObject, Rectangle } from '../../../../common/geometry'; import { FontStyle } from '../../../../common/text_utils'; -import { Color } from '../../../../utils/common'; import { config } from '../config/config'; import { Config } from './config_types'; diff --git a/packages/charts/src/chart_types/xy_chart/annotations/types.ts b/packages/charts/src/chart_types/xy_chart/annotations/types.ts index 6783a25fe11..9dfb4de79f2 100644 --- a/packages/charts/src/chart_types/xy_chart/annotations/types.ts +++ b/packages/charts/src/chart_types/xy_chart/annotations/types.ts @@ -8,8 +8,9 @@ import { ComponentType, ReactNode } from 'react'; +import { Color } from '../../../common/colors'; import { TooltipPortalSettings } from '../../../components/portal'; -import { Position, Color } from '../../../utils/common'; +import { Position } from '../../../utils/common'; import { AnnotationType, LineAnnotationDatum, RectAnnotationDatum } from '../utils/specs'; import { AnnotationLineProps } from './line/types'; import { AnnotationRectProps } from './rect/types'; diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.ts index c55bd78a9fb..c7c776aab5f 100644 --- a/packages/charts/src/chart_types/xy_chart/legend/legend.ts +++ b/packages/charts/src/chart_types/xy_chart/legend/legend.ts @@ -6,11 +6,12 @@ * Side Public License, v 1. */ +import { Color } from '../../../common/colors'; import { LegendItem } from '../../../common/legend'; import { SeriesKey, SeriesIdentifier } from '../../../common/series_id'; import { ScaleType } from '../../../scales/constants'; import { SortSeriesByConfig, TickFormatterOptions } from '../../../specs'; -import { Color, MergeOptions, mergePartial } from '../../../utils/common'; +import { MergeOptions, mergePartial } from '../../../utils/common'; import { BandedAccessorType } from '../../../utils/geometry'; import { getLegendCompareFn, SeriesCompareFn } from '../../../utils/series_sort'; import { PointStyle, Theme } from '../../../utils/themes/theme'; diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts index 53ef446b90d..c4cabd763ab 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts @@ -7,8 +7,9 @@ */ import { colorToRgba, overrideOpacity } from '../../../../../common/color_library_wrappers'; +import { Color } from '../../../../../common/colors'; import { Fill } from '../../../../../geoms/types'; -import { Color, ColorVariant, getColorFromVariant } from '../../../../../utils/common'; +import { ColorVariant, getColorFromVariant } from '../../../../../utils/common'; import { GeometryStateStyle, AreaStyle } from '../../../../../utils/themes/theme'; import { getTextureStyles } from '../../../utils/texture'; diff --git a/packages/charts/src/chart_types/xy_chart/rendering/area.ts b/packages/charts/src/chart_types/xy_chart/rendering/area.ts index 626470485b5..a6708063b8c 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/area.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/area.ts @@ -8,8 +8,8 @@ import { area } from 'd3-shape'; +import { Color } from '../../../common/colors'; import { Scale } from '../../../scales'; -import { Color } from '../../../utils/common'; import { CurveType, getCurveFactory } from '../../../utils/curves'; import { Dimensions } from '../../../utils/dimensions'; import { AreaGeometry } from '../../../utils/geometry'; diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bars.ts b/packages/charts/src/chart_types/xy_chart/rendering/bars.ts index 4f3165f5ce5..9873edd1803 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/bars.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/bars.ts @@ -6,10 +6,11 @@ * Side Public License, v 1. */ +import { Color } from '../../../common/colors'; import { Scale } from '../../../scales'; import { ScaleType } from '../../../scales/constants'; import { TextMeasure, withTextMeasure } from '../../../utils/bbox/canvas_text_bbox_calculator'; -import { clamp, Color, isNil, mergePartial } from '../../../utils/common'; +import { clamp, isNil, mergePartial } from '../../../utils/common'; import { Dimensions } from '../../../utils/dimensions'; import { BandedAccessorType, BarGeometry } from '../../../utils/geometry'; import { BarSeriesStyle, DisplayValueStyle } from '../../../utils/themes/theme'; diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts b/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts index d85f5f375e3..9a946f8911a 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts @@ -6,8 +6,8 @@ * Side Public License, v 1. */ +import { Color } from '../../../common/colors'; import { Scale } from '../../../scales'; -import { Color } from '../../../utils/common'; import { Dimensions } from '../../../utils/dimensions'; import { BubbleGeometry } from '../../../utils/geometry'; import { BubbleSeriesStyle } from '../../../utils/themes/theme'; diff --git a/packages/charts/src/chart_types/xy_chart/rendering/line.ts b/packages/charts/src/chart_types/xy_chart/rendering/line.ts index c78b208958c..0559f75015c 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/line.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/line.ts @@ -8,8 +8,8 @@ import { line } from 'd3-shape'; +import { Color } from '../../../common/colors'; import { Scale } from '../../../scales'; -import { Color } from '../../../utils/common'; import { CurveType, getCurveFactory } from '../../../utils/curves'; import { Dimensions } from '../../../utils/dimensions'; import { LineGeometry } from '../../../utils/geometry'; diff --git a/packages/charts/src/chart_types/xy_chart/rendering/points.ts b/packages/charts/src/chart_types/xy_chart/rendering/points.ts index 77c95dc4305..9dcdcf1ebea 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/points.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/points.ts @@ -6,8 +6,9 @@ * Side Public License, v 1. */ +import { Color } from '../../../common/colors'; import { Scale } from '../../../scales'; -import { Color, isNil } from '../../../utils/common'; +import { isNil } from '../../../utils/common'; import { Dimensions } from '../../../utils/dimensions'; import { BandedAccessorType, PointGeometry } from '../../../utils/geometry'; import { PointStyle } from '../../../utils/themes/theme'; diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts index b9ff9cf209a..5448b80df41 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts @@ -6,11 +6,11 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { SeriesKey } from '../../../../common/series_id'; import { GlobalChartState } from '../../../../state/chart_state'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; -import { Color } from '../../../../utils/common'; import { getSeriesColors } from '../../utils/series'; import { getCustomSeriesColors } from '../utils/utils'; import { computeSeriesDomainsSelector } from './compute_series_domains'; diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts index 3ad34dc4ddc..8845da6c984 100644 --- a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts +++ b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts @@ -6,12 +6,13 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/colors'; import { getPredicateFn, Predicate } from '../../../../common/predicate'; import { SeriesKey, SeriesIdentifier } from '../../../../common/series_id'; import { Scale } from '../../../../scales'; import { SortSeriesByConfig } from '../../../../specs'; import { OrderBy } from '../../../../specs/settings'; -import { mergePartial, Rotation, Color, isUniqueArray } from '../../../../utils/common'; +import { mergePartial, Rotation, isUniqueArray } from '../../../../utils/common'; import { CurveType } from '../../../../utils/curves'; import { Dimensions, Size } from '../../../../utils/dimensions'; import { diff --git a/packages/charts/src/chart_types/xy_chart/utils/series.ts b/packages/charts/src/chart_types/xy_chart/utils/series.ts index dd943533bf7..0fde4b7de93 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/series.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/series.ts @@ -6,13 +6,14 @@ * Side Public License, v 1. */ +import { Color } from '../../../common/colors'; import { SeriesIdentifier, SeriesKey } from '../../../common/series_id'; import { ScaleType } from '../../../scales/constants'; import { BinAgg, Direction, XScaleType } from '../../../specs'; import { OrderBy } from '../../../specs/settings'; import { ColorOverrides } from '../../../state/chart_state'; import { Accessor, AccessorFn, getAccessorValue } from '../../../utils/accessor'; -import { Color, Datum, isNil } from '../../../utils/common'; +import { Datum, isNil } from '../../../utils/common'; import { GroupId } from '../../../utils/ids'; import { Logger } from '../../../utils/logger'; import { ColorConfig } from '../../../utils/themes/theme'; diff --git a/packages/charts/src/chart_types/xy_chart/utils/specs.ts b/packages/charts/src/chart_types/xy_chart/utils/specs.ts index dc5a27a4910..990632c1577 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/specs.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/specs.ts @@ -10,6 +10,7 @@ import { ReactNode } from 'react'; import { $Values } from 'utility-types'; import { ChartType } from '../..'; +import { Color } from '../../../common/colors'; import { TooltipPortalSettings } from '../../../components/portal/types'; import { ScaleContinuousType } from '../../../scales'; import { ScaleType } from '../../../scales/constants'; @@ -17,7 +18,7 @@ import { LogScaleOptions } from '../../../scales/scale_continuous'; import { Spec } from '../../../specs'; import { SpecType } from '../../../specs/constants'; import { Accessor, AccessorFormat, AccessorFn } from '../../../utils/accessor'; -import { RecursivePartial, Color, Position, Datum } from '../../../utils/common'; +import { RecursivePartial, Position, Datum } from '../../../utils/common'; import { CurveType } from '../../../utils/curves'; import { OrdinalDomain } from '../../../utils/domain'; import { AxisId, GroupId } from '../../../utils/ids'; diff --git a/packages/charts/src/chart_types/xy_chart/utils/texture.ts b/packages/charts/src/chart_types/xy_chart/utils/texture.ts index 19d6371869d..5a2802b3fcb 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/texture.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/texture.ts @@ -6,9 +6,10 @@ * Side Public License, v 1. */ +import { Color } from '../../../common/colors'; import { Ratio } from '../../../common/geometry'; import { Texture } from '../../../geoms/types'; -import { Color, ColorVariant, degToRad, getColorFromVariant } from '../../../utils/common'; +import { ColorVariant, degToRad, getColorFromVariant } from '../../../utils/common'; import { Point } from '../../../utils/point'; import { TexturedStyles, TextureShape } from '../../../utils/themes/theme'; import { TextureRendererFn } from '../renderer/shapes_paths'; diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts index 6af1efbfdb9..14d9ab084a4 100644 --- a/packages/charts/src/common/color_library_wrappers.ts +++ b/packages/charts/src/common/color_library_wrappers.ts @@ -8,8 +8,9 @@ import chroma from 'chroma-js'; -import { clamp, Color } from '../utils/common'; +import { clamp } from '../utils/common'; import { Logger } from '../utils/logger'; +import { Color } from './colors'; import { LRUCache } from './data_structures'; type RGB = number; diff --git a/packages/charts/src/common/colors.tsx b/packages/charts/src/common/colors.tsx new file mode 100644 index 00000000000..74fe58b46d1 --- /dev/null +++ b/packages/charts/src/common/colors.tsx @@ -0,0 +1,10 @@ +/* + * 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. + */ + +/** @public */ +export type Color = string; // todo static/runtime type it this for proper color string content; several places in the code, and ultimate use, dictate it not be an empty string diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index 25fa37b211f..e21682e9767 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -6,9 +6,9 @@ * Side Public License, v 1. */ -import { Color } from '../utils/common'; import { combineColors, highContrastColor } from './color_calcs'; import { colorToRgba, RGBATupleToString } from './color_library_wrappers'; +import { Color } from './colors'; /** * Determine the color for the text hinging on the parameters of maximizeColorContrast, foreground and containerBackground diff --git a/packages/charts/src/common/legend.ts b/packages/charts/src/common/legend.ts index ccf069eaed1..f59ff4eddcb 100644 --- a/packages/charts/src/common/legend.ts +++ b/packages/charts/src/common/legend.ts @@ -9,9 +9,9 @@ import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; import { SeriesType } from '../specs'; import { LegendPath } from '../state/actions/legend'; -import { Color } from '../utils/common'; import { PointStyle } from '../utils/themes/theme'; import { CategoryKey, CategoryLabel } from './category'; +import { Color } from './colors'; import { SeriesIdentifier } from './series_id'; /** @internal */ diff --git a/packages/charts/src/components/legend/legend_icon.tsx b/packages/charts/src/components/legend/legend_icon.tsx index 680f5e833d3..88499def782 100644 --- a/packages/charts/src/components/legend/legend_icon.tsx +++ b/packages/charts/src/components/legend/legend_icon.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { ShapeRendererFn } from '../../chart_types/xy_chart/renderer/shapes_paths'; -import { Color } from '../../utils/common'; +import { Color } from '../../common/colors'; import { PointShape, PointStyle } from '../../utils/themes/theme'; interface LegendIconProps { diff --git a/packages/charts/src/components/legend/legend_item.tsx b/packages/charts/src/components/legend/legend_item.tsx index 00eaab1759f..0c7121ada84 100644 --- a/packages/charts/src/components/legend/legend_item.tsx +++ b/packages/charts/src/components/legend/legend_item.tsx @@ -9,6 +9,7 @@ import classNames from 'classnames'; import React, { Component, createRef, MouseEventHandler } from 'react'; +import { Color } from '../../common/colors'; import { LegendItem, LegendItemExtraValues } from '../../common/legend'; import { SeriesIdentifier } from '../../common/series_id'; import { @@ -28,7 +29,7 @@ import { onLegendItemOverAction, onToggleDeselectSeriesAction, } from '../../state/actions/legend'; -import { Color, LayoutDirection } from '../../utils/common'; +import { LayoutDirection } from '../../utils/common'; import { deepEqual } from '../../utils/fast_deep_equal'; import { LegendLabelOptions } from '../../utils/themes/theme'; import { Color as ItemColor } from './color'; diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index 3449af6112f..65495761a52 100644 --- a/packages/charts/src/index.ts +++ b/packages/charts/src/index.ts @@ -81,7 +81,6 @@ export { IsAny, IsUnknown, ColorVariant, - Color, LabelAccessor, ShowAccessor, ValueAccessor, @@ -95,3 +94,4 @@ export { LegendStrategy } from './chart_types/partition_chart/layout/utils/highl export { Pixels, Ratio } from './common/geometry'; export { AdditiveNumber } from './utils/accessor'; export { FontStyle, FONT_STYLES } from './common/text_utils'; +export { Color } from './common/colors'; diff --git a/packages/charts/src/renderers/canvas/index.ts b/packages/charts/src/renderers/canvas/index.ts index b78ef6fee66..37f3d10d2c2 100644 --- a/packages/charts/src/renderers/canvas/index.ts +++ b/packages/charts/src/renderers/canvas/index.ts @@ -6,8 +6,8 @@ * Side Public License, v 1. */ +import { Color } from '../../common/colors'; import { Rect } from '../../geoms/types'; -import { Color } from '../../utils/common'; import { ClippedRanges } from '../../utils/geometry'; /** @internal */ diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx index 63f32e85653..f2bd1ac208e 100644 --- a/packages/charts/src/specs/settings.tsx +++ b/packages/charts/src/specs/settings.tsx @@ -15,6 +15,7 @@ import { LegendStrategy } from '../chart_types/partition_chart/layout/utils/high import { LineAnnotationDatum, RectAnnotationDatum } from '../chart_types/specs'; import { WordModel } from '../chart_types/wordcloud/layout/types/viewmodel_types'; import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series'; +import { Color } from '../common/colors'; import { SeriesIdentifier } from '../common/series_id'; import { TooltipPortalSettings } from '../components'; import { CustomTooltip } from '../components/tooltip/types'; @@ -23,7 +24,6 @@ import { LegendPath } from '../state/actions/legend'; import { getConnect, specComponentFactory } from '../state/spec_factory'; import { Accessor } from '../utils/accessor'; import { - Color, HorizontalAlignment, LayoutDirection, Position, diff --git a/packages/charts/src/state/actions/colors.ts b/packages/charts/src/state/actions/colors.ts index da1ade0004d..d2b56b98d97 100644 --- a/packages/charts/src/state/actions/colors.ts +++ b/packages/charts/src/state/actions/colors.ts @@ -6,8 +6,8 @@ * Side Public License, v 1. */ +import { Color } from '../../common/colors'; import { SeriesKey } from '../../common/series_id'; -import { Color } from '../../utils/common'; /** @internal */ export const CLEAR_TEMPORARY_COLORS = 'CLEAR_TEMPORARY_COLORS'; diff --git a/packages/charts/src/state/chart_state.ts b/packages/charts/src/state/chart_state.ts index 07f59b7a010..6cf76ef6a9d 100644 --- a/packages/charts/src/state/chart_state.ts +++ b/packages/charts/src/state/chart_state.ts @@ -15,12 +15,13 @@ import { PartitionState } from '../chart_types/partition_chart/state/chart_state import { WordcloudState } from '../chart_types/wordcloud/state/chart_state'; import { XYAxisChartState } from '../chart_types/xy_chart/state/chart_state'; import { CategoryKey } from '../common/category'; +import { Color } from '../common/colors'; import { LegendItem, LegendItemExtraValues } from '../common/legend'; import { SeriesIdentifier, SeriesKey } from '../common/series_id'; import { AnchorPosition } from '../components/portal/types'; import { TooltipInfo } from '../components/tooltip/types'; import { DEFAULT_SETTINGS_SPEC, PointerEvent, Spec } from '../specs'; -import { Color, keepDistinct } from '../utils/common'; +import { keepDistinct } from '../utils/common'; import { Dimensions } from '../utils/dimensions'; import { Logger } from '../utils/logger'; import { Point } from '../utils/point'; diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx index 3802c8de7b7..49f0a382e38 100644 --- a/packages/charts/src/utils/common.tsx +++ b/packages/charts/src/utils/common.tsx @@ -11,6 +11,7 @@ import { $Values, isPrimitive } from 'utility-types'; import { v1 as uuidV1 } from 'uuid'; import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; +import { Color } from '../common/colors'; import { Degrees, Radian } from '../common/geometry'; import { AdditiveNumber } from './accessor'; import { Point } from './point'; @@ -121,8 +122,6 @@ export type Rotation = 0 | 90 | -90 | 180; /** @public */ export type Rendering = 'canvas' | 'svg'; /** @public */ -export type Color = string; // todo static/runtime type it this for proper color string content; several places in the code, and ultimate use, dictate it not be an empty string -/** @public */ export type StrokeStyle = Color; // now narrower than string | CanvasGradient | CanvasPattern /** @internal */ diff --git a/packages/charts/src/utils/geometry.ts b/packages/charts/src/utils/geometry.ts index f9382ff8be1..2b3fdd9e88d 100644 --- a/packages/charts/src/utils/geometry.ts +++ b/packages/charts/src/utils/geometry.ts @@ -10,8 +10,8 @@ import { $Values } from 'utility-types'; import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series'; import { LabelOverflowConstraint } from '../chart_types/xy_chart/utils/specs'; +import { Color } from '../common/colors'; import { Fill, Stroke } from '../geoms/types'; -import { Color } from './common'; import { Dimensions } from './dimensions'; import { BarSeriesStyle, PointStyle, AreaStyle, LineStyle, PointShape } from './themes/theme'; diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts index 448d07e612d..f3ad39dd36e 100644 --- a/packages/charts/src/utils/themes/theme.ts +++ b/packages/charts/src/utils/themes/theme.ts @@ -8,9 +8,10 @@ import { $Values } from 'utility-types'; +import { Color } from '../../common/colors'; import { Pixels, Ratio } from '../../common/geometry'; import { FontStyle } from '../../common/text_utils'; -import { Color, ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment } from '../common'; +import { ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment } from '../common'; import { Margins, SimplePadding } from '../dimensions'; import { Point } from '../point'; diff --git a/storybook/stories/goal/10_band_in_band.story.tsx b/storybook/stories/goal/10_band_in_band.story.tsx index 2a98c018850..5aad312fa84 100644 --- a/storybook/stories/goal/10_band_in_band.story.tsx +++ b/storybook/stories/goal/10_band_in_band.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/11_gaps.story.tsx b/storybook/stories/goal/11_gaps.story.tsx index 382bd08c13b..6d5a9570d9f 100644 --- a/storybook/stories/goal/11_gaps.story.tsx +++ b/storybook/stories/goal/11_gaps.story.tsx @@ -12,8 +12,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/12_range.story.tsx b/storybook/stories/goal/12_range.story.tsx index 4835c1b7400..87bcd2bccd8 100644 --- a/storybook/stories/goal/12_range.story.tsx +++ b/storybook/stories/goal/12_range.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/13_confidence_level.story.tsx b/storybook/stories/goal/13_confidence_level.story.tsx index 88dc08d33d3..ba0924da076 100644 --- a/storybook/stories/goal/13_confidence_level.story.tsx +++ b/storybook/stories/goal/13_confidence_level.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/14_one_third.story.tsx b/storybook/stories/goal/14_one_third.story.tsx index 25e9005bd09..880e0e6519d 100644 --- a/storybook/stories/goal/14_one_third.story.tsx +++ b/storybook/stories/goal/14_one_third.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/15_half_circle.story.tsx b/storybook/stories/goal/15_half_circle.story.tsx index 499cfbe8ea4..5e92eae4637 100644 --- a/storybook/stories/goal/15_half_circle.story.tsx +++ b/storybook/stories/goal/15_half_circle.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/16_two_thirds.story.tsx b/storybook/stories/goal/16_two_thirds.story.tsx index fda193d6c9f..52d0e7cd47d 100644 --- a/storybook/stories/goal/16_two_thirds.story.tsx +++ b/storybook/stories/goal/16_two_thirds.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_three_quarters.story.tsx b/storybook/stories/goal/17_three_quarters.story.tsx index 461f433c08b..b856e747312 100644 --- a/storybook/stories/goal/17_three_quarters.story.tsx +++ b/storybook/stories/goal/17_three_quarters.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_total_circle.story.tsx b/storybook/stories/goal/17_total_circle.story.tsx index 4875d002369..31085abdaf2 100644 --- a/storybook/stories/goal/17_total_circle.story.tsx +++ b/storybook/stories/goal/17_total_circle.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_very_small_gap.story.tsx b/storybook/stories/goal/17_very_small_gap.story.tsx index 614e74cce0d..252d549e1fb 100644 --- a/storybook/stories/goal/17_very_small_gap.story.tsx +++ b/storybook/stories/goal/17_very_small_gap.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/19_horizontal_negative.story.tsx b/storybook/stories/goal/19_horizontal_negative.story.tsx index f9b727366d9..4279b0bade7 100644 --- a/storybook/stories/goal/19_horizontal_negative.story.tsx +++ b/storybook/stories/goal/19_horizontal_negative.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/20_vertical_negative.story.tsx b/storybook/stories/goal/20_vertical_negative.story.tsx index a54c266e5b1..e87e4cb35cb 100644 --- a/storybook/stories/goal/20_vertical_negative.story.tsx +++ b/storybook/stories/goal/20_vertical_negative.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/21_goal_negative.story.tsx b/storybook/stories/goal/21_goal_negative.story.tsx index f8d77218cc8..68e1f49b20b 100644 --- a/storybook/stories/goal/21_goal_negative.story.tsx +++ b/storybook/stories/goal/21_goal_negative.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/22_horizontal_plusminus.story.tsx b/storybook/stories/goal/22_horizontal_plusminus.story.tsx index 8d8307f1848..305108a9448 100644 --- a/storybook/stories/goal/22_horizontal_plusminus.story.tsx +++ b/storybook/stories/goal/22_horizontal_plusminus.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/23_vertical_plusminus.story.tsx b/storybook/stories/goal/23_vertical_plusminus.story.tsx index 07a8df63810..bafc02e92ea 100644 --- a/storybook/stories/goal/23_vertical_plusminus.story.tsx +++ b/storybook/stories/goal/23_vertical_plusminus.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/24_goal_plusminus.story.tsx b/storybook/stories/goal/24_goal_plusminus.story.tsx index f5fbaa2534d..4e26971db89 100644 --- a/storybook/stories/goal/24_goal_plusminus.story.tsx +++ b/storybook/stories/goal/24_goal_plusminus.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/2_gauge_with_target.story.tsx b/storybook/stories/goal/2_gauge_with_target.story.tsx index 0224ed91564..4b1437dac2b 100644 --- a/storybook/stories/goal/2_gauge_with_target.story.tsx +++ b/storybook/stories/goal/2_gauge_with_target.story.tsx @@ -12,8 +12,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/3_horizontal_bullet.story.tsx b/storybook/stories/goal/3_horizontal_bullet.story.tsx index 496d8759a47..fc11ef1329b 100644 --- a/storybook/stories/goal/3_horizontal_bullet.story.tsx +++ b/storybook/stories/goal/3_horizontal_bullet.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/4_vertical_bullet.story.tsx b/storybook/stories/goal/4_vertical_bullet.story.tsx index 15fc6d892ea..e10a2450896 100644 --- a/storybook/stories/goal/4_vertical_bullet.story.tsx +++ b/storybook/stories/goal/4_vertical_bullet.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/5_minimal.story.tsx b/storybook/stories/goal/5_minimal.story.tsx index 233bc97cf01..0e4a67d1895 100644 --- a/storybook/stories/goal/5_minimal.story.tsx +++ b/storybook/stories/goal/5_minimal.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/6_minimal_horizontal.story.tsx b/storybook/stories/goal/6_minimal_horizontal.story.tsx index ce4f1ebb011..50cd4ce1e78 100644 --- a/storybook/stories/goal/6_minimal_horizontal.story.tsx +++ b/storybook/stories/goal/6_minimal_horizontal.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/7_horizontal_bar.story.tsx b/storybook/stories/goal/7_horizontal_bar.story.tsx index 5b9c0c18f85..34df6e1a0d5 100644 --- a/storybook/stories/goal/7_horizontal_bar.story.tsx +++ b/storybook/stories/goal/7_horizontal_bar.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/8_irregular_ticks.story.tsx b/storybook/stories/goal/8_irregular_ticks.story.tsx index 6333c8b7058..48b6ae224ec 100644 --- a/storybook/stories/goal/8_irregular_ticks.story.tsx +++ b/storybook/stories/goal/8_irregular_ticks.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/9_minimal_band.story.tsx b/storybook/stories/goal/9_minimal_band.story.tsx index b81f809fa05..a2867d18b02 100644 --- a/storybook/stories/goal/9_minimal_band.story.tsx +++ b/storybook/stories/goal/9_minimal_band.story.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { Color } from '@elastic/charts/src/utils/common'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx index b720dac9a41..f540051f894 100644 --- a/storybook/stories/interactions/17_png_export.story.tsx +++ b/storybook/stories/interactions/17_png_export.story.tsx @@ -26,9 +26,9 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; -import { Color } from '@elastic/charts/src/utils/common'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; +import { Color } from '../../../packages/charts/src/common/colors'; import { useBaseTheme } from '../../use_base_theme'; import { productLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; From 8320ffe75dea0c8097d861440c77f7e29005ed0b Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 21 Sep 2021 19:00:34 +0200 Subject: [PATCH 2/6] replace all color tuple with class Color --- .../heatmap/layout/types/viewmodel_types.ts | 4 ++-- .../xy_chart/renderer/canvas/panels/panels.ts | 5 +++-- .../xy_chart/renderer/canvas/renderers.ts | 5 +++-- packages/charts/src/common/color_calcs.ts | 18 +++++++-------- .../src/common/color_library_wrappers.ts | 6 ++--- packages/charts/src/common/colors.tsx | 22 +++++++++++++++++++ packages/charts/src/common/fill_text_color.ts | 4 ++-- packages/charts/src/mocks/geometries.ts | 18 +++++++-------- 8 files changed, 52 insertions(+), 30 deletions(-) diff --git a/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts index 91ee76d964d..5d4b8990807 100644 --- a/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts +++ b/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts @@ -7,7 +7,7 @@ */ import { ChartType } from '../../..'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { Pixels } from '../../../../common/geometry'; import { Box } from '../../../../common/text_utils'; import { Fill, Line, Rect, Stroke } from '../../../../geoms/types'; @@ -115,7 +115,7 @@ export const nullHeatmapViewModel: HeatmapViewModel = { gridLines: { x: [], y: [], - stroke: { width: 0, color: [0, 0, 0, 0] }, + stroke: { width: 0, color: Colors.Transparent.rgba }, }, cells: [], xValues: [], diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts index 7baa2b4d1ed..bc8a21e7b91 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../../../common/colors'; import { withContext } from '../../../../../renderers/canvas'; import { Position } from '../../../../../utils/common'; import { AxisId } from '../../../../../utils/ids'; @@ -25,8 +26,8 @@ export function renderGridPanels(ctx: CanvasRenderingContext2D, { x: chartX, y: renderRect( ctx, { x: chartX + panelX, y: chartY + panelY, width, height }, - { color: [0, 0, 0, 0] }, - { color: [0, 0, 0, 1], width: 1 }, + { color: Colors.Transparent.rgba }, + { color: Colors.Black.rgba, width: 1 }, ), ), ); diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts index 67edc786751..63e6a8404cf 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../../common/colors'; import { Rect } from '../../../../geoms/types'; import { clearCanvas, isCanvasRenderer, renderLayers, withContext } from '../../../../renderers/canvas'; import { renderAnnotations } from './annotations'; @@ -148,8 +149,8 @@ export function renderXYChartCanvas2d( ctx, { x: left, y: top, width, height }, 0, - { color: [0, 0, 0, 0] }, - { color: [255, 0, 0, 1], width: 4, dash: [4, 4] }, + { color: Colors.Transparent.rgba }, + { color: Colors.Red.rgba, width: 4, dash: [4, 4] }, ); const renderer = geometriesIndex.triangulation([0, 0, width, height])?.render; diff --git a/packages/charts/src/common/color_calcs.ts b/packages/charts/src/common/color_calcs.ts index a30322e85ad..5797afc5a08 100644 --- a/packages/charts/src/common/color_calcs.ts +++ b/packages/charts/src/common/color_calcs.ts @@ -8,6 +8,7 @@ import { APCAContrast } from './apca_color_contrast'; import { RgbaTuple, RGBATupleToString, RgbTuple } from './color_library_wrappers'; +import { Colors } from './colors'; import { getWCAG2ContrastRatio } from './wcag2_color_contrast'; /** @internal */ @@ -35,7 +36,7 @@ export function combineColors([fgR, fgG, fgB, fgA]: RgbaTuple, [bgR, bgG, bgB, b const alpha = fgA + bgA * (1 - fgA); if (alpha === 0) { - return [0, 0, 0, 0]; + return Colors.Transparent.rgba; } const r = Math.round((fgR * fgA + bgR * bgA * (1 - fgA)) / alpha); @@ -44,19 +45,16 @@ export function combineColors([fgR, fgG, fgB, fgA]: RgbaTuple, [bgR, bgG, bgB, b return [r, g, b, alpha]; } -const COLOR_WHITE: RgbaTuple = [255, 255, 255, 1]; -const COLOR_BLACK: RgbaTuple = [0, 0, 0, 1]; - function getHighContrastColorWCAG2(background: RgbTuple): RgbaTuple { - const wWhite = getWCAG2ContrastRatio(COLOR_WHITE, background); - const wBlack = getWCAG2ContrastRatio(COLOR_BLACK, background); - return wWhite >= wBlack ? COLOR_WHITE : COLOR_BLACK; + const wWhite = getWCAG2ContrastRatio(Colors.White.rgba, background); + const wBlack = getWCAG2ContrastRatio(Colors.Black.rgba, background); + return wWhite >= wBlack ? Colors.White.rgba : Colors.Black.rgba; } function getHighContrastColorAPCA(background: RgbTuple): RgbaTuple { - const wWhiteText = Math.abs(APCAContrast(background, COLOR_WHITE)); - const wBlackText = Math.abs(APCAContrast(background, COLOR_BLACK)); - return wWhiteText > wBlackText ? COLOR_WHITE : COLOR_BLACK; + const wWhiteText = Math.abs(APCAContrast(background, Colors.White.rgba)); + const wBlackText = Math.abs(APCAContrast(background, Colors.Black.rgba)); + return wWhiteText > wBlackText ? Colors.White.rgba : Colors.Black.rgba; } const HIGH_CONTRAST_FN = { diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts index 14d9ab084a4..9b486ce3870 100644 --- a/packages/charts/src/common/color_library_wrappers.ts +++ b/packages/charts/src/common/color_library_wrappers.ts @@ -10,7 +10,7 @@ import chroma from 'chroma-js'; import { clamp } from '../utils/common'; import { Logger } from '../utils/logger'; -import { Color } from './colors'; +import { Color, Colors } from './colors'; import { LRUCache } from './data_structures'; type RGB = number; @@ -32,7 +32,7 @@ export function overrideOpacity([r, g, b, o]: RgbaTuple, opacity?: number | Opac // don't apply override on transparent color to avoid unwanted behaviours // todo check if we can apply to every transparent colors if (r === 0 && b === 0 && g === 0 && o === 0) { - return [0, 0, 0, 0]; + return Colors.Transparent.rgba; } return [r, g, b, clamp(Number.isFinite(opacityOverride) ? opacityOverride : o, 0, 1)]; } @@ -72,7 +72,7 @@ export function colorToRgba(color: Color): RgbaTuple { if (cachedValue === undefined) { const chromaColor = isValid(color); if (chromaColor === false) Logger.warn(`The provided color is not a valid CSS color, using RED as fallback`, color); - const newValue: RgbaTuple = chromaColor ? chromaColor.rgba() : [255, 0, 0, 1]; + const newValue: RgbaTuple = chromaColor ? chromaColor.rgba() : Colors.Red.rgba; rgbaCache.set(color, newValue); return newValue; } diff --git a/packages/charts/src/common/colors.tsx b/packages/charts/src/common/colors.tsx index 74fe58b46d1..b38391e5a6a 100644 --- a/packages/charts/src/common/colors.tsx +++ b/packages/charts/src/common/colors.tsx @@ -6,5 +6,27 @@ * Side Public License, v 1. */ +import { RgbaTuple } from './color_library_wrappers'; + /** @public */ export type Color = string; // todo static/runtime type it this for proper color string content; several places in the code, and ultimate use, dictate it not be an empty string + +/** @internal */ +export const Colors: Record = { + Red: { + keyword: 'red', + rgba: [255, 0, 0, 1], + }, + White: { + keyword: 'white', + rgba: [255, 255, 255, 1], + }, + Black: { + keyword: 'black', + rgba: [0, 0, 0, 1], + }, + Transparent: { + keyword: 'transparent', + rgba: [0, 0, 0, 0], + }, +}; diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index e21682e9767..6a9e3f41f0f 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -8,7 +8,7 @@ import { combineColors, highContrastColor } from './color_calcs'; import { colorToRgba, RGBATupleToString } from './color_library_wrappers'; -import { Color } from './colors'; +import { Color, Colors } from './colors'; /** * Determine the color for the text hinging on the parameters of maximizeColorContrast, foreground and containerBackground @@ -16,7 +16,7 @@ import { Color } from './colors'; */ export function fillTextColor(background: Color, containerBg: Color = 'white'): Color { const backgroundRGBA = colorToRgba(background); - const containerBgRGBA = combineColors(colorToRgba(containerBg), [255, 255, 255, 1]); // combine it with white if semi-transparent + const containerBgRGBA = combineColors(colorToRgba(containerBg), Colors.White.rgba); // combine it with white if semi-transparent const blendedFbBg = combineColors(backgroundRGBA, containerBgRGBA); return RGBATupleToString(highContrastColor(blendedFbBg)); } diff --git a/packages/charts/src/mocks/geometries.ts b/packages/charts/src/mocks/geometries.ts index 0da02327cdd..63a1ad74db8 100644 --- a/packages/charts/src/mocks/geometries.ts +++ b/packages/charts/src/mocks/geometries.ts @@ -9,13 +9,13 @@ import { omit } from 'lodash'; import { buildPointGeometryStyles } from '../chart_types/xy_chart/rendering/point_style'; +import { Colors } from '../common/colors'; import { mergePartial, RecursivePartial } from '../utils/common'; import { AreaGeometry, PointGeometry, BarGeometry, LineGeometry, BubbleGeometry } from '../utils/geometry'; import { LIGHT_THEME } from '../utils/themes/light_theme'; import { PointShape } from '../utils/themes/theme'; import { MockSeriesIdentifier } from './series/series_identifiers'; -const DEFAULT_MOCK_POINT_COLOR = 'red'; const { barSeriesStyle, lineSeriesStyle, areaSeriesStyle, bubbleSeriesStyle } = LIGHT_THEME; /** @internal */ @@ -24,15 +24,15 @@ export class MockPointGeometry { x: 0, y: 0, radius: lineSeriesStyle.point.radius, - color: DEFAULT_MOCK_POINT_COLOR, + color: Colors.Red.keyword, seriesIdentifier: MockSeriesIdentifier.default(), style: { shape: PointShape.Circle, fill: { - color: [255, 255, 255, 1], + color: Colors.White.rgba, }, stroke: { - color: [255, 0, 0, 1], + color: Colors.Red.rgba, width: 1, }, }, @@ -57,7 +57,7 @@ export class MockPointGeometry { }; static default(partial?: RecursivePartial) { - const color = partial?.color ?? DEFAULT_MOCK_POINT_COLOR; + const color = partial?.color ?? Colors.Red.keyword; const style = buildPointGeometryStyles(color, lineSeriesStyle.point); return mergePartial(MockPointGeometry.base, partial, { mergeOptionalPartialValues: true }, [ { style }, @@ -81,7 +81,7 @@ export class MockBarGeometry { y: 0, width: 0, height: 0, - color: DEFAULT_MOCK_POINT_COLOR, + color: Colors.Red.keyword, displayValue: undefined, seriesIdentifier: MockSeriesIdentifier.default(), value: { @@ -123,7 +123,7 @@ export class MockLineGeometry { private static readonly base: LineGeometry = { line: '', points: [], - color: DEFAULT_MOCK_POINT_COLOR, + color: Colors.Red.keyword, transform: { x: 0, y: 0, @@ -145,7 +145,7 @@ export class MockAreaGeometry { area: '', lines: [], points: [], - color: DEFAULT_MOCK_POINT_COLOR, + color: Colors.Red.keyword, transform: { x: 0, y: 0, @@ -167,7 +167,7 @@ export class MockAreaGeometry { export class MockBubbleGeometry { private static readonly base: BubbleGeometry = { points: [], - color: DEFAULT_MOCK_POINT_COLOR, + color: Colors.Red.keyword, seriesIdentifier: MockSeriesIdentifier.default(), seriesPointStyle: bubbleSeriesStyle.point, }; From bcdaacccb82ddf9641d256eb66938bdd250451e3 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 21 Sep 2021 19:27:52 +0200 Subject: [PATCH 3/6] DRY use Colors object instead of color strings --- .../renderer/canvas/connected_component.tsx | 4 +-- .../goal_chart/state/selectors/tooltip.ts | 3 ++- .../heatmap/layout/config/config.ts | 9 ++++--- .../renderer/canvas/canvas_renderers.ts | 4 +-- .../renderer/canvas/connected_component.tsx | 4 +-- .../heatmap/state/selectors/tooltip.ts | 9 ++++--- .../partition_chart/layout/config.ts | 5 ++-- .../layout/types/viewmodel_types.ts | 6 ++--- .../layout/viewmodel/viewmodel.ts | 8 +++--- .../canvas/canvas_linear_renderers.ts | 3 ++- .../renderer/canvas/partition.tsx | 4 +-- .../renderer/dom/highlighter.tsx | 9 ++++++- .../xy_chart/annotations/line/dimensions.ts | 5 ++-- .../src/common/color_library_wrappers.ts | 2 +- packages/charts/src/common/fill_text_color.ts | 2 +- packages/charts/src/common/text_utils.ts | 3 ++- .../charts/src/components/brush/brush.tsx | 7 +++--- packages/charts/src/components/chart.tsx | 3 ++- .../src/components/chart_background.tsx | 3 ++- .../charts/src/components/tooltip/tooltip.tsx | 5 ++-- packages/charts/src/utils/common.tsx | 4 +-- .../charts/src/utils/themes/light_theme.ts | 25 ++++++++++--------- .../charts/src/utils/themes/theme_common.ts | 3 ++- 23 files changed, 76 insertions(+), 54 deletions(-) diff --git a/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx b/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx index fe9922518d9..aa0154eeecf 100644 --- a/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx +++ b/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx @@ -10,7 +10,7 @@ import React, { MouseEvent, RefObject } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { Rectangle } from '../../../../common/geometry'; import { GoalSemanticDescription, ScreenReaderSummary } from '../../../../components/accessibility'; import { onChartRendered } from '../../../../state/actions/chart'; @@ -178,7 +178,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = { bandLabels: [], firstValue: 0, captureBoundingBox: initialBoundingBox(), - background: 'transparent', + background: Colors.Transparent.keyword, }; const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts index e42c6f5ff78..306c5effee8 100644 --- a/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts +++ b/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../../common/colors'; import { TooltipInfo } from '../../../../components/tooltip/types'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { BandViewModel } from '../../layout/types/viewmodel_types'; @@ -20,7 +21,7 @@ const EMPTY_TOOLTIP = Object.freeze({ const getBandColor = (value: number, bands: BandViewModel[]) => bands.find(({ value: v }) => { return v >= value; - })?.fillColor ?? 'white'; + })?.fillColor ?? Colors.White.keyword; /** @internal */ export const getTooltipInfoSelector = createCustomCachedSelector( diff --git a/packages/charts/src/chart_types/heatmap/layout/config/config.ts b/packages/charts/src/chart_types/heatmap/layout/config/config.ts index a79d9f95cb6..0ef5278d7cf 100644 --- a/packages/charts/src/chart_types/heatmap/layout/config/config.ts +++ b/packages/charts/src/chart_types/heatmap/layout/config/config.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../../common/colors'; import { Config } from '../types/config_types'; /** @internal */ @@ -19,7 +20,7 @@ export const config: Config = { brushArea: { visible: true, - fill: 'black', // black === transparent + fill: Colors.Black.keyword, // black === transparent stroke: '#69707D', // euiColorDarkShade, strokeWidth: 2, }, @@ -41,7 +42,7 @@ export const config: Config = { fontSize: 12, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: 'black', + textColor: Colors.Black.keyword, fontVariant: 'normal', fontWeight: 'normal', align: 'center' as CanvasTextAlign, @@ -56,7 +57,7 @@ export const config: Config = { fontSize: 12, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: 'black', + textColor: Colors.Black.keyword, fontVariant: 'normal', fontWeight: 'normal', baseline: 'verticalAlign' as CanvasTextBaseline, @@ -88,7 +89,7 @@ export const config: Config = { maxFontSize: 12, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: 'black', + textColor: Colors.Black.keyword, fontVariant: 'normal', fontWeight: 'normal', useGlobalMinFontSize: true, diff --git a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts index e6ea263d044..2a609cad6a8 100644 --- a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts +++ b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { Font } from '../../../../common/text_utils'; import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas'; import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line'; @@ -95,7 +95,7 @@ export function renderCanvas2d( fontStyle: config.yAxisLabel.fontStyle ? config.yAxisLabel.fontStyle : 'normal', fontVariant: 'normal', fontWeight: 'normal', - textColor: 'black', + textColor: Colors.Black.keyword, }; const { padding } = config.yAxisLabel; const horizontalPadding = diff --git a/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx b/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx index 2c6a07aec12..52c815a5dcd 100644 --- a/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx +++ b/packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx @@ -10,7 +10,7 @@ import React, { RefObject } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { ScreenReaderSummary } from '../../../../components/accessibility'; import { onChartRendered } from '../../../../state/actions/chart'; import { GlobalChartState } from '../../../../state/chart_state'; @@ -151,7 +151,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = { top: 0, }, a11ySettings: DEFAULT_A11Y_SETTINGS, - background: 'transparent', + background: Colors.Transparent.keyword, }; const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts index 216a3a2396d..d32930169e9 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts @@ -7,6 +7,7 @@ */ import { RGBATupleToString } from '../../../../common/color_library_wrappers'; +import { Colors } from '../../../../common/colors'; import { TooltipInfo } from '../../../../components/tooltip/types'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { getHeatmapConfigSelector } from './get_heatmap_config'; @@ -38,7 +39,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( // X-axis value tooltipInfo.values.push({ label: config.xAxisLabel.name, - color: 'transparent', + color: Colors.Transparent.keyword, isHighlighted: false, isVisible: true, seriesIdentifier: { @@ -53,7 +54,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( // Y-axis value tooltipInfo.values.push({ label: config.yAxisLabel.name, - color: 'transparent', + color: Colors.Transparent.keyword, isHighlighted: false, isVisible: true, seriesIdentifier: { @@ -82,8 +83,8 @@ export const getTooltipInfoSelector = createCustomCachedSelector( }); } else { tooltipInfo.values.push({ - label: ``, - color: 'transparent', + label: '', + color: Colors.Transparent.keyword, isHighlighted: false, isVisible: true, seriesIdentifier: { diff --git a/packages/charts/src/chart_types/partition_chart/layout/config.ts b/packages/charts/src/chart_types/partition_chart/layout/config.ts index ef9365a487d..813ab5386c2 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/config.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/config.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../common/colors'; import { ConfigItem, configMap, Numeric } from '../../../common/config_objects'; import { GOLDEN_RATIO, TAU } from '../../../common/constants'; import { FONT_STYLES, FONT_VARIANTS } from '../../../common/text_utils'; @@ -302,9 +303,9 @@ export const configMetadata: Record = { }, // other - backgroundColor: { dflt: '#ffffff', type: 'color' }, + backgroundColor: { dflt: Colors.White.keyword, type: 'color' }, sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' }, - sectorLineStroke: { dflt: 'white', type: 'string' }, + sectorLineStroke: { dflt: Colors.White.keyword, type: 'string' }, animation: { type: 'group', values: { duration: { dflt: 0, min: 0, max: 3000, type: 'number' } } }, }; diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts index d7285bbc08b..adffedb9b51 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts @@ -7,7 +7,7 @@ */ import { CategoryKey } from '../../../../common/category'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { Coordinate, Distance, @@ -140,7 +140,7 @@ const defaultFont: Font = { fontVariant: 'normal', fontFamily: '', fontWeight: 'normal', - textColor: 'black', + textColor: Colors.Black.keyword, }; /** @internal */ @@ -169,7 +169,7 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou fontWeight: 'normal', fontFamily: 'sans-serif', fontStyle: 'normal', - textColor: 'black', + textColor: Colors.Black.keyword, }, }, }); diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts index 3c897b306e4..e7a8921a59f 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts @@ -7,7 +7,7 @@ */ import { colorToRgba } from '../../../../common/color_library_wrappers'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; import { @@ -142,7 +142,7 @@ export function makeQuadViewModel( isSunburstLayout: boolean, containerBackgroundColor?: Color, ): Array { - if (colorToRgba(containerBackgroundColor ?? 'white')[3] < 1) { + if (colorToRgba(containerBackgroundColor ?? Colors.White.keyword)[3] < 1) { Logger.expected( `Text contrast requires a opaque background color, using white as fallback`, 'an opaque color', @@ -157,7 +157,9 @@ export function makeQuadViewModel( const strokeStyle = sectorLineStroke; const textNegligible = node.y1px - node.y0px < minRectHeightForText; const textColor = - !isSunburstLayout && textNegligible ? 'transparent' : fillTextColor(fillColor, containerBackgroundColor); + !isSunburstLayout && textNegligible + ? Colors.Transparent.keyword + : fillTextColor(fillColor, containerBackgroundColor); return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor, ...node }; }); } diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts index bdeee974ebb..7252dffdc45 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../../common/colors'; import { ShapeViewModel } from '../../layout/types/viewmodel_types'; import { AnimationState, ContinuousDomainFocus } from './partition'; @@ -88,7 +89,7 @@ export function renderLinearPartitionCanvas2d( ctx.beginPath(); ctx.rect(fx0 + fPadding, y0 + padding / 2, fWidth - fPadding, y1 - y0 - padding); ctx.fill(); - if (textColor === 'transparent' || label === '' || fWidth < 4) return; + if (textColor === Colors.Transparent.keyword || label === '' || fWidth < 4) return; ctx.fillStyle = textColor; ctx.save(); ctx.clip(); // undoing a clip needs context save/restore, which is why it's wrapped in a save/restore diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx b/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx index 0dd85f96ceb..ef7b4121800 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx @@ -10,7 +10,7 @@ import React, { MouseEvent, RefObject } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { ScreenReaderSummary, ScreenReaderPartitionTable } from '../../../../components/accessibility'; import { clearCanvas } from '../../../../renderers/canvas'; import { SettingsSpec } from '../../../../specs/settings'; @@ -211,7 +211,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = { }, a11ySettings: DEFAULT_A11Y_SETTINGS, debug: false, - background: 'transparent', + background: Colors.Transparent.keyword, }; const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { diff --git a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx index f0c4d0e4981..a807df400b0 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx +++ b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx @@ -8,6 +8,7 @@ import React from 'react'; +import { Colors } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { PointObject } from '../../../../common/geometry'; import { Dimensions } from '../../../../utils/dimensions'; @@ -181,7 +182,13 @@ export class HighlighterComponent extends React.Component { - {renderGeometries(geometries, partitionLayout, { color: 'black' }, geometriesFoci, width)} + {renderGeometries( + geometries, + partitionLayout, + { color: Colors.Black.keyword }, + geometriesFoci, + width, + )} ), diff --git a/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts b/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts index 71a999fef69..be2739ee6fc 100644 --- a/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts +++ b/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../../common/colors'; import { Line } from '../../../../geoms/types'; import { Scale } from '../../../../scales'; import { isContinuousScale, isBandScale } from '../../../../scales/types'; @@ -37,7 +38,7 @@ function computeYDomainLineAnnotationDimensions( style, } = annotationSpec; const lineStyle = mergeWithDefaultAnnotationLine(style); - const color = lineStyle?.line?.stroke ?? 'red'; + const color = lineStyle?.line?.stroke ?? Colors.Red.keyword; const isHorizontalChartRotation = isHorizontalRotation(chartRotation); // let's use a default Bottom-X/Left-Y axis orientation if we are not showing an axis // but we are displaying a line annotation @@ -134,7 +135,7 @@ function computeXDomainLineAnnotationDimensions( style, } = annotationSpec; const lineStyle = mergeWithDefaultAnnotationLine(style); - const color = lineStyle?.line?.stroke ?? 'red'; + const color = lineStyle?.line?.stroke ?? Colors.Red.keyword; const lineProps: AnnotationLineProps[] = []; const isHorizontalChartRotation = isHorizontalRotation(chartRotation); diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts index 9b486ce3870..a45d042c8fb 100644 --- a/packages/charts/src/common/color_library_wrappers.ts +++ b/packages/charts/src/common/color_library_wrappers.ts @@ -46,7 +46,7 @@ export function RGBATupleToString(rgba: RgbTuple): Color { export function isValid(color: Color): chroma.Color | false { try { // ref https://github.com/gka/chroma.js/issues/280 - return chroma(color === 'transparent' ? 'rgba(0,0,0,0)' : color); + return chroma(color === Colors.Transparent.keyword ? 'rgba(0,0,0,0)' : color); } catch { return false; } diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index 6a9e3f41f0f..35cc107431a 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -14,7 +14,7 @@ import { Color, Colors } from './colors'; * Determine the color for the text hinging on the parameters of maximizeColorContrast, foreground and containerBackground * @internal */ -export function fillTextColor(background: Color, containerBg: Color = 'white'): Color { +export function fillTextColor(background: Color, containerBg: Color = Colors.White.keyword): Color { const backgroundRGBA = colorToRgba(background); const containerBgRGBA = combineColors(colorToRgba(containerBg), Colors.White.rgba); // combine it with white if semi-transparent const blendedFbBg = combineColors(backgroundRGBA, containerBgRGBA); diff --git a/packages/charts/src/common/text_utils.ts b/packages/charts/src/common/text_utils.ts index b9fef361308..5a37c517d84 100644 --- a/packages/charts/src/common/text_utils.ts +++ b/packages/charts/src/common/text_utils.ts @@ -11,6 +11,7 @@ import { $Values as Values } from 'utility-types'; import { ArrayEntry } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; import { integerSnap, monotonicHillClimb } from '../solvers/monotonic_hill_climb'; import { Datum } from '../utils/common'; +import { Color } from './colors'; import { Pixels, Rectangle } from './geometry'; const FONT_WEIGHTS_NUMERIC = [100, 200, 300, 400, 500, 600, 700, 800, 900]; @@ -59,7 +60,7 @@ export interface Font { fontVariant: FontVariant; fontWeight: FontWeight; fontFamily: FontFamily; - textColor: string; + textColor: Color; } /** @public */ diff --git a/packages/charts/src/components/brush/brush.tsx b/packages/charts/src/components/brush/brush.tsx index 795dcf398b9..19cc46702e8 100644 --- a/packages/charts/src/components/brush/brush.tsx +++ b/packages/charts/src/components/brush/brush.tsx @@ -10,7 +10,8 @@ import React, { RefObject } from 'react'; import { connect } from 'react-redux'; import { renderRect } from '../../chart_types/xy_chart/renderer/canvas/primitives/rect'; -import { colorToRgba, RgbaTuple } from '../../common/color_library_wrappers'; +import { RgbaTuple } from '../../common/color_library_wrappers'; +import { Colors } from '../../common/colors'; import { clearCanvas, withContext, withClip } from '../../renderers/canvas'; import { GlobalChartState } from '../../state/chart_state'; import { getInternalBrushAreaSelector } from '../../state/selectors/get_internal_brush_area'; @@ -109,13 +110,13 @@ class BrushToolComponent extends React.Component { height: mainProjectionArea.height, }, () => { - clearCanvas(ctx, 'transparent'); + clearCanvas(ctx, Colors.Transparent.keyword); ctx.translate(mainProjectionArea.left, mainProjectionArea.top); renderRect( ctx, { x: left, y: top, width, height }, { color: DEFAULT_FILL_COLOR }, - { width: 0, color: colorToRgba('transparent') }, + { width: 0, color: Colors.Transparent.rgba }, ); }, ); diff --git a/packages/charts/src/components/chart.tsx b/packages/charts/src/components/chart.tsx index 9c92fbc8540..19c935cdb00 100644 --- a/packages/charts/src/components/chart.tsx +++ b/packages/charts/src/components/chart.tsx @@ -12,6 +12,7 @@ import { Provider } from 'react-redux'; import { createStore, Store, Unsubscribe, StoreEnhancer, applyMiddleware, Middleware } from 'redux'; import uuid from 'uuid'; +import { Colors } from '../common/colors'; import { LegendPositionConfig, PointerEvent } from '../specs'; import { SpecsParser } from '../specs/specs_parser'; import { onExternalPointerEvent } from '../state/actions/events'; @@ -118,7 +119,7 @@ export class Chart extends React.Component { getPNGSnapshot( // eslint-disable-next-line unicorn/no-object-as-default-parameter options = { - backgroundColor: 'transparent', + backgroundColor: Colors.Transparent.keyword, pixelRatio: 2, }, ): { diff --git a/packages/charts/src/components/chart_background.tsx b/packages/charts/src/components/chart_background.tsx index f6a58a4b41e..bdf3ef587ea 100644 --- a/packages/charts/src/components/chart_background.tsx +++ b/packages/charts/src/components/chart_background.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { connect } from 'react-redux'; +import { Colors } from '../common/colors'; import { GlobalChartState } from '../state/chart_state'; import { getChartThemeSelector } from '../state/selectors/get_chart_theme'; import { getInternalIsInitializedSelector, InitStatus } from '../state/selectors/get_internal_is_intialized'; @@ -30,7 +31,7 @@ export class ChartBackgroundComponent extends React.Component { if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) { return { - backgroundColor: 'transparent', + backgroundColor: Colors.Transparent.keyword, }; } return { diff --git a/packages/charts/src/components/tooltip/tooltip.tsx b/packages/charts/src/components/tooltip/tooltip.tsx index ff5ea77f02f..0dbfbce9d24 100644 --- a/packages/charts/src/components/tooltip/tooltip.tsx +++ b/packages/charts/src/components/tooltip/tooltip.tsx @@ -12,6 +12,7 @@ import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { colorToRgba } from '../../common/color_library_wrappers'; +import { Colors } from '../../common/colors'; import { TooltipValueFormatter, TooltipSettings, TooltipValue } from '../../specs'; import { onPointerMove as onPointerMoveAction } from '../../state/actions/mouse'; import { GlobalChartState, BackwardRef } from '../../state/chart_state'; @@ -113,7 +114,7 @@ const TooltipComponent = ({ echTooltip__rowHighlighted: isHighlighted, }); - const adjustedBGColor = colorToRgba(color)[3] === 0 ? 'transparent' : backgroundColor; + const adjustedBGColor = colorToRgba(color)[3] === 0 ? Colors.Transparent.keyword : backgroundColor; return (
diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx index 49f0a382e38..3893064e341 100644 --- a/packages/charts/src/utils/common.tsx +++ b/packages/charts/src/utils/common.tsx @@ -11,7 +11,7 @@ import { $Values, isPrimitive } from 'utility-types'; import { v1 as uuidV1 } from 'uuid'; import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; -import { Color } from '../common/colors'; +import { Color, Colors } from '../common/colors'; import { Degrees, Radian } from '../common/geometry'; import { AdditiveNumber } from './accessor'; import { Point } from './point'; @@ -150,7 +150,7 @@ export function getColorFromVariant(seriesColor: Color, color?: Color | ColorVar } if (color === ColorVariant.None) { - return 'transparent'; + return Colors.Transparent.keyword; } return color || seriesColor; diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts index 6cb327139e3..4d876b73941 100644 --- a/packages/charts/src/utils/themes/light_theme.ts +++ b/packages/charts/src/utils/themes/light_theme.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../common/colors'; import { palettes } from './colors'; import { Theme } from './theme'; import { @@ -28,7 +29,7 @@ export const LIGHT_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: 'white', + fill: Colors.White.keyword, radius: 2, opacity: 1, }, @@ -37,7 +38,7 @@ export const LIGHT_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: 'white', + fill: Colors.White.keyword, radius: 2, opacity: 1, }, @@ -55,7 +56,7 @@ export const LIGHT_THEME: Theme = { point: { visible: false, strokeWidth: 1, - fill: 'white', + fill: Colors.White.keyword, radius: 2, opacity: 1, }, @@ -81,7 +82,7 @@ export const LIGHT_THEME: Theme = { arcSeriesStyle: { arc: { visible: true, - stroke: 'black', + stroke: Colors.Black.keyword, strokeWidth: 1, opacity: 1, }, @@ -190,7 +191,7 @@ export const LIGHT_THEME: Theme = { }, }, background: { - color: 'transparent', + color: Colors.Transparent.keyword, }, goal: { minFontSize: 8, @@ -198,36 +199,36 @@ export const LIGHT_THEME: Theme = { tickLabel: { fontStyle: 'normal', fontFamily: 'sans-serif', - fill: 'black', + fill: Colors.Black.keyword, }, majorLabel: { fontStyle: 'normal', fontFamily: 'sans-serif', - fill: 'black', + fill: Colors.Black.keyword, }, minorLabel: { fontStyle: 'normal', fontFamily: 'sans-serif', - fill: 'black', + fill: Colors.Black.keyword, }, majorCenterLabel: { fontStyle: 'normal', fontFamily: 'sans-serif', - fill: 'black', + fill: Colors.Black.keyword, }, minorCenterLabel: { fontStyle: 'normal', fontFamily: 'sans-serif', - fill: 'black', + fill: Colors.Black.keyword, }, targetLine: { - stroke: 'black', + stroke: Colors.Black.keyword, }, tickLine: { stroke: 'darkgrey', }, progressLine: { - stroke: 'black', + stroke: Colors.Black.keyword, }, }, }; diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts index 460b1ccc0aa..44793890ab5 100644 --- a/packages/charts/src/utils/themes/theme_common.ts +++ b/packages/charts/src/utils/themes/theme_common.ts @@ -6,11 +6,12 @@ * Side Public License, v 1. */ +import { Color, Colors } from '../../common/colors'; import { Margins } from '../dimensions'; import { SharedGeometryStateStyle } from './theme'; /** @public */ -export const DEFAULT_MISSING_COLOR = 'red'; +export const DEFAULT_MISSING_COLOR: Color = Colors.Red.keyword; /** @public */ export const DEFAULT_CHART_PADDING: Margins = { From 46b542217b9252161fad64eba9e4afa67cf84a13 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 21 Sep 2021 19:46:43 +0200 Subject: [PATCH 4/6] replace rgb colors in tests --- .../heatmap/scales/band_color_scale.ts | 6 ++---- .../layout/viewmodel/link_text_layout.ts | 4 ++-- .../xy_chart/renderer/canvas/values/bar.ts | 6 +++--- .../charts/src/common/color_calcs.test.ts | 18 +++++++++--------- .../src/common/color_library_wrappers.test.ts | 19 ++++++++++--------- packages/charts/src/common/colors.tsx | 5 ++++- 6 files changed, 30 insertions(+), 28 deletions(-) diff --git a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts index 599638a34dc..4d9489ffd51 100644 --- a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts +++ b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts @@ -6,14 +6,12 @@ * Side Public License, v 1. */ -import { Color } from '../../../common/colors'; +import { Colors } from '../../../common/colors'; import { getPredicateFn } from '../../../common/predicate'; import { safeFormat, ValueFormatter } from '../../../utils/common'; import { ColorBand, HeatmapBandsColorScale } from '../specs/heatmap'; import { ColorScale } from '../state/selectors/get_color_scale'; -const TRANSPARENT_COLOR: Color = 'rgba(0, 0, 0, 0)'; - function defaultColorBandFormatter(valueFormatter?: ValueFormatter) { return (startValue: number, endValue: number) => { const finiteStart = Number.isFinite(startValue); @@ -51,6 +49,6 @@ function getBandScale(bands: ColorBand[]): ColorScale { return color; } } - return TRANSPARENT_COLOR; + return Colors.Transparent.keyword; }; } diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts index e1551cf5013..1986ab283ef 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts @@ -7,7 +7,7 @@ */ import { colorToRgba } from '../../../../common/color_library_wrappers'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; import { @@ -47,7 +47,7 @@ export function linkTextLayout( valueFormatter: ValueFormatter, maxTextLength: number, diskCenter: Point, - containerBgColor: Color = 'rgba(255,255,255,1)', + containerBgColor: Color = Colors.White.keyword, ): LinkLabelsViewModelSpec { const { linkLabel } = config; const maxDepth = nodesWithoutRoom.reduce((p: number, n: ShapeTreeNode) => Math.max(p, n.depth), 0); diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts index 7faba54cd11..d027919f68a 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Colors } from '../../../../../common/colors'; import { fillTextColor } from '../../../../../common/fill_text_color'; import { Font, TextAlign, TextBaseline } from '../../../../../common/text_utils'; import { Rect } from '../../../../../geoms/types'; @@ -187,7 +188,6 @@ function isOverflow(rect: Rect, chartDimensions: Dimensions, chartRotation: Rota return rect.x < 0 || rect.x + rect.width > cWidth || rect.y < 0 || rect.y + rect.height > cHeight; } -const TRANSPARENT_COLOR = 'rgba(0,0,0,0)'; type ValueFillDefinition = Theme['barSeriesStyle']['displayValue']['fill']; function getTextColors( @@ -195,12 +195,12 @@ function getTextColors( geometryColor: string, ): { fillColor: string; shadowColor: string } { if (typeof fillDefinition === 'string') { - return { fillColor: fillDefinition, shadowColor: TRANSPARENT_COLOR }; + return { fillColor: fillDefinition, shadowColor: Colors.Transparent.keyword }; } if ('color' in fillDefinition) { return { fillColor: fillDefinition.color, - shadowColor: fillDefinition.borderColor || TRANSPARENT_COLOR, + shadowColor: fillDefinition.borderColor || Colors.Transparent.keyword, }; } const fillColor = fillTextColor(geometryColor); diff --git a/packages/charts/src/common/color_calcs.test.ts b/packages/charts/src/common/color_calcs.test.ts index 0d690210718..559b7d62e47 100644 --- a/packages/charts/src/common/color_calcs.test.ts +++ b/packages/charts/src/common/color_calcs.test.ts @@ -8,29 +8,29 @@ import { integerSnap, monotonicHillClimb } from '../solvers/monotonic_hill_climb'; import { highContrastColor, combineColors } from './color_calcs'; -import { RgbaTuple } from './color_library_wrappers'; +import { RgbaTuple, RGBATupleToString } from './color_library_wrappers'; +import { Colors } from './colors'; import { fillTextColor } from './fill_text_color'; describe('Color calcs', () => { describe('test highContrastColor', () => { it('should return black when background is white', () => { - expect(fillTextColor('white')).toEqual('rgba(0, 0, 0, 1)'); + expect(fillTextColor(Colors.White.keyword)).toEqual(RGBATupleToString(Colors.Black.rgba)); }); // test contrast computation it('should return black with yellow/semi-transparent background', () => { - expect(fillTextColor(`rgba(255,255,51,0.3)`)).toEqual('rgba(0, 0, 0, 1)'); + expect(fillTextColor(`rgba(255,255,51,0.3)`)).toEqual(RGBATupleToString(Colors.Black.rgba)); }); it('should use white text for Thailand color', () => { // black for WCAG2, white for WCAG3 - expect(fillTextColor(`rgba(120, 116, 178, 1)`)).toEqual('rgba(0, 0, 0, 1)'); + expect(fillTextColor(`rgba(120, 116, 178, 1)`)).toEqual(RGBATupleToString(Colors.Black.rgba)); }); it('should switch to black text if background color is in rgba() format - Thailand', () => { - const containerBackground: RgbaTuple = [255, 255, 255, 1]; // white const background: RgbaTuple = [120, 116, 178, 0.7]; const blendedBackground: RgbaTuple = [161, 158, 201, 1]; - expect(combineColors(background, containerBackground)).toEqual(blendedBackground); - expect(highContrastColor(blendedBackground, 'WCAG2')).toEqual([0, 0, 0, 1]); - expect(highContrastColor(blendedBackground, 'WCAG3')).toEqual([255, 255, 255, 1]); + expect(combineColors(background, Colors.White.rgba)).toEqual(blendedBackground); + expect(highContrastColor(blendedBackground, 'WCAG2')).toEqual(Colors.Black.rgba); + expect(highContrastColor(blendedBackground, 'WCAG3')).toEqual(Colors.White.rgba); }); }); describe('test the combineColors function', () => { @@ -46,7 +46,7 @@ describe('Color calcs', () => { }); it('should return correct RGBA with the input color as a word vs rgba or hex value', () => { const expected = [0, 0, 255, 1]; - const result = combineColors([0, 0, 255, 1], [0, 0, 0, 1]); + const result = combineColors([0, 0, 255, 1], Colors.Black.rgba); expect(result).toEqual(expected); }); it('should return the correct RGBA with hex input', () => { diff --git a/packages/charts/src/common/color_library_wrappers.test.ts b/packages/charts/src/common/color_library_wrappers.test.ts index d31457e87da..82cf0e0ce0e 100644 --- a/packages/charts/src/common/color_library_wrappers.test.ts +++ b/packages/charts/src/common/color_library_wrappers.test.ts @@ -8,6 +8,7 @@ import { Logger } from '../utils/logger'; import { colorToRgba, overrideOpacity } from './color_library_wrappers'; +import { Colors } from './colors'; jest.mock('../utils/logger', () => ({ Logger: { @@ -19,11 +20,11 @@ describe('color library wrappers utils', () => { describe('colorToRgba', () => { describe('bad colors or undefined', () => { it('should return default RgbaTuple', () => { - expect(colorToRgba('not a color')).toMatchObject([255, 0, 0, 1]); + expect(colorToRgba('not a color')).toMatchObject(Colors.Red.rgba); }); it('should return default color if bad opacity', () => { - expect(colorToRgba('rgba(50,50,50,x)')).toMatchObject([255, 0, 0, 1]); + expect(colorToRgba('rgba(50,50,50,x)')).toMatchObject(Colors.Red.rgba); }); }); @@ -42,7 +43,7 @@ describe('color library wrappers utils', () => { }); it('should return correct RgbaTuple for alpha value of 0', () => { - expect(colorToRgba('#00000000')).toMatchObject([0, 0, 0, 0]); + expect(colorToRgba('#00000000')).toMatchObject(Colors.Transparent.rgba); }); }); @@ -80,11 +81,11 @@ describe('color library wrappers utils', () => { }); it('should return default RgbaTuple with 0 opacity', () => { - expect(colorToRgba('transparent')).toMatchObject([0, 0, 0, 0]); + expect(colorToRgba('transparent')).toMatchObject(Colors.Transparent.rgba); }); it('should return default RgbaTuple with 0 opacity even with override', () => { - expect(overrideOpacity(colorToRgba('transparent'), 0.5)).toMatchObject([0, 0, 0, 0]); + expect(overrideOpacity(colorToRgba('transparent'), 0.5)).toMatchObject(Colors.Transparent.rgba); }); }); @@ -101,10 +102,10 @@ describe('color library wrappers utils', () => { describe('Edge Cases', () => { it.each([ // [undefined, [255,0,0, 1 ], - ['', [255, 0, 0, 1]], + ['', Colors.Red.rgba], ['bad', [187, 170, 221, 1]], - ['#00000000', [0, 0, 0, 0]], - ['#000000', [0, 0, 0, 1]], + ['#00000000', Colors.Transparent.rgba], + ['#000000', Colors.Black.rgba], ['#6092c000', [96, 146, 192, 0]], ['#6092c06b', [96, 146, 192, 0.42]], ['blue', [0, 0, 255, 1]], @@ -124,7 +125,7 @@ describe('color library wrappers utils', () => { it.each(['rgba(NaN, 0, 0, 0)', 'rgba(0, NaN, 0, 0)', 'rgba(0, 0, NaN, 0)', 'rgba(0, 0, 0, NaN)'])( 'should return null if %s is NaN', (color) => { - expect(colorToRgba(color)).toEqual([255, 0, 0, 1]); + expect(colorToRgba(color)).toEqual(Colors.Red.rgba); expect(Logger.warn).toBeCalledTimes(1); }, ); diff --git a/packages/charts/src/common/colors.tsx b/packages/charts/src/common/colors.tsx index b38391e5a6a..70735a0bc7f 100644 --- a/packages/charts/src/common/colors.tsx +++ b/packages/charts/src/common/colors.tsx @@ -8,7 +8,10 @@ import { RgbaTuple } from './color_library_wrappers'; -/** @public */ +/** + * A CSS color keyword or a numerical representation (hex, rgb, rgba, hsl, hsla) + * @public + */ export type Color = string; // todo static/runtime type it this for proper color string content; several places in the code, and ultimate use, dictate it not be an empty string /** @internal */ From 08af9429059bb3d3f71d7cf00cb32632fe2a64fc Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 21 Sep 2021 19:56:06 +0200 Subject: [PATCH 5/6] removed unused exported types BREAKING CHANGE: DEFAULT_CHART_MARGINS, DEFAULT_GEOMETRY_STYLES, DEFAULT_CHART_PADDING and DEFAULT_MISSING_COLOR are no longer exposed --- packages/charts/api/charts.api.md | 33 +++++++++---------- packages/charts/src/index.ts | 2 +- .../charts/src/utils/themes/theme_common.ts | 8 ++--- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 8ffce405550..4de289ddad7 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -445,7 +445,7 @@ export const CHILDREN_KEY = "children"; // @public (undocumented) export function childrenAccessor(n: ArrayEntry): HierarchyOfArrays; -// @public (undocumented) +// @public export type Color = string; // @alpha (undocumented) @@ -620,23 +620,9 @@ export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle; // @public (undocumented) export const DEFAULT_ANNOTATION_RECT_STYLE: RectAnnotationStyle; -// Warning: (ae-forgotten-export) The symbol "Margins" needs to be exported by the entry point index.d.ts -// -// @public (undocumented) -export const DEFAULT_CHART_MARGINS: Margins; - -// @public (undocumented) -export const DEFAULT_CHART_PADDING: Margins; - -// @public (undocumented) -export const DEFAULT_GEOMETRY_STYLES: SharedGeometryStateStyle; - // @public export const DEFAULT_GLOBAL_ID = "__global__"; -// @public (undocumented) -export const DEFAULT_MISSING_COLOR = "red"; - // @public (undocumented) export const DEFAULT_SETTINGS_SPEC: SettingsSpec; @@ -1362,6 +1348,9 @@ export interface LogScaleOptions { // @public (undocumented) export type LowerBoundedDomain = DomainBase & LowerBound; +// @public +export type Margins = PerSideDistance; + // @public export type MarkBuffer = number | ((radius: number) => number); @@ -1426,8 +1415,6 @@ export type OrdinalDomain = (number | string)[]; // @public (undocumented) export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void; -// Warning: (ae-forgotten-export) The symbol "PerSideDistance" needs to be exported by the entry point index.d.ts -// // @public (undocumented) export type Padding = PerSideDistance; @@ -1507,6 +1494,18 @@ export const PATH_KEY = "path"; // @public (undocumented) export function pathAccessor(n: ArrayEntry): LegendPath; +// @public +export interface PerSideDistance { + // (undocumented) + bottom: number; + // (undocumented) + left: number; + // (undocumented) + right: number; + // (undocumented) + top: number; +} + // @public (undocumented) export type Pixels = number; diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index 65495761a52..c1d75355b44 100644 --- a/packages/charts/src/index.ts +++ b/packages/charts/src/index.ts @@ -18,7 +18,7 @@ export { DebugState } from './state/types'; export { toEntries } from './utils/common'; export { CurveType } from './utils/curves'; export { ContinuousDomain, OrdinalDomain } from './utils/domain'; -export { SimplePadding, Padding } from './utils/dimensions'; +export { SimplePadding, Padding, PerSideDistance, Margins } from './utils/dimensions'; export { timeFormatter, niceTimeFormatter, niceTimeFormatByDay } from './utils/data/formatters'; export { SeriesIdentifier, SeriesKey } from './common/series_id'; export { XYChartSeriesIdentifier, DataSeriesDatum, FilledValues } from './chart_types/xy_chart/utils/series'; diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts index 44793890ab5..dc6dec3e2cd 100644 --- a/packages/charts/src/utils/themes/theme_common.ts +++ b/packages/charts/src/utils/themes/theme_common.ts @@ -10,17 +10,17 @@ import { Color, Colors } from '../../common/colors'; import { Margins } from '../dimensions'; import { SharedGeometryStateStyle } from './theme'; -/** @public */ +/** @internal */ export const DEFAULT_MISSING_COLOR: Color = Colors.Red.keyword; -/** @public */ +/** @internal */ export const DEFAULT_CHART_PADDING: Margins = { left: 0, right: 0, top: 0, bottom: 0, }; -/** @public */ +/** @internal */ export const DEFAULT_CHART_MARGINS: Margins = { left: 10, right: 10, @@ -28,7 +28,7 @@ export const DEFAULT_CHART_MARGINS: Margins = { bottom: 10, }; -/** @public */ +/** @internal */ export const DEFAULT_GEOMETRY_STYLES: SharedGeometryStateStyle = { default: { opacity: 1, From 612ade06d91e13b13eb01397162e1183a7624a86 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 22 Sep 2021 12:29:04 +0200 Subject: [PATCH 6/6] remove type from constant --- packages/charts/src/utils/dimensions.ts | 2 +- packages/charts/src/utils/themes/theme_common.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/charts/src/utils/dimensions.ts b/packages/charts/src/utils/dimensions.ts index 22c5d51091c..e58d06975bd 100644 --- a/packages/charts/src/utils/dimensions.ts +++ b/packages/charts/src/utils/dimensions.ts @@ -32,7 +32,7 @@ export interface PerSideDistance { } /** - * fixme consider deactivating @typescript-eslint/no-empty-interface + * fixme consider deactivating \@typescript-eslint/no-empty-interface * see https://github.com/elastic/elastic-charts/pull/660#discussion_r419474171 * @public */ diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts index dc6dec3e2cd..9e5c3f2d079 100644 --- a/packages/charts/src/utils/themes/theme_common.ts +++ b/packages/charts/src/utils/themes/theme_common.ts @@ -6,12 +6,12 @@ * Side Public License, v 1. */ -import { Color, Colors } from '../../common/colors'; +import { Colors } from '../../common/colors'; import { Margins } from '../dimensions'; import { SharedGeometryStateStyle } from './theme'; /** @internal */ -export const DEFAULT_MISSING_COLOR: Color = Colors.Red.keyword; +export const DEFAULT_MISSING_COLOR = Colors.Red.keyword; /** @internal */ export const DEFAULT_CHART_PADDING: Margins = {