github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Update dependency @elastic/charts to v18.1.0 (#60578) (#60775)

Browse source
This commit is contained in:
Marco Vettorello 2020-03-20 22:58:01 +01:00 • committed by GitHub
parent 394abeda8b
commit c96faa6bea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 244 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

2
packages/kbn-ui-shared-deps/package.json
View file

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

3
src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
View file

@ -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<DiscoverHistogramProps, Discove
};
public onElementClick = (xInterval: number): ElementClickListener => ([elementData]) => {
const startRange = elementData[0].x;
const startRange = (elementData as XYChartElementEvent)[0].x;
const range = {
from: startRange,

6
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap generated
View file

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

6
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap generated
View file

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

3
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js
View file

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

3
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js
View file

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

1
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js
View file

@ -99,6 +99,7 @@ export const TimeSeries = ({
<Chart ref={chartRef} renderer="canvas" className={classes}>
<Settings
showLegend={legend}
showLegendExtra={true}
legendPosition={legendPosition}
onBrushEnd={onBrush}
animateData={false}

6
test/functional/page_objects/visual_builder_page.ts
View file

@ -305,9 +305,9 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
public async getRhythmChartLegendValue(nth = 0) {
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
const metricValue = (
await find.allByCssSelector(`.echLegendItem .echLegendItem__displayValue`)
)[nth];
const metricValue = (await find.allByCssSelector(`.echLegendItem .echLegendItem__extra`))[
nth
];
await metricValue.moveMouseTo();
return await metricValue.getVisibleText();
}

14
x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap generated
View file

@ -8,7 +8,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
legendPosition="top"
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={Object {}}
/>
<Connect(spec)
@ -75,7 +75,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
legendPosition="top"
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={Object {}}
/>
<Connect(spec)
@ -142,7 +142,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
legendPosition="top"
rotation={90}
showLegend={false}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={Object {}}
/>
<Connect(spec)
@ -209,7 +209,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
legendPosition="top"
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={Object {}}
/>
<Connect(spec)
@ -276,7 +276,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
legendPosition="top"
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={Object {}}
/>
<Connect(spec)
@ -347,7 +347,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
legendPosition="top"
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={Object {}}
/>
<Connect(spec)
@ -418,7 +418,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
legendPosition="top"
rotation={90}
showLegend={false}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={Object {}}
/>
<Connect(spec)

11
x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.test.tsx
View file

@ -4,8 +4,15 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { Axis } from '@elastic/charts';
import { AreaSeries, BarSeries, Position, LineSeries, Settings, ScaleType } from '@elastic/charts';
import {
AreaSeries,
Axis,
BarSeries,
Position,
LineSeries,
Settings,
ScaleType,
} from '@elastic/charts';
import { xyChart, XYChart } from './xy_expression';
import { LensMultiTable } from '../types';
import React from 'react';

2
x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
View file

@ -191,7 +191,7 @@ export function XYChart({ data, args, formatFactory, timeZone, chartTheme }: XYC
<Settings
showLegend={legend.isVisible ? chartHasMoreThanOneSeries : legend.isVisible}
legendPosition={legend.position}
showLegendDisplayValue={false}
showLegendExtra={false}
theme={chartTheme}
rotation={shouldRotate ? 90 : 0}
xDomain={

2
x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx
View file

@ -100,7 +100,7 @@ export const AreaChartBaseComponent = ({
xAccessor="x"
yAccessors={['y']}
areaSeriesStyle={getSeriesLineStyle()}
customSeriesColors={series.color ? [series.color] : undefined}
color={series.color ? series.color : undefined}
/>
) : null;
})}

2
x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
View file

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

4
x-pack/legacy/plugins/siem/public/components/charts/common.tsx
View file

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

2
x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx
View file

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

1
x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts
View file

@ -109,6 +109,7 @@ export interface BarchartConfigs {
legendPosition: Position;
onBrushEnd: UpdateDateRange;
showLegend: boolean;
showLegendExtra: boolean;
theme: {
scales: {
barsPadding: number;

1
x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts
View file

@ -47,6 +47,7 @@ export const getBarchartConfigs = ({
legendPosition: legendPosition ?? Position.Right,
onBrushEnd,
showLegend: showLegend ?? true,
showLegendExtra: true,
theme: {
scales: {
barsPadding: 0.08,

9
x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx
View file

@ -7,8 +7,6 @@
import {
Axis,
Chart,
getAxisId,
getSpecId,
HistogramBarSeries,
Position,
Settings,
@ -46,9 +44,9 @@ export const SignalsHistogram = React.memo<HistogramSignalsProps>(
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<HistogramSignalsProps>(
legendPosition={legendPosition}
onBrushEnd={updateDateRange}
showLegend
showLegendExtra
theme={theme}
/>

3
x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx
View file

@ -65,7 +65,8 @@ export const DurationChartComponent = ({ locationDurationLines, loading }: Durat
<Chart>
<Settings
xDomain={{ min, max }}
showLegend={true}
showLegend
showLegendExtra
legendPosition={Position.Bottom}
onBrushEnd={onBrushEnd}
/>

2
x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx
View file

@ -68,7 +68,7 @@ export const MonitorBarSeries = ({ dangerColor, histogramSeries }: MonitorBarSer
/>
<BarSeries
id={id}
customSeriesColors={[dangerColor]}
color={dangerColor}
data={(histogramSeries || []).map(({ timestamp, down }) => [timestamp, down])}
name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', {
defaultMessage: 'Down checks',

4
x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx
View file

@ -122,7 +122,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
/>
<BarSeries
customSeriesColors={[danger]}
color={danger}
data={histogram.map(({ x, downCount }) => [x, downCount || 0])}
id={downSpecId}
name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
@ -136,7 +136,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
yScaleType="linear"
/>
<BarSeries
customSeriesColors={[gray]}
color={gray}
data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
id={upMonitorsId}
name={upMonitorsId}

4
x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx
View file

@ -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}
/>
);
};

1
x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx
View file

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

3
x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx
View file

@ -120,7 +120,8 @@ export const ChartSectionVis = ({
tooltip={tooltipProps}
onBrushEnd={handleTimeChange}
theme={getChartTheme(isDarkMode)}
showLegend={true}
showLegend
showLegendExtra
legendPosition="right"
/>
</Chart>

4
x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx
View file

@ -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}
/>
);

8
x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
View file

@ -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 = () => {
<div className="mlChartTooltip__list">
{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 (
<div
key={`${seriesKey}--${yAccessor}`}
key={`${seriesIdentifier.key}__${valueAccessor}`}
className={classes}
style={{
borderLeftColor: color,
}}
>
<span className="mlChartTooltip__label">{name}</span>
<span className="mlChartTooltip__label">{label}</span>
<span className="mlChartTooltip__value">{value}</span>
</div>
);

2
x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx
View file

@ -89,7 +89,7 @@ export const BooleanContent: FC<FieldDataCardProps> = ({ 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"

57
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js
View file

@ -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}`,
});
});
}

64
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js
View file

@ -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('<br/>'),
seriesIdentifier: {
key: seriesKey,
},
valueAccessor: 'scheduledEvents',
});
}

18
x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js
View file

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

2
x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx
View file

@ -31,7 +31,7 @@ export const Line: FC<Props> = ({ chartData }) => {
yScaleToDataExtent={false}
curve={CurveType.CURVE_MONOTONE_X}
lineSeriesStyle={lineSeriesStyle}
customSeriesColors={[LINE_COLOR]}
color={LINE_COLOR}
/>
);
};

2
x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx
View file

@ -44,7 +44,7 @@ export const ModelBounds: FC<Props> = ({ modelData }) => {
yScaleToDataExtent={false}
curve={CurveType.CURVE_MONOTONE_X}
areaSeriesStyle={areaSeriesStyle}
customSeriesColors={[MODEL_COLOR]}
color={MODEL_COLOR}
/>
);
};

2
x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx
View file

@ -39,7 +39,7 @@ export const Scatter: FC<Props> = ({ chartData }) => {
yScaleToDataExtent={false}
curve={CurveType.CURVE_MONOTONE_X}
lineSeriesStyle={scatterSeriesStyle}
customSeriesColors={[LINE_COLOR]}
color={LINE_COLOR}
/>
);
};

2
x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
View file

@ -53,7 +53,7 @@ export const EventRateChart: FC<Props> = ({
xAccessor={'time'}
yAccessors={['value']}
data={eventRateChartData}
customSeriesColors={[barColor]}
color={barColor}
/>
</Chart>
</LoadingWrapper>

136
x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
View file

@ -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',
});
}

14
x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
View file

@ -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<Props> = ({
theme={[customTheme(), chartsTheme]}
xDomain={domain}
showLegend={!!termField}
showLegendExtra
legendPosition={Position.Bottom}
/>
<Axis
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={dateFormatter}
/>
<Axis
domain={{ max: maxY }}
id={getAxisId('left')}
title={aggLabel}
position={Position.Left}
/>
<Axis domain={{ max: maxY }} id="left" title={aggLabel} position={Position.Left} />
{alertVisualizationDataKeys.map((key: string) => {
return (
<LineSeries
key={key}
id={getSpecId(key)}
id={key}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={visualizationData[key]}

1
x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx
View file

@ -215,6 +215,7 @@ export const WatchVisualization = () => {
theme={[customTheme(), chartsTheme]}
xDomain={domain}
showLegend={!!watch.termField}
showLegendExtra
legendPosition={Position.Bottom}
/>
<Axis

9
yarn.lock
View file

@ -2551,12 +2551,11 @@
debug "^3.1.0"
lodash.once "^4.1.1"
"@elastic/charts@^17.1.1":
version "17.1.1"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-17.1.1.tgz#28df3d1be445aa4951fac59dec0831760a1ea034"
integrity sha512-zI3ZHy51tqlsEenDbHFWlL6qbDMvrQXeuV+UFleILtVcfI0r4Lk7DtSbx4GQlHcBuVvvAk1MRdYKNGA0IYWP6w==
"@elastic/charts@^18.1.0":
version "18.1.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-18.1.0.tgz#ee98b3e7680239d79807c09f0ee6efa6c1afa84b"
integrity sha512-cUobkGiKHPKHNytxsO7sSJyH6fOcAsZvcxAfnJPBn143P2d5oEsjSJmJTqu0z/obCs2v476Xlg6POVGainUj1Q==
dependencies:
"@types/d3-shape" "^1.3.1"
classnames "^2.2.6"
d3-array "^1.2.4"
d3-collection "^1.0.7"