diff --git a/templates/stat.html.tera b/templates/stat.html.tera
index cc83ce4..820eeae 100644
--- a/templates/stat.html.tera
+++ b/templates/stat.html.tera
@@ -42,94 +42,59 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
-// Declare the chart dimensions and margins.
- const width = 928;
- const height = 500;
- const marginTop = 20;
- const marginRight = 30;
- const marginBottom = 30;
- const marginLeft = 40;
+const data = [
+ { date: '2023-01-01', km: 5 },
+ { date: '2023-02-01', km: 24 },
+ { date: '2023-08-30', km: 1340 },
+];
- // Declare the x (horizontal position) scale.
-const parseTime = d3.timeParse("%d-%b-%y");
+const margin = { top: 20, right: 20, bottom: 50, left: 50 },
+ width = 960 - margin.left - margin.right,
+ height = 500 - margin.top - margin.bottom;
-const x = d3.scaleTime()
- .rangeRound([0, width]);
+const parseTime = d3.timeParse('%Y-%m-%d');
-const y = d3.scaleLinear()
- .rangeRound([height, 0]);
-
- // Declare the line generator.
- const line = d3.line()
- .x(d => x(d.date))
- .y(d => y(d.km));
-
- // Create the SVG container.
- const svg = d3.create("svg")
- .attr("width", width)
- .attr("height", height)
- .attr("viewBox", [0, 0, width, height])
- .attr("style", "max-width: 100%; height: auto; height: intrinsic;");
-
- // Add the x-axis.
- svg.append("g")
- .attr("transform", `translate(0,${height - marginBottom})`)
- .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
-
- // Add the y-axis, remove the domain line, add grid lines and a label.
- svg.append("g")
- .attr("transform", `translate(${marginLeft},0)`)
- .call(d3.axisLeft(y).ticks(height / 40))
- .call(g => g.select(".domain").remove())
- .call(g => g.selectAll(".tick line").clone()
- .attr("x2", width - marginLeft - marginRight)
- .attr("stroke-opacity", 0.1))
- .call(g => g.append("text")
- .attr("x", -marginLeft)
- .attr("y", 10)
- .attr("fill", "currentColor")
- .attr("text-anchor", "start")
- .text("↑ Daily km ($)"));
-
-d3.csv("../public/csv/stats.csv").then(function(data) {
- data.forEach(function(d) {
- d.date = d3.timeParse("%Y-%m-%d")(d.date);
- d.km = +d.km;
- console.log(d);
- });
-
-}, function(error, data) {
- if (error) throw error;
-
- x.domain(d3.extent(data, function(d) { return d.date; }));
- y.domain(d3.extent(data, function(d) { return d.km; }));
-
- g.append("g")
- .attr("transform", "translate(0," + height + ")")
- .call(d3.axisBottom(x))
- .select(".domain")
- .remove();
-
- g.append("g")
- .call(d3.axisLeft(y))
- .append("text")
- .attr("fill", "#000")
- .attr("transform", "rotate(-90)")
- .attr("y", 6)
- .attr("dy", "0.71em")
- .attr("text-anchor", "end")
- .text("Price ($)");
-
- g.append("path")
- .datum(data)
- .attr("fill", "none")
- .attr("stroke", "steelblue")
- .attr("stroke-linejoin", "round")
- .attr("stroke-linecap", "round")
- .attr("stroke-width", 1.5)
- .attr("d", line);
+data.forEach(d => {
+ d.date = parseTime(d.date);
+ d.km = +d.km;
});
-container.append(svg.node());
+const x = d3.scaleTime()
+ .domain(d3.extent(data, d => d.date))
+ .range([0, width]);
+
+const y = d3.scaleLinear()
+ .domain([0, d3.max(data, d => d.km)])
+ .range([height, 0]);
+
+const line = d3.line()
+ .x(d => x(d.date))
+ .y(d => y(d.km));
+
+const svg = d3.select('#container')
+ .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})`);
+
+svg.append('path')
+ .data([data])
+ .attr('class', 'line')
+ .attr('d', line);
+
+svg.append('g')
+ .attr('transform', `translate(0,${height})`)
+ .call(d3.axisBottom(x));
+
+svg.append('g')
+ .call(d3.axisLeft(y));
+
{% endblock content%}