From be01040ae2d260aafe13cd61f006e8e26f1abda7 Mon Sep 17 00:00:00 2001 From: namnguyen Date: Wed, 11 Dec 2024 15:05:07 +0700 Subject: [PATCH] fix css probs for metric --- .../src/components/Taipy/Metric.spec.tsx | 146 ++++++++++++++++-- .../taipy-gui/src/components/Taipy/Metric.tsx | 53 ++++--- 2 files changed, 171 insertions(+), 28 deletions(-) diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.spec.tsx index b2e595abf7..0304c2ff72 100644 --- a/frontend/taipy-gui/src/components/Taipy/Metric.spec.tsx +++ b/frontend/taipy-gui/src/components/Taipy/Metric.spec.tsx @@ -239,7 +239,7 @@ describe("Metric Component", () => { }); it("applies style correctly when deltaColor is set", async () => { - const { container } = render(); + const { container } = render(); await waitFor(() => { const elt = container.querySelector(".delta"); expect(elt).toHaveStyle({ @@ -249,7 +249,7 @@ describe("Metric Component", () => { }); it("applies style correctly when deltaColor is set invert", async () => { - const { container } = render(); + const { container } = render(); await waitFor(() => { const elt = container.querySelector(".delta"); expect(elt).toHaveStyle({ @@ -259,7 +259,7 @@ describe("Metric Component", () => { }); it("processes type and threshold props correctly when type is linear", async () => { - const { container } = render(); + const { container } = render(); await waitFor(() => { const elt = container.querySelector(".bullet"); expect(elt).toBeInTheDocument(); @@ -267,7 +267,7 @@ describe("Metric Component", () => { }); it("processes type and threshold props correctly when type is not linear", async () => { - const { container } = render(); + const { container } = render(); await waitFor(() => { const elt = container.querySelector(".angular"); expect(elt).toBeInTheDocument(); @@ -286,6 +286,132 @@ describe("Metric Component", () => { }); }); + it("applies style correctly when height is set to 100px", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "100%", + height: "100px", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when height is set to 30em", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "100%", + height: "30em", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when height is set to 30%", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "100%", + height: "30%", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when height is set to 30vh", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "100%", + height: "30vh", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when height is set to 30vw", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "100%", + height: "30vw", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when width is set to 100px", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "100px", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when width is set to 30em", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "30em", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when width is set to 30%", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "30%", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when width is set to 30vh", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "30vh", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("applies style correctly when width is set to 30vw", async () => { + const { container } = render(); + await waitFor(() => { + const elt = container.querySelector(".js-plotly-plot"); + expect(elt).toHaveStyle({ + width: "30vw", + position: "relative", + display: "inline-block", + }); + }); + }); + + it("processes type prop correctly when type is none (string)", async () => { const { container } = render(); await waitFor(() => { @@ -295,7 +421,7 @@ describe("Metric Component", () => { expect(angularAxis).not.toBeInTheDocument(); }); }); - + it("processes type prop correctly when type is None", async () => { const { container } = render(); await waitFor(() => { @@ -315,8 +441,8 @@ describe("Metric Component", () => { const { container } = render( - - + + , ); await waitFor(() => { const elt = container.querySelector(".main-svg"); @@ -335,8 +461,8 @@ describe("Metric Component", () => { const { container } = render( - - + + , ); await waitFor(() => { const elt = container.querySelector(".main-svg"); @@ -348,7 +474,7 @@ describe("Metric Component", () => { it.skip("logs an error when template_Dark_ prop is not a valid JSON string", () => { const consoleSpy = jest.spyOn(console, "info"); - render(); + render(); expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("Error while parsing Metric.template")); consoleSpy.mockRestore(); }); // TODO: Not working at the moment, need to fix diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx index 081e9897ff..29c2e5609b 100644 --- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx +++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx @@ -56,6 +56,7 @@ const emptyLayout = {} as Partial; const defaultStyle = { position: "relative", display: "inline-block", width: "100%" } as CSSProperties; const skeletonStyle = { ...defaultStyle, minHeight: "7em" }; const plotConfig = { displaylogo: false }; +const boxStyle = { height: "100vh" }; const Metric = (props: MetricProps) => { const { showValue = true } = props; @@ -92,17 +93,17 @@ const Metric = (props: MetricProps) => { delta !== undefined && mode.push("delta"); const deltaIncreasing = props.deltaColor ? { - color: props.deltaColor == "invert" ? "#FF4136" : props.deltaColor, - } + color: props.deltaColor == "invert" ? "#FF4136" : props.deltaColor, + } : undefined; const deltaDecreasing = props.deltaColor == "invert" ? { - color: "#3D9970", - } + color: "#3D9970", + } : props.negativeDeltaColor - ? { color: props.negativeDeltaColor } - : undefined; + ? { color: props.negativeDeltaColor } + : undefined; return [ { domain: { x: [0, 1], y: [0, 1] }, @@ -158,8 +159,6 @@ const Metric = (props: MetricProps) => { const layout = useMemo(() => { const layout = { ...baseLayout, - height: baseLayout.height !== undefined ? baseLayout.height : props.height, - width: baseLayout.width !== undefined ? baseLayout.width : props.width, }; let template = undefined; try { @@ -185,8 +184,6 @@ const Metric = (props: MetricProps) => { return layout as Partial; }, [ props.title, - props.height, - props.width, props.template, props.template_Dark_, props.template_Light_, @@ -194,15 +191,35 @@ const Metric = (props: MetricProps) => { baseLayout, ]); + const style = useMemo(() => { + const normalizeSize = (val: string | number | undefined): string | undefined => { + if (typeof val === "number" || (typeof val === "string" && /^\d+$/.test(val))) { + return `${val}px`; + } + return val; + }; + + const width = props.width ? normalizeSize(props.width) : "100%"; + const height = props.height ? normalizeSize(props.height) : undefined; + + return { ...defaultStyle, width, height }; + }, [props.width, props.height]); + return ( - - - }> - - - {props.children} - - + + + }> + + + {props.children} + + ); };