asb_cloud_front/src/pages/TelemetryView.jsx

import { useState, useEffect} from 'react';
import { Row, Col, Select, } from 'antd'
import { ChartTimeOnline} from '../components/charts/ChartTimeOnline'
import { ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
import { CustomColumn} from '../components/CustomColumn'
import { ModeDisplay } from '../components/ModeDisplay';
import { Display } from '../components/Display';

import { useParams} from 'react-router-dom'
import { Subscribe} from '../services/signalr'
import { DataService} from '../services/api'

const {Option} = Select

const dash = [7,3]

const blockHeightGroup = {
  label:"Высота блока",
  yDisplay: false,
  linePv: { label:"blockHeight", units:'м', xAccessorName : "blockHeight", yAccessorName : "date", color:'#333' },
}

const blockSpeedGroup = {
  label:"Скорость блока",
  yDisplay: false,
  linePv: { label:"blockSpeed", units:'м/ч', xAccessorName : "blockSpeed", yAccessorName : "date", color:'#0a0' },
  lineSp: { label:"blockSpeedSp", units:'м/ч', xAccessorName : "blockSpeedSp", yAccessorName : "date", color:'#0a0' },
}

const pressureGroup = {
  label:"Давтение",
  yDisplay: false,  
  linePv: { label:"pressure", units:'атм', xAccessorName : "pressure", yAccessorName : "date", color:'#c00' },
  lineSp: { label:"pressureSp", units:'атм', xAccessorName : "pressureSp", yAccessorName : "date", color:'#c00' },
  lineIdle: { label:"pressureIdle", units:'атм', xAccessorName : "pressureIdle", yAccessorName : "date", color:'#c00' },
  linesOther: [
    { label:"мекс. перепад", units:'атм', xAccessorName : "pressureDeltaLimitMax", yAccessorName : "date", color:'#c00' },
  ],
}

const axialLoadGroup = {    
  label:"Осевая нагрузка",
  yDisplay: false,
  linePv: { label:"axialLoad", units:'т', xAccessorName : "axialLoad", yAccessorName : "date", color:'#00a' },
  lineSp: { label:"axialLoadSp", units:'т', xAccessorName : "axialLoadSp", yAccessorName : "date", color:'#00a', dash },
  linesOther: [
    { label:"axialLoadLimitMax", units:'т', xAccessorName : "axialLoadLimitMax", yAccessorName : "date", color:'#00a' },
  ],
}

const hookWeightGroup = {
  label:"Ввес на крюке",
  yDisplay: false,
  linePv: { label:"hookWeight", units:'т', xAccessorName : "hookWeight", yAccessorName : "date", color:'#0aa' },
  lineIdle: { label:"hookWeightIdle", units:'т', xAccessorName : "hookWeightIdle", yAccessorName : "date", color:'#0aa', dash },
  linesOther: [
    { label:"hookWeightLimitMin", units:'т', xAccessorName : "hookWeightLimitMin", yAccessorName : "date", color:'#0aa' },
    { label:"hookWeightLimitMax", units:'т', xAccessorName : "hookWeightLimitMax", yAccessorName : "date", color:'#0aa' },
  ],
}

const rotorTorqueGroup = {
  label:"Момент на роторе",
  yDisplay: false,
  linePv: { label:"rotorTorque", units:'кН·м', xAccessorName : "rotorTorque", yAccessorName : "date", color:'#a0a' },
  lineSp: { label:"rotorTorqueSp", units:'кН·м', xAccessorName : "rotorTorqueSp", yAccessorName : "date", color:'#a0a' },
  lineIdle: { label:"rotorTorqueIdle", units:'кН·м', xAccessorName : "rotorTorqueIdle", yAccessorName : "date", color:'#a0a' },
  linesOther: [
    { label:"rotorTorqueLimitMax", units:'кН·м', xAccessorName : "rotorTorqueLimitMax", yAccessorName : "date", color:'#a0a' },
  ],
}

const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup]

export const Column = ({lineGroup, data, interval})=>{
  let lines = [lineGroup.linePv]

  if(lineGroup.lineSp)
    lines.push(lineGroup.lineSp)

  let dataLast = null  
  let pv = null
  if(data?.length > 0 ){
    dataLast = data[data.length - 1];
    if(lineGroup.linePv)
      pv = dataLast[lineGroup.linePv?.xAccessorName]
  }

  return(
    <>
      <Display 
        label={lineGroup.label}
        value={pv}
        suffix={lineGroup.linePv?.units}/>
      <ChartTimeOnline 
        data={data}
        yDisplay={lineGroup.yDisplay}
        lines={lines}
        interval={interval}/> 
      <ChartTimeOnlineFooter 
        data={dataLast}
        {...lineGroup} />
    </>)
}

export default function TelemetryView(props){
  let { id } = useParams();
  const [saubData, setSaubData] = useState([])
  const [chartInterval, setchartInterval] = useState(600)

  const handleReceiveDataSaub = (data)=>{
    if(data){
      setSaubData(data)
    }      
  }

  useEffect( ()=> {
    DataService.get(id)
    .then(handleReceiveDataSaub)
    .catch(error=>console.error(error))

    return Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
    }, [id]);

  const colSpan = 24/(paramsGroups.length )
  
  return(<div>
    {/* <div>Well id: {id}; points count: {saubData.length}</div> */}
    <Row style={{marginBottom:'1rem'}}>
      <Col>
        <ModeDisplay data={saubData}/>
      </Col>
      <Col>
      Интервал:&nbsp;
      <Select defaultValue="600" onChange={setchartInterval}>
        <Option value='600'>10 минут</Option>
        <Option value='1800'>30 минут</Option>
        <Option value='3600'>1 час</Option>
        <Option value='21600'>6 час</Option>
        <Option value='86400'>1 день</Option>
      </Select>
      </Col>
    </Row>
    <Row>
      <Col span={2} >
        <CustomColumn data={saubData} />
      </Col>
      <Col span={24 - 2}>
        <Row>
          {paramsGroups.map(group=>
          <Col span={colSpan} className='border_small' key={group.label}>
            <Column data={saubData} lineGroup={group} interval={chartInterval}/>
          </Col>)}
        </Row>
      </Col>
    </Row>
  </div>)
}