Mercurial > code > home > repos > front-door-display
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); }); }