GitXplorerGitXplorer
g

solar-ui

public
45 stars
17 forks
0 issues

Commits

List of commits on branch master.
Unverified
d238e8634c49f96678112436842ca40bd5392972

Bump version to v0.2.1

ggitname committed 2 years ago
Unverified
14213432fa95c397414d987ecc64a3694f3e5922

Display an alert when the user clicks a navigation link

ggitname committed 2 years ago
Unverified
16bbaa156696fbfe582f3614575c42f74cc74f4f

Bump version to v0.2.0

ggitname committed 2 years ago
Unverified
a553bb792af04c21908d8266d79a09b6d4de6fad

Fix dependency conflict and store `package-lock.json` in repo

ggitname committed 2 years ago
Unverified
456e6abb346dafb1792227e52181ce737b1d848d

Show cursor as pointer when hovering over links in panel status table

ggitname committed 7 years ago
Unverified
40ded927102868114d9e94ba4528c5f8ac2f4fca

Match sidebar height to that of the content it overlays

ggitname committed 7 years ago

README

The README file for this repository.

Solar UI

Introduction

Solar UI is an example user interface for a dashboard a solar panel company might provide to each of its customers, which those customers could use to manage their solar panel systems.

Screenshot

Screenshot

Technologies

Solar UI was built using the following technologies:

  • React (via create-react-app)
  • Redux
  • Semantic UI
  • Chart.js
  • Moment.js
  • Fetch API
  • Jest
  • ECMAScript 2015/ES6

Features

Solar UI has the following features:

  • Data Generation: Continuously generates new solar panel input radiance values using constrained random number generation
  • Data Relationships:
    • Panel Input/Output: When a solar panel is "enabled," its output current is calculated as a function of its input radiance
    • Inverter Output: The inverter output power is calculated as a function of the output power* of all solar panels combined
  • Interactive Charts: When the visitor hovers over a data point in a chart, the chart displays a tooltip containing information about that data point
  • Interactive Table: When the visitor clicks on an "Enabled" toggle slider, the associated solar panel will become enabled or disabled (whichever is the opposite of its previous state)
  • Redux DevTools Extension-Enabled: Curious visitors can monitor the dispatching of Redux actions and examine their contents, by using the Redux DevTools Extension for Google Chrome
  • Responsive Layout:
    • Stacked Panels: On narrow screens, the various panels stack vertically
    • Mobile Menu: On narrow screens, a side navigation menu becomes available
  • REST API Utilization: Retrieves the mock username from the Reqres REST API

* Note: output power = output voltage × output current

Limitations

Solar UI has the following limitations:

  • Lack of Hyperlink Destinations: None of the hyperlinks—with one exception—point to anything. The exception is the "Fork on GitHub" button, which points to this repository on GitHub.
  • Independent "Energy Storage" Values: Although they do change over time, the values depicted in the "Energy Storage" chart are independent of any other values shown in the UI, such as the "Solar Radiance" values or the "Power Output" values.

FAQ

  1. Q: Is this thing actually connected to someone's solar panel system?
    • A: No. All the data displayed on the page is fake and is generated by the app itself, using JavaScript's Math.random() function. There is no actual solar panel system involved. You can enable and disable panels all you want.

Demo

You can explore a live version of Solar UI at the following URL:

https://gitname.github.io/solar-ui/