Fixed history graph tooltip so dates are readable (#2872)

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,
+      },
     };
   }
 

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[
+              position: this._computeRTL ? "right" : "left",
-                this.hass.language
-              ].isRTL
-                ? "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",