From e1228f32d15baf9e6f0c15ff463bc9743504bd47 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 20 Jan 2025 16:36:05 +0100 Subject: [PATCH] docs: update docs usages of palette functions to use hooks instead - this fixes some stale palette value outputs that didn't update between theme changes yet --- .../color_palette/color_palette_custom.js | 19 +- .../color_picker/color_palette_display.js | 11 +- .../src-docs/src/views/combo_box/colors.js | 17 +- .../src/views/combo_box/render_option.js | 21 +- .../src/views/elastic_charts/pie_alts.tsx | 19 +- .../src/views/elastic_charts/theming.tsx | 2 +- .../elastic_charts/theming_categorical.tsx | 7 +- .../src/views/elastic_charts/treemap.tsx | 4 +- .../views/facet/facet_layout_horizontal.js | 16 +- .../views/timeline/timeline_item_event.tsx | 4 +- .../docs/components/display/timeline.mdx | 4 +- .../docs/components/forms/color_selection.mdx | 22 ++- .../docs/components/forms/combo_box.mdx | 36 ++-- .../forms/date_picker/date_picker.mdx | 18 +- .../docs/data_visualization/theming.mdx | 185 ++++++++++-------- .../data_visualization/types/categorical.tsx | 7 +- .../types/part_to_whole_comparisons.mdx | 4 +- .../data_visualization/types/pie_alts.tsx | 19 +- 18 files changed, 246 insertions(+), 169 deletions(-) diff --git a/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js b/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js index 3adf5608ce2..0e3ed2215eb 100644 --- a/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js +++ b/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js @@ -8,18 +8,23 @@ import { EuiSpacer, } from '../../../../src/components'; -import { euiPaletteColorBlind, colorPalette } from '../../../../src/services'; +import { + colorPalette, + useEuiPaletteColorBlind, +} from '../../../../src/services'; import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; -const customPalettes = [ - [euiPaletteColorBlind()[3]], - [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], - [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], -]; - export default () => { const [length, setLength] = useState(10); + const euiPaletteColorBlind = useEuiPaletteColorBlind(); + + const customPalettes = [ + [euiPaletteColorBlind[3]], + [euiPaletteColorBlind[3], euiPaletteColorBlind[4]], + [euiPaletteColorBlind[3], euiPaletteColorBlind[4]], + ]; + const onLengthChange = (e) => { setLength(e.currentTarget.value); }; diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js b/packages/eui/src-docs/src/views/color_picker/color_palette_display.js index 8c4c88625cd..cbf7fd37a4c 100644 --- a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js +++ b/packages/eui/src-docs/src/views/color_picker/color_palette_display.js @@ -1,7 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react'; import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; import { - euiPaletteColorBlind, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, @@ -11,6 +10,7 @@ import { euiPaletteWarm, euiPaletteGray, EUI_VIS_COLOR_STORE, + useEuiPaletteColorBlind, } from '../../../../src/services/color'; import { @@ -75,6 +75,8 @@ export default () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [size, setSize] = useState(sizes[1].value); + const euiPaletteColorBlind = useEuiPaletteColorBlind(); + const getPalettes = useCallback( () => paletteNames.map((paletteName, index) => { @@ -135,16 +137,13 @@ export default () => {

Fixed

- +

Gradient

 - +

Fixed with stops

diff --git a/packages/eui/src-docs/src/views/combo_box/colors.js b/packages/eui/src-docs/src/views/combo_box/colors.js index 21fe1e29277..e23c31aa738 100644 --- a/packages/eui/src-docs/src/views/combo_box/colors.js +++ b/packages/eui/src-docs/src/views/combo_box/colors.js @@ -1,11 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { EuiComboBox } from '../../../../src/components'; -import { euiPaletteColorBlindBehindText } from '../../../../src/services'; +import { useEuiPaletteColorBlindBehindText } from '../../../../src/services'; import { DisplayToggles } from '../form_controls/display_toggles'; -const visColorsBehindText = euiPaletteColorBlindBehindText(); -const optionsStatic = [ +const getOptionsStatic = (visColorsBehindText) => [ { label: 'Titan', 'data-test-subj': 'titanOption', @@ -51,9 +50,17 @@ const optionsStatic = [ ]; export default () => { - const [options, setOptions] = useState(optionsStatic); + const visColorsBehindText = useEuiPaletteColorBlindBehindText(); + + const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText)); const [selectedOptions, setSelected] = useState([options[2], options[5]]); + useEffect(() => { + const updatedOptions = getOptionsStatic(visColorsBehindText); + setOptions(updatedOptions); + setSelected([updatedOptions[2], updatedOptions[5]]); + }, [visColorsBehindText]); + const onChange = (selectedOptions) => { setSelected(selectedOptions); }; diff --git a/packages/eui/src-docs/src/views/combo_box/render_option.js b/packages/eui/src-docs/src/views/combo_box/render_option.js index 7f53e0554b5..8a6602cf848 100644 --- a/packages/eui/src-docs/src/views/combo_box/render_option.js +++ b/packages/eui/src-docs/src/views/combo_box/render_option.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { EuiComboBox, @@ -6,13 +6,11 @@ import { EuiHealth, } from '../../../../src/components'; import { - euiPaletteColorBlind, - euiPaletteColorBlindBehindText, + useEuiPaletteColorBlind, + useEuiPaletteColorBlindBehindText, } from '../../../../src/services'; -const visColors = euiPaletteColorBlind(); -const visColorsBehindText = euiPaletteColorBlindBehindText(); -const optionsStatic = [ +const getOptionsStatic = (visColorsBehindText) => [ { value: { size: 5, @@ -88,9 +86,18 @@ const optionsStatic = [ ]; export default () => { - const [options, setOptions] = useState(optionsStatic); + const visColors = useEuiPaletteColorBlind(); + const visColorsBehindText = useEuiPaletteColorBlindBehindText(); + + const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText)); const [selectedOptions, setSelected] = useState([options[2], options[5]]); + useEffect(() => { + const updatedOptions = getOptionsStatic(visColorsBehindText); + setOptions(updatedOptions); + setSelected([updatedOptions[2], updatedOptions[5]]); + }, [visColorsBehindText]); + const onChange = (selectedOptions) => { setSelected(selectedOptions); }; diff --git a/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx b/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx index 7dcb18e0eaa..3daf7994c9f 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx @@ -18,10 +18,10 @@ import { } from '../../../../src/components'; import { - euiPaletteForTemperature, - euiPaletteColorBlind, - euiPaletteGray, useEuiTheme, + useEuiPaletteColorBlind, + useEuiPaletteForTemperature, + useEuiPaletteGray, } from '../../../../src/services'; import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from './data'; @@ -40,15 +40,16 @@ export default () => { const [formattedData, setFormattedData] = useState(false); const [grouped, setGrouped] = useState(false); - let color = euiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( + const paletteTemperature0 = useEuiPaletteForTemperature(0); + const paletteTemperature3 = useEuiPaletteForTemperature(3); + const paletteGray = useEuiPaletteGray(5); + + let color = useEuiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( 18, 20 ); if (formatted) { - color = [ - euiPaletteForTemperature(0)[0], - euiPaletteGray(5)[isDarkTheme ? 4 : 0], - ]; + color = [paletteTemperature0[0], paletteGray[isDarkTheme ? 4 : 0]]; } let data; @@ -58,7 +59,7 @@ export default () => { ? orderBy(DAYS_OF_RAIN, ['precipitation', 'days'], ['desc', 'asc']) : DAYS_OF_RAIN; usesRainData = true; - color = euiPaletteForTemperature(3); + color = paletteTemperature3; } else { const DATASET = grouped ? GITHUB_DATASET_MOD : GITHUB_DATASET; data = orderBy(DATASET, 'issueType', 'asc'); diff --git a/packages/eui/src-docs/src/views/elastic_charts/theming.tsx b/packages/eui/src-docs/src/views/elastic_charts/theming.tsx index 8b1d619648a..fc06267e72f 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/theming.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/theming.tsx @@ -8,6 +8,7 @@ import { BarSeries, DataGenerator, } from '@elastic/charts'; +import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; import { EuiSpacer, @@ -29,7 +30,6 @@ import { EUI_VIS_COLOR_STORE, } from '../../../../src/services'; import { useChartBaseTheme } from './utils/use_chart_base_theme'; -import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; const getPaletteData = () => ({ euiPaletteColorBlind, diff --git a/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx b/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx index 6b4932d54a9..ba47cfe10f2 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx @@ -18,17 +18,18 @@ import { import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared'; import { - euiPaletteColorBlind, euiPaletteGreen, euiPaletteForStatus, euiPaletteGray, + useEuiPaletteColorBlind, } from '../../../../src/services'; import type { EuiPalette } from '../../../../src/services/color/eui_palettes'; import { useChartBaseTheme } from './utils/use_chart_base_theme'; export default () => { + const euiPaletteColorBlind = useEuiPaletteColorBlind(); const chartBaseTheme = useChartBaseTheme(); - const highlightColor = euiPaletteColorBlind()[2]; + const highlightColor = euiPaletteColorBlind[2]; const idPrefix = 'colorType'; @@ -246,7 +247,7 @@ export default () => { data={data} xAccessor={'x'} yAccessors={['y']} - color={[euiPaletteColorBlind()[index < 2 ? 0 : 1]]} + color={[euiPaletteColorBlind[index < 2 ? 0 : 1]]} lineSeriesStyle={{ line: { strokeWidth: isOdd ? 1 : 6, diff --git a/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx b/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx index 91b9732541a..24cab77b385 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx @@ -8,7 +8,7 @@ import { EuiTitle, EuiSpacer, } from '../../../../src/components'; -import { euiPaletteColorBlind } from '../../../../src/services'; +import { useEuiPaletteColorBlind } from '../../../../src/services'; import { GITHUB_DATASET_MOD } from './data'; import { useChartBaseTheme } from './utils/use_chart_base_theme'; @@ -20,7 +20,7 @@ export default () => { /** * Create a 3 rotation palette (one for each level) */ - const groupedPalette = euiPaletteColorBlind({ + const groupedPalette = useEuiPaletteColorBlind({ rotations: 3, order: 'group', sortBy: 'natural', diff --git a/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js b/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js index 5925855e719..911c803640c 100644 --- a/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js +++ b/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js @@ -7,7 +7,7 @@ import { EuiAvatar, } from '../../../../src/components'; -import { euiPaletteColorBlind } from '../../../../src/services'; +import { useEuiPaletteColorBlind } from '../../../../src/services'; export default () => { const [icon, setIcon] = useState(false); @@ -16,6 +16,8 @@ export default () => { const [loading, setLoading] = useState(false); const [selectedOptionId, setSelectedOptionId] = useState(undefined); + const euiPaletteColorBlind = useEuiPaletteColorBlind(); + const facet0Clicked = (id) => { setIcon(false); setDisabled(false); @@ -65,42 +67,42 @@ export default () => { id: 'facetHorizontal0', label: 'Simple, no icon', quantity: 6, - iconColor: euiPaletteColorBlind()[0], + iconColor: euiPaletteColorBlind[0], onClick: facet0Clicked, }, { id: 'facetHorizontal1', label: 'Label or color indicator', quantity: 60, - iconColor: euiPaletteColorBlind()[1], + iconColor: euiPaletteColorBlind[1], onClick: facet1Clicked, }, { id: 'facetHorizontal2', label: 'Disable all others', quantity: 600, - iconColor: euiPaletteColorBlind()[2], + iconColor: euiPaletteColorBlind[2], onClick: facet2Clicked, }, { id: 'facetHorizontal3', label: 'Avatars instead of icons', quantity: 60, - iconColor: euiPaletteColorBlind()[3], + iconColor: euiPaletteColorBlind[3], onClick: facet3Clicked, }, { id: 'facetHorizontal4', label: 'Show all as loading', quantity: 6, - iconColor: euiPaletteColorBlind()[4], + iconColor: euiPaletteColorBlind[4], onClick: facet4Clicked, }, { id: 'facetHorizontal5', label: 'Just here to show truncation of really long labels', quantity: 0, - iconColor: euiPaletteColorBlind()[5], + iconColor: euiPaletteColorBlind[5], }, ]; diff --git a/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx b/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx index 1be20e290e7..48b2ead0e83 100644 --- a/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx @@ -19,7 +19,7 @@ import { import { useGeneratedHtmlId, - euiPaletteColorBlindBehindText, + useEuiPaletteColorBlindBehindText, } from '../../../../src/services'; export default () => { @@ -33,7 +33,7 @@ export default () => { // We could use the `euiPaletteColorBlind` for coloring the avatars // But because we're placing an icon on top of these colors // The `euiPaletteColorBlindBehindText` is a better choice to ensure better contrast - const colorBlindBehindText = euiPaletteColorBlindBehindText({ + const colorBlindBehindText = useEuiPaletteColorBlindBehindText({ sortBy: 'natural', }); diff --git a/packages/website/docs/components/display/timeline.mdx b/packages/website/docs/components/display/timeline.mdx index 59d829569f6..ba5ee328047 100644 --- a/packages/website/docs/components/display/timeline.mdx +++ b/packages/website/docs/components/display/timeline.mdx @@ -114,7 +114,7 @@ import { EuiHorizontalRule, EuiTimeline, useGeneratedHtmlId, - euiPaletteColorBlindBehindText, + useEuiPaletteColorBlindBehindText, } from '@elastic/eui'; export default () => { @@ -128,7 +128,7 @@ export default () => { // We could use the `euiPaletteColorBlind` for coloring the avatars // But because we're placing an icon on top of these colors // The `euiPaletteColorBlindBehindText` is a better choice to ensure better contrast - const colorBlindBehindText = euiPaletteColorBlindBehindText({ + const colorBlindBehindText = useEuiPaletteColorBlindBehindText({ sortBy: 'natural', }); diff --git a/packages/website/docs/components/forms/color_selection.mdx b/packages/website/docs/components/forms/color_selection.mdx index 02d57a1f8c4..9b7f6aa7f02 100644 --- a/packages/website/docs/components/forms/color_selection.mdx +++ b/packages/website/docs/components/forms/color_selection.mdx @@ -48,7 +48,9 @@ import { EuiCode, EuiColorPalettePicker, EuiFlexGroup + EUI_VIS_COLOR_STORE } from '@elastic/eui'; +import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; const getPalettes = (appendTitles) => [ { @@ -143,7 +145,21 @@ const AppendedTitleText = ({ label }) => ( export default () => { const [selectionDisplay, setSelectionDisplay] = useState(false); const [showAppendedTitles, setShowAppendedTitles] = useState(false); - const [pallette, setPallette] = useState('pallette_1'); + const [palettes, setPalettes] = useState(getPalettes()); + const [selectedPalette, setSelectedPalette] = useState('palette_1'); + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); return ( <> @@ -171,8 +187,8 @@ export default () => { diff --git a/packages/website/docs/components/forms/combo_box.mdx b/packages/website/docs/components/forms/combo_box.mdx index eb094b2ed3e..ce27ec68b9b 100644 --- a/packages/website/docs/components/forms/combo_box.mdx +++ b/packages/website/docs/components/forms/combo_box.mdx @@ -495,11 +495,10 @@ export default () => { Useful for visualization or tagging systems. You can also pass a color in your option list. The color can be a hex value (like `#000`) or any other named color value accepted by the [**EuiBadge**](/docs/display/badge) component. ```tsx interactive -import React, { useState } from 'react'; -import { EuiComboBox, euiPaletteColorBlindBehindText } from '@elastic/eui'; +import React, { useState, useEffect } from 'react'; +import { EuiComboBox, useEuiPaletteColorBlindBehindText } from '@elastic/eui'; -const visColorsBehindText = euiPaletteColorBlindBehindText(); -const optionsStatic = [ +const getOptionsStatic = (visColorsBehindText) => [ { label: 'Titan', 'data-test-subj': 'titanOption', @@ -545,9 +544,17 @@ const optionsStatic = [ ]; export default () => { - const [options, setOptions] = useState(optionsStatic); + const visColorsBehindText = useEuiPaletteColorBlindBehindText(); + + const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText)); const [selectedOptions, setSelected] = useState([options[2], options[5]]); + useEffect(() => { + const updatedOptions = getOptionsStatic(visColorsBehindText); + setOptions(updatedOptions); + setSelected([updatedOptions[2], updatedOptions[5]]); + }, [visColorsBehindText]); + const onChange = (selectedOptions) => { setSelected(selectedOptions); }; @@ -689,13 +696,11 @@ import { EuiComboBox, EuiHighlight, EuiHealth, - euiPaletteColorBlind, - euiPaletteColorBlindBehindText, + useEuiPaletteColorBlind, + useEuiPaletteColorBlindBehindText, } from '@elastic/eui'; -const visColors = euiPaletteColorBlind(); -const visColorsBehindText = euiPaletteColorBlindBehindText(); -const optionsStatic = [ +const getOptionsStatic = (visColorsBehindText) => [ { value: { size: 5, @@ -771,9 +776,18 @@ const optionsStatic = [ ]; export default () => { - const [options, setOptions] = useState(optionsStatic); + const visColors = useEuiPaletteColorBlind(); + const visColorsBehindText = useEuiPaletteColorBlindBehindText(); + + const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText)); const [selectedOptions, setSelected] = useState([options[2], options[5]]); + useEffect(() => { + const updatedOptions = getOptionsStatic(visColorsBehindText); + setOptions(updatedOptions); + setSelected([updatedOptions[2], updatedOptions[5]]); + }, [visColorsBehindText]); + const onChange = (selectedOptions) => { setSelected(selectedOptions); }; diff --git a/packages/website/docs/components/forms/date_picker/date_picker.mdx b/packages/website/docs/components/forms/date_picker/date_picker.mdx index 7f5a3d3d266..329967cb2d5 100644 --- a/packages/website/docs/components/forms/date_picker/date_picker.mdx +++ b/packages/website/docs/components/forms/date_picker/date_picker.mdx @@ -533,21 +533,21 @@ import { css } from '@emotion/css'; ```tsx interactive import React, { useState } from 'react'; - import { EuiDatePicker, EuiFormRow, EuiSpacer } from '@elastic/eui'; + import { EuiDatePicker, EuiFormRow, EuiSpacer, useEuiPaletteColorBlind } from '@elastic/eui'; import moment from 'moment'; import { css } from '@emotion/css'; // Generates a vanilla JS className - const visColors = euiPaletteColorBlind(); - const backgroundCss = css` - background-color: ${visColors[3]}; - `; - const outlineCss = css` - outline: solid 2px ${visColors[3]}; - `; - export default () => { const [startDate, setStartDate] = useState(moment()); + const visColors = useEuiPaletteColorBlind(); + const backgroundCss = css` + background-color: ${visColors[3]}; + `; + const outlineCss = css` + outline: solid 2px ${visColors[3]}; + `; + const handleChange = (date) => { setStartDate(date); }; diff --git a/packages/website/docs/data_visualization/theming.mdx b/packages/website/docs/data_visualization/theming.mdx index c965e0f9fa1..f1db8ededcf 100644 --- a/packages/website/docs/data_visualization/theming.mdx +++ b/packages/website/docs/data_visualization/theming.mdx @@ -73,6 +73,7 @@ You'll find an example of these in the demo below. euiPaletteRed, euiPaletteGreen, euiPaletteGray, + EUI_VIS_COLOR_STORE } from '@elastic/eui'; import { Chart, @@ -82,20 +83,22 @@ You'll find an example of these in the demo below. BarSeries, DataGenerator, } from '@elastic/charts'; - - const paletteData = { - euiPaletteColorBlind, - euiPaletteForStatus, - euiPaletteForTemperature, - euiPaletteComplementary, - euiPaletteRed, - euiPaletteGreen, - euiPaletteCool, - euiPaletteWarm, - euiPaletteGray, - }; - - const palettes = Object.entries(paletteData).map(([paletteName, palette]) => { + import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; + + const getPaletteData = () => ({ + euiPaletteColorBlind, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteComplementary, + euiPaletteRed, + euiPaletteGreen, + euiPaletteCool, + euiPaletteWarm, + euiPaletteGray, +}); + +const getPalettes = () => + Object.entries(getPaletteData()).map(([paletteName, palette]) => { return { value: paletteName, title: paletteName, @@ -107,75 +110,95 @@ You'll find an example of these in the demo below. }; }); - export default () => { - const chartBaseTheme = useChartBaseTheme(); - - const [barPalette, setBarPalette] = useState('euiPaletteColorBlind'); - - /** - * Create data - */ - const dg = new DataGenerator(); - const data1 = dg.generateGroupedSeries(20, 1); - const data2 = dg.generateGroupedSeries(20, 5); - - const themeOverrides = - barPalette !== 'euiPaletteColorBlind' - ? [ - { - colors: { - vizColors: paletteData[barPalette as keyof typeof paletteData](5), - }, +export default () => { + const chartBaseTheme = useChartBaseTheme(); + + const [palettes, setPalettes] = useState(getPalettes()); + const [barPalette, setBarPalette] = useState('euiPaletteColorBlind'); + + const paletteData = useMemo( + () => getPaletteData(), + // eslint-disable-next-line react-hooks/exhaustive-deps + [palettes] + ); + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); + + /** + * Create data + */ + const dg = new DataGenerator(); + const data1 = dg.generateGroupedSeries(20, 1); + const data2 = dg.generateGroupedSeries(20, 5); + + const themeOverrides = + barPalette !== 'euiPaletteColorBlind' + ? [ + { + colors: { + vizColors: paletteData[barPalette as keyof typeof paletteData](5), }, - ] - : []; - - return ( - <> - - - - - - Number(d).toFixed(2)} + }, + ] + : []; + + return ( + <> + + + + + + Number(d).toFixed(2)} + /> + + + + + - - - - - - - - - ); - }; + + + + ); +}; ``` diff --git a/packages/website/docs/data_visualization/types/categorical.tsx b/packages/website/docs/data_visualization/types/categorical.tsx index 6bb6001d75f..76131c99b6c 100644 --- a/packages/website/docs/data_visualization/types/categorical.tsx +++ b/packages/website/docs/data_visualization/types/categorical.tsx @@ -14,18 +14,19 @@ import { EuiRadioGroup, EuiIcon, EuiTitle, - euiPaletteColorBlind, euiPaletteGreen, euiPaletteForStatus, euiPaletteGray, + useEuiPaletteColorBlind, } from '@elastic/eui'; import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared'; import { useChartBaseTheme } from '../use_chart_base_theme'; export const Categorical = () => { + const euiPaletteColorBlind = useEuiPaletteColorBlind(); const chartBaseTheme = useChartBaseTheme(); - const highlightColor = euiPaletteColorBlind()[2]; + const highlightColor = euiPaletteColorBlind[2]; const idPrefix = 'colorType'; @@ -245,7 +246,7 @@ export const Categorical = () => { data={data} xAccessor={'x'} yAccessors={['y']} - color={[euiPaletteColorBlind()[index < 2 ? 0 : 1]]} + color={[euiPaletteColorBlind[index < 2 ? 0 : 1]]} lineSeriesStyle={{ line: { strokeWidth: isOdd ? 1 : 6, diff --git a/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx index 5462b6e5250..61df6f2a1a6 100644 --- a/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx +++ b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx @@ -184,7 +184,7 @@ import { GITHUB_DATASET_MOD } from '../data'; EuiFlexItem, EuiTitle, EuiSpacer, - euiPaletteColorBlind, + useEuiPaletteColorBlind, } from '@elastic/eui'; import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts'; @@ -197,7 +197,7 @@ import { GITHUB_DATASET_MOD } from '../data'; /** * Create a 3 rotation palette (one for each level) */ - const groupedPalette = euiPaletteColorBlind({ + const groupedPalette = useEuiPaletteColorBlind({ rotations: 3, order: 'group', sortBy: 'natural', diff --git a/packages/website/docs/data_visualization/types/pie_alts.tsx b/packages/website/docs/data_visualization/types/pie_alts.tsx index b918db9aca8..e778edfd6dd 100644 --- a/packages/website/docs/data_visualization/types/pie_alts.tsx +++ b/packages/website/docs/data_visualization/types/pie_alts.tsx @@ -15,10 +15,10 @@ import { EuiFlexItem, EuiCopy, EuiButton, - euiPaletteForTemperature, - euiPaletteColorBlind, - euiPaletteGray, useEuiTheme, + useEuiPaletteColorBlind, + useEuiPaletteForTemperature, + useEuiPaletteGray, } from '@elastic/eui'; import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from '../data'; @@ -37,15 +37,16 @@ export const PieAlts = () => { const [formattedData, setFormattedData] = useState(false); const [grouped, setGrouped] = useState(false); - let color = euiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( + const paletteTemperature0 = useEuiPaletteForTemperature(0); + const paletteTemperature3 = useEuiPaletteForTemperature(3); + const paletteGray = useEuiPaletteGray(5); + + let color = useEuiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( 18, 20 ); if (formatted) { - color = [ - euiPaletteForTemperature(0)[0], - euiPaletteGray(5)[isDarkTheme ? 4 : 0], - ]; + color = [paletteTemperature0[0], paletteGray[isDarkTheme ? 4 : 0]]; } let data; @@ -55,7 +56,7 @@ export const PieAlts = () => { ? orderBy(DAYS_OF_RAIN, ['precipitation', 'days'], ['desc', 'asc']) : DAYS_OF_RAIN; usesRainData = true; - color = euiPaletteForTemperature(3); + color = paletteTemperature3; } else { const DATASET = grouped ? GITHUB_DATASET_MOD : GITHUB_DATASET; data = orderBy(DATASET, 'issueType', 'asc');