jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make energy graph colors brighter in dark mode (#10789)

Browse Source
This commit is contained in:
Philip Allgaier 2021-12-12 14:10:30 +01:00 committed by GitHub
parent 85168b3a35
commit 91bb2ddcc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 107 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
View File

@ -26,7 +26,7 @@ import {
rgb2hex, rgb2hex,
rgb2lab, rgb2lab,
} from "../../../../common/color/convert-color"; } from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab"; import { labBrighten, labDarken } from "../../../../common/color/lab";
import { import {
EnergyData, EnergyData,
getEnergyDataCollection, getEnergyDataCollection,
@ -247,10 +247,15 @@ export class HuiEnergyGasGraphCard
const data: ChartDataset<"bar" | "line">[] = []; const data: ChartDataset<"bar" | "line">[] = [];
const entity = this.hass.states[source.stat_energy_from]; const entity = this.hass.states[source.stat_energy_from];
const borderColor = const modifiedColor =
idx > 0 idx > 0
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx))) ? this.hass.themes.darkMode
: gasColor; ? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
let prevValue: number | null = null; let prevValue: number | null = null;
let prevStart: string | null = null; let prevStart: string | null = null;

47
src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
View File

@ -1,9 +1,3 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import memoizeOne from "memoize-one";
import { classMap } from "lit/directives/class-map";
import "../../../../components/ha-card";
import { import {
ChartData, ChartData,
ChartDataset, ChartDataset,
@ -17,16 +11,26 @@ import {
isToday, isToday,
startOfToday, startOfToday,
} from "date-fns"; } from "date-fns";
import { HomeAssistant } from "../../../../types"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { LovelaceCard } from "../../types"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { EnergySolarGraphCardConfig } from "../types"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { import {
hex2rgb, hex2rgb,
lab2rgb, lab2rgb,
rgb2hex, rgb2hex,
rgb2lab, rgb2lab,
} from "../../../../common/color/convert-color"; } from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab"; import { labBrighten, labDarken } from "../../../../common/color/lab";
import { formatTime } from "../../../../common/datetime/format_time";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import {
formatNumber,
numberFormatToLocale,
} from "../../../../common/number/format_number";
import "../../../../components/chart/ha-chart-base";
import "../../../../components/ha-card";
import { import {
EnergyData, EnergyData,
EnergySolarForecasts, EnergySolarForecasts,
@ -34,15 +38,11 @@ import {
getEnergySolarForecasts, getEnergySolarForecasts,
SolarSourceTypeEnergyPreference, SolarSourceTypeEnergyPreference,
} from "../../../../data/energy"; } from "../../../../data/energy";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/chart/ha-chart-base";
import {
formatNumber,
numberFormatToLocale,
} from "../../../../common/number/format_number";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import { FrontendLocaleData } from "../../../../data/translation"; import { FrontendLocaleData } from "../../../../data/translation";
import { formatTime } from "../../../../common/datetime/format_time"; import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import { HomeAssistant } from "../../../../types";
import { LovelaceCard } from "../../types";
import { EnergySolarGraphCardConfig } from "../types";
@customElement("hui-energy-solar-graph-card") @customElement("hui-energy-solar-graph-card")
export class HuiEnergySolarGraphCard export class HuiEnergySolarGraphCard
@ -258,10 +258,15 @@ export class HuiEnergySolarGraphCard
const data: ChartDataset<"bar" | "line">[] = []; const data: ChartDataset<"bar" | "line">[] = [];
const entity = this.hass.states[source.stat_energy_from]; const entity = this.hass.states[source.stat_energy_from];
const borderColor = const modifiedColor =
idx > 0 idx > 0
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx))) ? this.hass.themes.darkMode
: solarColor; ? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
let prevValue: number | null = null; let prevValue: number | null = null;
let prevStart: string | null = null; let prevStart: string | null = null;

96
src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
View File

@ -17,7 +17,7 @@ import {
rgb2lab, rgb2lab,
hex2rgb, hex2rgb,
} from "../../../../common/color/convert-color"; } from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab"; import { labBrighten, labDarken } from "../../../../common/color/lab";
import { computeStateName } from "../../../../common/entity/compute_state_name"; import { computeStateName } from "../../../../common/entity/compute_state_name";
import { formatNumber } from "../../../../common/number/format_number"; import { formatNumber } from "../../../../common/number/format_number";
import "../../../../components/chart/statistics-chart"; import "../../../../components/chart/statistics-chart";
@ -170,12 +170,17 @@ export class HuiEnergySourcesTableCard
this._data!.stats[source.stat_energy_from] this._data!.stats[source.stat_energy_from]
) || 0; ) || 0;
totalSolar += energy; totalSolar += energy;
const color =
const modifiedColor =
idx > 0 idx > 0
? rgb2hex( ? this.hass.themes.darkMode
lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx)) ? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
) : labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: solarColor; : undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
<div <div
@ -229,22 +234,26 @@ export class HuiEnergySourcesTableCard
this._data!.stats[source.stat_energy_to] this._data!.stats[source.stat_energy_to]
) || 0; ) || 0;
totalBattery += energyFrom - energyTo; totalBattery += energyFrom - energyTo;
const fromColor =
const modifiedFromColor =
idx > 0 idx > 0
? rgb2hex( ? this.hass.themes.darkMode
lab2rgb( ? labBrighten(rgb2lab(hex2rgb(batteryFromColor)), idx)
labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx) : labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
) : undefined;
) const fromColor = modifiedFromColor
: batteryFromColor; ? rgb2hex(lab2rgb(modifiedFromColor))
const toColor = : batteryFromColor;
const modifiedToColor =
idx > 0 idx > 0
? rgb2hex( ? this.hass.themes.darkMode
lab2rgb( ? labBrighten(rgb2lab(hex2rgb(batteryToColor)), idx)
labDarken(rgb2lab(hex2rgb(batteryToColor)), idx) : labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
) : undefined;
) const toColor = modifiedToColor
: batteryToColor; ? rgb2hex(lab2rgb(modifiedToColor))
: batteryToColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
<div <div
@ -331,14 +340,17 @@ export class HuiEnergySourcesTableCard
if (cost !== null) { if (cost !== null) {
totalGridCost += cost; totalGridCost += cost;
} }
const color =
const modifiedColor =
idx > 0 idx > 0
? rgb2hex( ? this.hass.themes.darkMode
lab2rgb( ? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
labDarken(rgb2lab(hex2rgb(consumptionColor)), idx) : labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
) : undefined;
) const color = modifiedColor
: consumptionColor; ? rgb2hex(lab2rgb(modifiedColor))
: consumptionColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
<div <div
@ -391,12 +403,17 @@ export class HuiEnergySourcesTableCard
if (cost !== null) { if (cost !== null) {
totalGridCost += cost; totalGridCost += cost;
} }
const color =
const modifiedColor =
idx > 0 idx > 0
? rgb2hex( ? this.hass.themes.darkMode
lab2rgb(labDarken(rgb2lab(hex2rgb(returnColor)), idx)) ? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
) : labDarken(rgb2lab(hex2rgb(returnColor)), idx)
: returnColor; : undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: returnColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
<div <div
@ -473,12 +490,17 @@ export class HuiEnergySourcesTableCard
if (cost !== null) { if (cost !== null) {
totalGasCost += cost; totalGasCost += cost;
} }
const color =
const modifiedColor =
idx > 0 idx > 0
? rgb2hex( ? this.hass.themes.darkMode
lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx)) ? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
) : labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: gasColor; : undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
<div <div

20
src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
View File

@ -1,10 +1,10 @@
import { ChartData, ChartDataset, ChartOptions } from "chart.js"; import { ChartData, ChartDataset, ChartOptions } from "chart.js";
import { import {
startOfToday, addHours,
differenceInDays,
endOfToday, endOfToday,
isToday, isToday,
differenceInDays, startOfToday,
addHours,
} from "date-fns"; } from "date-fns";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@ -17,7 +17,7 @@ import {
rgb2hex, rgb2hex,
rgb2lab, rgb2lab,
} from "../../../../common/color/convert-color"; } from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab"; import { labBrighten, labDarken } from "../../../../common/color/lab";
import { formatTime } from "../../../../common/datetime/format_time"; import { formatTime } from "../../../../common/datetime/format_time";
import { computeStateName } from "../../../../common/entity/compute_state_name"; import { computeStateName } from "../../../../common/entity/compute_state_name";
import { import {
@ -477,10 +477,16 @@ export class HuiEnergyUsageGraphCard
Object.entries(sources).forEach(([statId, source], idx) => { Object.entries(sources).forEach(([statId, source], idx) => {
const data: ChartDataset<"bar">[] = []; const data: ChartDataset<"bar">[] = [];
const entity = this.hass.states[statId]; const entity = this.hass.states[statId];
const borderColor =
const modifiedColor =
idx > 0 idx > 0
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(colors[type])), idx))) ? this.hass.themes.darkMode
: colors[type]; ? labBrighten(rgb2lab(hex2rgb(colors[type])), idx)
: labDarken(rgb2lab(hex2rgb(colors[type])), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: colors[type];
data.push({ data.push({
label: label: