kalkih / mini-graph-card

Minimalistic graph card for Home Assistant Lovelace UI
MIT License
2.97k stars 232 forks source link

Smooth color transition creates a wrong offset #723

Open bokub opened 2 years ago

bokub commented 2 years ago

Hello,

When using the color_thresholds feature with a hard transition, the colors are placed exactly like I expect them to be:

image

However, if I use the smooth transition instead (default mode), the red part completely disappears and the blue part becomes a lot bigger:

image

However, the dots have the right color when I hover the graph:

image

N.B: I'm using the version 0.11.0 of the card.

Here are the rendered linear gradients:

<!-- Hard mode -->
<linearGradient gradientTransform="rotate(90)" id="grad-vhiq9t48e-0">
            <stop stop-color="#0000ff" offset="44.77958236658934%"></stop>
            <stop stop-color="#00ff00" offset="44.78932714617168%"></stop>
            <stop stop-color="#00ff00" offset="81.32250580046383%"></stop>
            <stop stop-color="#ff0000" offset="81.33225058004618%"></stop>
            <stop stop-color="#ff0000" offset="117.86542923433832%"></stop>
            <stop stop-color="#ff0000" offset="117.87517401392067%"></stop>
</linearGradient>

<!-- Smooth mode -->
<linearGradient gradientTransform="rotate(90)" id="grad-qdc5p29le-0">
            <stop stop-color="#0000ff" offset="44.77958236658934%"></stop>
            <stop stop-color="#00ff00" offset="81.32250580046383%"></stop>
            <stop stop-color="#827c00" offset="117.86542923433832%"></stop>
</linearGradient>

I tried to manually edit the gradient offsets, and this gradient looks way better:

<linearGradient gradientTransform="rotate(90)">
            <stop stop-color="#0000ff" offset="0"></stop>
            <stop stop-color="#00ff00" offset="44.77958236658934%"></stop>
            <stop stop-color="#827c00" offset="81.32250580046383%"></stop>
</linearGradient>

image

ildar170975 commented 2 years ago

Confirm the issue: we can see circles of one color on the line of another color - but they should be of the same color: image

bokub commented 2 years ago

@jlsjonas you added the enhancement label, but don't you think it's a bug ?

jlsjonas commented 2 years ago

@bokub From your description it feels like the side effect of smoothing out the background areas. The dots to (still) have the correct color, so the base calculation should be fine; which is why I opted for the enhancement label (enhancing what is already there), but it could be considered as either.

bokub commented 2 years ago

Hmmm, I was thinking there's an error in the computed "offsets" in smooth mode, but I might be wrong.

The color of the dots and the colors in "hard" mode are just my "proofs" that the displayed color is not the one we expect to see.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!