+ | ${shipMode} |
+ ${totalProfitTable[shipMode]["Office Supplies"].toLocaleString('en-US', { style: 'currency', currency: 'USD' })} |
+ ${totalProfitTable[shipMode]["Technology"].toLocaleString('en-US', { style: 'currency', currency: 'USD' })} |
+ ${totalProfitTable[shipMode]["Furniture"].toLocaleString('en-US', { style: 'currency', currency: 'USD' })} |
+
`;
+ tableBody.innerHTML += row;
+ });
+}
-// Ambil data profit dari server, proses, dan buat chart
-fetchData(DataUrl)
- .then(data => {
- const processedData = processProfitData(data);
- createBarChartProfitState(processedData);
- })
+// Fungsi untuk mengurutkan data berdasarkan total profit
+function sortShipModes(totalProfitTable, direction) {
+ const shipModes = Object.keys(totalProfitTable);
+
+ shipModes.sort((a, b) => {
+ const totalProfitA = totalProfitTable[a]["Technology"] + totalProfitTable[a]["Office Supplies"] + totalProfitTable[a]["Furniture"];
+ const totalProfitB = totalProfitTable[b]["Technology"] + totalProfitTable[b]["Office Supplies"] + totalProfitTable[b]["Furniture"];
+ return direction === 'asc' ? totalProfitA - totalProfitB : totalProfitB - totalProfitA;
+ });
+
+ return shipModes;
+}
+
+// Fungsi untuk mengambil data dan memperbarui tabel
+function fetchDataAndRenderTable() {
+ fetch(DataUrl)
+ .then(response => response.json())
+ .then(data => {
+ totalProfitTable = calculateTotalProfitTable(data);
+ sortedShipModes = sortShipModes(totalProfitTable, sortDirection);
+ displayProfitTable(totalProfitTable);
+ })
+ .catch(error => console.error('Error fetching data:', error));
+}
-//-------------------------------- LINE CHART MONTHLY SALES PERFORMANCE ----------------------------------
+// Inisialisasi data dan render tabel saat halaman dimuat
+document.addEventListener('DOMContentLoaded', () => {
+ fetchDataAndRenderTable();
+});
+
+// Fungsi Filter Tabel
+function filterTable() {
+ fetchData(DataUrl).then(data => {
+ const filteredData = applyFilters(data);
+ // Use the global total Profit Table variable
+ totalProfitTable = calculateTotalProfitTable(filteredData);
+ displayProfitTable(totalProfitTable);
+ });
+}
+//-------------------------------- LINE CHART MONTHLY SALES PERFORMANCE ROW 2 ----------------------------------
// Fungsi untuk memproses data penjualan bulanan
const preprocessData = (data) => {
const result = {};
@@ -344,8 +386,279 @@ fetch(DataUrl)
})
.catch(error => console.error('Error fetching data:', error));
+ //------------------------------------------------ Most Profitable Category ROW 3 LEFT ------------------------------------------------
+// Proses dan buat diagram
+fetchData(DataUrl).then(data => {
+ // Objek untuk menyimpan total penjualan dan profit per kategori
+ const categories = {};
+
+ data.forEach(pesanan => {
+ const category = pesanan.Category;
+
+ // Hapus '$' dan ',' dari string penjualan dan profit, lalu konversi ke float
+ const penjualan = parseFloat(pesanan.Sales.replace(/[$,]/g, ''));
+ const profit = parseFloat(pesanan.Profit.replace(/[$,]/g, ''));
+
+ // Jika kategori belum ada, inisialisasi dengan nilai awal
+ if (!categories[category]) {
+ categories[category] = { totalPenjualan: 0, totalProfit: 0 };
+ }
+
+ // Tambahkan penjualan dan profit ke kategori
+ categories[category].totalPenjualan += penjualan;
+ categories[category].totalProfit += profit;
+ });
+
+ // Ekstraksi kategori, total penjualan dan total profit ke dalam array terpisah
+ const categoryLabels = Object.keys(categories);
+ const totalPenjualanData = categoryLabels.map(category => categories[category].totalPenjualan);
+ const totalProfitData = categoryLabels.map(category => categories[category].totalProfit);
+
+ // Buat diagram batang horizontal
+ const ctx = document.getElementById('totalCategory').getContext('2d');
+ const totalCategory = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: categoryLabels,
+ datasets: [
+ {
+ label: 'Total Penjualan',
+ data: totalPenjualanData,
+ backgroundColor: 'orange',
+ borderColor: 'range',
+ borderWidth: 1
+ },
+ {
+ label: 'Total Profit',
+ data: totalProfitData,
+ backgroundColor: 'black',
+ borderColor: 'black',
+ borderWidth: 1
+ }
+ ]
+ },
+ options: {
+ indexAxis: 'y',
+ scales: {
+ x: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+});
+
+
+
+
+//------------------------------------------------ The most Profitable and Highest Sales ROW 3 RIGHT------------------------------------------------
+// Ambil data dari JSON
+function fetchData(url) {
+ return fetch(url)
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+ return response.json();
+ })
+ .catch(error => {
+ console.error('There was a problem with the fetch operation:', error);
+ });
+}
+
+// Fungsi untuk mengubah format data
+function processData(data) {
+ const products = {};
+
+ // Loop melalui setiap item dalam data
+ data.forEach(item => {
+ const productName = item["Product Name"];
+ const profit = parseFloat(item["Profit"].replace("$", "").replace(",", ""));
+ const sales = parseFloat(item["Sales"].replace("$", "").replace(",", ""));
+
+ // Jika nama produk sudah ada dalam objek products, tambahkan profit dan sales
+ if (products[productName]) {
+ products[productName].profit += profit;
+ products[productName].sales += sales;
+ } else { // Jika tidak, buat entri baru untuk produk tersebut
+ products[productName] = {
+ profit: profit,
+ sales: sales
+ };
+ }
+ });
+
+ // Mengurutkan produk berdasarkan profit tertinggi
+ const sortedProducts = Object.entries(products).sort((a, b) => b[1].profit - a[1].profit).slice(0, 10);
+
+ return sortedProducts;
+}
+
+// Membuat chart
+async function createChart() {
+ const data = await fetchData(DataUrl);
+ const processedData = processData(data);
+
+ const productNames = processedData.map(item => item[0]);
+ const profits = processedData.map(item => item[1].profit);
+ const sales = processedData.map(item => item[1].sales);
+
+ const ctx = document.getElementById('myChart').getContext('2d');
+ const myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: productNames,
+ datasets: [{
+ label: 'Profit',
+ data: profits,
+ backgroundColor: 'orange',
+ borderColor: 'black',
+ borderWidth: 1
+ }, {
+ label: 'Sales',
+ data: sales,
+ backgroundColor: 'black',
+ borderColor: 'black',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ ticks: {
+ display: false // Menyembunyikan label di sumbu x
+ }
+ }],
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ }
+ }]
+ }
+ }
+ });
+}
+
+// Panggil fungsi untuk membuat chart
+createChart();
+
+//------------------------------------------------ BARCHART SUB CATEGORY TERTINGGI SALES ROW 4 LEFT ------------------------------------------------
+// Fetch data from the URL
+ // Fetch data from the URL
+ fetchData(DataUrl).then(data => {
+ if (!data) return;
+
+ // Process data to aggregate sales by sub-category
+ const subCategorySales = {};
+
+ data.forEach(order => {
+ const subCategory = order["Sub-Category"];
+ const sales = parseFloat(order.Sales.replace(/[^0-9.-]+/g, ""));
+
+ if (!subCategorySales[subCategory]) {
+ subCategorySales[subCategory] = 0;
+ }
+
+ subCategorySales[subCategory] += sales;
+ });
+
+ // Convert the subCategorySales object into an array of [subCategory, sales] pairs
+ const salesArray = Object.entries(subCategorySales);
+
+ // Sort the array by sales in descending order and take the top 10 sub-categories
+ const top10Sales = salesArray.sort((a, b) => b[1] - a[1]).slice(0, 10);
+
+ // Separate the top 10 sub-categories and their sales into separate arrays
+ const subCategories = top10Sales.map(item => item[0]);
+ const sales = top10Sales.map(item => item[1]);
+
+ // Create the horizontal bar chart using Chart.js
+ const ctx = document.getElementById('SubsalesChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: subCategories,
+ datasets: [{
+ label: 'Sales by Sub-Category',
+ data: sales,
+ backgroundColor: 'orange',
+ borderColor: 'orange',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ indexAxis: 'y',
+ scales: {
+ x: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+});
+
+fetch(DataUrl)
+ .then(response => response.json())
+ .then(data => {
+ const processedDataLineChart = preprocessData(data);
+ createLineChart(processedDataLineChart);
+ })
+ .catch(error => console.error('Error fetching data:', error));
+
+
+// ------------------------------------- BARCHART STATE HIGHEST PROFIT ROW 4 RIGHT-------------------------------------
+// Fungsi untuk memproses data profit dan mendapatkan profit per negara bagian
+// Fetch data from the URL
+fetchData(DataUrl).then(data => {
+ if (!data) return;
+
+ // Process data to aggregate profit by state
+ const stateProfit = {};
+
+ data.forEach(order => {
+ const state = order.State;
+ const profit = parseFloat(order.Profit.replace(/[^0-9.-]+/g, ""));
+
+ if (!stateProfit[state]) {
+ stateProfit[state] = 0;
+ }
+
+ stateProfit[state] += profit;
+ });
+
+ // Convert the stateProfit object into an array of [state, profit] pairs
+ const profitArray = Object.entries(stateProfit);
+
+ // Sort the array by profit in descending order and take the top 10 states
+ const top10Profit = profitArray.sort((a, b) => b[1] - a[1]).slice(0, 10);
+ // Separate the top 10 states and their profit into separate arrays
+ const states = top10Profit.map(item => item[0]);
+ const profits = top10Profit.map(item => item[1]);
+ // Create the bar chart using Chart.js
+ const ctx = document.getElementById('profitChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: states,
+ datasets: [{
+ label: 'Profit by State',
+ data: profits,
+ backgroundColor: 'black',
+ borderColor: 'black',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+});
diff --git a/html/monthly.html b/html/monthly.html
index 9630876..6b0db42 100644
--- a/html/monthly.html
+++ b/html/monthly.html
@@ -110,23 +110,16 @@