Mercurial > code > home > repos > front-door-display

comparison src/FdElectricity.ts @ 20:e8c90d893919

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
layout and sorting
author drewp@bigasterisk.com
date Mon, 26 Aug 2024 16:17:49 -0700
parents 499996b8224a
children
comparison
equal deleted inserted replaced
19:6960c172f1a9 20:e8c90d893919
22 margin-top: 10px; 22 margin-top: 10px;
23 } 23 }
24 th, 24 th,
25 td { 25 td {
26 padding: 0 0; 26 padding: 0 0;
27 white-space: nowrap;
27 } 28 }
28 th { 29 th {
29 text-align: left; 30 text-align: left;
30 } 31 }
31 td { 32 td {
37 } 38 }
38 .bar { 39 .bar {
39 background: yellow; 40 background: yellow;
40 display: inline-block; 41 display: inline-block;
41 height: 10px; 42 height: 10px;
43 margin-left: 5px;
42 } 44 }
43 .bar > div { 45 .bar > div {
44 transition: width 3s ease-out; 46 transition: width 3s ease-out;
45 } 47 }
46 .total .bar { 48 .total .bar {
47 background: pink; 49 background: pink;
48 } 50 }
49 table { 51 table {
50 border-collapse: collapse; 52 border-collapse: collapse;
53 }
54 .summary tr:first-of-type {
55 opacity: .7;
51 } 56 }
52 .summary td { 57 .summary td {
53 padding: 2px 6px; 58 padding: 2px 6px;
54 } 59 }
55 .summary td, 60 .summary td,
56 .summary th { 61 .summary th {
57 border: 1px solid #2f2f2f; 62 border: 1px solid #2f2f2f;
58 } 63 }
59 .summary td.odometer { 64 .summary td.odometer {
60 width: 4.7em; 65 width: 3.4em;
61 text-align: left; 66 text-align: left;
62 } 67 }
63 `, 68 `,
64 ]; 69 ];
65 @state() seriesData: Map<string, number> = new Map(); 70 @state() seriesData: Map<string, number> = new Map();
72 77
73 constructor() { 78 constructor() {
74 super(); 79 super();
75 this.load(); 80 this.load();
76 setInterval(this.load.bind(this), 8 * 1000); 81 setInterval(this.load.bind(this), 8 * 1000);
77 setInterval(this.computeLiveState.bind(this), 60); 82 setInterval(this.computeLiveState.bind(this), 500);
78 } 83 }
79 84
80 async load() { 85 async load() {
81 const seriesData = new Map(); 86 const seriesData = new Map();
82 const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query"; 87 const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query";
109 seriesData.set(key, value); 114 seriesData.set(key, value);
110 } 115 }
111 } 116 }
112 117
113 this.lastLoad = t; 118 this.lastLoad = t;
114 this.isPeak = hours >= 17 && hours < 20; 119 this.isPeak = hours >= 17 && hours < 20; // todo: no peak on weekends
115 this.seriesData = seriesData; 120 this.seriesData = seriesData;
116 this.update(new Map() as PropertyValues); 121 this.update(new Map() as PropertyValues);
117 } 122 }
118 123
119 private timeMath() { 124 private timeMath() {
159 164
160 render() { 165 render() {
161 const disp0 = (n: number | undefined) => (n ? `${n.toFixed(0)}` : "0"); 166 const disp0 = (n: number | undefined) => (n ? `${n.toFixed(0)}` : "0");
162 const disp1 = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "0.0"); 167 const disp1 = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "0.0");
163 const dispDollar = (n: number | undefined, places = 2) => (n ? html`<span class="unit">$</span>${n.toFixed(places)}` : ""); 168 const dispDollar = (n: number | undefined, places = 2) => (n ? html`<span class="unit">$</span>${n.toFixed(places)}` : "");
164 const pxPerWatt = 150 / 1500; 169 const pxPerWatt = 150 / 2500;
165 const bar = (n: number | undefined) => (n ? html`<div style="width: ${Math.ceil(n * pxPerWatt).toFixed(1)}px"></div>` : ""); 170 const bar = (n: number | undefined) => (n ? html`<div style="width: ${Math.ceil(n * pxPerWatt).toFixed(1)}px"></div>` : "");
166 171
167 const seriesRow = (label: string, value: number | undefined, unitColumn: TemplateResult | string) => html` 172 const seriesRow = (label: string, value: number | undefined, unitColumn: TemplateResult | string) => html`
168 <tr> 173 <tr>
169 <th>${label}</th> 174 <th>${label}</th>
194 <td>${dispDollar(this.yesterday_peak_penalty)} peak penalty</td> 199 <td>${dispDollar(this.yesterday_peak_penalty)} peak penalty</td>
195 </tr> 200 </tr>
196 <tr> 201 <tr>
197 <th>today</th> 202 <th>today</th>
198 <td>${disp0(this.seriesData.get("day1_avg_w"))} <span class="unit">W avg</span></td> 203 <td>${disp0(this.seriesData.get("day1_avg_w"))} <span class="unit">W avg</span></td>
199 <td class="odometer">${dispDollar(this.today_charge, 6)}</td> 204 <td class="odometer">${dispDollar(this.today_charge, 4)}</td>
200 <td>${dispDollar(this.today_peak_penalty)} peak penalty</td> 205 <td>${dispDollar(this.today_peak_penalty)} peak penalty</td>
201 </tr> 206 </tr>
202 </table>`; 207 </table>`;
203 } 208 }
204 } 209 }