Skip to content

Commit

Permalink
fix: type changes and ml custom tooltip data
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 committed Mar 19, 2020
1 parent b957985 commit ec82779
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 106 deletions.
3 changes: 2 additions & 1 deletion src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
TooltipValue,
TooltipType,
ElementClickListener,
XYChartElementEvent,
} from '@elastic/charts';

import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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>
);
Expand Down
57 changes: 36 additions & 21 deletions x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -440,53 +440,62 @@ 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',
});
}

if (_.has(marker, 'anomalyScore')) {
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:
Expand All @@ -499,38 +508,44 @@ 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}',
values: { counter: marker.scheduledEvents.length > 1 ? ` #${i + 1}` : '' },
}
),
value: scheduledEvent,
seriesKey,
yAccessor: `scheduled_events_${i + 1}`,
seriesIdentifier: {
key: seriesKey,
},
valueAccessor: `scheduled_events_${i + 1}`,
});
});
}
Expand Down
64 changes: 41 additions & 23 deletions ...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
}

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

Expand Down
18 changes: 11 additions & 7 deletions x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand Down
Loading

0 comments on commit ec82779

Please sign in to comment.