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 // set the margins of the graph
const margin = { const margin = {
top: 10, top: 10,
right: 30, right: height,
bottom: 30, bottom: 30,
left: window.innerWidth*0.1 left: 30
}; };
// get window size // get window width
const width = window.innerWidth - margin.right - margin.left -10; const width = window.innerWidth - margin.right - margin.left -10;
// set fixed graph height
const height = 400;
// reload page when window is resized // reload page when window is resized
// (resizes every elements) // (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')), date: new Date(d.h_timestamp.replace(' ', 'T')),
value: parseFloat(d.price.replace('$', '')), value: parseFloat(d.price.replace('$', '')),
skuid: d.skuid, skuid: d.skuid,
itemid: d.itemid,
currency: d.currency currency: d.currency
} }
}).then(function(data) { }).then(function(data) {
@ -51,14 +54,25 @@ d3.csv('http://127.0.0.1/output.csv', d => {
// plot for each graph // plot for each graph
svgs.each(function(key) { svgs.each(function(key) {
const dataSubset = nestedData.get(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) // Price domain (height)
const y = d3.scaleLinear() const y = d3.scaleLinear()
.domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1]) .domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1])
.range([height, 0]); .range([height, 0]);
const svg = d3.select(this);
// height axis // height axis
dict_xAxis[key] = svg.append("g") dict_xAxis[key] = svg.append("g")
.attr("transform", `translate(0, ${height})`) .attr("transform", `translate(0, ${height})`)
@ -81,9 +95,9 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.attr("id", "clip_dot") .attr("id", "clip_dot")
.append("svg:rect") .append("svg:rect")
.attr("width", width+10 ) .attr("width", width+10 )
.attr("height", height+10 ) .attr("height", height )
.attr("x", -5) .attr("x", -5)
.attr("y", -5); .attr("y", 0);
// lines between dots // lines between dots
// plotted before dots to stay below them // 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 .extent( [ [0,0], [width,height] ] ) // select whole graph
.on("end", updateChart) // update graph on brush release .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') const line = svg.append('g')
.attr("clip-path", "url(#clip)") .attr("clip-path", "url(#clip_line)")
// Add the brushing // Add brushing
line.append("g") line.append("g")
.attr("class", "brush") .attr("class", "brush")
.call(brush); .call(brush);