From 9a15ae9df9e2d0947b8373c7502e97bda00bfa83 Mon Sep 17 00:00:00 2001
From: Hajar RAHMOUNI <hajar.rahmouni@etu.univ-lehavre.fr>
Date: Fri, 5 Jan 2024 21:42:32 +0100
Subject: [PATCH] same loader for charts

---
 pwa/app/components/bar-chart/chart.jsx |  6 ++++--
 pwa/app/components/line_chart.jsx      |  3 +--
 pwa/app/page.jsx                       | 11 ++++++++---
 pwa/app/style/style.css                | 12 +++++++++---
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/pwa/app/components/bar-chart/chart.jsx b/pwa/app/components/bar-chart/chart.jsx
index 9028d21..e8721f1 100644
--- a/pwa/app/components/bar-chart/chart.jsx
+++ b/pwa/app/components/bar-chart/chart.jsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import * as d3 from 'd3';
 
-const BarChart = ({ data }) => {
+const BarChart = ({ data}) => {
     const d3Chart = useRef();
 
     const drawChart = () => {
@@ -81,7 +83,7 @@ const BarChart = ({ data }) => {
     }, [data]);
 
     return (
-        <div style={{ overflowX: 'auto' }}>
+        <div style={{ position: 'relative', overflowX: 'auto' }}>
             <div ref={d3Chart}></div>
         </div>
     );
diff --git a/pwa/app/components/line_chart.jsx b/pwa/app/components/line_chart.jsx
index 83a95c8..c32bd66 100644
--- a/pwa/app/components/line_chart.jsx
+++ b/pwa/app/components/line_chart.jsx
@@ -5,6 +5,7 @@ import * as d3 from "d3";
 
 function LineChart({ data }) {
     const chartRef = useRef(null);
+    const isLoading = data.length === 0;
 
     const width = 940;
     const height = 400;
@@ -13,8 +14,6 @@ function LineChart({ data }) {
     const marginBottom = 30;
     const marginLeft = 60;
 
-    const isLoading = data.length === 0;
-
 
     useEffect(() => {
         const x = d3.scaleTime()
diff --git a/pwa/app/page.jsx b/pwa/app/page.jsx
index ef8ac75..e61855e 100644
--- a/pwa/app/page.jsx
+++ b/pwa/app/page.jsx
@@ -9,13 +9,14 @@ import DateInput from "./components/date-input";
 import DataForm from "./components/bar-chart/form";
 import BarChart from "./components/bar-chart/chart";
 import Line_Chart from "./components/line_chart.jsx";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 
 export default function Page() {
     const [donutValues, setDonutValues] = useState([]);
     const [chartData, setChartData] = useState([]);
     const [lineData, setLineData] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    const Loader = () => <div>Loading...</div>;
 
     const handleFormSubmit = async (formData) => {
         setIsLoading(true);
@@ -23,6 +24,7 @@ export default function Page() {
         setChartData(data);
         setIsLoading(false);
     };
+
     const loadInitialBarChartData = async () => {
         setIsLoading(true);
         try {
@@ -70,9 +72,12 @@ export default function Page() {
                 </div>
                 <div className="card">
                     <h3>Nombre des ventes par période</h3>
-                    {isLoading && <Loader/>}
                     <DataForm onSubmit={handleFormSubmit}/>
-                    <BarChart data={chartData}/>
+                    {isLoading? (
+                        <FontAwesomeIcon className="spinner" icon={faSpinner} spin size="3x" />
+                    ) : (
+                        <BarChart data={chartData}/>
+                    )}
                 </div>
                 <div className="card">
                     <h3>Répartition des ventes par régions</h3>
diff --git a/pwa/app/style/style.css b/pwa/app/style/style.css
index f16df6e..2e1b648 100644
--- a/pwa/app/style/style.css
+++ b/pwa/app/style/style.css
@@ -3,14 +3,16 @@
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 20px;
-    margin: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: auto;
+    margin-bottom: 20px;
 }
 
 .card-container {
     display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    width: auto;
 }
 
 .chart-container {
@@ -41,3 +43,7 @@
 .form-container button:hover {
     background-color: #45a049;
 }
+
+.spinner{
+    margin: 50%;
+}
-- 
GitLab