From 9968536f2a24d040c2f16d292a7ee17e45ed97f9 Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Tue, 28 May 2024 14:02:06 +0700 Subject: [PATCH 1/9] Update testfitur.html --- testfitur.html | 84 -------------------------------------------------- 1 file changed, 84 deletions(-) diff --git a/testfitur.html b/testfitur.html index 0353fd4..e69de29 100644 --- a/testfitur.html +++ b/testfitur.html @@ -1,84 +0,0 @@ - - - - - - Choropleth Map Chart - - - - - - - - - From 51216a30dc2760901852f06e374e60fdf630a7c3 Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Tue, 28 May 2024 14:28:16 +0700 Subject: [PATCH 2/9] Update testfitur.html --- html/javascript/monthlyscript.js | 38 ++++++++++++++++++ html/monthly.html | 4 ++ testfitur.html | 68 ++++++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+) diff --git a/html/javascript/monthlyscript.js b/html/javascript/monthlyscript.js index a5b00f3..a59f89d 100644 --- a/html/javascript/monthlyscript.js +++ b/html/javascript/monthlyscript.js @@ -344,6 +344,44 @@ fetch(DataUrl) }) .catch(error => console.error('Error fetching data:', error)); +//Chart Penjualan + +// Function to create and render the sales chart +function createSalesChart(data) { + const ctx = document.getElementById('salesChart').getContext('2d'); + + // Extract necessary data for the chart + const labels = data.map(item => item['Product Name']); + const salesData = data.map(item => parseFloat(item['Sales'].replace('$', '').replace(',', '.'))); + + // Create the chart + new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [{ + label: 'Sales ($)', + data: salesData, + backgroundColor: 'rgba(75, 192, 192, 0.2)', + borderColor: 'rgba(75, 192, 192, 1)', + borderWidth: 1 + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); +} + +// Fetch data and create chart +fetchData(DataUrl).then(data => { + createSalesChart(data); +}); + diff --git a/html/monthly.html b/html/monthly.html index 9630876..f99bbcd 100644 --- a/html/monthly.html +++ b/html/monthly.html @@ -118,6 +118,10 @@

Sales by Category

State with the Highest Profit

+
+

State with the Highest Profit

+
+
diff --git a/testfitur.html b/testfitur.html index e69de29..f954ad7 100644 --- a/testfitur.html +++ b/testfitur.html @@ -0,0 +1,68 @@ + + + + + + Sales Chart + + + + + + + + + \ No newline at end of file From dd61958cf7dba9da1c00e1dadb607ab34373cfa0 Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Wed, 29 May 2024 21:22:18 +0700 Subject: [PATCH 3/9] buat beberapa chart --- html/javascript/monthlyscript.js | 400 ++++++++++++++++++++----------- html/monthly.html | 48 ++-- testfitur.html | 123 ++++++---- 3 files changed, 353 insertions(+), 218 deletions(-) diff --git a/html/javascript/monthlyscript.js b/html/javascript/monthlyscript.js index a59f89d..e382a5d 100644 --- a/html/javascript/monthlyscript.js +++ b/html/javascript/monthlyscript.js @@ -106,159 +106,116 @@ function postDataCard() { } //------------------------------------------------- KALAU MAU TAMBAH CHART DISINI!!!!! ------------------------------------------------ - -// ------------------------------------- BARCHART STATE HIGHEST SALES ------------------------------------- -// Fungsi untuk memproses data penjualan dan mendapatkan negara bagian dengan penjualan tertinggi -function processSalesData(data) { - const aggregatedData = {}; - - data.forEach(row => { - const state = row.State; - const sales = parseFloat(row.Sales.replace(/\$/g, '').replace(/,/g, '')); - - if (aggregatedData[state]) { - aggregatedData[state] += sales; - } else { - aggregatedData[state] = sales; - } - }); - - // Mengubah objek aggregatedData menjadi array untuk diurutkan - const sortedDataArray = Object.entries(aggregatedData).sort((a, b) => b[1] - a[1]); - - // Mengembalikan objek yang diurutkan - const sortedData = {}; - sortedDataArray.forEach(([state, sales]) => { - sortedData[state] = sales; +//------------------------------------------------- CHART TOTAL SALES DAN PROFIT------------------------------------------------ +// Fungsi untuk menghitung total sales dan total profit +function calculateSalesProfit(data) { + let totalSales = 0; + let totalProfit = 0; + + data.forEach(item => { + totalSales += parseFloat(item.Sales.replace("$", "").replace(",", "")); + totalProfit += parseFloat(item.Profit.replace("$", "").replace(",", "")); }); - return sortedData; + return { + totalSales: totalSales, + totalProfit: totalProfit + }; } -// Variabel global untuk chart -let BarChartSales = null; - -// Fungsi untuk membuat bar chart -function createBarChartSalesState(data) { - const ctx = document.getElementById("BarChartSalesPerState").getContext("2d"); - if (BarChartSales != null) { - BarChartSales.destroy(); // Hapus chart sebelumnya jika ada - } +// Membuat chart +async function createChart() { + const data = await fetchData(DataUrl); + const { totalSales, totalProfit } = calculateSalesProfit(data); - BarChartSales = new Chart(ctx, { - type: "bar", + const ctx = document.getElementById('salesProfitChart').getContext('2d'); + const myChart = new Chart(ctx, { + type: 'bar', data: { - labels: Object.keys(data), // Label adalah nama negara bagian - datasets: [ - { - label: "Total Sales by State", - data: Object.values(data), // Data adalah total penjualan - backgroundColor: 'rgba(255, 143, 0, 1)', - borderColor: 'rgba(255, 143, 0, 1)', - borderWidth: 1, - }, - ], + labels: ['Total Sales', 'Total Profit'], + datasets: [{ + label: 'Amount ($)', + data: [totalSales, totalProfit], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + ], + borderWidth: 1 + }] }, options: { - responsive: true, - maintainAspectRatio: false, scales: { - y: { - beginAtZero: true, + yAxes: [{ ticks: { - callback: function(value) { - return '$' + value.toLocaleString(); // Format angka menjadi dolar - } + beginAtZero: true } - }, - }, - }, + }] + } + } }); } -// Ambil data sales dari server, proses, dan buat chart -fetchData(DataUrl) - .then(data => { - const processedData = processSalesData(data); - createBarChartSalesState(processedData); - }); +// Panggil fungsi untuk membuat chart +createChart(); +// ------------------------------------- BARCHART STATE HIGHEST SALES ------------------------------------- +// Fungsi untuk memproses data penjualan dan mendapatkan negara bagian dengan penjualan tertinggi +// Fetch data from the URL +fetchData(DataUrl).then(data => { + if (!data) return; -// ------------------------------------- BARCHART STATE HIGHEST PROFIT ------------------------------------- -// Fungsi untuk memproses data profit dan mendapatkan profit per negara bagian -function processProfitData(data) { - const aggregatedData = {}; + // Process data to aggregate sales by state + const stateSales = {}; - data.forEach(row => { - const state = row.State; - const profit = parseFloat(row.Profit.replace(/\$/g, '').replace(/,/g, '')); + data.forEach(order => { + const state = order.State; + const sales = parseFloat(order.Sales.replace(/[^0-9.-]+/g, "")); - if (aggregatedData[state]) { - aggregatedData[state] += profit; - } else { - aggregatedData[state] = profit; + if (!stateSales[state]) { + stateSales[state] = 0; } - }); - // Mengubah objek aggregatedData menjadi array untuk diurutkan - const sortedDataArray = Object.entries(aggregatedData).sort((a, b) => b[1] - a[1]); - - // Mengembalikan objek yang diurutkan - const sortedData = {}; - sortedDataArray.forEach(([state, profit]) => { - sortedData[state] = profit; + stateSales[state] += sales; }); - return sortedData; -} + // Convert the stateSales object into an array of [state, sales] pairs + const salesArray = Object.entries(stateSales); -// Variabel global untuk chart -let BarChartProfit = null; + // Sort the array by sales in descending order and take the top 10 states + const top10Sales = salesArray.sort((a, b) => b[1] - a[1]).slice(0, 10); -// Fungsi untuk membuat bar chart -function createBarChartProfitState(data) { - const ctx = document.getElementById("BarChartProfitPerState").getContext("2d"); - if (BarChartProfit != null) { - BarChartProfit.destroy(); // Hapus chart sebelumnya jika ada - } + // Separate the top 10 states and their sales into separate arrays + const states = top10Sales.map(item => item[0]); + const sales = top10Sales.map(item => item[1]); - BarChartProfit = new Chart(ctx, { - type: "bar", + // Create the bar chart using Chart.js + const ctx = document.getElementById('salesChart').getContext('2d'); + new Chart(ctx, { + type: 'bar', data: { - labels: Object.keys(data), // Label adalah nama negara bagian - datasets: [ - { - label: "Total Profit by State", - data: Object.values(data), // Data adalah total profit - backgroundColor: 'rgba(0, 0, 0, 1)', - borderColor: 'rgba(0, 0, 0, 1)', - borderWidth: 1, - }, - ], + labels: states, + datasets: [{ + label: 'Sales by State', + data: sales, + backgroundColor: 'rgba(75, 192, 192, 0.2)', + borderColor: 'rgba(75, 192, 192, 1)', + borderWidth: 1 + }] }, options: { - responsive: true, - maintainAspectRatio: false, scales: { y: { - beginAtZero: true, - ticks: { - callback: function(value) { - return '$' + value.toLocaleString(); // Format angka menjadi dolar - } - } - }, - }, - }, + beginAtZero: true + } + } + } }); -} +}); -// Ambil data profit dari server, proses, dan buat chart -fetchData(DataUrl) - .then(data => { - const processedData = processProfitData(data); - createBarChartProfitState(processedData); - }) //-------------------------------- LINE CHART MONTHLY SALES PERFORMANCE ---------------------------------- // Fungsi untuk memproses data penjualan bulanan @@ -344,46 +301,215 @@ fetch(DataUrl) }) .catch(error => console.error('Error fetching data:', error)); -//Chart Penjualan -// Function to create and render the sales chart -function createSalesChart(data) { - const ctx = document.getElementById('salesChart').getContext('2d'); +//------------------------------------------------ The most Profitable and Highest Sales------------------------------------------------ +// 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; +} - // Extract necessary data for the chart - const labels = data.map(item => item['Product Name']); - const salesData = data.map(item => parseFloat(item['Sales'].replace('$', '').replace(',', '.'))); +// Membuat chart +async function createChart() { + const data = await fetchData(DataUrl); + const processedData = processData(data); - // Create the chart + 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 ------------------------------------------------ +// 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: labels, + labels: subCategories, datasets: [{ - label: 'Sales ($)', - data: salesData, + label: 'Sales by Sub-Category', + data: sales, backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: { + indexAxis: 'y', scales: { - y: { + x: { beginAtZero: true } } } }); -} +}); -// Fetch data and create chart +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 ------------------------------------- +// Fungsi untuk memproses data profit dan mendapatkan profit per negara bagian +// Fetch data from the URL fetchData(DataUrl).then(data => { - createSalesChart(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: 'rgba(153, 102, 255, 0.2)', + borderColor: 'rgba(153, 102, 255, 1)', + borderWidth: 1 + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); +}); diff --git a/html/monthly.html b/html/monthly.html index f99bbcd..34150d4 100644 --- a/html/monthly.html +++ b/html/monthly.html @@ -110,18 +110,15 @@

-

Sales by Category

-
+

Total Sales and Profit

+
-
-

State with the Highest Profit

-
-
-
-

State with the Highest Profit

+

State with the Higest Sales

+ +
@@ -130,35 +127,30 @@

Monthly Sales Performance

- +
-

Profit Per Category

- - - - - - - - - - - - -
Ship_ModeOffice SuppliesTechnologyFurniture
+

The most Profitable and Highest Sales

+
+
+ + +
+ + +
-

Most Profitable Category

-
+

Top 10 Sub Category Sales

+
-
-

Top 5 Sub Category Sales

-
+

State with the Highest Profit

+
+ diff --git a/testfitur.html b/testfitur.html index f954ad7..767df56 100644 --- a/testfitur.html +++ b/testfitur.html @@ -3,66 +3,83 @@ - Sales Chart + Sales and Profit Chart - - - - + - \ No newline at end of file + const ctx = document.getElementById('salesProfitChart').getContext('2d'); + const myChart = new Chart(ctx, { + type: 'bar', + data: { + labels: ['Total Sales', 'Total Profit'], + datasets: [{ + label: 'Amount ($)', + data: [totalSales, totalProfit], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + ], + borderWidth: 1 + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + } + } + }); + } + + // Panggil fungsi untuk membuat chart + createChart(); + + + From 5bfe0411c2b73ca4bb6f770652a03ffb6f78e5e9 Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Thu, 30 May 2024 13:29:50 +0700 Subject: [PATCH 4/9] Update monthlyscript.js --- html/javascript/monthlyscript.js | 1 + 1 file changed, 1 insertion(+) diff --git a/html/javascript/monthlyscript.js b/html/javascript/monthlyscript.js index e382a5d..990980a 100644 --- a/html/javascript/monthlyscript.js +++ b/html/javascript/monthlyscript.js @@ -106,6 +106,7 @@ function postDataCard() { } //------------------------------------------------- KALAU MAU TAMBAH CHART DISINI!!!!! ------------------------------------------------ + //------------------------------------------------- CHART TOTAL SALES DAN PROFIT------------------------------------------------ // Fungsi untuk menghitung total sales dan total profit function calculateSalesProfit(data) { From 1fe19282d7467f5f75db8ac5b5d66b702697b4bf Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Thu, 30 May 2024 21:15:50 +0700 Subject: [PATCH 5/9] d --- html/javascript/monthlyscript.js | 26 ++--- html/monthly.html | 10 +- testfitur.html | 178 +++++++++++++++++++------------ 3 files changed, 124 insertions(+), 90 deletions(-) diff --git a/html/javascript/monthlyscript.js b/html/javascript/monthlyscript.js index 990980a..da2747e 100644 --- a/html/javascript/monthlyscript.js +++ b/html/javascript/monthlyscript.js @@ -138,14 +138,10 @@ async function createChart() { label: 'Amount ($)', data: [totalSales, totalProfit], backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', + 'orange', + 'black', ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - ], - borderWidth: 1 + }] }, options: { @@ -201,8 +197,8 @@ fetchData(DataUrl).then(data => { datasets: [{ label: 'Sales by State', data: sales, - backgroundColor: 'rgba(75, 192, 192, 0.2)', - borderColor: 'rgba(75, 192, 192, 1)', + backgroundColor: 'orange', + borderColor: 'orange', borderWidth: 1 }] }, @@ -302,6 +298,10 @@ fetch(DataUrl) }) .catch(error => console.error('Error fetching data:', error)); + //------------------------------------------------ Most Profitable Category------------------------------------------------ +// Fungsi untuk memformat data menjadi keuntungan per kategori + + //------------------------------------------------ The most Profitable and Highest Sales------------------------------------------------ // Ambil data dari JSON @@ -433,8 +433,8 @@ createChart(); datasets: [{ label: 'Sales by Sub-Category', data: sales, - backgroundColor: 'rgba(75, 192, 192, 0.2)', - borderColor: 'rgba(75, 192, 192, 1)', + backgroundColor: 'orange', + borderColor: 'orange', borderWidth: 1 }] }, @@ -497,8 +497,8 @@ fetchData(DataUrl).then(data => { datasets: [{ label: 'Profit by State', data: profits, - backgroundColor: 'rgba(153, 102, 255, 0.2)', - borderColor: 'rgba(153, 102, 255, 1)', + backgroundColor: 'black', + borderColor: 'black', borderWidth: 1 }] }, diff --git a/html/monthly.html b/html/monthly.html index 34150d4..d664407 100644 --- a/html/monthly.html +++ b/html/monthly.html @@ -117,8 +117,6 @@

Total Sales and Profit

State with the Higest Sales

- - @@ -129,16 +127,12 @@

Monthly Sales Performance

-
+

The most Profitable and Highest Sales

-
- - - +
-
diff --git a/testfitur.html b/testfitur.html index 767df56..c0c22cf 100644 --- a/testfitur.html +++ b/testfitur.html @@ -3,83 +3,123 @@ - Sales and Profit Chart + Sales and Profit Line Chart + + - +
+ +
+ + - - - + Object.keys(result).sort().forEach(year => { + Object.keys(result[year]).sort((a, b) => new Date(`1 ${a} ${year}`) - new Date(`1 ${b} ${year}`)).forEach(month => { + sortedData.push({ + monthYear: `${month} ${year}`, + sales: result[year][month].sales, + profit: result[year][month].profit + }); + }); + }); + + return sortedData; + }; + + // Konfigurasi line chart + const createLineChart = (processedData) => { + const labelsMonthYear = processedData.map(data => data.monthYear); + const sales = processedData.map(data => data.sales); + const profits = processedData.map(data => data.profit); + + const ctxLSP = document.getElementById('LineChartSalesProfit').getContext('2d'); + new Chart(ctxLSP, { + type: 'line', + data: { + labels: labelsMonthYear, + datasets: [ + { + label: 'Sales', + data: sales, + borderColor: 'rgba(75, 192, 192, 1)', + borderWidth: 2, + fill: false, + tension: 0.2, + }, + { + label: 'Profit', + data: profits, + borderColor: 'rgba(153, 102, 255, 1)', + borderWidth: 2, + fill: false, + tension: 0.2, + } + ] + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + x: { + display: true, + title: { + display: true, + text: 'Month/Year' + } + }, + y: { + display: true, + title: { + display: true, + text: 'Amount ($)' + } + } + } + } + }); + }; + + // Fetching data dari json + fetch(DataUrl) + .then(response => response.json()) + .then(data => { + const processedDataLineChart = preprocessData(data); + createLineChart(processedDataLineChart); + }) + .catch(error => console.error('Error fetching data:', error)); + + + + \ No newline at end of file From 813f1e243c868ae89cfc1729ed36bc920a8d0179 Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Thu, 30 May 2024 22:35:28 +0700 Subject: [PATCH 6/9] x --- html/monthly.html | 4 +- testfitur.html | 160 ++++++++++++++++++++-------------------------- 2 files changed, 71 insertions(+), 93 deletions(-) diff --git a/html/monthly.html b/html/monthly.html index d664407..05f9b32 100644 --- a/html/monthly.html +++ b/html/monthly.html @@ -127,10 +127,10 @@

Monthly Sales Performance

+

The most Profitable and Highest Sales

-
-
+
diff --git a/testfitur.html b/testfitur.html index c0c22cf..66c7006 100644 --- a/testfitur.html +++ b/testfitur.html @@ -3,7 +3,7 @@ - Sales and Profit Line Chart + Total Profit and Sales by Category -
- -
+ + \ No newline at end of file From 804cac200c6139055144e9967f2a8c68c5edb9f9 Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Fri, 31 May 2024 22:02:17 +0700 Subject: [PATCH 8/9] d --- html/monthly.html | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/html/monthly.html b/html/monthly.html index 3d2e4e7..6b0db42 100644 --- a/html/monthly.html +++ b/html/monthly.html @@ -120,17 +120,37 @@

State with the Higest Sales

-
-

Monthly Sales Performance

-
+
+
+

Profit Per Category

+ + + + + + + + + + + + +
Ship_ModeOffice SuppliesTechnologyFurniture
+
+
+
+

Monthly Sales Performance

+
+
+
+
-
-
-

The most Profitable Category

-
-
+
+

The most Profitable and Highest Sales

+
+

The most Profitable and Highest Sales

From b4807b09b1ef5986e5bad97e464b46150f5e2805 Mon Sep 17 00:00:00 2001 From: riskiarasyid <167847870+riskiarasyid@users.noreply.github.com> Date: Fri, 31 May 2024 22:09:08 +0700 Subject: [PATCH 9/9] d udh complete chartnya, kalau ada koreksi bleh bngt --- html/javascript/monthlyscript.js | 82 ++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/html/javascript/monthlyscript.js b/html/javascript/monthlyscript.js index ee937bf..d9ac574 100644 --- a/html/javascript/monthlyscript.js +++ b/html/javascript/monthlyscript.js @@ -218,8 +218,90 @@ fetchData(DataUrl).then(data => { }); }); +//-------------------------------- TABEL SHIPMODE ---------------------------------- +let totalProfitTable = {}; // Define totalProfitTable globally +let sortedShipModes = []; +let sortDirection = 'desc'; // Initialize sort direction + +// Fungsi untuk memproses data profit berdasarkan kategori dan ship mode +function calculateTotalProfitTable(orders) { + const totalProfit = {}; + + orders.forEach(order => { + const category = order["Category"]; + const shipMode = order["Ship Mode"]; + const profit = parseFloat(order.Profit.replace(/[^0-9.-]+/g, '')); + + if (!totalProfit[shipMode]) { + totalProfit[shipMode] = { "Office Supplies": 0, "Technology": 0, "Furniture": 0 }; + } + + if (category === "Technology" || category === "Office Supplies" || category === "Furniture") { + totalProfit[shipMode][category] += profit; + } + }); + + return totalProfit; +} + +// Fungsi untuk menampilkan data pada tabel +function displayProfitTable(totalProfitTable) { + const tableBody = document.getElementById('profitpercategory-body'); + + // Kosongkan isi tabel sebelum menambahkan data baru + tableBody.innerHTML = ''; + + // Tambahkan baris untuk setiap ship mode + sortedShipModes.forEach(shipMode => { + const row = ` + ${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; + }); +} + +// 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)); +} + +// 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) => {