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

comparison src/FdElectricity.ts @ 17:472003015880

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
restyle using css grid
author drewp@bigasterisk.com
date Fri, 07 Jun 2024 21:22:37 -0700
parents 719c8cc4d8b2
children 499996b8224a
comparison
equal deleted inserted replaced
16:719c8cc4d8b2 17:472003015880
1 import { LitElement, PropertyValues, css, html } from "lit"; 1 import { LitElement, PropertyValues, css, html } from "lit";
2 import { customElement, property } from "lit/decorators.js"; 2 import { customElement, property } from "lit/decorators.js";
3 import { shared } from "./shared"; 3 import { shared } from "./shared";
4 4
5
6 @customElement("fd-electricity") 5 @customElement("fd-electricity")
7 export class FdElectricity extends LitElement { 6 export class FdElectricity extends LitElement {
8 static styles = [ 7 static styles = [
9 shared, 8 shared,
10 css` 9 css`
11 :host { 10 :host {
12 font-size: 14px; 11 font-size: 14px;
13 } 12 }
14 13
15 :host > table { 14 :host > table {
16 margin-top: 10px; 15 margin-top: 10px;
16 }
17 th,
18 td {
19 padding: 0 0;
17 } 20 }
18 th { 21 th {
19 text-align: left; 22 text-align: left;
20 } 23 }
21 td { 24 td {
32 } 35 }
33 .total .bar { 36 .total .bar {
34 background: pink; 37 background: pink;
35 } 38 }
36 `, 39 `,
40 ];
41 @property() seriesData: Map<string, number> = new Map();
42 constructor() {
43 super();
44 this.load();
45 setInterval(this.load.bind(this), 10 * 1000);
46 }
47 async load() {
48 this.seriesData = new Map();
49 const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query";
50 const now = Date.now() / 1000 - 10;
51 const seriesUrls = [
52 { url: base + `?query=powermeter_w&time=${now}&step=725ms`, label: "powermeter" },
53 { url: base + `?query=(sum%20by%20%20(s)%20(house_power_w))%20-%20(sum%20by(s)%20(powermeter_w))&time=${now}&step=725ms`, label: "unmetered" },
54 { url: base + `?query=house_power_w&time=${now}&step=725ms`, label: "total" },
37 ]; 55 ];
38 @property() seriesData: Map<string, number> = new Map(); 56
39 constructor() { 57 for (const series of seriesUrls) {
40 super(); 58 const response = await fetch(series.url);
41 this.load(); 59 const data = await response.json();
42 setInterval(this.load.bind(this), 10 * 1000); 60 for (let row of data.data.result) {
61 this.seriesData.set(series.label + (row.metric.sensor ? "-" + row.metric.sensor : ""), parseFloat(row.value[1]));
62 }
43 } 63 }
44 async load() { 64 this.update(new Map() as PropertyValues);
45 this.seriesData = new Map(); 65 }
46 const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query"; 66 render() {
47 const now = Date.now() / 1000 - 10; 67 const disp = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "");
48 const seriesUrls = [ 68 const pxPerWatt = 150 / this.seriesData.get("total")!;
49 { url: base + `?query=powermeter_w&time=${now}&step=725ms`, label: "powermeter" }, 69 const bar = (n: number | undefined) => (n ? html`<div style="width: ${(n * pxPerWatt).toFixed(1)}px"></div>` : "");
50 { url: base + `?query=(sum%20by%20%20(s)%20(house_power_w))%20-%20(sum%20by(s)%20(powermeter_w))&time=${now}&step=725ms`, label: "unmetered" }, 70 return html`<h1 data-text="Electricity">Electricity</h1>
51 { url: base + `?query=house_power_w&time=${now}&step=725ms`, label: "total" },
52 ];
53
54 for (const series of seriesUrls) {
55 const response = await fetch(series.url);
56 const data = await response.json();
57 for (let row of data.data.result) {
58 this.seriesData.set(series.label + (row.metric.sensor ? "-" + row.metric.sensor : ""), parseFloat(row.value[1]));
59 }
60 }
61 this.update(new Map() as PropertyValues);
62 }
63 render() {
64 const disp = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "");
65 const pxPerWatt = 150 / this.seriesData.get("total")!;
66 const bar = (n: number | undefined) => (n ? html`<div style="width: ${(n * pxPerWatt).toFixed(1)}px"></div>` : "");
67 return html`<h1 data-text="Electricity">Electricity</h1>
68 <table> 71 <table>
69 <tr> 72 <tr>
70 <th>(unmetered)</th> 73 <th>(unmetered)</th>
71 <td>${disp(this.seriesData.get("unmetered"))}</td> 74 <td>${disp(this.seriesData.get("unmetered"))}</td>
72 <td class="bar">${bar(this.seriesData.get("unmetered"))}</td> 75 <td class="bar">${bar(this.seriesData.get("unmetered"))}</td>
105 <th>Total</th> 108 <th>Total</th>
106 <td>${this.seriesData.get("total")} W</td> 109 <td>${this.seriesData.get("total")} W</td>
107 <td class="bar">${bar(this.seriesData.get("total"))}</td> 110 <td class="bar">${bar(this.seriesData.get("total"))}</td>
108 </tr> 111 </tr>
109 </table> `; 112 </table> `;
110 } 113 }
111 } 114 }