v0.2.2
- Remove ‘+’ sign from temperature
- Add support for hourly forecasts
Please make sure you clear your browser’s cache after updating.
1 Like
Another minor update.
@Barmalej, @rsachoc, @Romquenin Now you can use hourly forecasts. To display hours instead of days, add the line mode: hourly to the card config. Example:
- type: 'custom:weather-card-chart'
title: Weather
weather: weather.openweathermap
sun: sun.sun
mode: hourly
3 Likes
I’ve added a custom locale variable to display the sunrise/sunset time to a configurable i18n locale.
- type: ‘custom:weather-card-chart’
title: Weather
weather: weather.openweathermap
sun: sun.sun
mode: hourly
locale: ‘it-IT’
the relevant parts in the js are in bold:
static get properties() {
return {
config: Object,
sunObj: Object,
tempObj: Object,
locale: String,
mode: String,
weatherObj: {
type: Object,
observer: ‘dataChanged’,
},
};
}
setConfig(config) {
this.config = config;
this.title = config.title;
this.weatherObj = config.weather;
this.sunObj = config.sun;
this.tempObj = config.temp;
this.mode = config.mode;
this.locale = config.locale;
if (!config.weather) {
throw new Error(‘Please define “weather” entity in the card config’);
}
}
set hass(hass) {
this._hass = hass;
this.weatherObj = this.config.weather in hass.states ? hass.states[this.config.weather] : null;
this.sunObj = this.config.sun in hass.states ? hass.states[this.config.sun] : null;
this.tempObj = this.config.temp in hass.states ? hass.states[this.config.temp] : null;
this.locale = this.config.locale in hass.states ? hass.states[this.config.locale] : null;
this.forecast = this.weatherObj.attributes.forecast.slice(0,9);
this.windBearing = this.weatherObj.attributes.wind_bearing;
}
computeTime(time) {
const date = new Date(time);
return date.toLocaleTimeString(this.config.locale,
{ hour:‘2-digit’, minute:‘2-digit’ }
);
}
1 Like
v0.2.3
- Added localization support. At the moment, added English and Russian languages.
- Improved alignment of conditions icons with the chart.
- Removed implied ‘+’ from the temperature chart.
- Removed ‘sun’ from config.
Please make sure you clear your browser’s cache after updating.
The card will be displayed in English if the necessary translation is not added.
But you can add the missing translation yourself in the custom-weather-card-chart.js file by following this example:
custom-weather-card-chart.js
const locale = {
en: {
tempHi: "Temperature",
tempLo: "Temperature night",
precip: "Precipitations",
uPress: "hPa",
uSpeed: "m/s",
uPrecip: "mm",
cardinalDirections: [
'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
'S', 'S-SW', 'SW', 'W-SW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
]
},
ru: {
tempHi: "Температура",
tempLo: "Температура ночью",
precip: "Осадки",
uPress: "гПа",
uSpeed: "м/с",
uPrecip: "мм",
cardinalDirections: [
'С', 'С-СВ', 'СВ', 'В-СВ', 'В', 'В-ЮВ', 'ЮВ', 'Ю-ЮВ',
'Ю', 'Ю-ЮЗ', 'ЮЗ', 'З-ЮЗ', 'З', 'З-СЗ', 'СЗ', 'С-СЗ', 'С'
]
}
};
...
Share your translations so that I can add them in future releases 
1 Like
My card is not working properly since update(with chrome, desktop, mobile), i have tried to delete the line “sun: sun.sun” with no succes:
- type: custom:card-modder
style:
border-radius: 10px
color: white
card:
type: 'custom:weather-card-chart'
weather: weather.dark_sky
sun: sun.sun
title: Météo
Here is the translation for french:
},
fr: {
tempHi: "Température",
tempLo: "Température nuit",
precip: "Précipitations",
uPress: "hPa",
uSpeed: "m/s",
uPrecip: "мм",
cardinalDirections: [
'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
'S', 'S-SO', 'SO', 'O-SO', 'O', 'O-NO', 'NO', 'N-NO', 'N'
]
1 Like
Hi Yevgeniy,
Thanks for a very nice card. Please find below translation for danish:
da: {
tempHi: “Temperatur”,
tempLo: “Temperatur nat”,
precip: “Nedbør”,
uPress: “hPa”,
uSpeed: “m/s”,
uPrecip: “mm”,
cardinalDirections: [
‘N’, ‘N-NØ’, ‘NØ’, ‘Ø-NØ’, ‘Ø’, ‘Ø-SØ’, ‘SØ’, ‘S-SØ’,
‘S’, ‘S-SV’, ‘SV’, ‘V-SV’, ‘V’, ‘V-NV’, ‘NV’, ‘N-NV’, ‘N’
]
},
1 Like
hey @Yevgeniy,
trying your card I seem to run into trouble, though the icons show correctly, I dont get the chart. Ive screenshot the regular dark sky card also:
shoudl I use a special HA version, I am still on 0.84.3. Theres huge amounts of errors on
and
Secondly, would you consider changing the title of the card into the condition state? That would really add to the visual impact of the card, compare the regular card with Gedeeltelijk Bewolkt (Partly cloudy) and your card.
Did you ever consider adding the animated icons on this card too, place would suffice as far as I can see:
thanks for considering!
cheers.
btw dutch is:
nl: {
tempHi: "Maximum temperatuur,
tempLo: "Minimum temperatuur",
precip: "Neerslag",
uPress: "hPa",
uSpeed: "m/s",
uPrecip: "mm",
cardinalDirections: [
'N', 'N-NO', 'NO', 'O-NO', 'O', 'O-ZO', 'ZO', 'Z-ZO',
'Z', 'Z-ZW', 'ZW', 'W-ZW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
]
}
@Romquenin @Mariusthvdb Please try switching the language in the profile, and then check if the chart is displayed.
I like this idea, thanks.
No, there will be no animated icons, sorry.
I have the same issue as Mariusthvdb with lack of graph. Many errors appears, like this:
ERROR (MainThread) [frontend.js.latest.201901211] http://hassio.local:8123/frontend_latest/37f2e08a5b5d5436b3f3.chunk.js:1:24343 TypeError: element._view is undefined
(message is repeated 12 times, and every time I display / scroll the page)
Unfortunately, settling locale didn’t help (tried many options). I am using met.no.
Anyway, great card 
Will try but how exactly? What is the setting in the profile config?
v0.2.4
- Added Danish, Dutch and French languages.
- Fix not drawing chart.
@Mariusthvdb, @sylas11, @Romquenin Oh, I think I found a mistake. Can you test latest 0.2.4 version?
Thank you, it’s working now 
Thanks, working here.
bingo!
is this what it should be?:
and with pop over:
added locale: nl to config to see Dutch, which works also (see days and wind bearing). Now use capitalize on the daynames to make it look somewhat more robust.
Will you change the title into the state condition?
icons are a bit off as yo can see, and Im trying to see if apparent temp could be fit in somewhere nice… 
Is there a way to remove decimals from temperature axel? I noticed that when temp stays inside a degree, it gives a decimal or even two. The problem is that the number does not then fit to the card. It doesn’t help that we are below zero so there’s ’-’ too.
Another option would be to force it to show at least 4 degrees.
Another issue - might be related to previous one. The curve does not always fit into the chart.
I tried to debug myself but I’m not familiar with javascript.
HI @Yevgeniy
not sure if you saw my post, but please note the top left icon for humidity is not aligned properly. Ive checked in the card but all seems fine thooght. Any clues where to correct this?
Feature request: Could you add the option of setting the Chart Line and Bar colors, so that these could be styled to match the current theme.
I tried to do it myself in the .js file,but simply can’t figure out how to set the color for each chart line and the preceip bar.
found another error in the card, when using Buienradar, or any other weather component using meters per second for windspeed.
currently your card uses
computeWind(speed) {
var calcSpeed = Math.round(speed * 1000 / 3600);
return calcSpeed;
}
which renders an incorrect speed when the unit is already m/s…
Ive changed it into
computeWind(speed) {
var calcSpeed = speed;
return calcSpeed;
}
which is silly of course, but at least the card shows correctly now (since you have the unit set to m/s)
If you’d want the speed to be expressed in km/h you have to *3.6, but also change the unit to display that.
Hello to all. Unfortunately now I have less free time, however I will try to release a new version with fixes in the near future.
Will be fixed in the next version.
This is a chart.js issue and unfortunately I don’t know how to solve it.
The strings are centered. It was intended, but I will try other options.
Unfortunately in the current chart implementation colors are hardcoded.