From 178e4de452bb8ebe0eece75c323169e435294861 Mon Sep 17 00:00:00 2001
From: yosilevy <37745463+yosilevy@users.noreply.github.com>
Date: Fri, 1 Mar 2019 20:59:17 +0200
Subject: [PATCH] Fixed history graph tooltip so dates are readable (#2872)

---
 src/components/entity/ha-chart-base.js         | 11 +++++++++++
 src/components/state-history-chart-timeline.js | 16 +++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index 4fca809873..7d0a45d4b4 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -60,6 +60,9 @@ class HaChartBase extends mixinBehaviors(
           width: 200px;
           transition: opacity 0.15s ease-in-out;
         }
+        :host([rtl]) .chartTooltip {
+          direction: rtl;
+        }
         .chartLegend ul,
         .chartTooltip ul {
           display: inline-block;
@@ -99,6 +102,10 @@ class HaChartBase extends mixinBehaviors(
           margin-right: 4px;
           width: 10px;
         }
+        :host([rtl]) .chartTooltip em {
+          margin-right: inherit;
+          margin-left: 4px;
+        }
         paper-icon-button {
           color: var(--secondary-text-color);
         }
@@ -169,6 +176,10 @@ class HaChartBase extends mixinBehaviors(
         }),
       },
       unit: Object,
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
     };
   }
 
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index 2c31443f8b..ef0c91a87e 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -7,6 +7,7 @@ import LocalizeMixin from "../mixins/localize-mixin";
 import "./entity/ha-chart-base";
 
 import formatDateTime from "../common/datetime/format_date_time";
+import { computeRTL } from "../common/util/compute_rtl";
 
 class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
   static get template() {
@@ -28,6 +29,7 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
       <ha-chart-base
         data="[[chartData]]"
         rendered="{{rendered}}"
+        rtl="{{rtl}}"
       ></ha-chart-base>
     `;
   }
@@ -50,6 +52,10 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
         value: false,
         reflectToAttribute: true,
       },
+      rtl: {
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -189,11 +195,7 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
               afterSetDimensions: (yaxe) => {
                 yaxe.maxWidth = yaxe.chart.width * 0.18;
               },
-              position: this.hass.translationMetadata.translations[
-                this.hass.language
-              ].isRTL
-                ? "right"
-                : "left",
+              position: this._computeRTL ? "right" : "left",
             },
           ],
         },
@@ -209,6 +211,10 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
     };
     this.chartData = chartOptions;
   }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 customElements.define(
   "state-history-chart-timeline",