Skip to content
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

feat: add grid lines #1179

Open
wants to merge 12 commits into
base: dev
Choose a base branch
from
+55 −2
Open

feat: add grid lines #1179

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9dfa15b
feat: add grid lines
JulienDeveaux Dec 12, 2024
e875f7c
style: better looking grid lines
JulienDeveaux Dec 12, 2024
70105ef
refactor: move grid_line_type to show options & add 5minute variant
JulienDeveaux Dec 13, 2024
5956678
style: use ha variable color & let user decide thick / thin lines fre…
JulienDeveaux Dec 13, 2024
6e6492b
fix: redundant stroke
JulienDeveaux Dec 13, 2024
9dd491a
update readme
JulienDeveaux Dec 13, 2024
cdc7451
feat: safety check on grid lines ratio & update readme
JulienDeveaux Dec 13, 2024
d905261
fix readme
JulienDeveaux Dec 13, 2024
a950796
style: better grid lines customizability
JulienDeveaux Dec 13, 2024
8d47c1c
style: better classes & doc
JulienDeveaux Dec 13, 2024
abbddeb
refactor: render grid lines algo from ildar170975
JulienDeveaux Dec 14, 2024
e8355ea
fix: build
JulienDeveaux Dec 14, 2024
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ We recommend looking at the [Example usage section](#example-usage) to understan
| state_map | [state map object](#state-map-object) | | v0.8.0 | List of entity states to convert (order matters as position becomes a value on the graph).
| value_factor | number | 0 | v0.9.4 | Scale value by order of magnitude (e.g. convert Watts to kilo Watts), use negative value to scale down.
| logarithmic | boolean | `false` | v0.10.0 | Use a Logarithmic scale for the graph
| grid_line_type | string | | v0.12.x | Show grids lines using `hour` / `day` / `week` and the value of hours_to_show
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved


#### Entities object
Expand Down
41 changes: 40 additions & 1 deletion src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -507,11 +507,12 @@ class MiniGraphCard extends LitElement {
}

renderSvg() {
const { height } = this.config;
const { height, grid_line_type = false } = this.config;
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
return svg`
<svg width='100%' height=${height !== 0 ? '100%' : 0} viewBox='0 0 500 ${height}'
@click=${e => e.stopPropagation()}>
<g>
${grid_line_type ? this.renderGridLines() : ''}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Probably next "layers" will "overlay" the grid & make it less visible. I am thinking about drawing the grid AFTER these layers. But let's leave it this way & test...

Copy link
Author

Choose a reason for hiding this comment

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

I tried to move it around, but I don't see any visual changes to that

Copy link
Collaborator

Choose a reason for hiding this comment

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

don't see any visual changes to that

OK, we'll test it together

JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
<defs>
${this.renderSvgGradient(this.gradient)}
</defs>
Expand All @@ -525,6 +526,44 @@ class MiniGraphCard extends LitElement {
</svg>`;
}

renderGridLines() {
const {
height, hours_to_show, grid_line_type,
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
} = this.config;

const containerWidth = 500;
let numLines;
let xRatio;

switch (grid_line_type) {
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
case 'hour':
default:
numLines = hours_to_show;
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
xRatio = containerWidth / numLines;
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
break;
case 'day':
numLines = Math.round(hours_to_show / 24);
xRatio = (containerWidth / numLines);
break;
case 'week':
numLines = Math.round(hours_to_show / 168);
xRatio = containerWidth / numLines;
break;
}
const lines = [];

for (let i = 0; i < numLines; i += 1) {
const x = xRatio * (i + 0.5);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Assume we have hours_to_show=2 & grid_line_type=hour.
Then numLines = 2 & xRatio = 250.
Then we will have 2 lines - for 125 & 375, i.e. for hour=0.5 & hour=1.5.
And the 1st line will be "thin" (0 % 2 === 0), the 2nd line will be "thick" (1 % 2 = 1).
Not nice.
ALternatively we can make "thin" lines for "hour=0.5" & "hour=1.5", and "thick" line for "hour=1".
What do you think?
Also, can we turn a "frequency" - that "2" value - into an option like grid_line_????? to define which lines should be "thin"?

Copy link
Author

Choose a reason for hiding this comment

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

done

Copy link
Collaborator

Choose a reason for hiding this comment

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

We still have an issue here.
If hours_to_show = 2, we will get the left picture (thick line on 125, thin on 375), but we need to get the right picture (thick line on 250):
image

Copy link
Author

Choose a reason for hiding this comment

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

yeah that's the 0.5 in this line const x = xRatio * (i + 0.5);
If I remove it the first line is kinda hidden in the border and I find it wierd, that's why there is an offset

Copy link
Collaborator

Choose a reason for hiding this comment

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

I am trying now to adapt the algorithm to a fractional hours_to_show. For int values already made it, but for fractional more difficult story.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Please check my addition below (currently last comment in the thread).

Copy link
Author

Choose a reason for hiding this comment

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

refactored

Copy link
Collaborator

Choose a reason for hiding this comment

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

Very good.
Look, I have a little experience in JS - so have lots of doubts.
In C we need to provide things like

foo = a / float(b);

to avoid undesired conversions.
Is it properly handled in JS? Don't we need to write additional checks or explicit conversions ?

if (i % 2 === 0) {
lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="lightgray" stroke-width="0.5" opacity="0.5"/>`);
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
} else {
lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="lightgray" stroke-width="0.5" opacity="1"/>`);
}
}

return lines;
}

setTooltip(entity, index, value, label = null) {
const {
group_by,
Expand Down
Loading