🌡 Temperature Tapir

Temperature Tapir is a Room Temperature Monitoring Dashboard web app made with MeteorJS.

Features supported:

• Adjust timeframe using inputs
• Visualise temperature data
  • On a time series graph
  • On a floorplan, indicating average temperature
• Panning on time series using shift + click + drag
• Zooming on time series using click + drag or mousewheel
• Share app settings with a URL

GitHub Repository | Video Demo

Brief description of files and folders

• imports
  • api
    • floorplan.js: Assigns colour to each room
    • handleTimeframe.js: Handles all operations related to time and date formatting (eg. from int to HH:MM string) and retrieves data
    • linkability.js: Provides functions to supports linkability (PWA) implementation
    • sample.js: Provides functions to manipulate data based on sample set
    • tempPublications.js: Publishes data collection
  • db
    • TempCollection.js: Creates collection to store temperature data
  • ui
    • App.jsx: Contains overall app structure and state
    • Floorplan.jsx: Contains Floorplan component (eg. each room SVG and onClick listener)
    • TimeSeries.jsx: Contains TimeSeries component (using Plotly)
• private
  • room-temperatures.csv: Given dataset
• server
  • main.js: Initialises dataset
  • schema.json: Data schema defined with JSON Schema
• README.md: Brief project introduction, credits and references

Installation

1. Clone this repository.
2. Install Meteor here.
3. Run meteor npm install to download dependencies.
4. Run meteor run to start using 🌡 Temperature Tapir!

References

• Get dates between range of dates: miguelmota on Github
• Format Date object to yyyy-mm-dd: user3470953 on Stack Overflow
• Regex for yyyy-mm-dd (use in schema): Hamid Shatu on Stackoverflow
• Using images with SVG shapes: Responsive SVG Image Overlays - Jess Damerst
• Sorting object by value: Nosredna on Stackoverflow
• React routing with URL: An alternative to handle state in React: the URL !
• Getting window size for responsive design: useWindowSize from useHooks

Credits

• Inputs and slider: Material UI
• Time series: plotly for React
• Colour palette: Seaborn (HLS)
• Adjusting sample size of data: janjakubnanista/downsample