[TASK] move code to js / css

templates/stat.html.tera

@@ -37,65 +37,13 @@
     <div id="container" class="w-full"></div>
 	</div>
 
-<script type="module">
-
-import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
-
-
+<script>
 const data = [
   {%- for p in personal %}
     { date: '{{p.date}}', km: {{p.km}} },
   {%- endfor %}
-];
-console.log(data);
-
-const margin = { top: 20, right: 20, bottom: 50, left: 50 },
-  width = 960 - margin.left - margin.right,
-  height = 500 - margin.top - margin.bottom;
-
-const parseTime = d3.timeParse('%Y-%m-%d');
-
-data.forEach(d => {
-  d.date = parseTime(d.date);
-  d.km = +d.km;
-});
-
-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>
+
+<script src="/public/logbook.js"></script>
 {% endblock content%}