Skip to content

Commit

Permalink
[ML] Fix positioning of chart tooltip in Single Metric Viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@peteharverson
peteharverson committed Feb 5, 2020
1 parent 6f1de6b commit 5efc092
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 149 deletions.
2 changes: 1 addition & 1 deletion x-pack/legacy/plugins/ml/public/application/explorer/explorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ export class Explorer extends React.Component {
return (
<ExplorerPage jobSelectorProps={jobSelectorProps} resizeRef={this.resizeRef}>
<div className="results-container">
{/* Make sure ChartTooltip is inside this plain wrapping div so positioning can be infered correctly. */}
{/* Make sure ChartTooltip is inside wrapping div with 0px left/right padding so positioning can be inferred correctly. */}
<ChartTooltip />

{noInfluencersConfigured === false && influencers !== undefined && (
Expand Down
298 changes: 150 additions & 148 deletions x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1206,167 +1206,169 @@ export class TimeSeriesExplorer extends React.Component {
jobs.length > 0 &&
(fullRefresh === false || loading === false) &&
hasResults === true && (
<div className="results-container">
<div>
{/* Make sure ChartTooltip is inside this plain wrapping element without padding so positioning can be inferred correctly. */}
<ChartTooltip />

<EuiTitle className="panel-title">
<h2 style={{ display: 'inline' }}>
<span>
{i18n.translate('xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle', {
defaultMessage: 'Single time series analysis of {functionLabel}',
values: { functionLabel: chartDetails.functionLabel },
})}
</span>
&nbsp;
{chartDetails.entityData.count === 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.length > 0 && '('}
{chartDetails.entityData.entities
.map(entity => {
return `${entity.fieldName}: ${entity.fieldValue}`;
})
.join(', ')}
{chartDetails.entityData.entities.length > 0 && ')'}
</span>
)}
{chartDetails.entityData.count !== 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.map((countData, i) => {
return (
<Fragment key={countData.fieldName}>
{i18n.translate(
'xpack.ml.timeSeriesExplorer.countDataInChartDetailsDescription',
{
defaultMessage:
'{openBrace}{cardinalityValue} distinct {fieldName} {cardinality, plural, one {} other { values}}{closeBrace}',
values: {
openBrace: i === 0 ? '(' : '',
closeBrace:
i === chartDetails.entityData.entities.length - 1 ? ')' : '',
cardinalityValue:
countData.cardinality === 0
? allValuesLabel
: countData.cardinality,
cardinality: countData.cardinality,
fieldName: countData.fieldName,
},
}
)}
{i !== chartDetails.entityData.entities.length - 1 ? ', ' : ''}
</Fragment>
);
<div className="results-container">
<EuiTitle className="panel-title">
<h2 style={{ display: 'inline' }}>
<span>
{i18n.translate('xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle', {
defaultMessage: 'Single time series analysis of {functionLabel}',
values: { functionLabel: chartDetails.functionLabel },
})}
</span>
&nbsp;
{chartDetails.entityData.count === 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.length > 0 && '('}
{chartDetails.entityData.entities
.map(entity => {
return `${entity.fieldName}: ${entity.fieldValue}`;
})
.join(', ')}
{chartDetails.entityData.entities.length > 0 && ')'}
</span>
)}
{chartDetails.entityData.count !== 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.map((countData, i) => {
return (
<Fragment key={countData.fieldName}>
{i18n.translate(
'xpack.ml.timeSeriesExplorer.countDataInChartDetailsDescription',
{
defaultMessage:
'{openBrace}{cardinalityValue} distinct {fieldName} {cardinality, plural, one {} other { values}}{closeBrace}',
values: {
openBrace: i === 0 ? '(' : '',
closeBrace:
i === chartDetails.entityData.entities.length - 1 ? ')' : '',
cardinalityValue:
countData.cardinality === 0
? allValuesLabel
: countData.cardinality,
cardinality: countData.cardinality,
fieldName: countData.fieldName,
},
}
)}
{i !== chartDetails.entityData.entities.length - 1 ? ', ' : ''}
</Fragment>
);
})}
</span>
)}
</h2>
</EuiTitle>

<EuiFlexGroup style={{ float: 'right' }}>
{showModelBoundsCheckbox && (
<EuiFlexItem grow={false}>
<EuiCheckbox
id="toggleModelBoundsCheckbox"
label={i18n.translate('xpack.ml.timeSeriesExplorer.showModelBoundsLabel', {
defaultMessage: 'show model bounds',
})}
checked={showModelBounds}
onChange={this.toggleShowModelBoundsHandler}
/>
</EuiFlexItem>
)}
</h2>
</EuiTitle>

<EuiFlexGroup style={{ float: 'right' }}>
{showModelBoundsCheckbox && (
<EuiFlexItem grow={false}>
<EuiCheckbox
id="toggleModelBoundsCheckbox"
label={i18n.translate('xpack.ml.timeSeriesExplorer.showModelBoundsLabel', {
defaultMessage: 'show model bounds',
})}
checked={showModelBounds}
onChange={this.toggleShowModelBoundsHandler}

{showAnnotationsCheckbox && (
<EuiFlexItem grow={false}>
<EuiCheckbox
id="toggleAnnotationsCheckbox"
label={i18n.translate('xpack.ml.timeSeriesExplorer.annotationsLabel', {
defaultMessage: 'annotations',
})}
checked={showAnnotations}
onChange={this.toggleShowAnnotationsHandler}
/>
</EuiFlexItem>
)}

{showForecastCheckbox && (
<EuiFlexItem grow={false}>
<EuiCheckbox
id="toggleShowForecastCheckbox"
label={i18n.translate('xpack.ml.timeSeriesExplorer.showForecastLabel', {
defaultMessage: 'show forecast',
})}
checked={showForecast}
onChange={this.toggleShowForecastHandler}
/>
</EuiFlexItem>
)}
</EuiFlexGroup>
<div className="ml-timeseries-chart" data-test-subj="mlSingleMetricViewerChart">
<TimeseriesChart
{...chartProps}
bounds={bounds}
detectorIndex={selectedDetectorIndex}
renderFocusChartOnly={renderFocusChartOnly}
selectedJob={selectedJob}
showAnnotations={showAnnotations}
showForecast={showForecast}
showModelBounds={showModelBounds}
/>
</div>
{showAnnotations && focusAnnotationData.length > 0 && (
<div>
<EuiTitle className="panel-title">
<h2>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.annotationsTitle"
defaultMessage="Annotations"
/>
</h2>
</EuiTitle>
<AnnotationsTable
annotations={focusAnnotationData}
isSingleMetricViewerLinkVisible={false}
isNumberBadgeVisible={true}
/>
</EuiFlexItem>
<EuiSpacer size="l" />
</div>
)}

{showAnnotationsCheckbox && (
<EuiFlexItem grow={false}>
<EuiCheckbox
id="toggleAnnotationsCheckbox"
label={i18n.translate('xpack.ml.timeSeriesExplorer.annotationsLabel', {
defaultMessage: 'annotations',
})}
checked={showAnnotations}
onChange={this.toggleShowAnnotationsHandler}
<AnnotationFlyout />
<EuiTitle className="panel-title">
<h2>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.anomaliesTitle"
defaultMessage="Anomalies"
/>
</h2>
</EuiTitle>
<EuiFlexGroup
direction="row"
gutterSize="l"
responsive={true}
className="ml-anomalies-controls"
>
<EuiFlexItem grow={false} style={{ width: '170px' }}>
<EuiFormRow
label={i18n.translate('xpack.ml.timeSeriesExplorer.severityThresholdLabel', {
defaultMessage: 'Severity threshold',
})}
>
<SelectSeverity />
</EuiFormRow>
</EuiFlexItem>
)}

{showForecastCheckbox && (
<EuiFlexItem grow={false}>
<EuiCheckbox
id="toggleShowForecastCheckbox"
label={i18n.translate('xpack.ml.timeSeriesExplorer.showForecastLabel', {
defaultMessage: 'show forecast',
<EuiFlexItem grow={false} style={{ width: '170px' }}>
<EuiFormRow
label={i18n.translate('xpack.ml.timeSeriesExplorer.intervalLabel', {
defaultMessage: 'Interval',
})}
checked={showForecast}
onChange={this.toggleShowForecastHandler}
/>
>
<SelectInterval />
</EuiFormRow>
</EuiFlexItem>
)}
</EuiFlexGroup>
<div className="ml-timeseries-chart" data-test-subj="mlSingleMetricViewerChart">
<TimeseriesChart
{...chartProps}
bounds={bounds}
detectorIndex={selectedDetectorIndex}
renderFocusChartOnly={renderFocusChartOnly}
selectedJob={selectedJob}
showAnnotations={showAnnotations}
showForecast={showForecast}
showModelBounds={showModelBounds}
/>
</EuiFlexGroup>
<EuiSpacer size="m" />
</div>
{showAnnotations && focusAnnotationData.length > 0 && (
<div>
<EuiTitle className="panel-title">
<h2>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.annotationsTitle"
defaultMessage="Annotations"
/>
</h2>
</EuiTitle>
<AnnotationsTable
annotations={focusAnnotationData}
isSingleMetricViewerLinkVisible={false}
isNumberBadgeVisible={true}
/>
<EuiSpacer size="l" />
</div>
)}
<AnnotationFlyout />
<EuiTitle className="panel-title">
<h2>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.anomaliesTitle"
defaultMessage="Anomalies"
/>
</h2>
</EuiTitle>
<EuiFlexGroup
direction="row"
gutterSize="l"
responsive={true}
className="ml-anomalies-controls"
>
<EuiFlexItem grow={false} style={{ width: '170px' }}>
<EuiFormRow
label={i18n.translate('xpack.ml.timeSeriesExplorer.severityThresholdLabel', {
defaultMessage: 'Severity threshold',
})}
>
<SelectSeverity />
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ width: '170px' }}>
<EuiFormRow
label={i18n.translate('xpack.ml.timeSeriesExplorer.intervalLabel', {
defaultMessage: 'Interval',
})}
>
<SelectInterval />
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
</div>
)}
{arePartitioningFieldsProvided && jobs.length > 0 && hasResults === true && (
Expand Down

0 comments on commit 5efc092

Please sign in to comment.