Merge branch 'staging' of gitlab.com:PhilippHofer/rot into staging

frontend/logbook.ts

@@ -1,27 +1,34 @@
 import * as d3 from 'd3';
 
-const margin = { top: 20, right: 20, bottom: 50, left: 50 },
-width = 960 - margin.left - margin.right,
-height = 500 - margin.top - margin.bottom;
+export interface Data {
+  date: Date;
+  km: number;
+}
 
-const parseTime = d3.timeParse('%Y-%m-%d');
+if(sessionStorage.getItem('userStats')) {
+  const data = JSON.parse(sessionStorage.getItem('userStats') || '{}') as Data[];
 
-data.forEach((d: any) => {
-  d.date = parseTime(d.date);
+  if(data.length >= 2) {
+    const margin = { top: 20, right: 20, bottom: 50, left: 50 };
+    const width: number = 960 - margin.left - margin.right;
+    const height: number = 500 - margin.top - margin.bottom;
+    
+    data.forEach((d: Data) => {
+      d.date = <Date> new Date(d.date)
       d.km = +d.km;
     });
     
     const x = d3.scaleTime()
-.domain(d3.extent(data, d => d.date))
+      .domain(<[Date, Date]>d3.extent(data, (d: Data) => d.date))
       .range([0, width]);
     
     const y = d3.scaleLinear()
-.domain([0, d3.max(data, d => d.km)])
+      .domain([0, Number(d3.max(data, (d: Data) => d.km))])
       .range([height, 0]);
     
-const line = d3.line()
-.x(d => x(d.date))
-.y(d => y(d.km));
+    const line = d3.line<Data>()
+      .x((d: Data) => x(d.date))
+      .y((d: Data) => y(d.km));
     
     const svg = d3.select('#container')
       .append('svg')
@@ -42,41 +49,26 @@ svg.append('g')
     
     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;
+  const container = d3.select(svg.node().parentNode);
+  const width = parseInt(svg.style('width'), 10);
+  const height = parseInt(svg.style('height'), 10);
+  const 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);

templates/stat.html.tera

@@ -43,6 +43,7 @@ const data = [
     { date: '{{p.date}}', km: {{p.km}} },
   {%- endfor %}
 ]
+sessionStorage.setItem('userStats', JSON.stringify(data));
 </script>
 
 <script src="/public/logbook.js"></script>