Support for custom colors for oj-status-meter-gauge/oj-c-meter-circle

[cwebbles]

Currently, oj-status-meter-gauge and oj-c-meter-circle assume a fixed color mapping with its thresholds attribute. You can set values for the color breakpoints, but you can't adjust the default coloring.

readonly thresholdValues = [{ max: 33 }, { max: 67 }, { max: 100 }] - From OJET Cookbook

Note: In this example, any value < 33 is red, < 67 is orange, and above that is green.

Adding a color or class property to the objects in the threshold array or a simple inversion attribute on the oj-status-meter-gauge and oj-c-meter-circle elements would allow users to manipulate the gauge to their liking. Many use cases require inverted/different coloring on the gauge to reflect danger states and normal states (e.g. error counts, budgets, temperature).

Example:

Attribute to invert the default colors

<oj-status-meter-gauge 
  value="85" 
  invert-threshold-colors
  thresholds="[[thresholds]]">
</oj-status-meter-gauge>

Property on thresholds object array

readonly thresholds = [{ max: 33, color: 'green' }, { max: 67, color: 'orange'}, { max: 100, color: 'red'} ];

OR

readonly thresholds = [{ max: 33, class: 'my-meter-green' }, { max: 67, color: 'my-meter-orange'}, { max: 100, color: 'my-meter-red'} ];