Gauge Tiles (arc and radial)

By popular feature request, we’re releasing a few Gauge Custom Tiles!

:warning: This requires SharpTools frontend version 240510.xxxx or newer, so make sure to refresh the page on any devices that will be using these Custom Tiles to pull in the latest updates.

Gauge Tile - Gauge.js

The first option is a radial gauge using the Gauge.js library. The default design is a half arc with a pointer, but you can use the Chart Customizations setting to pass in options from their documentation.

:arrow_double_down: Import Gauge Tile - Gauge.js

This also includes some basic settings included as defaults in the Advanced Customizations setting field for quick adjustments:

  • label: hide or show the label (default: false)
    • Accepts a boolean true/false to hide or show the gauge
    • Accepts one of "top", "middle", "bottom" for custom positioning
  • min: set the minimum value
  • max: set the maximum value

Starting from left-to-right, top-to-bottom we have the following customizations:

  1. Default

    { label: false, min: 0, max: 100 }
    
  2. Label Shown (default bottom position)

    { label: true, min: 0, max: 100 }
    
  3. Label Shown, Top Position

    { label: "top", min: 0, max: 100 }
    
  4. Label Shown, Middle Position

    { label: "middle", min: 0, max: 100 }
    
  5. Advanced: Static Zones

    { 
      label: true, min: 0, max: 100, 
      staticZones: [
        {strokeStyle: "#F03E3E", min: 0, max: 33},
        {strokeStyle: "#FFDD00", min: 33, max: 66},
        {strokeStyle: "#30B32D", min: 66, max: 100},
      ],
    }
    
  6. Advanced: Gradient Color by Position

    { 
      label: "middle", min: 0, max: 100 
      generateGradient: true,
      percentColors: [
        [0.0, "#43a047"], 
        [0.50, "#f9c802"], 
        [1.0, "#ff0000"]
      ],
    }
    

Make sure to read the documentation from Gauge.js around the advanced customization options and make note that the formats for the static zones vs the gradient by percent are different formats. The zones are actual static value ranges whereas the percentColors are the fractional percent as a value between 0-1.

Gauge Tile - Apex Charts Donut

The next is a new Gauge tile using the Apex Charts library. The default design is a donut style gauge, but you can use the Chart Customizations setting to pass in customizations from their documentation.

:arrow_double_down: Import Gauge Tile - Apex Charts

The first tile is the out of the box look and feel with a basic customization to complement the base customizations we made to the Gauge.js tile above.

Apex Charts is quite a complex and robust library with tons of customization options. The second example is quite a whopper of a customization snippet copied directly from their examples in their documentation.

Advanced Customization Example (tap to expand)
{
  colors: ["#20E647"],
  plotOptions: {
    radialBar: {
      hollow: {
        margin: 0,
        size: "70%",
        background: "#293450"
      },
      track: {
        dropShadow: {
          enabled: true,
          top: 2,
          left: 0,
          blur: 4,
          opacity: 0.15
        }
      }
    }
  },
  fill: {
    type: "gradient",
    gradient: {
      shade: "dark",
      type: "vertical",
      gradientToColors: ["#87D4F9"],
      stops: [0, 100]
    }
  }
}

The intention of this was to show what’s possible with this type of gauge, but if you want to use heavy customization like this across multiple gauges, I would recommend importing another copy of the custom tile and customizing those options directly in the custom tile code.

Otherwise using heavy customizations in each tile could start to slow down your dashboard loading and will increase the data size of your dashboards with all the redundant / duplicate customizations.

5 Likes

Nice stuff team!
Would it be possible to show a custom text attribute for the unit? Ie: kWh
Also 1x2 seem to cut the value off

I pushed out an update to the arc gauge which supports a new units option in the Chart Customizations (JSON) which allows you to override the unit of measure displayed.

{ label: true, min: 0, max: 100, units: " kWh" }

You can update from source to pull in the latest updates.

The arc gauge itself should be visible in a 1x2 tile, but yeah… there’s not enough room for the label/value with that aspect ratio.

2 Likes

This was a really quick turn-around for that update! Thanks Josh. I just managed to replace a portion of my home energy monitor super tile with a few graphs beneath:

Screenshot 2024-05-20 at 10.37.16

1 Like

That looks great, thanks for sharing! :star_struck:

It seems like you might have already come up with a solution for this request:

…overlapping two inputs on one graph ie : solar production and solar usage on the same model

An approach I’ve seen for graphing that type of energy consumption is to graph the net ratio of contribution / consumption from the grid or solar which you can do with a bit of math in an expression. (eg. -1 to +1)

1 Like

Yeh this is pulling the data from Hubitat devices into variables then a calculation is performed on the Sharptools side. FYI the charts work with negative low numbers - which is great (for net consumption)

1 Like

@josh,

Is it possible to implement the following:

gauge.animationSpeed = 32; // set animation speed (32 is default value)

I have tried in the code but with no luck. I get no gauge displayed at all.

I am hoping to speed-up the animation because when using for a high number it takes a while to reach the actual value.

From a quick review of their documentation, that looks like the right syntax. And from a quick check of their code, it looks like you must programmatically set that value as it doesn’t seem to get set along with their ‘regular’ options.

I’ve gone ahead and updated the tile so it supports animationSpeed as a property in the Advanced Chart Customizations:

{ label: false, min: 0, max: 100, animationSpeed: 5 }

You can update from source to pull in the latest updates.

1 Like

Wow, can’t ask for faster response than that. Thanks Josh.

2 Likes