Skip to content

A small web app to render of an instantaneous property of a datum stream from SolarNetwork as a "donut" style gauge chart.

License

Notifications You must be signed in to change notification settings

SolarNetwork/eo-chart-donut

Repository files navigation

Energise Ōtaki: Donut Chart

This project is a small web app to render of an instantaneous property of a datum stream from SolarNetwork as a "donut" style gauge chart.

You can see the chart in action here:

https://go.solarnetwork.net/nz/eo/donut/

Screenshot of the Energise Ōtaki Donut Chart app

URL parameters

Various aspects of the chart can be customised via URL query parameters.

⚠️ Remember that the values must be URL escaped. For example a color parameter of #FF0000 would be encoded in the URL as color=%23FF0000.

Parameter Default Description
nodeId 690 The SolarNetwork node ID of the datum stream to display.
sourceId EO/OC/ROOF1/SOLAR/1 The SolarNetwork source ID of the datum stream to display.
propName watts The datum stream property name to display.
displayName Power (kW) The property display name, shown in the tooltip when hovering over the active portion of the chart.
scale 1000 A value to divide raw property values by, to convert to the desired display scale. For example the default scale 1000 converts W values to kW.
units kW The units to display with the value.
minValue 0 The minimum overall value, expressed in display scale units.
maxValue 24 The maximum overall value, expressed in display scale units.
barWidth 50 The width of the donut, in pixels.
width 300 The overall width of the chart, in pixels.
height 300 The overall height of the chart, in pixels.
cornerRadius 0 If greater than 0, a bar width ratio to round the bar endcap corners by. For example 0.5 would result in a semi-circle endcap appearance.
color #008000 The bar color, as a CSS color value.
backgroundColor #FFFFFF The page background color, as a CSS color value.
placeholderColor #EDEDED The bar "placeholder" color, that is the "unused" portion of the donut.
textColor #000000 The text label color.

Color values

The color parameters all accept any value CSS color, such as #FF0000, rgb(255,0,0), and so on. For example, a query parameters value like this:

color=rgb(200%2C34%2C56)&backgroundColor=%23212121&placeholderColor=%23323232&cornerRadius=0.1&textColor=%23ededed

would produce a chart like this:

Screenshot of the Energise Ōtaki Donut Chart app with customised colours

Building from source

To build yourself, clone or download this repository. You need to have Node 18+ installed. Then:

# initialize dependencies
npm ci

# run development live server on http://localhost:8080
npm run dev

# build for production
npm run build

Running the build script will generate the application into the dist/ directory.

About

A small web app to render of an instantaneous property of a datum stream from SolarNetwork as a "donut" style gauge chart.

Topics

Resources

License

Stars

Watchers

Forks