Create the plant page and pull the existing pages into their respective tabs

We should design a solution to this. A good example is with CuatroComunidades. This could be implemented in plot.js or in db.js, depending on the design decisions we make.

So we need to move POST into the Angular framework, and I've been thinking that the best way to do this efficiently before moving forward is to think of our current site on the development branch in terms of Angular's Templates, Components, and Services structure.

These are my current thoughts on what parts we need, and please correct me if I'm understanding each part wrong:

Templates

All visual parts of the site

• Tab structure
• Internal templates within the above tab structure for tables, graphs, downloads
• Navigation (plant list)
• Extra templates for the static pages, like instructions/about

Components

Underlying data structures, linked to a template

• I was confused about how to structure this, would it be a Plant component that holds all the data, which then gets transformed into the tables/graphs/downloads? Or a plant-table-component, plant-graph-component, etc? What are your thoughts?
• A plant list component linked to the navigation sidebar

Services

Handles all non-trivial operations, data fetching, input validation, etc.

• One to handle fetching data from the databases, and data transformation if we decide to interpret/filter
• One that enables switching between plants and properly displaying the correct data
• One that serves downloads

Notes

This is just a general idea of what might work, I'm still getting familiar with Angular so I don't know if there's a more efficient or sustainable way of handling this.

• Where do we call the d3.js visualization library? Would that be a separate file or something handled by a Service?

The visualizations code is currently more advanced than the website code, so these components should be included for more robust data viz and more apparent labeling. Currently graphs are labeled in the same color as their corresponding line plot; it would be nice to continue to make use of the color correspondence.

Hi @ethan92429!

Just wanted to give you an update of my overall task at the moment. I'm trying to give users the ability to choose what data is displayed on the website by either choosing day, week, month, or year which will result in different queries when the function updatePlantData is called. To do this, I've added some buttons but I'm having trouble getting the functionality to work properly.

I was wondering if you could explain this chunk of code to me. It's in index.html. Right now, my main issue is that I need to pass codeList as a parameter into updatePlantData, but I can't figure out how to do that since it's defined in the block of code I pasted below. I'm thinking either that is the issue, or that you can't just call updatePlantData and expect it to update. Any help would be appreciated, thanks!

*Since this is a pretty complex problem, I'd be open for a call to work through it if you have time! I'll be in the AguaClara lab starting at 4:30 today

$(document).ready(function() {
        submitRadioValues = function(){
          plantCode = $('input[name="plantSelection"]:checked').val();
          save("plantName", plantCode);
          $("#allPlantsDropDown").html("");
          connectSyncButton();
          codeList = [plantCode];
          initViz(codeList);
          $("#datosHeader").html("Datos Sobre la Planta de "+plantCode);
          $("#syncButtonDiv").html("<a id='sync-viz' class='waves-effect waves-light btn'>Sincronizar</a>");
          connectSyncButton();
          addSpinner('#spinnerDestination');
          updatePlantData(visualize, codeList, "month");
          $("#selectPrompt").html("");
        }


        if (getPlantName()==null){
          window.location.replace("/settings.html");

        }else{
          $("#selectPrompt").html("");
          $("#syncButtonDiv").html("<a id='sync-viz' class='waves-effect waves-light btn'>Sincronizar</a>");
          var codeList = [getPlantName()]; //list of currently chosen plants (by code)
          connectSyncButton();
          initViz(codeList);
          addSpinner('#spinnerDestination');
          updatePlantData(visualize, codeList, "month");
        }
      });

Ideally break out each dimension into a separate graph, so that each can be used to clearly compare across plants.

The script should do exactly the steps that are outlined in the Initializing part of the readme of this repo.

Need to link the start page to the new plotly graph

Oscar, the water system manager in Moroceli would like to see weekly or bi weekly averages to generate a report. The first step here is to create a mockup report to show to Oscar and W+J so they can point out what's necessary and what's not. Then, we can automate the report creation by having the static website hit a Google scripts execution api that fetches and composes data from Fusion Tables, and then injects the data into a google doc that is then brought back to the original caller for download. That doc should also be saved in the drive for future requests of the same time period.

An alternative method would be to automate (using Google Scripts) the sending of such a doc to the Water Board member's personal emails every month or so.

@jonschristensen @wngrimshaw could either of you post here a small sketch/example of the type of report you are wanting us to generate? Just something to give us the gist of what Oscar wants.

I've only confirmed this issue in the browser version, although I think it exists in the app as well. The table page header always displays "Datos Sobre la Planta de Morocelí", even when viewing the data from Otoro - the plant name just needs to be updated according to the plant being viewed.

Add a webhook that automatically commits the updated built files to the master branch once the development branch is committed.

The goal is to have the website perfectly translated into Spanish and to be easy to maintain that translation. Here's a useful blog post on making Jekyll sites multilingual.

On mobile, Chrome continually displays messages saying that it is necessary to download chrome to view the post website. It is possible to continually close the new tab that chrome opens and it is possible to view the data.

Create a style guide for the website. i.e. decide on colors, design of navigation bar, uniform fonts (change from Roboto?), distinct font sizes and weights for specific things.

Only show data within 3 standard deviations of the mean

Hey @nhbala can you change the x axis (which has the months) to be in Spanish? Or better yet, add a local variable that is "language" that you use to 'select' Spanish - don't actually have the user select it as that would take too much time right now, but use that value to ask Plotly for the x axis in Spanish if that is possible. See here on how unfortunately Plotly doesn't support localization natively, so we'll have to manually add these tick marks.

The backwash data would be useful as we try to figure out how to improve our filters. We need to add the head loss as a line graph, and backwash events as vertical lines on the graph.

The operators are sending messages and it isn't possible to view them using the POST website. Messages should be visible as a separate tab in between "Tablas" and "Descargas" and could present as a rolling list of incoming messages that dynamically update as you scroll down to load more messages. You'll have to find a way to do this with the JAM stack, which might be a bit tricky.

Bring browser version out of the mobile demo phase and use all the white space!

1. Stretch out the display
2. Include Honduran average and EPA standard lines
3. Redo organization of current user interaction

Would be nice for usability if the components could fit together on one screen. You should also probably get input from a designer on this/test with users to figure out which orientation makes it easiest to read/understand the data. E.g. it will be easier to switch between views if you don't have to scroll.

Remove the settings tab from the navigation and add that functionality to a slide-in navigation menu

@jacuerp I know the graph for Firefox is not showing up correctly... Think it has something to do with NaN parsing. This makes me think that this website might not work in ie as well.

Use sass for quick changes to colors, fonts, etc.

Two graphs need to be displayed at the same time, due to different y axis

Make a page that has all the instructions to download both the Collect and the Visualizations app. This should also have a note on updating the apps. This needs to get translated into Spanish. Start by looking here for a start on the ODK Collect installation instructions. I am not sure how to deal with getting the credentials for submitting data, as we do not want to publish those publicly.

We have to make sure that the reports are accessible on the website in an organized fashion. The simplest solution is to have a link to the drive folder that contains all the reports. However, from a user perspective that is clunky and hard to search through (doesn't scale well when we have 100+ reports). One step up would be to have the reports organized by plant that each plant has a different folder within the main 'reports' folder. Furthermore we could organize by year and month. In conclusion, to satisfy this issue I propose we create a link to a reports folder that we will maintain with increasing hierarchical order (using logic in the scripts app we use to generate the reports) and we need another link to the latest report for each plant... be sure to think about how to automatically link these to the latest report... I recommend having a 'staging area' drive folder for each one of the plants that holds the latest reports for each respective plant, and deleting and adding documents using scripts logic. @jacuerp how does this plan sound as a balance between developer lift and user ease?

Implement a new visualization option
This will show the percent of time this plant spends operating below a given threshold i.e. EPA/Honduras standards.

In order to display both 1 L/s data and main plant data on the same graph, plot.js needs to be changed. In particular, the makeXScale function would need to be changed so that it scales the axis based on the minimum and maximum values in both timeCollected and timeCollected_L. Checkboxes need to be made that allow the user to select what 1 L/s data to display. The drawLines function needs to return x and y based on timeCollected and/or timeCollected_L, depending on which checkboxes are filled.

@ethan92429 any opinion on whether 1 L/s data and main plant data should be displayable on the same graph or on two separate graphs?

Debug code which creates a query url and downloads a csv when the download buttons are clicked.

Create a zoomable chart that shows all turbidities for all plants over time. An example of a google chart is here. You can create a zoomable chart by looking at the google api for chart visualizations.

This page should include photos and bios of everyone in the team, and should be easily accessible from the navigation bar.

We have been missing an MVC framework. Our implementation falls far behind in that we rely on directly interacting with the localStorage, we have disorganized file structure, and we couldn't even add users if we wanted to. In my searches I've found ToDoMVC a curated site that helps compare the various MVC options with an identical app built in each popular MVC framework. My conclusion (as an unexperienced front-end coder) is that we should be using Angular 2, an MVC framework supported by Google, and one of the most popular MVCs on the web. With this, we could easily implement users, components, custom data views, etc. @fawnwong which MVC do you prefer? Do you have experience with writing for an MVC?

This includes writing a config.xml that defines any global variables/anything else, making effective use of the includes and layouts functionality of Jekyll.

@ethan92429
It seems some of the values we're getting are not being caught by the filters we put in place to get rid of extreme values more than three standard deviations away because extremely large values that are removed still contribute to the sum calculations needed to calculate the standard deviations. Basically, very large turbidity values make standard deviations extremely big so our filter is insensitive to other big turbidity values.

In particular, a raw water turbidity of 40984516.34 was recorded for Cuatro Communidades, but there also negative turbidity values as well which is pretty concerning

To try and resolve this issue, we tried running the filter extremes function multiple times and that did result in better looking graphs that filtered both the extremely high values as well as the high values. However, we opted not to keep the multiple filters because doing so would make us insensitive to poor data coming in. In other words, we wouldn't be able to tell that extremely large data was being inputted by the operators if we kept filtering them out. We'd like to discuss at the next meeting what we should do about this issue and decide if we want a "management" graph, as well as a graph for the public to view.

Antonio noticed this morning that Internet Explorer was having trouble syncing data to display the graph and table. The sync button responded to a click, but then the circle sits there spinning. We tried in Chrome and had no problems, and I was able to replicate the same issue on my machine.

In the web browser version of the visualizations, could the header of the table where all of the parameters are listed be made to scroll down as the user scrolls, so they don't lose track of the order?

Add analytics to be able to track website visits.

Need to display all four data types on the page like in the old graph