@@ -348,66 +348,67 @@ export const AnomalyDetailsChart = React.memo(
348
348
zoomRange . endDate ,
349
349
] ) ;
350
350
351
-
352
351
const customAnomalyContributionTooltip = ( details ?: string ) => {
353
352
const anomaly = details ? JSON . parse ( details ) : undefined ;
354
- const contributionData = get ( anomaly , `contributions` , [ ] )
353
+ const contributionData = get ( anomaly , `contributions` , [ ] ) ;
355
354
356
- const featureData = get ( anomaly , `features` , { } )
355
+ const featureData = get ( anomaly , `features` , { } ) ;
357
356
let featureAttributionList = [ ] as any [ ] ;
358
357
if ( Array . isArray ( contributionData ) ) {
359
358
contributionData . map ( ( contribution : any ) => {
360
- const featureName = get ( get ( featureData , contribution . feature_id , "" ) , "name" , "" )
361
- const dataString = ( contribution . data * 100 ) + "%"
359
+ const featureName = get (
360
+ get ( featureData , contribution . feature_id , '' ) ,
361
+ 'name' ,
362
+ ''
363
+ ) ;
364
+ const dataString = contribution . data * 100 + '%' ;
362
365
featureAttributionList . push (
363
366
< div >
364
367
{ featureName } : { dataString } < br />
365
368
</ div >
366
- )
367
- } )
369
+ ) ;
370
+ } ) ;
368
371
} else {
369
372
for ( const [ , value ] of Object . entries ( contributionData ) ) {
370
373
featureAttributionList . push (
371
374
< div >
372
375
{ value . name } : { value . attribution } < br />
373
376
</ div >
374
- )
377
+ ) ;
375
378
}
376
379
}
377
380
return (
378
381
< div >
379
382
< EuiText size = "xs" >
380
383
< EuiIcon type = "list" /> < b > Feature Contribution: </ b >
381
384
{ anomaly ? (
382
- < p >
383
- < hr style = { { color : '#E0E0E0' } } > </ hr >
384
- { featureAttributionList }
385
- </ p >
386
- ) : null }
385
+ < p >
386
+ < hr style = { { color : '#E0E0E0' } } > </ hr >
387
+ { featureAttributionList }
388
+ </ p >
389
+ ) : null }
387
390
</ EuiText >
388
391
</ div >
389
392
) ;
390
393
} ;
391
394
392
-
393
395
const generateContributionAnomalyAnnotations = (
394
396
anomalies : AnomalyData [ ] [ ]
395
397
) : any [ ] [ ] => {
396
398
let annotations = [ ] as any [ ] ;
397
399
anomalies . forEach ( ( anomalyTimeSeries : AnomalyData [ ] ) => {
398
400
annotations . push (
399
- Array . isArray ( anomalyTimeSeries ) ? (
400
- anomalyTimeSeries
401
- . filter ( ( anomaly : AnomalyData ) => anomaly . anomalyGrade > 0 )
402
- . map ( ( anomaly : AnomalyData ) => (
403
- {
404
- coordinates : {
405
- x0 : anomaly . startTime ,
406
- x1 : anomaly . endTime + ( anomaly . endTime - anomaly . startTime ) ,
407
- } ,
408
- details : `${ JSON . stringify ( anomaly ) } `
409
- } ) )
410
- ) : [ ]
401
+ Array . isArray ( anomalyTimeSeries )
402
+ ? anomalyTimeSeries
403
+ . filter ( ( anomaly : AnomalyData ) => anomaly . anomalyGrade > 0 )
404
+ . map ( ( anomaly : AnomalyData ) => ( {
405
+ coordinates : {
406
+ x0 : anomaly . startTime ,
407
+ x1 : anomaly . endTime + ( anomaly . endTime - anomaly . startTime ) ,
408
+ } ,
409
+ details : `${ JSON . stringify ( anomaly ) } ` ,
410
+ } ) )
411
+ : [ ]
411
412
) ;
412
413
} ) ;
413
414
return annotations ;
@@ -601,7 +602,9 @@ export const AnomalyDetailsChart = React.memo(
601
602
/>
602
603
) }
603
604
< RectAnnotation
604
- dataValues = { flattenData ( generateContributionAnomalyAnnotations ( zoomedAnomalies ) ) }
605
+ dataValues = { flattenData (
606
+ generateContributionAnomalyAnnotations ( zoomedAnomalies )
607
+ ) }
605
608
id = "featureAttributionAnnotation"
606
609
style = { {
607
610
stroke : CHART_COLORS . ANOMALY_GRADE_COLOR ,
@@ -610,8 +613,8 @@ export const AnomalyDetailsChart = React.memo(
610
613
fill : CHART_COLORS . ANOMALY_GRADE_COLOR ,
611
614
} }
612
615
renderTooltip = { customAnomalyContributionTooltip }
613
- />
614
-
616
+ />
617
+
615
618
{ alertAnnotations ? (
616
619
< LineAnnotation
617
620
id = "alertAnnotation"
@@ -683,31 +686,31 @@ export const AnomalyDetailsChart = React.memo(
683
686
get ( anomalySeries , '0.entity' , [ ] ) ,
684
687
', '
685
688
) } )`
686
- : props . anomalyGradeSeriesName ;
687
- return (
688
- < LineSeries
689
- id = { seriesKey }
690
- name = { seriesKey }
691
- color = {
692
- multipleTimeSeries
693
- ? ENTITY_COLORS [ index ]
694
- : CHART_COLORS . ANOMALY_GRADE_COLOR
695
- }
696
- data = { anomalySeries }
697
- xScaleType = {
698
- showAggregateResults
699
- ? ScaleType . Ordinal
700
- : ScaleType . Time
701
- }
702
- yScaleType = { ScaleType . Linear }
703
- xAccessor = {
704
- showAggregateResults
705
- ? CHART_FIELDS . AGG_INTERVAL
706
- : CHART_FIELDS . PLOT_TIME
707
- }
708
- yAccessors = { [ CHART_FIELDS . ANOMALY_GRADE ] }
709
- />
710
- )
689
+ : props . anomalyGradeSeriesName ;
690
+ return (
691
+ < LineSeries
692
+ id = { seriesKey }
693
+ name = { seriesKey }
694
+ color = {
695
+ multipleTimeSeries
696
+ ? ENTITY_COLORS [ index ]
697
+ : CHART_COLORS . ANOMALY_GRADE_COLOR
698
+ }
699
+ data = { anomalySeries }
700
+ xScaleType = {
701
+ showAggregateResults
702
+ ? ScaleType . Ordinal
703
+ : ScaleType . Time
704
+ }
705
+ yScaleType = { ScaleType . Linear }
706
+ xAccessor = {
707
+ showAggregateResults
708
+ ? CHART_FIELDS . AGG_INTERVAL
709
+ : CHART_FIELDS . PLOT_TIME
710
+ }
711
+ yAccessors = { [ CHART_FIELDS . ANOMALY_GRADE ] }
712
+ />
713
+ ) ;
711
714
}
712
715
) }
713
716
</ Chart >
0 commit comments