Skip to content

Commit

Permalink
diagramación gráficos 1,2, 4 y 6, parcialmt 5
Browse files Browse the repository at this point in the history
  • Loading branch information
MaElmoon39 committed Jul 5, 2024
1 parent a65b2a8 commit 00cd855
Show file tree
Hide file tree
Showing 2 changed files with 217 additions and 56 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ En donde:

## Este proyecto ha sido elaborado por:
Equipo #3 - Retail Saviors

Data Analyst: Asael Espinoza Bigurra [![](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/AsaelEB) [![](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)]()
Data Analyst: Maria Camila Mejia Paipa [![](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)]( https://github.com/jhonsamuel10) [![](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/maria-mejia-p/)
Data Analyst: Leo Gracia [![](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/LeoGracia17) [![](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/leogracia21/)
Expand Down
272 changes: 216 additions & 56 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,40 @@ const ctxMidgraphCenter = document.querySelector("#canvas__midgraph-center");
const ctxBottmLeft = document.querySelector("#canvas__bottm-left");
const ctxBottmCenter = document.querySelector("#canvas__bottm-center");

const bgColorGraph = [
'#EF6A32',
'#FFF6E9',
'#36A2EB',
'#017351',
'#FBBF45',
'#B1AFFF',
'#A12A5E',
'#03C383',
'#26294A',
'#AAD962',
'#FF1A68',
'#01545A',
'#ED0345',
'#710162',
'#110141'
]
//document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
//document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
//document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);

//df_clean json file
//Gráfico 1 Promedio de ventas por continente
fetch('json/df_clean.json')
.then(function(response){
if(response.ok === true){
return response.json();
}
})
.then(function(data){
loadData(data, 'bar');
console.log(data);
loadDataPlot1(data, 'doughnut');
})
.catch((error) => console.error("Error al cargar datos:", error));

function loadData(dataJson, plotType) {
function loadDataPlot1(dataJson, plotType) {

const transformData = [];
for(const i of dataJson){
Expand All @@ -34,51 +50,16 @@ function loadData(dataJson, plotType) {
}
}

console.log(transformData)

new Chart(ctxGraphRight, {
new Chart(ctxGraphCenter, {
type: plotType,
data: {
labels: transformData.map(row => row.continent),
datasets: [{
label: 'Continente',
data: transformData.map(row => row.total),
backgroundColor: [
'#EF6A32',
'#FFF6E9',
'#36A2EB',
'#017351',
'#FBBF45',
'#B1AFFF',
'#A12A5E',
'#03C383',
'#26294A',
'#AAD962',
'#FF1A68',
'#01545A',
'#ED0345',
'#710162',
'#110141'

],
borderColor: [
'#EF6A32',
'#FFF6E9',
'#36A2EB',
'#017351',
'#FBBF45',
'#B1AFFF',
'#A12A5E',
'#03C383',
'#26294A',
'#AAD962',
'#FF1A68',
'#01545A',
'#ED0345',
'#710162',
'#110141'
],
borderWidth: 1
backgroundColor: bgColorGraph,
borderColor: bgColorGraph,
borderWidth: 1
}]
},
options: {
Expand All @@ -95,31 +76,210 @@ function loadData(dataJson, plotType) {
}
});
}
//rfm_table json file
/* function loadDataRFM() {
fetch('json/rfm_table.json')
.then(function(response){
if(response.ok == true){
return response.json();
}
})
.then(data => viewChart(data))
.catch((error) => console.error("Error al cargar datos:", error));
} */

//Gráfico 1 Promedio de ventas por continente
//Gráfico 2 Gasto total anual (USD), df_clean json file
fetch('json/df_clean.json')
.then(function(response){
if(response.ok === true){
return response.json();
}
})
.then(function(data){
loadDataPlot2(data, 'doughnut');
})
.catch((error) => console.error("Error al cargar datos:", error));

function loadDataPlot2(dataJson, plotType) {

//Gráfico 2 Gasto total anual (USD)
const transformData = [];
for(const i of dataJson){
const entry = transformData.find(item => item.continent == i.continent);
if(entry){
entry.total+=i.total
}else{
transformData.push({total: i.total, continent: i.continent})
}
}

new Chart(ctxGraphRight, {
type: plotType,
data: {
labels: transformData.map(row => row.continent),
datasets: [{
label: 'Continente',
data: transformData.map(row => row.total),
backgroundColor: bgColorGraph,
borderColor: bgColorGraph,
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
}},
scales: {
y: {
beginAtZero: true
}
}
}
});
}

//Gráfico 3 Cantidad total de usuarios
fetch('json/df_clean.json')
.then(function(response){
if(response.ok === true){
return response.json();
}
})
.then(function(data){
loadDataPlot3(data, 'scatter');
})
.catch((error) => console.error("Error al cargar datos:", error));

function loadDataPlot3(dataJson, plotType) {

const transformData = [];
for(const i of dataJson){
const entry = transformData.find(item => item.continent == i.continent);
if(entry){
entry.total+=i.total
}else{
transformData.push({total: i.total, continent: i.continent})
}
}

new Chart(ctxMidgraphLeft, {
type: plotType,
data: {
labels: transformData.map(row => row.continent),
datasets: [{
label: 'Continente',
data: transformData.map(row => row.total),
backgroundColor: bgColorGraph,
borderColor: bgColorGraph,
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
}},
scales: {
y: {
beginAtZero: true
}
}
}
});
}

//Gráfico 4 Segmentos por región
fetch('json/df_clean.json')
.then(function(response){
if(response.ok === true){
return response.json();
}
})
.then(function(data){
loadDataPlot4(data, 'polarArea');
})
.catch((error) => console.error("Error al cargar datos:", error));

function loadDataPlot4(dataJson, plotType) {

const transformData = [];
for(const i of dataJson){
const entry = transformData.find(item => item.continent == i.continent);
if(entry){
entry.total+=i.total
}else{
transformData.push({total: i.total, continent: i.continent})
}
}

new Chart(ctxMidgraphCenter, {
type: plotType,
data: {
labels: transformData.map(row => row.continent),
datasets: [{
label: 'Continente',
data: transformData.map(row => row.total),
backgroundColor: bgColorGraph,
borderColor: bgColorGraph,
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
}},
scales: {
y: {
beginAtZero: true
}
}
}
});
}

//Gráfico 5 Ventas por continente (USD)*** cambiar a choroplet


//Gráfico 6 Segmentos por continente
fetch('json/df_clean.json')
.then(function(response){
if(response.ok === true){
return response.json();
}
})
.then(function(data){
loadDataPlot6(data, 'polarArea');
})
.catch((error) => console.error("Error al cargar datos:", error));

function loadDataPlot6(dataJson, plotType) {

const transformData = [];
for(const i of dataJson){
const entry = transformData.find(item => item.continent == i.continent);
if(entry){
entry.total+=i.total
}else{
transformData.push({total: i.total, continent: i.continent})
}
}

new Chart(ctxBottmCenter, {
type: plotType,
data: {
labels: transformData.map(row => row.continent),
datasets: [{
label: 'Continente',
data: transformData.map(row => row.total),
backgroundColor: bgColorGraph,
borderColor: bgColorGraph,
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
}},
scales: {
y: {
beginAtZero: true
}
}
}
});
}

0 comments on commit 00cd855

Please sign in to comment.