--- a/src/FdElectricity.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/FdElectricity.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -2,12 +2,11 @@
 import { customElement, property } from "lit/decorators.js";
 import { shared } from "./shared";
 
-
 @customElement("fd-electricity")
 export class FdElectricity extends LitElement {
-    static styles = [
-        shared,
-        css`
+  static styles = [
+    shared,
+    css`
       :host {
         font-size: 14px;
       }
@@ -15,6 +14,10 @@
       :host > table {
         margin-top: 10px;
       }
+      th,
+      td {
+        padding: 0 0;
+      }
       th {
         text-align: left;
       }
@@ -34,37 +37,37 @@
         background: pink;
       }
     `,
+  ];
+  @property() seriesData: Map<string, number> = new Map();
+  constructor() {
+    super();
+    this.load();
+    setInterval(this.load.bind(this), 10 * 1000);
+  }
+  async load() {
+    this.seriesData = new Map();
+    const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query";
+    const now = Date.now() / 1000 - 10;
+    const seriesUrls = [
+      { url: base + `?query=powermeter_w&time=${now}&step=725ms`, label: "powermeter" },
+      { 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" },
+      { url: base + `?query=house_power_w&time=${now}&step=725ms`, label: "total" },
     ];
-    @property() seriesData: Map<string, number> = new Map();
-    constructor() {
-        super();
-        this.load();
-        setInterval(this.load.bind(this), 10 * 1000);
+
+    for (const series of seriesUrls) {
+      const response = await fetch(series.url);
+      const data = await response.json();
+      for (let row of data.data.result) {
+        this.seriesData.set(series.label + (row.metric.sensor ? "-" + row.metric.sensor : ""), parseFloat(row.value[1]));
+      }
     }
-    async load() {
-        this.seriesData = new Map();
-        const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query";
-        const now = Date.now() / 1000 - 10;
-        const seriesUrls = [
-            { url: base + `?query=powermeter_w&time=${now}&step=725ms`, label: "powermeter" },
-            { 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" },
-            { url: base + `?query=house_power_w&time=${now}&step=725ms`, label: "total" },
-        ];
-
-        for (const series of seriesUrls) {
-            const response = await fetch(series.url);
-            const data = await response.json();
-            for (let row of data.data.result) {
-                this.seriesData.set(series.label + (row.metric.sensor ? "-" + row.metric.sensor : ""), parseFloat(row.value[1]));
-            }
-        }
-        this.update(new Map() as PropertyValues);
-    }
-    render() {
-        const disp = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "");
-        const pxPerWatt = 150 / this.seriesData.get("total")!;
-        const bar = (n: number | undefined) => (n ? html`<div style="width: ${(n * pxPerWatt).toFixed(1)}px"></div>` : "");
-        return html`<h1 data-text="Electricity">Electricity</h1>
+    this.update(new Map() as PropertyValues);
+  }
+  render() {
+    const disp = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "");
+    const pxPerWatt = 150 / this.seriesData.get("total")!;
+    const bar = (n: number | undefined) => (n ? html`<div style="width: ${(n * pxPerWatt).toFixed(1)}px"></div>` : "");
+    return html`<h1 data-text="Electricity">Electricity</h1>
       <table>
         <tr>
           <th>(unmetered)</th>
@@ -107,5 +110,5 @@
           <td class="bar">${bar(this.seriesData.get("total"))}</td>
         </tr>
       </table> `;
-    }
+  }
 }