asb_cloud_front/src/components/AnalysisDepthToInterval.jsx

import { useParams } from "react-router-dom"
import { DatePicker } from 'antd'
import notify from "../components/notify"
import { useState, useEffect } from 'react'
import { AnalyticsService } from '../services/api'
import { ChartDepthToInterval } from './charts/ChartDepthToInterval'
import { Select } from 'antd'

const { Option } = Select

const timePeriodCollection = [
  { value: '60', label: '1 минута' },
  { value: '300', label: '5 минут' },
  { value: '600', label: '10 минут' },
  { value: '1800', label: '30 минут' },
  { value: '3600', label: '1 час' },
  { value: '21600', label: '6 часов' },
  { value: '43200', label: '12 часов' },
  { value: '86400', label: '24 часа' }
]

const { RangePicker } = DatePicker

const lines = [{ label: 'График скорость проходки-интервал', yAccessorName: "intervalDepthProgress", xAccessorName: "intervalStartDate", color: '#00f' }]

export function AnalysisDepthToInterval() {
  let { id } = useParams()
  const [depthToIntervalData, setDepthToIntervalData] = useState([])
  const [loader, setLoader] = useState(false)
  const [chartInterval, setChartInterval] = useState(600)

  const children = timePeriodCollection.map((line) => <Option key={line.value}>{line.label}</Option>)

  const handleReceiveDepthToIntervalData = (data) => {
    setDepthToIntervalData(data)
  }

  useEffect(() => {
    setLoader(true)
    AnalyticsService.getWellDepthToInterval(id, chartInterval)
      .then(handleReceiveDepthToIntervalData)
      .catch(error => {
        notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${id}"`,
          'warning')
        console.log(error)
      })
      .finally(setLoader(false))
  }, [id, chartInterval])

  return (
    <>
      <Select defaultValue="600" onChange={setChartInterval}>
        {children}
      </Select>
      <ChartDepthToInterval
        data={depthToIntervalData}
        lines={lines}
      />
    </>
  )
}