refactor: theme type logic

Author: nickofthyme

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();
   });

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<AxisId, AxisSpec> = new Map(); // readed from jsx
   axesTicksDimensions: Map<AxisId, AxisTicksDimensions> = new Map(); // computed
   axesPositions: Map<AxisId, Dimensions> = new Map(); // computed

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,

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,17 +83,15 @@ 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;
 }
 
 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<SettingSpecProps> {
     animateData: true,
     showLegend: false,
     debug: false,
-    baseThemeType: BaseThemeTypes.Light,
     tooltip: {
       type: DEFAULT_TOOLTIP_TYPE,
       snap: DEFAULT_TOOLTIP_SNAP,

src/utils/themes/theme.ts

@@ -116,13 +116,6 @@ export interface Theme {
 
 export type PartialTheme = RecursivePartial<Theme>;
 
-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;

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)
       <Chart className={className}>
         <Settings
           theme={theme}
-          baseThemeType={darkmode ? 'dark' : 'light'}
+          baseTheme={darkmode ? DARK_THEME : LIGHT_THEME}
           debug={boolean('debug', false)}
           showLegend={true}
           legendPosition={Position.Right}
@@ -455,12 +455,7 @@ storiesOf('Stylings', module)
 
     return (
       <Chart className="story-chart">
-        <Settings
-          showLegend
-          theme={customPartialTheme}
-          baseThemeType={BaseThemeTypes.Light}
-          legendPosition={Position.Right}
-        />
+        <Settings showLegend theme={customPartialTheme} baseTheme={LIGHT_THEME} legendPosition={Position.Right} />
         <Axis id={getAxisId('bottom')} position={Position.Bottom} title="Bottom axis" showOverlappingTicks={true} />
         <Axis
           id={getAxisId('left2')}