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[];

  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));
  }
}