[Uptime] Fix charts dark theme (#69748)

Author: shahzad31

x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx

@@ -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"

x-pack/plugins/uptime/public/components/common/charts/monitor_bar_series.tsx

@@ -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

x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx

@@ -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', {

x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx

@@ -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} />;
 };