feat: update baseThemes

elastic · Jun 2, 2020 · 36baf2e · nickofthyme · Jun 3, 2020 · rshen91
1 parent 9bb1e8e
commit 36baf2e
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 12 deletions.
diff --git a/api/charts.api.md b/api/charts.api.md
@@ -178,7 +178,7 @@ export interface AxisStyle {
 
 // Warning: (ae-missing-release-tag) "BackgroundStyles" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public
 export interface BackgroundStyles {
     // (undocumented)
     color: string;
@@ -1277,8 +1277,6 @@ export const Settings: React.FunctionComponent<SettingsSpecProps>;
 export interface SettingsSpec extends Spec {
     // (undocumented)
     animateData: boolean;
-    // (undocumented)
-    backgroundColor?: string;
     baseTheme?: Theme;
     brushAxis?: BrushAxis;
     // (undocumented)
@@ -1413,7 +1411,6 @@ export interface Theme {
     areaSeriesStyle: AreaSeriesStyle;
     // (undocumented)
     axes: AxisConfig;
-    // (undocumented)
     background: BackgroundStyles;
     barSeriesStyle: BarSeriesStyle;
     bubbleSeriesStyle: BubbleSeriesStyle;

diff --git a/src/chart_types/partition_chart/layout/config/config.ts b/src/chart_types/partition_chart/layout/config/config.ts
@@ -243,7 +243,7 @@ export const configMetadata = {
   },
 
   // other
-  // backgroundColor: { dflt: '#ffffff', type: 'color' },
+  backgroundColor: { dflt: '#ffffff', type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
   sectorLineStroke: { dflt: 'white', type: 'string' },
 };

diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx
@@ -331,7 +331,6 @@ export interface SettingsSpec extends Spec {
    * @defaultValue 2
    */
   minBrushDelta?: number;
-  backgroundColor?: string;
 }
 
 export type DefaultSettingsProps =

diff --git a/src/utils/themes/theme.ts b/src/utils/themes/theme.ts
@@ -123,6 +123,9 @@ export interface ColorConfig {
   vizColors: Color[];
   defaultVizColor: Color;
 }
+/**
+ * This is used to coordinate adequate contrast of the text in partition and treemap charts.
+ */
 export interface BackgroundStyles {
   color: string;
 }
@@ -200,6 +203,10 @@ export interface Theme {
    * value from 1 to 100
    */
   markSizeRatio?: number;
+  /**
+   * The background allows the consumer to provide a color of the background container of the chart.
+   * This can then be used to calculate the contrast of the text for partition charts.
+   */
   background: BackgroundStyles;
 }
 

diff --git a/stories/bar/1_basic.tsx b/stories/bar/1_basic.tsx
@@ -19,7 +19,7 @@
 import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { BarSeries, Chart, ScaleType } from '../../src';
+import { BarSeries, Chart, ScaleType, Settings, DARK_THEME, LIGHT_THEME } from '../../src';
 
 export const Example = () => {
   const darkmode = boolean('darkmode', false);
@@ -36,6 +36,7 @@ export const Example = () => {
   const specId = toggleSpec ? 'bars1' : 'bars2';
   return (
     <Chart className={className}>
+      <Settings baseTheme={darkmode ? DARK_THEME : LIGHT_THEME} />
       <BarSeries
         id={specId}
         name="Simple bar series"

diff --git a/stories/bar/3_with_axis.tsx b/stories/bar/3_with_axis.tsx
@@ -24,10 +24,9 @@ import { Axis, BarSeries, Chart, DARK_THEME, LIGHT_THEME, Position, ScaleType, S
 export const Example = () => {
   const darkmode = boolean('darkmode', false);
   const className = darkmode ? 'story-chart-dark' : 'story-chart';
-  const defaultTheme = darkmode ? DARK_THEME : LIGHT_THEME;
   return (
     <Chart className={className}>
-      <Settings theme={defaultTheme} />
+      <Settings baseTheme={darkmode ? DARK_THEME : LIGHT_THEME} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks={true} />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 

diff --git a/stories/interactions/14_crosshair_time.tsx b/stories/interactions/14_crosshair_time.tsx
@@ -67,7 +67,12 @@ export const Example = () => {
 
   return (
     <Chart className={className}>
-      <Settings debug={boolean('debug', false)} tooltip={tooltipProps} theme={defaultTheme} rotation={chartRotation} />
+      <Settings
+        debug={boolean('debug', false)}
+        tooltip={tooltipProps}
+        baseTheme={defaultTheme}
+        rotation={chartRotation}
+      />
       <Axis
         id="bottom"
         position={Position.Bottom}

diff --git a/stories/sunburst/29_custom_stroke.tsx b/stories/sunburst/29_custom_stroke.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License. */
 
-import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../src';
+import { Chart, Datum, Partition, PartitionLayout, Settings, DARK_THEME } from '../../src';
 import { mocks } from '../../src/mocks/hierarchical/index';
 import { config } from '../../src/chart_types/partition_chart/layout/config/config';
 import React from 'react';
@@ -31,7 +31,7 @@ export const Example = () => {
   };
   return (
     <Chart className="story-chart-dark">
-      <Settings theme={partialCustomTheme} />
+      <Settings baseTheme={DARK_THEME} theme={partialCustomTheme} />
       <Partition
         id="spec_1"
         data={mocks.manyPie}