asb_cloud_front/src/pages/Archive/ArchiveDisplay.jsx

import { useEffect, useState } from 'react'
import { Grid, GridItem } from '../../components/Grid'
import { ArchiveColumn } from './ArchiveColumn'
import { paramsGroups } from '../TelemetryView'

export const ArchiveDisplay = ({data, startDate, interval, onWheel}) => {
    const [chartData, setChartData] = useState([])

    useEffect(() => {
        const endDate = new Date(+startDate + interval)
        setChartData(data.filter(elm => elm.date >= startDate && elm.date <= endDate))
    }, [data, startDate, interval])

    return (
        <Grid onWheel={onWheel}>
            {paramsGroups.map((group, index) => (
                <GridItem col={index + 1} row={'1'} className={'border_small'} key={`${group.label}${index}`} style={{ padding: 0 }}>
                    <ArchiveColumn
                        style={{ width: '15vw' }}
                        data={chartData}
                        lineGroup={group}
                        interval={interval / 1000}
                        headerHeight={'50px'}
                        yStart={startDate}
                    />
                </GridItem>
            ))}
        </Grid>
    )
}