Expose a metric control

[FabienLelaquais]

What would that feature address

Synthetical representation of complex datasets if am excellent feature to propose to end users: one simple graphical object can represent a value, a trend, that can be understood in a glance. We want to come up with a minimal set of easy-to-configure controls that can be used in such a Business User context.

Description of the ideal solution

A minimal set of highly customizable controls can be used just like any other control to represent such synthetic views of some data.

See if Plotly Express gauges could be a temporary workaround.

From the Taipy GUI standpoint, the initial proposal is:

• a new visual element called "metric".

• this element has the following properties:

  • value: Dynamic. Numerical. Mandatory.
  • type: Static. Valid values: "none", "linear" and "circular". Default value: "circular".
  • min: Static. Numerical. Default value: 0.
  • max: Static. Numerical. Default value: 100.
  • delta: Dynamic. Numerical. Default value: None (no delta is displayed).
  • threshold: Dynamic. Numerical. Default value: None (no threshold is displayed - implies gauge).
  • format: Static. printf format string applied to value. Default :no format.
  • format[delta]: Static. printf format string applied to delta. Default :no format.

Use cases:

• A circular gauge with a value of 50 and a max value of 100 <|50|metrics|>
• A linear gauge with a value of 50 and a max value of 100 <|50|metrics|type=linear|>
• A raw value of 50 (no gauge) <|50|metrics|type=none|>
• A circular gauge with a value of 50, min is -100, max is 100 <|50|metrics|min=-100|max=100|>
• A linear gauge with a value of 20 and delta of 5 <|20|metrics|type=linear|delta=5|>
• A circular gauge with a value of 50 formatted as a percentage <|50|metrics|format=%.2f%%|>

Acceptance Criteria

• [ ] Ensure new code is unit tested, and check code coverage is at least 90%
• [ ] Propagate any change on the demos and run all of them to ensure there is no breaking change
• [ ] Ensure any change is well documented

[FredLL-Avaiga]

Any hint ?

[FredLL-Avaiga]

Google charts has a wrapper for React: https://github.com/RakanNimer/react-google-charts a bit big and redundant with plotly.js but well supported and it looks like it is possible to load only part of the whole package https://developers.google.com/chart A big drawback is that this google visualization library cannot be used offline ! https://developers.google.com/chart/interactive/faq#offline

[FredLL-Avaiga]

Another candidate would be https://martin36.github.io/react-gauge-chart/ which provides a unique and configurable gauge

[FredLL-Avaiga]

We could also design our own ;-) SVG is fun ;-)

[FredLL-Avaiga]

or wrap a set of SVG/js components

• https://codepen.io/naikus/pen/BzkoLL
• https://github.com/Mikhus/canvas-gauges

[FlorianJacta]

Plotly also provides gauge: https://plotly.com/python/gauge-charts/

[FredLL-Avaiga]

It does indeed (and even in js https://plotly.com/javascript/gauge-charts/)

On Thu, Oct 5, 2023 at 1:53 PM FlorianJacta @.***> wrote:

Plotly also provides gauge: https://plotly.com/python/gauge-charts/

— Reply to this email directly, view it on GitHub https://github.com/Avaiga/taipy/issues/551, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVQBA5AQS7E3N3ZLXLP5FUTX52NURAVCNFSM5OOQJ2FKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZUHA3TGMZZGYZA . You are receiving this because you were assigned.Message ID: @.***>

[FabienLelaquais]

So that what we'll use. Thanks @FlorianJacta

[FredLL-Avaiga]

plotly provides only one type of gauge (indicator) Private Zenhub Image

[FlorianJacta]

In the develop version for 3.1, it is possible to create gauges through the chart:

import plotly.graph_objects as go
from taipy.gui import Gui 

fig = go.Figure(go.Indicator(
    domain = {'x': [0, 1], 'y': [0, 1]},
    value = 450,
    mode = "gauge+number+delta",
    title = {'text': "Speed"},
    delta = {'reference': 380},
    gauge = {'axis': {'range': [None, 500]},
             'steps' : [
                 {'range': [0, 250], 'color': "lightgray"},
                 {'range': [250, 400], 'color': "gray"}],
             'threshold' : {'line': {'color': "red", 'width': 4}, 'thickness': 0.75, 'value': 490}}))

Gui('<|chart|figure={fig}|>').run()

[FlorianJacta]

@FabienLelaquais

I want either to be able to create a metric (no gauge, just numbers):

• to display a value,
• correctly formatted with a prefix/suffix/unit,
• add a title,
• add variation.

(For me, the "metric" is the easiest to use in applications and the most useful.)

Or a gauge:

• to display a value with a domain,
• a value correctly formatted with a prefix/suffix/unit,
• add a title,
• add variation.

The goal is to be UX user-friendly and look nice with the Style kit. This is useful to display metrics/KPI like in these examples:

• Covid Dashboard
• Sales
• Stock Dashboard

[jrobinAV]

In my experience, end users frequently asked a mouse over text to explain how to interpret a KPI. It could make sense to add an optional description as a text property.