diff --git a/frontend/logbook.ts b/frontend/logbook.ts index ea4e194..e3c96b3 100644 --- a/frontend/logbook.ts +++ b/frontend/logbook.ts @@ -8,46 +8,48 @@ export interface Data { 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 = 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() - .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)); + 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 = 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() + .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)); + } }