mindboost-rnbo-test-project/components/viz/dataExtractor.ts

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