Updated time bar to be slightly darker past the most recent data point

js/component/card/three_d.js

@@ -357,32 +357,7 @@ beestat.component.card.three_d.prototype.decorate_drawing_pane_ = function(paren
       beestat.setting('visualize.range_dynamic') === 0 &&
       sensor_ids.length > 0
     ) {
-      // Find the most recent date there is data from the participating sensors.
+      this.date_m_ = this.get_most_recent_time_with_data_();
-      let keys = [];
-      sensor_ids.forEach(function(sensor_id) {
-        if (self.get_data_().series[beestat.setting('visualize.data_type')][sensor_id] !== undefined) {
-          keys = keys.concat(Object.keys(
-            self.get_data_().series[beestat.setting('visualize.data_type')][sensor_id]
-          ));
-        }
-      });
-
-      let hour;
-      let minute;
-      if (keys.length > 0) {
-        keys.sort();
-        const key_parts = keys[keys.length - 1].split(':');
-        hour = key_parts[0];
-        minute = key_parts[1];
-      } else {
-        hour = 0;
-        minute = 0;
-      }
-
-      this.date_m_ = moment()
-        .hour(hour)
-        .minute(minute)
-        .second(0);
     } else {
       this.date_m_ = moment()
         .subtract(
@@ -585,7 +560,9 @@ beestat.component.card.three_d.prototype.get_chart_gradient_ = function(thermost
   const data = this.get_data_();
 
   const background_color_rgb = beestat.style.hex_to_rgb(beestat.style.color.bluegray.base);
+  const no_data_color_rgb = beestat.style.hex_to_rgb(beestat.style.color.bluegray.dark);
   const background_color = 'rgba(' + background_color_rgb.r + ',' + background_color_rgb.g + ',' + background_color_rgb.b + ',1)';
+  const no_data_color = 'rgba(' + no_data_color_rgb.r + ',' + no_data_color_rgb.g + ',' + no_data_color_rgb.b + ',1)';
 
   let current_color = background_color;
   const gradient = [
@@ -595,11 +572,17 @@ beestat.component.card.three_d.prototype.get_chart_gradient_ = function(thermost
     }
   ];
 
+  const last_data_m = this.get_most_recent_time_with_data_();
+
   const date_m = moment();
   for (let i = 0; i < 287; i++) {
     const minute_of_day = i * 5;
     date_m.hours(Math.floor(minute_of_day / 60));
     date_m.minutes(Math.floor(minute_of_day % 60));
+
+    let this_color = background_color;
+
+    if (last_data_m === null || date_m.isAfter(last_data_m) === false) {
       const time = date_m.format('HH:mm');
 
       let red = 0;
@@ -608,7 +591,6 @@ beestat.component.card.three_d.prototype.get_chart_gradient_ = function(thermost
       let alpha = 0;
       let count = 0;
 
-    let this_color = background_color;
       [
         'fan',
         'compressor_heat_1',
@@ -655,6 +637,9 @@ beestat.component.card.three_d.prototype.get_chart_gradient_ = function(thermost
           this_color = background_color;
         }
       });
+    } else {
+      this_color = no_data_color;
+    }
 
     if (this_color !== current_color) {
       gradient.push({
@@ -1159,3 +1144,40 @@ beestat.component.card.three_d.prototype.get_gradient_ = function() {
     );
   }
 };
+
+beestat.component.card.three_d.prototype.get_most_recent_time_with_data_ = function() {
+  const self = this;
+
+  const sensor_ids = Object.keys(
+    beestat.floor_plan.get_sensor_ids_map(this.floor_plan_id_)
+  );
+  if (sensor_ids.length > 0) {
+    let keys = [];
+    sensor_ids.forEach(function(sensor_id) {
+      if (self.get_data_().series[beestat.setting('visualize.data_type')][sensor_id] !== undefined) {
+        keys = keys.concat(Object.keys(
+          self.get_data_().series[beestat.setting('visualize.data_type')][sensor_id]
+        ));
+      }
+    });
+
+    let hour;
+    let minute;
+    if (keys.length > 0) {
+      keys.sort();
+      const key_parts = keys[keys.length - 1].split(':');
+      hour = key_parts[0];
+      minute = key_parts[1];
+    } else {
+      hour = 0;
+      minute = 0;
+    }
+
+    return moment()
+      .hour(hour)
+      .minute(minute)
+      .second(0);
+  }
+
+  return null;
+};