improve the layout

abdelaziz-mahdy · May 28, 2024 · 9e6e457 · 9e6e457
1 parent e817afa
commit 9e6e457
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/benchmark-app/src/App.css b/benchmark-app/src/App.css
@@ -107,7 +107,30 @@ header {
   height: 100%;
 }
 
+@media (max-width: 768px) {
+  .main-content {
+      flex-direction: column;
+  }
+
+  .sidebar, .fields {
+      width: 100%;
+  }
+
+  .chart-container {
+      padding: 10px;
+  }
+
+  .checkbox-container {
+      flex-direction: column;
+      align-items: flex-start;
+  }
+
+  .checkbox-container input[type="checkbox"] {
+      margin-bottom: 5px;
+  }
+}
+
 @keyframes spin {
   0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+   100% { transform: rotate(360deg); }
 }
diff --git a/benchmark-app/src/App.js b/benchmark-app/src/App.js
@@ -31,7 +31,7 @@ function App() {
         axios.get(`${baseURL}/data.json`, {
             cancelToken: source.token,
             onDownloadProgress: (progressEvent) => {
-                const total = progressEvent.total;
+                const total = progressEvent.total || 1; // Ensure total is not 0 or undefined
                 const current = progressEvent.loaded;
                 setProgress(Math.floor((current / total) * 100));
             }
@@ -96,7 +96,7 @@ function App() {
             <header>
                 <h1>Service Benchmarks</h1>
                 <div className="legend">
-                    <p className="info-text">Below are the tests and their corresponding colors used:</p>
+                    <p className="info-text">Below are the services and their corresponding colors used in the chart:</p>
                     <ul>
                         {Object.entries(colorMap).map(([service, color]) => (
                             <li key={service} style={{ color }}>
@@ -129,7 +129,7 @@ function App() {
                     <div className="fields">
                         <label>Select Fields for Y-axis:</label>
                         {Object.keys(data[selectedServices[0]].data[0])
-                            .filter(field => !['timestamp','Timestamp', 'Time Difference', 'Name', 'Type'].includes(field)) // Exclude specific fields from selection
+                            .filter(field => !['timestamp', 'Timestamp', 'Time Difference', 'Name', 'Type'].includes(field)) // Exclude specific fields from selection
                             .map(field => (
                                 <div key={field} className="checkbox-container" onClick={() => handleFieldChange({ target: { value: field } })}>
                                     <input