From c8deddd8587d42f3131b2b3ba5edecd64edc0584 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 8 May 2024 13:07:11 +0330 Subject: [PATCH 1/3] Statistic component inside charts category is created --- Client/src/App.jsx | 6 +++- .../Charts/Statistics/Statistic.jsx | 13 ++++++++ .../Charts/Statistics/statistic.css | 33 +++++++++++++++++++ .../screens/PlayGround/PlayGround-Charts.jsx | 18 ++++++++++ Client/src/screens/PlayGround/playGround.css | 3 ++ 5 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 Client/src/components/Charts/Statistics/Statistic.jsx create mode 100644 Client/src/components/Charts/Statistics/statistic.css create mode 100644 Client/src/screens/PlayGround/PlayGround-Charts.jsx create mode 100644 Client/src/screens/PlayGround/playGround.css diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 519f2fc59..51f7b01e4 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,7 +1,11 @@ +import PlayGroundCharts from "./screens/PlayGround/PlayGround-Charts"; + function App() { return ( <> -
+
+ +
); } diff --git a/Client/src/components/Charts/Statistics/Statistic.jsx b/Client/src/components/Charts/Statistics/Statistic.jsx new file mode 100644 index 000000000..8d0775866 --- /dev/null +++ b/Client/src/components/Charts/Statistics/Statistic.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import "./statistic.css"; + +function Statistic({ title, value }) { + return ( +
+
{title}
+
{value}
+
+ ); +} + +export default Statistic; diff --git a/Client/src/components/Charts/Statistics/statistic.css b/Client/src/components/Charts/Statistics/statistic.css new file mode 100644 index 000000000..ce1e4dc41 --- /dev/null +++ b/Client/src/components/Charts/Statistics/statistic.css @@ -0,0 +1,33 @@ +:root { + --spacing-general-0: 5px 10px; + --color-border-0: #eaecf0; + --border-radius-0: 4px; + --font-size-0: 1rem; + --font-size-1: 13px; + --font-family-0: "Roboto", "Helvetica", "Arial", sans-serif; + --font-color-0: #344054; + --margin-bottom-0: 10px; +} + +.statistic-tile { + margin: var(--spacing-general-0); + padding: var(--spacing-general-0); + border: 1px solid var(--color-border-0); + border-radius: var(--border-radius-0); + + width: 180px; +} + +.statistic-tile-title { + font-size: var(--font-size-0); + font-family: var(--font-family-0); + color: var(--font-color-0); + margin-bottom: var(--margin-bottom-0); +} + +.statistic-tile-value { + font-size: var(--font-size-1); + font-family: var(--font-family-0); + font-weight: 500; + margin-bottom: var(--margin-bottom-0); +} diff --git a/Client/src/screens/PlayGround/PlayGround-Charts.jsx b/Client/src/screens/PlayGround/PlayGround-Charts.jsx new file mode 100644 index 000000000..7c975829d --- /dev/null +++ b/Client/src/screens/PlayGround/PlayGround-Charts.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import "./playGround.css"; +import Statistic from "../../components/Charts/Statistics/Statistic"; + +function PlayGroundCharts() { + return ( + <> +
+ + + + +
+ + ); +} + +export default PlayGroundCharts; diff --git a/Client/src/screens/PlayGround/playGround.css b/Client/src/screens/PlayGround/playGround.css new file mode 100644 index 000000000..0dac2ae31 --- /dev/null +++ b/Client/src/screens/PlayGround/playGround.css @@ -0,0 +1,3 @@ +.play-ground-charts { + display: flex; +} From 8921bffcd9ac3e374ae6128425038192ca1c9697 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 8 May 2024 13:35:16 +0330 Subject: [PATCH 2/3] charts user interface implementation completed --- .../Charts/Servers/ServerStatus.jsx | 13 ++++++ .../Charts/Servers/serverStatus.css | 46 +++++++++++++++++++ .../Charts/Statistics/statistic.css | 9 ++-- .../screens/PlayGround/PlayGround-Charts.jsx | 7 +++ Client/src/screens/PlayGround/playGround.css | 4 ++ 5 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 Client/src/components/Charts/Servers/ServerStatus.jsx create mode 100644 Client/src/components/Charts/Servers/serverStatus.css diff --git a/Client/src/components/Charts/Servers/ServerStatus.jsx b/Client/src/components/Charts/Servers/ServerStatus.jsx new file mode 100644 index 000000000..5ca266d54 --- /dev/null +++ b/Client/src/components/Charts/Servers/ServerStatus.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import "./serverStatus.css"; + +function ServerStatus({ title, value, state }) { + return ( +
+
{title}
+
{value}
+
+ ); +} + +export default ServerStatus; diff --git a/Client/src/components/Charts/Servers/serverStatus.css b/Client/src/components/Charts/Servers/serverStatus.css new file mode 100644 index 000000000..3fcb0780c --- /dev/null +++ b/Client/src/components/Charts/Servers/serverStatus.css @@ -0,0 +1,46 @@ +:root { + --spacing-general-0: 10px 25px; + --spacing-general-1: 20px; + --color-border-0: #eaecf0; + --border-radius-0: 4px; + --font-size-0: 1rem; + --font-size-2: 36px; + --font-family-0: "Roboto", "Helvetica", "Arial", sans-serif; + + --color-up: #17b26a; + --color-down: #f04438; + --color-pause: #fdb022; +} + +.server-status-tile { + width: 230px; + margin: var(--spacing-general-0); + padding: var(--spacing-general-1); + border: 1px solid var(--color-border-0); + border-radius: var(--border-radius-0); +} + +.server-status-tile-title { + font-size: var(--font-size-0); + font-family: var(--font-family-0); + font-weight: bold; + margin-bottom: 25px; +} + +.server-status-tile-value { + font-size: var(--font-size-2); + font-family: var(--font-family-0); + font-weight: bolder; +} + +.up { + color: var(--color-up); +} + +.down { + color: var(--color-down); +} + +.pause { + color: var(--color-pause); +} diff --git a/Client/src/components/Charts/Statistics/statistic.css b/Client/src/components/Charts/Statistics/statistic.css index ce1e4dc41..31b322d28 100644 --- a/Client/src/components/Charts/Statistics/statistic.css +++ b/Client/src/components/Charts/Statistics/statistic.css @@ -1,5 +1,5 @@ :root { - --spacing-general-0: 5px 10px; + --stats-spacing-general-0: 5px 10px; --color-border-0: #eaecf0; --border-radius-0: 4px; --font-size-0: 1rem; @@ -10,8 +10,8 @@ } .statistic-tile { - margin: var(--spacing-general-0); - padding: var(--spacing-general-0); + margin: var(--stats-spacing-general-0); + padding: var(--stats-spacing-general-0); border: 1px solid var(--color-border-0); border-radius: var(--border-radius-0); @@ -28,6 +28,7 @@ .statistic-tile-value { font-size: var(--font-size-1); font-family: var(--font-family-0); - font-weight: 500; + color: var(--font-color-0); + font-weight: 700; margin-bottom: var(--margin-bottom-0); } diff --git a/Client/src/screens/PlayGround/PlayGround-Charts.jsx b/Client/src/screens/PlayGround/PlayGround-Charts.jsx index 7c975829d..cf0b9dd7e 100644 --- a/Client/src/screens/PlayGround/PlayGround-Charts.jsx +++ b/Client/src/screens/PlayGround/PlayGround-Charts.jsx @@ -1,6 +1,7 @@ import React from "react"; import "./playGround.css"; import Statistic from "../../components/Charts/Statistics/Statistic"; +import ServerStatus from "../../components/Charts/Servers/ServerStatus"; function PlayGroundCharts() { return ( @@ -11,6 +12,12 @@ function PlayGroundCharts() { +
+
+ + + +
); } diff --git a/Client/src/screens/PlayGround/playGround.css b/Client/src/screens/PlayGround/playGround.css index 0dac2ae31..c5b86268c 100644 --- a/Client/src/screens/PlayGround/playGround.css +++ b/Client/src/screens/PlayGround/playGround.css @@ -1,3 +1,7 @@ .play-ground-charts { display: flex; } + +.play-ground-charts-spacing { + height: 110px; +} From 49bda73557887f98e4a0f7b2b14b9099d0dcfae9 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 8 May 2024 13:36:40 +0330 Subject: [PATCH 3/3] charts done. going for the pull request --- Client/src/App.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 51f7b01e4..519f2fc59 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,11 +1,7 @@ -import PlayGroundCharts from "./screens/PlayGround/PlayGround-Charts"; - function App() { return ( <> -
- -
+
); }