diff --git a/src/chart_types/xy_chart/store/chart_state.test.ts b/src/chart_types/xy_chart/store/chart_state.test.ts index d1d70f32d4..3a77008179 100644 --- a/src/chart_types/xy_chart/store/chart_state.test.ts +++ b/src/chart_types/xy_chart/store/chart_state.test.ts @@ -20,6 +20,7 @@ import { ChartStore } from './chart_state'; describe('Chart Store', () => { let store = new ChartStore(); + store.chartTheme = LIGHT_THEME; const SPEC_ID = getSpecId('spec_1'); const AXIS_ID = getAxisId('axis_1'); @@ -67,6 +68,7 @@ describe('Chart Store', () => { }; beforeEach(() => { store = new ChartStore(); + store.chartTheme = LIGHT_THEME; store.updateParentDimensions(600, 600, 0, 0); store.computeChart(); }); diff --git a/src/chart_types/xy_chart/store/chart_state.ts b/src/chart_types/xy_chart/store/chart_state.ts index 268378da3c..3d9a697cde 100644 --- a/src/chart_types/xy_chart/store/chart_state.ts +++ b/src/chart_types/xy_chart/store/chart_state.ts @@ -46,7 +46,6 @@ import { Rotation, } from '../utils/specs'; import { formatTooltip, getSeriesTooltipValues } from '../tooltip/tooltip'; -import { LIGHT_THEME } from '../../../utils/themes/light_theme'; import { mergeWithDefaultAnnotationLine, mergeWithDefaultAnnotationRect, Theme } from '../../../utils/themes/theme'; import { compareByValueAsc } from '../../../utils/commons'; import { computeChartDimensions } from '../utils/dimensions'; @@ -150,7 +149,10 @@ export class ChartStore { chartRotation: Rotation = 0; // updated from jsx chartRendering: Rendering = 'canvas'; // updated from jsx - chartTheme: Theme = LIGHT_THEME; // updated from jsx + /** + * Chart theme to be set from Settings.tsx + */ + chartTheme!: Theme; axesSpecs: Map = new Map(); // readed from jsx axesTicksDimensions: Map = new Map(); // computed axesPositions: Map = new Map(); // computed diff --git a/src/specs/settings.test.tsx b/src/specs/settings.test.tsx index 6844b86f55..0e1f3e7125 100644 --- a/src/specs/settings.test.tsx +++ b/src/specs/settings.test.tsx @@ -2,11 +2,10 @@ import { mount } from 'enzyme'; import * as React from 'react'; import { Position, Rendering, Rotation } from '../chart_types/xy_chart/utils/specs'; import { DARK_THEME } from '../utils/themes/dark_theme'; -import { LIGHT_THEME } from '../utils/themes/light_theme'; import { TooltipType } from '../chart_types/xy_chart/utils/interactions'; import { ChartStore } from '../chart_types/xy_chart/store/chart_state'; import { DEFAULT_TOOLTIP_SNAP, DEFAULT_TOOLTIP_TYPE, SettingsComponent, SettingSpecProps } from './settings'; -import { PartialTheme, BaseThemeTypes } from '../utils/themes/theme'; +import { PartialTheme } from '../utils/themes/theme'; describe('Settings spec component', () => { test('should update store on mount if spec has a chart store', () => { @@ -56,7 +55,7 @@ describe('Settings spec component', () => { test('should set chart properties on chart store', () => { const chartStore = new ChartStore(); - expect(chartStore.chartTheme).toEqual(LIGHT_THEME); + expect(chartStore.chartTheme).toBeUndefined(); expect(chartStore.chartRotation).toBe(0); expect(chartStore.chartRendering).toBe('canvas'); expect(chartStore.animateData).toBe(false); @@ -163,11 +162,11 @@ describe('Settings spec component', () => { }, }; - expect(chartStore.chartTheme).toEqual(LIGHT_THEME); + expect(chartStore.chartTheme).toBeUndefined(); const updatedProps: SettingSpecProps = { theme: partialTheme, - baseThemeType: BaseThemeTypes.Dark, + baseTheme: DARK_THEME, rotation: 90 as Rotation, rendering: 'svg' as Rendering, animateData: true, diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx index 004e8066c9..754d2989aa 100644 --- a/src/specs/settings.tsx +++ b/src/specs/settings.tsx @@ -2,9 +2,7 @@ import { PureComponent } from 'react'; import { inject } from 'mobx-react'; import { DomainRange, Position, Rendering, Rotation } from '../chart_types/xy_chart/utils/specs'; -import { LIGHT_THEME } from '../utils/themes/light_theme'; -import { DARK_THEME } from '../utils/themes/dark_theme'; -import { BaseThemeType, mergeWithDefaultTheme, PartialTheme, Theme, BaseThemeTypes } from '../utils/themes/theme'; +import { mergeWithDefaultTheme, PartialTheme, Theme } from '../utils/themes/theme'; import { Domain } from '../utils/domain'; import { TooltipType, TooltipValueFormatter } from '../chart_types/xy_chart/utils/interactions'; import { @@ -16,6 +14,7 @@ import { CursorUpdateListener, } from '../chart_types/xy_chart/store/chart_state'; import { ScaleTypes } from '../utils/scales/scales'; +import { LIGHT_THEME } from '../utils/themes/light_theme'; export const DEFAULT_TOOLTIP_TYPE = TooltipType.VerticalCursor; export const DEFAULT_TOOLTIP_SNAP = true; @@ -26,11 +25,6 @@ interface TooltipProps { headerFormatter?: TooltipValueFormatter; } -const THEMES: { [type: string]: Theme } = { - [BaseThemeTypes.Light]: LIGHT_THEME, - [BaseThemeTypes.Dark]: DARK_THEME, -}; - /** * Event used to syncronize cursors between Charts. * @@ -61,16 +55,10 @@ export interface SettingSpecProps { * Full or partial theme to be merged with base */ theme?: Theme | PartialTheme; - /** - * Theme type used to get base theme - * - * @default `BaseThemeType.Light` - */ - baseThemeType?: BaseThemeType; /** * Full default theme to use as base * - * @overrides `baseThemeType` + * @default `LIGHT_THEME` */ baseTheme?: Theme; rendering: Rendering; @@ -95,9 +83,8 @@ export interface SettingSpecProps { xDomain?: Domain | DomainRange; } -function getTheme(baseThemeType: BaseThemeType, theme?: Theme | PartialTheme, baseTheme?: Theme): Theme { - const base = baseTheme ? baseTheme : THEMES[baseThemeType]; - +function getTheme(baseTheme?: Theme, theme?: Theme | PartialTheme): Theme { + const base = baseTheme ? baseTheme : LIGHT_THEME; return theme ? mergeWithDefaultTheme(theme, base) : base; } @@ -105,7 +92,6 @@ function updateChartStore(props: SettingSpecProps) { const { chartStore, theme, - baseThemeType = BaseThemeTypes.Light, baseTheme, rotation, rendering, @@ -132,7 +118,7 @@ function updateChartStore(props: SettingSpecProps) { return; } - chartStore.chartTheme = getTheme(baseThemeType, theme, baseTheme); + chartStore.chartTheme = getTheme(baseTheme, theme); chartStore.chartRotation = rotation; chartStore.chartRendering = rendering; chartStore.animateData = animateData; @@ -194,7 +180,6 @@ export class SettingsComponent extends PureComponent { animateData: true, showLegend: false, debug: false, - baseThemeType: BaseThemeTypes.Light, tooltip: { type: DEFAULT_TOOLTIP_TYPE, snap: DEFAULT_TOOLTIP_SNAP, diff --git a/src/utils/themes/theme.ts b/src/utils/themes/theme.ts index cddfb4b416..827f047b6f 100644 --- a/src/utils/themes/theme.ts +++ b/src/utils/themes/theme.ts @@ -116,13 +116,6 @@ export interface Theme { export type PartialTheme = RecursivePartial; -export const BaseThemeTypes = Object.freeze({ - Light: 'light' as 'light', - Dark: 'dark' as 'dark', -}); - -export type BaseThemeType = typeof BaseThemeTypes.Dark | typeof BaseThemeTypes.Light; - export type DisplayValueStyle = TextStyle & { offsetX: number; offsetY: number; diff --git a/stories/styling.tsx b/stories/styling.tsx index e612117108..6e4625aaab 100644 --- a/stories/styling.tsx +++ b/stories/styling.tsx @@ -19,12 +19,12 @@ import { Position, ScaleType, Settings, - BaseThemeTypes, LineSeriesStyle, TooltipType, RecursivePartial, Theme, LIGHT_THEME, + DARK_THEME, } from '../src/'; import * as TestDatasets from '../src/utils/data_samples/test_dataset'; import { palettes } from '../src/utils/themes/colors'; @@ -393,7 +393,7 @@ storiesOf('Stylings', module) - +