changeset 20:e8c90d893919

layout and sorting
author drewp@bigasterisk.com
date Mon, 26 Aug 2024 16:17:49 -0700
parents 6960c172f1a9
children a90cb6927c7d
files src/FdCountdown.ts src/FdElectricity.ts src/UpcomingEvents.ts
diffstat 3 files changed, 17 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/src/FdCountdown.ts	Mon Aug 26 16:17:21 2024 -0700
+++ b/src/FdCountdown.ts	Mon Aug 26 16:17:49 2024 -0700
@@ -1,6 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { sortBy } from "lodash";
+import { sortBy, sortedUniqBy, uniqBy } from "lodash";
 import { DataFactory, Quad_Subject, Store } from "n3";
 import { shared } from "./shared";
 import { EV, fetchGraph, parseGraph, RDF } from "./parseRdf";
@@ -13,6 +13,9 @@
   static styles = [
     shared,
     css`
+      :host {
+        overflow: hidden;
+      }
       ol {
         list-style: none;
         font-size: 16px;
@@ -65,7 +68,7 @@
         const de = new DisplayEvent(store, graph, ev);
         this.evs = [...this.evs, de];
       });
-      this.evs = sortBy(this.evs, "start");
+      this.evs = sortedUniqBy(sortBy(this.evs, "start"), (de) => de.start + de.title);
     });
   }
   render() {
--- a/src/FdElectricity.ts	Mon Aug 26 16:17:21 2024 -0700
+++ b/src/FdElectricity.ts	Mon Aug 26 16:17:49 2024 -0700
@@ -24,6 +24,7 @@
       th,
       td {
         padding: 0 0;
+        white-space: nowrap;
       }
       th {
         text-align: left;
@@ -39,6 +40,7 @@
         background: yellow;
         display: inline-block;
         height: 10px;
+        margin-left: 5px;
       }
       .bar > div {
         transition: width 3s ease-out;
@@ -49,6 +51,9 @@
       table {
         border-collapse: collapse;
       }
+      .summary tr:first-of-type {
+        opacity: .7;
+      }
       .summary td {
         padding: 2px 6px;
       }
@@ -57,7 +62,7 @@
         border: 1px solid #2f2f2f;
       }
       .summary td.odometer {
-        width: 4.7em;
+        width: 3.4em;
         text-align: left;
       }
     `,
@@ -74,7 +79,7 @@
     super();
     this.load();
     setInterval(this.load.bind(this), 8 * 1000);
-    setInterval(this.computeLiveState.bind(this), 60);
+    setInterval(this.computeLiveState.bind(this), 500);
   }
 
   async load() {
@@ -111,7 +116,7 @@
     }
 
     this.lastLoad = t;
-    this.isPeak = hours >= 17 && hours < 20;
+    this.isPeak = hours >= 17 && hours < 20; // todo: no peak on weekends
     this.seriesData = seriesData;
     this.update(new Map() as PropertyValues);
   }
@@ -161,7 +166,7 @@
     const disp0 = (n: number | undefined) => (n ? `${n.toFixed(0)}` : "0");
     const disp1 = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "0.0");
     const dispDollar = (n: number | undefined, places = 2) => (n ? html`<span class="unit">$</span>${n.toFixed(places)}` : "");
-    const pxPerWatt = 150 / 1500;
+    const pxPerWatt = 150 / 2500;
     const bar = (n: number | undefined) => (n ? html`<div style="width: ${Math.ceil(n * pxPerWatt).toFixed(1)}px"></div>` : "");
 
     const seriesRow = (label: string, value: number | undefined, unitColumn: TemplateResult | string) => html`
@@ -196,7 +201,7 @@
         <tr>
           <th>today</th>
           <td>${disp0(this.seriesData.get("day1_avg_w"))} <span class="unit">W avg</span></td>
-          <td class="odometer">${dispDollar(this.today_charge, 6)}</td>
+          <td class="odometer">${dispDollar(this.today_charge, 4)}</td>
           <td>${dispDollar(this.today_peak_penalty)} peak penalty</td>
         </tr>
       </table>`;
--- a/src/UpcomingEvents.ts	Mon Aug 26 16:17:21 2024 -0700
+++ b/src/UpcomingEvents.ts	Mon Aug 26 16:17:49 2024 -0700
@@ -1,6 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { sortBy } from "lodash";
+import { sortBy, sortedUniqBy } from "lodash";
 import { DataFactory, Quad_Subject, Store } from "n3";
 import { shared } from "./shared";
 import { EV, fetchGraph, parseGraph, RDF } from "./parseRdf";
@@ -34,7 +34,7 @@
           this.evs = [...this.evs, de];
         }
       });
-      this.evs = sortBy(this.evs, "start");
+      this.evs = sortedUniqBy(sortBy(this.evs, "start"), (de) => de.start + de.title);
     });
   }