Thiết kế website giá rẻ

Question

I have a React component that displays a table of Data. The component takes ProgramData as a prop, which is an array of objects. I need to filter this data and transform it before rendering in the table. The transformation involves combining related parameters into single objects, and setting toleranceUpper and toleranceLower to null if they don’t exist.

Here is my component code:

import { ParameterList } from '@/utils/type'
import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Pencil } from 'lucide-react'

type MonitoringTabProps = {
  ProgramData: ParameterList
  ProgramID: string
}

const filteredData = (ProgramData: ParameterList) => {
  return ProgramData.filter((item) => item.ParameterMenu === 'MON')
}

const Monitoring = ({ ProgramData, ProgramID }: MonitoringTabProps) => {
  const { t } = useTranslation()
  const [data, setData] = useState(filteredData(ProgramData))

  useEffect(() => {
    setData(filteredData(ProgramData))
  }, [ProgramData])

  return (
    <div className='p-4'>
      <h1 className='text-2xl font-bold mb-4'>{t('Überwachung')}</h1>
      <Table className='w-full'>
        <TableHeader>
          <TableRow>
            <TableHead>{t('Bezeichnung')}</TableHead>
            <TableHead>{t('Soll')}</TableHead>
            <TableHead>{t('Toleranz Oben')}</TableHead>
            <TableHead>{t('Toleranz Unten')}</TableHead>
            <TableHead></TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data.map((item, index) => (
            <TableRow key={index}>
              <TableCell className='flex items-center gap-2'>
                {item.ParameterName}
              </TableCell>
              <TableCell>
                <div className='flex items-center'>
                  {item.Value} {item.ParameterUnit}
                </div>
              </TableCell>
              <TableCell>
                <div className='flex items-center'>
                  {item.toleranceUpper} {item.ParameterUnit}
                </div>
              </TableCell>
              <TableCell>
                <div className='flex items-center'>
                  {item.toleranceLower} {item.ParameterUnit}
                </div>
              </TableCell>
              <TableCell>
                <button
                  className='text-gray-500 hover:text-gray-700'
                  onClick={() => {
                    /* Add edit functionality here */
                  }}
                >
                  <Pencil size={15} />
                </button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

export default Monitoring

And here is an example of my ProgramData:

[
    {
        "id": "44d71655-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "PRG_TouchSpeed",
        "ParameterUnit": "%",
        "ParameterType": "INT",
        "ParameterDefault": 25,
        "ParameterMin": 1,
        "ParameterMax": 100,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "PRG",
        "Value": "25"
    },
    {
        "id": "44d717a5-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_TimeToleranceLower",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": -5,
        "ParameterMin": -10,
        "ParameterMax": 10,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "-5"
    },
    {
        "id": "44d71851-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_TimeToleranceUpper",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": 5,
        "ParameterMin": -10,
        "ParameterMax": 10,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "6"
    },
  
    {
        "id": "44d72574-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "PRG_StudDetectReferenceToleranceLower",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": 3,
        "ParameterMin": 0,
        "ParameterMax": 15,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "PRG",
        "Value": "3"
    },
    {
        "id": "44d72611-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "PRG_StudDetectReferenceToleranceUpper",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": 3,
        "ParameterMin": 0,
        "ParameterMax": 15,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "PRG",
        "Value": "3"
    },
    {
        "id": "44d726b1-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungeTimeToleranceUpper",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": null,
        "ParameterMin": -5,
        "ParameterMax": 5,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "2"
    },
    {
        "id": "44d72744-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungeTimeToleranceLower",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": null,
        "ParameterMin": -5,
        "ParameterMax": 5,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "-3"
    },
    {
        "id": "44d727d8-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungeTime",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": 8,
        "ParameterMin": 0,
        "ParameterMax": 20,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "8"
    },
    {
        "id": "44d7285f-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_ArcVoltage",
        "ParameterUnit": "V",
        "ParameterType": "FLOAT",
        "ParameterDefault": 25,
        "ParameterMin": 10,
        "ParameterMax": 100,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "25"
    },
    {
        "id": "44d728ef-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_ArcVoltageToleranceLower",
        "ParameterUnit": "V",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -20,
        "ParameterMax": 20,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d72976-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_ArcVoltageToleranceUpper",
        "ParameterUnit": "V",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -20,
        "ParameterMax": 20,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d729ff-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_LiftToleranceLower",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -5,
        "ParameterMax": 5,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d72a89-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_LiftToleranceUpper",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -5,
        "ParameterMax": 5,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d72b24-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_MeanCurrentDeviationToleranceLower",
        "ParameterUnit": "A",
        "ParameterType": "INT",
        "ParameterDefault": -50,
        "ParameterMin": -100,
        "ParameterMax": 100,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "-50"
    },
    {
        "id": "44d72bc8-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_MeanCurrentDeviationToleranceUpper",
        "ParameterUnit": "A",
        "ParameterType": "INT",
        "ParameterDefault": 50,
        "ParameterMin": -100,
        "ParameterMax": 100,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "50"
    },
    {
        "id": "44d72c52-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PilotArcVoltage",
        "ParameterUnit": "V",
        "ParameterType": "FLOAT",
        "ParameterDefault": 25,
        "ParameterMin": 10,
        "ParameterMax": 100,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "25"
    },
    {
        "id": "44d72ce4-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PilotArcVoltageToleranceLower",
        "ParameterUnit": "V",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -20,
        "ParameterMax": 20,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d72d72-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungePointToleranceUpper",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": null,
        "ParameterMin": -10,
        "ParameterMax": 10,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d72e00-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungePointToleranceLower",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": null,
        "ParameterMin": -10,
        "ParameterMax": 10,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d72e8b-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungePoint",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": 0,
        "ParameterMin": -10,
        "ParameterMax": 10,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "0"
    },
    {
        "id": "44d72f16-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungeDepthToleranceUpper",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -5,
        "ParameterMax": 5,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d72f9c-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungeDepthToleranceLower",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -5,
        "ParameterMax": 5,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d73023-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PlungeDepth",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": -2,
        "ParameterMin": -5,
        "ParameterMax": 0,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "-2"
    },
    {
        "id": "44d730b7-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "MON_PilotArcVoltageToleranceUpper",
        "ParameterUnit": "V",
        "ParameterType": "FLOAT",
        "ParameterDefault": null,
        "ParameterMin": -20,
        "ParameterMax": 20,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": null
    },
    {
        "id": "44d73151-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 1,
        "ParameterName": "PULSE_Time",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": 20,
        "ParameterMin": 3,
        "ParameterMax": 100,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "40"
    },
    {
        "id": "44d731e2-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 1,
        "ParameterName": "PULSE_Lift",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": 2,
        "ParameterMin": 0.5,
        "ParameterMax": 5,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "2.1"
    },
    {
        "id": "44d7327f-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 1,
        "ParameterName": "PULSE_PulsType",
        "ParameterUnit": null,
        "ParameterType": "LIST",
        "ParameterDefault": 2,
        "ParameterMin": null,
        "ParameterMax": null,
        "ParameterStep": null,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "PULS_PulsTypePilotCurrent"
    },
    {
        "id": "44d733b0-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 1,
        "ParameterName": "PULSE_Current",
        "ParameterUnit": "A",
        "ParameterType": "INT",
        "ParameterDefault": 700,
        "ParameterMin": -1800,
        "ParameterMax": 1800,
        "ParameterStep": 10,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "20"
    },
    {
        "id": "44d73451-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 2,
        "ParameterName": "PULSE_Time",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": 20,
        "ParameterMin": 3,
        "ParameterMax": 100,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "15"
    },
    {
        "id": "44d734d8-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 2,
        "ParameterName": "PULSE_Lift",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": 2,
        "ParameterMin": 0.5,
        "ParameterMax": 5,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "2"
    },
    {
        "id": "44d7355c-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 2,
        "ParameterName": "PULSE_Current",
        "ParameterUnit": "A",
        "ParameterType": "INT",
        "ParameterDefault": 700,
        "ParameterMin": -1800,
        "ParameterMax": 1800,
        "ParameterStep": 10,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "700"
    },
    {
        "id": "44d735ec-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 2,
        "ParameterName": "PULSE_PulsType",
        "ParameterUnit": null,
        "ParameterType": "LIST",
        "ParameterDefault": 2,
        "ParameterMin": null,
        "ParameterMax": null,
        "ParameterStep": null,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "PULS_PulsTypePuls"
    },
    {
        "id": "44d736e8-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 3,
        "ParameterName": "PULSE_PulsType",
        "ParameterUnit": null,
        "ParameterType": "LIST",
        "ParameterDefault": 2,
        "ParameterMin": null,
        "ParameterMax": null,
        "ParameterStep": null,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "PULS_PulsTypePuls"
    },
    {
        "id": "44d7377d-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 3,
        "ParameterName": "PULSE_Lift",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": 2,
        "ParameterMin": 0.5,
        "ParameterMax": 5,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "1.7"
    },
    {
        "id": "44d73803-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 3,
        "ParameterName": "PULSE_Current",
        "ParameterUnit": "A",
        "ParameterType": "INT",
        "ParameterDefault": 700,
        "ParameterMin": -1800,
        "ParameterMax": 1800,
        "ParameterStep": 10,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "-500"
    },
    {
        "id": "44d73894-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": 3,
        "ParameterName": "PULSE_Time",
        "ParameterUnit": "ms",
        "ParameterType": "INT",
        "ParameterDefault": 20,
        "ParameterMin": 3,
        "ParameterMax": 100,
        "ParameterStep": 1,
        "ParameterActive": 1,
        "ParameterMenu": "PULSE",
        "Value": "10"
    }
]

Requirements:

Filter the ProgramData to include only items where ParameterMenu === ‘MON’.

Combine related parameters into single objects. For example:

For a parameter named X, find corresponding parameters with names XUpper and XLower.

Create a new object that includes toleranceUpper and toleranceLower keys with the values from XUpper and XLower, or set them to null if they don’t exist.

Given the ProgramData example, the output should be:

[
  {
        "id": "44d71987-4d99-11ef-a762-fcaa141f9a30",
        "ProgramID": 1,
        "ProgramDataLineNumber": -1,
        "ParameterName": "x",
        "ParameterUnit": "mm",
        "ParameterType": "FLOAT",
        "ParameterDefault": 3,
        "ParameterMin": 0,
        "ParameterMax": 10,
        "ParameterStep": 0.1,
        "ParameterActive": 1,
        "ParameterMenu": "MON",
        "Value": "3"
        "toleranceUpper": "2",
        "toleranceLower": "-5",
  },
  // More transformed data...
]

Thiết kế website giá rẻ

Danh mục

How to Filter and Transform Data in React