Adding color property to Progress

Avaiga · Aug 21, 2024 · f417fd8 · f417fd8
1 parent 58890d4
commit f417fd8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/frontend/taipy-gui/src/components/Taipy/Progress.tsx b/frontend/taipy-gui/src/components/Taipy/Progress.tsx
@@ -22,6 +22,7 @@ import { useClassNames, useDynamicProperty } from "../../utils/hooks";
 import { TaipyBaseProps } from "./utils";
 
 interface ProgressBarProps extends TaipyBaseProps {
+    color?: string; //color of the progress indicator
     linear?: boolean; //by default - false
     showValue?: boolean; //by default - false
     value?: number; //progress value
@@ -87,7 +88,16 @@ const Progress = (props: ProgressBarProps) => {
                 ) : null}
                 <Box sx={{ ...linearSx, width: getBoxWidth(title, titleAnchor) }} className={className} id={props.id}>
                     <Box sx={linearPrgSx}>
-                        <LinearProgress data-progress={value} variant="determinate" value={value} />
+                        <LinearProgress
+                            sx={{
+                                "& .MuiLinearProgress-bar": {
+                                    background: props.color ? props.color : undefined,
+                                },
+                            }}
+                            data-progress={value}
+                            variant="determinate"
+                            value={value}
+                        />
                     </Box>
                     <Box sx={linearTxtSx}>
                         <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
@@ -126,7 +136,12 @@ const Progress = (props: ProgressBarProps) => {
             ) : null}
             <LinearProgress
                 id={props.id}
-                sx={{ width: "100%" }}
+                sx={{
+                    width: "100%",
+                    "& .MuiLinearProgress-bar": {
+                        background: props.color ? props.color : undefined,
+                    },
+                }}
                 variant={value === undefined ? "indeterminate" : "determinate"}
                 value={value}
                 className={className}

diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
@@ -595,6 +595,7 @@ class _Factory:
         .set_value_and_default(var_type=PropertyType.dynamic_number, native_type=True)
         .set_attributes(
             [
+                ("color", PropertyType.string),
                 ("linear", PropertyType.boolean, False),
                 ("show_value", PropertyType.boolean, False),
                 ("title", PropertyType.dynamic_string),

diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
@@ -1275,6 +1275,11 @@
                         "doc": "If set, then the value represents the progress percentage that is shown.TODO - if unset?",
                         "default_property": true
                     },
+                    {
+                        "name": "color",
+                        "type": "str",
+                        "doc": "The color of the progress indicator."
+                    },
                     {
                         "name": "linear",
                         "type": "bool",
@@ -1287,6 +1292,17 @@
                         "default_value": "False",
                         "doc": "If set to True, the progress value is shown."
                     },
+                    {
+                        "name": "title",
+                        "type": "dynamic(str)",
+                        "doc": "The title of the progress indicator."
+                    },
+                    {
+                        "name": "title_anchor",
+                        "type": "str",
+                        "default_value": "\"bottom\"",
+                        "doc": "The anchor of the title."
+                    },
                     {
                         "name": "render",
                         "type": "dynamic(bool)",