Technology Stack
Angular
Node.js
MySQL
The Client
This energy management software helps a US-based university’s administrative heads keep track of the electricity and energy consumed within their campus. The all-in-one tool is synced with and automatically collects data from the university’s power meters. The university’s admin heads access this tool to view these meter readings in the form of charts/graphs to get details like how much cold water is used, which building uses the maximum gas, how much electricity is wasted, etc.
The Challenge
Capital Numbers was requested to create these charts/graphs within the portal. We needed to handle all the frontend elements while the client took care of the system’s backend.
We were asked to display energy data on this frontend dashboard. For this, we needed to create lines, bars, tables, histograms, etc. The dashboard had to give an overview of the university’s power consumption.
However, we had to keep in mind a few specifications here. Firstly, we had to graphically represent meter readings for four elements: electricity, gas, hot water, and cold water. We had to make provisions for providing the above data at yearly frequencies. We needed to add custom reports. And finally, our team had to integrate a chatbot within the dashboard.
In short, the project needed us to delve deep into interface designing. So, Capital Numbers got its top-grade frontend experts to do the job.
The Solution
Our frontend team began brainstorming the solutions and considered it best to use the ngx-admin template to design the dashboard.
Ngx-admin is the most trusted Angular dashboard developers swear by. The Angular dashboard, written in TypeScript, allows easy code refactoring. As a result, our qualified Angular developers made the best use of TypeScript to refactor code, autocomplete lines of code, and keep the entire codebase bug-free. TypeScript helped us spot errors in the compilation stage, which allowed us to fix things early on and saved us vast amounts of time.
We used Apache eCharts to add all the graphs and diagrams in this Angular dashboard. These charts are elegant, visually appealing, and hallmarks of an exemplary graphical representation. Moreover, they’re easy to customize and configure to suit specific needs.
Next, we mapped data from the backend to the frontend. Our client would add meter readings to the system’s NodeJS backend, and we would map these readings to the frontend using custom logic. This data mapping process involved sharp programming skills to ensure the graphs represented are correct.
We chose the highly-scalable MySQL for managing the entire database securely. Our experts enriched the dashboard’s look and feel using custom scss.
Once done with everything, our team thoroughly checked the graphs, bars, lines, diagrams, and the dashboard’s overall GUI. After the final review, our team deployed the solution in Digital Ocean, which offers a 99.99% uptime.
Results
Our final solution turned out to be a graphically-rich dashboard showing meter readings of four elements: hot water, cold water, gas, and electricity. The client loved Capital Numbers’ work and appreciated how we customized each component to create beautiful energy charts.
We coordinated with the client over Slack throughout the engagement, which continued for over one and half years. At the end of it, what stood out for our client and us are:
Multiple User Controls
We added multi-admin controls to allow the university’s facility managers and energy experts to log in and access the dashboard.
Data Mapping
We leveraged our multi-year coding skills to get raw energy data from the backend to the frontend without mismatch.
Custom APIs
We wrote APIs to help filter energy charts based on power units like ohms, amps, or kilowatts.
eCharts
Apache eCharts helped us render a variety of charts like areas, columns, sankey diagrams, lines, etc.
Historical Data
We made provisions for retrieving historical data from previous months/years to diagnose past problems.
Real-time Data Monitoring
We also enabled real-time data fetching capabilities to turn present data into actionable insights.
Manual Data Entry
We added input forms to manually update entries if automatic data collection stops due to power cuts or bandwidth issues.
Custom Reports
We incorporated custom reporting capabilities to derive only those results users want to see.
Data Comparisons
Users can also generate yearly reports for specific date ranges for informed decisions.
Chatbot - Speech Recognition
We built and integrated a custom bot that interprets vocal instructions and redirects users to desired pages - making navigation a breeze.
Data Visualization
Developing a rich dashboard with all the above elements required good data visualization skills, which we had.
Dedicated Angular Development
Thanks to our dedicated Angular developers for making the right tweaks in the TypeScript-powered codebase and designing the dashboard precisely how the client imagined it.
Energy Management Streamlined
Because of our excellent engineering, users can now view interactive charts to:
- Analyze energy consumption
- Forecast bills
- Optimize use
- Plan sustainability goals
Great Reviews
97 Out Of 100 Clients Have Given Us A Five Star Rating On Google & Clutch
Stephen Smith
Project Manager, The Internet of Team LLC
"They exceeded our expectations and proved to be quick problem-solvers."
Eric Liu
CEO, FairyGene
"I was impressed by their professionalism."
Jorge Quintero
COO, Blue Lagoon Jets
"Their fast response was impressive."
Ryan Davies
Managing Director, Like Media Group
"They are easy to work with, flexible, and willing to go the extra mile."
Rupert Wallace
Founder, HMOhub
"The quality of their approach was high."
Marcello Rongione
CEO, WeOptimize Ltd
