chore(slo): Improve SLO chart (elastic#167521)

kdelemme · Sep 29, 2023 · 2714e3e · 2714e3e
1 parent 67895db
commit 2714e3e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx
@@ -17,11 +17,11 @@ import {
   Tooltip,
   TooltipType,
 } from '@elastic/charts';
-import React, { useRef } from 'react';
 import { EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui';
 import numeral from '@elastic/numeral';
-import moment from 'moment';
 import { useActiveCursor } from '@kbn/charts-plugin/public';
+import moment from 'moment';
+import React, { useRef } from 'react';
 
 import { ChartData } from '../../../typings';
 import { useKibana } from '../../../utils/kibana_react';
@@ -83,6 +83,11 @@ export function WideChart({ chart, data, id, isLoading, state }: Props) {
         ticks={4}
         position={Position.Left}
         tickFormat={(d) => numeral(d).format(percentFormat)}
+        domain={{
+          fit: true,
+          min: NaN,
+          max: NaN,
+        }}
       />
       <ChartComponent
         color={color}

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx
@@ -134,6 +134,11 @@ export function DataPreviewChart() {
                 ticks={5}
                 position={Position.Left}
                 tickFormat={(d) => numeral(d).format(percentFormat)}
+                domain={{
+                  fit: true,
+                  min: NaN,
+                  max: NaN,
+                }}
               />
 
               <Axis

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx
@@ -46,20 +46,6 @@ export function SloSparkline({ chart, data, id, isLoading, state }: Props) {
 
   const color = state === 'error' ? euiTheme.colors.danger : euiTheme.colors.success;
   const ChartComponent = chart === 'area' ? AreaSeries : LineSeries;
-  const LineAxisComponent =
-    chart === 'line' ? (
-      <Axis
-        id="axis"
-        hide
-        domain={{
-          min: 0,
-          max: 1,
-        }}
-        gridLine={{
-          visible: false,
-        }}
-      />
-    ) : null;
 
   if (isLoading) {
     return <EuiLoadingChart style={{ minWidth: 60, justifyContent: 'center' }} size="m" mono />;
@@ -73,7 +59,18 @@ export function SloSparkline({ chart, data, id, isLoading, state }: Props) {
         theme={[theme, EUI_SPARKLINE_THEME_PARTIAL]}
       />
       <Tooltip type={TooltipType.None} />
-      {LineAxisComponent}
+      <Axis
+        id="axis"
+        hide
+        domain={{
+          min: NaN,
+          max: NaN,
+          fit: true,
+        }}
+        gridLine={{
+          visible: false,
+        }}
+      />
       <ChartComponent
         color={color}
         data={data}