Fix entities with offsets break autoranging

Author: dbuezas

readme.md

@@ -278,6 +278,14 @@ entities:
 
 ![Graph with offsets](docs/resources/offset-temperature.png)
 
+### Caveats
+
+The following exceptions apply to traces with offsets:
+
+- They get their own cache, meaning that data will be fetched twice if the same entity is in the plot with a different (or no) offset.
+- Websocket state updates are not used to fill their cache (but a request to the server may be triggered)
+- `extend_to_present` is ignored (because extending to an offset present may be far into the future and that messes up with autorange)
+
 ### Now line
 
 When using offsets, it is useful to have a line that indicates the current time. This can be done by using a lambda function that returns a line with the current time as x value and 0 and 1 as y values. The line is then hidden from the legend.

src/cache/Cache.ts

@@ -99,11 +99,11 @@ async function fetchSingleRange(
 
 export function getEntityKey(entity: EntityConfig) {
   if (isEntityIdAttrConfig(entity)) {
-    return `${entity.entity}::attribute`;
+    return `${entity.entity}::attribute::${entity.offset}`;
   } else if (isEntityIdStatisticsConfig(entity)) {
-    return `${entity.entity}::statistics::${entity.period}`;
+    return `${entity.entity}::statistics::${entity.period}::${entity.offset}`;
   } else if (isEntityIdStateConfig(entity)) {
-    return entity.entity;
+    return `${entity.entity}::${entity.offset}`;
   }
   throw new Error(`Entity malformed:${JSON.stringify(entity)}`);
 }
@@ -157,7 +157,7 @@ export default class Cache {
       // see https://github.com/dbuezas/lovelace-plotly-graph-card/issues/146
       y === "unavailable" ? null : y
     );
-    if (entity.extend_to_present && xs.length > 0) {
+    if (entity.extend_to_present && xs.length > 0 && entity.offset === 0) {
       xs.push(new Date(Date.now() + entity.offset));
       ys.push(ys[ys.length - 1]);
       states.push(states[states.length - 1]);

src/plotly-graph-card.ts

@@ -168,16 +168,22 @@ export class PlotlyGraph extends HTMLElement {
           const start = new Date(oldState?.last_updated || state.last_updated);
           const end = new Date(state.last_updated);
           const range: [number, number] = [+start, +end];
-          let value: string | undefined;
-          if (isEntityIdAttrConfig(entity)) {
-            value = state.attributes[entity.attribute];
+          let shouldAddToCache = false;
+          if (entity.offset !== 0) {
+            // in entities with offset, the added datapoint may be far into the future.
+            // Therefore, adding it messes with autoranging.
+            // TODO: unify entity caches independent of offsets and keep track of what has actually been
+            // in the viewport
+            shouldFetch = true;
+          } else if (isEntityIdAttrConfig(entity)) {
+            shouldAddToCache = true;
           } else if (isEntityIdStateConfig(entity)) {
-            value = state.state;
+            shouldAddToCache = true;
           } else if (isEntityIdStatisticsConfig(entity)) {
             shouldFetch = true;
           }
 
-          if (value !== undefined) {
+          if (shouldAddToCache) {
             this.cache.add(
               entity,
               [{ state, x: new Date(end), y: null }],