sam.hadow/aliexpress-price-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

item link

Browse Source
This commit is contained in:
Sam Hadow 2024-01-24 01:18:10 +01:00
parent ab145e8602
commit ab4ab81e19
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/app.js
View File

@ -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);