flask server, gunicorn, fetch data in JS

web/app.js

@@ -16,24 +16,69 @@ const width = window.innerWidth - margin.right - margin.left -10;
 // (resizes every elements)
 window.onresize = function(){ location.reload(); }
 
-d3.csv('http://127.0.0.1/output.csv', d => {
-    return {
-        date: new Date(d.h_timestamp.replace(' ', 'T')),
-        value: parseFloat(d.price.replace('$', '')),
-        skuid: d.skuid,
-        itemid: d.itemid,
-        image: d.image,
-        currency: d.currency
-    }
-}).then(function(data) {
+async function fetch_history() {
+  try {
+    const response = await fetch('http://127.0.0.1:8080/datahistory');
+    const rawData = await response.json();
+    // SELECT uuid, quantity, discount_percentage, price, currency, h_timestamp
+    let historyData = rawData.map(d => ({
+        uuid: d[0],
+        value: parseFloat(d[3].replace('$', '')),
+        currency: d[4],
+        date: new Date(d[5].replace(' ', 'T')),
+    }));
+    return historyData;
+  } catch (error) {
+    console.error('Error fetching data history: ', error);
+    throw error;
+  }
+}
+
+async function fetch_item() {
+  try {
+    // SELECT uuid, itemid, skuid, choice, attributes, image
+    const response = await fetch('http://127.0.0.1:8080/dataitem');
+    const rawData = await response.json();
+    const items = rawData.reduce((item, row) => {
+      const uuid = row[0];
+
+      const itemid = row[1];
+      const skuid = row[2];
+      const choice = row[3];
+      const attributes = row[4];
+      const image = row[5];
+
+      const values = {
+        itemid: itemid,
+        skuid: skuid,
+        choice: choice,
+        attributes: attributes,
+        image: image
+      };
+
+      item[uuid] = values;
+
+      return item;
+    }, {});
+
+    return items;
+  } catch (error) {
+    console.error('Error fetching data item: ', error);
+    throw error;
+  }
+}
+
+
+fetch_history().then(async function(data) {
+    items = await fetch_item();
 
     // Date domain (width)
     const x = d3.scaleTime()
         .domain(d3.extent(data, d => d.date))
         .range([3, width-3]);
 
-    // Group the data by (itemid, skuid)
-    const nestedData = d3.group(data, d => d.skuid);
+    // Group the data by (uuid)
+    const nestedData = d3.group(data, d => d.uuid);
     // Create a div for each graph
     const graphDivs = d3.select("#graphs")
         .selectAll(".graph-container")
@@ -58,16 +103,17 @@ d3.csv('http://127.0.0.1/output.csv', d => {
         const svg = d3.select(this);
 
         // context on right side
-        // text
-        const link = `https://fr.aliexpress.com/item/${dataSubset[0].itemid}.html`;
+        const link = `https://fr.aliexpress.com/item/${items[key].itemid}.html`;
         // image
         svg.append("image")
             .attr("x", width + margin.right*0.1)
             .attr("y", height*0.1)
             .attr("width", height*0.8)
             .attr("height", height*0.8)
-            .attr("xlink:href", dataSubset[0].image) // placeholder picture for now, should be item picture
-            .on("click", function() { window.open(link); });
+            .attr("xlink:href", items[key].image)
+            .on("click", function() {
+                window.open(link, '_blank', 'noopener,noreferrer');
+            });
 
         // Price domain (height)
         const y = d3.scaleLinear()