Feat/respect Home Assistant locale (#230)

* respect user set locale in `hours_to_show: current_week`

* Added support for plotly locales

Author: dbuezas

readme.md

@@ -296,6 +296,7 @@ Or make space inside the the plot like this:
 ```yaml
 time_offset: 3h
 ```
+
 ## Offsets
 
 Offsets are useful to shift data in the temporal axis. For example, if you have a sensor that reports the forecasted temperature 3 hours from now, it means that the current value should be plotted in the future. With the `time_offset` attribute you can shift the data so it is placed in the correct position.
@@ -952,6 +953,19 @@ refresh_interval: 0 # never update.
 refresh_interval: 5 # update every 5 seconds
 ```
 
+## localization:
+
+The locale is directly taken from Home Assistant's configuration, but can be overridden like this:
+
+```yaml
+config:
+  locale: ar
+```
+
+** Home Assistant custom Number and Date format will be ignored, only the language determines the locale **
+
+When using `hours_to_show: current_week`, the "First day of the week" configured in Home Assistant is used
+
 # deprecations:
 
 ### `no_theme`

src/duration/duration.ts

@@ -1,3 +1,4 @@
+import { HomeAssistant } from "custom-card-helpers";
 import {
   endOfDay,
   endOfHour,
@@ -6,6 +7,7 @@ import {
   endOfQuarter,
   endOfWeek,
   endOfYear,
+  setDefaultOptions,
   startOfDay,
   startOfHour,
   startOfMinute,
@@ -63,6 +65,28 @@ export const isTimeDuration = (str: any) => {
   }
 };
 
+export const setDateFnDefaultOptions = (hass: HomeAssistant) => {
+  const first_weekday: "sunday" | "saturday" | "monday" | "language" = (
+    hass.locale as any
+  ).first_weekday;
+  const weekStartsOn = (
+    {
+      language: undefined,
+      sunday: 0,
+      monday: 1,
+      tuesday: 2,
+      wednesday: 3,
+      thursday: 4,
+      friday: 5,
+      saturday: 6,
+    } as const
+  )[first_weekday];
+
+  setDefaultOptions({
+    locale: { code: hass.locale.language },
+    weekStartsOn,
+  });
+};
 export const parseRelativeTime = (str: string): [number, number] => {
   const now = new Date();
   switch (str) {
@@ -89,6 +113,7 @@ export const isRelativeTime = (str: any) => {
     parseRelativeTime(str);
     return true;
   } catch (e) {
+    console.log(e);
     return false;
   }
 };

src/parse-config/defaults.ts

@@ -87,6 +87,7 @@ const defaultYamlOptional: {
     displaylogo: false,
     scrollZoom: true,
     modeBarButtonsToRemove: ["resetScale2d", "toImage", "lasso2d", "select2d"],
+    locale: ({ hass }) => hass.locale?.language,
   },
   layout: {
     height: 285,

src/parse-config/parse-config.ts

@@ -10,6 +10,7 @@ import {
   isTimeDuration,
   parseRelativeTime,
   parseTimeDuration,
+  setDateFnDefaultOptions,
 } from "../duration/duration";
 import { parseStatistics } from "./parse-statistics";
 import { HomeAssistant } from "custom-card-helpers";
@@ -59,6 +60,7 @@ class ConfigParser {
     this.errors = [];
     this.hass = hass;
     this.yaml_with_defaults = addPreParsingDefaults(input_yaml, css_vars);
+    setDateFnDefaultOptions(hass);
 
     this.fnParam = {
       vars: {},

src/plotly.ts

@@ -59,6 +59,84 @@ Plotly.register([
 
   // components
   require("plotly.js/lib/calendars"),
+
+  // locales
+  require("plotly.js/lib/locales/af.js"),
+  require("plotly.js/lib/locales/am.js"),
+  require("plotly.js/lib/locales/ar-dz.js"),
+  require("plotly.js/lib/locales/ar-eg.js"),
+  require("plotly.js/lib/locales/ar.js"),
+  require("plotly.js/lib/locales/az.js"),
+  require("plotly.js/lib/locales/bg.js"),
+  require("plotly.js/lib/locales/bs.js"),
+  require("plotly.js/lib/locales/ca.js"),
+  require("plotly.js/lib/locales/cs.js"),
+  require("plotly.js/lib/locales/cy.js"),
+  require("plotly.js/lib/locales/da.js"),
+  require("plotly.js/lib/locales/de-ch.js"),
+  require("plotly.js/lib/locales/de.js"),
+  require("plotly.js/lib/locales/el.js"),
+  require("plotly.js/lib/locales/eo.js"),
+  require("plotly.js/lib/locales/es-ar.js"),
+  require("plotly.js/lib/locales/es-pe.js"),
+  require("plotly.js/lib/locales/es.js"),
+  require("plotly.js/lib/locales/et.js"),
+  require("plotly.js/lib/locales/eu.js"),
+  require("plotly.js/lib/locales/fa.js"),
+  require("plotly.js/lib/locales/fi.js"),
+  require("plotly.js/lib/locales/fo.js"),
+  require("plotly.js/lib/locales/fr-ch.js"),
+  require("plotly.js/lib/locales/fr.js"),
+  require("plotly.js/lib/locales/gl.js"),
+  require("plotly.js/lib/locales/gu.js"),
+  require("plotly.js/lib/locales/he.js"),
+  require("plotly.js/lib/locales/hi-in.js"),
+  require("plotly.js/lib/locales/hr.js"),
+  require("plotly.js/lib/locales/hu.js"),
+  require("plotly.js/lib/locales/hy.js"),
+  require("plotly.js/lib/locales/id.js"),
+  require("plotly.js/lib/locales/is.js"),
+  require("plotly.js/lib/locales/it.js"),
+  require("plotly.js/lib/locales/ja.js"),
+  require("plotly.js/lib/locales/ka.js"),
+  require("plotly.js/lib/locales/km.js"),
+  require("plotly.js/lib/locales/ko.js"),
+  require("plotly.js/lib/locales/lt.js"),
+  require("plotly.js/lib/locales/lv.js"),
+  require("plotly.js/lib/locales/me-me.js"),
+  require("plotly.js/lib/locales/me.js"),
+  require("plotly.js/lib/locales/mk.js"),
+  require("plotly.js/lib/locales/ml.js"),
+  require("plotly.js/lib/locales/ms.js"),
+  require("plotly.js/lib/locales/mt.js"),
+  require("plotly.js/lib/locales/nl-be.js"),
+  require("plotly.js/lib/locales/nl.js"),
+  require("plotly.js/lib/locales/no.js"),
+  require("plotly.js/lib/locales/pa.js"),
+  require("plotly.js/lib/locales/pl.js"),
+  require("plotly.js/lib/locales/pt-br.js"),
+  require("plotly.js/lib/locales/pt-pt.js"),
+  require("plotly.js/lib/locales/rm.js"),
+  require("plotly.js/lib/locales/ro.js"),
+  require("plotly.js/lib/locales/ru.js"),
+  require("plotly.js/lib/locales/si.js"),
+  require("plotly.js/lib/locales/sk.js"),
+  require("plotly.js/lib/locales/sl.js"),
+  require("plotly.js/lib/locales/sq.js"),
+  require("plotly.js/lib/locales/sr-sr.js"),
+  require("plotly.js/lib/locales/sr.js"),
+  require("plotly.js/lib/locales/sv.js"),
+  require("plotly.js/lib/locales/sw.js"),
+  require("plotly.js/lib/locales/ta.js"),
+  require("plotly.js/lib/locales/th.js"),
+  require("plotly.js/lib/locales/tr.js"),
+  require("plotly.js/lib/locales/tt.js"),
+  require("plotly.js/lib/locales/uk.js"),
+  require("plotly.js/lib/locales/ur.js"),
+  require("plotly.js/lib/locales/vi.js"),
+  require("plotly.js/lib/locales/zh-cn.js"),
+  require("plotly.js/lib/locales/zh-hk.js"),
+  require("plotly.js/lib/locales/zh-tw.js"),
 ]);
 
 export default Plotly;