Merge branch 'develop' into feature/wsadapter

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -116,11 +116,12 @@ body:
     validations:
       required: false
 
-  - type: markdown
+  - type: textarea
+    id: acceptance_criteria
     attributes:
-      value: |
-        ### Acceptance Criteria
-        
+      label: "Acceptance Criteria"
+      description: Do not edit the text area below.
+      value: |        
         - [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
         - [ ] Create related issue in taipy-doc for documentation and Release Notes.
 

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -41,15 +41,16 @@ body:
     validations:
       required: false
 
-  - type: markdown
+  - type: textarea
+    id: acceptance_criteria
     attributes:
-      value: |
-        ### Acceptance Criteria
-        
+      label: "Acceptance Criteria"
+      description: Do not edit the text area below.
+      value: |     
         - [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
         - [ ] Create related issue in taipy-doc for documentation and Release Notes.
         - [ ] Check if a new demo could be provided based on this, or if legacy demos could be benefit from it.
-        - [ ] Ensure any change is well documented.      
+        - [ ] Ensure any change is well documented.
 
   - type: checkboxes
     id: terms_checklist_feature

.github/ISSUE_TEMPLATE/refactor-code.yml

@@ -15,12 +15,13 @@ body:
       description: "Describe what improvements can be made(performance, API...) in the codebase without introducing breaking changes."
     validations:
       required: true
-
-  - type: markdown
+
+  - type: textarea
+    id: acceptance_criteria
     attributes:
+      label: "Acceptance Criteria"
+      description: Do not edit the text area below.
       value: |
-        ### 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.

doc/gui/examples/controls/metric-hide-value.py

@@ -0,0 +1,24 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+page = """
+<|90|metric|don't show_value|>
+"""
+
+
+Gui(page).run()
+

doc/gui/examples/controls/metric-layout.py

@@ -0,0 +1,43 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+# Layout reference can be found in the documentation: https://plotly.com/python/reference/layout/
+
+value = 50
+layout = {
+    "width": "1000",
+    "height": "500",
+    "paper_bgcolor": "lightgray",
+    "margin": {
+        "l": 100,
+        "r": 100,
+        "b": 100,
+        "t": 100,
+    },
+    "font": {
+        "size": 20,
+        "color": "black",
+        "family": "Arial",
+    },
+}
+
+page = """
+<|{value}|metric|layout={layout}|>
+"""
+
+Gui(page).run()
+

doc/gui/examples/controls/metric-range.py

@@ -0,0 +1,28 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+min_value = 50
+max_value = 150
+
+page = """
+<|{value}|metric|min={min_value}|max={max_value}|>
+"""
+
+
+Gui(page).run()
+

doc/gui/examples/controls/metric-simple.py

@@ -0,0 +1,27 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+max_value = 150
+delta_value = 20
+threshold = 100
+
+page = """
+<|{value}|metric|max={max_value}|delta={delta_value}|threshold={threshold}|>
+"""
+
+Gui(page).run()

doc/gui/examples/controls/metric-type.py

@@ -0,0 +1,26 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+
+page = """
+<|{value}|metric|type=linear|>
+<|{value}|metric|type=circular|>
+"""
+
+Gui(page).run()
+

doc/gui/examples/controls/metric-value-format.py

@@ -0,0 +1,30 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+delta_value = 20
+
+# format & delta_format are used to format the value and delta value respectively.
+# They use the printf syntax.
+
+page = """
+<|{value}|metric|delta={delta_value}|format=%d km/h|delta_format=%d km/h|>
+"""
+
+
+Gui(page).run()
+

frontend/taipy/src/JobSelector.tsx

@@ -16,7 +16,6 @@ import { DeleteOutline, StopCircleOutlined, Add, FilterList } from "@mui/icons-m
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
-import Chip from "@mui/material/Chip";
 import FormControl from "@mui/material/FormControl";
 import Grid from "@mui/material/Grid";
 import IconButton from "@mui/material/IconButton";
@@ -49,6 +48,7 @@ import {
 } from "taipy-gui";
 
 import { disableColor, popoverOrigin, useClassNames } from "./utils";
+import StatusChip, { Status } from "./StatusChip";
 
 interface JobSelectorProps {
     updateVarName?: string;
@@ -93,41 +93,12 @@ enum JobProps {
 }
 const JobLength = Object.keys(JobProps).length / 2;
 
-enum JobStatus {
-    SUBMITTED = 1,
-    BLOCKED = 2,
-    PENDING = 3,
-    RUNNING = 4,
-    CANCELED = 5,
-    FAILED = 6,
-    COMPLETED = 7,
-    SKIPPED = 8,
-    ABANDONED = 9,
-}
-
 const containerSx = { width: "100%", mb: 2 };
 const selectSx = { height: 50 };
 const containerPopupSx = { width: "619px" };
 const tableWidthSx = { minWidth: 750 };
 const toolbarRightSx = { mr: 6 };
 
-const ChipStatus = ({ status }: { status: number }) => {
-    const statusText = JobStatus[status];
-    let colorFill: "warning" | "default" | "success" | "error" = "warning";
-
-    if (status === JobStatus.COMPLETED || status === JobStatus.SKIPPED) {
-        colorFill = "success";
-    } else if (status === JobStatus.FAILED) {
-        colorFill = "error";
-    } else if (status === JobStatus.CANCELED || status === JobStatus.ABANDONED) {
-        colorFill = "default";
-    }
-
-    const variant = status === JobStatus.FAILED || status === JobStatus.RUNNING ? "filled" : "outlined";
-
-    return <Chip label={statusText} variant={variant} color={colorFill} />;
-};
-
 type JobSelectorColumns = {
     id: string;
     primaryLabel: string;
@@ -443,13 +414,13 @@ const JobSelectedTableRow = ({
             ) : null}
             {showDate ? <TableCell>{creationDate ? new Date(creationDate).toLocaleString() : ""}</TableCell> : null}
             <TableCell>
-                <ChipStatus status={status} />
+                <StatusChip status={status} />
             </TableCell>
             {showCancel || showDelete ? (
                 <TableCell>
-                    {status === JobStatus.RUNNING ? null : status === JobStatus.BLOCKED ||
-                      status === JobStatus.PENDING ||
-                      status === JobStatus.SUBMITTED ? (
+                    {status === Status.RUNNING ? null : status === Status.BLOCKED ||
+                      status === Status.PENDING ||
+                      status === Status.SUBMITTED ? (
                         showCancel ? (
                             <Tooltip title="Cancel Job">
                                 <IconButton data-id={id} onClick={handleCancelJobs}>
@@ -648,9 +619,9 @@ const JobSelector = (props: JobSelectorProps) => {
                 .filter((job) => checked.includes(job[JobProps.id]))
                 .every(
                     (job) =>
-                        job[JobProps.status] === JobStatus.SUBMITTED ||
-                        job[JobProps.status] === JobStatus.BLOCKED ||
-                        job[JobProps.status] === JobStatus.PENDING
+                        job[JobProps.status] === Status.SUBMITTED ||
+                        job[JobProps.status] === Status.BLOCKED ||
+                        job[JobProps.status] === Status.PENDING
                 ),
         [jobRows, checked]
     );
@@ -662,11 +633,11 @@ const JobSelector = (props: JobSelectorProps) => {
                 .filter((job) => checked.includes(job[JobProps.id]))
                 .every(
                     (job) =>
-                        job[JobProps.status] === JobStatus.CANCELED ||
-                        job[JobProps.status] === JobStatus.FAILED ||
-                        job[JobProps.status] === JobStatus.COMPLETED ||
-                        job[JobProps.status] === JobStatus.SKIPPED ||
-                        job[JobProps.status] === JobStatus.ABANDONED
+                        job[JobProps.status] === Status.CANCELED ||
+                        job[JobProps.status] === Status.FAILED ||
+                        job[JobProps.status] === Status.COMPLETED ||
+                        job[JobProps.status] === Status.SKIPPED ||
+                        job[JobProps.status] === Status.ABANDONED
                 ),
         [jobRows, checked]
     );
@@ -689,7 +660,7 @@ const JobSelector = (props: JobSelectorProps) => {
                     filteredJobRows = filteredJobRows.filter((job) => {
                         let rowColumnValue = "";
                         if (filter.data === JobProps.status) {
-                            rowColumnValue = JobStatus[job[JobProps.status]].toLowerCase();
+                            rowColumnValue = Status[job[JobProps.status]].toLowerCase();
                         } else if (filter.data === JobProps.id) {
                             rowColumnValue = `${job[JobProps.id].toLowerCase()}${job[JobProps.name].toLowerCase()}`;
                         } else if (filter.data === JobProps.submitted_id) {