[Uptime]Reduce chart height on monitor detail page (#83777)

* reduce chart height * update
elastic · Nov 20, 2020 · f64f16b · f64f16b
1 parent 38aedcc
commit f64f16b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx b/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx
@@ -27,6 +27,7 @@ import { ChartEmptyState } from './chart_empty_state';
 import { DurationAnomaliesBar } from './duration_line_bar_list';
 import { AnomalyRecords } from '../../../state/actions';
 import { UptimeThemeContext } from '../../../contexts';
+import { MONITOR_CHART_HEIGHT } from '../../monitor';
 
 interface DurationChartProps {
   /**
@@ -86,7 +87,7 @@ export const DurationChartComponent = ({
   };
 
   return (
-    <ChartWrapper height="400px" loading={loading}>
+    <ChartWrapper height={MONITOR_CHART_HEIGHT} loading={loading}>
       {hasLines ? (
         <Chart>
           <Settings

diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_charts.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_charts.tsx
@@ -12,6 +12,7 @@ import { MonitorDuration } from './monitor_duration/monitor_duration_container';
 interface MonitorChartsProps {
   monitorId: string;
 }
+export const MONITOR_CHART_HEIGHT = '248px';
 
 export const MonitorCharts = ({ monitorId }: MonitorChartsProps) => {
   return (
@@ -20,7 +21,7 @@ export const MonitorCharts = ({ monitorId }: MonitorChartsProps) => {
         <MonitorDuration monitorId={monitorId} />
       </EuiFlexItem>
       <EuiFlexItem>
-        <PingHistogram height="400px" isResponsive={false} />
+        <PingHistogram height={MONITOR_CHART_HEIGHT} isResponsive={false} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );