From ed7ec25c06e2f9fa10811f23753543258945a2b6 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Aug 2021 17:26:46 +0200 Subject: [PATCH 1/7] refactor: moved Color type to common/color file --- .../goal_chart/layout/types/config_types.ts | 2 +- .../charts/src/chart_types/goal_chart/specs/index.ts | 3 ++- .../chart_types/heatmap/layout/types/config_types.ts | 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 +- .../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.ts | 10 ++++++++++ packages/charts/src/common/color_calcs.ts | 2 +- packages/charts/src/common/color_library_wrappers.ts | 2 +- 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/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.tsx | 2 +- storybook/stories/goal/11_gaps.tsx | 2 +- storybook/stories/goal/12_range.tsx | 2 +- storybook/stories/goal/13_confidence_level.tsx | 2 +- storybook/stories/goal/14_one_third.tsx | 2 +- storybook/stories/goal/15_half_circle.tsx | 2 +- storybook/stories/goal/16_two_thirds.tsx | 2 +- storybook/stories/goal/17_three_quarters.tsx | 2 +- storybook/stories/goal/17_total_circle.tsx | 2 +- storybook/stories/goal/17_very_small_gap.tsx | 2 +- storybook/stories/goal/19_horizontal_negative.tsx | 2 +- storybook/stories/goal/20_vertical_negative.tsx | 2 +- storybook/stories/goal/21_goal_negative.tsx | 2 +- storybook/stories/goal/22_horizontal_plusminus.tsx | 2 +- storybook/stories/goal/23_vertical_plusminus.tsx | 2 +- storybook/stories/goal/24_goal_plusminus.tsx | 2 +- storybook/stories/goal/2_gauge_with_target.tsx | 2 +- storybook/stories/goal/3_horizontal_bullet.tsx | 2 +- storybook/stories/goal/4_vertical_bullet.tsx | 2 +- storybook/stories/goal/5_minimal.tsx | 2 +- storybook/stories/goal/6_minimal_horizontal.tsx | 2 +- storybook/stories/goal/7_horizontal_bar.tsx | 2 +- storybook/stories/goal/8_irregular_ticks.tsx | 2 +- storybook/stories/goal/9_minimal_band.tsx | 2 +- storybook/stories/interactions/17_png_export.tsx | 2 +- 65 files changed, 93 insertions(+), 65 deletions(-) create mode 100644 packages/charts/src/common/color.ts 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 3f566f9536..2edfe6d52d 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/color'; 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/specs/index.ts b/packages/charts/src/chart_types/goal_chart/specs/index.ts index b2e811872e..8407494c7f 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/color'; import { Spec } from '../../../specs'; import { SpecType } from '../../../specs/constants'; import { getConnect, specComponentFactory } from '../../../state/spec_factory'; -import { Color, RecursivePartial } from '../../../utils/common'; +import { RecursivePartial } from '../../../utils/common'; import { config } from '../layout/config/config'; import { Config } from '../layout/types/config_types'; import { defaultGoalSpec } from '../layout/types/viewmodel_types'; 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 a1b7a3fef2..f9059d4e20 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/color'; import { Pixels, SizeRatio } from '../../../../common/geometry'; import { Font, FontFamily, TextAlign, TextBaseline } from '../../../../common/text_utils'; -import { Color } from '../../../../utils/common'; import { Cell } from './viewmodel_types'; /** 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 1f781d8e09..46e1842ab7 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/color'; 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 f1c10e0ebc..90e418a36d 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/color'; 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 5ecab30912..8bd9029bdc 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/color'; 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 92360860a5..842b8f5b7d 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/color'; import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry'; import { Font, FontFamily, PartialFont, TextContrast } 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 babfda2f32..05285f84ac 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/color'; 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 ca53cf609d..040d59e6d7 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 @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/color'; import { getOnPaperColorSet } from '../../../../common/color_calcs'; import { TAU } from '../../../../common/constants'; import { @@ -17,7 +18,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 { Point } from '../../../../utils/point'; import { Config, LinkLabelConfig } from '../types/config_types'; import { LinkLabelVM, RawTextGetter, ShapeTreeNode, ValueGetterFunction } from '../types/viewmodel_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 d79ff0e676..5ced4c55e4 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/color'; 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 3e5957dcc1..3b8a87cb5e 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 @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/color'; import { argsToRGBString, stringToRGB } from '../../../../common/color_library_wrappers'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; @@ -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 { Layer } from '../../specs'; import { config as defaultConfig, MODEL_KEY, percentValueGetter } from '../config'; import { Config, FillLabelConfig, PartitionLayout } from '../types/config_types'; 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 bc8d02cb38..150266495b 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 @@ -6,12 +6,12 @@ * Side Public License, v 1. */ +import { Color } from '../../../../common/color'; import { addOpacity } from '../../../../common/color_calcs'; 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/wordcloud/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts index 3909110c2d..2aef183b0a 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/color'; 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 2545acd9c0..7c8c37fd20 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/color'; 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 c55bd78a9f..4f6b2556b3 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/color'; 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 aa24f17981..9ac4312659 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 @@ -6,9 +6,10 @@ * Side Public License, v 1. */ +import { Color } from '../../../../../common/color'; import { OpacityFn, stringToRGB } from '../../../../../common/color_library_wrappers'; 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 8cecfffb09..ab5df53b1a 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/color'; 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 b84b1aa3be..ffee820704 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/color'; import { Scale } from '../../../scales'; import { ScaleType } from '../../../scales/constants'; import { CanvasTextBBoxCalculator } 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 7141a3bd19..0b05580653 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/color'; 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 ce669e1bb6..0c24c0c31f 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/color'; 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 78784f8591..cd4f669f03 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/color'; 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 b9ff9cf209..0d7a25721c 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/color'; 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 da90284586..687c6298ae 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/color'; 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 565a557f2c..6bb76934d2 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/color'; 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 dc5a27a491..3d83bb658a 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/color'; 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 11eaf14dd5..9a6ab06e14 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/color'; import { OpacityFn } from '../../../common/color_library_wrappers'; 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.ts b/packages/charts/src/common/color.ts new file mode 100644 index 0000000000..74fe58b46d --- /dev/null +++ b/packages/charts/src/common/color.ts @@ -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/color_calcs.ts b/packages/charts/src/common/color_calcs.ts index 363f3b23be..612c6d718c 100644 --- a/packages/charts/src/common/color_calcs.ts +++ b/packages/charts/src/common/color_calcs.ts @@ -8,7 +8,7 @@ import chroma from 'chroma-js'; -import { Color } from '../utils/common'; +import { Color } from './color'; import { RgbaTuple, RGBATupleToString, RgbTuple, stringToRGB } from './color_library_wrappers'; import { Ratio } from './geometry'; import { TextContrast } from './text_utils'; diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts index 38eae17217..e30ebe77a5 100644 --- a/packages/charts/src/common/color_library_wrappers.ts +++ b/packages/charts/src/common/color_library_wrappers.ts @@ -9,7 +9,7 @@ import chroma from 'chroma-js'; import { rgb as d3Rgb, RGBColor as D3RGBColor } from 'd3-color'; -import { Color } from '../utils/common'; +import { Color } from './color'; type RGB = number; type A = number; diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index 8b226ae94e..f9876e318b 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -8,8 +8,8 @@ import chroma from 'chroma-js'; -import { Color } from '../utils/common'; import { Logger } from '../utils/logger'; +import { Color } from './color'; import { colorIsDark, combineColors, diff --git a/packages/charts/src/common/legend.ts b/packages/charts/src/common/legend.ts index ccf069eaed..46e7cbfd0c 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 './color'; 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 680f5e833d..cb4c2b9ebd 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/color'; 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 5c5723a5ba..4bb0c32e13 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/color'; 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 e828490076..fa28861615 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 { Ratio } from './common/geometry'; export { AdditiveNumber } from './utils/accessor'; export { FontStyle, FONT_STYLES } from './common/text_utils'; +export { Color } from './common/color'; diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx index 3be5b78c25..1c07aa9229 100644 --- a/packages/charts/src/specs/settings.tsx +++ b/packages/charts/src/specs/settings.tsx @@ -14,6 +14,7 @@ import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/grou import { LegendStrategy } from '../chart_types/partition_chart/layout/utils/highlighted_geoms'; import { WordModel } from '../chart_types/wordcloud/layout/types/viewmodel_types'; import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series'; +import { Color } from '../common/color'; import { SeriesIdentifier } from '../common/series_id'; import { TooltipPortalSettings } from '../components'; import { CustomTooltip } from '../components/tooltip/types'; @@ -22,7 +23,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 da1ade0004..fb1c24e3af 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/color'; 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 07f59b7a01..a7020b1c5f 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/color'; 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 3f298f0574..dbebe419fc 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/color'; 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 f9382ff8be..ecddeaf86f 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/color'; 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 44cab80fca..ca7260b480 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/color'; 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.tsx b/storybook/stories/goal/10_band_in_band.tsx index 17f3e03cb9..155b598d1a 100644 --- a/storybook/stories/goal/10_band_in_band.tsx +++ b/storybook/stories/goal/10_band_in_band.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/11_gaps.tsx b/storybook/stories/goal/11_gaps.tsx index 75746e30b9..43529180bb 100644 --- a/storybook/stories/goal/11_gaps.tsx +++ b/storybook/stories/goal/11_gaps.tsx @@ -13,8 +13,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/12_range.tsx b/storybook/stories/goal/12_range.tsx index cb28ef9580..374a35ccad 100644 --- a/storybook/stories/goal/12_range.tsx +++ b/storybook/stories/goal/12_range.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/13_confidence_level.tsx b/storybook/stories/goal/13_confidence_level.tsx index 64d6bab46e..d045317f51 100644 --- a/storybook/stories/goal/13_confidence_level.tsx +++ b/storybook/stories/goal/13_confidence_level.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/14_one_third.tsx b/storybook/stories/goal/14_one_third.tsx index 25e9005bd0..90e02e385f 100644 --- a/storybook/stories/goal/14_one_third.tsx +++ b/storybook/stories/goal/14_one_third.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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/15_half_circle.tsx b/storybook/stories/goal/15_half_circle.tsx index 499cfbe8ea..e99b1b9b95 100644 --- a/storybook/stories/goal/15_half_circle.tsx +++ b/storybook/stories/goal/15_half_circle.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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/16_two_thirds.tsx b/storybook/stories/goal/16_two_thirds.tsx index fda193d6c9..c224a8ad49 100644 --- a/storybook/stories/goal/16_two_thirds.tsx +++ b/storybook/stories/goal/16_two_thirds.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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_three_quarters.tsx b/storybook/stories/goal/17_three_quarters.tsx index 461f433c08..9b7b292ba9 100644 --- a/storybook/stories/goal/17_three_quarters.tsx +++ b/storybook/stories/goal/17_three_quarters.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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_total_circle.tsx b/storybook/stories/goal/17_total_circle.tsx index 4875d00236..bbde425217 100644 --- a/storybook/stories/goal/17_total_circle.tsx +++ b/storybook/stories/goal/17_total_circle.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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_very_small_gap.tsx b/storybook/stories/goal/17_very_small_gap.tsx index 614e74cce0..aad9e03a48 100644 --- a/storybook/stories/goal/17_very_small_gap.tsx +++ b/storybook/stories/goal/17_very_small_gap.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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/19_horizontal_negative.tsx b/storybook/stories/goal/19_horizontal_negative.tsx index 7ec23a3c23..1f557295f9 100644 --- a/storybook/stories/goal/19_horizontal_negative.tsx +++ b/storybook/stories/goal/19_horizontal_negative.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/20_vertical_negative.tsx b/storybook/stories/goal/20_vertical_negative.tsx index 16789287c9..2b76a05cdf 100644 --- a/storybook/stories/goal/20_vertical_negative.tsx +++ b/storybook/stories/goal/20_vertical_negative.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/21_goal_negative.tsx b/storybook/stories/goal/21_goal_negative.tsx index e2d21553c3..397f00b614 100644 --- a/storybook/stories/goal/21_goal_negative.tsx +++ b/storybook/stories/goal/21_goal_negative.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/22_horizontal_plusminus.tsx b/storybook/stories/goal/22_horizontal_plusminus.tsx index 92ff606bbc..23d5e50f38 100644 --- a/storybook/stories/goal/22_horizontal_plusminus.tsx +++ b/storybook/stories/goal/22_horizontal_plusminus.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/23_vertical_plusminus.tsx b/storybook/stories/goal/23_vertical_plusminus.tsx index bde161c6fc..3882d7cd2f 100644 --- a/storybook/stories/goal/23_vertical_plusminus.tsx +++ b/storybook/stories/goal/23_vertical_plusminus.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/24_goal_plusminus.tsx b/storybook/stories/goal/24_goal_plusminus.tsx index c3700632b2..dd56f4a175 100644 --- a/storybook/stories/goal/24_goal_plusminus.tsx +++ b/storybook/stories/goal/24_goal_plusminus.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/2_gauge_with_target.tsx b/storybook/stories/goal/2_gauge_with_target.tsx index 0a3f52216d..f6f7d2cbd0 100644 --- a/storybook/stories/goal/2_gauge_with_target.tsx +++ b/storybook/stories/goal/2_gauge_with_target.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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/3_horizontal_bullet.tsx b/storybook/stories/goal/3_horizontal_bullet.tsx index 5dc5efd311..93bcedabae 100644 --- a/storybook/stories/goal/3_horizontal_bullet.tsx +++ b/storybook/stories/goal/3_horizontal_bullet.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/4_vertical_bullet.tsx b/storybook/stories/goal/4_vertical_bullet.tsx index 93e26a2920..28d187fe85 100644 --- a/storybook/stories/goal/4_vertical_bullet.tsx +++ b/storybook/stories/goal/4_vertical_bullet.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/5_minimal.tsx b/storybook/stories/goal/5_minimal.tsx index 73af5adba7..4f78cefa02 100644 --- a/storybook/stories/goal/5_minimal.tsx +++ b/storybook/stories/goal/5_minimal.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/6_minimal_horizontal.tsx b/storybook/stories/goal/6_minimal_horizontal.tsx index 8d067d8368..d65ed6f770 100644 --- a/storybook/stories/goal/6_minimal_horizontal.tsx +++ b/storybook/stories/goal/6_minimal_horizontal.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/7_horizontal_bar.tsx b/storybook/stories/goal/7_horizontal_bar.tsx index 047a6ef912..f986f6f5e4 100644 --- a/storybook/stories/goal/7_horizontal_bar.tsx +++ b/storybook/stories/goal/7_horizontal_bar.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/8_irregular_ticks.tsx b/storybook/stories/goal/8_irregular_ticks.tsx index cad8839e9e..931879da21 100644 --- a/storybook/stories/goal/8_irregular_ticks.tsx +++ b/storybook/stories/goal/8_irregular_ticks.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/9_minimal_band.tsx b/storybook/stories/goal/9_minimal_band.tsx index 45992b1c6e..ca75f4e03b 100644 --- a/storybook/stories/goal/9_minimal_band.tsx +++ b/storybook/stories/goal/9_minimal_band.tsx @@ -12,8 +12,8 @@ import { Chart, Goal, Settings } from '@elastic/charts'; import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config'; 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/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/interactions/17_png_export.tsx b/storybook/stories/interactions/17_png_export.tsx index 765976e5c2..c7921cdc26 100644 --- a/storybook/stories/interactions/17_png_export.tsx +++ b/storybook/stories/interactions/17_png_export.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/color'; import { useBaseTheme } from '../../use_base_theme'; import { SB_KNOBS_PANEL } from '../utils/storybook'; import { productLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; From 99943735b403137a403cd84b2fa2d0f8ed10c72f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Aug 2021 17:50:52 +0200 Subject: [PATCH 2/7] refactor: move static colors to color.ts --- .../goal_chart/layout/viewmodel/geoms.ts | 15 ++++++++------- .../goal_chart/state/selectors/tooltip.ts | 3 ++- .../heatmap/layout/config/config.ts | 9 +++++---- .../renderer/canvas/canvas_renderers.ts | 3 ++- .../heatmap/scales/band_color_scale.ts | 4 +--- .../heatmap/state/selectors/tooltip.ts | 7 ++++--- .../layout/types/viewmodel_types.ts | 4 ++-- .../layout/viewmodel/viewmodel.ts | 4 ++-- .../canvas/canvas_linear_renderers.ts | 3 ++- .../renderer/dom/highlighter.tsx | 3 ++- .../xy_chart/annotations/line/dimensions.ts | 5 +++-- .../xy_chart/renderer/canvas/panels/panels.ts | 5 +++-- .../xy_chart/renderer/canvas/renderers.ts | 5 +++-- .../xy_chart/renderer/canvas/values/bar.ts | 9 +++++---- packages/charts/src/common/color.ts | 16 ++++++++++++++++ packages/charts/src/common/color_calcs.ts | 18 ++++++++---------- .../src/common/color_library_wrappers.ts | 19 ++++++++++--------- packages/charts/src/common/fill_text_color.ts | 4 ++-- .../charts/src/components/brush/brush.tsx | 3 ++- packages/charts/src/components/chart.tsx | 3 ++- .../src/components/chart_background.tsx | 3 ++- .../charts/src/components/tooltip/tooltip.tsx | 6 ++++-- packages/charts/src/utils/common.tsx | 4 ++-- .../charts/src/utils/themes/dark_theme.ts | 11 ++++++----- .../charts/src/utils/themes/light_theme.ts | 11 ++++++----- .../charts/src/utils/themes/theme_common.ts | 3 ++- 26 files changed, 106 insertions(+), 74 deletions(-) diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts index 64a89a4640..4707fecf53 100644 --- a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts +++ b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { BLACK_COLOR } from '../../../../common/color'; import { GOLDEN_RATIO, TAU } from '../../../../common/constants'; import { PointObject, Radian, Rectangle } from '../../../../common/geometry'; import { cssFontShorthand, Font } from '../../../../common/text_utils'; @@ -293,14 +294,14 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen { order: 1, landmarks: { from: 'base', to: 'actual' }, - aes: { shape, fillColor: 'black', lineWidth: tickLength }, + aes: { shape, fillColor: BLACK_COLOR, lineWidth: tickLength }, }, ...(target ? [ { order: 2, landmarks: { at: 'target' }, - aes: { shape, fillColor: 'black', lineWidth: barThickness / GOLDEN_RATIO }, + aes: { shape, fillColor: BLACK_COLOR, lineWidth: barThickness / GOLDEN_RATIO }, }, ] : []), @@ -316,7 +317,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen shape: 'text', textAlign: vertical ? 'right' : 'center', textBaseline: vertical ? 'middle' : 'top', - fillColor: 'black', + fillColor: BLACK_COLOR, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '500', fontFamily: 'sans-serif' }, axisNormalOffset: -barThickness, }, @@ -330,7 +331,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize, textAlign: vertical ? 'center' : 'right', textBaseline: 'bottom', - fillColor: 'black', + fillColor: BLACK_COLOR, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' }, }, }, @@ -343,7 +344,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize, textAlign: vertical ? 'center' : 'right', textBaseline: 'top', - fillColor: 'black', + fillColor: BLACK_COLOR, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' }, }, }, @@ -356,7 +357,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen shape: 'text', textAlign: 'center', textBaseline: 'bottom', - fillColor: 'black', + fillColor: BLACK_COLOR, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' }, }, }, @@ -367,7 +368,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen shape: 'text', textAlign: 'center', textBaseline: 'top', - fillColor: 'black', + fillColor: BLACK_COLOR, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' }, }, }, 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 e42c6f5ff7..8842f31208 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 { WHITE_COLOR } from '../../../../common/color'; 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 ?? WHITE_COLOR; /** @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 6957f4f208..e4525fc360 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 { BLACK_COLOR } from '../../../../common/color'; import { Config } from '../types/config_types'; /** @internal */ @@ -22,7 +23,7 @@ export const config: Config = { brushArea: { visible: true, - fill: 'black', // black === transparent + fill: BLACK_COLOR, stroke: '#69707D', // euiColorDarkShade, strokeWidth: 2, }, @@ -44,7 +45,7 @@ export const config: Config = { fontSize: 12, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: 'black', + textColor: BLACK_COLOR, fontVariant: 'normal', fontWeight: 'normal', textOpacity: 1, @@ -60,7 +61,7 @@ export const config: Config = { fontSize: 12, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: 'black', + textColor: BLACK_COLOR, fontVariant: 'normal', fontWeight: 'normal', textOpacity: 1, @@ -92,7 +93,7 @@ export const config: Config = { fontSize: 10, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: 'black', + textColor: BLACK_COLOR, fontVariant: 'normal', fontWeight: 'normal', textOpacity: 1, 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 9f5b7e392c..aa37b4ae78 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,6 +6,7 @@ * Side Public License, v 1. */ +import { BLACK_COLOR } from '../../../../common/color'; import { Font } from '../../../../common/text_utils'; import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas'; import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line'; @@ -92,7 +93,7 @@ export function renderCanvas2d( fontStyle: config.yAxisLabel.fontStyle ? config.yAxisLabel.fontStyle : 'normal', fontVariant: 'normal', fontWeight: 'normal', - textColor: 'black', + textColor: BLACK_COLOR, textOpacity: 1, }; const { padding } = config.yAxisLabel; 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 46e1842ab7..25a4607d7a 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/color'; +import { TRANSPARENT_COLOR } from '../../../common/color'; 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); 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 15218ae5b5..9497b7b4ad 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { TRANSPARENT_COLOR } from '../../../../common/color'; import { RGBtoString } from '../../../../common/color_library_wrappers'; import { TooltipInfo } from '../../../../components/tooltip/types'; import { createCustomCachedSelector } from '../../../../state/create_selector'; @@ -38,7 +39,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( // X-axis value tooltipInfo.values.push({ label: config.xAxisLabel.name, - color: 'transparent', + color: TRANSPARENT_COLOR, 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: TRANSPARENT_COLOR, isHighlighted: false, isVisible: true, seriesIdentifier: { @@ -83,7 +84,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( } else { tooltipInfo.values.push({ label: ``, - color: 'transparent', + color: TRANSPARENT_COLOR, isHighlighted: false, isVisible: true, seriesIdentifier: { 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 05285f84ac..fc5257a2a6 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/color'; +import { BLACK_COLOR, Color } from '../../../../common/color'; import { Coordinate, Distance, @@ -136,7 +136,7 @@ const defaultFont: Font = { fontVariant: 'normal', fontFamily: '', fontWeight: 'normal', - textColor: 'black', + textColor: BLACK_COLOR, textOpacity: 1, }; 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 3b8a87cb5e..9c651616c3 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 @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { Color } from '../../../../common/color'; +import { Color, TRANSPARENT_COLOR } from '../../../../common/color'; import { argsToRGBString, stringToRGB } from '../../../../common/color_library_wrappers'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; @@ -155,7 +155,7 @@ export function makeQuadViewModel( const { textColor, textInvertible, textContrast } = { ...fillLabel, ...layer.fillLabel }; const color = !isSunburstLayout && textNegligible - ? 'transparent' + ? TRANSPARENT_COLOR : fillTextColor(textColor, textInvertible, textContrast, fillColor, containerBackgroundColor); return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor: color, ...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 bdeee974eb..e1eb7a3fef 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 { TRANSPARENT_COLOR } from '../../../../common/color'; 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 === 'transparent' || textColor === TRANSPARENT_COLOR || 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/dom/highlighter.tsx b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx index 946d2788b9..2c21c63031 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 { BLACK_COLOR } from '../../../../common/color'; import { TAU } from '../../../../common/constants'; import { PointObject } from '../../../../common/geometry'; import { Dimensions } from '../../../../utils/dimensions'; @@ -188,7 +189,7 @@ export class HighlighterComponent extends React.Component { fill="white" /> - {renderGeometries(geometries, partitionLayout, { color: 'black' }, geometriesFoci, width)} + {renderGeometries(geometries, partitionLayout, { color: BLACK_COLOR }, 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 5795c9eee9..7a625f17a2 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 { RED_COLOR } from '../../../../common/color'; 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 ?? RED_COLOR; 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 ?? RED_COLOR; const lineProps: AnnotationLineProps[] = []; const isHorizontalChartRotation = isHorizontalRotation(chartRotation); 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 c097dda092..b6597b0363 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 { BLACK_COLOR, TRANSPARENT_COLOR } from '../../../../../common/color'; import { stringToRGB } from '../../../../../common/color_library_wrappers'; import { withContext } from '../../../../../renderers/canvas'; import { Position } from '../../../../../utils/common'; @@ -27,8 +28,8 @@ export function renderGridPanels(ctx: CanvasRenderingContext2D, { x: chartX, y: renderRect( ctx, { x: chartX + panelX, y: chartY + panelY, width, height }, - { color: stringToRGB('rgba(0,0,0,0)') }, - { color: stringToRGB('rgb(0,0,0)'), width: 1 }, + { color: stringToRGB(TRANSPARENT_COLOR) }, + { color: stringToRGB(BLACK_COLOR), 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 f63a926693..dd8b6c2b6c 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 { RED_COLOR, TRANSPARENT_COLOR } from '../../../../common/color'; import { stringToRGB } from '../../../../common/color_library_wrappers'; import { Rect } from '../../../../geoms/types'; import { clearCanvas, isCanvasRenderer, renderLayers, withContext } from '../../../../renderers/canvas'; @@ -148,8 +149,8 @@ export function renderXYChartCanvas2d( renderDebugRect( ctx, { x: left, y: top, width, height }, - { color: stringToRGB('transparent') }, - { color: stringToRGB('red'), width: 4, dash: [4, 4] }, + { color: stringToRGB(TRANSPARENT_COLOR) }, + { color: stringToRGB(RED_COLOR), width: 4, dash: [4, 4] }, ); const renderer = geometriesIndex.triangulation([0, 0, width, height])?.render; 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 563542e770..df77c4fb6b 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 { BLACK_COLOR, TRANSPARENT_COLOR, WHITE_COLOR } from '../../../../../common/color'; import { colorIsDark, getTextColorIfTextInvertible } from '../../../../../common/color_calcs'; import { fillTextColor } from '../../../../../common/fill_text_color'; import { Font, TextAlign, TextBaseline } from '../../../../../common/text_utils'; @@ -341,11 +342,11 @@ function isOverflow(rect: Rect, chartDimensions: Dimensions, chartRotation: Rota return false; } -const DEFAULT_VALUE_COLOR = 'black'; +const DEFAULT_VALUE_COLOR = BLACK_COLOR; // a little bit of alpha makes black font more readable const DEFAULT_VALUE_BORDER_COLOR = 'rgba(255, 255, 255, 0.8)'; -const DEFAULT_VALUE_BORDER_SOLID_COLOR = 'rgb(255, 255, 255)'; -const TRANSPARENT_COLOR = 'rgba(0,0,0,0)'; +const DEFAULT_VALUE_BORDER_SOLID_COLOR = WHITE_COLOR; + type ValueFillDefinition = Theme['barSeriesStyle']['displayValue']['fill']; function getTextColors( @@ -368,7 +369,7 @@ function getTextColors( fillDefinition.textInvertible, fillDefinition.textContrast || false, geometryColor, - 'white', + WHITE_COLOR, ) || DEFAULT_VALUE_COLOR; // If the border is too wide it can overlap between a letter or another diff --git a/packages/charts/src/common/color.ts b/packages/charts/src/common/color.ts index 74fe58b46d..72a380984e 100644 --- a/packages/charts/src/common/color.ts +++ b/packages/charts/src/common/color.ts @@ -6,5 +6,21 @@ * Side Public License, v 1. */ +import { RgbObject } 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 TRANSPARENT_COLOR: Color = 'rgba(0, 0, 0, 0)'; +/** @internal */ +export const WHITE_COLOR: Color = 'rgba(255, 255, 255, 1)'; +/** @internal */ +export const BLACK_COLOR: Color = 'rgba(0, 0, 0, 1)'; +/** @internal */ +export const RED_COLOR: Color = 'rgba(255, 0, 0, 1)'; + +/** @internal */ +export const RED_RGBOBJ_COLOR: RgbObject = { r: 255, g: 0, b: 0, opacity: 1 }; +/** @internal */ +export const TRANSPARENT_RBGOBJ_COLOR: RgbObject = { r: 0, g: 0, b: 0, opacity: 0 }; diff --git a/packages/charts/src/common/color_calcs.ts b/packages/charts/src/common/color_calcs.ts index 612c6d718c..e53dfbf40c 100644 --- a/packages/charts/src/common/color_calcs.ts +++ b/packages/charts/src/common/color_calcs.ts @@ -8,7 +8,7 @@ import chroma from 'chroma-js'; -import { Color } from './color'; +import { BLACK_COLOR, Color, TRANSPARENT_COLOR, WHITE_COLOR } from './color'; import { RgbaTuple, RGBATupleToString, RgbTuple, stringToRGB } from './color_library_wrappers'; import { Ratio } from './geometry'; import { TextContrast } from './text_utils'; @@ -64,7 +64,7 @@ export function combineColors(foregroundColor: Color, backgroundColor: Color): C const combinedAlpha = alpha1 + alpha2 * (1 - alpha1); if (combinedAlpha === 0) { - return 'rgba(0,0,0,0)'; + return TRANSPARENT_COLOR; } const combinedRed = Math.round((red1 * alpha1 + red2 * alpha2 * (1 - alpha1)) / combinedAlpha); @@ -102,10 +102,10 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati let highContrastTextColor = foreground; const isBackgroundDark = colorIsDark(background); // determine whether white or black text is ideal contrast vs a grey that just passes the ratio - if (isBackgroundDark && chroma.deltaE('black', foreground) === 0) { - highContrastTextColor = '#fff'; - } else if (lightness > 0.5 && chroma.deltaE('white', foreground) === 0) { - highContrastTextColor = '#000'; + if (isBackgroundDark && chroma.deltaE(BLACK_COLOR, foreground) === 0) { + highContrastTextColor = WHITE_COLOR; + } else if (lightness > 0.5 && chroma.deltaE(WHITE_COLOR, foreground) === 0) { + highContrastTextColor = BLACK_COLOR; } const precision = 1e8; let contrast = getContrast(highContrastTextColor, background); @@ -176,7 +176,7 @@ export function getTextColorIfTextInvertible( : makeHighContrastColor(`rgba(${255 - tr}, ${255 - tg}, ${255 - tb}, ${to})`, backgroundColor, textContrast) : makeHighContrastColor(textColor, backgroundColor, textContrast); } - return 'black'; // this should never happen; added it as previously function return type included undefined; todo + return BLACK_COLOR; // this should never happen; added it as previously function return type included undefined; todo } /** @@ -187,9 +187,7 @@ export function getTextColorIfTextInvertible( */ export function getOnPaperColorSet(textColor: Color, sectorLineStroke: Color, containerBackgroundColor?: Color) { // determine the ideal contrast color for the link labels - const validBackgroundColor = isColorValid(containerBackgroundColor) - ? containerBackgroundColor - : 'rgba(255, 255, 255, 0)'; + const validBackgroundColor = isColorValid(containerBackgroundColor) ? containerBackgroundColor : TRANSPARENT_COLOR; const contrastTextColor = containerBackgroundColor ? makeHighContrastColor(textColor, validBackgroundColor) : textColor; diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts index e30ebe77a5..fea8c6e049 100644 --- a/packages/charts/src/common/color_library_wrappers.ts +++ b/packages/charts/src/common/color_library_wrappers.ts @@ -9,7 +9,7 @@ import chroma from 'chroma-js'; import { rgb as d3Rgb, RGBColor as D3RGBColor } from 'd3-color'; -import { Color } from './color'; +import { Color, RED_RGBOBJ_COLOR, TRANSPARENT_RBGOBJ_COLOR } from './color'; type RGB = number; type A = number; @@ -22,11 +22,12 @@ export type RgbObject = { r: RGB; g: RGB; b: RGB; opacity: A }; export type RgbaTuple = [RGB, RGB, RGB, RGB]; /** @internal */ -export const defaultColor: RgbObject = { r: 255, g: 0, b: 0, opacity: 1 }; -/** @internal */ -export const transparentColor: RgbObject = { r: 0, g: 0, b: 0, opacity: 0 }; -/** @internal */ -export const defaultD3Color: D3RGBColor = d3Rgb(defaultColor.r, defaultColor.g, defaultColor.b, defaultColor.opacity); +export const defaultD3Color: D3RGBColor = d3Rgb( + RED_RGBOBJ_COLOR.r, + RED_RGBOBJ_COLOR.g, + RED_RGBOBJ_COLOR.b, + RED_RGBOBJ_COLOR.opacity, +); /** @internal */ export type OpacityFn = (opacity: number, seriesOpacity?: number) => number; @@ -34,7 +35,7 @@ export type OpacityFn = (opacity: number, seriesOpacity?: number) => number; /** @internal */ export function stringToRGB(cssColorSpecifier?: string, opacity?: number | OpacityFn): RgbObject { if (cssColorSpecifier === 'transparent') { - return transparentColor; + return TRANSPARENT_RBGOBJ_COLOR; } const color = getColor(cssColorSpecifier); @@ -62,7 +63,7 @@ export function stringToRGB(cssColorSpecifier?: string, opacity?: number | Opaci * @param cssColorSpecifier */ function getColor(cssColorSpecifier: string = ''): RgbObject { - if (!chroma.valid(cssColorSpecifier)) return defaultColor; + if (!chroma.valid(cssColorSpecifier)) return RED_RGBOBJ_COLOR; const chromaColor = chroma(cssColorSpecifier); const color: D3RGBColor = { @@ -70,7 +71,7 @@ function getColor(cssColorSpecifier: string = ''): RgbObject { opacity: chromaColor.alpha(), }; - return validateColor(color) ?? defaultColor; + return validateColor(color) ?? RED_RGBOBJ_COLOR; } /** @internal */ diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index f9876e318b..81aafa20a1 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -9,7 +9,7 @@ import chroma from 'chroma-js'; import { Logger } from '../utils/logger'; -import { Color } from './color'; +import { Color, WHITE_COLOR } from './color'; import { colorIsDark, combineColors, @@ -50,7 +50,7 @@ export function fillTextColor( colorIsDark(textColor), textColor, false, - 'white', // never used + WHITE_COLOR, // never used ); } diff --git a/packages/charts/src/components/brush/brush.tsx b/packages/charts/src/components/brush/brush.tsx index 84cd9011fd..6d6dddf205 100644 --- a/packages/charts/src/components/brush/brush.tsx +++ b/packages/charts/src/components/brush/brush.tsx @@ -10,6 +10,7 @@ import React, { RefObject } from 'react'; import { connect } from 'react-redux'; import { renderRect } from '../../chart_types/xy_chart/renderer/canvas/primitives/rect'; +import { TRANSPARENT_COLOR, TRANSPARENT_RBGOBJ_COLOR } from '../../common/color'; import { RgbObject, stringToRGB } from '../../common/color_library_wrappers'; import { clearCanvas, withContext, withClip } from '../../renderers/canvas'; import { GlobalChartState } from '../../state/chart_state'; @@ -124,7 +125,7 @@ class BrushToolComponent extends React.Component { ctx, { x: left, y: top, width, height }, { color: fillColor ?? DEFAULT_FILL_COLOR }, - { width: 0, color: stringToRGB('transparent') }, + { width: 0, color: TRANSPARENT_RBGOBJ_COLOR }, ); }, ); diff --git a/packages/charts/src/components/chart.tsx b/packages/charts/src/components/chart.tsx index 9c92fbc854..9b12f2dae7 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 { TRANSPARENT_COLOR } from '../common/color'; 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: TRANSPARENT_COLOR, pixelRatio: 2, }, ): { diff --git a/packages/charts/src/components/chart_background.tsx b/packages/charts/src/components/chart_background.tsx index f6a58a4b41..a193b79327 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 { TRANSPARENT_COLOR } from '../common/color'; 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: TRANSPARENT_COLOR, }; } return { diff --git a/packages/charts/src/components/tooltip/tooltip.tsx b/packages/charts/src/components/tooltip/tooltip.tsx index 30234a5222..3e26eef1eb 100644 --- a/packages/charts/src/components/tooltip/tooltip.tsx +++ b/packages/charts/src/components/tooltip/tooltip.tsx @@ -12,6 +12,7 @@ import React, { memo, useCallback, useMemo, useEffect } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; +import { TRANSPARENT_COLOR } from '../../common/color'; import { isColorValid } from '../../common/color_calcs'; import { TooltipValueFormatter, TooltipSettings, TooltipValue } from '../../specs'; import { onPointerMove as onPointerMoveAction } from '../../state/actions/mouse'; @@ -113,7 +114,8 @@ const TooltipComponent = ({ const classes = classNames('echTooltip__item', { echTooltip__rowHighlighted: isHighlighted, }); - const adjustedBGColor = isColorValid(color) && chroma(color).alpha() === 0 ? 'transparent' : backgroundColor; + const adjustedBGColor = + isColorValid(color) && chroma(color).alpha() === 0 ? TRANSPARENT_COLOR : backgroundColor; return (
diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx index dbebe419fc..3bbaae0ff7 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/color'; +import { Color, TRANSPARENT_COLOR } from '../common/color'; import { Degrees, Radian } from '../common/geometry'; import { AdditiveNumber } from './accessor'; import { Point } from './point'; @@ -172,7 +172,7 @@ export function getColorFromVariant(seriesColor: Color, color?: Color | ColorVar } if (color === ColorVariant.None) { - return 'transparent'; + return TRANSPARENT_COLOR; } return color || seriesColor; diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts index 73bade60fa..ed227e9061 100644 --- a/packages/charts/src/utils/themes/dark_theme.ts +++ b/packages/charts/src/utils/themes/dark_theme.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { BLACK_COLOR, TRANSPARENT_COLOR, WHITE_COLOR } from '../../common/color'; import { palettes } from './colors'; import { Theme } from './theme'; import { @@ -28,7 +29,7 @@ export const DARK_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: 'black', + fill: BLACK_COLOR, radius: 2, opacity: 1, }, @@ -37,7 +38,7 @@ export const DARK_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: 'black', + fill: BLACK_COLOR, radius: 2, opacity: 1, }, @@ -54,7 +55,7 @@ export const DARK_THEME: Theme = { }, point: { visible: false, - fill: 'black', + fill: BLACK_COLOR, strokeWidth: 0.5, radius: 1, opacity: 1, @@ -81,7 +82,7 @@ export const DARK_THEME: Theme = { arcSeriesStyle: { arc: { visible: true, - stroke: 'white', + stroke: WHITE_COLOR, strokeWidth: 1, opacity: 1, }, @@ -190,6 +191,6 @@ export const DARK_THEME: Theme = { }, }, background: { - color: 'transparent', + color: TRANSPARENT_COLOR, }, }; diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts index a6dd80ba5d..474515a6c7 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 { BLACK_COLOR, TRANSPARENT_COLOR, WHITE_COLOR } from '../../common/color'; 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: WHITE_COLOR, radius: 2, opacity: 1, }, @@ -37,7 +38,7 @@ export const LIGHT_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: 'white', + fill: WHITE_COLOR, radius: 2, opacity: 1, }, @@ -55,7 +56,7 @@ export const LIGHT_THEME: Theme = { point: { visible: false, strokeWidth: 1, - fill: 'white', + fill: WHITE_COLOR, radius: 2, opacity: 1, }, @@ -81,7 +82,7 @@ export const LIGHT_THEME: Theme = { arcSeriesStyle: { arc: { visible: true, - stroke: 'black', + stroke: BLACK_COLOR, strokeWidth: 1, opacity: 1, }, @@ -190,6 +191,6 @@ export const LIGHT_THEME: Theme = { }, }, background: { - color: 'transparent', + color: TRANSPARENT_COLOR, }, }; diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts index 460b1ccc0a..707984fdce 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 { RED_COLOR } from '../../common/color'; import { Margins } from '../dimensions'; import { SharedGeometryStateStyle } from './theme'; /** @public */ -export const DEFAULT_MISSING_COLOR = 'red'; +export const DEFAULT_MISSING_COLOR = RED_COLOR; /** @public */ export const DEFAULT_CHART_PADDING: Margins = { From a00dbeae4d98bc70c3705617ecb764ce040f9115 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Aug 2021 18:02:17 +0200 Subject: [PATCH 3/7] chore: remove unused imports --- packages/charts/src/components/brush/brush.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/charts/src/components/brush/brush.tsx b/packages/charts/src/components/brush/brush.tsx index 6d6dddf205..4398270287 100644 --- a/packages/charts/src/components/brush/brush.tsx +++ b/packages/charts/src/components/brush/brush.tsx @@ -10,8 +10,8 @@ import React, { RefObject } from 'react'; import { connect } from 'react-redux'; import { renderRect } from '../../chart_types/xy_chart/renderer/canvas/primitives/rect'; -import { TRANSPARENT_COLOR, TRANSPARENT_RBGOBJ_COLOR } from '../../common/color'; -import { RgbObject, stringToRGB } from '../../common/color_library_wrappers'; +import { TRANSPARENT_RBGOBJ_COLOR } from '../../common/color'; +import { RgbObject } from '../../common/color_library_wrappers'; import { clearCanvas, withContext, withClip } from '../../renderers/canvas'; import { GlobalChartState } from '../../state/chart_state'; import { getInternalBrushAreaSelector } from '../../state/selectors/get_internal_brush_area'; From 9a0788d46b21cacddb9eb2e5bf57fb9ac2c9a024 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 23 Aug 2021 12:36:10 +0200 Subject: [PATCH 4/7] cleanup test --- .../charts/src/common/color_calcs.test.ts | 33 +++++++------------ packages/charts/src/utils/common.test.ts | 3 +- 2 files changed, 13 insertions(+), 23 deletions(-) diff --git a/packages/charts/src/common/color_calcs.test.ts b/packages/charts/src/common/color_calcs.test.ts index a4253af754..a742604fca 100644 --- a/packages/charts/src/common/color_calcs.test.ts +++ b/packages/charts/src/common/color_calcs.test.ts @@ -7,51 +7,40 @@ */ import { integerSnap, monotonicHillClimb } from '../solvers/monotonic_hill_climb'; +import { BLACK_COLOR, WHITE_COLOR } from './color'; import { makeHighContrastColor, combineColors } from './color_calcs'; describe('calcs', () => { describe('test makeHighContrastColor', () => { it('hex input - should change white text to black when background is white', () => { - const expected = '#000'; - const result = makeHighContrastColor('#fff', '#fff'); - expect(result).toBe(expected); + expect(makeHighContrastColor('#fff', '#fff')).toBe(BLACK_COLOR); }); it('rgb input - should change white text to black when background is white', () => { - const expected = '#000'; - const result = makeHighContrastColor('rgb(255, 255, 255)', 'rgb(255, 255, 255)'); - expect(result).toBe(expected); + expect(makeHighContrastColor('rgb(255, 255, 255)', 'rgb(255, 255, 255)')).toBe(BLACK_COLOR); }); it('rgba input - should change white text to black when background is white', () => { - const expected = '#000'; - const result = makeHighContrastColor('rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'); - expect(result).toBe(expected); + expect(makeHighContrastColor('rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)')).toBe(BLACK_COLOR); }); it('word input - should change white text to black when background is white', () => { - const expected = '#000'; - const result = makeHighContrastColor('white', 'white'); - expect(result).toBe(expected); + expect(makeHighContrastColor(WHITE_COLOR, WHITE_COLOR)).toBe(BLACK_COLOR); }); // test contrast computation it('should provide at least 4.5 contrast', () => { - const foreground = '#fff'; // white + const foreground = WHITE_COLOR; const background = 'rgba(255, 255, 51, 0.3)'; // light yellow - const result = '#000'; // black - expect(result).toBe(makeHighContrastColor(foreground, background)); + expect(makeHighContrastColor(foreground, background)).toBe(BLACK_COLOR); }); it('should use black text for hex value', () => { - const foreground = '#fff'; // white + const foreground = WHITE_COLOR; const background = '#7874B2'; // Thailand color - const result = '#000'; // black - expect(result).toBe(makeHighContrastColor(foreground, background)); + expect(makeHighContrastColor(foreground, background)).toBe(BLACK_COLOR); }); it('should switch to black text if background color is in rgba() format - Thailand', () => { - const containerBackground = 'white'; + const containerBackground = WHITE_COLOR; const background = 'rgba(120, 116, 178, 0.7)'; const resultForCombined = 'rgba(161, 158, 201, 1)'; // 0.3 'rgba(215, 213, 232, 1)'; // 0.5 - 'rgba(188, 186, 217, 1)'; //0.7 - ; expect(combineColors(background, containerBackground)).toBe(resultForCombined); - const foreground = 'white'; - const resultForContrastedText = '#000'; // switches to black text - expect(makeHighContrastColor(foreground, resultForCombined)).toBe(resultForContrastedText); + expect(makeHighContrastColor(WHITE_COLOR, resultForCombined)).toBe(BLACK_COLOR); }); }); describe('test the combineColors function', () => { diff --git a/packages/charts/src/utils/common.test.ts b/packages/charts/src/utils/common.test.ts index e6c6c76517..f25d3ed43a 100644 --- a/packages/charts/src/utils/common.test.ts +++ b/packages/charts/src/utils/common.test.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { TRANSPARENT_COLOR } from '../common/color'; import { maxValueWithUpperLimit, compareByValueAsc, @@ -1019,7 +1020,7 @@ describe('common utilities', () => { }); it('should return transparent if ColorVariant is None', () => { - expect(getColorFromVariant(seriesColor, ColorVariant.None)).toBe('transparent'); + expect(getColorFromVariant(seriesColor, ColorVariant.None)).toBe(TRANSPARENT_COLOR); }); it('should return color if Color is passed', () => { From d77f9670f1715c054c2c59f342d5d6c4fbde57c7 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 26 Aug 2021 16:59:32 +0200 Subject: [PATCH 5/7] refactor: move colors into Colors object --- .../goal_chart/layout/viewmodel/geoms.ts | 16 +++++----- .../goal_chart/state/selectors/tooltip.ts | 4 +-- .../heatmap/layout/config/config.ts | 10 +++---- .../renderer/canvas/canvas_renderers.ts | 4 +-- .../heatmap/scales/band_color_scale.ts | 4 +-- .../heatmap/state/selectors/tooltip.ts | 8 ++--- .../layout/types/viewmodel_types.ts | 4 +-- .../layout/viewmodel/viewmodel.ts | 4 +-- .../canvas/canvas_linear_renderers.ts | 4 +-- .../renderer/dom/highlighter.tsx | 4 +-- .../xy_chart/annotations/line/dimensions.ts | 6 ++-- .../xy_chart/renderer/canvas/panels/panels.ts | 7 ++--- .../xy_chart/renderer/canvas/renderers.ts | 7 ++--- .../xy_chart/renderer/canvas/values/bar.ts | 16 +++++----- packages/charts/src/common/color.ts | 30 +++++++++++-------- .../charts/src/common/color_calcs.test.ts | 22 +++++++------- packages/charts/src/common/color_calcs.ts | 18 ++++++----- .../src/common/color_library_wrappers.ts | 18 ++++++----- packages/charts/src/common/fill_text_color.ts | 4 +-- .../__snapshots__/chart.test.tsx.snap | 4 +-- .../charts/src/components/brush/brush.tsx | 4 +-- packages/charts/src/components/chart.tsx | 4 +-- .../src/components/chart_background.tsx | 4 +-- .../charts/src/components/tooltip/tooltip.tsx | 6 ++-- packages/charts/src/utils/common.test.ts | 4 +-- packages/charts/src/utils/common.tsx | 4 +-- .../charts/src/utils/themes/dark_theme.ts | 12 ++++---- .../charts/src/utils/themes/light_theme.ts | 12 ++++---- .../charts/src/utils/themes/theme_common.ts | 4 +-- 29 files changed, 128 insertions(+), 120 deletions(-) diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts index 4707fecf53..4f63eba736 100644 --- a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts +++ b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { BLACK_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { GOLDEN_RATIO, TAU } from '../../../../common/constants'; import { PointObject, Radian, Rectangle } from '../../../../common/geometry'; import { cssFontShorthand, Font } from '../../../../common/text_utils'; @@ -294,14 +294,14 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen { order: 1, landmarks: { from: 'base', to: 'actual' }, - aes: { shape, fillColor: BLACK_COLOR, lineWidth: tickLength }, + aes: { shape, fillColor: Colors.Black.rgba, lineWidth: tickLength }, }, ...(target ? [ { order: 2, landmarks: { at: 'target' }, - aes: { shape, fillColor: BLACK_COLOR, lineWidth: barThickness / GOLDEN_RATIO }, + aes: { shape, fillColor: Colors.Black.rgba, lineWidth: barThickness / GOLDEN_RATIO }, }, ] : []), @@ -317,7 +317,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen shape: 'text', textAlign: vertical ? 'right' : 'center', textBaseline: vertical ? 'middle' : 'top', - fillColor: BLACK_COLOR, + fillColor: Colors.Black.rgba, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '500', fontFamily: 'sans-serif' }, axisNormalOffset: -barThickness, }, @@ -331,7 +331,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize, textAlign: vertical ? 'center' : 'right', textBaseline: 'bottom', - fillColor: BLACK_COLOR, + fillColor: Colors.Black.rgba, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' }, }, }, @@ -344,7 +344,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize, textAlign: vertical ? 'center' : 'right', textBaseline: 'top', - fillColor: BLACK_COLOR, + fillColor: Colors.Black.rgba, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' }, }, }, @@ -357,7 +357,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen shape: 'text', textAlign: 'center', textBaseline: 'bottom', - fillColor: BLACK_COLOR, + fillColor: Colors.Black.rgba, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' }, }, }, @@ -368,7 +368,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen shape: 'text', textAlign: 'center', textBaseline: 'top', - fillColor: BLACK_COLOR, + fillColor: Colors.Black.rgba, fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' }, }, }, 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 8842f31208..b09a568c21 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,7 +6,7 @@ * Side Public License, v 1. */ -import { WHITE_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { TooltipInfo } from '../../../../components/tooltip/types'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { BandViewModel } from '../../layout/types/viewmodel_types'; @@ -21,7 +21,7 @@ const EMPTY_TOOLTIP = Object.freeze({ const getBandColor = (value: number, bands: BandViewModel[]) => bands.find(({ value: v }) => { return v >= value; - })?.fillColor ?? WHITE_COLOR; + })?.fillColor ?? Colors.White.rgba; /** @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 e4525fc360..3e76683f6b 100644 --- a/packages/charts/src/chart_types/heatmap/layout/config/config.ts +++ b/packages/charts/src/chart_types/heatmap/layout/config/config.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { BLACK_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { Config } from '../types/config_types'; /** @internal */ @@ -23,7 +23,7 @@ export const config: Config = { brushArea: { visible: true, - fill: BLACK_COLOR, + fill: Colors.Black.rgba, stroke: '#69707D', // euiColorDarkShade, strokeWidth: 2, }, @@ -45,7 +45,7 @@ export const config: Config = { fontSize: 12, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: BLACK_COLOR, + textColor: Colors.Black.rgba, fontVariant: 'normal', fontWeight: 'normal', textOpacity: 1, @@ -61,7 +61,7 @@ export const config: Config = { fontSize: 12, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: BLACK_COLOR, + textColor: Colors.Black.rgba, fontVariant: 'normal', fontWeight: 'normal', textOpacity: 1, @@ -93,7 +93,7 @@ export const config: Config = { fontSize: 10, fontFamily: 'Sans-Serif', fontStyle: 'normal', - textColor: BLACK_COLOR, + textColor: Colors.Black.rgba, fontVariant: 'normal', fontWeight: 'normal', textOpacity: 1, 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 aa37b4ae78..c8a1a0d23c 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 { BLACK_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { Font } from '../../../../common/text_utils'; import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas'; import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line'; @@ -93,7 +93,7 @@ export function renderCanvas2d( fontStyle: config.yAxisLabel.fontStyle ? config.yAxisLabel.fontStyle : 'normal', fontVariant: 'normal', fontWeight: 'normal', - textColor: BLACK_COLOR, + textColor: Colors.Black.rgba, textOpacity: 1, }; const { padding } = config.yAxisLabel; 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 25a4607d7a..1e0634151a 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,7 +6,7 @@ * Side Public License, v 1. */ -import { TRANSPARENT_COLOR } from '../../../common/color'; +import { Colors } from '../../../common/color'; import { getPredicateFn } from '../../../common/predicate'; import { safeFormat, ValueFormatter } from '../../../utils/common'; import { ColorBand, HeatmapBandsColorScale } from '../specs/heatmap'; @@ -49,6 +49,6 @@ function getBandScale(bands: ColorBand[]): ColorScale { return color; } } - return TRANSPARENT_COLOR; + return Colors.Transparent.rgba; }; } 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 9497b7b4ad..8c4df5c568 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { TRANSPARENT_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { RGBtoString } from '../../../../common/color_library_wrappers'; import { TooltipInfo } from '../../../../components/tooltip/types'; import { createCustomCachedSelector } from '../../../../state/create_selector'; @@ -39,7 +39,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( // X-axis value tooltipInfo.values.push({ label: config.xAxisLabel.name, - color: TRANSPARENT_COLOR, + color: Colors.Transparent.rgba, isHighlighted: false, isVisible: true, seriesIdentifier: { @@ -54,7 +54,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( // Y-axis value tooltipInfo.values.push({ label: config.yAxisLabel.name, - color: TRANSPARENT_COLOR, + color: Colors.Transparent.rgba, isHighlighted: false, isVisible: true, seriesIdentifier: { @@ -84,7 +84,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( } else { tooltipInfo.values.push({ label: ``, - color: TRANSPARENT_COLOR, + color: Colors.Transparent.rgba, isHighlighted: false, isVisible: true, seriesIdentifier: { 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 fc5257a2a6..4b74f37d67 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 { BLACK_COLOR, Color } from '../../../../common/color'; +import { Colors, Color } from '../../../../common/color'; import { Coordinate, Distance, @@ -136,7 +136,7 @@ const defaultFont: Font = { fontVariant: 'normal', fontFamily: '', fontWeight: 'normal', - textColor: BLACK_COLOR, + textColor: Colors.Black.rgba, textOpacity: 1, }; 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 9c651616c3..a9fc98ffbb 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 @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { Color, TRANSPARENT_COLOR } from '../../../../common/color'; +import { Color, Colors } from '../../../../common/color'; import { argsToRGBString, stringToRGB } from '../../../../common/color_library_wrappers'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; @@ -155,7 +155,7 @@ export function makeQuadViewModel( const { textColor, textInvertible, textContrast } = { ...fillLabel, ...layer.fillLabel }; const color = !isSunburstLayout && textNegligible - ? TRANSPARENT_COLOR + ? Colors.Transparent.rgba : fillTextColor(textColor, textInvertible, textContrast, fillColor, containerBackgroundColor); return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor: color, ...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 e1eb7a3fef..5a2e4e648d 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,7 +6,7 @@ * Side Public License, v 1. */ -import { TRANSPARENT_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { ShapeViewModel } from '../../layout/types/viewmodel_types'; import { AnimationState, ContinuousDomainFocus } from './partition'; @@ -89,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' || textColor === TRANSPARENT_COLOR || label === '' || fWidth < 4) return; + if (textColor === 'transparent' || textColor === Colors.Transparent.rgba || 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/dom/highlighter.tsx b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx index 2c21c63031..b5222cdd09 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,7 +8,7 @@ import React from 'react'; -import { BLACK_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { TAU } from '../../../../common/constants'; import { PointObject } from '../../../../common/geometry'; import { Dimensions } from '../../../../utils/dimensions'; @@ -189,7 +189,7 @@ export class HighlighterComponent extends React.Component { fill="white" /> - {renderGeometries(geometries, partitionLayout, { color: BLACK_COLOR }, geometriesFoci, width)} + {renderGeometries(geometries, partitionLayout, { color: Colors.Black.rgba }, 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 7a625f17a2..a8ff8a3f24 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,7 +6,7 @@ * Side Public License, v 1. */ -import { RED_COLOR } from '../../../../common/color'; +import { Colors } from '../../../../common/color'; import { Line } from '../../../../geoms/types'; import { Scale } from '../../../../scales'; import { isContinuousScale, isBandScale } from '../../../../scales/types'; @@ -38,7 +38,7 @@ function computeYDomainLineAnnotationDimensions( style, } = annotationSpec; const lineStyle = mergeWithDefaultAnnotationLine(style); - const color = lineStyle?.line?.stroke ?? RED_COLOR; + const color = lineStyle?.line?.stroke ?? Colors.Red.rgba; 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 @@ -135,7 +135,7 @@ function computeXDomainLineAnnotationDimensions( style, } = annotationSpec; const lineStyle = mergeWithDefaultAnnotationLine(style); - const color = lineStyle?.line?.stroke ?? RED_COLOR; + const color = lineStyle?.line?.stroke ?? Colors.Red.rgba; const lineProps: AnnotationLineProps[] = []; const isHorizontalChartRotation = isHorizontalRotation(chartRotation); 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 b6597b0363..70aa596f58 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,8 +6,7 @@ * Side Public License, v 1. */ -import { BLACK_COLOR, TRANSPARENT_COLOR } from '../../../../../common/color'; -import { stringToRGB } from '../../../../../common/color_library_wrappers'; +import { Colors } from '../../../../../common/color'; import { withContext } from '../../../../../renderers/canvas'; import { Position } from '../../../../../utils/common'; import { AxisId } from '../../../../../utils/ids'; @@ -28,8 +27,8 @@ export function renderGridPanels(ctx: CanvasRenderingContext2D, { x: chartX, y: renderRect( ctx, { x: chartX + panelX, y: chartY + panelY, width, height }, - { color: stringToRGB(TRANSPARENT_COLOR) }, - { color: stringToRGB(BLACK_COLOR), width: 1 }, + { color: Colors.Transparent.rgbaChannels }, + { color: Colors.Black.rgbaChannels, 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 dd8b6c2b6c..7d15899228 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,8 +6,7 @@ * Side Public License, v 1. */ -import { RED_COLOR, TRANSPARENT_COLOR } from '../../../../common/color'; -import { stringToRGB } from '../../../../common/color_library_wrappers'; +import { Colors } from '../../../../common/color'; import { Rect } from '../../../../geoms/types'; import { clearCanvas, isCanvasRenderer, renderLayers, withContext } from '../../../../renderers/canvas'; import { renderAnnotations } from './annotations'; @@ -149,8 +148,8 @@ export function renderXYChartCanvas2d( renderDebugRect( ctx, { x: left, y: top, width, height }, - { color: stringToRGB(TRANSPARENT_COLOR) }, - { color: stringToRGB(RED_COLOR), width: 4, dash: [4, 4] }, + { color: Colors.Transparent.rgbaChannels }, + { color: Colors.Red.rgbaChannels, width: 4, dash: [4, 4] }, ); const renderer = geometriesIndex.triangulation([0, 0, width, height])?.render; 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 df77c4fb6b..ac9093a85b 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,7 +6,7 @@ * Side Public License, v 1. */ -import { BLACK_COLOR, TRANSPARENT_COLOR, WHITE_COLOR } from '../../../../../common/color'; +import { Colors } from '../../../../../common/color'; import { colorIsDark, getTextColorIfTextInvertible } from '../../../../../common/color_calcs'; import { fillTextColor } from '../../../../../common/fill_text_color'; import { Font, TextAlign, TextBaseline } from '../../../../../common/text_utils'; @@ -342,10 +342,10 @@ function isOverflow(rect: Rect, chartDimensions: Dimensions, chartRotation: Rota return false; } -const DEFAULT_VALUE_COLOR = BLACK_COLOR; +const DEFAULT_VALUE_COLOR = Colors.Black.rgba; // a little bit of alpha makes black font more readable const DEFAULT_VALUE_BORDER_COLOR = 'rgba(255, 255, 255, 0.8)'; -const DEFAULT_VALUE_BORDER_SOLID_COLOR = WHITE_COLOR; +const DEFAULT_VALUE_BORDER_SOLID_COLOR = Colors.White.rgba; type ValueFillDefinition = Theme['barSeriesStyle']['displayValue']['fill']; @@ -355,12 +355,12 @@ function getTextColors( borderSize: number, ): { fillColor: string; shadowColor: string } { if (typeof fillDefinition === 'string') { - return { fillColor: fillDefinition, shadowColor: TRANSPARENT_COLOR }; + return { fillColor: fillDefinition, shadowColor: Colors.Transparent.rgba }; } if ('color' in fillDefinition) { return { fillColor: fillDefinition.color, - shadowColor: fillDefinition.borderColor || TRANSPARENT_COLOR, + shadowColor: fillDefinition.borderColor || Colors.Transparent.rgba, }; } const fillColor = @@ -369,7 +369,7 @@ function getTextColors( fillDefinition.textInvertible, fillDefinition.textContrast || false, geometryColor, - WHITE_COLOR, + Colors.White.rgba, ) || DEFAULT_VALUE_COLOR; // If the border is too wide it can overlap between a letter or another @@ -383,8 +383,8 @@ function getTextColors( defaultBorderColor, false, geometryColor, - ) || TRANSPARENT_COLOR - : TRANSPARENT_COLOR; + ) || Colors.Transparent.rgba + : Colors.Transparent.rgba; return { fillColor, diff --git a/packages/charts/src/common/color.ts b/packages/charts/src/common/color.ts index 72a380984e..0c7709f7d7 100644 --- a/packages/charts/src/common/color.ts +++ b/packages/charts/src/common/color.ts @@ -12,15 +12,21 @@ import { RgbObject } from './color_library_wrappers'; 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 TRANSPARENT_COLOR: Color = 'rgba(0, 0, 0, 0)'; -/** @internal */ -export const WHITE_COLOR: Color = 'rgba(255, 255, 255, 1)'; -/** @internal */ -export const BLACK_COLOR: Color = 'rgba(0, 0, 0, 1)'; -/** @internal */ -export const RED_COLOR: Color = 'rgba(255, 0, 0, 1)'; - -/** @internal */ -export const RED_RGBOBJ_COLOR: RgbObject = { r: 255, g: 0, b: 0, opacity: 1 }; -/** @internal */ -export const TRANSPARENT_RBGOBJ_COLOR: RgbObject = { r: 0, g: 0, b: 0, opacity: 0 }; +export const Colors: Record = { + Red: { + rgba: 'rgba(255, 0, 0, 1)', + rgbaChannels: { r: 255, g: 0, b: 0, opacity: 1 }, + }, + White: { + rgba: 'rgba(255, 255, 255, 1)', + rgbaChannels: { r: 255, g: 255, b: 255, opacity: 1 }, + }, + Black: { + rgba: 'rgba(0, 0, 0, 1)', + rgbaChannels: { r: 0, g: 0, b: 0, opacity: 1 }, + }, + Transparent: { + rgba: 'rgba(0, 0, 0, 0)', + rgbaChannels: { r: 0, g: 0, b: 0, opacity: 0 }, + }, +}; diff --git a/packages/charts/src/common/color_calcs.test.ts b/packages/charts/src/common/color_calcs.test.ts index a742604fca..b9b05b6097 100644 --- a/packages/charts/src/common/color_calcs.test.ts +++ b/packages/charts/src/common/color_calcs.test.ts @@ -7,40 +7,40 @@ */ import { integerSnap, monotonicHillClimb } from '../solvers/monotonic_hill_climb'; -import { BLACK_COLOR, WHITE_COLOR } from './color'; +import { Colors } from './color'; import { makeHighContrastColor, combineColors } from './color_calcs'; describe('calcs', () => { describe('test makeHighContrastColor', () => { it('hex input - should change white text to black when background is white', () => { - expect(makeHighContrastColor('#fff', '#fff')).toBe(BLACK_COLOR); + expect(makeHighContrastColor('#fff', '#fff')).toBe(Colors.Black.rgba); }); it('rgb input - should change white text to black when background is white', () => { - expect(makeHighContrastColor('rgb(255, 255, 255)', 'rgb(255, 255, 255)')).toBe(BLACK_COLOR); + expect(makeHighContrastColor('rgb(255, 255, 255)', 'rgb(255, 255, 255)')).toBe(Colors.Black.rgba); }); it('rgba input - should change white text to black when background is white', () => { - expect(makeHighContrastColor('rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)')).toBe(BLACK_COLOR); + expect(makeHighContrastColor('rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)')).toBe(Colors.Black.rgba); }); it('word input - should change white text to black when background is white', () => { - expect(makeHighContrastColor(WHITE_COLOR, WHITE_COLOR)).toBe(BLACK_COLOR); + expect(makeHighContrastColor(Colors.White.rgba, Colors.White.rgba)).toBe(Colors.Black.rgba); }); // test contrast computation it('should provide at least 4.5 contrast', () => { - const foreground = WHITE_COLOR; + const foreground = Colors.White.rgba; const background = 'rgba(255, 255, 51, 0.3)'; // light yellow - expect(makeHighContrastColor(foreground, background)).toBe(BLACK_COLOR); + expect(makeHighContrastColor(foreground, background)).toBe(Colors.Black.rgba); }); it('should use black text for hex value', () => { - const foreground = WHITE_COLOR; + const foreground = Colors.White.rgba; const background = '#7874B2'; // Thailand color - expect(makeHighContrastColor(foreground, background)).toBe(BLACK_COLOR); + expect(makeHighContrastColor(foreground, background)).toBe(Colors.Black.rgba); }); it('should switch to black text if background color is in rgba() format - Thailand', () => { - const containerBackground = WHITE_COLOR; + const containerBackground = Colors.White.rgba; const background = 'rgba(120, 116, 178, 0.7)'; const resultForCombined = 'rgba(161, 158, 201, 1)'; // 0.3 'rgba(215, 213, 232, 1)'; // 0.5 - 'rgba(188, 186, 217, 1)'; //0.7 - ; expect(combineColors(background, containerBackground)).toBe(resultForCombined); - expect(makeHighContrastColor(WHITE_COLOR, resultForCombined)).toBe(BLACK_COLOR); + expect(makeHighContrastColor(Colors.White.rgba, resultForCombined)).toBe(Colors.Black.rgba); }); }); describe('test the combineColors function', () => { diff --git a/packages/charts/src/common/color_calcs.ts b/packages/charts/src/common/color_calcs.ts index e53dfbf40c..2df1ff6fef 100644 --- a/packages/charts/src/common/color_calcs.ts +++ b/packages/charts/src/common/color_calcs.ts @@ -8,7 +8,7 @@ import chroma from 'chroma-js'; -import { BLACK_COLOR, Color, TRANSPARENT_COLOR, WHITE_COLOR } from './color'; +import { Color, Colors } from './color'; import { RgbaTuple, RGBATupleToString, RgbTuple, stringToRGB } from './color_library_wrappers'; import { Ratio } from './geometry'; import { TextContrast } from './text_utils'; @@ -64,7 +64,7 @@ export function combineColors(foregroundColor: Color, backgroundColor: Color): C const combinedAlpha = alpha1 + alpha2 * (1 - alpha1); if (combinedAlpha === 0) { - return TRANSPARENT_COLOR; + return Colors.Transparent.rgba; } const combinedRed = Math.round((red1 * alpha1 + red2 * alpha2 * (1 - alpha1)) / combinedAlpha); @@ -102,10 +102,10 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati let highContrastTextColor = foreground; const isBackgroundDark = colorIsDark(background); // determine whether white or black text is ideal contrast vs a grey that just passes the ratio - if (isBackgroundDark && chroma.deltaE(BLACK_COLOR, foreground) === 0) { - highContrastTextColor = WHITE_COLOR; - } else if (lightness > 0.5 && chroma.deltaE(WHITE_COLOR, foreground) === 0) { - highContrastTextColor = BLACK_COLOR; + if (isBackgroundDark && chroma.deltaE(Colors.Black.rgba, foreground) === 0) { + highContrastTextColor = Colors.White.rgba; + } else if (lightness > 0.5 && chroma.deltaE(Colors.White.rgba, foreground) === 0) { + highContrastTextColor = Colors.Black.rgba; } const precision = 1e8; let contrast = getContrast(highContrastTextColor, background); @@ -176,7 +176,7 @@ export function getTextColorIfTextInvertible( : makeHighContrastColor(`rgba(${255 - tr}, ${255 - tg}, ${255 - tb}, ${to})`, backgroundColor, textContrast) : makeHighContrastColor(textColor, backgroundColor, textContrast); } - return BLACK_COLOR; // this should never happen; added it as previously function return type included undefined; todo + return Colors.Black.rgba; // this should never happen; added it as previously function return type included undefined; todo } /** @@ -187,7 +187,9 @@ export function getTextColorIfTextInvertible( */ export function getOnPaperColorSet(textColor: Color, sectorLineStroke: Color, containerBackgroundColor?: Color) { // determine the ideal contrast color for the link labels - const validBackgroundColor = isColorValid(containerBackgroundColor) ? containerBackgroundColor : TRANSPARENT_COLOR; + const validBackgroundColor = isColorValid(containerBackgroundColor) + ? containerBackgroundColor + : Colors.Transparent.rgba; const contrastTextColor = containerBackgroundColor ? makeHighContrastColor(textColor, validBackgroundColor) : textColor; diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts index fea8c6e049..000c3d65d7 100644 --- a/packages/charts/src/common/color_library_wrappers.ts +++ b/packages/charts/src/common/color_library_wrappers.ts @@ -9,12 +9,14 @@ import chroma from 'chroma-js'; import { rgb as d3Rgb, RGBColor as D3RGBColor } from 'd3-color'; -import { Color, RED_RGBOBJ_COLOR, TRANSPARENT_RBGOBJ_COLOR } from './color'; +import { Color, Colors } from './color'; type RGB = number; type A = number; + /** @internal */ export type RgbTuple = [RGB, RGB, RGB, RGB?]; + /** @public */ export type RgbObject = { r: RGB; g: RGB; b: RGB; opacity: A }; @@ -23,10 +25,10 @@ export type RgbaTuple = [RGB, RGB, RGB, RGB]; /** @internal */ export const defaultD3Color: D3RGBColor = d3Rgb( - RED_RGBOBJ_COLOR.r, - RED_RGBOBJ_COLOR.g, - RED_RGBOBJ_COLOR.b, - RED_RGBOBJ_COLOR.opacity, + Colors.Red.rgbaChannels.r, + Colors.Red.rgbaChannels.g, + Colors.Red.rgbaChannels.b, + Colors.Red.rgbaChannels.opacity, ); /** @internal */ @@ -35,7 +37,7 @@ export type OpacityFn = (opacity: number, seriesOpacity?: number) => number; /** @internal */ export function stringToRGB(cssColorSpecifier?: string, opacity?: number | OpacityFn): RgbObject { if (cssColorSpecifier === 'transparent') { - return TRANSPARENT_RBGOBJ_COLOR; + return Colors.Transparent.rgbaChannels; } const color = getColor(cssColorSpecifier); @@ -63,7 +65,7 @@ export function stringToRGB(cssColorSpecifier?: string, opacity?: number | Opaci * @param cssColorSpecifier */ function getColor(cssColorSpecifier: string = ''): RgbObject { - if (!chroma.valid(cssColorSpecifier)) return RED_RGBOBJ_COLOR; + if (!chroma.valid(cssColorSpecifier)) return Colors.Red.rgbaChannels; const chromaColor = chroma(cssColorSpecifier); const color: D3RGBColor = { @@ -71,7 +73,7 @@ function getColor(cssColorSpecifier: string = ''): RgbObject { opacity: chromaColor.alpha(), }; - return validateColor(color) ?? RED_RGBOBJ_COLOR; + return validateColor(color) ?? Colors.Red.rgbaChannels; } /** @internal */ diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index 81aafa20a1..b2405037bc 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -9,7 +9,7 @@ import chroma from 'chroma-js'; import { Logger } from '../utils/logger'; -import { Color, WHITE_COLOR } from './color'; +import { Color, Colors } from './color'; import { colorIsDark, combineColors, @@ -50,7 +50,7 @@ export function fillTextColor( colorIsDark(textColor), textColor, false, - WHITE_COLOR, // never used + Colors.White.rgba, // never used ); } diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap index fed2b24d8e..d31388f2f0 100644 --- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap +++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Chart should render the legend name test 1`] = `
- +
@@ -96,7 +96,7 @@ exports[`Chart should render the legend name test 1`] = ` - + diff --git a/packages/charts/src/components/brush/brush.tsx b/packages/charts/src/components/brush/brush.tsx index 4398270287..1eabbd73c6 100644 --- a/packages/charts/src/components/brush/brush.tsx +++ b/packages/charts/src/components/brush/brush.tsx @@ -10,7 +10,7 @@ import React, { RefObject } from 'react'; import { connect } from 'react-redux'; import { renderRect } from '../../chart_types/xy_chart/renderer/canvas/primitives/rect'; -import { TRANSPARENT_RBGOBJ_COLOR } from '../../common/color'; +import { Colors } from '../../common/color'; import { RgbObject } from '../../common/color_library_wrappers'; import { clearCanvas, withContext, withClip } from '../../renderers/canvas'; import { GlobalChartState } from '../../state/chart_state'; @@ -125,7 +125,7 @@ class BrushToolComponent extends React.Component { ctx, { x: left, y: top, width, height }, { color: fillColor ?? DEFAULT_FILL_COLOR }, - { width: 0, color: TRANSPARENT_RBGOBJ_COLOR }, + { width: 0, color: Colors.Transparent.rgbaChannels }, ); }, ); diff --git a/packages/charts/src/components/chart.tsx b/packages/charts/src/components/chart.tsx index 9b12f2dae7..71754fcba7 100644 --- a/packages/charts/src/components/chart.tsx +++ b/packages/charts/src/components/chart.tsx @@ -12,7 +12,7 @@ import { Provider } from 'react-redux'; import { createStore, Store, Unsubscribe, StoreEnhancer, applyMiddleware, Middleware } from 'redux'; import uuid from 'uuid'; -import { TRANSPARENT_COLOR } from '../common/color'; +import { Colors } from '../common/color'; import { LegendPositionConfig, PointerEvent } from '../specs'; import { SpecsParser } from '../specs/specs_parser'; import { onExternalPointerEvent } from '../state/actions/events'; @@ -119,7 +119,7 @@ export class Chart extends React.Component { getPNGSnapshot( // eslint-disable-next-line unicorn/no-object-as-default-parameter options = { - backgroundColor: TRANSPARENT_COLOR, + backgroundColor: Colors.Transparent.rgba, pixelRatio: 2, }, ): { diff --git a/packages/charts/src/components/chart_background.tsx b/packages/charts/src/components/chart_background.tsx index a193b79327..dc71e68618 100644 --- a/packages/charts/src/components/chart_background.tsx +++ b/packages/charts/src/components/chart_background.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { connect } from 'react-redux'; -import { TRANSPARENT_COLOR } from '../common/color'; +import { Colors } from '../common/color'; import { GlobalChartState } from '../state/chart_state'; import { getChartThemeSelector } from '../state/selectors/get_chart_theme'; import { getInternalIsInitializedSelector, InitStatus } from '../state/selectors/get_internal_is_intialized'; @@ -31,7 +31,7 @@ export class ChartBackgroundComponent extends React.Component { if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) { return { - backgroundColor: TRANSPARENT_COLOR, + backgroundColor: Colors.Transparent.rgba, }; } return { diff --git a/packages/charts/src/components/tooltip/tooltip.tsx b/packages/charts/src/components/tooltip/tooltip.tsx index 3e26eef1eb..420c6f979e 100644 --- a/packages/charts/src/components/tooltip/tooltip.tsx +++ b/packages/charts/src/components/tooltip/tooltip.tsx @@ -12,7 +12,7 @@ import React, { memo, useCallback, useMemo, useEffect } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; -import { TRANSPARENT_COLOR } from '../../common/color'; +import { Colors } from '../../common/color'; import { isColorValid } from '../../common/color_calcs'; import { TooltipValueFormatter, TooltipSettings, TooltipValue } from '../../specs'; import { onPointerMove as onPointerMoveAction } from '../../state/actions/mouse'; @@ -115,7 +115,7 @@ const TooltipComponent = ({ echTooltip__rowHighlighted: isHighlighted, }); const adjustedBGColor = - isColorValid(color) && chroma(color).alpha() === 0 ? TRANSPARENT_COLOR : backgroundColor; + isColorValid(color) && chroma(color).alpha() === 0 ? Colors.Transparent.rgba : backgroundColor; return (
diff --git a/packages/charts/src/utils/common.test.ts b/packages/charts/src/utils/common.test.ts index f25d3ed43a..5a31dbb870 100644 --- a/packages/charts/src/utils/common.test.ts +++ b/packages/charts/src/utils/common.test.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { TRANSPARENT_COLOR } from '../common/color'; +import { Colors } from '../common/color'; import { maxValueWithUpperLimit, compareByValueAsc, @@ -1020,7 +1020,7 @@ describe('common utilities', () => { }); it('should return transparent if ColorVariant is None', () => { - expect(getColorFromVariant(seriesColor, ColorVariant.None)).toBe(TRANSPARENT_COLOR); + expect(getColorFromVariant(seriesColor, ColorVariant.None)).toBe(Colors.Transparent.rgba); }); it('should return color if Color is passed', () => { diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx index 3bbaae0ff7..c8b6fbf6c8 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, TRANSPARENT_COLOR } from '../common/color'; +import { Color, Colors } from '../common/color'; import { Degrees, Radian } from '../common/geometry'; import { AdditiveNumber } from './accessor'; import { Point } from './point'; @@ -172,7 +172,7 @@ export function getColorFromVariant(seriesColor: Color, color?: Color | ColorVar } if (color === ColorVariant.None) { - return TRANSPARENT_COLOR; + return Colors.Transparent.rgba; } return color || seriesColor; diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts index ed227e9061..34b3ab95c0 100644 --- a/packages/charts/src/utils/themes/dark_theme.ts +++ b/packages/charts/src/utils/themes/dark_theme.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { BLACK_COLOR, TRANSPARENT_COLOR, WHITE_COLOR } from '../../common/color'; +import { Colors } from '../../common/color'; import { palettes } from './colors'; import { Theme } from './theme'; import { @@ -29,7 +29,7 @@ export const DARK_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: BLACK_COLOR, + fill: Colors.Black.rgba, radius: 2, opacity: 1, }, @@ -38,7 +38,7 @@ export const DARK_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: BLACK_COLOR, + fill: Colors.Black.rgba, radius: 2, opacity: 1, }, @@ -55,7 +55,7 @@ export const DARK_THEME: Theme = { }, point: { visible: false, - fill: BLACK_COLOR, + fill: Colors.Black.rgba, strokeWidth: 0.5, radius: 1, opacity: 1, @@ -82,7 +82,7 @@ export const DARK_THEME: Theme = { arcSeriesStyle: { arc: { visible: true, - stroke: WHITE_COLOR, + stroke: Colors.White.rgba, strokeWidth: 1, opacity: 1, }, @@ -191,6 +191,6 @@ export const DARK_THEME: Theme = { }, }, background: { - color: TRANSPARENT_COLOR, + color: Colors.Transparent.rgba, }, }; diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts index 474515a6c7..ae0fedd6c6 100644 --- a/packages/charts/src/utils/themes/light_theme.ts +++ b/packages/charts/src/utils/themes/light_theme.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { BLACK_COLOR, TRANSPARENT_COLOR, WHITE_COLOR } from '../../common/color'; +import { Colors } from '../../common/color'; import { palettes } from './colors'; import { Theme } from './theme'; import { @@ -29,7 +29,7 @@ export const LIGHT_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: WHITE_COLOR, + fill: Colors.White.rgba, radius: 2, opacity: 1, }, @@ -38,7 +38,7 @@ export const LIGHT_THEME: Theme = { point: { visible: true, strokeWidth: 1, - fill: WHITE_COLOR, + fill: Colors.White.rgba, radius: 2, opacity: 1, }, @@ -56,7 +56,7 @@ export const LIGHT_THEME: Theme = { point: { visible: false, strokeWidth: 1, - fill: WHITE_COLOR, + fill: Colors.White.rgba, radius: 2, opacity: 1, }, @@ -82,7 +82,7 @@ export const LIGHT_THEME: Theme = { arcSeriesStyle: { arc: { visible: true, - stroke: BLACK_COLOR, + stroke: Colors.Black.rgba, strokeWidth: 1, opacity: 1, }, @@ -191,6 +191,6 @@ export const LIGHT_THEME: Theme = { }, }, background: { - color: TRANSPARENT_COLOR, + color: Colors.Transparent.rgba, }, }; diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts index 707984fdce..33762f0fb3 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 { RED_COLOR } from '../../common/color'; +import { Colors } from '../../common/color'; import { Margins } from '../dimensions'; import { SharedGeometryStateStyle } from './theme'; /** @public */ -export const DEFAULT_MISSING_COLOR = RED_COLOR; +export const DEFAULT_MISSING_COLOR = Colors.Red.rgba; /** @public */ export const DEFAULT_CHART_PADDING: Margins = { From 819472793d76346620fdae2a93654f0d32f10271 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 26 Aug 2021 17:09:51 +0200 Subject: [PATCH 6/7] refactor: adjust stories Color import --- storybook/stories/goal/10_band_in_band.tsx | 3 +-- storybook/stories/goal/11_gaps.tsx | 3 +-- storybook/stories/goal/12_range.tsx | 3 +-- storybook/stories/goal/13_confidence_level.tsx | 3 +-- storybook/stories/goal/14_one_third.tsx | 3 +-- storybook/stories/goal/15_half_circle.tsx | 3 +-- storybook/stories/goal/16_two_thirds.tsx | 3 +-- storybook/stories/goal/17_three_quarters.tsx | 3 +-- storybook/stories/goal/17_total_circle.tsx | 3 +-- storybook/stories/goal/17_very_small_gap.tsx | 3 +-- storybook/stories/goal/19_horizontal_negative.tsx | 3 +-- storybook/stories/goal/20_vertical_negative.tsx | 3 +-- storybook/stories/goal/21_goal_negative.tsx | 3 +-- storybook/stories/goal/22_horizontal_plusminus.tsx | 3 +-- storybook/stories/goal/23_vertical_plusminus.tsx | 3 +-- storybook/stories/goal/24_goal_plusminus.tsx | 3 +-- storybook/stories/goal/2_gauge_with_target.tsx | 3 +-- storybook/stories/goal/3_horizontal_bullet.tsx | 3 +-- storybook/stories/goal/4_vertical_bullet.tsx | 3 +-- storybook/stories/goal/5_minimal.tsx | 3 +-- storybook/stories/goal/6_minimal_horizontal.tsx | 3 +-- storybook/stories/goal/7_horizontal_bar.tsx | 3 +-- storybook/stories/goal/8_irregular_ticks.tsx | 3 +-- storybook/stories/goal/9_minimal_band.tsx | 3 +-- storybook/stories/interactions/17_png_export.tsx | 2 +- 25 files changed, 25 insertions(+), 49 deletions(-) diff --git a/storybook/stories/goal/10_band_in_band.tsx b/storybook/stories/goal/10_band_in_band.tsx index e7c55e228c..53acc5bd33 100644 --- a/storybook/stories/goal/10_band_in_band.tsx +++ b/storybook/stories/goal/10_band_in_band.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/11_gaps.tsx b/storybook/stories/goal/11_gaps.tsx index 2678b54e04..d6abe23e42 100644 --- a/storybook/stories/goal/11_gaps.tsx +++ b/storybook/stories/goal/11_gaps.tsx @@ -9,11 +9,10 @@ import { boolean, number } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/12_range.tsx b/storybook/stories/goal/12_range.tsx index 20212275c1..741670184d 100644 --- a/storybook/stories/goal/12_range.tsx +++ b/storybook/stories/goal/12_range.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/13_confidence_level.tsx b/storybook/stories/goal/13_confidence_level.tsx index 66d6b00cfc..b3b73c935f 100644 --- a/storybook/stories/goal/13_confidence_level.tsx +++ b/storybook/stories/goal/13_confidence_level.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/14_one_third.tsx b/storybook/stories/goal/14_one_third.tsx index 90e02e385f..926cab9d8b 100644 --- a/storybook/stories/goal/14_one_third.tsx +++ b/storybook/stories/goal/14_one_third.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/15_half_circle.tsx b/storybook/stories/goal/15_half_circle.tsx index e99b1b9b95..9349daa2f1 100644 --- a/storybook/stories/goal/15_half_circle.tsx +++ b/storybook/stories/goal/15_half_circle.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/16_two_thirds.tsx b/storybook/stories/goal/16_two_thirds.tsx index c224a8ad49..94f9d4863f 100644 --- a/storybook/stories/goal/16_two_thirds.tsx +++ b/storybook/stories/goal/16_two_thirds.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_three_quarters.tsx b/storybook/stories/goal/17_three_quarters.tsx index 9b7b292ba9..51e4acf419 100644 --- a/storybook/stories/goal/17_three_quarters.tsx +++ b/storybook/stories/goal/17_three_quarters.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_total_circle.tsx b/storybook/stories/goal/17_total_circle.tsx index bbde425217..0d621f3871 100644 --- a/storybook/stories/goal/17_total_circle.tsx +++ b/storybook/stories/goal/17_total_circle.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/17_very_small_gap.tsx b/storybook/stories/goal/17_very_small_gap.tsx index aad9e03a48..9b84fe491a 100644 --- a/storybook/stories/goal/17_very_small_gap.tsx +++ b/storybook/stories/goal/17_very_small_gap.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/19_horizontal_negative.tsx b/storybook/stories/goal/19_horizontal_negative.tsx index a26a87511a..1d892bc3f9 100644 --- a/storybook/stories/goal/19_horizontal_negative.tsx +++ b/storybook/stories/goal/19_horizontal_negative.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/20_vertical_negative.tsx b/storybook/stories/goal/20_vertical_negative.tsx index 62addbe8af..3b95d1c441 100644 --- a/storybook/stories/goal/20_vertical_negative.tsx +++ b/storybook/stories/goal/20_vertical_negative.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/21_goal_negative.tsx b/storybook/stories/goal/21_goal_negative.tsx index 4a2db77c34..03cb914e77 100644 --- a/storybook/stories/goal/21_goal_negative.tsx +++ b/storybook/stories/goal/21_goal_negative.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/22_horizontal_plusminus.tsx b/storybook/stories/goal/22_horizontal_plusminus.tsx index 65a458d11d..05a8596140 100644 --- a/storybook/stories/goal/22_horizontal_plusminus.tsx +++ b/storybook/stories/goal/22_horizontal_plusminus.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/23_vertical_plusminus.tsx b/storybook/stories/goal/23_vertical_plusminus.tsx index 24f0e4565f..e0c5412416 100644 --- a/storybook/stories/goal/23_vertical_plusminus.tsx +++ b/storybook/stories/goal/23_vertical_plusminus.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/24_goal_plusminus.tsx b/storybook/stories/goal/24_goal_plusminus.tsx index 4960ad46ff..bc4a5ef6a9 100644 --- a/storybook/stories/goal/24_goal_plusminus.tsx +++ b/storybook/stories/goal/24_goal_plusminus.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/2_gauge_with_target.tsx b/storybook/stories/goal/2_gauge_with_target.tsx index 997bff23a0..3047f33968 100644 --- a/storybook/stories/goal/2_gauge_with_target.tsx +++ b/storybook/stories/goal/2_gauge_with_target.tsx @@ -9,11 +9,10 @@ import { number, color, array, boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/3_horizontal_bullet.tsx b/storybook/stories/goal/3_horizontal_bullet.tsx index 1c4298a9aa..4aa11c2040 100644 --- a/storybook/stories/goal/3_horizontal_bullet.tsx +++ b/storybook/stories/goal/3_horizontal_bullet.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/4_vertical_bullet.tsx b/storybook/stories/goal/4_vertical_bullet.tsx index f8c84baf17..23780939ed 100644 --- a/storybook/stories/goal/4_vertical_bullet.tsx +++ b/storybook/stories/goal/4_vertical_bullet.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/5_minimal.tsx b/storybook/stories/goal/5_minimal.tsx index 0b106eff68..bec0ce07f4 100644 --- a/storybook/stories/goal/5_minimal.tsx +++ b/storybook/stories/goal/5_minimal.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/6_minimal_horizontal.tsx b/storybook/stories/goal/6_minimal_horizontal.tsx index 6443df284e..72abd28012 100644 --- a/storybook/stories/goal/6_minimal_horizontal.tsx +++ b/storybook/stories/goal/6_minimal_horizontal.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/7_horizontal_bar.tsx b/storybook/stories/goal/7_horizontal_bar.tsx index 6ba72051ce..05441b3e9b 100644 --- a/storybook/stories/goal/7_horizontal_bar.tsx +++ b/storybook/stories/goal/7_horizontal_bar.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const q1 = 255 - 255 * 0.4; diff --git a/storybook/stories/goal/8_irregular_ticks.tsx b/storybook/stories/goal/8_irregular_ticks.tsx index e619590492..019cedf966 100644 --- a/storybook/stories/goal/8_irregular_ticks.tsx +++ b/storybook/stories/goal/8_irregular_ticks.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/goal/9_minimal_band.tsx b/storybook/stories/goal/9_minimal_band.tsx index 37f49b072a..2ba04234d7 100644 --- a/storybook/stories/goal/9_minimal_band.tsx +++ b/storybook/stories/goal/9_minimal_band.tsx @@ -8,11 +8,10 @@ import React from 'react'; -import { Chart, Goal, Settings } from '@elastic/charts'; +import { Chart, Color, 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 '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; const subtype = GoalSubtype.Goal; diff --git a/storybook/stories/interactions/17_png_export.tsx b/storybook/stories/interactions/17_png_export.tsx index c7921cdc26..315d5ebe2d 100644 --- a/storybook/stories/interactions/17_png_export.tsx +++ b/storybook/stories/interactions/17_png_export.tsx @@ -21,6 +21,7 @@ import { Datum, Goal, ChartType, + Color, } 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'; @@ -28,7 +29,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; -import { Color } from '../../../packages/charts/src/common/color'; import { useBaseTheme } from '../../use_base_theme'; import { SB_KNOBS_PANEL } from '../utils/storybook'; import { productLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; From b2fdca353271ec165122baf791e1877ea3dee01c Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 30 Aug 2021 13:59:25 +0200 Subject: [PATCH 7/7] docs: fix exported types --- packages/charts/api/charts.api.md | 53 ++++++++++++------- packages/charts/src/index.ts | 6 ++- packages/charts/src/utils/dimensions.ts | 2 +- .../charts/src/utils/themes/theme_common.ts | 8 +-- 4 files changed, 42 insertions(+), 27 deletions(-) diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 5a5d84eca6..9d866a679e 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -41,6 +41,18 @@ export interface AngleFromTo { x1: Radian; } +// @alpha (undocumented) +export interface AnimKeyframe { + // (undocumented) + easingFunction: EasingFunction; + // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts + // + // (undocumented) + keyframeConfig: Partial; + // (undocumented) + time: number; +} + // @public export const AnnotationDomainType: Readonly<{ XDomain: "xDomain"; @@ -607,23 +619,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; @@ -697,6 +695,9 @@ export type DomainPaddingUnit = $Values; // @public (undocumented) export type DomainRange = LowerBoundedDomain | UpperBoundedDomain | CompleteBoundedDomain | UnboundedDomainWithInterval; +// @alpha (undocumented) +export type EasingFunction = (x: Ratio) => Ratio; + // @public (undocumented) export type ElementClickListener = (elements: Array) => void; @@ -1349,6 +1350,9 @@ export interface LogScaleOptions { // @public (undocumented) export type LowerBoundedDomain = DomainBase & LowerBound; +// @public +export type Margins = PerSideDistance; + // @public export type MarkBuffer = number | ((radius: number) => number); @@ -1413,8 +1417,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; @@ -1433,8 +1435,6 @@ export type PartialTheme = RecursivePartial; // @public (undocumented) export const Partition: React_2.FunctionComponent; -// Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts -// // @public (undocumented) export interface PartitionConfig extends StaticConfig { // @alpha (undocumented) @@ -1494,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 export const Placement: Readonly<{ Top: "top"; @@ -2135,6 +2147,9 @@ export type TickStyle = StrokeStyle & Visible & { // @public (undocumented) export function timeFormatter(format: string): TickFormatter; +// @public (undocumented) +export type TimeMs = number; + // @public export function toEntries, S>(array: T[], accessor: keyof T, staticValue: S): Record; @@ -2417,8 +2432,6 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions; // src/chart_types/heatmap/layout/types/config_types.ts:20: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:51: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:52: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:139: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:140: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/index.ts b/packages/charts/src/index.ts index fa28861615..08f67e61a2 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 { Margins, SimplePadding, Padding, PerSideDistance } 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'; @@ -34,6 +34,8 @@ export { Config as PartitionConfig, FillLabelConfig as PartitionFillLabel, PartitionLayout, + AnimKeyframe, + EasingFunction, } from './chart_types/partition_chart/layout/types/config_types'; export { Layer as PartitionLayer } from './chart_types/partition_chart/specs/index'; export * from './chart_types/goal_chart/specs/index'; @@ -91,7 +93,7 @@ export { DataGenerator } from './utils/data_generators/data_generator'; export * from './utils/themes/merge_utils'; export { MODEL_KEY } from './chart_types/partition_chart/layout/config'; export { LegendStrategy } from './chart_types/partition_chart/layout/utils/highlighted_geoms'; -export { Ratio } from './common/geometry'; +export { Ratio, TimeMs } from './common/geometry'; export { AdditiveNumber } from './utils/accessor'; export { FontStyle, FONT_STYLES } from './common/text_utils'; export { Color } from './common/color'; diff --git a/packages/charts/src/utils/dimensions.ts b/packages/charts/src/utils/dimensions.ts index 22c5d51091..e58d06975b 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 33762f0fb3..ca88d9a46c 100644 --- a/packages/charts/src/utils/themes/theme_common.ts +++ b/packages/charts/src/utils/themes/theme_common.ts @@ -10,17 +10,17 @@ import { Colors } from '../../common/color'; import { Margins } from '../dimensions'; import { SharedGeometryStateStyle } from './theme'; -/** @public */ +/** @internal */ export const DEFAULT_MISSING_COLOR = Colors.Red.rgba; -/** @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,