Ruderverein-Donau-Linz/rowt
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Wiki Activity

[TASK] bugfix chart if array length less than 2

Browse Source
This commit is contained in:
Marie Birner 2023-10-01 18:53:52 +02:00 committed by philipp
parent 705eebb0ec
commit 5315fe8dfc
1 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/logbook.ts
View File

@ -8,46 +8,48 @@ export interface Data {
if(sessionStorage.getItem('userStats')) { if(sessionStorage.getItem('userStats')) {
const data = JSON.parse(sessionStorage.getItem('userStats') || '{}') as Data[]; const data = JSON.parse(sessionStorage.getItem('userStats') || '{}') as Data[];
const margin = { top: 20, right: 20, bottom: 50, left: 50 }; if(data.length >= 2) {
const width: number = 960 - margin.left - margin.right; const margin = { top: 20, right: 20, bottom: 50, left: 50 };
const height: number = 500 - margin.top - margin.bottom; const width: number = 960 - margin.left - margin.right;
const height: number = 500 - margin.top - margin.bottom;
data.forEach((d: Data) => { data.forEach((d: Data) => {
d.date = <Date> new Date(d.date) d.date = <Date> new Date(d.date)
d.km = +d.km; d.km = +d.km;
}); });
const x = d3.scaleTime() const x = d3.scaleTime()
.domain(<[Date, Date]>d3.extent(data, (d: Data) => d.date)) .domain(<[Date, Date]>d3.extent(data, (d: Data) => d.date))
.range([0, width]); .range([0, width]);
const y = d3.scaleLinear() const y = d3.scaleLinear()
.domain([0, Number(d3.max(data, (d: Data) => d.km))]) .domain([0, Number(d3.max(data, (d: Data) => d.km))])
.range([height, 0]); .range([height, 0]);
const line = d3.line<Data>() const line = d3.line<Data>()
.x((d: Data) => x(d.date)) .x((d: Data) => x(d.date))
.y((d: Data) => y(d.km)); .y((d: Data) => y(d.km));
const svg = d3.select('#container') const svg = d3.select('#container')
.append('svg') .append('svg')
.attr('width', width + margin.left + margin.right) .attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom) .attr('height', height + margin.top + margin.bottom)
.call(responsivefy) .call(responsivefy)
.append('g') .append('g')
.attr('transform', `translate(${margin.left},${margin.top})`); .attr('transform', `translate(${margin.left},${margin.top})`);
svg.append('path') svg.append('path')
.data([data]) .data([data])
.attr('class', 'line') .attr('class', 'line')
.attr('d', line); .attr('d', line);
svg.append('g') svg.append('g')
.attr('transform', `translate(0,${height})`) .attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x)); .call(d3.axisBottom(x));
svg.append('g') svg.append('g')
.call(d3.axisLeft(y)); .call(d3.axisLeft(y));
}
} }