Added support for docked tooltips.

js/beestat/setting.js

@@ -85,7 +85,9 @@ beestat.setting = function(argument_1, opt_value, opt_callback) {
 
     'date_format': 'M/D/YYYY',
 
-    'units.currency': 'usd'
+    'units.currency': 'usd',
+
+    'ui.always_dock_tooltips': false
   };
 
   // Figure out what we're trying to do.

js/beestat/touch.js

@@ -1,37 +0,0 @@
-/**
- * Detect if the device is touch enabled.
- *
- * @link https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
- * @return {boolean} Whether or not the device is touch enabled.
- */
-beestat.touch = function() {
-  if (beestat.touch_ !== undefined) {
-    return beestat.touch_;
-  }
-
-  let touch = false;
-  if ('maxTouchPoints' in navigator) {
-    touch = navigator.maxTouchPoints > 0;
-  } else if ('msMaxTouchPoints' in navigator) {
-    touch = navigator.msMaxTouchPoints > 0;
-  } else {
-    var mq = window.matchMedia && matchMedia('(pointer:coarse)');
-    if (mq && mq.media === '(pointer:coarse)') {
-      touch = Boolean(mq.matches);
-    } else if ('orientation' in window) {
-      // Deprecated, but good fallback
-      touch = true;
-    } else {
-      // Only as a last resort, fall back to user agent sniffing
-      var UA = navigator.userAgent;
-      touch = (
-        (/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i).test(UA) ||
-        (/\b(Android|Windows Phone|iPad|iPod)\b/i).test(UA)
-      );
-    }
-  }
-
-  // Cache result
-  beestat.touch_ = touch;
-  return beestat.touch_;
-};

js/component/card/settings.js

@@ -16,6 +16,33 @@ beestat.component.card.settings.prototype.decorate_contents_ = function(parent)
     beestat.setting('thermostat_id')
   ];
 
+  /**
+   * User Interface
+   */
+  parent.appendChild(
+    $.createElement('p')
+      .style('font-weight', '400')
+      .innerText('User Interface')
+  );
+
+  // Always dock tooltips
+  const always_dock_tooltips = new beestat.component.input.checkbox();
+  always_dock_tooltips
+    .set_label('Always Dock Tooltips')
+    .set_checked(beestat.setting('ui.always_dock_tooltips'))
+    .render(parent);
+
+  always_dock_tooltips.addEventListener('change', function() {
+    always_dock_tooltips.set_enabled(false);
+    beestat.setting(
+      'ui.always_dock_tooltips',
+      always_dock_tooltips.get_checked(),
+      function() {
+        always_dock_tooltips.set_enabled(true);
+      }
+    );
+  });
+
   /**
    * Units
    */

js/component/chart.js

@@ -36,6 +36,12 @@ beestat.component.chart.prototype.decorate_ = function(parent) {
   options.chart.renderTo = parent[0];
 
   this.chart_ = Highcharts.chart(options);
+
+  this.docked_tooltip_container_ = $.createElement('div');
+  this.docked_tooltip_container_.style({
+    'margin-top': (beestat.style.size.gutter / 2) + 'px'
+  });
+  parent.appendChild(this.docked_tooltip_container_);
 };
 
 /**
@@ -638,7 +644,25 @@ beestat.component.chart.prototype.tooltip_formatter_helper_ = function(title, se
     }
   });
 
-  return tooltip[0].outerHTML;
+  if (this.get_dock_tooltip_() === true) {
+    this.docked_tooltip_container_.innerHTML(tooltip[0].outerHTML);
+    return '';
+  } else {
+    this.docked_tooltip_container_.innerHTML('');
+    return tooltip[0].outerHTML;
+  }
+};
+
+/**
+ * Get whether or not the tooltip should be docked.
+ *
+ * @return {boolean}
+ */
+beestat.component.chart.prototype.get_dock_tooltip_ = function() {
+  return (
+    beestat.setting('ui.always_dock_tooltips') === true ||
+    beestat.width < 600
+  );
 };
 
 /**

js/component/chart/runtime_thermostat_detail_temperature.js

@@ -405,3 +405,12 @@ beestat.component.chart.runtime_thermostat_detail_temperature.prototype.get_opti
 beestat.component.chart.runtime_thermostat_detail_temperature.prototype.get_options_chart_marginLeft_ = function() {
   return 45;
 };
+
+/**
+ * Get the height of the chart.
+ *
+ * @return {number} The height of the chart.
+ */
+beestat.component.chart.runtime_thermostat_detail_temperature.prototype.get_options_chart_height_ = function() {
+  return 350;
+};

js/component/chart/runtime_thermostat_summary.js

@@ -325,3 +325,12 @@ beestat.component.chart.runtime_thermostat_summary.prototype.get_options_xAxis_c
 beestat.component.chart.runtime_thermostat_summary.prototype.get_options_xAxis_crosshair_snap_ = function() {
   return true;
 };
+
+/**
+ * Get the height of the chart.
+ *
+ * @return {number} The height of the chart.
+ */
+beestat.component.chart.runtime_thermostat_summary.prototype.get_options_chart_height_ = function() {
+  return 350;
+};

js/js.php

@@ -43,7 +43,6 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd
   echo '<script src="/js/beestat/runtime_thermostat.js"></script>' . PHP_EOL;
   echo '<script src="/js/beestat/runtime_sensor.js"></script>' . PHP_EOL;
   echo '<script src="/js/beestat/requestor.js"></script>' . PHP_EOL;
-  echo '<script src="/js/beestat/touch.js"></script>' . PHP_EOL;
   echo '<script src="/js/beestat/crypto.js"></script>' . PHP_EOL;
   echo '<script src="/js/beestat/floor_plan.js"></script>' . PHP_EOL;
   echo '<script src="/js/beestat/address.js"></script>' . PHP_EOL;