Feature/#551 Expose a metric control

frontend/taipy-gui/package.json

@@ -28,7 +28,7 @@
     "react-window": "^1.8.6",
     "react-window-infinite-loader": "^1.0.7",
     "socket.io-client": "^4.3.2",
-    "sprintf-js": "^1.1.2",
+    "sprintf-js": "^1.1.3",
     "uuid": "^9.0.0"
   },
   "overrides": {

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

@@ -0,0 +1,31 @@
+/*
+ * 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 React from "react";
+import {render} from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import Metric from "./Metric";
+
+describe("Metric Component", () => {
+  it("renders", async () => {
+    const { getByTestId } = render(<Metric testId={'test-id'}/>);
+    const elt = getByTestId("test-id");
+    expect(elt.tagName).toBe("DIV");
+  })
+  it("displays the right info for class", async () => {
+    const { getByTestId } = render(<Metric testId={'test-id'} className={'taipy-gauge'}/>);
+    const elt = getByTestId('test-id');
+    expect(elt).toHaveClass('taipy-gauge');
+  })
+});

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

@@ -0,0 +1,113 @@
+/*
+ * 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 React, {CSSProperties, lazy, Suspense, useMemo} from 'react';
+import {Data} from "plotly.js";
+import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks";
+import {TaipyBaseProps, TaipyHoverProps} from "./utils";
+import Box from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+
+const Plot = lazy(() => import("react-plotly.js"));
+
+interface MetricProps extends TaipyBaseProps, TaipyHoverProps {
+    type?: string
+    min?: number
+    max?: number
+    value?: number
+    defaultValue?: number
+    delta?: number
+    defaultDelta?: number
+    threshold?: number
+    defaultThreshold?: number
+    testId?: string
+    defaultLayout?: string;
+    layout?: string;
+    defaultStyle?: string;
+    style?: string;
+    width?: string | number;
+    height?: string | number;
+}
+
+const emptyLayout = {} as Record<string, Record<string, unknown>>;
+const defaultStyle = {position: "relative", display: "inline-block"};
+
+const Metric = (props: MetricProps) => {
+    const {
+        width = "100%",
+        height
+    } = props;
+    const value = useDynamicProperty(props.value, props.defaultValue, 0)
+    const threshold = useDynamicProperty(props.threshold, props.defaultThreshold, undefined)
+    const delta = useDynamicProperty(props.delta, props.defaultDelta, undefined)
+    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
+    const baseLayout = useDynamicJsonProperty(props.layout, props.defaultLayout || "", emptyLayout);
+    const baseStyle = useDynamicJsonProperty(props.style, props.defaultStyle || "", defaultStyle);
+
+    const data = useMemo(() => ([
+        {
+            domain: {x: [0, 1], y: [0, 1]},
+            value: value,
+            type: "indicator",
+            mode: (() => {
+                let mode = "gauge+number";
+                if (delta !== undefined) mode += "+delta";
+                return mode;
+            })(),
+            delta: {
+                reference: typeof value === 'number' && typeof delta === 'number' ? value - delta : undefined,
+            },
+            gauge: {
+                axis: {range: [
+                    typeof props.min === 'number' ? props.min : 0,
+                    typeof props.max === 'number' ? props.max : 100
+                    ]},
+                shape: props.type === "linear" ? "bullet" : "angular",
+                threshold: {
+                    line: {color: "red", width: 4},
+                    thickness: 0.75,
+                    value: threshold
+                }
+            },
+        }
+    ]), [
+        value,
+        delta,
+        threshold,
+        props.min,
+        props.max,
+        props.type,
+    ]);
+
+    const style = useMemo(
+        () =>
+            height === undefined
+                ? ({...baseStyle, width: width} as CSSProperties)
+                : ({...baseStyle, width: width, height: height} as CSSProperties),
+        [baseStyle, height, width]
+    );
+
+    return (
+        <Box data-testid={props.testId} className={className}>
+            <Suspense fallback={<Skeleton key="skeleton"/>}>
+                <Plot
+                    data={data as Data[]}
+                    layout={baseLayout}
+                    style={style}
+                />
+            </Suspense>
+        </Box>
+    );
+}
+
+export default Metric;

frontend/taipy-gui/src/components/Taipy/index.ts

@@ -39,6 +39,7 @@ import StatusList from "./StatusList";
 import Table from "./Table";
 import Toggle from "./Toggle";
 import TreeView from "./TreeView";
+import Metric from "./Metric";
 
 const registeredComponents: Record<string, ComponentType> = {};
 
@@ -62,6 +63,7 @@ export const getRegisteredComponents = () => {
             Login: Login,
             Layout: Layout,
             MenuCtl: MenuCtl,
+            Metric: Metric,
             NavBar: NavBar,
             PageContent: PageContent,
             Pane: Pane,

frontend/taipy-gui/src/extensions/exports.ts

@@ -17,6 +17,7 @@ import Login from "../components/Taipy/Login";
 import Router from "../components/Router";
 import Table from "../components/Taipy/Table";
 import TableFilter, { FilterDesc } from "../components/Taipy/TableFilter";
+import Metric from "../components/Taipy/Metric";
 import { useLovListMemo, LoV, LoVElt } from "../components/Taipy/lovUtils";
 import { LovItem } from "../utils/lov";
 import { getUpdateVar } from "../components/Taipy/utils";
@@ -45,6 +46,7 @@ export {
     Router,
     Table,
     TableFilter,
+    Metric,
     TaipyContext as Context,
     createRequestDataUpdateAction,
     createRequestUpdateAction,

taipy/gui/_renderers/factory.py

@@ -57,6 +57,7 @@ class _Factory:
         "text": "value",
         "toggle": "value",
         "tree": "value",
+        "metric": "value"
     }
 
     _TEXT_ATTRIBUTES = ["format", "id", "hover_text", "raw"]
@@ -349,6 +350,29 @@ class _Factory:
             ]
         )
         ._set_propagate(),
+        "metric": lambda gui, control_type, attrs: _Builder(
+            gui=gui,
+            control_type=control_type,
+            element_name="Metric",
+            attributes=attrs,
+        )
+        .set_value_and_default(with_default=False, var_type=PropertyType.dynamic_number, native_type=True)
+        .set_attributes(
+            [
+                ("id",),
+                ("active", PropertyType.dynamic_boolean, True),
+                ("layout", PropertyType.dynamic_dict),
+                ("style", PropertyType.dynamic_dict),
+                ("hover_text", PropertyType.dynamic_string),
+                ("type", PropertyType.string, "circular"),
+                ("min", PropertyType.number, 0),
+                ("max", PropertyType.number, 100),
+                ("delta", PropertyType.dynamic_number),
+                ("threshold", PropertyType.dynamic_number),
+                ("width", PropertyType.string_or_number),
+                ("height", PropertyType.string_or_number),
+            ]
+        ),
         "navbar": lambda gui, control_type, attrs: _Builder(
             gui=gui, control_type=control_type, element_name="NavBar", attributes=attrs, default_value=None
         ).set_attributes(