Last active
May 29, 2023 03:09
-
-
Save thomasloven/5ee36708908569c8e168419557cefd08 to your computer and use it in GitHub Desktop.
Replace history graph colors in lovelace
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Add this to your lovelace resources as | |
// url: /local/chart-colors.js | |
// type: module | |
customElements.whenDefined('ha-chart-base').then(() => { | |
// Find the HaChartBase class | |
const HaChartBase = customElements.get('ha-chart-base'); | |
// Write a new color list generator | |
function getColorList(cnt) { | |
let retval = []; | |
// This one just makes a list of all magenta | |
while(cnt--) | |
retval.push(Color().rgb(255,0,255)); | |
return retval; | |
} | |
// Replace the color list generator in the base class | |
HaChartBase.getColorList = getColorList; | |
// Force lovelace to redraw everything | |
const ev = new Event("ll-rebuild", { | |
bubbles: true, | |
cancelable: false, | |
composed: true, | |
}); | |
var root = document.querySelector("home-assistant"); | |
root = root && root.shadowRoot; | |
root = root && root.querySelector("home-assistant-main"); | |
root = root && root.shadowRoot; | |
root = root && root.querySelector("app-drawer-layout partial-panel-resolver"); | |
root = root && root.shadowRoot || root; | |
root = root && root.querySelector("ha-panel-lovelace"); | |
root = root && root.shadowRoot; | |
root = root && root.querySelector("hui-root"); | |
root = root && root.shadowRoot; | |
root = root && root.querySelector("ha-app-layout #view"); | |
root = root && root.firstElementChild; | |
if (root) root.dispatchEvent(ev); | |
}); |
@backcountrymountains - I found this additional documentation: https://www.home-assistant.io/integrations/frontend/#state-color It looks like those options are just for "binary" sensors, have you come across a way to set the color for other states (like those for a sensor, where there might be 3 or more states)?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi, thanks for a pretty fast answer, and thank you for this partial work-arround - I will definitely implement this...
is there plz also a way to make custom colors for other states than just for basic ones in the horizontal history graph?
(e.g.: instead of the state "off" there is also "offline", "down", "closed" etc., for some entities...)
I can't imagine mapping all those entities to some virtual helpers with "off" state, since there are hundreds oh these... the best would be imho, if there is just some user predefined 'color-states-array' used in the Theme.yaml in the same way as you wrote.
thx.