Fix last point of line charts. And small other fixes to line charts. (#…

…21235)

* Fixes last point of graphs.

Especially for items that don't often change state, the last state could
be essentially be ignored for quite a while, using the average of the
last series of entries instead.

Also for detailed graphs, the initial values could be off, because the
initial last value would be computed on bad data, resulting in NaN.

And no longer adds a double entry at end if graph has only one point.

src/panels/lovelace/common/graph/coordinates.ts

@@ -22,9 +22,15 @@ const calcPoints = (
   let xRatio = width / (hours - (detail === 1 ? 1 : 0));
   xRatio = isFinite(xRatio) ? xRatio : width;
 
-  const first = history.filter(Boolean)[0];
+  let first = history.filter(Boolean)[0];
+  if (detail > 1) {
+    first = first.filter(Boolean)[0];
+  }
   let last = [average(first), lastValue(first)];
 
+  const getY = (value: number): number =>
+    height + strokeWidth / 2 - (value - min) / yRatio;
+
   const getCoords = (item: any[], i: number, offset = 0, depth = 1) => {
     if (depth > 1 && item) {
       return item.forEach((subItem, index) =>
@@ -37,20 +43,15 @@ const calcPoints = (
     if (item) {
       last = [average(item), lastValue(item)];
     }
-    const y =
-      height + strokeWidth / 2 - ((item ? last[0] : last[1]) - min) / yRatio;
+    const y = getY(item ? last[0] : last[1]);
     return coords.push([x, y]);
   };
 
   for (let i = 0; i < history.length; i += 1) {
     getCoords(history[i], i, 0, detail);
   }
 
-  if (coords.length === 1) {
-    coords[1] = [width, coords[0][1]];
-  }
-
-  coords.push([width, coords[coords.length - 1][1]]);
+  coords.push([width, getY(last[1])]);
   return coords;
 };