From ab4ab81e192336f6a49663d2fae0dabbd8b8fd32 Mon Sep 17 00:00:00 2001
From: Sam Hadow <sam.hadow@inbox.lv>
Date: Wed, 24 Jan 2024 01:18:10 +0100
Subject: [PATCH] item link

---
 web/app.js | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/web/app.js b/web/app.js
index 765823c..ca84359 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1,14 +1,16 @@
+
+// fixed height
+const height = 350;
 // set the margins of the graph
 const margin = {
         top: 10,
-        right: 30,
+        right: height,
         bottom: 30,
-        left: window.innerWidth*0.1
+        left: 30
     };
-// get window size
+// get window width
 const width = window.innerWidth - margin.right - margin.left -10;
-// set fixed graph height
-const height = 400;
+
 
 // reload page when window is resized
 // (resizes every elements)
@@ -19,6 +21,7 @@ d3.csv('http://127.0.0.1/output.csv', d => {
         date: new Date(d.h_timestamp.replace(' ', 'T')),
         value: parseFloat(d.price.replace('$', '')),
         skuid: d.skuid,
+        itemid: d.itemid,
         currency: d.currency
     }
 }).then(function(data) {
@@ -51,14 +54,25 @@ d3.csv('http://127.0.0.1/output.csv', d => {
     // plot for each graph
     svgs.each(function(key) {
         const dataSubset = nestedData.get(key);
+        const svg = d3.select(this);
+
+        // context on right side
+        // text
+        const link = `https://fr.aliexpress.com/item/${dataSubset[0].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", "https://en.wikipedia.org/static/images/icons/wikipedia.png") // placeholder picture for now, should be item picture
+            .on("click", function() { window.open(link); });
 
         // Price domain (height)
         const y = d3.scaleLinear()
             .domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1])
             .range([height, 0]);
 
-        const svg = d3.select(this);
-
         // height axis
         dict_xAxis[key] = svg.append("g")
             .attr("transform", `translate(0, ${height})`)
@@ -81,9 +95,9 @@ d3.csv('http://127.0.0.1/output.csv', d => {
             .attr("id", "clip_dot")
             .append("svg:rect")
             .attr("width", width+10 )
-            .attr("height", height+10 )
+            .attr("height", height )
             .attr("x", -5)
-            .attr("y", -5);
+            .attr("y", 0);
 
         // lines between dots
         // plotted before dots to stay below them
@@ -104,11 +118,11 @@ d3.csv('http://127.0.0.1/output.csv', d => {
             .extent( [ [0,0], [width,height] ] )  // select whole graph
             .on("end", updateChart)               // update graph on brush release
 
-        // Create the line variable: where both the line and the brush take place
+        // line, area brushed
         const line = svg.append('g')
-                        .attr("clip-path", "url(#clip)")
+                        .attr("clip-path", "url(#clip_line)")
 
-        // Add the brushing
+        // Add brushing
         line.append("g")
             .attr("class", "brush")
             .call(brush);