rowt/frontend/logbook.ts

import * as d3 from 'd3';

export interface Data {
  date: Date;
  km: number;
}

if(sessionStorage.getItem('userStats')) {
  const data = JSON.parse(sessionStorage.getItem('userStats') || '{}') as Data[];

  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(<[Date, Date]>d3.extent(data, (d: Data) => d.date))
      .range([0, width]);
    
    const y = d3.scaleLinear()
      .domain([0, Number(d3.max(data, (d: Data) => d.km))])
      .range([height, 0]);
    
    const line = d3.line<Data>()
      .x((d: Data) => x(d.date))
      .y((d: Data) => y(d.km));
    
    const svg = d3.select('#container')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .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) {
  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;

  svg.attr('viewBox', `0 0 ${width} ${height}`)
    .attr('preserveAspectRatio', 'xMinYMid')
    .call(resize);

  d3.select(window).on(
    'resize.' + container.attr('id'),
    resize
  );

  function resize() {
    const w = parseInt(container.style('width'));
    svg.attr('width', w);
    svg.attr('height', Math.round(w / aspect));
  }
}