Merge pull request #22 from Kampus-Merdeka-Software-Engineering/nahru…

…l/addtable Add table below Row 3
Kampus-Merdeka-Software-Engineering · May 29, 2024 · 6503cc4 · 6503cc4
2 parents 3defbaf + 832b214
commit 6503cc4
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -5,10 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dashboard Sales - Section Balikpapan Team 8</title>
     <link rel="stylesheet" href="style.css" />
+    <!-- <link
+      rel="stylesheet"
+      href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"
+    /> -->
   </head>
 
   <body>
     <main>
+      <!-- Navbar -->
       <div class="main-container">
         <header>
           <nav class="navbar">
@@ -42,6 +47,7 @@
         <div class="sales-performance">
           <h1 id="yearly" class="range">Sales Performance</h1>
         </div>
+        <!-- First row -->
         <section class="container-first-row">
           <div class="score-cards">
             <div class="score-card-revenue">
@@ -76,7 +82,7 @@ <h3>Items Sold</h3>
             </div>
           </div>
         </section>
-
+        <!-- Second Row -->
         <section class="container-second-row">
           <div class="wrap-line-chart">
             <div class="table-top-product sales-trend">
@@ -126,9 +132,9 @@ <h3>Items Sold</h3>
             </div>
           </div>
         </section>
-
+        <!-- Third row -->
         <section class="container-third-row">
-          <div class="genderChart">
+          <div class="barChart">
             <div>
               <canvas
                 class="gender"
@@ -141,10 +147,30 @@ <h3>Items Sold</h3>
           <div class="barChart">
             <canvas id="ageBarChart" width="400" height="200"></canvas>
           </div>
-          <div class="top-country">
+          <div class="barChart">
             <canvas id="myPieChart" width="400" height="400"></canvas>
           </div>
         </section>
+        <!-- Table sales detail -->
+
+        <section class="sales-details centered-section">
+          <h1 class="sales">Sales Details</h1>
+          <div class="sales-table">
+            <table id="user-table">
+              <thead>
+                <tr>
+                  <th>Product</th>
+                  <th>Category</th>
+                  <th>Country</th>
+                  <th>Revenue</th>
+                  <th>Profit</th>
+                  <th>Item sold</th>
+                </tr>
+              </thead>
+              <tbody id="data-output" onload="getData()"></tbody>
+            </table>
+          </div>
+        </section>
         <!-- <section id="about" class="about-section">
           <div class="team-section">
             <h2 class="team8">Team 8 Balikpapan</h2>
@@ -154,9 +180,12 @@ <h2 class="team8">Team 8 Balikpapan</h2>
     </main>
 
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
     <script src="index.js"></script>
     <script src="row2.js"></script>
     <script src="row3.js"></script>
     <script src="style.js"></script>
+    <script src="salesDetail.js"></script>
   </body>
 </html>
diff --git a/salesDetail.js b/salesDetail.js
@@ -0,0 +1,65 @@
+let productSums = [];
+
+async function getData() {
+    try {
+        const response = await fetch("./data/bikesales.json");
+        const data = await response.json();
+
+        const productSumsMap = {};
+
+        data.bikesalesdata.forEach(user => {
+            const { Product, Sub_Category, Country, Revenue, Profit, Order_Quantity } = user;
+
+            if (!productSumsMap[Product]) {
+                productSumsMap[Product] = {
+                    Product,
+                    Sub_Category,
+                    Country,
+                    Revenue: 0,
+                    Profit: 0,
+                    Order_Quantity: 0
+                };
+            }
+
+            productSumsMap[Product].Revenue += parseFloat(Revenue);
+            productSumsMap[Product].Profit += parseFloat(Profit);
+            productSumsMap[Product].Order_Quantity += parseInt(Order_Quantity, 10);
+        });
+
+        productSums = Object.values(productSumsMap);
+        populateTable(productSums);
+
+        $('#user-table').DataTable({
+            data: productSums,
+            columns: [
+                { data: "Product" },
+                { data: "Sub_Category" },
+                { data: "Country" },
+                { data: "Revenue" },
+                { data: "Profit" },
+                { data: "Order_Quantity" }
+            ]
+        });
+    } catch (error) {
+        console.error('Error fetching data:', error);
+    }
+}
+
+function populateTable(data) {
+    let table = '';
+    data.forEach(product => {
+        table += `
+            <tr>
+                <td>${product.Product}</td>
+                <td>${product.Sub_Category}</td>
+                <td>${product.Country}</td>
+                <td>$${product.Revenue.toFixed(2)}</td>
+                <td>$${product.Profit.toFixed(2)}</td>
+                <td>${product.Order_Quantity}</td>
+            </tr>
+        `;
+    });
+    document.getElementById("data-output").innerHTML = table;
+}
+
+window.onload = getData;
diff --git a/style.css b/style.css
@@ -3,7 +3,7 @@ body {
   padding: 0;
   margin: 0;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(180deg, #01cbfd, #fbff00);
+  background: white;
   align-items: center;
   justify-content: center;
 }
@@ -330,7 +330,7 @@ label {
   width: 500px;
   height: 400px;
   margin: 50px auto;
-  background-color: #fff;
+  background-color: yellow;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   justify-content: space-evenly;
@@ -340,7 +340,7 @@ label {
 }
 
 .table-top-product {
-  background-color: white;
+  background-color: yellow;
   width: 700px;
   height: 400px;
   margin: 10px;
@@ -448,10 +448,12 @@ a {
   width: 400px;
   height: 200px;
   padding: 30px;
+  margin:2px;
   border-radius: 10px;
   justify-content: space-evenly;
   align-items: center;
-  background-color: white;
+  background-color: #ffff00;
+  box-shadow: #242424;
 }
 .genderChart {
   display: flex;
@@ -461,10 +463,65 @@ a {
   border-radius: 10px;
   justify-content: space-evenly;
   align-items: center;
+  background-color: yellow;
+}
+
+.sales-details {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
   background-color: white;
 }
+.sales{
+  display: flex;
+  flex-direction: column;
+  color: black; /* Change this to a contrasting color */
+  margin-left: 60px;
+  margin-top: 60px; /* Ensure it's not overlapped by the navbar */
+}
+.sales-table {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+}
+.sales-table thead{
+  background-color: yellow;
+}
+.sales-table table {
+    border-collapse: collapse;
+    width: 80%; /* Adjust as necessary */
+    margin: auto; /* Center the table */
+
+}
+
+.sales-table th, .sales-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    background-color: white;
+}
+
+.sales-table th {
+    text-align: left;
+    background-color: yellow;
+}
+.pagination-buttons {
+  margin-top: 20px;
+}
+
+.pagination-buttons button {
+  margin: 0 5px;
+  padding: 10px 20px;
+}
+#user-table {
+  background-color: yellow;
+  color: black;
+  border-radius: 10px;
+}
 
-@media (max-width: 1024px) {
+
+@media (max-width: 600px) {
   .navbar-links {
     display: none;
     width: 100%;
@@ -564,7 +621,7 @@ a {
   .select-country {
     margin-top: 20px;
   }
-  .barChart{
-    margin:10px;
+  .barChart {
+    margin: 10px;
   }
 }
diff --git a/style.js b/style.js
@@ -19,13 +19,13 @@ function darkmodeToggle() {
   darkmodeCheckbox.addEventListener("change", () => {
     if (darkmodeCheckbox.checked) {
       console.log("Dark mode is on");
-      body.style.background = "linear-gradient(180deg, #000000, #ffff00)";
+      body.style.background = "Black";
       for (let i = 0; i < salesperformance.length; i++) {
         salesperformance[i].style.color = "white";
       }
     } else {
       console.log("Dark mode is off");
-      body.style.background = "linear-gradient(180deg, #01cbfd, #fbff00)";
+      body.style.background = "white";
       for (let i = 0; i < salesperformance.length; i++) {
         salesperformance[i].style.color = "black";
       }