Handle x band for future period.

src/operations/balanceChart.component.ts

@@ -45,6 +45,11 @@ export class BalanceChartComponent implements OnChanges {
     displayText: 'Date',
     baseUnit: 'day',
 
+    bands: [{
+      fillColor: 'blue',
+      opacity: 0.10
+    }],
+
     rangeSelector: {
       size: 80,
       padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
@@ -114,9 +119,13 @@ export class BalanceChartComponent implements OnChanges {
     ).subscribe((results) => {
       this.data = results;
 
+      let lastResult = results[results.length -1];
+
+      this.updateXBands(results[0].operation_date, lastResult.operation_date);
+
       this.onUpdate.emit({
         minDate: moment(results[0].operation_date).toDate(),
-        maxDate: moment(results[results.length - 1].operation_date).toDate()
+        maxDate: moment(lastResult.operation_date).toDate()
       });
     });
   }
@@ -137,8 +146,22 @@ export class BalanceChartComponent implements OnChanges {
     }
   }
 
+  updateXBands(minDate, maxDate) {
+    if(moment(maxDate) > moment()) {
+      if(moment(minDate) < moment()) {
+        this.xAxis.bands[0].minValue = moment().toDate();
+      } else {
+        this.xAxis.bands[0].minValue = moment(minDate).toDate();
+      }
+      this.xAxis.bands[0].maxValue = moment(maxDate).toDate();
+    }
+  }
+
   select(event: any) {
     let args = event.args;
+
+    this.updateXBands(args.minValue, args.maxValue);
+
     this.onUpdate.emit({minDate: args.minValue, maxDate: args.maxValue});
   }
 }