Metrics Displays Test/Demo

OVMS V3 is based on metrics. Metrics can be single numerical or textual values or complex values like sets and arrays. The web framework keeps all metrics in a global object, which can be read simply by e.g. `metrics["v.b.soc"]`.

Metrics updates (as well as other updates) are sent to all DOM elements having the `receiver` class. To hook into these updates, simply add an event listener for `msg:metrics`. Listening to the event is not necessary if all you need is some metrics display. This is covered by the `metric` class family as shown here.

#### Basic usage

All elements of class `metric` in a `receiver` are checked for the `data-metric` attribute. If no specific metric class is given, the metric value is simply set as the element text: ? is your current network provider.

#### Text & Number

`number` & `text` displays get the metric value set in their child of class `value`. They may additionally have labels and units. `data-prec` can be used on `number` to set the precision, `data-scale` to scale the raw values by a factor. They have fixed min widths and float by default, so you can simply put multiple displays into the same container:

Throttle: ? %
? Vref
Network: ?

#### Progress Bar

Bootstrap `progress` bars can be used as lightweight graphical indicators. Labels and units are available, also `data-prec` and `data-scale`. Again, all you need is a bit of markup:

Throttle: ? %
12V ref: ? V

#### Gauges & Charts

The OVMS web framework has builtin support for the highly versatile Highcharts library with loads of chart types and options. `chart` metric examples:

For charts, a little bit of scripting is necessary. The scripts for these charts contain the chart configuration, part of which is the update function you need to define. The update function translates metrics data into chart data. This is trivial for single values like the throttle, the cell voltage chart is an example on basic array processing.

Also, while charts can be defined with few options, you'll love to explore all the features and fine tuning options provided by Highcharts. For inspiration, have a look at the Highcharts demos and the Highcharts documentation. We're using styled mode, so some options don't apply, but everything can be styled by standard CSS.