asb_cloud_front/src/pages/WellStat.jsx

//import {useParams} from "react-router-dom";
//import {Link} from "react-router-dom";
import LoaderPortal from '../components/LoaderPortal'
import { useState, useEffect } from "react";
// import {ClusterService} from '../services/api'
// import notify from '../components/notify'
import {Table, Tag, Button} from 'antd';

const makeColumn = (title, key) => ({title: title,  key: key,  dataIndex: key,})

const makePlanFactColumns = (title, keyPlan, keyFact) =>
{
  let keyPlanLocal = keyPlan
  let keyFactLocal = keyFact
  
  if(!keyFact){
    keyPlanLocal = keyPlan + 'Plan'
    keyFactLocal =  keyPlan + 'Fact'
  }

  return {  
    title: title,
    children: [ 
      makeColumn('план', keyPlanLocal),
      makeColumn('факт', keyFactLocal),
    ]
  }
}

const columns = [
  makeColumn('Конструкция секции', 'sectionType'),
  makePlanFactColumns('Глубина, м', 'wellDepth'),
  makePlanFactColumns('Период, д',  'buildDays'),
  makePlanFactColumns('Механическая скорость проходки, м/час', 'rateOfPenetration'),
  makePlanFactColumns('Рейсовая скорость, м/час', 'routeSpeed'),
  makePlanFactColumns('Скорость подъема КНБК', 'bhaUpSpeed'),
  makePlanFactColumns('Скорость спуска КНБК', 'bhaDownSpeed'),
  makePlanFactColumns('Скорость спуска обсадной колонны', 'casingDownSpeed'),
]

// const data = [{
//   sectionType: 'загагулина',
//   wellDepthPlan: 1,
//   wellDepthFact: 1,
//   buildDaysPlan: 1,
//   buildDaysFact: 1,
//   rateOfPenetrationPlan: 4,
//   rateOfPenetrationFact: 3,
//   routeSpeedPlan: 2,
//   routeSpeedFact: 1,
//   bhaUpSpeedPlan: 1,
//   bhaUpSpeedFact: 1,
//   bhaDownSpeedPlan: 1,
//   bhaDownSpeedFact: 1,
//   casingDownSpeedPlan: 1,
//   casingDownSpeedFact: 1,
//   }]

export default function WellStat({data}){
  const [showLoader, setShowLoader] = useState(false)
  return(
    <LoaderPortal show={showLoader}>
      <Table
          columns={columns}
          dataSource={data}
          size={'small'}
          bordered
          pagination={false}
          rowKey={(record) => record.sectionType}
        />
    </LoaderPortal>)
}