{body}
} /> +); diff --git a/x-pack/legacy/plugins/infra/public/components/metrics/sections/helpers/index.ts b/x-pack/legacy/plugins/infra/public/components/metrics/sections/helpers/index.ts new file mode 100644 index 0000000000000..8db30f6b4c415 --- /dev/null +++ b/x-pack/legacy/plugins/infra/public/components/metrics/sections/helpers/index.ts @@ -0,0 +1,93 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { ReactText } from 'react'; +import Color from 'color'; +import { get, first, last, min, max } from 'lodash'; +import { InfraFormatterType } from '../../../../lib/lib'; +import { createFormatter } from '../../../../utils/formatters'; +import { InfraDataSeries, InfraMetricData } from '../../../../graphql/types'; +import { + InfraMetricLayoutVisualizationType, + InfraMetricLayoutSection, +} from '../../../../pages/metrics/layouts/types'; + +/** + * Returns a formatter + */ +export const getFormatter = (formatter: InfraFormatterType, template: string) => (val: ReactText) => + val != null ? createFormatter(formatter, template)(val) : ''; + +/** + * Does a series have more then two points? + */ +export const seriesHasLessThen2DataPoints = (series: InfraDataSeries): boolean => { + return series.data.length < 2; +}; + +/** + * Returns the minimum and maximum timestamp for a metric + */ +export const getMaxMinTimestamp = (metric: InfraMetricData): [number, number] => { + if (metric.series.some(seriesHasLessThen2DataPoints)) { + return [0, 0]; + } + const values = metric.series.reduce( + (acc, item) => { + const firstRow = first(item.data); + const lastRow = last(item.data); + return acc.concat([ + (firstRow && firstRow.timestamp) || 0, + (lastRow && lastRow.timestamp) || 0, + ]); + }, + [] as number[] + ); + return [min(values), max(values)]; +}; + +/** + * Returns the chart name from the visConfig based on the series id, otherwise it + * just returns the seriesId + */ +export const getChartName = (section: InfraMetricLayoutSection, seriesId: string) => { + return get(section, ['visConfig', 'seriesOverrides', seriesId, 'name'], seriesId); +}; + +/** + * Returns the chart color from the visConfig based on the series id, otherwise it + * just returns a default color of #999 + */ +export const getChartColor = (section: InfraMetricLayoutSection, seriesId: string) => { + const color = new Color( + get(section, ['visConfig', 'seriesOverrides', seriesId, 'color'], '#999') + ); + return color.hex().toString(); +}; + +/** + * Type guard for InfraMetricLayoutVisualizationType + */ +const isInfraMetricLayoutVisualizationType = ( + subject: any +): subject is InfraMetricLayoutVisualizationType => { + return InfraMetricLayoutVisualizationType[subject] != null; +}; + +/** + * Gets the chart type based on the section and seriesId + */ +export const getChartType = (section: InfraMetricLayoutSection, seriesId: string) => { + const value = get(section, ['visConfig', 'type']); + const overrideValue = get(section, ['visConfig', 'seriesOverrides', seriesId, 'type']); + if (isInfraMetricLayoutVisualizationType(overrideValue)) { + return overrideValue; + } + if (isInfraMetricLayoutVisualizationType(value)) { + return value; + } + return InfraMetricLayoutVisualizationType.line; +}; diff --git a/x-pack/legacy/plugins/infra/public/components/metrics/sections/index.ts b/x-pack/legacy/plugins/infra/public/components/metrics/sections/index.ts index 7c12ff7520566..f5a8fcfed6dd6 100644 --- a/x-pack/legacy/plugins/infra/public/components/metrics/sections/index.ts +++ b/x-pack/legacy/plugins/infra/public/components/metrics/sections/index.ts @@ -5,8 +5,9 @@ */ import { InfraMetricLayoutSectionType } from '../../../pages/metrics/layouts/types'; -import { ChartSection } from './chart_section'; +// import { ChartSection } from './chart_section'; import { GaugesSection } from './gauges_section'; +import { ChartSection } from './chart_section'; export const sections = { [InfraMetricLayoutSectionType.chart]: ChartSection, diff --git a/x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx b/x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx new file mode 100644 index 0000000000000..10d05885cbd1c --- /dev/null +++ b/x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx @@ -0,0 +1,119 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { + AreaSeries, + BarSeries, + ScaleType, + getSpecId, + DataSeriesColorsValues, + CustomSeriesColorsMap, +} from '@elastic/charts'; +import { InfraMetricLayoutVisualizationType } from '../../../pages/metrics/layouts/types'; +import { InfraDataSeries } from '../../../graphql/types'; + +interface Props { + id: string; + name: string; + color: string; + series: InfraDataSeries; + type: InfraMetricLayoutVisualizationType; + stack: boolean | undefined; +} + +export const SeriesChart = (props: Props) => { + if (props.type === InfraMetricLayoutVisualizationType.bar) { + return