Avaiga / taipy

Turns Data and AI algorithms into production-ready web applications in no time.
https://www.taipy.io
Apache License 2.0
15.15k stars 1.84k forks source link

Expose a metric control #551

Closed FabienLelaquais closed 5 months ago

FabienLelaquais commented 2 years ago

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:

Use cases:

Acceptance Criteria

FredLL-Avaiga commented 2 years ago

Any hint ?

FredLL-Avaiga commented 2 years ago

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 commented 2 years ago

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

FredLL-Avaiga commented 2 years ago

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

FredLL-Avaiga commented 2 years ago

or wrap a set of SVG/js components

FlorianJacta commented 1 year ago

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

FredLL-Avaiga commented 1 year ago

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 commented 1 year ago

So that what we'll use. Thanks @FlorianJacta

FredLL-Avaiga commented 11 months ago

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

FlorianJacta commented 9 months ago

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 commented 7 months ago

@FabienLelaquais

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

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

Or a gauge:

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:

jrobinAV commented 7 months ago

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.