Revamped Our Rainfall Monitoring System

I had mentioned that I was digging ReactJS in my last post, so I applied what I have learned about it to revamp our rainfall monitoring system.

It's funny how we code last day, month or year is very much different compared today. It's not bad though, that means we're (I'm) improving or there's a progress. The system before uses JavaScript, JQuery, Openlayers and  a JavaScript library for date formatting.

Here's how it works:
  1. Request data from a different (an external) domain(server)
  2. Get the latest value and append it to the pre-defined GeoJSON object
  3. Evaluate the value to determine its rainfall intensity 
  4. Finally, plot it on the map
Downside, upon clicking each points, the system needs to request again the data to display it in graph.

Now, like I said, there's a progress.

Aside from using ReactJS, I also changed how it works.
  1. Request data from a different (an external) domain(server).
  2. Get all the data (not just the last value) from all available stations and store it in an array of objects
  3. Extract the last value from the array , evaluate to determine its rainfall intensity then plot it.
  4. Data is also displayed as table.
Storing all the data in an array of objects makes the app more efficient as it won't request again when plotting it in graph (and much faster as it was requested beforehand). 

I also used, LeafletJS for its mapping library, Bootstrap (sadly need to use JQuery), and momentjs for date formatting. Deployed it in Heroku.

The code is here with comments in "Weather.jsx", just change the station ids.

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Add/Subtract Single Digit Number in Assembly Language