Add dynamic label to progress visual element

[FlorianJacta]

Description

Add a dynamic label property to the progress visual element. More than the value is needed to understand the progress of a task/function/... Users should be able to use a label with the progress viz element; it would appear next to the element.

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.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[pravintargaryen]

Hi @FlorianJacta I couldn't be able to find progress element in both controls and blocks. Please Guide me on this.
https://docs.taipy.io/en/latest/manuals/gui/viselements/controls/
https://docs.taipy.io/en/latest/manuals/gui/viselements/blocks/

[yaten2302]

@pravintargaryen , here's the progress element - https://github.com/Avaiga/taipy/blob/develop/frontend%2Ftaipy-gui%2Fsrc%2Fcomponents%2FTaipy%2FProgress.tsx

[pravintargaryen]

Thank you @yaten2302

[yaten2302]

@pravintargaryen , are you working on this issue?
@FlorianJacta , I wanted to ask that in this feature of dynamic label, how the users will be able to use a label with the progress viz element?
Could you please explain about this a bit!

[FabienLelaquais]

@pravintargaryen , are you working on this issue? @FlorianJacta , I wanted to ask that in this feature of dynamic label, how the users will be able to use a label with the progress viz element? Could you please explain about this a bit!

Not sure I get your question, @yaten2302.
Here is the thing: when you bind a variable (or an expression that references a variable) to a dynamic property, then changing the value of the variable (state.<var_name> = <var_value>) would update the display immediately.
So... say 'progress_label' is a Python variable.
Say, like @FlorianJacta is asking, we have a dynamic property called 'label', and the control is defined as <|{val}|progress|label={progress_label}|>.
All the users have to do to update the label is call state.progress_label = <new_value>.

[FabienLelaquais]

So here what what I propose we do:

• Add a 'title' property to the progress control as a dynamic property
• Add a 'title_anchor' property to the progress control that could be "left", "right", "top", "bottom" or "none".
  "none" would hide the title. Defaults to "bottom".
• Make sure this specific element can be styled.
• I would also like a "color" property for the gauge that could be or a dict similar to what we have in the metric control.
  BUT this might be better implemented by generating a data-progress attribute to the component so that CSS can do the job for us, with no additional property at the visual element level.

We also want to review the layout capabilities of the progress control, so we can have several elements on the same line.

[yaten2302]

Okay, @FabienLelaquais , so if I'm not wrong, then, this has to be done:

1. We need a 'title' property, like when the user adds a progress element, then the user must be given an option to add a title, like this - tgb.progress(title="first_progress", value="50"), right? This will display the value of the progress along with the title?
2. I understood about the "none" property, but, could you please explain more about the "left", "right", "top" and "bottom" ones?
3. So, the user must be able to add some CSS properties like it's present in other viz elements?
4. So, the "color" property is for the color of the progress bar/circular element, as shown here?

Ig this issue has been marked 'Staff only', may I work on this or should I skip it for now?

[yaten2302]

Also, I think, if it's staff only, then I think that I can probably work on some issues related to the "Chat" viz element! I see, there are a lot of issues related to it :)

[github-actions]

This issue has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this issue, please add another comment or create a PR that links to this issue. If a PR has already been created which refers to this issue, then you should explicitly mention this issue in the relevant PR. Otherwise, you will be unassigned in 14 days. For more information please refer to the contributing guidelines.

[github-actions]

This issue has been unassigned automatically because it has been marked as "🥶Waiting for contributor" for more than 14 days with no activity.