Fix chart tooltip format for line charts (#1099)

* position tooltip correctly if chart is in history_graph card

* format & localize title in linechart

* tweak tooltip style/position

src/components/entity/ha-chart-base.html

@@ -41,7 +41,7 @@
         color: white;
         border-radius: 3px;
         pointer-events: none;
-        transform: translate(-50%, 5px);
+        transform: translate(-50%, 12px);
         z-index: 1000;
         width: 200px;
         transition: opacity 0.15s ease-in-out;
@@ -50,7 +50,7 @@
       .chartTooltip ul {
         display: inline-block;
         padding: 0 0px;
-        margin: 8px 0 0 0;
+        margin: 5px 0 0 0;
         width: 100%
       }
       .chartTooltip li {
@@ -59,6 +59,7 @@
       }
       .chartTooltip .title {
         text-align: center;
+        font-weight: 500;
       }
       .chartLegend li {
         display: inline-block;
@@ -161,8 +162,8 @@
             opacity: '0',
             left: '0',
             top: '0',
-            xPadding: '0',
+            xPadding: '5',
-            yPadding: '0'
+            yPadding: '3'
           })
         },
         unit: Object,
@@ -245,20 +246,7 @@
       }
 
       const title = tooltip.title ? tooltip.title[0] || '' : '';
-      let titleDate = null;
+      this.set(['tooltip', 'title'], title);
-      let formattedTitle;
-      if (title instanceof Date) {
-        titleDate = title;
-      } else if (title instanceof moment) {
-        titleDate = title.toDate();
-      }
-
-      if (titleDate === null) {
-        formattedTitle = title;
-      } else {
-        formattedTitle = window.hassUtil.formatDateTime(titleDate);
-      }
-      this.set(['tooltip', 'title'], formattedTitle);
 
       const bodyLines = tooltip.body.map(n => n.lines);
 

src/components/ha-cards.html

@@ -18,6 +18,7 @@
         padding-top: 8px;
         padding-right: 8px;
         transform: translateZ(0);
+        position: relative;
       }
 
       .badges {

src/components/state-history-chart-line.html

@@ -235,6 +235,13 @@ class StateHistoryChartLine extends Polymer.Element {
       Array.prototype.push.apply(datasets, data);
     });
 
+    const formatTooltipTitle = function (items, data) {
+      const item = items[0];
+      const date = data.datasets[item.datasetIndex].data[item.index].x;
+
+      return window.hassUtil.formatDateTime(date);
+    };
+
     const chartOptions = {
       type: 'line',
       unit: unit,
@@ -257,6 +264,9 @@ class StateHistoryChartLine extends Polymer.Element {
         },
         tooltips: {
           mode: 'neareach',
+          callbacks: {
+            title: formatTooltipTitle
+          },
         },
         hover: {
           mode: 'neareach',