+
diff --git a/packages/osd-charts/src/components/chart_background.tsx b/packages/osd-charts/src/components/chart_background.tsx
new file mode 100644
index 00000000000..082b20e1044
--- /dev/null
+++ b/packages/osd-charts/src/components/chart_background.tsx
@@ -0,0 +1,53 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+import React from 'react';
+import { connect } from 'react-redux';
+import { getChartThemeSelector } from '../state/selectors/get_chart_theme';
+import { GlobalChartState } from '../state/chart_state';
+import { getInternalIsInitializedSelector } from '../state/selectors/get_internal_is_intialized';
+
+interface ChartBackgroundProps {
+ backgroundColor: string;
+}
+
+export class ChartBackgroundComponent extends React.Component
{
+ static displayName = 'ChartBackground';
+
+ constructor(props: ChartBackgroundProps) {
+ super(props);
+ }
+
+ render() {
+ const { backgroundColor } = this.props;
+ return ;
+ }
+}
+
+const mapStateToProps = (state: GlobalChartState): ChartBackgroundProps => {
+ if (!getInternalIsInitializedSelector(state)) {
+ return {
+ backgroundColor: 'transparent',
+ };
+ }
+ return {
+ backgroundColor: getChartThemeSelector(state).background.color,
+ };
+};
+
+/** @internal */
+export const ChartBackground = connect(mapStateToProps)(ChartBackgroundComponent);
diff --git a/packages/osd-charts/src/components/legend/_legend.scss b/packages/osd-charts/src/components/legend/_legend.scss
index fcb5d4671c3..d66e8b9c396 100644
--- a/packages/osd-charts/src/components/legend/_legend.scss
+++ b/packages/osd-charts/src/components/legend/_legend.scss
@@ -35,6 +35,7 @@
&--debug {
background: red;
+ position: relative;
}
.echLegendListContainer {
diff --git a/packages/osd-charts/src/geoms/types.ts b/packages/osd-charts/src/geoms/types.ts
index db30c9929fd..fa1bed611f8 100644
--- a/packages/osd-charts/src/geoms/types.ts
+++ b/packages/osd-charts/src/geoms/types.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License. */
-import { RgbObject } from '../chart_types/partition_chart/layout/utils/d3_utils';
+import { RgbObject } from '../chart_types/partition_chart/layout/utils/color_library_wrappers';
import { Radian } from '../chart_types/partition_chart/layout/types/geometry_types';
export interface Text {
text: string;
diff --git a/packages/osd-charts/src/mocks/hierarchical/palettes.ts b/packages/osd-charts/src/mocks/hierarchical/palettes.ts
index 62c478476e3..4e40d2f9e27 100644
--- a/packages/osd-charts/src/mocks/hierarchical/palettes.ts
+++ b/packages/osd-charts/src/mocks/hierarchical/palettes.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License. */
-import { RgbTuple } from '../../chart_types/partition_chart/layout/utils/d3_utils';
+import { RgbTuple } from '../../chart_types/partition_chart/layout/utils/color_library_wrappers';
// prettier-ignore
const CET2s: RgbTuple[] = [[46, 34, 235], [49, 32, 237], [52, 30, 238], [56, 29, 239], [59, 28, 240], [63, 27, 241], [66, 27, 242], [70, 27, 242], [73, 27, 243], [77, 28, 244], [80, 29, 244], [84, 30, 245], [87, 31, 245], [91, 32, 246], [94, 33, 246], [97, 35, 246], [100, 36, 247], [103, 38, 247], [106, 39, 248], [109, 41, 248], [112, 42, 248], [115, 44, 249], [118, 45, 249], [121, 47, 249], [123, 48, 250], [126, 49, 250], [129, 51, 250], [132, 52, 251], [135, 53, 251], [137, 54, 251], [140, 56, 251], [143, 57, 251], [146, 58, 252], [149, 59, 252], [152, 60, 252], [155, 60, 252], [158, 61, 252], [162, 62, 252], [165, 63, 252], [168, 63, 252], [171, 64, 252], [175, 65, 252], [178, 65, 252], [181, 66, 252], [185, 66, 252], [188, 66, 252], [191, 67, 252], [195, 67, 252], [198, 68, 252], [201, 68, 251], [204, 69, 251], [207, 69, 251], [211, 70, 251], [214, 70, 251], [217, 71, 250], [219, 72, 250], [222, 73, 250], [225, 74, 249], [227, 75, 249], [230, 76, 248], [232, 78, 247], [234, 79, 246], [236, 81, 245], [238, 83, 244], [240, 85, 243], [242, 88, 241], [243, 90, 240], [244, 93, 238], [245, 96, 236], [246, 99, 234], [247, 102, 232], [248, 105, 230], [249, 108, 227], [249, 111, 225], [250, 114, 223], [250, 117, 220], [251, 120, 217], [251, 123, 215], [252, 127, 212], [252, 130, 210], [252, 133, 207], [252, 136, 204], [252, 139, 201], [253, 141, 199], [253, 144, 196], [253, 147, 193], [253, 150, 190], [253, 153, 188], [253, 156, 185], [253, 158, 182], [253, 161, 179], [253, 164, 177], [253, 166, 174], [253, 169, 171], [253, 171, 168], [253, 174, 165], [252, 176, 162], [252, 179, 160], [252, 181, 157], [252, 184, 154], [252, 186, 151], [253, 188, 148], [253, 191, 145], [253, 193, 142], [253, 195, 139], [253, 198, 136], [253, 200, 133], [253, 202, 130], [253, 204, 127], [253, 207, 124], [253, 209, 120], [253, 211, 117], [253, 213, 114], [253, 215, 110], [253, 217, 107], [253, 219, 104], [253, 221, 100], [252, 223, 96], [252, 225, 93], [252, 227, 89], [251, 229, 85], [250, 231, 81], [250, 232, 77], [249, 234, 73], [248, 235, 69], [246, 236, 65], [245, 237, 61], [243, 238, 57], [242, 239, 54], [240, 239, 50], [238, 239, 46], [235, 239, 43], [233, 239, 40], [231, 239, 37], [228, 239, 35], [225, 238, 33], [223, 238, 31], [220, 237, 29], [217, 236, 27], [214, 235, 26], [211, 234, 25], [209, 233, 24], [206, 232, 24], [203, 231, 23], [200, 230, 22], [197, 229, 22], [194, 228, 21], [191, 227, 21], [188, 226, 21], [185, 225, 20], [182, 224, 20], [179, 223, 20], [176, 221, 19], [173, 220, 19], [170, 219, 19], [167, 218, 18], [164, 217, 18], [161, 216, 17], [158, 215, 17], [154, 214, 17], [151, 213, 16], [148, 211, 16], [145, 210, 16], [142, 209, 15], [139, 208, 15], [136, 207, 15], [132, 206, 14], [129, 205, 14], [126, 204, 14], [122, 202, 13], [119, 201, 13], [116, 200, 13], [112, 199, 13], [109, 198, 12], [105, 197, 12], [102, 196, 12], [98, 194, 12], [94, 193, 12], [91, 192, 12], [87, 191, 12], [83, 190, 13], [79, 188, 14], [76, 187, 15], [72, 186, 16], [68, 185, 18], [65, 183, 20], [62, 182, 22], [59, 181, 25], [56, 179, 27], [54, 178, 30], [52, 176, 34], [51, 175, 37], [50, 173, 40], [50, 172, 44], [50, 170, 48], [51, 168, 51], [52, 167, 55], [53, 165, 59], [54, 163, 63], [56, 161, 67], [57, 160, 71], [59, 158, 74], [60, 156, 78], [62, 154, 82], [63, 152, 86], [64, 150, 90], [66, 148, 93], [67, 147, 97], [67, 145, 101], [68, 143, 104], [69, 141, 108], [69, 139, 111], [69, 137, 115], [70, 135, 118], [70, 133, 122], [69, 131, 125], [69, 129, 129], [69, 128, 132], [68, 126, 135], [67, 124, 139], [67, 122, 142], [66, 120, 145], [64, 118, 149], [63, 116, 152], [62, 114, 155], [60, 112, 158], [59, 110, 162], [57, 108, 165], [56, 106, 168], [54, 104, 171], [53, 102, 174], [51, 100, 177], [50, 98, 180], [48, 96, 183], [47, 93, 185], [46, 91, 188], [45, 89, 191], [44, 86, 193], [43, 84, 196], [42, 81, 199], [41, 79, 201], [40, 76, 204], [40, 73, 206], [39, 70, 209], [38, 68, 211], [38, 65, 213], [37, 62, 216], [37, 59, 218], [37, 56, 220], [37, 53, 222], [37, 50, 224], [37, 47, 227], [38, 44, 228], [40, 41, 230], [42, 39, 232], [44, 36, 234],];
diff --git a/packages/osd-charts/src/state/selectors/get_settings_specs.ts b/packages/osd-charts/src/state/selectors/get_settings_specs.ts
index 20d5510f156..0cbefd8466a 100644
--- a/packages/osd-charts/src/state/selectors/get_settings_specs.ts
+++ b/packages/osd-charts/src/state/selectors/get_settings_specs.ts
@@ -20,7 +20,7 @@ import createCachedSelector from 're-reselect';
import { GlobalChartState } from '../chart_state';
import { ChartTypes } from '../../chart_types';
import { getSpecsFromStore } from '../utils';
-import { SettingsSpec, SpecTypes } from '../../specs/settings';
+import { SettingsSpec, SpecTypes, DEFAULT_SETTINGS_SPEC } from '../../specs/settings';
import { getChartIdSelector } from './get_chart_id';
const getSpecs = (state: GlobalChartState) => state.specs;
@@ -30,9 +30,9 @@ export const getSettingsSpecSelector = createCachedSelector(
[getSpecs],
(specs): SettingsSpec => {
const settingsSpecs = getSpecsFromStore(specs, ChartTypes.Global, SpecTypes.Settings);
- if (settingsSpecs.length > 1) {
- throw new Error('Multiple settings specs are configured on the same chart');
+ if (settingsSpecs.length === 1) {
+ return settingsSpecs[0];
}
- return settingsSpecs[0];
+ return DEFAULT_SETTINGS_SPEC;
},
)(getChartIdSelector);
diff --git a/packages/osd-charts/src/utils/chart_size.ts b/packages/osd-charts/src/utils/chart_size.ts
index 85894015633..1503582018c 100644
--- a/packages/osd-charts/src/utils/chart_size.ts
+++ b/packages/osd-charts/src/utils/chart_size.ts
@@ -25,7 +25,10 @@ export interface ChartSizeObject {
export type ChartSize = number | string | ChartSizeArray | ChartSizeObject;
/** @internal */
-export function getChartSize(size: ChartSize) {
+export function getChartSize(size?: ChartSize): ChartSizeObject {
+ if (size === undefined) {
+ return {};
+ }
if (Array.isArray(size)) {
return {
width: size[0] === undefined ? '100%' : size[0],
diff --git a/packages/osd-charts/src/utils/themes/dark_theme.ts b/packages/osd-charts/src/utils/themes/dark_theme.ts
index 14f7331ba08..834e846cde4 100644
--- a/packages/osd-charts/src/utils/themes/dark_theme.ts
+++ b/packages/osd-charts/src/utils/themes/dark_theme.ts
@@ -163,4 +163,7 @@ export const DARK_THEME: Theme = {
visible: true,
},
},
+ background: {
+ color: '#1D1E24', // $euiColorEmptyShade
+ },
};
diff --git a/packages/osd-charts/src/utils/themes/light_theme.ts b/packages/osd-charts/src/utils/themes/light_theme.ts
index 53e452b5789..b434763791b 100644
--- a/packages/osd-charts/src/utils/themes/light_theme.ts
+++ b/packages/osd-charts/src/utils/themes/light_theme.ts
@@ -162,4 +162,7 @@ export const LIGHT_THEME: Theme = {
visible: true,
},
},
+ background: {
+ color: '#FFFFFF', // $euiColorEmptyShade: #FFF !default;
+ },
};
diff --git a/packages/osd-charts/src/utils/themes/theme.ts b/packages/osd-charts/src/utils/themes/theme.ts
index 13537967928..e888da1ccdc 100644
--- a/packages/osd-charts/src/utils/themes/theme.ts
+++ b/packages/osd-charts/src/utils/themes/theme.ts
@@ -123,6 +123,17 @@ export interface ColorConfig {
vizColors: Color[];
defaultVizColor: Color;
}
+/**
+ * The background style applied to the chart.
+ * This is used to coordinate adequate contrast of the text in partition and treemap charts.
+ * @public
+ */
+export interface BackgroundStyle {
+ /**
+ * The background color
+ */
+ color: string;
+}
export interface LegendStyle {
/**
* Max width used for left/right legend
@@ -197,6 +208,11 @@ 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: BackgroundStyle;
}
export type PartialTheme = RecursivePartial;
diff --git a/packages/osd-charts/stories/bar/1_basic.tsx b/packages/osd-charts/stories/bar/1_basic.tsx
index c5b752d0ea1..84d5b54dea0 100644
--- a/packages/osd-charts/stories/bar/1_basic.tsx
+++ b/packages/osd-charts/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 (
+
{
const darkmode = boolean('darkmode', false);
const className = darkmode ? 'story-chart-dark' : 'story-chart';
- const defaultTheme = darkmode ? DARK_THEME : LIGHT_THEME;
return (
-
+
Number(d).toFixed(2)} />
diff --git a/packages/osd-charts/stories/interactions/14_crosshair_time.tsx b/packages/osd-charts/stories/interactions/14_crosshair_time.tsx
index 3189d96d538..5624bb6588c 100644
--- a/packages/osd-charts/stories/interactions/14_crosshair_time.tsx
+++ b/packages/osd-charts/stories/interactions/14_crosshair_time.tsx
@@ -67,7 +67,12 @@ export const Example = () => {
return (
-
+
{
+ const partialColorTheme: PartialTheme = {
+ background: {
+ color: color('Color of the background container', 'rgba(255, 255, 255, 1)'),
+ },
+ };
+ const invertTextColors = boolean('invert colors for lightness/darkness', true);
+ const toggleTextContrast = boolean('set text contrast to true or false', true);
+ return (
+
+
+ d.exportVal as number}
+ valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+ layers={[
+ {
+ groupByRollup: (d: Datum) => d.sitc1,
+ nodeLabel: (d: any) => productLookup[d].name,
+ shape: {
+ fillColor: (d: ShapeTreeNode) => {
+ return categoricalFillColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
+ },
+ },
+ },
+ {
+ groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),
+ nodeLabel: (d: any) => regionLookup[d].regionName,
+ shape: {
+ fillColor: (d: ShapeTreeNode) => {
+ return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
+ },
+ },
+ },
+ {
+ groupByRollup: (d: Datum) => d.dest,
+ nodeLabel: (d: any) => countryLookup[d].name,
+ shape: {
+ fillColor: (d: ShapeTreeNode) => {
+ return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d.parent.parent.sortIndex);
+ },
+ },
+ },
+ ]}
+ config={{
+ partitionLayout: PartitionLayout.sunburst,
+ linkLabel: {
+ maxCount: 0,
+ fontSize: 14,
+ },
+ fontFamily: 'Arial',
+ fillLabel: {
+ valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
+ fontStyle: 'italic',
+ textInvertible: invertTextColors,
+ textContrast: toggleTextContrast,
+ fontWeight: 900,
+ valueFont: {
+ fontFamily: 'Menlo',
+ fontStyle: 'normal',
+ fontWeight: 100,
+ },
+ },
+ margin: { top: 0, bottom: 0, left: 0, right: 0 },
+ minFontSize: 1,
+ idealFontSizeJump: 1.1,
+ outerSizeRatio: 1,
+ emptySizeRatio: 0,
+ circlePadding: 4,
+ backgroundColor: 'rgba(229,229,229,1)',
+ }}
+ />
+
+ );
+};
diff --git a/packages/osd-charts/stories/stylings/21_partition_labels.tsx b/packages/osd-charts/stories/stylings/21_partition_labels.tsx
new file mode 100644
index 00000000000..65d625290bd
--- /dev/null
+++ b/packages/osd-charts/stories/stylings/21_partition_labels.tsx
@@ -0,0 +1,53 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { Chart, Datum, Partition, Settings } from '../../src';
+import { mocks } from '../../src/mocks/hierarchical/index';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
+import React from 'react';
+import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
+import { color } from '@storybook/addon-knobs';
+
+export const Example = () => {
+ const partialCustomTheme = {
+ background: {
+ color: color('Change background container color', '#1c1c24'),
+ },
+ };
+ return (
+
+
+ d.exportVal as number}
+ valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+ layers={[
+ {
+ groupByRollup: (d: Datum) => d.sitc1,
+ nodeLabel: (d: Datum) => productLookup[d].name,
+ fillLabel: { textInvertible: true, textContrast: true },
+ shape: {
+ fillColor: indexInterpolatedFillColor(interpolatorCET2s),
+ },
+ },
+ ]}
+ />
+
+ );
+};
diff --git a/packages/osd-charts/stories/stylings/5_partial_custom_theme.tsx b/packages/osd-charts/stories/stylings/5_partial_custom_theme.tsx
index e61d8ca5361..62bec73a02c 100644
--- a/packages/osd-charts/stories/stylings/5_partial_custom_theme.tsx
+++ b/packages/osd-charts/stories/stylings/5_partial_custom_theme.tsx
@@ -33,6 +33,9 @@ export const Example = () => {
visible: true,
},
},
+ background: {
+ color: color('Change background container color', 'white'),
+ },
};
return (
diff --git a/packages/osd-charts/stories/stylings/stylings.stories.tsx b/packages/osd-charts/stories/stylings/stylings.stories.tsx
index 0b72de1a7b6..51c3503e7ec 100644
--- a/packages/osd-charts/stories/stylings/stylings.stories.tsx
+++ b/packages/osd-charts/stories/stylings/stylings.stories.tsx
@@ -34,7 +34,6 @@ export { Example as partialCustomThemeWithBaseTheme } from './6_partial_and_base
export { Example as multipleCustomPartialThemes } from './7_multiple_custom';
export { Example as customSeriesColorsViaColorsArray } from './8_custom_series_colors_array';
export { Example as customSeriesColorsViaAccessorFunction } from './9_custom_series_colors_function';
-
export { Example as customSeriesStylesBars } from './10_custom_bars';
export { Example as customSeriesStylesLines } from './11_custom_lines';
export { Example as customSeriesStylesArea } from './12_custom_area';
@@ -46,3 +45,5 @@ export { Example as styleAccessorOverrides } from './16_style_accessor';
export { Example as barSeriesColorVariant } from './17_bar_series_color_variant';
export { Example as lineSeriesColorVariant } from './18_line_series_color_variant';
export { Example as areaSeriesColorVariant } from './19_area_series_color_variant';
+export { Example as partitionBackground } from './20_partition_background';
+export { Example as partitionLabels } from './21_partition_labels';
diff --git a/packages/osd-charts/stories/sunburst/29_custom_stroke.tsx b/packages/osd-charts/stories/sunburst/29_custom_stroke.tsx
index d9c9df95b0f..fb8177f1bdc 100644
--- a/packages/osd-charts/stories/sunburst/29_custom_stroke.tsx
+++ b/packages/osd-charts/stories/sunburst/29_custom_stroke.tsx
@@ -16,35 +16,44 @@
* specific language governing permissions and limitations
* under the License. */
-import { Chart, Datum, Partition, PartitionLayout } 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';
import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
+import { color } from '@storybook/addon-knobs';
-export const Example = () => (
-
- d.exportVal as number}
- valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
- layers={[
- {
- groupByRollup: (d: Datum) => d.origin,
- nodeLabel: (d: Datum) => countryLookup[d].name,
- fillLabel: { textInvertible: true },
- shape: {
- fillColor: indexInterpolatedFillColor(interpolatorCET2s),
+export const Example = () => {
+ const partialCustomTheme = {
+ background: {
+ color: color('Change background container color', '#1c1c24'),
+ },
+ };
+ return (
+
+
+ d.exportVal as number}
+ valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+ layers={[
+ {
+ groupByRollup: (d: Datum) => d.origin,
+ nodeLabel: (d: Datum) => countryLookup[d].name,
+ fillLabel: { textInvertible: true },
+ shape: {
+ fillColor: indexInterpolatedFillColor(interpolatorCET2s),
+ },
},
- },
- ]}
- config={{
- partitionLayout: PartitionLayout.sunburst,
- linkLabel: { maxCount: 15, textColor: 'white' },
- sectorLineStroke: 'rgb(26, 27, 32)', // same as the dark theme
- sectorLineWidth: 1.2,
- }}
- />
-
-);
+ ]}
+ config={{
+ partitionLayout: PartitionLayout.sunburst,
+ linkLabel: { maxCount: 15, textColor: 'white' },
+ sectorLineStroke: 'rgb(26, 27, 32)', // same as the dark theme
+ sectorLineWidth: 1.2,
+ }}
+ />
+
+ );
+};
diff --git a/packages/osd-charts/stories/treemap/5_multicolor.tsx b/packages/osd-charts/stories/treemap/5_multicolor.tsx
index aed0c30a307..c8596974a7f 100644
--- a/packages/osd-charts/stories/treemap/5_multicolor.tsx
+++ b/packages/osd-charts/stories/treemap/5_multicolor.tsx
@@ -68,7 +68,7 @@ export const Example = () => (
nodeLabel: (d: any) => countryLookup[d].name,
fillLabel: {
valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
- textColor: 'rgb(60,60,60,1)',
+ textColor: 'rgba(60,60,60,1)',
textInvertible: false,
fontWeight: 100,
fontStyle: 'normal',
diff --git a/packages/osd-charts/stories/treemap/6_custom_style.tsx b/packages/osd-charts/stories/treemap/6_custom_style.tsx
index 88ddd3901b0..6d78fba020d 100644
--- a/packages/osd-charts/stories/treemap/6_custom_style.tsx
+++ b/packages/osd-charts/stories/treemap/6_custom_style.tsx
@@ -65,7 +65,7 @@ export const Example = () => (
nodeLabel: (d: any) => countryLookup[d].name,
fillLabel: {
valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
- textColor: 'rgb(60,60,60,1)',
+ textColor: 'rgba(60,60,60,1)',
textInvertible: false,
fontWeight: 600,
fontStyle: 'normal',
diff --git a/packages/osd-charts/yarn.lock b/packages/osd-charts/yarn.lock
index 7dd4062db00..6153a91fae0 100644
--- a/packages/osd-charts/yarn.lock
+++ b/packages/osd-charts/yarn.lock
@@ -4798,16 +4798,35 @@
dependencies:
"@types/node" "*"
+"@types/chroma-js@^2.0.0":
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.0.0.tgz#b0fc98c8625d963f14e8138e0a7961103303ab22"
+ integrity sha512-iomunXsXjDxhm2y1OeJt8NwmgC7RyNkPAOddlYVGsbGoX8+1jYt84SG4/tf6RWcwzROLx1kPXPE95by1s+ebIg==
+
"@types/classnames@^2.2.7":
version "2.2.9"
resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==
-"@types/color-name@^1.1.1":
+"@types/color-convert@*":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d"
+ integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==
+ dependencies:
+ "@types/color-name" "*"
+
+"@types/color-name@*", "@types/color-name@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+"@types/color@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.1.tgz#2900490ed04da8116c5058cd5dba3572d5a25071"
+ integrity sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==
+ dependencies:
+ "@types/color-convert" "*"
+
"@types/core-js@^2.5.2":
version "2.5.2"
resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-2.5.2.tgz#d4c25420044d4a5b65e00a82fc04b7824b62691f"
@@ -7238,6 +7257,13 @@ chownr@^1.0.1, chownr@^1.1.1, chownr@^1.1.2, chownr@^1.1.3:
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+chroma-js@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.0.tgz#c0be48a21fe797ef8965608c1c4f911ef2da49d5"
+ integrity sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==
+ dependencies:
+ cross-env "^6.0.3"
+
chrome-trace-event@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -8049,6 +8075,13 @@ create-react-context@^0.3.0:
gud "^1.0.0"
warning "^4.0.3"
+cross-env@^6.0.3:
+ version "6.0.3"
+ resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
+ integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
+ dependencies:
+ cross-spawn "^7.0.0"
+
cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
version "6.0.5"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"