Time formatting not following browser locale settings in state history chart timeline

[sillevl]

As stated in home-assistant/core#184 (comment), the formatting of time is inconsistent in the state history chart timeline. With browser settings set to 'nl', the time is still formated in am/pm format, not in 24h format.

This problem existed also in the logbook (home-assistant/core#184 (comment)) and was fixed in #170. I believe a similar solution could be build for this issue.

The window.hassUtil.formatTime function could be used that was changed in #170 as it takes the locale setting into account when formatting dates and times. (see https://github.com/michaelarnauts/home-assistant-polymer/blob/842c5d5e89960e1bf432b210c84af69ecb424d58/src/util/hass-util.html#L132)

[michaelarnauts]

Can you attach a screenshot of the location where the time is still displayed incorrectly?

[sillevl]

Next to 'Keuken' it says '7:45 a.m. - 5:21 p.m.' This should be '7:45 - 17:21'

[michaelarnauts]

Alright, I see it also now, I didn't hover over the timeline... I'll take a look at it :)

[emlove]

The other portion is the actual timeline labels. They are currently hard-coded to 24 hours, no matter the locale. This is true anywhere we use google charts.

[michaelarnauts]

It seems you need to initialise the google charts with a language. By default this is en. (from: https://developers.google.com/chart/interactive/docs/basic_load_libs#loadwithlocale)

This should do the trick, but I'm unable to test since I'm having issues downloading python dependencies...

diff --git a/src/components/state-history-charts.html b/src/components/state-history-charts.html
index 3755040..d64e57c 100644
--- a/src/components/state-history-charts.html
+++ b/src/components/state-history-charts.html
@@ -85,6 +85,7 @@ Polymer({
   _googleApiLoaded: function () {
     window.google.load('visualization', '1', {
       packages: ['timeline', 'corechart'],
+      language: window.hassUtil.LANGUAGE,
       callback: function () {
         this._apiLoaded = true;
       }.bind(this),

[emlove]

The problem is here: https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/state-history-chart-line.html#L94 (and equivalent for timeline) where the format is hard-coded.

As I understand, the reason it's hard-coded is that google charts doesn't have an easy way to display a short time string in the locale preferred way.

[michaelarnauts]

@armills indeed, that's the second issue where the times on the h-axis are forced to 24h.

[emlove]

Ah you're right. For some reason I was thinking of the other problem. Adding the language will be good. 👍

[fantaaaaaa]

is this still on the map? quite confusing for 24h-formatted users as me in europe :)

[kaiomatico]

Can anyone please test the solution from @michaelarnauts ? I live in Germany and would like to have the logbook in 24h format, just like the rest of the ui properly does change to 24h when setting the correct language.

[andrey-git]

In #847 I'm passing navigator.language

[kaiomatico]

That's probably also a good alternative to language: window.hassUtil.LANGUAGE, , but does #847 also fix the logbook/history? Sorry if this is a dumb question

[andrey-git]

window.hassUtil.LANGUAGE is not defined.
#847 will fix history.

Logbook is already using navigator.language

[michaelarnauts]

There was a hassUtil.LANGUAGE, that took care of some browser differences since navigator.language didn't work the same on all browsers.

[mcspr]

Upgrading to 0.64, new Chart.js timeline no longer using 24 hour style as google charts did:
(Using ru-RU locale in the screenshot)

At least for tooltip, I noticed that it is using moment.format with locale based output. But there are no locales! Maybe this has something to do with packaging? (include moment-with-locales.js instead of moment.js)
https://github.com/home-assistant/home-assistant-polymer/blob/0ab240c678260e5ec9924407440415e3679f282f/src/components/entity/ha-chart-base.html#L202-L208

[c727]

@mcspr please create a new issue for this a we replaced the chart component