Merge branch 'WD'

.vscode/settings.json

@@ -11,14 +11,18 @@
         "aplicación",
         "archivo",
         "audiencias",
+        "autocolors",
         "avanzados",
         "bootcamps",
         "botón",
         "bottm",
         "Bottm",
         "cada",
+        "cambiar",
         "Cantidad",
         "capacidad",
+        "chartjs",
+        "choroplet",
         "choropleth",
         "científicos",
         "cliente",

delete.js

@@ -73,4 +73,221 @@ function handleFileUpload(event) {
                 }
             }
         });
-    }
+    }
+
+/*intento fallido*/
+export default function updatedCharts() {
+  //df_clean json file
+  async function fetchDfData(){
+    const url = 'json/df_clean.json';
+    const response = await fetch(url);
+    const dfData = await response.json();
+    return dfData;
+  };
+
+  fetchDfData().then(dfData => {
+    const continentData = dfData.map(continent => continent.continent);
+    const quantityData = dfData.map(quantity => quantity.quantity);
+
+    ctxGraphRightPlot.data.labels = continent;
+    ctxGraphRightPlot.data.dataset.data = quantity;
+    ctxGraphRightPlot.update();
+  });
+
+  //rfm_table json file
+  async function fetchRfmData(){
+    const url = 'json/rfm_table.json';
+    const response = await fetch(url);
+    const rfmData = await response.json();
+    return rfmData;
+  };
+
+  fetchRfmData().then(rfmData => {
+    const continent = rfmData.map(function (index) {
+      return index.continent;
+    });
+  });
+
+  //segmentation_df json file
+  async function fetchSegmentData(){
+    const url = 'json/segmentation_df.json';
+    const response = await fetch(url);
+    const segmentData = await response.json();
+    return segmentData;
+  };
+
+  let clusterTagName = fetchSegmentData().then(segmentData => {
+    const clusterTag = segmentData.map(function (index) {
+      return index.cluster_meaning;
+    });
+  });
+
+}
+
+//*******************INTENTO FALLIDO 2 */
+/*import { doughnutConfig, barConfig, scatterConfig, polarAreaConfig, radarConfig } from "../js/configsPlots.js";
+
+ //rfm_table json file
+fetch('json/rfm_table.json')
+.then(function(response){
+  if(response.ok == true){
+    return response.json();
+  }
+})
+.then(function(data) {
+  updatedCharts(ctxMidgraphLeft, data, barConfig);
+});
+
+//segmentation_df json file
+fetch('json/segmentation_df.json')
+.then(function(response){
+  if(response.ok == true){
+    return response.json();
+  }
+})
+.then(function(data) {
+  updatedCharts(ctxMidgraphCenter, data, radarConfig);
+}); */
+
+//Mapamundi
+/* fetch('https://unpkg.com/world-atlas/countries-50m.json').then((r) => r.json()).then((data) => {
+  const countries = ChartGeo.topojson.feature(data, data.objects.countries).features;
+
+const chart = new Chart(ctxBottmLeft.getContext("2d"), {
+type: 'choropleth',
+data: {
+  labels: countries.map((d) => d.properties.name),
+  datasets: [{
+    label: 'Countries',
+    data: countries.map((d) => ({feature: d, value: Math.random()})),
+  }]
+},
+options: {
+  showOutline: true,
+  showGraticule: true,
+  plugins: {
+    legend: {
+      display: false
+    },
+  },
+  scales: {
+    projection: {
+      axis: 'x',
+      projection: 'equalEarth'
+    }
+  }
+}
+});
+}); */
+
+document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+
+const ctxGraphCenter = document.querySelector("#canvas__graph-center");
+const ctxGraphRight = document.querySelector("#canvas__graph-right");
+const ctxMidgraphLeft = document.querySelector("#canvas__midgraph-left");
+const ctxMidgraphCenter = document.querySelector("#canvas__midgraph-center");
+const ctxBottmLeft = document.querySelector("#canvas__bottm-left");
+const ctxBottmCenter = document.querySelector("#canvas__bottm-center");
+
+//df_clean json file
+function loadDataDf() {
+  fetch('json/df_clean.json')
+  .then(function(response){
+    if(response.ok == true){
+      return response.json();
+    }
+  })
+  .then(data => viewChart(data))
+  .catch((error) => console.error("Error al cargar datos:", error));
+}
+
+//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
+const ctxGraphCenterPlot = new Chart(ctxGraphCenter, doughnutConfig);
+
+//Gráfico 2 Gasto total anual (USD)
+
+function viewChart(dataJson) {
+  new Chart(ctxGraphRight, {
+    type: 'bar',
+    data: {
+      labels: dataJson.map(row => row.continent),
+      datasets: [{
+        label: 'Continente',
+        data: dataJson.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
+      }]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          position: 'top',
+        }},
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+}
+//Gráfico 3 Cantidad total de usuarios
+const ctxMidgraphLeftPlot = new Chart(ctxMidgraphLeft, scatterConfig);
+
+//Gráfico 4 Segmentos por región
+const ctxMidgraphCenterPlot = new Chart(ctxMidgraphCenter, polarAreaConfig);
+
+//Gráfico 5 Ventas por continente (USD)*** cambiar a choroplet
+const ctxBottmLeftPlot = new Chart(ctxBottmLeft, radarConfig);
+
+//Gráfico 6 Segmentos por continente
+const ctxBottmCenterPlot = new Chart(ctxBottmCenter, polarAreaConfig);

index.html

@@ -95,56 +95,6 @@ <h2 class="title">
       </footer>
     </div>
 
-    <!-- <template id="board-template">
-      <div class="canvas canvas__items">
-        <h2 class="canvas__filter1 canvas__item">Filtro a</h2>
-        <h2 class="canvas__filter2 canvas__item">Filtro b</h2>
-        <h2 class="canvas__filter3 canvas__item">Filtro c</h2>
-
-        <section class="canvas__graph-left canvas__item">
-            <h2 class="title">
-              Dato
-            </h2>
-        </section>
-        <section class="canvas__graph-center canvas__item">
-            <h2 class="title">
-                Gráfica 1
-            </h2>
-        </section>
-        <section class="canvas__graph-right canvas__item">
-            <h2 class="title">
-                Gráfica 2
-            </h2>
-        </section>
-
-        <section class="canvas__midgraph-left canvas__item">
-            <h2 class="title">
-                Gráfica 3
-            </h2>
-        </section>
-        <section class="canvas__midgraph-center canvas__item">
-            <h2 class="title">
-                Gráfica 4
-            </h2>
-        </section>
-
-        <section class="canvas__text canvas__item">
-            <h2>Texto conclusiones</h2>
-        </section>
-
-        <section class="canvas__bar-left canvas__item">
-            <h2 class="title">
-                Gráfica 5
-            </h2>
-        </section>
-        <section class="canvas__bar-center canvas__item">
-            <h2 class="title">
-                Gráfica 6
-            </h2>
-        </section>
-      </div>
-    </template> -->
-
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script type="module" src="pages/index.js"></script>
 </body>

js/configsPlots.js

@@ -1,35 +1,3 @@
-const data = {
-  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  datasets: [{
-    label: 'df_clean data',
-    data: [18, 12, 6, 9, 12, 3, 9],
-    backgroundColor: [
-      'rgba(255, 26, 104, 0.2)'
-    ],
-    borderColor: [
-      'rgba(255, 26, 104, 1)'
-    ],
-    borderWidth: 1
-  }]
-};
-
-const doughnutConfig = {
-  type: 'doughnut',
-  data,
-  options: {
-    responsive: true,
-    plugins: {
-      legend: {
-        position: 'top',
-      }},
-    scales: {
-      y: {
-        beginAtZero: true
-      }
-    }
-  }
-};
-
 const barConfig = {
   type: 'bar',
   data,