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 1 commit
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
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,8 @@ All properties are optional.
| labels_secondary | `hover` | `true` / `false` / `hover` | Display secondary Y-axis labels.
| name_adaptive_color | `false` | `true` / `false` | Make the name color adapt with the primary entity color.
| icon_adaptive_color | `false` | `true` / `false` | Make the icon color adapt with the primary entity color.
| grid_line_type | string | | v0.12.x | Show grids lines using `5minute` / `hour` / `day` / `week` and the value of hours_to_show
| grid_line_type | `hour` | `5minute` / `hour` / `day` / `week` | Show grids lines using and the value of hours_to_show.
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
| grid_line_frequency | 2 | | Define the frequecy of thin / thick lines you want.
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved

#### Line color object
See [dynamic line color](#dynamic-line-color) for example usage.
Expand Down
7 changes: 4 additions & 3 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,7 @@ class MiniGraphCard extends LitElement {
height, hours_to_show, show,
} = this.config;
const grid_line_type = show.grid_line_type ? show.grid_line_type : false;
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
const grid_line_frequency = show.grid_line_frequency ? show.grid_line_frequency : 2;
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved

const containerWidth = 500;
let numLines;
Expand Down Expand Up @@ -559,10 +560,10 @@ class MiniGraphCard extends LitElement {

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"/>`);
if (i % grid_line_frequency > 0) {
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="var(--divider-color)" stroke-width="0.5" opacity="0.5"/>`);
} else {
lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="lightgray" stroke-width="0.5" opacity="1"/>`);
lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="rgb(from var(--divider-color) R G B /0.5)" stroke-width="0.5" opacity="1"/>`);
JulienDeveaux marked this conversation as resolved.
Show resolved Hide resolved
}
}

Expand Down
Loading