github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Kevin Delemme 2023-09-29 10:41:44 -04:00 • committed by GitHub
parent 67895dbb6b
commit 2714e3e221
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

9
x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx
View file

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

5
x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx
View file

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

27
x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx
View file

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