first test web interface d3js plot
This commit is contained in:
parent
f298da7ac5
commit
c6a18d84b0
21
db.py
21
db.py
@ -1,5 +1,7 @@
|
|||||||
#!/usr/bin/python
|
#!/usr/bin/python
|
||||||
import psycopg2
|
import psycopg2
|
||||||
|
import csv
|
||||||
|
import os
|
||||||
|
|
||||||
def connect_db(db_settings):
|
def connect_db(db_settings):
|
||||||
conn = None
|
conn = None
|
||||||
@ -44,6 +46,25 @@ def add_history_entry(db_settings, itemid, skuid, choice, attributes, price, cur
|
|||||||
connection.close()
|
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):
|
def initialize(db_settings):
|
||||||
|
|||||||
1
main.py
1
main.py
@ -17,4 +17,5 @@ if __name__ == '__main__':
|
|||||||
#initialize(settings["db"])
|
#initialize(settings["db"])
|
||||||
fill_db(settings["db"], check_items(settings["item"]))
|
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>
|
||||||
Loading…
x
Reference in New Issue
Block a user