mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Make energy graph colors brighter in dark mode (#10789)
This commit is contained in:
Philip Allgaier
GitHub
parent
85168b3a35
commit
91bb2ddcc4
@ -26,7 +26,7 @@ import {
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../../../../common/color/convert-color";
|
||||
import { labDarken } from "../../../../common/color/lab";
|
||||
import { labBrighten, labDarken } from "../../../../common/color/lab";
|
||||
import {
|
||||
EnergyData,
|
||||
getEnergyDataCollection,
|
||||
@ -247,9 +247,14 @@ export class HuiEnergyGasGraphCard
|
||||
const data: ChartDataset<"bar" | "line">[] = [];
|
||||
const entity = this.hass.states[source.stat_energy_from];
|
||||
|
||||
const borderColor =
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx)))
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
|
||||
: undefined;
|
||||
const borderColor = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: gasColor;
|
||||
|
||||
let prevValue: number | null = null;
|
||||
|
||||
@ -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 {
|
||||
ChartData,
|
||||
ChartDataset,
|
||||
@ -17,16 +11,26 @@ import {
|
||||
isToday,
|
||||
startOfToday,
|
||||
} from "date-fns";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { LovelaceCard } from "../../types";
|
||||
import { EnergySolarGraphCardConfig } from "../types";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
hex2rgb,
|
||||
lab2rgb,
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} 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 {
|
||||
EnergyData,
|
||||
EnergySolarForecasts,
|
||||
@ -34,15 +38,11 @@ import {
|
||||
getEnergySolarForecasts,
|
||||
SolarSourceTypeEnergyPreference,
|
||||
} 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 { 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")
|
||||
export class HuiEnergySolarGraphCard
|
||||
@ -258,9 +258,14 @@ export class HuiEnergySolarGraphCard
|
||||
const data: ChartDataset<"bar" | "line">[] = [];
|
||||
const entity = this.hass.states[source.stat_energy_from];
|
||||
|
||||
const borderColor =
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx)))
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
|
||||
: undefined;
|
||||
const borderColor = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: solarColor;
|
||||
|
||||
let prevValue: number | null = null;
|
||||
|
||||
@ -17,7 +17,7 @@ import {
|
||||
rgb2lab,
|
||||
hex2rgb,
|
||||
} 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 { formatNumber } from "../../../../common/number/format_number";
|
||||
import "../../../../components/chart/statistics-chart";
|
||||
@ -170,12 +170,17 @@ export class HuiEnergySourcesTableCard
|
||||
this._data!.stats[source.stat_energy_from]
|
||||
) || 0;
|
||||
totalSolar += energy;
|
||||
const color =
|
||||
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx))
|
||||
)
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
|
||||
: undefined;
|
||||
const color = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: solarColor;
|
||||
|
||||
return html`<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell cell-bullet">
|
||||
<div
|
||||
@ -229,22 +234,26 @@ export class HuiEnergySourcesTableCard
|
||||
this._data!.stats[source.stat_energy_to]
|
||||
) || 0;
|
||||
totalBattery += energyFrom - energyTo;
|
||||
const fromColor =
|
||||
|
||||
const modifiedFromColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(
|
||||
labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
|
||||
)
|
||||
)
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(batteryFromColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
|
||||
: undefined;
|
||||
const fromColor = modifiedFromColor
|
||||
? rgb2hex(lab2rgb(modifiedFromColor))
|
||||
: batteryFromColor;
|
||||
const toColor =
|
||||
const modifiedToColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(
|
||||
labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
|
||||
)
|
||||
)
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(batteryToColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
|
||||
: undefined;
|
||||
const toColor = modifiedToColor
|
||||
? rgb2hex(lab2rgb(modifiedToColor))
|
||||
: batteryToColor;
|
||||
|
||||
return html`<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell cell-bullet">
|
||||
<div
|
||||
@ -331,14 +340,17 @@ export class HuiEnergySourcesTableCard
|
||||
if (cost !== null) {
|
||||
totalGridCost += cost;
|
||||
}
|
||||
const color =
|
||||
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(
|
||||
labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
|
||||
)
|
||||
)
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
|
||||
: undefined;
|
||||
const color = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: consumptionColor;
|
||||
|
||||
return html`<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell cell-bullet">
|
||||
<div
|
||||
@ -391,12 +403,17 @@ export class HuiEnergySourcesTableCard
|
||||
if (cost !== null) {
|
||||
totalGridCost += cost;
|
||||
}
|
||||
const color =
|
||||
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(labDarken(rgb2lab(hex2rgb(returnColor)), idx))
|
||||
)
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(returnColor)), idx)
|
||||
: undefined;
|
||||
const color = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: returnColor;
|
||||
|
||||
return html`<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell cell-bullet">
|
||||
<div
|
||||
@ -473,12 +490,17 @@ export class HuiEnergySourcesTableCard
|
||||
if (cost !== null) {
|
||||
totalGasCost += cost;
|
||||
}
|
||||
const color =
|
||||
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx))
|
||||
)
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
|
||||
: undefined;
|
||||
const color = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: gasColor;
|
||||
|
||||
return html`<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell cell-bullet">
|
||||
<div
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { ChartData, ChartDataset, ChartOptions } from "chart.js";
|
||||
import {
|
||||
startOfToday,
|
||||
addHours,
|
||||
differenceInDays,
|
||||
endOfToday,
|
||||
isToday,
|
||||
differenceInDays,
|
||||
addHours,
|
||||
startOfToday,
|
||||
} from "date-fns";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
@ -17,7 +17,7 @@ import {
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} 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 {
|
||||
@ -477,9 +477,15 @@ export class HuiEnergyUsageGraphCard
|
||||
Object.entries(sources).forEach(([statId, source], idx) => {
|
||||
const data: ChartDataset<"bar">[] = [];
|
||||
const entity = this.hass.states[statId];
|
||||
const borderColor =
|
||||
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(colors[type])), idx)))
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(colors[type])), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(colors[type])), idx)
|
||||
: undefined;
|
||||
const borderColor = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: colors[type];
|
||||
|
||||
data.push({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user