Skip to content

Sensor card update to copy fill feature #4745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
balloob merged 1 commit into from
Feb 5, 2020
Merged

Sensor card update to copy fill feature #4745

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 68 additions & 29 deletions src/panels/lovelace/cards/hui-sensor-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,17 @@ import { SensorCardConfig } from "./types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { actionHandler } from "../common/directives/action-handler-directive";

const average = (items): number => {
return (
items.reduce((sum, entry) => sum + parseFloat(entry.state), 0) /
items.length
);
};

const lastValue = (items): number => {
return parseFloat(items[items.length - 1].state) || 0;
};

const midPoint = (
_Ax: number,
_Ay: number,
Expand Down Expand Up @@ -69,34 +80,40 @@ const calcPoints = (
max: number
): number[][] => {
const coords = [] as number[][];
const margin = 5;
const height = 80;
width -= 10;
let yRatio = (max - min) / height;
yRatio = yRatio !== 0 ? yRatio : height;
let xRatio = width / (hours - (detail === 1 ? 1 : 0));
xRatio = isFinite(xRatio) ? xRatio : width;

const first = history.filter(Boolean)[0];
let last = [average(first), lastValue(first)];

const getCoords = (item, i, offset = 0, depth = 1) => {
if (depth > 1) {
return item.forEach((subItem, index) =>
getCoords(subItem, i, index, depth - 1)
);
}
const average =
item.reduce((sum, entry) => sum + parseFloat(entry.state), 0) /
item.length;

const x = xRatio * (i + offset / 6) + margin;
const y = height - (average - min) / yRatio + margin * 2;
const x = xRatio * (i + offset / 6);

if (item) {
last = [average(item), lastValue(item)];
}
const y = height - ((item ? last[0] : last[1]) - min) / yRatio;
return coords.push([x, y]);
};

history.forEach((item, i) => getCoords(item, i, 0, detail));
for (let i = 0; i < history.length; i += 1) {
getCoords(history[i], i, 0, detail);
}
Comment on lines -94 to +110
Copy link
Copy Markdown
Member

@bramkragten bramkragten Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change?

Copy link
Copy Markdown
Contributor Author

@zsarnett zsarnett Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for when there isn't enough history to fill the hours requested. The previous method would start the line in the middle of the card if there were only 12 hours of data when 24 were requested

Copy link
Copy Markdown
Member

@bramkragten bramkragten Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be me, but I don't see a difference in what it does, just a more difficult way to write the same ;-)

Copy link
Copy Markdown
Contributor Author

@zsarnett zsarnett Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

The difference using the previous method. For loop starts at 0 and loops through no matter if the item is []. For Each ignores NULL/Undefined/[] items

Copy link
Copy Markdown
Contributor Author

@zsarnett zsarnett Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Therefore i starts at ex. 14. Meaning the first X value is 14 * xRatio


if (coords.length === 1) {
coords[1] = [width + margin, coords[0][1]];
coords[1] = [width, coords[0][1]];
}

coords.push([width + margin, coords[coords.length - 1][1]]);
coords.push([width, coords[coords.length - 1][1]]);
return coords;
};

Expand Down Expand Up @@ -227,14 +244,27 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
} else {
graph = svg`
<svg width="100%" height="100%" viewBox="0 0 500 100">
<path
d="${this._history}"
fill="none"
stroke="var(--accent-color)"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g>
<mask id="fill">
<path
class='fill'
fill='white'
d="${this._history} L 500, 100 L 0, 100 z"
/>
</mask>
<rect height="100%" width="100%" id="fill-rect" fill="var(--accent-color)" mask="url(#fill)"></rect>
<mask id="line">
<path
fill="none"
stroke="var(--accent-color)"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round"
d=${this._history}
></path>
</mask>
<rect height="100%" width="100%" id="rect" fill="var(--accent-color)" mask="url(#line)"></rect>
</g>
</svg>
`;
}
Expand All @@ -247,17 +277,15 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
.actionHandler=${actionHandler()}
tabindex="0"
>
<div class="flex">
<div class="flex header">
<div class="name">
<span>${this._config.name || computeStateName(stateObj)}</span>
</div>
<div class="icon">
<ha-icon
.icon="${this._config.icon || stateIcon(stateObj)}"
></ha-icon>
</div>
<div class="header">
<span class="name"
>${this._config.name || computeStateName(stateObj)}</span
>
</div>
</div>
<div class="flex info">
<span id="value">${stateObj.state}</span>
Expand Down Expand Up @@ -355,9 +383,9 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
display: flex;
flex-direction: column;
flex: 1;
padding: 16px;
position: relative;
cursor: pointer;
overflow: hidden;
}

ha-card:focus {
Expand All @@ -370,20 +398,25 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
}

.header {
margin: 16px 16px 0;
justify-content: space-between;
}

.name {
align-items: center;
display: flex;
min-width: 0;
opacity: 0.8;
position: relative;
}

.name {
.name > span {
display: block;
display: -webkit-box;
font-size: 1.2rem;
font-weight: 500;
max-height: 1.4rem;
margin-top: 2px;
top: 2px;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -405,7 +438,7 @@ class HuiSensorCard extends LitElement implements LovelaceCard {

.info {
flex-wrap: wrap;
margin: 16px 0 16px 8px;
margin: 16px;
}

#value {
Expand All @@ -432,11 +465,17 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
margin-bottom: 0px;
position: relative;
width: 100%;
overflow: hidden;
}

.graph > div {
align-self: flex-end;
margin: auto 8px;
margin: auto 0px;
display: flex;
}

.fill {
opacity: 0.1;
}
`;
}
Expand Down