diff --git a/package.json b/package.json index 7b6e3a7e77d29..a583dd6f8f1f4 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "dependencies": { "@babel/core": "^7.5.5", "@babel/register": "^7.7.0", - "@elastic/charts": "^17.1.1", + "@elastic/charts": "^18.1.0", "@elastic/datemath": "5.0.2", "@elastic/ems-client": "7.7.0", "@elastic/eui": "20.0.2", diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index 1728ae762d9b1..2c9cd4671914e 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -12,7 +12,7 @@ "abortcontroller-polyfill": "^1.4.0", "@elastic/eui": "20.0.2", "@kbn/babel-preset": "1.0.0", - "@elastic/charts": "^17.1.1", + "@elastic/charts": "^18.1.0", "@kbn/dev-utils": "1.0.0", "@kbn/i18n": "1.0.0", "@yarnpkg/lockfile": "^1.1.0", diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx index 8db3c77ba0f47..107c30ec5e688 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx @@ -38,6 +38,7 @@ import { TooltipValue, TooltipType, ElementClickListener, + XYChartElementEvent, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; @@ -140,7 +141,7 @@ export class DiscoverHistogram extends Component ([elementData]) => { - const startRange = elementData[0].x; + const startRange = (elementData as XYChartElementEvent)[0].x; const range = { from: startRange, diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap index 56504ca11ca39..6506b838ff288 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap @@ -22,12 +22,8 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/ }, } } + color="rgb(0, 156, 224)" curve={9} - customSeriesColors={ - Array [ - "rgb(0, 156, 224)", - ] - } data={ Array [ Array [ diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap index 6317973cef536..c337c0dc77a2f 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap @@ -15,11 +15,7 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/ }, } } - customSeriesColors={ - Array [ - "rgb(0, 156, 224)", - ] - } + color="rgb(0, 156, 224)" data={ Array [ Array [ diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js index 411c0813cad7c..923024ff690a4 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js @@ -43,7 +43,6 @@ export function AreaSeriesDecorator({ }) { const id = seriesId; const groupId = seriesGroupId; - const customSeriesColors = [color]; const areaSeriesStyle = getAreaStyles({ points, lines, color }); const seriesSettings = { @@ -51,7 +50,7 @@ export function AreaSeriesDecorator({ name, groupId, data, - customSeriesColors, + color, hideInLegend, xAccessor: X_ACCESSOR_INDEX, yAccessors: Y_ACCESSOR_INDEXES, diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js index 9cc8931b48d9f..6d2cd7b8dd935 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js @@ -42,7 +42,6 @@ export function BarSeriesDecorator({ }) { const id = seriesId; const groupId = seriesGroupId; - const customSeriesColors = [color]; const barSeriesStyle = getBarStyles(bars, color); const seriesSettings = { @@ -50,7 +49,7 @@ export function BarSeriesDecorator({ name, groupId, data, - customSeriesColors, + color, hideInLegend, xAccessor: X_ACCESSOR_INDEX, yAccessors: Y_ACCESSOR_INDEXES, diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js index 75554a476bdea..5673f560214c7 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js @@ -99,6 +99,7 @@ export const TimeSeries = ({ ) : null; })} diff --git a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx index f53a1555fa1f4..2ae0e05850a37 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx @@ -75,7 +75,7 @@ export const BarChartBaseComponent = ({ splitSeriesAccessors={['g']} data={series.value!} stackAccessors={get('configs.series.stackAccessors', chartConfigs)} - customSeriesColors={series.color ? [series.color] : undefined} + color={series.color ? series.color : undefined} /> ) : null; })} diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx index 7377bcbe7050f..d8429cba1b4fb 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx @@ -38,7 +38,7 @@ export interface ChartData { export interface ChartSeriesConfigs { customHeight?: number; - customSeriesColors?: string[]; + color?: string[]; series?: { xScaleType?: ScaleType | undefined; yScaleType?: ScaleType | undefined; @@ -110,7 +110,7 @@ export const chartDefaultSettings = { rendering: chartDefaultRendering, animatedData: false, showLegend: false, - showLegendDisplayValue: false, + showLegendExtra: false, debug: false, legendPosition: Position.Bottom, }; diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx index cb9afde899cf8..e3e0562424ffb 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx @@ -17,7 +17,7 @@ import { BarChart } from '../charts/barchart'; import { HeaderSection } from '../header_section'; import { MatrixLoader } from './matrix_loader'; import { Panel } from '../panel'; -import { getBarchartConfigs, getCustomChartData } from '../../components/matrix_histogram/utils'; +import { getBarchartConfigs, getCustomChartData } from './utils'; import { useQuery } from '../../containers/matrix_histogram'; import { MatrixHistogramProps, diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts index fda4f5d15d95c..a435c7be6c890 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts @@ -109,6 +109,7 @@ export interface BarchartConfigs { legendPosition: Position; onBrushEnd: UpdateDateRange; showLegend: boolean; + showLegendExtra: boolean; theme: { scales: { barsPadding: number; diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts index ccd1b03eb5474..ddac615cef50a 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts @@ -47,6 +47,7 @@ export const getBarchartConfigs = ({ legendPosition: legendPosition ?? Position.Right, onBrushEnd, showLegend: showLegend ?? true, + showLegendExtra: true, theme: { scales: { barsPadding: 0.08, diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx index 2d9b1ee844b4b..40e5b8abde072 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx @@ -7,8 +7,6 @@ import { Axis, Chart, - getAxisId, - getSpecId, HistogramBarSeries, Position, Settings, @@ -46,9 +44,9 @@ export const SignalsHistogram = React.memo( const theme = useTheme(); const chartSize: ChartSizeArray = useMemo(() => ['100%', chartHeight], [chartHeight]); - const xAxisId = useMemo(() => getAxisId('signalsHistogramAxisX'), []); - const yAxisId = useMemo(() => getAxisId('signalsHistogramAxisY'), []); - const id = useMemo(() => getSpecId('signalsHistogram'), []); + const xAxisId = 'signalsHistogramAxisX'; + const yAxisId = 'signalsHistogramAxisY'; + const id = 'signalsHistogram'; const yAccessors = useMemo(() => ['y'], []); const splitSeriesAccessors = useMemo(() => ['g'], []); const tickFormat = useMemo(() => histogramDateTimeFormatter([from, to]), [from, to]); @@ -69,6 +67,7 @@ export const SignalsHistogram = React.memo( legendPosition={legendPosition} onBrushEnd={updateDateRange} showLegend + showLegendExtra theme={theme} /> diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx index d4e8e1ad08f0a..6bd4e7431f97a 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx @@ -65,7 +65,8 @@ export const DurationChartComponent = ({ locationDurationLines, loading }: Durat diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx index 0682f2a1b7b1d..6a1e255d308d7 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx @@ -68,7 +68,7 @@ export const MonitorBarSeries = ({ dangerColor, histogramSeries }: MonitorBarSer /> [timestamp, down])} name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', { defaultMessage: 'Down checks', diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx index 6119d897cbf53..17fa8781b828b 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx @@ -122,7 +122,7 @@ export const PingHistogramComponent: React.FC = ({ /> [x, downCount || 0])} id={downSpecId} name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', { @@ -136,7 +136,7 @@ export const PingHistogramComponent: React.FC = ({ yScaleType="linear" /> [x, upCount || 0])} id={upMonitorsId} name={upMonitorsId} diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx index 65911a02c938a..ed7a994dd2bbe 100644 --- a/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx +++ b/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx @@ -66,7 +66,7 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Pr data={series.rows} stackAccessors={stack ? ['timestamp'] : void 0} areaSeriesStyle={seriesAreaStyle} - customSeriesColors={[color]} + color={color} /> ); }; @@ -101,7 +101,7 @@ export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) => data={series.rows} stackAccessors={stack ? ['timestamp'] : void 0} barSeriesStyle={seriesBarStyle} - customSeriesColors={[color]} + color={color} /> ); }; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx index 7969c61bc9f34..3a244b6834c59 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx @@ -85,6 +85,7 @@ export const LogEntryRateBarChart: React.FunctionComponent<{ tooltip={tooltipProps} theme={isDarkMode ? DARK_THEME : LIGHT_THEME} showLegend + showLegendExtra legendPosition="right" xDomain={{ min: timeRange.startTime, max: timeRange.endTime }} /> diff --git a/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx index 49e95394deb97..290f0eda452ce 100644 --- a/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx @@ -120,7 +120,8 @@ export const ChartSectionVis = ({ tooltip={tooltipProps} onBrushEnd={handleTimeChange} theme={getChartTheme(isDarkMode)} - showLegend={true} + showLegend + showLegendExtra legendPosition="right" /> diff --git a/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx b/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx index 4ab45d5f46233..849a5b8922165 100644 --- a/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx @@ -53,7 +53,7 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => { yAccessors={['value']} data={series.data} areaSeriesStyle={style} - customSeriesColors={color ? [color] : void 0} + color={color ? color : void 0} stackAccessors={stack ? ['timestamp'] : void 0} /> ); @@ -80,7 +80,7 @@ export const BarChart = ({ id, color, series, name, type, stack }: Props) => { yAccessors={['value']} data={series.data} barSeriesStyle={style} - customSeriesColors={color ? [color] : void 0} + color={color ? color : void 0} stackAccessors={stack ? ['timestamp'] : void 0} /> ); diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx index db42c90d49ebb..9cc42a4df2f66 100644 --- a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx +++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx @@ -60,7 +60,7 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo return null; } - return formatter ? formatter(headerData) : headerData.name; + return formatter ? formatter(headerData) : headerData.label; }; export const ChartTooltip: FC = () => { @@ -85,20 +85,20 @@ export const ChartTooltip: FC = () => {
{tooltipData .slice(1) - .map(({ name, value, color, isHighlighted, seriesKey, yAccessor }) => { + .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => { const classes = classNames('mlChartTooltip__item', { /* eslint @typescript-eslint/camelcase:0 */ echTooltip__rowHighlighted: isHighlighted, }); return (
- {name} + {label} {value}
); diff --git a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx index c7277295b4c4f..02209cf0a1582 100644 --- a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx +++ b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx @@ -89,7 +89,7 @@ export const BooleanContent: FC = ({ config }) => { isValueContainedInElement: false, showValueLabel: true, }} - customSeriesColors={['rgba(230, 194, 32, 0.5)', 'rgba(224, 187, 20, 0.71)']} + color={['rgba(230, 194, 32, 0.5)', 'rgba(224, 187, 20, 0.71)']} splitSeriesAccessors={['x']} stackAccessors={['x']} xAccessor="x" diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js index d0781fc8161f1..5fc1160093a49 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js @@ -440,16 +440,19 @@ export class ExplorerChartDistribution extends React.Component { // Show the time and metric values in the tooltip. // Uses date, value, upper, lower and anomalyScore (optional) marker properties. const formattedDate = formatHumanReadableDateTime(marker.date); - const tooltipData = [{ name: formattedDate }]; + const tooltipData = [{ label: formattedDate }]; const seriesKey = config.detectorLabel; if (_.has(marker, 'entity')) { tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.distributionChart.entityLabel', { + label: i18n.translate('xpack.ml.explorer.distributionChart.entityLabel', { defaultMessage: 'entity', }), value: marker.entity, - seriesKey, + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'entity', }); } @@ -457,36 +460,42 @@ export class ExplorerChartDistribution extends React.Component { const score = parseInt(marker.anomalyScore); const displayScore = score > 0 ? score : '< 1'; tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.distributionChart.anomalyScoreLabel', { + label: i18n.translate('xpack.ml.explorer.distributionChart.anomalyScoreLabel', { defaultMessage: 'anomaly score', }), value: displayScore, color: getSeverityColor(score), - seriesKey, - yAccessor: 'anomaly_score', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'anomaly_score', }); if (chartType !== CHART_TYPE.EVENT_DISTRIBUTION) { tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.distributionChart.valueLabel', { + label: i18n.translate('xpack.ml.explorer.distributionChart.valueLabel', { defaultMessage: 'value', }), value: formatValue(marker.value, config.functionDescription, fieldFormat), - seriesKey, - yAccessor: 'value', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'value', }); if (typeof marker.numberOfCauses === 'undefined' || marker.numberOfCauses === 1) { tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.distributionChart.typicalLabel', { + label: i18n.translate('xpack.ml.explorer.distributionChart.typicalLabel', { defaultMessage: 'typical', }), value: formatValue(marker.typical, config.functionDescription, fieldFormat), - seriesKey, - yAccessor: 'typical', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'typical', }); } if (typeof marker.byFieldName !== 'undefined' && _.has(marker, 'numberOfCauses')) { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.explorer.distributionChart.unusualByFieldValuesLabel', { defaultMessage: @@ -499,29 +508,33 @@ export class ExplorerChartDistribution extends React.Component { }, } ), - seriesKey, - yAccessor: 'numberOfCauses', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'numberOfCauses', }); } } } else if (chartType !== CHART_TYPE.EVENT_DISTRIBUTION) { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.explorer.distributionChart.valueWithoutAnomalyScoreLabel', { defaultMessage: 'value', } ), value: formatValue(marker.value, config.functionDescription, fieldFormat), - seriesKey, - yAccessor: 'value', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'value', }); } if (_.has(marker, 'scheduledEvents')) { marker.scheduledEvents.forEach((scheduledEvent, i) => { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.scheduledEventsLabel', { defaultMessage: 'scheduled event{counter}', @@ -529,8 +542,10 @@ export class ExplorerChartDistribution extends React.Component { } ), value: scheduledEvent, - seriesKey, - yAccessor: `scheduled_events_${i + 1}`, + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: `scheduled_events_${i + 1}`, }); }); } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js index d8d6709175090..dd9479be931a7 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js @@ -384,30 +384,34 @@ export class ExplorerChartSingleMetric extends React.Component { // Show the time and metric values in the tooltip. // Uses date, value, upper, lower and anomalyScore (optional) marker properties. const formattedDate = formatHumanReadableDateTime(marker.date); - const tooltipData = [{ name: formattedDate }]; + const tooltipData = [{ label: formattedDate }]; const seriesKey = config.detectorLabel; if (_.has(marker, 'anomalyScore')) { const score = parseInt(marker.anomalyScore); const displayScore = score > 0 ? score : '< 1'; tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.singleMetricChart.anomalyScoreLabel', { + label: i18n.translate('xpack.ml.explorer.singleMetricChart.anomalyScoreLabel', { defaultMessage: 'anomaly score', }), value: displayScore, color: getSeverityColor(score), - seriesKey, - yAccessor: 'anomaly_score', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'anomaly_score', }); if (showMultiBucketAnomalyTooltip(marker) === true) { tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.singleMetricChart.multiBucketImpactLabel', { + label: i18n.translate('xpack.ml.explorer.singleMetricChart.multiBucketImpactLabel', { defaultMessage: 'multi-bucket impact', }), value: getMultiBucketImpactLabel(marker.multiBucketImpact), - seriesKey, - yAccessor: 'multi_bucket_impact', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'multi_bucket_impact', }); } @@ -418,33 +422,39 @@ export class ExplorerChartSingleMetric extends React.Component { // Display the record actual in preference to the chart value, which may be // different depending on the aggregation interval of the chart. tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.singleMetricChart.actualLabel', { + label: i18n.translate('xpack.ml.explorer.singleMetricChart.actualLabel', { defaultMessage: 'actual', }), value: formatValue(marker.actual, config.functionDescription, fieldFormat), - seriesKey, - yAccessor: 'actual', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'actual', }); tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.singleMetricChart.typicalLabel', { + label: i18n.translate('xpack.ml.explorer.singleMetricChart.typicalLabel', { defaultMessage: 'typical', }), value: formatValue(marker.typical, config.functionDescription, fieldFormat), - seriesKey, - yAccessor: 'typical', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'typical', }); } else { tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.singleMetricChart.valueLabel', { + label: i18n.translate('xpack.ml.explorer.singleMetricChart.valueLabel', { defaultMessage: 'value', }), value: formatValue(marker.value, config.functionDescription, fieldFormat), - seriesKey, - yAccessor: 'value', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'value', }); if (_.has(marker, 'byFieldName') && _.has(marker, 'numberOfCauses')) { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.explorer.distributionChart.unusualByFieldValuesLabel', { defaultMessage: @@ -457,31 +467,39 @@ export class ExplorerChartSingleMetric extends React.Component { }, } ), - seriesKey, - yAccessor: 'numberOfCauses', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'numberOfCauses', }); } } } else { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.explorer.singleMetricChart.valueWithoutAnomalyScoreLabel', { defaultMessage: 'value', } ), value: formatValue(marker.value, config.functionDescription, fieldFormat), - seriesKey, - yAccessor: 'value', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'value', }); } if (_.has(marker, 'scheduledEvents')) { tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.singleMetricChart.scheduledEventsLabel', { + label: i18n.translate('xpack.ml.explorer.singleMetricChart.scheduledEventsLabel', { defaultMessage: 'Scheduled events', }), value: marker.scheduledEvents.map(mlEscape).join('
'), + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'scheduledEvents', }); } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js index 6582f5c609864..a229537ba3ca1 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js @@ -323,24 +323,28 @@ export class ExplorerSwimlane extends React.Component { // Display date using same format as Kibana visualizations. const formattedDate = formatHumanReadableDateTime(time * 1000); - const tooltipData = [{ name: formattedDate }]; + const tooltipData = [{ label: formattedDate }]; if (swimlaneData.fieldName !== undefined) { tooltipData.push({ - name: swimlaneData.fieldName, + label: swimlaneData.fieldName, value: laneLabel, - seriesKey: laneLabel, - yAccessor: 'fieldName', + seriesIdentifier: { + key: laneLabel, + }, + valueAccessor: 'fieldName', }); } tooltipData.push({ - name: i18n.translate('xpack.ml.explorer.swimlane.maxAnomalyScoreLabel', { + label: i18n.translate('xpack.ml.explorer.swimlane.maxAnomalyScoreLabel', { defaultMessage: 'Max anomaly score', }), value: displayScore, color: colorScore(displayScore), - seriesKey: laneLabel, - yAccessor: 'anomaly_score', + seriesIdentifier: { + key: laneLabel, + }, + valueAccessor: 'anomaly_score', }); const offsets = target.className === 'sl-cell-inner' ? { x: 6, y: 0 } : { x: 8, y: 1 }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx index 3070fc0afdc33..1e6b9c1f9cb79 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx @@ -31,7 +31,7 @@ export const Line: FC = ({ chartData }) => { yScaleToDataExtent={false} curve={CurveType.CURVE_MONOTONE_X} lineSeriesStyle={lineSeriesStyle} - customSeriesColors={[LINE_COLOR]} + color={LINE_COLOR} /> ); }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx index f786f9e4266b8..8ec5141c0f4b2 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx @@ -44,7 +44,7 @@ export const ModelBounds: FC = ({ modelData }) => { yScaleToDataExtent={false} curve={CurveType.CURVE_MONOTONE_X} areaSeriesStyle={areaSeriesStyle} - customSeriesColors={[MODEL_COLOR]} + color={MODEL_COLOR} /> ); }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx index af1ab928ce7df..f2d040c7bc517 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx @@ -39,7 +39,7 @@ export const Scatter: FC = ({ chartData }) => { yScaleToDataExtent={false} curve={CurveType.CURVE_MONOTONE_X} lineSeriesStyle={scatterSeriesStyle} - customSeriesColors={[LINE_COLOR]} + color={LINE_COLOR} /> ); }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx index 42d865cfaaf12..2fb8ea2820b29 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx @@ -53,7 +53,7 @@ export const EventRateChart: FC = ({ xAccessor={'time'} yAccessors={['value']} data={eventRateChartData} - customSeriesColors={[barColor]} + color={barColor} /> diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js index bafb12de068bb..dffc268cb992b 100644 --- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js +++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js @@ -1384,32 +1384,36 @@ class TimeseriesChartIntl extends Component { // Show the time and metric values in the tooltip. // Uses date, value, upper, lower and anomalyScore (optional) marker properties. const formattedDate = formatHumanReadableDateTimeSeconds(marker.date); - const tooltipData = [{ name: formattedDate }]; + const tooltipData = [{ label: formattedDate }]; if (_.has(marker, 'anomalyScore')) { const score = parseInt(marker.anomalyScore); const displayScore = score > 0 ? score : '< 1'; tooltipData.push({ - name: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.anomalyScoreLabel', { + label: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.anomalyScoreLabel', { defaultMessage: 'anomaly score', }), value: displayScore, color: anomalyColorScale(score), - seriesKey, - yAccessor: 'anomaly_score', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'anomaly_score', }); if (showMultiBucketAnomalyTooltip(marker) === true) { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.multiBucketImpactLabel', { defaultMessage: 'multi-bucket impact', } ), value: getMultiBucketImpactLabel(marker.multiBucketImpact), - seriesKey, - yAccessor: 'multi_bucket_impact', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'multi_bucket_impact', }); } @@ -1421,36 +1425,42 @@ class TimeseriesChartIntl extends Component { // Display the record actual in preference to the chart value, which may be // different depending on the aggregation interval of the chart. tooltipData.push({ - name: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.actualLabel', { + label: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.actualLabel', { defaultMessage: 'actual', }), value: formatValue(marker.actual, marker.function, fieldFormat), - seriesKey, - yAccessor: 'actual', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'actual', }); tooltipData.push({ - name: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.typicalLabel', { + label: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.typicalLabel', { defaultMessage: 'typical', }), value: formatValue(marker.typical, marker.function, fieldFormat), - seriesKey, - yAccessor: 'typical', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'typical', }); } else { tooltipData.push({ - name: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.valueLabel', { + label: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.valueLabel', { defaultMessage: 'value', }), value: formatValue(marker.value, marker.function, fieldFormat), - seriesKey, - yAccessor: 'value', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'value', }); if (_.has(marker, 'byFieldName') && _.has(marker, 'numberOfCauses')) { const numberOfCauses = marker.numberOfCauses; // If numberOfCauses === 1, won't go into this block as actual/typical copied to top level fields. const byFieldName = mlEscape(marker.byFieldName); tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.moreThanOneUnusualByFieldValuesLabel', { defaultMessage: '{numberOfCauses}{plusSign} unusual {byFieldName} values', @@ -1462,96 +1472,112 @@ class TimeseriesChartIntl extends Component { }, } ), - seriesKey, - yAccessor: 'numberOfCauses', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'numberOfCauses', }); } } } else { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.modelPlotEnabled.actualLabel', { defaultMessage: 'actual', } ), value: formatValue(marker.actual, marker.function, fieldFormat), - seriesKey, - yAccessor: 'actual', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'actual', }); tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.modelPlotEnabled.upperBoundsLabel', { defaultMessage: 'upper bounds', } ), value: formatValue(marker.upper, marker.function, fieldFormat), - seriesKey, - yAccessor: 'upper_bounds', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'upper_bounds', }); tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.modelPlotEnabled.lowerBoundsLabel', { defaultMessage: 'lower bounds', } ), value: formatValue(marker.lower, marker.function, fieldFormat), - seriesKey, - yAccessor: 'lower_bounds', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'lower_bounds', }); } } else { // TODO - need better formatting for small decimals. if (_.get(marker, 'isForecast', false) === true) { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.withoutAnomalyScore.predictionLabel', { defaultMessage: 'prediction', } ), value: formatValue(marker.value, marker.function, fieldFormat), - seriesKey, - yAccessor: 'prediction', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'prediction', }); } else { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.withoutAnomalyScore.valueLabel', { defaultMessage: 'value', } ), value: formatValue(marker.value, marker.function, fieldFormat), - seriesKey, - yAccessor: 'value', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'value', }); } if (modelPlotEnabled === true) { tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.withoutAnomalyScoreAndModelPlotEnabled.upperBoundsLabel', { defaultMessage: 'upper bounds', } ), value: formatValue(marker.upper, marker.function, fieldFormat), - seriesKey, - yAccessor: 'upper_bounds', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'upper_bounds', }); tooltipData.push({ - name: i18n.translate( + label: i18n.translate( 'xpack.ml.timeSeriesExplorer.timeSeriesChart.withoutAnomalyScoreAndModelPlotEnabled.lowerBoundsLabel', { defaultMessage: 'lower bounds', } ), value: formatValue(marker.lower, marker.function, fieldFormat), - seriesKey, - yAccessor: 'lower_bounds', + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'lower_bounds', }); } } @@ -1559,23 +1585,29 @@ class TimeseriesChartIntl extends Component { if (_.has(marker, 'scheduledEvents')) { marker.scheduledEvents.forEach((scheduledEvent, i) => { tooltipData.push({ - name: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.scheduledEventsLabel', { - defaultMessage: 'scheduled event{counter}', - values: { - counter: marker.scheduledEvents.length > 1 ? ` #${i + 1}` : '', - }, - }), + label: i18n.translate( + 'xpack.ml.timeSeriesExplorer.timeSeriesChart.scheduledEventsLabel', + { + defaultMessage: 'scheduled event{counter}', + values: { + counter: marker.scheduledEvents.length > 1 ? ` #${i + 1}` : '', + }, + } + ), value: scheduledEvent, - seriesKey, - yAccessor: `scheduled_events_${i + 1}`, + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: `scheduled_events_${i + 1}`, }); }); } if (_.has(marker, 'annotation')) { tooltipData.length = 0; + // header tooltipData.push({ - name: marker.annotation, + label: marker.annotation, }); let timespan = moment(marker.timestamp).format('MMMM Do YYYY, HH:mm'); @@ -1583,7 +1615,11 @@ class TimeseriesChartIntl extends Component { timespan += ` - ${moment(marker.end_timestamp).format('MMMM Do YYYY, HH:mm')}`; } tooltipData.push({ - name: timespan, + label: timespan, + seriesIdentifier: { + key: seriesKey, + }, + valueAccessor: 'timespan', }); } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx index a87ff8bf4c312..ef08ac9a9d0de 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx @@ -11,8 +11,6 @@ import { interval } from 'rxjs'; import { AnnotationDomainTypes, Axis, - getAxisId, - getSpecId, Chart, LineAnnotation, LineSeries, @@ -265,25 +263,21 @@ export const ThresholdVisualization: React.FunctionComponent = ({ theme={[customTheme(), chartsTheme]} xDomain={domain} showLegend={!!termField} + showLegendExtra legendPosition={Position.Bottom} /> - + {alertVisualizationDataKeys.map((key: string) => { return ( { theme={[customTheme(), chartsTheme]} xDomain={domain} showLegend={!!watch.termField} + showLegendExtra legendPosition={Position.Bottom} />