fixes #34

Author: dbuezas

readme.md

@@ -22,7 +22,7 @@ Find more advanced examples in [Show & Tell](https://github.com/dbuezas/lovelace
 
 ## Installation via [HACS](https://hacs.xyz/)
 
-* Search for `Plotly Graph Card`.
+- Search for `Plotly Graph Card`.
 
 ## Card Config
 
@@ -139,7 +139,7 @@ entities:
   - sensor.temperature2
 color_scheme: dutch_field
 # or use numbers instead 0 to 24 available:
-# color_scheme: 1 
+# color_scheme: 1
 # or pass your color scheme
 # color_scheme: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","red"]
 ```
@@ -322,6 +322,33 @@ no_theme: true
 To define general configurations like enabling scroll to zoom, disabling the modebar, etc.
 Anything from https://plotly.com/javascript/configuration-options/.
 
+## significant_changes_only
+
+When true, will tell HA to only fetch datapoints with a different state as the one before.
+More here: https://developers.home-assistant.io/docs/api/rest/ under `/api/history/period/<timestamp>`
+
+Caveats:
+1. zana-37 repoorts that `minimal_response: false` needs to be set to get all non-significant datapoints [here](https://github.com/dbuezas/lovelace-plotly-graph-card/issues/34#issuecomment-1085083597).
+2. This configuration will be ignored (will be true) while fetching [Attribute Values](#Attribute-Values).
+
+```yaml
+significant_changes_only: true # defaults to false
+```
+
+## minimal_response
+
+When true, tell HA to only return last_changed and state for states other than the first and last state (much faster).
+More here: https://developers.home-assistant.io/docs/api/rest/ under `/api/history/period/<timestamp>`
+
+Caveats:
+1. This configuration will be ignored (will be true) while fetching [Attribute Values](#Attribute-Values).
+
+```yaml
+minimal_response: false # defaults to true
+```
+
+Update data every `refresh_interval` seconds. Use `0` or delete the line to disable updates
+
 ## hours_to_show:
 
 How many hours are shown.
@@ -340,7 +367,6 @@ Update data every `refresh_interval` seconds. Use `0` or delete the line to disa
 - ATTENTION: The development card is `type: custom:plotly-graph-dev`
 - Either use Safari or Disbale [chrome://flags/#block-insecure-private-network-requests](chrome://flags/#block-insecure-private-network-requests): Chrome doesn't allow public network resources from requesting private-network resources - unless the public-network resource is secure (HTTPS) and the private-network resource provides appropriate (yet-undefined) CORS headers. More [here](https://stackoverflow.com/questions/66534759/chrome-cors-error-on-request-to-localhost-dev-server-from-remote-site)
 
-
 # Build
 
 `npm run build`

src/Cache.ts

@@ -13,18 +13,23 @@ export function mapValues<T, S>(
 async function fetchSingleRange(
   hass: HomeAssistant,
   entityIdWithAttribute: string,
-  [startT, endT]: number[]
+  [startT, endT]: number[],
+  significant_changes_only: boolean,
+  minimal_response: boolean
 ) {
   const start = new Date(startT);
   const end = new Date(endT);
   const [entityId2, attribute] = entityIdWithAttribute.split("::");
-  const minimal_response = !attribute ? "&minimal_response" : "";
+  const minimal_response_query =
+    minimal_response && !attribute ? "minimal_response&" : "";
+  const significant_changes_only_query =
+    significant_changes_only && !attribute ? "1" : "0";
   const uri =
     `history/period/${start.toISOString()}?` +
     `filter_entity_id=${entityId2}&` +
-    `significant_changes_only=1` +
-    minimal_response +
-    `&end_time=${end.toISOString()}`;
+    `significant_changes_only=${significant_changes_only_query}&` +
+    minimal_response_query +
+    `end_time=${end.toISOString()}`;
   let list: History | undefined;
   let succeeded = false;
   let retries = 0;
@@ -37,13 +42,30 @@ async function fetchSingleRange(
       console.error(e);
       retries++;
       if (retries > 50) return null;
-      await sleep(100)
+      await sleep(100);
     }
   }
-  if (!list) return null;
+  if (!list || list.length == 0) return null;
+
+  /*
+  home assistant will "invent" a datapoiont at startT with the previous known value, except if there is actually one at startT.
+  To avoid these duplicates, the "fetched range" is capped to end at the last known point instead of endT.
+  This ensures that the next fetch will start with a duplicate of the last known datapoint, which can then be removed.
+  On top of that, in order to ensure that the last known point is extended to endT, I duplicate the last datapoint
+  and set its date to endT.
+  */
+  const last = list[list.length - 1];
+  const dup = JSON.parse(JSON.stringify(last));
+  list[0].duplicate_datapoint = true;
+  dup.duplicate_datapoint = true;
+  dup.last_changed = Math.min(endT, Date.now());
+  list.push(dup);
   return {
     entityId: entityIdWithAttribute,
-    range: [startT, Math.min(+new Date(), endT)], // cap range to now
+    range: [
+      startT,
+      +new Date(attribute ? last.last_updated : last.last_changed),
+    ], // cap range to now
     attributes: {
       unit_of_measurement: "",
       ...list[0].attributes,
@@ -70,11 +92,23 @@ export default class Cache {
     range: TimestampRange,
     removeOutsideRange: boolean,
     entityNames: string[],
-    hass: HomeAssistant
+    hass: HomeAssistant,
+    significant_changes_only: boolean,
+    minimal_response: boolean
   ) {
+    entityNames = Array.from(new Set(entityNames)); // remove duplicates
     return (this.busy = this.busy
       .catch(() => {})
-      .then(() => this._update(range, removeOutsideRange, entityNames, hass)));
+      .then(() =>
+        this._update(
+          range,
+          removeOutsideRange,
+          entityNames,
+          hass,
+          significant_changes_only,
+          minimal_response
+        )
+      ));
   }
 
   private removeOutsideRange(range: TimestampRange) {
@@ -108,7 +142,9 @@ export default class Cache {
     range: TimestampRange,
     removeOutsideRange: boolean,
     entityNames: string[],
-    hass: HomeAssistant
+    hass: HomeAssistant,
+    significant_changes_only: boolean,
+    minimal_response: boolean
   ) {
     if (removeOutsideRange) {
       this.removeOutsideRange(range);
@@ -120,26 +156,27 @@ export default class Cache {
       entityNames.flatMap((entityId) => {
         const rangesToFetch = subtractRanges([range], this.ranges[entityId]);
         return rangesToFetch.map((aRange) =>
-          fetchSingleRange(hass, entityId, aRange)
+          fetchSingleRange(
+            hass,
+            entityId,
+            aRange,
+            significant_changes_only,
+            minimal_response
+          )
         );
       })
     );
     const fetchedHistories = (await fetchedHistoriesP).filter(isTruthy);
     // add to existing histories
     for (const fetchedHistory of fetchedHistories) {
       const { entityId } = fetchedHistory;
-      const h = (this.histories[entityId] ??= []);
+      let h = (this.histories[entityId] ??= []);
       h.push(...fetchedHistory.history);
       h.sort((a, b) => a.last_changed - b.last_changed);
-      // remove the rogue datapoint home assistant creates when there is no new data
-      const [prev, last] = h.slice(-2);
-      const isRepeated =
-        prev?.last_changed === last?.last_changed - 1 &&
-        prev?.state === last?.state;
-      if (isRepeated) {
-        // remove the old one
-        h.splice(h.length - 2, 1);
-      }
+      h = h.filter(
+        (x, i) => i == 0 || i == h.length - 1 || !x.duplicate_datapoint
+      );
+      this.histories[entityId] = h;
       this.attributes[entityId] = fetchedHistory.attributes;
       this.ranges[entityId].push(fetchedHistory.range);
       this.ranges[entityId] = compactRanges(this.ranges[entityId]);

src/plotly-graph-card.ts

@@ -248,6 +248,8 @@ export class PlotlyGraph extends HTMLElement {
       },
       no_theme: config.no_theme ?? false,
       no_default_layout: config.no_default_layout ?? false,
+      significant_changes_only: config.significant_changes_only ?? false,
+      minimal_response: config.significant_changes_only ?? true,
     };
 
     const was = this.config;
@@ -267,7 +269,14 @@ export class PlotlyGraph extends HTMLElement {
       )
     );
     while (!this.hass) await sleep(100);
-    await this.cache.update(range, !this.isBrowsing, entityNames, this.hass);
+    await this.cache.update(
+      range,
+      !this.isBrowsing,
+      entityNames,
+      this.hass,
+      this.config.minimal_response,
+      this.config.significant_changes_only
+    );
     await this.plot();
   };
   getAllUnitsOfMeasurement() {

src/types.ts

@@ -23,6 +23,8 @@ export type InputConfig = {
   config?: Partial<Plotly.Config>;
   no_theme?: boolean;
   no_default_layout?: boolean;
+  significant_changes_only?: boolean; // defaults to false
+  minimal_response?: boolean; // defaults to true
 };
 export type Config = {
   hours_to_show: number;
@@ -39,9 +41,12 @@ export type Config = {
   config: Partial<Plotly.Config>;
   no_theme: boolean;
   no_default_layout: boolean;
+  significant_changes_only: boolean,
+  minimal_response: boolean
 };
 export type Timestamp = number;
 export type History = {
+  duplicate_datapoint?: true
   entity_id: string;
   last_changed: Timestamp;
   last_updated: Timestamp;