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

…l/finishingrow3

Nahrul/finishingrow3

data/genderandage.json

@@ -1,5 +1,41 @@
 {
-    "gender":[
-
-    ]
-}
+    "salesData": {
+      "2015": {
+        "Adults": {
+          "Male": 1355519.0,
+          "Female": 1555323.0
+        },
+        "Young Adults": {
+          "Male": 1354124.0,
+          "Female": 1178874.0
+        },
+        "Youth": {
+          "Male": 409558.0,
+          "Female": 409870.0
+        },
+        "Seniors": {
+          "Male": 6943.0,
+          "Female": 3070.0
+        }
+      },
+      "2016": {
+        "Adults": {
+          "Male": 1600312.0,
+          "Female": 1551707.0
+        },
+        "Young Adults": {
+          "Male": 1373882.0,
+          "Female": 1291762.0
+        },
+        "Youth": {
+          "Male": 352002.0,
+          "Female": 425824.0
+        },
+        "Seniors": {
+          "Male": 11344.0,
+          "Female": 14200.0
+        }
+      }
+    }
+  }
+

data/topProduct.json

@@ -0,0 +1,22 @@
+[
+  {
+    "ProductName": "Mountain-200 Black, 38",
+    "revenue": 595255
+  },
+  {
+    "ProductName": "Mountain-200 Silver, 42",
+    "revenue": 579096
+  },
+  {
+    "ProductName": "Mountain-200 Silver, 38",
+    "revenue": 526483
+  },
+  {
+    "ProductName": "Mountain-200 Black, 42",
+    "revenue": 494633
+  },
+  {
+    "ProductName": "Mountain-200 Silver, 46",
+    "revenue": 479504
+  }
+]

index.html

@@ -24,6 +24,7 @@
             </a>
             <div class="navbar-links" id="navbar-links">
               <ul>
+                <li class="about">About</li>
                 <li>
                   <input
                     type="checkbox"
@@ -38,8 +39,9 @@
           </nav>
         </header>
 
-        <h1 id="yearly" class="range">Sales Performance</h1>
-
+        <div class="sales-performance">
+          <h1 id="yearly" class="range">Sales Performance</h1>
+        </div>
         <section class="container-first-row">
           <div class="score-cards">
             <div class="score-card-revenue">
@@ -126,18 +128,28 @@ <h3>Items Sold</h3>
         </section>
 
         <section class="container-third-row">
-          <div class="barChart">
+          <div class="genderChart">
             <div>
-              <canvas class="gender" id="GenderBarchart"></canvas>
+              <canvas
+                class="gender"
+                id="TopProduct"
+                width="400"
+                height="200"
+              ></canvas>
             </div>
           </div>
           <div class="barChart">
-            <canvas id="ageBarChart"></canvas>
+            <canvas id="ageBarChart" width="400" height="200"></canvas>
           </div>
           <div class="top-country">
             <canvas id="myPieChart" width="400" height="400"></canvas>
           </div>
         </section>
+        <!-- <section id="about" class="about-section">
+          <div class="team-section">
+            <h2 class="team8">Team 8 Balikpapan</h2>
+          </div>
+        </section> -->
       </div>
     </main>
 

index.js

@@ -59,18 +59,16 @@ function country() {
     console.log(`You selected ${selectedCountry} in ${selectedYear}`);
     if (!selectedCountry && !selectedYear) {
       fetchDataAndCalculateTotals();
-
     }
-    if(selectedYear === "2015"){
-        Rev.textContent = `$${6273281}`
-        prof.textContent = `$${2374621}`
-        Isold.textContent = `${84708}`
-      }
-      else{
-        Rev.textContent = `$${6621033}`
-        prof.textContent = `$${2598258}`
-        Isold.textContent = `${116107}`
-      }
+    if (selectedYear === "2015") {
+      Rev.textContent = `$${6273281}`;
+      prof.textContent = `$${2374621}`;
+      Isold.textContent = `${84708}`;
+    } else {
+      Rev.textContent = `$${6621033}`;
+      prof.textContent = `$${2598258}`;
+      Isold.textContent = `${116107}`;
+    }
     if (selectedCountry === "United Kingdom" && selectedYear === "2015") {
       console.log("It's UK 2015");
       Rev.textContent = `$${2220143}`;
@@ -138,6 +136,5 @@ function country() {
   yearSelect.addEventListener("change", handleSelectionChange);
 }
 
-
 fetchDataAndCalculateTotals();
 country();