Metric: Add support for None (#2147)

* Add support for None

* added support for "none" and None

* Added Support for None and "none" (case-insensitive)

* Added test for case insensitive checking

* added check for undefined

* Create test_metric.py

* Create test_metric.py

* fix linter issues

* fix linter issues

* Update Metric.tsx

* Update Metric.tsx

* fix minor issue

* fix minor issue

* fix minor issue

* fix value type

* fix value type

* fix expected value

* removing check for null

* removing check for null

* change NONE to None

---------

Co-authored-by: Fred Lefévère-Laoide <90181748+FredLL-Avaiga@users.noreply.github.com>

frontend/taipy-gui/src/components/Taipy/Metric.spec.tsx

@@ -286,8 +286,18 @@ describe("Metric Component", () => {
         });
     });
 
-    it("processes type prop correctly when type is none", async () => {
-        const { container } = render(<Metric type="none"  />);
+    it("processes type prop correctly when type is none (string)", async () => {
+        const { container } = render(<Metric type="none" />);
+        await waitFor(() => {
+            const angularElm = container.querySelector(".angular");
+            const angularAxis = container.querySelector(".angularaxis");
+            expect(angularElm).not.toBeInTheDocument();
+            expect(angularAxis).not.toBeInTheDocument();
+        });
+    });
+    
+    it("processes type prop correctly when type is None", async () => {
+        const { container } = render(<Metric type="None" />);
         await waitFor(() => {
             const angularElm = container.querySelector(".angular");
             const angularAxis = container.querySelector(".angularaxis");

frontend/taipy-gui/src/components/Taipy/Metric.tsx

@@ -87,7 +87,7 @@ const Metric = (props: MetricProps) => {
     }, [props.colorMap, props.max]);
 
     const data = useMemo(() => {
-        const mode = props.type === "none" ? [] : ["gauge"];
+        const mode = typeof props.type === "string" && props.type.toLowerCase() === "none" ? [] : ["gauge"];
         showValue && mode.push("number");
         delta !== undefined && mode.push("delta");
         const deltaIncreasing = props.deltaColor

tests/gui/builder/control/test_metric.py

@@ -0,0 +1,38 @@
+# 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.
+
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+
+def test_metric_builder_none(gui: Gui, helpers):
+    with tgb.Page(frame=None) as page:
+        tgb.metric(type=None, value=42)
+    expected_list = ["<Metric", 'type="None"', 'value={42.0}']
+    helpers.test_control_builder(gui, page, expected_list)
+
+def test_metric_builder_none_lowercase(gui: Gui, helpers):
+    with tgb.Page(frame=None) as page:
+        tgb.metric(type="none", value=42)
+    expected_list = ["<Metric", 'type="none"', 'value={42.0}']
+    helpers.test_control_builder(gui, page, expected_list)
+
+def test_metric_builder_circular(gui: Gui, helpers):
+    with tgb.Page(frame=None) as page:
+        tgb.metric(type="circular", value=42)
+    expected_list = ["<Metric", 'type="circular"', 'value={42.0}']
+    helpers.test_control_builder(gui, page, expected_list)
+
+def test_metric_builder_linear(gui: Gui, helpers):
+    with tgb.Page(frame=None) as page:
+        tgb.metric(type="linear", value=42)
+    expected_list = ["<Metric", 'type="linear"', 'value={42.0}']
+    helpers.test_control_builder(gui, page, expected_list)

tests/gui/control/test_metric.py

@@ -0,0 +1,53 @@
+# 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.
+
+from taipy.gui import Gui
+
+
+def test_metric_md_none(gui: Gui, helpers):
+    md_string = "<|metric|type=None|value=42|>"
+    expected_list = ["<Metric", 'type="None"', 'value={42.0}']
+    helpers.test_control_md(gui, md_string, expected_list)
+
+def test_metric_md_none_lowercase(gui: Gui, helpers):
+    md_string = "<|metric|type=none|value=42|>"
+    expected_list = ["<Metric", 'type="none"', 'value={42.0}']
+    helpers.test_control_md(gui, md_string, expected_list)
+
+def test_metric_md_circular(gui: Gui, helpers):
+    md_string = "<|metric|type=circular|value=42|>"
+    expected_list = ["<Metric", 'type="circular"', 'value={42.0}']
+    helpers.test_control_md(gui, md_string, expected_list)
+
+def test_metric_md_linear(gui: Gui, helpers):
+    md_string = "<|metric|type=linear|value=42|>"
+    expected_list = ["<Metric", 'type="linear"', 'value={42.0}']
+    helpers.test_control_md(gui, md_string, expected_list)
+
+def test_metric_html_none(gui: Gui, helpers):
+    html_string = '<taipy:metric type="None" value="42" />'
+    expected_list = ["<Metric", 'type="None"', 'value={42.0}']
+    helpers.test_control_html(gui, html_string, expected_list)
+
+def test_metric_html_none_lowercase(gui: Gui, helpers):
+    html_string = '<taipy:metric type="none" value="42" />'
+    expected_list = ["<Metric", 'type="none"', 'value={42.0}']
+    helpers.test_control_html(gui, html_string, expected_list)
+
+def test_metric_html_circular(gui: Gui, helpers):
+    html_string = '<taipy:metric type="circular" value="42" />'
+    expected_list = ["<Metric", 'type="circular"', 'value={42.0}']
+    helpers.test_control_html(gui, html_string, expected_list)
+
+def test_metric_html_linear(gui: Gui, helpers):
+    html_string = '<taipy:metric type="linear" value="42" />'
+    expected_list = ["<Metric", 'type="linear"', 'value={42.0}']
+    helpers.test_control_html(gui, html_string, expected_list)