asb_cloud_front/src/components/ArchiveColumn.jsx

import { useState, useEffect } from 'react';
import { Button, Select, Tag, Popover, Row, Tooltip } from 'antd';
import { ChartTimeArchive } from './charts/ChartTimeArchive';
import { DeleteOutlined } from '@ant-design/icons';

const { Option } = Select;

const linesCollection = [
  { label: "Глубина забоя", xAccessorName: "wellDepth", color: '#f00' },
  { label: "Положение инструмента", xAccessorName: "bitDepth", color: '#ff0' },
  { label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#f0f' },
  { label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#0ff' },
  { label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#0f0' },
  { label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#00f' },

  { label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#c00' },
  { label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#cc0' },
  { label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#c0c' },
  { label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#0cc' },
  { label: "Давление", xAccessorName: "pressure", color: '#0c0' },
  { label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#00c' },
  
  { label: "Давление. Задание", xAccessorName: "pressureSp", color: '#900' },
  { label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#990' },
  { label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#909' },
  { label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#099' },
  { label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#090' },
  { label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#009' },
  
  { label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#600' },
  { label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#660' },
  { label: "Вес на крюке", xAccessorName: "hookWeight", color: '#606' },
  { label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#066' },
  { label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#060' },
  { label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#006' },
  
  { label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#300' },
  { label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#330' },
  { label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#303' },
  { label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#033' },
  { label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#030' },
  { label: "Расход", xAccessorName: "flow", color: '#003' },
  
  { label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#666' },
  { label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#ccc' },
]

const tagRender = ({ label, value, closable, onClose }) =>{    
  const onPreventMouseDown = event => {
    event.preventDefault();
    event.stopPropagation();
  };

  let color = linesCollection.find(l=>l.xAccessorName === value)?.color
  return (
    <Tag
      //color={color}
      onMouseDown={onPreventMouseDown}
      closable={closable}
      onClose={onClose}
      style={{ marginRight: 3 }}>
      <span style={{backgroundColor:color}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span>&nbsp;{label}</span>
    </Tag>
  );
}

export function ArchiveColumn({ data, config, rangeDate, chartRatio, onRemoveChart, onSaveConfig }) {
  const [lines, setLines] = useState([]);

  useEffect(() => {
    setLines(config.lines);
  },[config]);

  const handleLinesSetChange = (linesKeys) => {
    let newLines = linesCollection.filter(line => linesKeys.includes(line.xAccessorName));
    config.lines = newLines;
    if(onSaveConfig)
      onSaveConfig()
    setLines(newLines);
  };

  let selectedValues = lines?.map(line=>line.xAccessorName)??[]

  const select = <Select
    mode="multiple"    
    placeholder="Выберите линии"
    value={selectedValues}    
    //showArrow
    bordered={false}
    tagRender={tagRender}
    onChange={handleLinesSetChange}
    style={{ 
      minWidth: "300px",
      maxWidth: "400px"
    }}
  >
    {linesCollection.map((line) => (<Option key={line.xAccessorName} value={line.xAccessorName} color={line.color}>{line.label}</Option>))}
  </Select>;

  const popBar = <Row>
    {select}
    <Tooltip title="Удалить этот график">
      <Button onClick={() => onRemoveChart(config.id)}><DeleteOutlined /></Button>
    </Tooltip>    
  </Row>

  return (
    <>
      <Popover content={popBar}>
        <div>
        <ChartTimeArchive
          data={data}
          yDisplay={config.yDisplay}
          lines={lines}
          rangeDate={rangeDate}
          chartRatio={chartRatio}          
          />
        </div>
      </Popover>

    </>);
}