wurking

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));
 </script>
+<style>
+.line {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 2px;
+}
+</style>
 {% endblock content%}