[Uptime] Fix charts dark theme (#69748)
This commit is contained in:
parent
94321ccdd0
commit
904be0249b
|
@ -4,7 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import moment from 'moment';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
@ -26,6 +26,7 @@ import { getTickFormat } from './get_tick_format';
|
|||
import { ChartEmptyState } from './chart_empty_state';
|
||||
import { DurationAnomaliesBar } from './duration_line_bar_list';
|
||||
import { AnomalyRecords } from '../../../state/actions';
|
||||
import { UptimeThemeContext } from '../../../contexts';
|
||||
|
||||
interface DurationChartProps {
|
||||
/**
|
||||
|
@ -59,6 +60,8 @@ export const DurationChartComponent = ({
|
|||
|
||||
const [hiddenLegends, setHiddenLegends] = useState<string[]>([]);
|
||||
|
||||
const { chartTheme } = useContext(UptimeThemeContext);
|
||||
|
||||
const onBrushEnd: BrushEndListener = ({ x }) => {
|
||||
if (!x) {
|
||||
return;
|
||||
|
@ -93,6 +96,7 @@ export const DurationChartComponent = ({
|
|||
legendPosition={Position.Bottom}
|
||||
onBrushEnd={onBrushEnd}
|
||||
onLegendItemClick={legendToggleVisibility}
|
||||
{...chartTheme}
|
||||
/>
|
||||
<Axis
|
||||
id="bottom"
|
||||
|
|
|
@ -39,6 +39,7 @@ export interface MonitorBarSeriesProps {
|
|||
export const MonitorBarSeries = ({ histogramSeries }: MonitorBarSeriesProps) => {
|
||||
const {
|
||||
colors: { danger },
|
||||
chartTheme,
|
||||
} = useContext(UptimeThemeContext);
|
||||
const [getUrlParams, updateUrlParams] = useUrlParams();
|
||||
const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
|
||||
|
@ -62,6 +63,7 @@ export const MonitorBarSeries = ({ histogramSeries }: MonitorBarSeriesProps) =>
|
|||
<Settings
|
||||
xDomain={{ min: absoluteDateRangeStart, max: absoluteDateRangeEnd }}
|
||||
onBrushEnd={onBrushEnd}
|
||||
{...chartTheme}
|
||||
/>
|
||||
<Axis
|
||||
hide
|
||||
|
|
|
@ -60,6 +60,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
|
|||
}) => {
|
||||
const {
|
||||
colors: { danger, gray },
|
||||
chartTheme,
|
||||
} = useContext(UptimeThemeContext);
|
||||
|
||||
const [, updateUrlParams] = useUrlParams();
|
||||
|
@ -128,6 +129,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
|
|||
}}
|
||||
showLegend={false}
|
||||
onBrushEnd={onBrushEnd}
|
||||
{...chartTheme}
|
||||
/>
|
||||
<Axis
|
||||
id={i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
|
||||
|
|
|
@ -7,10 +7,16 @@
|
|||
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
|
||||
import React, { createContext, useMemo } from 'react';
|
||||
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
|
||||
import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts';
|
||||
import { UptimeAppColors } from '../uptime_app';
|
||||
|
||||
export interface UptimeThemeContextValues {
|
||||
colors: UptimeAppColors;
|
||||
chartTheme: {
|
||||
baseTheme?: Theme;
|
||||
theme?: PartialTheme;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -26,6 +32,10 @@ const defaultContext: UptimeThemeContextValues = {
|
|||
warning: euiLightVars.euiColorWarning,
|
||||
gray: euiLightVars.euiColorLightShade,
|
||||
},
|
||||
chartTheme: {
|
||||
baseTheme: LIGHT_THEME,
|
||||
theme: EUI_CHARTS_THEME_LIGHT.theme,
|
||||
},
|
||||
};
|
||||
|
||||
export const UptimeThemeContext = createContext(defaultContext);
|
||||
|
@ -58,8 +68,12 @@ export const UptimeThemeContextProvider: React.FC<ThemeContextProps> = ({ darkMo
|
|||
const value = useMemo(() => {
|
||||
return {
|
||||
colors,
|
||||
chartTheme: {
|
||||
baseTheme: darkMode ? DARK_THEME : LIGHT_THEME,
|
||||
theme: darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme,
|
||||
},
|
||||
};
|
||||
}, [colors]);
|
||||
}, [colors, darkMode]);
|
||||
|
||||
return <UptimeThemeContext.Provider value={value} children={children} />;
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue