Merge pull request #34 from DSSD-Madison/panels

Filtering for graphs

frontend-svelte/src/components/footer/Footer.svelte

@@ -9,6 +9,7 @@
     justify-content: center;
     background-color: var(--couillard-blue-color);
     color: var(--couillard-orange-color);
-    padding: 24px;
+    padding: 15px;
+    font-size: larger;
 }
 </style>

frontend-svelte/src/components/graph/Graph.svelte

@@ -2,17 +2,26 @@
   import { onMount } from 'svelte';
   import Plotly, { getDataToPixel } from 'plotly.js-dist';
 
-  import { dbData as dbDataStore } from '../../stores';
+  import { dbData as dbDataStore, selectedPanelStore } from '../../stores';
 
   let container;
+  let selectedPanelName = null;
+  let selectedPanelDescription = "";
+  let selectedPanelUrl = "";
+  let dbData= {};
 
   async function renderPlot(dbData) {
     const data = [];
     for (const [panelName, xy] of Object.entries(dbData)) {
-      data.push({
-        name: `${panelName} (kWh)`,
-        ...xy,
-      });
+      if (!selectedPanelName || panelName === selectedPanelName) 
+      {
+        //console.log(panelName);
+        data.push({
+          name: `${panelName} (kWh)`,
+          x: xy.x,
+          y: xy.y,
+        });
+      }
     }
 
     const layout = {
@@ -39,7 +48,7 @@
         "toImage",
         "pan2d",
       ],
-
+      
       displayModeBar: true,
       scrollZoom: true,
     };
@@ -49,10 +58,74 @@
   
   onMount(() => {
     dbDataStore.subscribe(async promise => {
-      renderPlot(await promise);
+      dbData = await promise;
+      renderPlot(dbData);
     });
   });
+
+  function updatePanelSelection(event) {
+    selectedPanelName = event.target.value;
+    if (selectedPanelName === "all") {
+      selectedPanelName = null; 
+      selectedPanelDescription="";
+      selectedPanelUrl="";
+    }
+    else {
+      selectedPanelDescription = dbData[selectedPanelName].desc;
+      selectedPanelUrl = dbData[selectedPanelName].url;
+    }
+    selectedPanelStore.set(selectedPanelName); // update store value
+    renderPlot(dbData);
+  }
+
 </script>
 
+<div id="description">
+  <p>Filter Panels:</p>
+  <select on:change={updatePanelSelection}>
+    <option value="all">All Panels</option>
+    {#each Object.keys(dbData || {}) as panelName}
+      <option value="{panelName}">{panelName}</option>
+    {/each}
+  </select>
+  <p>{selectedPanelDescription}</p>
+  <p>{selectedPanelUrl}</p>
+</div>
 <div bind:this={container}></div>
-
+
+<div id="explanations">
+  To zoom into graph, scroll outwards. To zoom in, scroll inwards.<br>
+  Click on legend to toggle which solar data sources are shown.
+</div>
+
+
+<style>
+  #explanations {
+    text-align: center;
+    align-items: center;
+    padding-top: 5px;
+    padding-bottom: 20px;
+    color: black;
+  }
+
+  #description {
+    padding: 15px;
+    text-align: center;
+  }
+
+  #description p {
+    margin: 0px;
+    padding: 5px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  #description select {
+    width: 50%; 
+    padding: 10px; 
+    font-size: 16px; 
+    cursor: pointer; 
+    border: 1px solid #ccc; 
+    border-radius: 4px; 
+  }
+</style>

frontend-svelte/src/components/home/Home.svelte

@@ -109,8 +109,8 @@
 */
 
 .stats-row {
-  margin-top: 50px;
-  color: white;
+  margin-top: 0px;
+  color: var(--couillard-orange-color);
   font-weight: bold;
   font-size: x-large;
   background-color: var(--couillard-blue-color);
@@ -119,6 +119,7 @@
   font-size: 24px;
 }
 
+
 .row-arrange {
   display: flex;
   flex-direction: row;
@@ -130,17 +131,21 @@
   text-align: center;
   border: 10px white;
   color: white;
+  padding: 0px;
 }
 
 .large {
   font-size: 4rem;
+  margin: 0%;
 }
 
 .medium {
   font-size: 2rem;
+  margin: 0%;
 }
 
 .small {
   font-size: 1rem;
+  margin: 0%;
 }
 </style>

frontend-svelte/src/getData.ts

@@ -21,6 +21,8 @@ const DATE_PATTERNS = {
 export interface PanelData {
     readonly x: readonly Date[];
     readonly y: readonly number[];
+    readonly desc: string;
+    readonly url: string;
 }
 
 export default async function getData(): Promise<{ [key: string]: PanelData }> {
@@ -93,6 +95,8 @@ async function assemblePanelDataObjects(
     let panelDataObjs: { [key: string]: PanelData } = Object.create(null);
     await asyncForEach(await getDocs(col), (async panelDoc => {
         let panelName = panelDoc.get("name");
+        let desc = panelDoc.get("desc");
+        let url = panelDoc.get("url");
         let outputCol = collection(panelDoc.ref, "Output");
         let unsortedYears = Object.create(null);
         await asyncForEach(await getDocs(outputCol), (async outputDoc => {
@@ -128,6 +132,8 @@ async function assemblePanelDataObjects(
         panelDataObjs[panelName] = {
             x: dates,
             y: outputs,
+            desc: desc,
+            url: url,
         } as const;
     }));
     return panelDataObjs;

frontend-svelte/src/stores.ts

@@ -1,28 +1,38 @@
-import { readable, derived } from 'svelte/store';
+import { readable, derived, writable, get } from 'svelte/store';
 
 import getData from './getData';
 import { type PanelData } from './getData';
 
 export const dbData = readable(getData());
 
+export const selectedPanelStore = writable(null);
+
 const LBS_CO2_PER_KWH = 1.52;
 const DOLLARS_SAVED_PER_KWH = 0.10;
 
 const TOTALS_PANEL_WHITELIST = null;
 
-function calcTotal(data: { [key: string]: PanelData }) {
+function calcTotal(data: { [key: string]: PanelData }, panelFilter: string) {
     let total = 0;
     for (const [panelName, xy] of Object.entries(data)) {
         if (TOTALS_PANEL_WHITELIST !== null) {
             if (!TOTALS_PANEL_WHITELIST.includes(panelName)) {
                 continue;
             }
         }
-        for (const output of xy.y) {
-            total += +output;
+        if(!panelFilter || panelFilter == panelName) {
+            for (const output of xy.y) {
+                total += +output;
+            }
         }
     }
     return total;
 }
 
-export const totalData = derived(dbData, promise => promise.then(calcTotal));
+//export const totalData = derived(dbData, promise => promise.then(data => calcTotal(data, get(selectedPanelStore))));
+export const totalData = derived(
+    [dbData, selectedPanelStore], 
+    async ([$dbData, $selectedPanelStore]) => {
+       return calcTotal(await $dbData, $selectedPanelStore);
+    }
+);