212 lines
5.9 KiB
TypeScript
212 lines
5.9 KiB
TypeScript
import type { ChartData, ChartOptions } from 'chart.js'
|
|
import Papa from 'papaparse'
|
|
|
|
// Initialize empty arrays for the chart data
|
|
const labels: string[] = []
|
|
const noise: number[] = []
|
|
const disturb: number[] = []
|
|
let timediff: number[] = []
|
|
|
|
// Funktion zum Formatieren des Sensorwerts
|
|
function formatNoiseValue (rawValue: string):number {
|
|
const firstFourDigits = rawValue.slice(0, 4) // Nimm die ersten 4 Zeichen
|
|
const formattedValue = parseFloat(firstFourDigits.slice(0, 2) + '.' + firstFourDigits.slice(2)) // Füge Dezimalpunkt nach zwei Zeichen ein
|
|
return formattedValue
|
|
}
|
|
|
|
// to estimate the data quality a factor in % is calculated to figure out,
|
|
// how much the data points differ from their 200ms timing
|
|
export function filterTimeDiffValues (timeDiff:number[]) {
|
|
// Filter the array to remove all differences below 1
|
|
const filteredTimediff = timeDiff.filter(diff => diff >= 1)
|
|
// Optionally, process the filtered data further
|
|
return filteredTimediff
|
|
}
|
|
|
|
// function smoothNoise (data: number[], windowSize: number): number[] {
|
|
// const smoothed: number[] = []
|
|
|
|
// for (let i = 0; i < data.length; i++) {
|
|
// const start = Math.max(0, i - Math.floor(windowSize / 2))
|
|
// const end = Math.min(data.length, i + Math.floor(windowSize / 2) + 1)
|
|
// const average =
|
|
// data.slice(start, end).reduce((sum, value) => sum + value, 0) /
|
|
// (end - start)
|
|
// smoothed.push(average)
|
|
// }
|
|
|
|
// return smoothed
|
|
// };
|
|
|
|
// Fetch and parse the CSV file
|
|
export const loadChartData = async (csvFilePath: string): Promise<void> => {
|
|
const response = await fetch(csvFilePath)
|
|
const csvData = await response.text()
|
|
|
|
// eslint-disable-next-line import/no-named-as-default-member
|
|
Papa.parse(csvData, {
|
|
header: true,
|
|
skipEmptyLines: true,
|
|
complete: (result) => {
|
|
result.data.forEach((row: any) => {
|
|
labels.push(row.timestamp)
|
|
noise.push(formatNoiseValue(row.sensors_ambientData_noise.replace(/\./g, '')
|
|
))
|
|
disturb.push(parseFloat(row.disturbance_analysisData))
|
|
timediff.push(parseFloat(row.time_diff || '0')) // Default to 0 if empty
|
|
})
|
|
const cleanTimeDiff: number[] = []
|
|
timediff.forEach((diff) => {
|
|
if (diff >= 1) { cleanTimeDiff.push(diff) }
|
|
})
|
|
timediff = cleanTimeDiff
|
|
}
|
|
})
|
|
}
|
|
|
|
// function smoothNoise (data: number[], windowSize: number): number[] {
|
|
// const smoothed: number[] = []
|
|
|
|
// for (let i = 0; i < data.length; i++) {
|
|
// const start = Math.max(0, i - Math.floor(windowSize / 2))
|
|
// const end = Math.min(data.length, i + Math.floor(windowSize / 2) + 1)
|
|
// const average =
|
|
// data.slice(start, end).reduce((sum, value) => sum + value, 0) /
|
|
// (end - start)
|
|
// smoothed.push(average)
|
|
// }
|
|
|
|
// return smoothed
|
|
// };
|
|
|
|
// Fetch and parse the CSV file
|
|
export const loadCleanChartData = async (csvFilePath: string): Promise<void> => {
|
|
const response = await fetch(csvFilePath)
|
|
const csvData = await response.text()
|
|
|
|
// eslint-disable-next-line import/no-named-as-default-member
|
|
Papa.parse(csvData, {
|
|
header: true,
|
|
skipEmptyLines: true,
|
|
complete: (result) => {
|
|
result.data.forEach((row: any) => {
|
|
labels.push(row.timestamp)
|
|
noise.push(formatNoiseValue(row.sensors_ambientData_noise.replace(/\./g, '')
|
|
))
|
|
disturb.push(parseFloat(row.disturbance_analysisData))
|
|
timediff.push(parseFloat(row.time_diff || '0')) // Default to 0 if empty
|
|
})
|
|
const cleanTimeDiff: number[] = []
|
|
timediff.forEach((diff) => {
|
|
if (diff >= 1) { cleanTimeDiff.push(diff) }
|
|
})
|
|
timediff = cleanTimeDiff
|
|
}
|
|
})
|
|
}
|
|
|
|
// Export chart data and options (initially empty; will be filled after loading the CSV)
|
|
export const data: ChartData<'line'> = {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
label: 'Lautstärke (Noise)',
|
|
data: noise,
|
|
borderColor: '#42a5f5',
|
|
backgroundColor: '#42a5f5',
|
|
fill: true,
|
|
tension: 0.8,
|
|
yAxisID: 'y-noise'
|
|
},
|
|
{
|
|
label: 'Störfaktor (Disturbance)',
|
|
data: disturb,
|
|
borderColor: '#ff9800',
|
|
backgroundColor: '#ff9800',
|
|
fill: false,
|
|
tension: 0.2,
|
|
yAxisID: 'y-disturbance'
|
|
},
|
|
{
|
|
label: 'time_diff',
|
|
backgroundColor: '#fdctf',
|
|
borderColor: '#C9C9C9',
|
|
data: timediff,
|
|
fill: false,
|
|
tension: 1,
|
|
yAxisID: 'y-timediff'
|
|
}
|
|
]
|
|
}
|
|
|
|
export const options: ChartOptions<'line'> = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
},
|
|
zoom: {
|
|
zoom: {
|
|
wheel: {
|
|
enabled: true // Enable zooming with the mouse wheel
|
|
},
|
|
pinch: {
|
|
enabled: true // Enable zooming with touch gestures
|
|
},
|
|
mode: 'Tropics' // Allow zooming in both directions
|
|
},
|
|
pan: {
|
|
enabled: true, // Enable panning
|
|
mode: 'xy' // Allow panning in both directions
|
|
}
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Lautstärke und Störfaktor'
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Timestamp'
|
|
}
|
|
},
|
|
'y-noise': {
|
|
type: 'linear',
|
|
position: 'left', // Noise scale on the left
|
|
title: {
|
|
display: true,
|
|
text: 'Lautstärke (Geräuschkulisse)'
|
|
},
|
|
grid: {
|
|
drawOnChartArea: true // Show grid lines for the noise Y-axis
|
|
}
|
|
},
|
|
'y-disturbance': {
|
|
type: 'linear',
|
|
position: 'right', // Disturbance scale on the right
|
|
title: {
|
|
display: true,
|
|
text: 'Störfaktor (Disturbance)'
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false // Disable grid lines for the disturbance Y-axis
|
|
}
|
|
},
|
|
'y-timediff': {
|
|
type: 'linear',
|
|
position: 'right', // Disturbance scale on the right
|
|
title: {
|
|
display: true,
|
|
text: 'Zeitunterschied'
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false // Disable grid lines for the disturbance Y-axis
|
|
}
|
|
}
|
|
}
|
|
}
|