Merge branch '1396-discussion-adding-color_range_step-property-to-met…

…ric-component' of github.com:Avaiga/taipy into 1396-discussion-adding-color_range_step-property-to-metric-component
Avaiga · Jun 20, 2024 · 0fe8b8c · 0fe8b8c
2 parents 3b36afc + c4a8882
commit 0fe8b8c
Show file tree

Hide file tree

Showing 12 changed files with 323 additions and 296 deletions.
diff --git a/frontend/taipy-gui/package-lock.json b/frontend/taipy-gui/package-lock.json
diff --git a/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx
@@ -24,6 +24,11 @@ describe("Progress component", () => {
         const elt = getByRole("progressbar");
         expect(elt).toHaveClass("MuiCircularProgress-root");
     });
+    it("uses the class", async () => {
+        const { getByRole } = render(<Progress className="taipy-progress" />);
+        const elt = getByRole("progressbar");
+        expect(elt).toHaveClass("taipy-progress");
+    });
     it("renders circular progress with value (determinate)", () => {
         const { getByRole, getByText } = render(<Progress showValue value={50} />);
         const elt = getByRole("progressbar");

diff --git a/frontend/taipy-gui/src/components/Taipy/Progress.tsx b/frontend/taipy-gui/src/components/Taipy/Progress.tsx
@@ -18,9 +18,10 @@ import CircularProgress from "@mui/material/CircularProgress";
 import LinearProgress from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 
-import { useDynamicProperty } from "../../utils/hooks";
+import { useClassNames, useDynamicProperty } from "../../utils/hooks";
+import { TaipyBaseProps } from "./utils";
 
-interface ProgressBarProps {
+interface ProgressBarProps extends TaipyBaseProps {
     linear?: boolean; //by default - false
     showValue?: boolean; //by default - false
     value?: number; //progress value
@@ -29,10 +30,26 @@ interface ProgressBarProps {
     defaultRender?: boolean;
 }
 
+const linearSx = { display: "flex", alignItems: "center" };
+const linearPrgSx = { width: "100%", mr: 1 };
+const linearTxtSx = { minWidth: 35 };
+const circularSx = { position: "relative", display: "inline-flex" };
+const circularPrgSx = {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    position: "absolute",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+};
+
 const Progress = (props: ProgressBarProps) => {
-    const { linear, showValue } = props;
+    const { linear = false, showValue = false } = props;
 
-    const value = useDynamicProperty(props.value, props.defaultValue, undefined);
+    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
+    const value = useDynamicProperty(props.value, props.defaultValue, undefined, "number");
     const render = useDynamicProperty(props.render, props.defaultRender, true);
 
     if (!render) {
@@ -41,39 +58,38 @@ const Progress = (props: ProgressBarProps) => {
 
     return showValue && value !== undefined ? (
         linear ? (
-            <Box sx={{ display: "flex", alignItems: "center" }}>
-                <Box sx={{ width: "100%", mr: 1 }}>
+            <Box sx={linearSx} className={className} id={props.id}>
+                <Box sx={linearPrgSx}>
                     <LinearProgress variant="determinate" value={value} />
                 </Box>
-                <Box sx={{ minWidth: 35 }}>
+                <Box sx={linearTxtSx}>
                     <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
                 </Box>
             </Box>
         ) : (
-            <Box sx={{ position: "relative", display: "inline-flex" }}>
+            <Box sx={circularSx} className={className} id={props.id}>
                 <CircularProgress variant="determinate" value={value} />
-                <Box
-                    sx={{
-                        top: 0,
-                        left: 0,
-                        bottom: 0,
-                        right: 0,
-                        position: "absolute",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }}
-                >
+                <Box sx={circularPrgSx}>
                     <Typography variant="caption" component="div" color="text.secondary">
                         {`${Math.round(value)}%`}
                     </Typography>
                 </Box>
             </Box>
         )
     ) : linear ? (
-        <LinearProgress variant={value === undefined ? "indeterminate" : "determinate"} value={value} />
+        <LinearProgress
+            id={props.id}
+            variant={value === undefined ? "indeterminate" : "determinate"}
+            value={value}
+            className={className}
+        />
     ) : (
-        <CircularProgress variant={value === undefined ? "indeterminate" : "determinate"} value={value} />
+        <CircularProgress
+            id={props.id}
+            variant={value === undefined ? "indeterminate" : "determinate"}
+            value={value}
+            className={className}
+        />
     );
 };
 

diff --git a/frontend/taipy-gui/src/utils/hooks.ts b/frontend/taipy-gui/src/utils/hooks.ts
@@ -29,16 +29,16 @@ import { TIMEZONE_CLIENT } from "../utils";
  * @param defaultStatic - The default static value.
  * @returns The latest updated value.
  */
-export const useDynamicProperty = <T>(value: T, defaultValue: T, defaultStatic: T): T => {
+export const useDynamicProperty = <T>(value: T, defaultValue: T, defaultStatic: T, check_type?: string): T => {
     return useMemo(() => {
-        if (value !== undefined) {
+        if (value !== undefined && (!check_type || typeof value === check_type)) {
             return value;
         }
-        if (defaultValue !== undefined) {
+        if (defaultValue !== undefined && (!check_type || typeof value === check_type)) {
             return defaultValue;
         }
         return defaultStatic;
-    }, [value, defaultValue, defaultStatic]);
+    }, [value, defaultValue, defaultStatic, check_type]);
 };
 
 /**