frontend: improve chart percentage calculation

This commit fixes a regression that was introduced in commit
a9a26db that prepended a zero to the data set. With that change
the percentage calculation was not correct anymore, leading
sometimes to infinite loading skeleton. With this update, the
percentage change is correctly computed based on the first
non-zero data point.

Additionally, this update modifies the rendering of the percentage
change. if `hasDifference` is false, it won't be rendered at
all.

Refactor variable name 'hasDifferenece' to 'hasDifference'
to correct a typo.

Author: strmci

frontends/web/src/routes/account/summary/chart.tsx

@@ -388,7 +388,9 @@ class Chart extends Component<Props, State> {
       this.setState({ difference: 0, diffSince: '' });
       return;
     }
-    const valueFrom = data[rangeFrom].value;
+    // data should always have at least two data points and when the first
+    // value is 0 we take the next value as valueFrom to calculate valueDiff
+    const valueFrom = data[rangeFrom].value === 0 ? data[rangeFrom + 1].value : data[rangeFrom].value;
     const valueTo = this.props.data.chartTotal;
     const valueDiff = valueTo ? valueTo - valueFrom : 0;
     this.setState({
@@ -484,7 +486,7 @@ class Chart extends Component<Props, State> {
       toolTipTime,
       isMobile
     } = this.state;
-    const hasDifferenece = difference && Number.isFinite(difference);
+    const hasDifference = difference && Number.isFinite(difference);
     const hasData = this.hasData();
     const hasHourlyData = this.hasHourlyData();
     const disableFilters = !hasData || chartDataMissing;
@@ -516,10 +518,10 @@ class Chart extends Component<Props, State> {
               </span>
             </div>
             {!showMobileTotalValue ?
-              <span className={!hasDifferenece ? '' : (
+              <span className={!hasDifference ? '' : (
                 styles[difference < 0 ? 'down' : 'up']
               )} title={diffSince}>
-                {hasDifferenece ? (
+                {hasDifference ? (
                   <>
                     <span className={styles.arrow}>
                       {(difference < 0) ? (<ArrowUp />) : (<ArrowDown />)}
@@ -529,7 +531,7 @@ class Chart extends Component<Props, State> {
                       <span className={styles.diffUnit}>%</span>
                     </span>
                   </>
-                ) : chartTotal === 0 ? null : (<Skeleton fontSize="1.125rem" minWidth="125px" />)}
+                ) : null}
               </span>
               :
               <span className={styles.diffValue}>