@@ -388,7 +388,9 @@ class Chart extends Component<Props, State> {
388
388
this . setState ( { difference : 0 , diffSince : '' } ) ;
389
389
return ;
390
390
}
391
- const valueFrom = data [ rangeFrom ] . value ;
391
+ // data should always have at least two data points and when the first
392
+ // value is 0 we take the next value as valueFrom to calculate valueDiff
393
+ const valueFrom = data [ rangeFrom ] . value === 0 ? data [ rangeFrom + 1 ] . value : data [ rangeFrom ] . value ;
392
394
const valueTo = this . props . data . chartTotal ;
393
395
const valueDiff = valueTo ? valueTo - valueFrom : 0 ;
394
396
this . setState ( {
@@ -484,7 +486,7 @@ class Chart extends Component<Props, State> {
484
486
toolTipTime,
485
487
isMobile
486
488
} = this . state ;
487
- const hasDifferenece = difference && Number . isFinite ( difference ) ;
489
+ const hasDifference = difference && Number . isFinite ( difference ) ;
488
490
const hasData = this . hasData ( ) ;
489
491
const hasHourlyData = this . hasHourlyData ( ) ;
490
492
const disableFilters = ! hasData || chartDataMissing ;
@@ -516,10 +518,10 @@ class Chart extends Component<Props, State> {
516
518
</ span >
517
519
</ div >
518
520
{ ! showMobileTotalValue ?
519
- < span className = { ! hasDifferenece ? '' : (
521
+ < span className = { ! hasDifference ? '' : (
520
522
styles [ difference < 0 ? 'down' : 'up' ]
521
523
) } title = { diffSince } >
522
- { hasDifferenece ? (
524
+ { hasDifference ? (
523
525
< >
524
526
< span className = { styles . arrow } >
525
527
{ ( difference < 0 ) ? ( < ArrowUp /> ) : ( < ArrowDown /> ) }
@@ -529,7 +531,7 @@ class Chart extends Component<Props, State> {
529
531
< span className = { styles . diffUnit } > %</ span >
530
532
</ span >
531
533
</ >
532
- ) : chartTotal === 0 ? null : ( < Skeleton fontSize = "1.125rem" minWidth = "125px" /> ) }
534
+ ) : null }
533
535
</ span >
534
536
:
535
537
< span className = { styles . diffValue } >
0 commit comments