first test web interface d3js plot
This commit is contained in:
21
db.py
21
db.py
@@ -1,5 +1,7 @@
|
||||
#!/usr/bin/python
|
||||
import psycopg2
|
||||
import csv
|
||||
import os
|
||||
|
||||
def connect_db(db_settings):
|
||||
conn = None
|
||||
@@ -44,6 +46,25 @@ def add_history_entry(db_settings, itemid, skuid, choice, attributes, price, cur
|
||||
connection.close()
|
||||
|
||||
|
||||
def export_csv(db_settings):
|
||||
connection = connect_db(db_settings)
|
||||
cursor = connection.cursor()
|
||||
|
||||
cursor.execute("""
|
||||
SELECT i.itemid, i.skuid, i.choice, i.attributes, h.quantity, h.discount_percentage, h.price, h.currency, h.h_timestamp
|
||||
FROM item i, history h
|
||||
WHERE i.itemid = h.itemid and i.skuid = h.skuid
|
||||
""")
|
||||
results = cursor.fetchall()
|
||||
with open(os.path.dirname(os.path.realpath(__file__))+"/output.csv", 'w') as csv_file:
|
||||
# Create a CSV writer
|
||||
writer = csv.writer(csv_file)
|
||||
# write the column names
|
||||
writer.writerow([col[0] for col in cursor.description])
|
||||
# write the query results
|
||||
writer.writerows(results)
|
||||
cursor.close()
|
||||
connection.close()
|
||||
|
||||
|
||||
def initialize(db_settings):
|
||||
|
||||
1
main.py
1
main.py
@@ -17,4 +17,5 @@ if __name__ == '__main__':
|
||||
#initialize(settings["db"])
|
||||
fill_db(settings["db"], check_items(settings["item"]))
|
||||
|
||||
export_csv(settings["db"])
|
||||
|
||||
|
||||
116
web/test.html
Normal file
116
web/test.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<!-- Load d3.js -->
|
||||
<script src="https://d3js.org/d3.v6.js"></script>
|
||||
|
||||
<!-- Create a div where the graph will take place -->
|
||||
<div id="my_dataviz"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// set the dimensions and margins of the graph
|
||||
const margin = {top: 10, right: 30, bottom: 30, left: 60},
|
||||
width = 1600 - margin.left - margin.right,
|
||||
height = 400 - margin.top - margin.bottom;
|
||||
|
||||
// append the svg object to the body of the page
|
||||
const svg = d3.select("#my_dataviz")
|
||||
.append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform",`translate(${margin.left},${margin.top})`);
|
||||
|
||||
d3.csv('http://127.0.0.1/output.csv', d => {
|
||||
console.log(d.h_timestamp);
|
||||
console.log(d3.timeParse("%Y-%m-%d %H:%M:%S.%L")(d.h_timestamp));
|
||||
//2024-01-13 21:51:45.581863
|
||||
return {
|
||||
date: new Date(d.h_timestamp.replace(' ', 'T')).getTime(),
|
||||
value: parseFloat(d.price.replace('$', ''))
|
||||
}
|
||||
}).then(function(data) {
|
||||
console.log(data);
|
||||
|
||||
// Add X axis --> it is a date format
|
||||
const x = d3.scaleTime()
|
||||
.domain(d3.extent(data, d => d.date))
|
||||
.range([ 0, width ]);
|
||||
svg.append("g")
|
||||
.attr("transform", `translate(0, ${height})`)
|
||||
.call(d3.axisBottom(x));
|
||||
|
||||
// Add Y axis
|
||||
// Get the extent of the data values
|
||||
const valueExtent = d3.extent(data, d => d.value);
|
||||
|
||||
// Extend the domain by 5 units on each side
|
||||
const extendedDomain = [valueExtent[0] - 5, valueExtent[1] + 5];
|
||||
|
||||
// Create the y-scale with the extended domain
|
||||
const y = d3.scaleLinear()
|
||||
.domain(extendedDomain)
|
||||
.range([height, 0]);
|
||||
svg.append("g")
|
||||
.call(d3.axisLeft(y));
|
||||
|
||||
// Add the line
|
||||
svg.append("path")
|
||||
.datum(data)
|
||||
.attr("fill", "none")
|
||||
.attr("stroke", "black")
|
||||
.attr("stroke-width", 1.5)
|
||||
.attr("d", d3.line()
|
||||
.curve(d3.curveBasis) // Just add that to have a curve instead of segments
|
||||
.x(d => x(d.date))
|
||||
.y(d => y(d.value))
|
||||
)
|
||||
|
||||
// create a tooltip
|
||||
const Tooltip = d3.select("#my_dataviz")
|
||||
.append("div")
|
||||
.style("opacity", 0)
|
||||
.attr("class", "tooltip")
|
||||
.style("background-color", "white")
|
||||
.style("border", "solid")
|
||||
.style("border-width", "2px")
|
||||
.style("border-radius", "5px")
|
||||
.style("padding", "5px")
|
||||
|
||||
// Three function that change the tooltip when user hover / move / leave a cell
|
||||
const mouseover = function(event,d) {
|
||||
Tooltip
|
||||
.style("opacity", 1)
|
||||
}
|
||||
const mousemove = function(event,d) {
|
||||
Tooltip
|
||||
.html("Exact value: " + d.value)
|
||||
.style("left", `${event.layerX+10}px`)
|
||||
.style("top", `${event.layerY}px`)
|
||||
}
|
||||
const mouseleave = function(event,d) {
|
||||
Tooltip
|
||||
.style("opacity", 0)
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Add the points
|
||||
svg
|
||||
.append("g")
|
||||
.selectAll("dot")
|
||||
.data(data)
|
||||
.join("circle")
|
||||
.attr("class", "myCircle")
|
||||
.attr("cx", d => x(d.date))
|
||||
.attr("cy", d => y(d.value))
|
||||
.attr("r", 8)
|
||||
.attr("stroke", "#69b3a2")
|
||||
.attr("stroke-width", 3)
|
||||
.attr("fill", "white")
|
||||
.on("mouseover", mouseover)
|
||||
.on("mousemove", mousemove)
|
||||
.on("mouseleave", mouseleave)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user