[TASK] move code to js / css

frontend/logbook.ts

@@ -1,33 +1,85 @@
-/*document.addEventListener('DOMContentLoaded', function() {
+import * as d3 from 'd3';
-  setDistance('.set-distance-js');
+
+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: any) => {
+  d.date = parseTime(d.date);
+  d.km = +d.km;
 });
 
-function setDistance(selector: string) {
+const x = d3.scaleTime()
-  const fields = document.querySelectorAll(selector);
+.domain(d3.extent(data, d => d.date))
-  if(fields) {
+.range([0, width]);
-    Array.prototype.forEach.call(fields, (field: HTMLInputElement) => {
-      if(field.dataset.relation){
-        const relatedField = <HTMLInputElement>document.getElementById(field.dataset.relation);
 
-        if(relatedField) {
+const y = d3.scaleLinear()
-          field.addEventListener('input', (e) => {
+.domain([0, d3.max(data, d => d.km)])
-            e.preventDefault();
+.range([height, 0]);
-            
+
-            const dataList = <HTMLDataListElement>document.getElementById('destinations');
+const line = d3.line()
-              if(dataList) {
+.x(d => x(d.date))
-                var option = Array.prototype.find.call(dataList.options, function(option) {
+.y(d => y(d.km));
-                  return option.value === field.value;
+
-                });
+const svg = d3.select('#container')
-    
+.append('svg')
-                // Get distance
+  .attr('width', width + margin.left + margin.right)
-                const distance = option.getAttribute('distance');
+  .attr('height', height + margin.top + margin.bottom)
-                if(distance) relatedField.value = distance;
+  .call(responsivefy)
-              }
+.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));
+
+
+function responsivefy(svg: any) {
+  // container will be the DOM element
+  // that the svg is appended to
+  // we then measure the container
+  // and find its aspect ratio
+  const container = d3.select(svg.node().parentNode),
+      width = parseInt(svg.style('width'), 10),
+      height = parseInt(svg.style('height'), 10),
+      aspect = width / height;
+ 
+  // set viewBox attribute to the initial size
+  // control scaling with preserveAspectRatio
+  // resize svg on inital page load
+  svg.attr('viewBox', `0 0 ${width} ${height}`)
+      .attr('preserveAspectRatio', 'xMinYMid')
+      .call(resize);
+ 
+  // add a listener so the chart will be resized
+  // when the window resizes
+  // multiple listeners for the same event type
+  // requires a namespace, i.e., 'click.foo'
+  // api docs: https://goo.gl/F3ZCFr
+  d3.select(window).on(
+      'resize.' + container.attr('id'), 
+      resize
+  );
+ 
+  // this is the code that resizes the chart
+  // it will be called on load
+  // and in response to window resizes
+  // gets the width of the container
+  // and resizes the svg to fill it
+  // while maintaining a consistent aspect ratio
+  function resize() {
+      const w = parseInt(container.style('width'));
+      svg.attr('width', w);
+      svg.attr('height', Math.round(w / aspect));
   }
 }
-*/
-export {}

frontend/package.json

@@ -9,15 +9,17 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@types/d3": "^7.4.1",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "sass": "^1.60.0",
     "tailwindcss": "^3.3.1",
-    "typescript": "^4.9.3",
+    "typescript": "^4.9.5",
     "vite": "^4.2.0",
     "vite-plugin-static-copy": "^0.13.1"
   },
   "dependencies": {
-    "choices.js": "^10.2.0"
+    "choices.js": "^10.2.0",
+    "d3": "^7.8.5"
   }
 }

frontend/scss/app.scss

@@ -9,3 +9,4 @@
 @import 'components/input';
 @import 'components/alert';
 @import 'components/status';
+@import 'components/chart';

frontend/scss/components/_chart.scss

@@ -0,0 +1,3 @@
+.line {
+  @apply fill-none stroke-2 stroke-primary-600;
+}

templates/stat.html.tera

@@ -37,65 +37,13 @@
     <div id="container" class="w-full"></div>
 	</div>
 
-<script type="module">
+<script>
-
-import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
-
-
 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 {
+<script src="/public/logbook.js"></script>
-  fill: none;
-  stroke: steelblue;
-  stroke-width: 2px;
-}
-</style>
 {% endblock content%}