diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index b526ad4b5a3..415b681b1b5 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -46,10 +46,9 @@ - [ ] The proper **chart type** label has been added (e.g. `:xy`, `:partition`) - [ ] The proper **feature** labels have been added (e.g. `:interactions`, `:axis`) -- [ ] The `:theme` label has been added and the `@elastic/eui-team` team has been pinged when there are `Theme` API changes - [ ] All related issues have been linked (i.e. `closes #123`, `fixes #123`) - [ ] New public API exports have been added to `packages/charts/src/index.ts` - [ ] Unit tests have been added or updated to match the most common scenarios - [ ] The proper documentation and/or storybook story has been added or updated - [ ] The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge) -- [ ] Visual changes have been tested with all available themes including `dark`, `light`, `eui-dark` & `eui-light` +- [ ] Visual changes have been tested with `light` and `dark` themes diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/stepped-area-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/stepped-area-chrome-linux.png index 2d6300ec5c0..c2f3365eafd 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/stepped-area-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/stepped-area-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/composable/basic-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/composable/basic-chrome-linux.png index d379a0bfeb7..d34cf462ccf 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/composable/basic-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/composable/basic-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/goal-alpha/goal-semantics-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/goal-alpha/goal-semantics-chrome-linux.png index 608de466409..df09eeb2e25 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/goal-alpha/goal-semantics-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/goal-alpha/goal-semantics-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/interaction-with-null-values-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/interaction-with-null-values-chrome-linux.png index 4346d547b19..d0f4f23b14b 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/interaction-with-null-values-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/interaction-with-null-values-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/line-chart/point-shapes-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/line-chart/point-shapes-chrome-linux.png index da0ab0c3b3a..33181b89a5c 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/line-chart/point-shapes-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/line-chart/point-shapes-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/small-multiples-alpha/sorting-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/small-multiples-alpha/sorting-chrome-linux.png index 98e12a53f31..ec7543f292a 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/small-multiples-alpha/sorting-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/small-multiples-alpha/sorting-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/mixed-point-shapes-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/mixed-point-shapes-chrome-linux.png index 055fcf71d34..197e1a3f32b 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/mixed-point-shapes-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/mixed-point-shapes-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/theme-styling-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/theme-styling-chrome-linux.png index 3e5223345a1..76668695822 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/theme-styling-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/theme-styling-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/sunburst/custom-stroke-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/sunburst/custom-stroke-chrome-linux.png index 2d4f6b57752..b9efe4e2256 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/sunburst/custom-stroke-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/sunburst/custom-stroke-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png index 2e1be9d1adc..7d6427ede16 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png index 18c981c55a9..8edc0981a64 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png index 4abc560e117..387f07e5591 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png index 74ff7b5e7dc..889b180b61f 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png index 1a666fe26d1..8c756ac4a35 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png index 785975cfb58..89d67564f77 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png differ diff --git a/e2e/screenshots/partition_stories.test.ts-snapshots/axis-stories/should-render-link-labels-with-fallback-text-color-for-dark-theme-chrome-linux.png b/e2e/screenshots/partition_stories.test.ts-snapshots/axis-stories/should-render-link-labels-with-fallback-text-color-for-dark-theme-chrome-linux.png index 244ff9e48cb..0dabd3eced6 100644 Binary files a/e2e/screenshots/partition_stories.test.ts-snapshots/axis-stories/should-render-link-labels-with-fallback-text-color-for-dark-theme-chrome-linux.png and b/e2e/screenshots/partition_stories.test.ts-snapshots/axis-stories/should-render-link-labels-with-fallback-text-color-for-dark-theme-chrome-linux.png differ diff --git a/e2e/screenshots/wordcloud_stories.test.ts-snapshots/scales-stories/should-render-small-waves-wordcloud-template-chrome-linux.png b/e2e/screenshots/wordcloud_stories.test.ts-snapshots/scales-stories/should-render-small-waves-wordcloud-template-chrome-linux.png index 5801a08d41e..1d40e1e19b8 100644 Binary files a/e2e/screenshots/wordcloud_stories.test.ts-snapshots/scales-stories/should-render-small-waves-wordcloud-template-chrome-linux.png and b/e2e/screenshots/wordcloud_stories.test.ts-snapshots/scales-stories/should-render-small-waves-wordcloud-template-chrome-linux.png differ diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 8928a2f49ca..06c710d93ef 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -508,6 +508,24 @@ export class Chart extends React_2.Component { render(): JSX.Element; } +// @public +export interface ChartBaseColors { + // (undocumented) + darkestShade: string; + // (undocumented) + darkShade: string; + // (undocumented) + emptyShade: string; + // (undocumented) + lightestShade: string; + // (undocumented) + lightShade: string; + // (undocumented) + mediumShade: string; + // (undocumented) + title: string; +} + // @public (undocumented) export interface ChartProps { // (undocumented) @@ -709,6 +727,9 @@ export interface CustomTooltipProps) | OrdinalDomain; +// @public (undocumented) +export const DARK_BASE_COLORS: ChartBaseColors; + // @public (undocumented) export const DARK_THEME: Theme; @@ -1579,6 +1600,12 @@ export const LayoutDirection: Readonly<{ // @public (undocumented) export type LayoutDirection = $Values; +// @public @deprecated +export const LEGACY_DARK_THEME: Theme; + +// @public @deprecated +export const LEGACY_LIGHT_THEME: Theme; + // @public export interface LegacyAnimationConfig { // @alpha (undocumented) @@ -1683,6 +1710,9 @@ export interface LegendStyle { verticalWidth: number; } +// @public (undocumented) +export const LIGHT_BASE_COLORS: ChartBaseColors; + // @public (undocumented) export const LIGHT_THEME: Theme; diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.test.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.test.ts index 00397fc0403..630c0a464d0 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.test.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.test.ts @@ -10,6 +10,7 @@ import { createStore, Store } from 'redux'; import { partitionMultiGeometries } from './geometries'; import { createOnElementClickCaller } from './on_element_click_caller'; +import { GOLDEN_RATIO } from '../../../../common/constants'; import { Predicate } from '../../../../common/predicate'; import { MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs'; import { SettingsSpec, GroupBySpec, SmallMultiplesSpec } from '../../../../specs'; @@ -206,6 +207,11 @@ describe('Picked shapes selector', () => { const onClickListener = jest.fn(); addSeries(store, sunburstSpec, { onElementClick: onClickListener, + theme: { + partition: { + outerSizeRatio: 1 / GOLDEN_RATIO, + }, + }, }); const geometries = partitionMultiGeometries(store.getState())[0]; expect(geometries?.quadViewModel).toHaveLength(6); diff --git a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.areas.test.ts.snap b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.areas.test.ts.snap index b4bd0358eda..1f136589d80 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.areas.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.areas.test.ts.snap @@ -11,7 +11,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render fi "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -39,7 +39,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render fi 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -68,7 +68,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render fi "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -96,7 +96,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render fi 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -130,7 +130,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render se "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -158,7 +158,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render se 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -187,7 +187,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render se "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -215,7 +215,7 @@ exports[`Rendering points - areas Multi series area chart - linear can render se 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -249,7 +249,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render f "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -277,7 +277,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render f 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -306,7 +306,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render f "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -334,7 +334,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render f 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -368,7 +368,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render s "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -396,7 +396,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render s 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -425,7 +425,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render s "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -453,7 +453,7 @@ exports[`Rendering points - areas Multi series area chart - ordinal can render s 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -487,7 +487,7 @@ exports[`Rendering points - areas Multi series area chart - time can render firs "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -515,7 +515,7 @@ exports[`Rendering points - areas Multi series area chart - time can render firs 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -544,7 +544,7 @@ exports[`Rendering points - areas Multi series area chart - time can render firs "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -572,7 +572,7 @@ exports[`Rendering points - areas Multi series area chart - time can render firs 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -606,7 +606,7 @@ exports[`Rendering points - areas Multi series area chart - time can render seco "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -634,7 +634,7 @@ exports[`Rendering points - areas Multi series area chart - time can render seco 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -663,7 +663,7 @@ exports[`Rendering points - areas Multi series area chart - time can render seco "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -691,7 +691,7 @@ exports[`Rendering points - areas Multi series area chart - time can render seco 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -725,7 +725,7 @@ exports[`Rendering points - areas Single series area chart - linear Can render t "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -753,7 +753,7 @@ exports[`Rendering points - areas Single series area chart - linear Can render t 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -782,7 +782,7 @@ exports[`Rendering points - areas Single series area chart - linear Can render t "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -810,7 +810,7 @@ exports[`Rendering points - areas Single series area chart - linear Can render t 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -844,7 +844,7 @@ exports[`Rendering points - areas Single series area chart - ordinal Can render "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -872,7 +872,7 @@ exports[`Rendering points - areas Single series area chart - ordinal Can render 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -901,7 +901,7 @@ exports[`Rendering points - areas Single series area chart - ordinal Can render "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -929,7 +929,7 @@ exports[`Rendering points - areas Single series area chart - ordinal Can render 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -963,7 +963,7 @@ exports[`Rendering points - areas Single series area chart - time Can render two "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -991,7 +991,7 @@ exports[`Rendering points - areas Single series area chart - time Can render two 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -1020,7 +1020,7 @@ exports[`Rendering points - areas Single series area chart - time Can render two "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -1048,7 +1048,7 @@ exports[`Rendering points - areas Single series area chart - time Can render two 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { diff --git a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bands.test.ts.snap b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bands.test.ts.snap index 5d692033f8f..6342f7bbcd9 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bands.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bands.test.ts.snap @@ -11,7 +11,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{__global__}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -39,7 +39,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -69,7 +69,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{__global__}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -97,7 +97,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -127,7 +127,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{__global__}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -155,7 +155,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -185,7 +185,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{__global__}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -213,7 +213,7 @@ exports[`Rendering bands - areas Single band area chart Can render two points 1` 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -364,7 +364,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -392,7 +392,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -422,7 +422,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -450,7 +450,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -480,7 +480,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -508,7 +508,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -538,7 +538,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{2}splitAccessors{}", "seriesKeys": [ @@ -566,7 +566,7 @@ exports[`Rendering bands - areas Single band area chart with null values Can ren 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -614,9 +614,15 @@ exports[`Rendering bands - areas Single series band bar chart - ordinal Can rend }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, @@ -671,9 +677,15 @@ exports[`Rendering bands - areas Single series band bar chart - ordinal Can rend }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, @@ -728,9 +740,15 @@ exports[`Rendering bands - areas Single series band bar chart - ordinal Can rend }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, diff --git a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bars.test.ts.snap b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bars.test.ts.snap index 40d87890461..ccbba718b42 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bars.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bars.test.ts.snap @@ -24,9 +24,15 @@ exports[`Rendering bars Can render two bars within domain 1`] = ` }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, @@ -80,9 +86,15 @@ exports[`Rendering bars Can render two bars within domain 1`] = ` }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, @@ -141,9 +153,15 @@ exports[`Rendering bars Multi series bar chart - ordinal can render first spec b }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, @@ -197,9 +215,15 @@ exports[`Rendering bars Multi series bar chart - ordinal can render first spec b }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, @@ -258,9 +282,15 @@ exports[`Rendering bars Multi series bar chart - ordinal can render second spec }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, @@ -314,9 +344,15 @@ exports[`Rendering bars Multi series bar chart - ordinal can render second spec }, "seriesStyle": { "displayValue": { - "fill": "#777", - "fontFamily": "sans-serif", - "fontSize": 8, + "alignment": { + "horizontal": "center", + "vertical": "middle", + }, + "fill": { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, "fontStyle": "normal", "offsetX": 0, "offsetY": 0, diff --git a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap index 1d52b628bf9..7bd9e95635b 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap @@ -11,7 +11,7 @@ exports[`Rendering points - line Multi series line chart - linear can render fir "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -39,7 +39,7 @@ exports[`Rendering points - line Multi series line chart - linear can render fir 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -68,7 +68,7 @@ exports[`Rendering points - line Multi series line chart - linear can render fir "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -96,7 +96,7 @@ exports[`Rendering points - line Multi series line chart - linear can render fir 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -130,7 +130,7 @@ exports[`Rendering points - line Multi series line chart - linear can render sec "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -158,7 +158,7 @@ exports[`Rendering points - line Multi series line chart - linear can render sec 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -187,7 +187,7 @@ exports[`Rendering points - line Multi series line chart - linear can render sec "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -215,7 +215,7 @@ exports[`Rendering points - line Multi series line chart - linear can render sec 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -249,7 +249,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render fi "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -277,7 +277,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render fi 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -306,7 +306,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render fi "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -334,7 +334,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render fi 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -368,7 +368,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render se "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -396,7 +396,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render se 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -425,7 +425,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render se "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -453,7 +453,7 @@ exports[`Rendering points - line Multi series line chart - ordinal can render se 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -487,7 +487,7 @@ exports[`Rendering points - line Multi series line chart - time can render first "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -515,7 +515,7 @@ exports[`Rendering points - line Multi series line chart - time can render first 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -544,7 +544,7 @@ exports[`Rendering points - line Multi series line chart - time can render first "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -572,7 +572,7 @@ exports[`Rendering points - line Multi series line chart - time can render first 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -606,7 +606,7 @@ exports[`Rendering points - line Multi series line chart - time can render secon "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -634,7 +634,7 @@ exports[`Rendering points - line Multi series line chart - time can render secon 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -663,7 +663,7 @@ exports[`Rendering points - line Multi series line chart - time can render secon "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{point2}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -691,7 +691,7 @@ exports[`Rendering points - line Multi series line chart - time can render secon 255, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -725,7 +725,7 @@ exports[`Rendering points - line Removing out-of-domain points should render 3 p "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{__global__}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -753,7 +753,7 @@ exports[`Rendering points - line Removing out-of-domain points should render 3 p 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -782,7 +782,7 @@ exports[`Rendering points - line Removing out-of-domain points should render 3 p "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{__global__}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -810,7 +810,7 @@ exports[`Rendering points - line Removing out-of-domain points should render 3 p 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -844,7 +844,7 @@ exports[`Rendering points - line Single series line chart - linear Can render tw "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -872,7 +872,7 @@ exports[`Rendering points - line Single series line chart - linear Can render tw 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -901,7 +901,7 @@ exports[`Rendering points - line Single series line chart - linear Can render tw "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -929,7 +929,7 @@ exports[`Rendering points - line Single series line chart - linear Can render tw 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -963,7 +963,7 @@ exports[`Rendering points - line Single series line chart - ordinal Can render t "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -991,7 +991,7 @@ exports[`Rendering points - line Single series line chart - ordinal Can render t 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -1020,7 +1020,7 @@ exports[`Rendering points - line Single series line chart - ordinal Can render t "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -1048,7 +1048,7 @@ exports[`Rendering points - line Single series line chart - ordinal Can render t 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -1082,7 +1082,7 @@ exports[`Rendering points - line Single series line chart - time Can render two "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -1110,7 +1110,7 @@ exports[`Rendering points - line Single series line chart - time Can render two 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { @@ -1139,7 +1139,7 @@ exports[`Rendering points - line Single series line chart - time Can render two "top": 0, "width": 100, }, - "radius": 2, + "radius": 3, "seriesIdentifier": { "key": "groupId{group_1}spec{spec_1}yAccessor{1}splitAccessors{}", "seriesKeys": [ @@ -1167,7 +1167,7 @@ exports[`Rendering points - line Single series line chart - time Can render two 0, 1, ], - "width": 1, + "width": 2, }, }, "transform": { diff --git a/packages/charts/src/chart_types/xy_chart/state/__snapshots__/chart_state.debug.test.ts.snap b/packages/charts/src/chart_types/xy_chart/state/__snapshots__/chart_state.debug.test.ts.snap index a5c6513c706..3c5eff34f41 100644 --- a/packages/charts/src/chart_types/xy_chart/state/__snapshots__/chart_state.debug.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/state/__snapshots__/chart_state.debug.test.ts.snap @@ -7,7 +7,52 @@ exports[`XYChart - debug state line chart rotation: -90 1`] = ` "axes": { "x": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 0, + "y": 18.199999999999996, + }, + { + "x": 0, + "y": 36.39999999999999, + }, + { + "x": 0, + "y": 54.60000000000001, + }, + { + "x": 0, + "y": 72.8, + }, + { + "x": 0, + "y": 91, + }, + { + "x": 0, + "y": 109.2, + }, + { + "x": 0, + "y": 127.39999999999999, + }, + { + "x": 0, + "y": 145.6, + }, + { + "x": 0, + "y": 163.8, + }, + { + "x": 0, + "y": 182, + }, + ], "id": "xAxis", "labels": [ "0", @@ -41,7 +86,32 @@ exports[`XYChart - debug state line chart rotation: -90 1`] = ` ], "y": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 36.39999999999999, + "y": 0, + }, + { + "x": 72.8, + "y": 0, + }, + { + "x": 109.2, + "y": 0, + }, + { + "x": 145.6, + "y": 0, + }, + { + "x": 182, + "y": 0, + }, + ], "id": "yAxis", "labels": [ "0", @@ -79,7 +149,7 @@ exports[`XYChart - debug state line chart rotation: -90 1`] = ` "color": "#54B399", "key": "groupId{__global__}spec{spec1}yAccessor{1}splitAccessors{}", "name": "spec1", - "path": "M0,159.5L64,112L160,0", + "path": "M0,181.5L72.8,127.39999999999999L182,0", "points": [ { "mark": null, @@ -111,7 +181,52 @@ exports[`XYChart - debug state line chart rotation: 0 1`] = ` "axes": { "x": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 18.2, + "y": 0, + }, + { + "x": 36.4, + "y": 0, + }, + { + "x": 54.6, + "y": 0, + }, + { + "x": 72.8, + "y": 0, + }, + { + "x": 91, + "y": 0, + }, + { + "x": 109.2, + "y": 0, + }, + { + "x": 127.39999999999999, + "y": 0, + }, + { + "x": 145.6, + "y": 0, + }, + { + "x": 163.8, + "y": 0, + }, + { + "x": 182, + "y": 0, + }, + ], "id": "xAxis", "labels": [ "0", @@ -145,7 +260,32 @@ exports[`XYChart - debug state line chart rotation: 0 1`] = ` ], "y": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 0, + "y": 36.39999999999999, + }, + { + "x": 0, + "y": 72.8, + }, + { + "x": 0, + "y": 109.2, + }, + { + "x": 0, + "y": 145.6, + }, + { + "x": 0, + "y": 182, + }, + ], "id": "yAxis", "labels": [ "0", @@ -183,7 +323,7 @@ exports[`XYChart - debug state line chart rotation: 0 1`] = ` "color": "#54B399", "key": "groupId{__global__}spec{spec1}yAccessor{1}splitAccessors{}", "name": "spec1", - "path": "M0,159.5L64,112L160,0", + "path": "M0,181.5L72.8,127.39999999999999L182,0", "points": [ { "mark": null, @@ -215,7 +355,52 @@ exports[`XYChart - debug state line chart rotation: 90 1`] = ` "axes": { "x": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 0, + "y": 18.2, + }, + { + "x": 0, + "y": 36.4, + }, + { + "x": 0, + "y": 54.6, + }, + { + "x": 0, + "y": 72.8, + }, + { + "x": 0, + "y": 91, + }, + { + "x": 0, + "y": 109.2, + }, + { + "x": 0, + "y": 127.39999999999999, + }, + { + "x": 0, + "y": 145.6, + }, + { + "x": 0, + "y": 163.8, + }, + { + "x": 0, + "y": 182, + }, + ], "id": "xAxis", "labels": [ "0", @@ -249,7 +434,32 @@ exports[`XYChart - debug state line chart rotation: 90 1`] = ` ], "y": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 36.4, + "y": 0, + }, + { + "x": 72.8, + "y": 0, + }, + { + "x": 109.2, + "y": 0, + }, + { + "x": 145.6, + "y": 0, + }, + { + "x": 182, + "y": 0, + }, + ], "id": "yAxis", "labels": [ "0", @@ -287,7 +497,7 @@ exports[`XYChart - debug state line chart rotation: 90 1`] = ` "color": "#54B399", "key": "groupId{__global__}spec{spec1}yAccessor{1}splitAccessors{}", "name": "spec1", - "path": "M0,159.5L64,112L160,0", + "path": "M0,181.5L72.8,127.39999999999999L182,0", "points": [ { "mark": null, @@ -319,7 +529,52 @@ exports[`XYChart - debug state line chart rotation: 180 1`] = ` "axes": { "x": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 18.199999999999996, + "y": 0, + }, + { + "x": 36.39999999999999, + "y": 0, + }, + { + "x": 54.60000000000001, + "y": 0, + }, + { + "x": 72.8, + "y": 0, + }, + { + "x": 91, + "y": 0, + }, + { + "x": 109.2, + "y": 0, + }, + { + "x": 127.39999999999999, + "y": 0, + }, + { + "x": 145.6, + "y": 0, + }, + { + "x": 163.8, + "y": 0, + }, + { + "x": 182, + "y": 0, + }, + ], "id": "xAxis", "labels": [ "0", @@ -353,7 +608,32 @@ exports[`XYChart - debug state line chart rotation: 180 1`] = ` ], "y": [ { - "gridlines": [], + "gridlines": [ + { + "x": 0, + "y": 0, + }, + { + "x": 0, + "y": 36.4, + }, + { + "x": 0, + "y": 72.8, + }, + { + "x": 0, + "y": 109.2, + }, + { + "x": 0, + "y": 145.6, + }, + { + "x": 0, + "y": 182, + }, + ], "id": "yAxis", "labels": [ "0", @@ -391,7 +671,7 @@ exports[`XYChart - debug state line chart rotation: 180 1`] = ` "color": "#54B399", "key": "groupId{__global__}spec{spec1}yAccessor{1}splitAccessors{}", "name": "spec1", - "path": "M0,159.5L64,112L160,0", + "path": "M0,181.5L72.8,127.39999999999999L182,0", "points": [ { "mark": null, diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/utils.test.ts b/packages/charts/src/chart_types/xy_chart/state/utils/utils.test.ts index 4614ef72082..c1e95e01952 100644 --- a/packages/charts/src/chart_types/xy_chart/state/utils/utils.test.ts +++ b/packages/charts/src/chart_types/xy_chart/state/utils/utils.test.ts @@ -564,9 +564,9 @@ describe('Chart State utils', () => { visible: true, fill: 'green', // the override strokeWidth opacity: 1, - radius: 2, + radius: 3, stroke: ColorVariant.Series, - strokeWidth: 1, + strokeWidth: 2, }); }); test('can compute area geometries with custom style', () => { @@ -630,9 +630,9 @@ describe('Chart State utils', () => { visible: false, fill: 'point-fill-custom-color', // the override strokeWidth opacity: 1, - radius: 2, + radius: 3, stroke: ColorVariant.Series, - strokeWidth: 1, + strokeWidth: 2, }); }); test('can compute bars geometries counts', () => { diff --git a/packages/charts/src/chart_types/xy_chart/utils/__snapshots__/dimensions.test.ts.snap b/packages/charts/src/chart_types/xy_chart/utils/__snapshots__/dimensions.test.ts.snap index 9d2b91cf052..8cdc2d66e7b 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/__snapshots__/dimensions.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/utils/__snapshots__/dimensions.test.ts.snap @@ -11,7 +11,7 @@ exports[`Computed chart dimensions should be equal to parent dimension with no a exports[`Computed chart dimensions should be padded by a bottom axis 1`] = ` { - "height": 30, + "height": 32, "left": 25, "top": 20, "width": 50, @@ -21,9 +21,9 @@ exports[`Computed chart dimensions should be padded by a bottom axis 1`] = ` exports[`Computed chart dimensions should be padded by a left axis 1`] = ` { "height": 50, - "left": 50, + "left": 48, "top": 25, - "width": 30, + "width": 32, } `; @@ -32,15 +32,15 @@ exports[`Computed chart dimensions should be padded by a right axis 1`] = ` "height": 50, "left": 20, "top": 25, - "width": 30, + "width": 32, } `; exports[`Computed chart dimensions should be padded by a top axis 1`] = ` { - "height": 30, + "height": 32, "left": 25, - "top": 50, + "top": 48, "width": 50, } `; diff --git a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts index 74983078f53..1785524685f 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts @@ -576,7 +576,7 @@ describe('Axis computational utils', () => { offsetY: 0, textOffsetX: 50, textOffsetY: 0, - x: 85, + x: 75, y: 0, horizontalAlign: 'right', verticalAlign: 'middle', @@ -602,7 +602,7 @@ describe('Axis computational utils', () => { offsetY: 0, textOffsetX: 0, textOffsetY: 0, - x: 80, + x: 70, y: 0, horizontalAlign: 'center', verticalAlign: 'middle', @@ -628,7 +628,7 @@ describe('Axis computational utils', () => { offsetY: 0, textOffsetX: 0, textOffsetY: 0, - x: 20, + x: 30, y: 0, horizontalAlign: 'center', verticalAlign: 'middle', @@ -651,7 +651,7 @@ describe('Axis computational utils', () => { offsetY: 0, textOffsetX: -50, textOffsetY: 0, - x: 20, + x: 30, y: 0, horizontalAlign: 'left', verticalAlign: 'middle', @@ -687,7 +687,7 @@ describe('Axis computational utils', () => { textOffsetY: 50, textOffsetX: 0, x: 0, - y: -5, + y: -15, horizontalAlign: 'center', verticalAlign: 'bottom', }); @@ -710,7 +710,7 @@ describe('Axis computational utils', () => { textOffsetX: 50, textOffsetY: 0, x: 0, - y: -10, + y: -20, horizontalAlign: 'right', verticalAlign: 'middle', }); @@ -733,7 +733,7 @@ describe('Axis computational utils', () => { textOffsetX: -50, textOffsetY: 0, x: 0, - y: 20, + y: 30, horizontalAlign: 'left', verticalAlign: 'middle', }); @@ -759,7 +759,7 @@ describe('Axis computational utils', () => { textOffsetX: 0, textOffsetY: -50, x: 0, - y: 20, + y: 30, horizontalAlign: 'center', verticalAlign: 'top', }); @@ -853,13 +853,13 @@ describe('Axis computational utils', () => { const expectedLeftAxisPosition = { dimensions: { height: 100, - width: 50, - left: 20, + width: 48, + left: 10, top: 0, }, topIncrement: 0, bottomIncrement: 0, - leftIncrement: 60, + leftIncrement: 48, rightIncrement: 0, }; @@ -887,14 +887,14 @@ describe('Axis computational utils', () => { const expectedRightAxisPosition = { dimensions: { height: 100, - width: 50, + width: 48, left: 110, top: 0, }, topIncrement: 0, bottomIncrement: 0, leftIncrement: 0, - rightIncrement: 60, + rightIncrement: 48, }; expect(rightAxisPosition).toEqual(expectedRightAxisPosition); @@ -921,12 +921,12 @@ describe('Axis computational utils', () => { const expectedTopAxisPosition = { dimensions: { - height: 50 || axis1Dims.maxLabelBboxHeight + axisTitleHeight + tickSize + tickPadding, + height: 48 || axis1Dims.maxLabelBboxHeight + axisTitleHeight + tickSize + tickPadding, width: 100, left: 0, top: cumTopSum + LIGHT_THEME.chartMargins.top, }, - topIncrement: 60, + topIncrement: 48, bottomIncrement: 0, leftIncrement: 0, rightIncrement: 0, @@ -955,13 +955,13 @@ describe('Axis computational utils', () => { const expectedBottomAxisPosition = { dimensions: { - height: 50, + height: 48, width: 100, left: 0, top: 110, }, topIncrement: 0, - bottomIncrement: 60, + bottomIncrement: 48, leftIncrement: 0, rightIncrement: 0, }; @@ -1689,14 +1689,14 @@ describe('Axis computational utils', () => { const expectedLeftAxisPosition = { dimensions: { height: 100, - width: title ? 66 : 46, + width: title ? 64 : 44, left: 110, top: 0, }, topIncrement: 0, bottomIncrement: 0, leftIncrement: 0, - rightIncrement: title ? 76 : 56, + rightIncrement: title ? 64 : 44, }; expect(leftAxisPosition).toEqual(expectedLeftAxisPosition); @@ -1717,14 +1717,14 @@ describe('Axis computational utils', () => { const expectedRightAxisPosition = { dimensions: { height: 100, - width: title ? 66 : 46, + width: title ? 64 : 44, left: 110, top: 0, }, topIncrement: 0, bottomIncrement: 0, leftIncrement: 0, - rightIncrement: title ? 76 : 56, + rightIncrement: title ? 64 : 44, }; expect(rightAxisPosition).toEqual(expectedRightAxisPosition); @@ -1744,12 +1744,12 @@ describe('Axis computational utils', () => { const expectedTopAxisPosition = { dimensions: { - height: title ? 66 : 46, + height: title ? 64 : 44, width: 100, left: 0, - top: 20, + top: 10, }, - topIncrement: title ? 76 : 56, + topIncrement: title ? 64 : 44, bottomIncrement: 0, leftIncrement: 0, rightIncrement: 0, @@ -1772,13 +1772,13 @@ describe('Axis computational utils', () => { const expectedBottomAxisPosition = { dimensions: { - height: title ? 66 : 46, + height: title ? 64 : 44, width: 100, left: 0, top: 110, }, topIncrement: 0, - bottomIncrement: title ? 76 : 56, + bottomIncrement: title ? 64 : 44, leftIncrement: 0, rightIncrement: 0, }; diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap index 45fe4b46468..fa47f466e39 100644 --- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap +++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap @@ -4,10 +4,10 @@ exports[`Chart should render the legend name test 1`] = ` "
- +
- +
@@ -100,7 +100,7 @@ exports[`Chart should render the legend name test 1`] = ` - + @@ -112,7 +112,7 @@ exports[`Chart should render the legend name test 1`] = ` - + diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index 60876526c01..0579c8b7966 100644 --- a/packages/charts/src/index.ts +++ b/packages/charts/src/index.ts @@ -73,8 +73,10 @@ export { // theme export * from './utils/themes/theme'; export * from './utils/themes/theme_common'; -export { LIGHT_THEME } from './utils/themes/light_theme'; -export { DARK_THEME } from './utils/themes/dark_theme'; +export { LIGHT_THEME, LIGHT_BASE_COLORS } from './utils/themes/light_theme'; +export { DARK_THEME, DARK_BASE_COLORS } from './utils/themes/dark_theme'; +export { LEGACY_LIGHT_THEME } from './utils/themes/legacy_light_theme'; +export { LEGACY_DARK_THEME } from './utils/themes/legacy_dark_theme'; // wordcloud export { WordcloudViewModel } from './chart_types/wordcloud/layout/types/viewmodel_types'; diff --git a/packages/charts/src/utils/themes/colors.ts b/packages/charts/src/utils/themes/colors.ts index d7905a36e58..c7891b97868 100644 --- a/packages/charts/src/utils/themes/colors.ts +++ b/packages/charts/src/utils/themes/colors.ts @@ -19,15 +19,28 @@ const echPaletteColorBlind: EchPalette = { colors: [ '#54B399', '#6092C0', - '#D36086', '#9170B8', '#CA8EAE', - '#D6BF57', - '#B9A888', - '#DA8B45', - '#AA6556', + '#D36086', '#E7664C', + '#AA6556', + '#DA8B45', + '#B9A888', + '#D6BF57', ], + // TODO swap colors for original colors after main changes + // colors: [ + // '#54B399', + // '#6092C0', + // '#D36086', + // '#9170B8', + // '#CA8EAE', + // '#D6BF57', + // '#B9A888', + // '#DA8B45', + // '#AA6556', + // '#E7664C', + // ], }; const echPaletteForLightBackground: EchPalette = { diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts index ca3c2e50d86..ef83eb9cf9c 100644 --- a/packages/charts/src/utils/themes/dark_theme.ts +++ b/packages/charts/src/utils/themes/dark_theme.ts @@ -7,17 +7,24 @@ */ import { palettes } from './colors'; -import { Theme } from './theme'; -import { - DEFAULT_CHART_MARGINS, - DEFAULT_CHART_PADDING, - DEFAULT_GEOMETRY_STYLES, - DEFAULT_MISSING_COLOR, -} from './theme_common'; +import { ChartBaseColors, Theme } from './theme'; +import { DEFAULT_CHART_MARGINS, DEFAULT_CHART_PADDING, DEFAULT_GEOMETRY_STYLES } from './theme_common'; import { Colors } from '../../common/colors'; -import { GOLDEN_RATIO, TAU } from '../../common/constants'; +import { TAU } from '../../common/constants'; +import { DEFAULT_FONT_FAMILY } from '../../common/default_theme_attributes'; import { ColorVariant } from '../common'; +/** @public */ +export const DARK_BASE_COLORS: ChartBaseColors = { + emptyShade: '#1D1E24', + lightestShade: '#25262E', + lightShade: '#343741', + mediumShade: '#535966', + darkShade: '#98A2B3', + darkestShade: '#D4DAE5', + title: '#DFE5EF', +}; + /** @public */ export const DARK_THEME: Theme = { chartPaddings: DEFAULT_CHART_PADDING, @@ -25,15 +32,15 @@ export const DARK_THEME: Theme = { lineSeriesStyle: { line: { visible: true, - strokeWidth: 1, + strokeWidth: 2, opacity: 1, }, point: { visible: true, stroke: ColorVariant.Series, - strokeWidth: 1, - fill: Colors.Black.keyword, - radius: 2, + strokeWidth: 2, + fill: DARK_BASE_COLORS.emptyShade, + radius: 3, opacity: 1, }, isolatedPoint: { @@ -69,15 +76,15 @@ export const DARK_THEME: Theme = { }, line: { visible: true, - strokeWidth: 1, + strokeWidth: 2, opacity: 1, }, point: { visible: false, stroke: ColorVariant.Series, - strokeWidth: 1, - fill: Colors.Black.keyword, - radius: 2, + strokeWidth: 2, + fill: DARK_BASE_COLORS.emptyShade, + radius: 3, opacity: 1, }, isolatedPoint: { @@ -111,11 +118,12 @@ export const DARK_THEME: Theme = { strokeWidth: 1, }, displayValue: { - fontSize: 8, + fontSize: 10, fontStyle: 'normal', - fontFamily: 'sans-serif', + fontFamily: DEFAULT_FONT_FAMILY, + alignment: { horizontal: 'center', vertical: 'middle' }, padding: 0, - fill: '#999', + fill: { textBorder: 0 }, offsetX: 0, offsetY: 0, }, @@ -136,17 +144,17 @@ export const DARK_THEME: Theme = { axes: { axisTitle: { fontSize: 12, - fontFamily: 'sans-serif', + fontFamily: DEFAULT_FONT_FAMILY, padding: { - inner: 8, + inner: 10, outer: 0, }, - fill: '#D4D4D4', + fill: DARK_BASE_COLORS.title, visible: true, }, axisPanelTitle: { fontSize: 10, - fontFamily: 'sans-serif', + fontFamily: DEFAULT_FONT_FAMILY, padding: { inner: 8, outer: 0, @@ -156,16 +164,16 @@ export const DARK_THEME: Theme = { }, axisLine: { visible: true, - stroke: '#444', + stroke: DARK_BASE_COLORS.lightShade, strokeWidth: 1, }, tickLabel: { visible: true, fontSize: 10, - fontFamily: 'sans-serif', + fontFamily: DEFAULT_FONT_FAMILY, fontStyle: 'normal', - fill: '#999', - padding: 0, + fill: '#81858f', + padding: { outer: 8, inner: 10 }, rotation: 0, offset: { x: 0, @@ -178,33 +186,33 @@ export const DARK_THEME: Theme = { }, }, tickLine: { - visible: true, - stroke: '#444', + visible: false, + stroke: DARK_BASE_COLORS.lightShade, strokeWidth: 1, size: 10, padding: 10, }, gridLine: { horizontal: { - visible: false, - stroke: '#D3DAE6', + visible: true, + stroke: DARK_BASE_COLORS.lightShade, strokeWidth: 1, opacity: 1, dash: [0, 0], }, vertical: { - visible: false, - stroke: '#D3DAE6', + visible: true, + stroke: DARK_BASE_COLORS.lightShade, strokeWidth: 1, opacity: 1, - dash: [0, 0], + dash: [4, 4], }, lumaSteps: [63, 103, 159, 191, 223, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255], }, }, colors: { vizColors: palettes.echPaletteColorBlind.colors, - defaultVizColor: DEFAULT_MISSING_COLOR, + defaultVizColor: '#6092C0', }, legend: { verticalWidth: 200, @@ -217,24 +225,25 @@ export const DARK_THEME: Theme = { }, crosshair: { band: { - fill: '#2A2A2A', visible: true, + fill: '#2a2b33', // DARK_BASE_COLORS.lightestShade, }, line: { - stroke: '#999', - strokeWidth: 1, visible: true, + stroke: DARK_BASE_COLORS.darkShade, + strokeWidth: 1, + dash: [4, 4], }, crossLine: { - stroke: '#999', - strokeWidth: 1, - dash: [5, 5], visible: true, + stroke: DARK_BASE_COLORS.darkShade, + strokeWidth: 1, + dash: [4, 4], }, }, background: { - color: 'transparent', - fallbackColor: Colors.Black.keyword, + color: DARK_BASE_COLORS.emptyShade, + fallbackColor: DARK_BASE_COLORS.emptyShade, }, goal: { minFontSize: 8, @@ -252,48 +261,48 @@ export const DARK_THEME: Theme = { capturePad: 16, tickLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: 'white', + fontFamily: DEFAULT_FONT_FAMILY, + fill: '#81858f', }, majorLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: 'white', + fontFamily: DEFAULT_FONT_FAMILY, + fill: DARK_BASE_COLORS.title, }, minorLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: 'white', + fontFamily: DEFAULT_FONT_FAMILY, + fill: '#81858f', }, majorCenterLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: 'white', + fontFamily: DEFAULT_FONT_FAMILY, + fill: DARK_BASE_COLORS.title, }, minorCenterLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: 'white', + fontFamily: DEFAULT_FONT_FAMILY, + fill: '#81858f', }, targetLine: { - stroke: 'white', + stroke: '#D4DAE5', }, tickLine: { - stroke: 'snow', + stroke: DARK_BASE_COLORS.mediumShade, }, progressLine: { - stroke: 'white', + stroke: '#D4DAE5', }, }, partition: { - outerSizeRatio: 1 / GOLDEN_RATIO, + outerSizeRatio: 1, emptySizeRatio: 0, - fontFamily: 'Sans-Serif', + fontFamily: DEFAULT_FONT_FAMILY, minFontSize: 8, maxFontSize: 64, idealFontSizeJump: 1.05, maximizeFontSize: false, - circlePadding: 2, + circlePadding: 4, radialPadding: TAU / 360, horizontalTextAngleThreshold: TAU / 12, horizontalTextEnforcer: 1, @@ -304,7 +313,7 @@ export const DARK_THEME: Theme = { fontVariant: 'normal', fontWeight: 400, valueFont: { - fontWeight: 400, + fontWeight: 700, fontStyle: 'normal', fontVariant: 'normal', }, @@ -314,7 +323,7 @@ export const DARK_THEME: Theme = { linkLabel: { maximumSection: 10, fontFamily: 'Sans-Serif', - fontSize: 12, + fontSize: 11, fontStyle: 'normal', fontVariant: 'normal', fontWeight: 400, @@ -323,9 +332,9 @@ export const DARK_THEME: Theme = { horizontalStemLength: 10, radiusPadding: 10, lineWidth: 1, - maxCount: 36, + maxCount: 5, maxTextLength: 100, - textColor: ColorVariant.Adaptive, + textColor: DARK_BASE_COLORS.title, minimumStemLength: 0, stemAngle: TAU / 8, padding: 0, @@ -335,13 +344,13 @@ export const DARK_THEME: Theme = { fontVariant: 'normal', }, }, - sectorLineWidth: 1, - sectorLineStroke: Colors.Black.keyword, + sectorLineWidth: 1.5, + sectorLineStroke: DARK_BASE_COLORS.emptyShade, }, heatmap: { brushArea: { visible: true, - stroke: '#D3DAE6', // euiColorLightShade, + stroke: '#D3DAE6', // DARK_BASE_COLORS.darkestShade, strokeWidth: 2, }, brushMask: { @@ -356,7 +365,7 @@ export const DARK_THEME: Theme = { xAxisLabel: { visible: true, fontSize: 12, - fontFamily: 'Sans-Serif', + fontFamily: DEFAULT_FONT_FAMILY, fontStyle: 'normal', textColor: Colors.White.keyword, fontVariant: 'normal', @@ -368,7 +377,7 @@ export const DARK_THEME: Theme = { visible: true, width: 'auto', fontSize: 12, - fontFamily: 'Sans-Serif', + fontFamily: DEFAULT_FONT_FAMILY, fontStyle: 'normal', textColor: Colors.White.keyword, fontVariant: 'normal', @@ -390,7 +399,7 @@ export const DARK_THEME: Theme = { maxWidth: 'fill', minFontSize: 8, maxFontSize: 12, - fontFamily: 'Sans-Serif', + fontFamily: DEFAULT_FONT_FAMILY, fontStyle: 'normal', textColor: Colors.White.keyword, fontVariant: 'normal', @@ -405,11 +414,11 @@ export const DARK_THEME: Theme = { }, metric: { text: { - lightColor: '#E0E5EE', - darkColor: '#343741', + lightColor: '#E0E5EE', //DARK_BASE_COLORS.title, + darkColor: DARK_BASE_COLORS.lightShade, }, - border: '#343741', - barBackground: '#343741', + border: DARK_BASE_COLORS.lightShade, + barBackground: DARK_BASE_COLORS.lightShade, nonFiniteText: 'N/A', minHeight: 64, }, @@ -418,16 +427,17 @@ export const DARK_THEME: Theme = { maxTableHeight: 120, defaultDotColor: Colors.White.keyword, }, + // TODO map colors to base color mappings flamegraph: { navigation: { - textColor: 'rgb(223, 229, 239)', - buttonTextColor: 'rgb(54, 162, 239)', - buttonDisabledTextColor: 'rgb(81, 87, 97)', - buttonBackgroundColor: '#36a2ef33', - buttonDisabledBackgroundColor: 'rgba(52, 55, 65, 0.15)', - }, - scrollbarThumb: 'rgb(223, 229, 239)', - scrollbarTrack: 'rgb(52, 55, 65)', + textColor: DARK_BASE_COLORS.title, + buttonTextColor: '#36A2EF', + buttonDisabledTextColor: '#515761', + buttonBackgroundColor: '#36A2EF33', + buttonDisabledBackgroundColor: '#34374126', + }, + scrollbarThumb: DARK_BASE_COLORS.title, + scrollbarTrack: DARK_BASE_COLORS.lightShade, }, highlighter: { point: { diff --git a/packages/charts/src/utils/themes/legacy_dark_theme.ts b/packages/charts/src/utils/themes/legacy_dark_theme.ts new file mode 100644 index 00000000000..3648d762d34 --- /dev/null +++ b/packages/charts/src/utils/themes/legacy_dark_theme.ts @@ -0,0 +1,446 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { palettes } from './colors'; +import { Theme } from './theme'; +import { + DEFAULT_CHART_MARGINS, + DEFAULT_CHART_PADDING, + DEFAULT_GEOMETRY_STYLES, + DEFAULT_MISSING_COLOR, +} from './theme_common'; +import { Colors } from '../../common/colors'; +import { GOLDEN_RATIO, TAU } from '../../common/constants'; +import { ColorVariant } from '../common'; + +/** + * Legacy dark chart theme to be removed at some point + * + * @public + * @deprecated Use new `DARK_THEME` + */ +export const LEGACY_DARK_THEME: Theme = { + chartPaddings: DEFAULT_CHART_PADDING, + chartMargins: DEFAULT_CHART_MARGINS, + lineSeriesStyle: { + line: { + visible: true, + strokeWidth: 1, + opacity: 1, + }, + point: { + visible: true, + stroke: ColorVariant.Series, + strokeWidth: 1, + fill: Colors.Black.keyword, + radius: 2, + opacity: 1, + }, + isolatedPoint: { + visible: true, + stroke: ColorVariant.Series, + strokeWidth: 1, + fill: Colors.Black.keyword, + radius: 2, + opacity: 1, + }, + fit: { + line: { + visible: true, + dash: [5, 5], + stroke: ColorVariant.Series, + opacity: 1, + }, + }, + }, + bubbleSeriesStyle: { + point: { + visible: true, + strokeWidth: 1, + fill: Colors.Black.keyword, + radius: 2, + opacity: 1, + }, + }, + areaSeriesStyle: { + area: { + visible: true, + opacity: 0.3, + }, + line: { + visible: true, + strokeWidth: 1, + opacity: 1, + }, + point: { + visible: false, + stroke: ColorVariant.Series, + strokeWidth: 1, + fill: Colors.Black.keyword, + radius: 2, + opacity: 1, + }, + isolatedPoint: { + visible: true, + stroke: ColorVariant.Series, + strokeWidth: 1, + fill: Colors.Black.keyword, + radius: 2, + opacity: 1, + }, + fit: { + line: { + visible: true, + dash: [5, 5], + stroke: ColorVariant.Series, + opacity: 1, + }, + area: { + visible: true, + opacity: 0.15, + fill: ColorVariant.Series, + }, + }, + }, + barSeriesStyle: { + rect: { + opacity: 1, + }, + rectBorder: { + visible: false, + strokeWidth: 1, + }, + displayValue: { + fontSize: 8, + fontStyle: 'normal', + fontFamily: 'sans-serif', + padding: 0, + fill: '#999', + offsetX: 0, + offsetY: 0, + }, + }, + arcSeriesStyle: { + arc: { + visible: true, + stroke: 'white', + strokeWidth: 1, + opacity: 1, + }, + }, + sharedStyle: DEFAULT_GEOMETRY_STYLES, + scales: { + barsPadding: 0.25, + histogramPadding: 0.05, + }, + axes: { + axisTitle: { + fontSize: 12, + fontFamily: 'sans-serif', + padding: { + inner: 8, + outer: 0, + }, + fill: '#D4D4D4', + visible: true, + }, + axisPanelTitle: { + fontSize: 10, + fontFamily: 'sans-serif', + padding: { + inner: 8, + outer: 0, + }, + fill: '#D4D4D4', + visible: true, + }, + axisLine: { + visible: true, + stroke: '#444', + strokeWidth: 1, + }, + tickLabel: { + visible: true, + fontSize: 10, + fontFamily: 'sans-serif', + fontStyle: 'normal', + fill: '#999', + padding: 0, + rotation: 0, + offset: { + x: 0, + y: 0, + reference: 'local', + }, + alignment: { + vertical: 'near', + horizontal: 'near', + }, + }, + tickLine: { + visible: true, + stroke: '#444', + strokeWidth: 1, + size: 10, + padding: 10, + }, + gridLine: { + horizontal: { + visible: false, + stroke: '#D3DAE6', + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + vertical: { + visible: false, + stroke: '#D3DAE6', + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + lumaSteps: [63, 103, 159, 191, 223, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255], + }, + }, + colors: { + vizColors: palettes.echPaletteColorBlind.colors, + defaultVizColor: DEFAULT_MISSING_COLOR, + }, + legend: { + verticalWidth: 200, + horizontalHeight: 64, + spacingBuffer: 10, + margin: 0, + labelOptions: { + maxLines: 1, + }, + }, + crosshair: { + band: { + fill: '#2A2A2A', + visible: true, + }, + line: { + stroke: '#999', + strokeWidth: 1, + visible: true, + }, + crossLine: { + stroke: '#999', + strokeWidth: 1, + dash: [5, 5], + visible: true, + }, + }, + background: { + color: 'transparent', + fallbackColor: Colors.Black.keyword, + }, + goal: { + minFontSize: 8, + maxFontSize: 64, + maxCircularSize: 360, + maxBulletSize: 500, + barThicknessMinSizeRatio: 1 / 10, + baselineArcThickness: 32, + baselineBarThickness: 32, + marginRatio: 0.05, + maxTickFontSize: 24, + maxLabelFontSize: 32, + maxCentralFontSize: 38, + arcBoxSamplePitch: (5 / 360) * TAU, + capturePad: 16, + tickLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: 'white', + }, + majorLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: 'white', + }, + minorLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: 'white', + }, + majorCenterLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: 'white', + }, + minorCenterLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: 'white', + }, + targetLine: { + stroke: 'white', + }, + tickLine: { + stroke: 'snow', + }, + progressLine: { + stroke: 'white', + }, + }, + partition: { + outerSizeRatio: 1 / GOLDEN_RATIO, + emptySizeRatio: 0, + fontFamily: 'Sans-Serif', + minFontSize: 8, + maxFontSize: 64, + idealFontSizeJump: 1.05, + maximizeFontSize: false, + circlePadding: 2, + radialPadding: TAU / 360, + horizontalTextAngleThreshold: TAU / 12, + horizontalTextEnforcer: 1, + fillLabel: { + textColor: ColorVariant.Adaptive, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + padding: 2, + clipText: false, + }, + linkLabel: { + maximumSection: 10, + fontFamily: 'Sans-Serif', + fontSize: 12, + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + gap: 10, + spacing: 2, + horizontalStemLength: 10, + radiusPadding: 10, + lineWidth: 1, + maxCount: 36, + maxTextLength: 100, + textColor: ColorVariant.Adaptive, + minimumStemLength: 0, + stemAngle: TAU / 8, + padding: 0, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + }, + sectorLineWidth: 1, + sectorLineStroke: Colors.Black.keyword, + }, + heatmap: { + brushArea: { + visible: true, + stroke: '#D3DAE6', // euiColorLightShade, + strokeWidth: 2, + }, + brushMask: { + visible: true, + fill: '#8c8c8c80', + }, + brushTool: { + visible: false, + fill: 'snow', + }, + + xAxisLabel: { + visible: true, + fontSize: 12, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + textColor: Colors.White.keyword, + fontVariant: 'normal', + fontWeight: 'normal', + padding: { top: 5, bottom: 5, left: 5, right: 5 }, + rotation: 0, + }, + yAxisLabel: { + visible: true, + width: 'auto', + fontSize: 12, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + textColor: Colors.White.keyword, + fontVariant: 'normal', + fontWeight: 'normal', + padding: { top: 5, bottom: 5, left: 5, right: 5 }, + }, + grid: { + stroke: { + width: 1, + color: 'snow', + }, + }, + cell: { + maxWidth: 'fill', + maxHeight: 'fill', + align: 'center', + label: { + visible: true, + maxWidth: 'fill', + minFontSize: 8, + maxFontSize: 12, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + textColor: Colors.White.keyword, + fontVariant: 'normal', + fontWeight: 'normal', + useGlobalMinFontSize: true, + }, + border: { + strokeWidth: 1, + stroke: 'snow', + }, + }, + }, + metric: { + text: { + lightColor: '#E0E5EE', + darkColor: '#343741', + }, + border: '#343741', + barBackground: '#343741', + nonFiniteText: 'N/A', + minHeight: 64, + }, + tooltip: { + maxWidth: 260, + maxTableHeight: 120, + defaultDotColor: Colors.White.keyword, + }, + flamegraph: { + navigation: { + textColor: 'rgb(223, 229, 239)', + buttonTextColor: 'rgb(54, 162, 239)', + buttonDisabledTextColor: 'rgb(81, 87, 97)', + buttonBackgroundColor: '#36a2ef33', + buttonDisabledBackgroundColor: 'rgba(52, 55, 65, 0.15)', + }, + scrollbarThumb: 'rgb(223, 229, 239)', + scrollbarTrack: 'rgb(52, 55, 65)', + }, + highlighter: { + point: { + opacity: 1, + fill: ColorVariant.None, + stroke: ColorVariant.Series, + strokeWidth: 4, + radius: 10, + }, + }, +}; diff --git a/packages/charts/src/utils/themes/legacy_light_theme.ts b/packages/charts/src/utils/themes/legacy_light_theme.ts new file mode 100644 index 00000000000..b4a40e39916 --- /dev/null +++ b/packages/charts/src/utils/themes/legacy_light_theme.ts @@ -0,0 +1,445 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { palettes } from './colors'; +import { Theme } from './theme'; +import { + DEFAULT_CHART_MARGINS, + DEFAULT_CHART_PADDING, + DEFAULT_GEOMETRY_STYLES, + DEFAULT_MISSING_COLOR, +} from './theme_common'; +import { Colors } from '../../common/colors'; +import { GOLDEN_RATIO, TAU } from '../../common/constants'; +import { ColorVariant } from '../common'; + +/** + * Legacy light chart theme to be removed at some point + * + * @public + * @deprecated use new `LIGHT_THEME` + */ +export const LEGACY_LIGHT_THEME: Theme = { + chartPaddings: DEFAULT_CHART_PADDING, + chartMargins: DEFAULT_CHART_MARGINS, + lineSeriesStyle: { + line: { + visible: true, + strokeWidth: 1, + opacity: 1, + }, + point: { + visible: true, + strokeWidth: 1, + stroke: ColorVariant.Series, + fill: Colors.White.keyword, + radius: 2, + opacity: 1, + }, + isolatedPoint: { + visible: true, + stroke: ColorVariant.Series, + strokeWidth: 1, + fill: Colors.White.keyword, + radius: 2, + opacity: 1, + }, + fit: { + line: { + opacity: 1, + visible: true, + dash: [5, 5], + stroke: ColorVariant.Series, + }, + }, + }, + bubbleSeriesStyle: { + point: { + visible: true, + strokeWidth: 1, + fill: Colors.White.keyword, + radius: 2, + opacity: 1, + }, + }, + areaSeriesStyle: { + area: { + visible: true, + opacity: 0.3, + }, + line: { + visible: true, + strokeWidth: 1, + opacity: 1, + }, + point: { + visible: false, + stroke: ColorVariant.Series, + strokeWidth: 1, + fill: Colors.White.keyword, + radius: 2, + opacity: 1, + }, + isolatedPoint: { + visible: true, + stroke: ColorVariant.Series, + strokeWidth: 1, + fill: Colors.White.keyword, + radius: 2, + opacity: 1, + }, + fit: { + line: { + visible: true, + dash: [5, 5], + stroke: ColorVariant.Series, + opacity: 1, + }, + area: { + visible: true, + opacity: 0.15, + fill: ColorVariant.Series, + }, + }, + }, + barSeriesStyle: { + rect: { + opacity: 1, + }, + rectBorder: { + visible: false, + strokeWidth: 1, + }, + displayValue: { + fontSize: 8, + fontStyle: 'normal', + fontFamily: 'sans-serif', + padding: 0, + fill: '#777', + offsetX: 0, + offsetY: 0, + }, + }, + arcSeriesStyle: { + arc: { + visible: true, + stroke: Colors.Black.keyword, + strokeWidth: 1, + opacity: 1, + }, + }, + sharedStyle: DEFAULT_GEOMETRY_STYLES, + scales: { + barsPadding: 0.25, + histogramPadding: 0.05, + }, + axes: { + axisTitle: { + visible: true, + fontSize: 12, + fontFamily: 'sans-serif', + padding: { + inner: 8, + outer: 0, + }, + fill: '#333', + }, + axisPanelTitle: { + visible: true, + fontSize: 10, + fontFamily: 'sans-serif', + padding: { + inner: 8, + outer: 0, + }, + fill: '#333', + }, + axisLine: { + visible: true, + stroke: '#eaeaea', + strokeWidth: 1, + }, + tickLabel: { + visible: true, + fontSize: 10, + fontFamily: 'sans-serif', + fontStyle: 'normal', + fill: '#777', + padding: 0, + rotation: 0, + offset: { + x: 0, + y: 0, + reference: 'local', + }, + alignment: { + vertical: 'near', + horizontal: 'near', + }, + }, + tickLine: { + visible: true, + stroke: '#eaeaea', + strokeWidth: 1, + size: 10, + padding: 10, + }, + gridLine: { + horizontal: { + visible: false, + stroke: '#D3DAE6', + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + vertical: { + visible: false, + stroke: '#D3DAE6', + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + lumaSteps: [224, 184, 128, 96, 64, 32, 16, 8, 4, 2, 1, 0, 0, 0, 0, 0], + }, + }, + colors: { + vizColors: palettes.echPaletteColorBlind.colors, + defaultVizColor: DEFAULT_MISSING_COLOR, + }, + legend: { + verticalWidth: 200, + horizontalHeight: 64, + spacingBuffer: 10, + margin: 0, + labelOptions: { + maxLines: 1, + }, + }, + crosshair: { + band: { + fill: '#F5F5F5', + visible: true, + }, + line: { + stroke: '#98A2B3', + strokeWidth: 1, + visible: true, + }, + crossLine: { + stroke: '#98A2B3', + strokeWidth: 1, + dash: [5, 5], + visible: true, + }, + }, + background: { + color: Colors.Transparent.keyword, + fallbackColor: Colors.White.keyword, + }, + goal: { + minFontSize: 8, + maxFontSize: 64, + maxCircularSize: 360, + maxBulletSize: 500, + barThicknessMinSizeRatio: 1 / 10, + baselineArcThickness: 32, + baselineBarThickness: 32, + marginRatio: 0.05, + maxTickFontSize: 24, + maxLabelFontSize: 32, + maxCentralFontSize: 38, + arcBoxSamplePitch: (5 / 360) * TAU, + capturePad: 16, + tickLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: Colors.Black.keyword, + }, + majorLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: Colors.Black.keyword, + }, + minorLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: Colors.Black.keyword, + }, + majorCenterLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: Colors.Black.keyword, + }, + minorCenterLabel: { + fontStyle: 'normal', + fontFamily: 'sans-serif', + fill: Colors.Black.keyword, + }, + targetLine: { + stroke: Colors.Black.keyword, + }, + tickLine: { + stroke: 'darkgrey', + }, + progressLine: { + stroke: Colors.Black.keyword, + }, + }, + partition: { + outerSizeRatio: 1 / GOLDEN_RATIO, + emptySizeRatio: 0, + fontFamily: 'Sans-Serif', + minFontSize: 8, + maxFontSize: 64, + idealFontSizeJump: 1.05, + maximizeFontSize: false, + circlePadding: 2, + radialPadding: TAU / 360, + horizontalTextAngleThreshold: TAU / 12, + horizontalTextEnforcer: 1, + fillLabel: { + textColor: ColorVariant.Adaptive, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + padding: 2, + clipText: false, + }, + linkLabel: { + maximumSection: 10, + fontFamily: 'Sans-Serif', + fontSize: 12, + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + gap: 10, + spacing: 2, + horizontalStemLength: 10, + radiusPadding: 10, + lineWidth: 1, + maxCount: 36, + maxTextLength: 100, + textColor: ColorVariant.Adaptive, + minimumStemLength: 0, + stemAngle: TAU / 8, + padding: 0, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + }, + sectorLineWidth: 1, + sectorLineStroke: 'white', + }, + heatmap: { + brushArea: { + visible: true, + stroke: '#69707D', // euiColorDarkShade, + strokeWidth: 2, + }, + brushMask: { + visible: true, + fill: '#73737380', + }, + brushTool: { + visible: false, + fill: 'gray', + }, + xAxisLabel: { + visible: true, + fontSize: 12, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + textColor: Colors.Black.keyword, + fontVariant: 'normal', + fontWeight: 'normal', + padding: { top: 5, bottom: 5, left: 5, right: 5 }, + rotation: 0, + }, + yAxisLabel: { + visible: true, + width: 'auto', + fontSize: 12, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + textColor: Colors.Black.keyword, + fontVariant: 'normal', + fontWeight: 'normal', + padding: { top: 5, bottom: 5, left: 5, right: 5 }, + }, + grid: { + stroke: { + width: 1, + color: 'gray', + }, + }, + cell: { + maxWidth: 'fill', + maxHeight: 'fill', + align: 'center', + label: { + visible: true, + maxWidth: 'fill', + minFontSize: 8, + maxFontSize: 12, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + textColor: Colors.Black.keyword, + fontVariant: 'normal', + fontWeight: 'normal', + useGlobalMinFontSize: true, + }, + border: { + strokeWidth: 1, + stroke: 'gray', + }, + }, + }, + metric: { + text: { + lightColor: '#E0E5EE', + darkColor: '#343741', + }, + border: '#EDF0F5', + barBackground: '#EDF0F5', + nonFiniteText: 'N/A', + minHeight: 64, + }, + tooltip: { + maxWidth: 260, + maxTableHeight: 120, + defaultDotColor: Colors.Black.keyword, + }, + flamegraph: { + navigation: { + textColor: 'rgb(52, 55, 65)', + buttonTextColor: 'rgb(0, 97, 166)', + buttonDisabledTextColor: 'rgb(162, 171, 186)', + buttonBackgroundColor: 'rgb(204, 228, 245)', + buttonDisabledBackgroundColor: 'rgba(211, 218, 230, 0.15)', + }, + scrollbarThumb: 'rgb(52, 55, 65)', + scrollbarTrack: 'rgb(211, 218, 230)', + }, + highlighter: { + point: { + opacity: 1, + fill: ColorVariant.None, + stroke: ColorVariant.Series, + strokeWidth: 4, + radius: 10, + }, + }, +}; diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts index 01e44d30236..6bbb716065a 100644 --- a/packages/charts/src/utils/themes/light_theme.ts +++ b/packages/charts/src/utils/themes/light_theme.ts @@ -7,17 +7,24 @@ */ import { palettes } from './colors'; -import { Theme } from './theme'; -import { - DEFAULT_CHART_MARGINS, - DEFAULT_CHART_PADDING, - DEFAULT_GEOMETRY_STYLES, - DEFAULT_MISSING_COLOR, -} from './theme_common'; +import { ChartBaseColors, Theme } from './theme'; +import { DEFAULT_CHART_MARGINS, DEFAULT_CHART_PADDING, DEFAULT_GEOMETRY_STYLES } from './theme_common'; import { Colors } from '../../common/colors'; -import { GOLDEN_RATIO, TAU } from '../../common/constants'; +import { TAU } from '../../common/constants'; +import { DEFAULT_FONT_FAMILY } from '../../common/default_theme_attributes'; import { ColorVariant } from '../common'; +/** @public */ +export const LIGHT_BASE_COLORS: ChartBaseColors = { + emptyShade: '#FFF', + lightestShade: '#F1F4FA', + lightShade: '#D3DAE6', + mediumShade: '#98A2B3', + darkShade: '#69707D', + darkestShade: '#343741', + title: '#1A1C21', +}; + /** @public */ export const LIGHT_THEME: Theme = { chartPaddings: DEFAULT_CHART_PADDING, @@ -25,15 +32,15 @@ export const LIGHT_THEME: Theme = { lineSeriesStyle: { line: { visible: true, - strokeWidth: 1, + strokeWidth: 2, opacity: 1, }, point: { visible: true, - strokeWidth: 1, + strokeWidth: 2, stroke: ColorVariant.Series, - fill: Colors.White.keyword, - radius: 2, + fill: LIGHT_BASE_COLORS.emptyShade, + radius: 3, opacity: 1, }, isolatedPoint: { @@ -69,15 +76,15 @@ export const LIGHT_THEME: Theme = { }, line: { visible: true, - strokeWidth: 1, + strokeWidth: 2, opacity: 1, }, point: { visible: false, stroke: ColorVariant.Series, - strokeWidth: 1, - fill: Colors.White.keyword, - radius: 2, + strokeWidth: 2, + fill: LIGHT_BASE_COLORS.emptyShade, + radius: 3, opacity: 1, }, isolatedPoint: { @@ -111,11 +118,12 @@ export const LIGHT_THEME: Theme = { strokeWidth: 1, }, displayValue: { - fontSize: 8, + fontSize: 10, fontStyle: 'normal', - fontFamily: 'sans-serif', + fontFamily: DEFAULT_FONT_FAMILY, + alignment: { horizontal: 'center', vertical: 'middle' }, padding: 0, - fill: '#777', + fill: { textBorder: 0 }, offsetX: 0, offsetY: 0, }, @@ -137,12 +145,12 @@ export const LIGHT_THEME: Theme = { axisTitle: { visible: true, fontSize: 12, - fontFamily: 'sans-serif', + fontFamily: DEFAULT_FONT_FAMILY, padding: { - inner: 8, + inner: 10, outer: 0, }, - fill: '#333', + fill: LIGHT_BASE_COLORS.darkestShade, }, axisPanelTitle: { visible: true, @@ -152,20 +160,20 @@ export const LIGHT_THEME: Theme = { inner: 8, outer: 0, }, - fill: '#333', + fill: '#333', // LIGHT_BASE_COLORS.darkestShade, }, axisLine: { visible: true, - stroke: '#eaeaea', + stroke: '#eaedf3', // LIGHT_BASE_COLORS.lightShade, strokeWidth: 1, }, tickLabel: { visible: true, fontSize: 10, - fontFamily: 'sans-serif', + fontFamily: DEFAULT_FONT_FAMILY, fontStyle: 'normal', - fill: '#777', - padding: 0, + fill: '#646a77', // LIGHT_BASE_COLORS.darkShade, + padding: { outer: 8, inner: 10 }, rotation: 0, offset: { x: 0, @@ -178,33 +186,33 @@ export const LIGHT_THEME: Theme = { }, }, tickLine: { - visible: true, - stroke: '#eaeaea', + visible: false, + stroke: '#eaedf3', // LIGHT_BASE_COLORS.lightShade, strokeWidth: 1, size: 10, padding: 10, }, gridLine: { horizontal: { - visible: false, - stroke: '#D3DAE6', + visible: true, + stroke: '#eaedf3', // LIGHT_BASE_COLORS.lightShade, strokeWidth: 1, opacity: 1, dash: [0, 0], }, vertical: { - visible: false, - stroke: '#D3DAE6', + visible: true, + stroke: '#eaedf3', // LIGHT_BASE_COLORS.lightShade, strokeWidth: 1, opacity: 1, - dash: [0, 0], + dash: [4, 4], }, lumaSteps: [224, 184, 128, 96, 64, 32, 16, 8, 4, 2, 1, 0, 0, 0, 0, 0], }, }, colors: { vizColors: palettes.echPaletteColorBlind.colors, - defaultVizColor: DEFAULT_MISSING_COLOR, + defaultVizColor: '#6092C0', }, legend: { verticalWidth: 200, @@ -217,24 +225,25 @@ export const LIGHT_THEME: Theme = { }, crosshair: { band: { - fill: '#F5F5F5', visible: true, + fill: LIGHT_BASE_COLORS.lightestShade, }, line: { - stroke: '#98A2B3', - strokeWidth: 1, visible: true, + stroke: LIGHT_BASE_COLORS.darkShade, + strokeWidth: 1, + dash: [4, 4], }, crossLine: { - stroke: '#98A2B3', - strokeWidth: 1, - dash: [5, 5], visible: true, + stroke: LIGHT_BASE_COLORS.darkShade, + strokeWidth: 1, + dash: [4, 4], }, }, background: { - color: Colors.Transparent.keyword, - fallbackColor: Colors.White.keyword, + color: LIGHT_BASE_COLORS.emptyShade, + fallbackColor: LIGHT_BASE_COLORS.emptyShade, }, goal: { minFontSize: 8, @@ -252,48 +261,48 @@ export const LIGHT_THEME: Theme = { capturePad: 16, tickLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: Colors.Black.keyword, + fontFamily: DEFAULT_FONT_FAMILY, + fill: '#646a77', // LIGHT_BASE_COLORS.darkShade, }, majorLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: Colors.Black.keyword, + fontFamily: DEFAULT_FONT_FAMILY, + fill: LIGHT_BASE_COLORS.darkestShade, }, minorLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: Colors.Black.keyword, + fontFamily: DEFAULT_FONT_FAMILY, + fill: '#646a77', // LIGHT_BASE_COLORS.darkShade, }, majorCenterLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: Colors.Black.keyword, + fontFamily: DEFAULT_FONT_FAMILY, + fill: LIGHT_BASE_COLORS.darkestShade, }, minorCenterLabel: { fontStyle: 'normal', - fontFamily: 'sans-serif', - fill: Colors.Black.keyword, + fontFamily: DEFAULT_FONT_FAMILY, + fill: '#646a77', // LIGHT_BASE_COLORS.darkShade, }, targetLine: { - stroke: Colors.Black.keyword, + stroke: LIGHT_BASE_COLORS.darkestShade, }, tickLine: { - stroke: 'darkgrey', + stroke: LIGHT_BASE_COLORS.mediumShade, }, progressLine: { - stroke: Colors.Black.keyword, + stroke: LIGHT_BASE_COLORS.darkestShade, }, }, partition: { - outerSizeRatio: 1 / GOLDEN_RATIO, + outerSizeRatio: 1, emptySizeRatio: 0, - fontFamily: 'Sans-Serif', + fontFamily: DEFAULT_FONT_FAMILY, minFontSize: 8, - maxFontSize: 64, + maxFontSize: 16, idealFontSizeJump: 1.05, maximizeFontSize: false, - circlePadding: 2, + circlePadding: 4, radialPadding: TAU / 360, horizontalTextAngleThreshold: TAU / 12, horizontalTextEnforcer: 1, @@ -304,7 +313,7 @@ export const LIGHT_THEME: Theme = { fontVariant: 'normal', fontWeight: 400, valueFont: { - fontWeight: 400, + fontWeight: 700, fontStyle: 'normal', fontVariant: 'normal', }, @@ -314,7 +323,7 @@ export const LIGHT_THEME: Theme = { linkLabel: { maximumSection: 10, fontFamily: 'Sans-Serif', - fontSize: 12, + fontSize: 11, fontStyle: 'normal', fontVariant: 'normal', fontWeight: 400, @@ -323,9 +332,9 @@ export const LIGHT_THEME: Theme = { horizontalStemLength: 10, radiusPadding: 10, lineWidth: 1, - maxCount: 36, + maxCount: 5, maxTextLength: 100, - textColor: ColorVariant.Adaptive, + textColor: LIGHT_BASE_COLORS.darkestShade, minimumStemLength: 0, stemAngle: TAU / 8, padding: 0, @@ -335,13 +344,13 @@ export const LIGHT_THEME: Theme = { fontVariant: 'normal', }, }, - sectorLineWidth: 1, - sectorLineStroke: 'white', + sectorLineWidth: 1.5, + sectorLineStroke: LIGHT_BASE_COLORS.emptyShade, }, heatmap: { brushArea: { visible: true, - stroke: '#69707D', // euiColorDarkShade, + stroke: LIGHT_BASE_COLORS.darkShade, strokeWidth: 2, }, brushMask: { @@ -404,11 +413,11 @@ export const LIGHT_THEME: Theme = { }, metric: { text: { - lightColor: '#E0E5EE', - darkColor: '#343741', + lightColor: '#E0E5EE', // LIGHT_BASE_COLORS.title, + darkColor: LIGHT_BASE_COLORS.darkestShade, }, - border: '#EDF0F5', - barBackground: '#EDF0F5', + border: '#EDF0F5', // LIGHT_BASE_COLORS.lightShade, + barBackground: '#EDF0F5', // LIGHT_BASE_COLORS.lightShade, nonFiniteText: 'N/A', minHeight: 64, }, @@ -417,16 +426,17 @@ export const LIGHT_THEME: Theme = { maxTableHeight: 120, defaultDotColor: Colors.Black.keyword, }, + // TODO map colors to base color mappings flamegraph: { navigation: { - textColor: 'rgb(52, 55, 65)', - buttonTextColor: 'rgb(0, 97, 166)', - buttonDisabledTextColor: 'rgb(162, 171, 186)', - buttonBackgroundColor: 'rgb(204, 228, 245)', - buttonDisabledBackgroundColor: 'rgba(211, 218, 230, 0.15)', - }, - scrollbarThumb: 'rgb(52, 55, 65)', - scrollbarTrack: 'rgb(211, 218, 230)', + textColor: LIGHT_BASE_COLORS.darkestShade, + buttonTextColor: '#0061A6', + buttonDisabledTextColor: '#A2ABBA', + buttonBackgroundColor: '#CCE4F5', + buttonDisabledBackgroundColor: '#D3DAE626', + }, + scrollbarThumb: LIGHT_BASE_COLORS.darkestShade, + scrollbarTrack: LIGHT_BASE_COLORS.lightShade, }, highlighter: { point: { diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts index b4db27c0f5f..a4138a981c1 100644 --- a/packages/charts/src/utils/themes/theme.ts +++ b/packages/charts/src/utils/themes/theme.ts @@ -17,6 +17,20 @@ import { ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment import { Margins, Padding, SimplePadding } from '../dimensions'; import { Point } from '../point'; +/** + * Base color definitions - theme-specific + * @public + */ +export interface ChartBaseColors { + emptyShade: string; + lightShade: string; + lightestShade: string; + mediumShade: string; + darkShade: string; + darkestShade: string; + title: string; +} + /** @public */ export interface Visible { visible: boolean; diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts index 3f797332abd..65cffb715cc 100644 --- a/packages/charts/src/utils/themes/theme_common.ts +++ b/packages/charts/src/utils/themes/theme_common.ts @@ -22,6 +22,17 @@ export const DEFAULT_CHART_PADDING: Margins = { }; /** @internal */ export const DEFAULT_CHART_MARGINS: Margins = { + left: 0, + right: 0, + top: 0, + bottom: 0, +}; + +/** + * Remove in next step to limit diffs + * @internal + */ +export const LEGACY_CHART_MARGINS: Margins = { left: 10, right: 10, top: 10, diff --git a/storybook/parameters.ts b/storybook/parameters.ts index c3f6fe9bccc..2a478d0abff 100644 --- a/storybook/parameters.ts +++ b/storybook/parameters.ts @@ -43,18 +43,30 @@ export const storybookParameters: Parameters = { themes: [ { id: 'light', - title: 'Light - EUI', - class: ['light-theme', 'eui'], + title: 'Light', + class: 'light-theme', color: euiLightVars.euiColorEmptyShade, imageUrl: euiLogoUrl, }, { id: 'dark', - title: 'Dark - EUI', - class: ['dark-theme', 'eui'], + title: 'Dark', + class: 'dark-theme', color: euiDarkVars.euiColorEmptyShade, imageUrl: euiLogoUrl, }, + { + id: 'legacy-light', + title: 'Legacy Light', + class: ['light-theme', 'legacy'], + color: '#fff', + }, + { + id: 'legacy-dark', + title: 'Legacy Dark', + class: ['dark-theme', 'legacy'], + color: '#000', + }, ], }, background: { @@ -93,6 +105,11 @@ export const storybookParameters: Parameters = { title: 'Show chart description', defaultValue: false, }, + { + id: 'showChartBoundary', + title: 'Show chart boundary', + defaultValue: false, + }, ], }, viewport: { diff --git a/storybook/stories/area/20_stepped_area.story.tsx b/storybook/stories/area/20_stepped_area.story.tsx index b48ad300bf0..c226aadd802 100644 --- a/storybook/stories/area/20_stepped_area.story.tsx +++ b/storybook/stories/area/20_stepped_area.story.tsx @@ -8,9 +8,10 @@ import React from 'react'; -import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType } from '@elastic/charts'; +import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings } from '@elastic/charts'; import { ChartsStory } from '../../types'; +import { useBaseTheme } from '../../use_base_theme'; const data = [ { @@ -422,6 +423,7 @@ const data = [ export const Example: ChartsStory = (_, { title, description }) => { return ( + diff --git a/storybook/stories/axes/2_tick_label_rotation.story.tsx b/storybook/stories/axes/2_tick_label_rotation.story.tsx index 3ff7d2545d1..c48ac1ad471 100644 --- a/storybook/stories/axes/2_tick_label_rotation.story.tsx +++ b/storybook/stories/axes/2_tick_label_rotation.story.tsx @@ -18,7 +18,7 @@ import { Settings, AxisStyle, RecursivePartial, - DEFAULT_CHART_MARGINS, + LEGACY_CHART_MARGINS, DEFAULT_CHART_PADDING, } from '@elastic/charts'; @@ -113,10 +113,10 @@ export const Example: ChartsStory = (_, { title, description }) => { const debug = boolean('debug', false, 'general'); const onlyGlobal = !boolean('disable axis overrides', false, 'general'); const chartMargins = { - left: customKnobs.positiveNumber('margin left', DEFAULT_CHART_MARGINS.left, 'general'), - right: customKnobs.positiveNumber('margin right', DEFAULT_CHART_MARGINS.right, 'general'), - top: customKnobs.positiveNumber('margin top', DEFAULT_CHART_MARGINS.top, 'general'), - bottom: customKnobs.positiveNumber('margin bottom', DEFAULT_CHART_MARGINS.bottom, 'general'), + left: customKnobs.positiveNumber('margin left', LEGACY_CHART_MARGINS.left, 'general'), + right: customKnobs.positiveNumber('margin right', LEGACY_CHART_MARGINS.right, 'general'), + top: customKnobs.positiveNumber('margin top', LEGACY_CHART_MARGINS.top, 'general'), + bottom: customKnobs.positiveNumber('margin bottom', LEGACY_CHART_MARGINS.bottom, 'general'), }; const chartPaddings = { left: customKnobs.positiveNumber('padding left', DEFAULT_CHART_PADDING.left, 'general'), diff --git a/storybook/stories/composable/1_basic.story.tsx b/storybook/stories/composable/1_basic.story.tsx index 19a22f15ffb..85f600b7f33 100644 --- a/storybook/stories/composable/1_basic.story.tsx +++ b/storybook/stories/composable/1_basic.story.tsx @@ -13,8 +13,8 @@ import React, { CSSProperties, useState } from 'react'; import { Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts'; import { BarSeries } from '../../../packages/charts/src/chart_types/specs'; -import { LIGHT_THEME } from '../../../packages/charts/src/utils/themes/light_theme'; import { ChartsStory } from '../../types'; +import { useBaseTheme } from '../../use_base_theme'; interface Dimensions { height: number; @@ -152,7 +152,7 @@ export const Example: ChartsStory = (_, { title, description }) => { { return ( + = { bar: BarSeries, @@ -84,6 +85,7 @@ export const Example: ChartsStory = (_, { title, description }) => { id="chart1" > { id="chart2" > { return ( - + diff --git a/storybook/stories/stylings/25_mixed_point_shapes.story.tsx b/storybook/stories/stylings/25_mixed_point_shapes.story.tsx index e4751d0f34e..e25e06aef5b 100644 --- a/storybook/stories/stylings/25_mixed_point_shapes.story.tsx +++ b/storybook/stories/stylings/25_mixed_point_shapes.story.tsx @@ -22,6 +22,7 @@ import { } from '@elastic/charts'; import { ChartsStory } from '../../types'; +import { useBaseTheme } from '../../use_base_theme'; export const Example: ChartsStory = (_, { title, description }) => { const shapeKnobArea = select( @@ -50,7 +51,7 @@ export const Example: ChartsStory = (_, { title, description }) => { return ( - + Number(d).toFixed(2)} /> = (Story, context) => const themeId = globals?.theme ?? ThemeId.Light; const backgroundId = globals?.background; - const { showHeader = false, showChartTitle = false, showChartDescription = false } = globals?.toggles ?? {}; + const { + showHeader = false, + showChartTitle = false, + showChartDescription = false, + showChartBoundary = false, + } = globals?.toggles ?? {}; const markdown = parameters?.markdown; const colorMode = themeId.includes('light') ? 'light' : 'dark'; @@ -49,7 +55,7 @@ export const StoryWrapper: DecoratorFunction = (Story, context) => )} -
+
; @@ -33,8 +42,10 @@ export const ThemeIdProvider = ThemeContext.Provider; export const BackgroundIdProvider = BackgroundContext.Provider; const themeMap = { - [ThemeId.Light]: mergePartial(LIGHT_THEME, EUI_CHARTS_THEME_LIGHT.theme), - [ThemeId.Dark]: mergePartial(DARK_THEME, EUI_CHARTS_THEME_DARK.theme), + [ThemeId.Light]: LIGHT_THEME, + [ThemeId.Dark]: DARK_THEME, + [ThemeId.LegacyLight]: LEGACY_LIGHT_THEME, + [ThemeId.LegacyDark]: LEGACY_DARK_THEME, }; const getBackground = (backgroundId?: string) => { @@ -52,8 +63,8 @@ export const useBaseTheme = (): Theme => { const backgroundColor = getBackground(backgroundId); return mergePartial(theme, { - // eui chart theme has no margin for some reason. This is just for consistency. - chartMargins: DEFAULT_CHART_MARGINS, + // Keep this just for consistency for the first pass of theme changes + chartMargins: LEGACY_CHART_MARGINS, background: { color: backgroundColor }, }); };