Fixed Telemetry analytics charts' appearance

src/components/charts/ChartTelemetryDepthToInterval.jsx

@@ -19,6 +19,11 @@ const defaultOptions = {
         text: 'Коэффициент скорости'
       }
     }
+  },
+  plugins: {
+    datalabels: {
+      display: false
+    }
   }
 }
 
@@ -26,6 +31,15 @@ export const ChartTelemetryDepthToInterval = ({ depthToIntervalData }) => {
   const chartRef = useRef(null)
   const [chart, setChart] = useState()
 
+  const calculateBarWidth = (dataLength) => {
+    if (dataLength < 3) 
+      return 150
+    else if (dataLength < 16)
+      return 70
+    else
+      return 10
+  }
+
   useEffect(() => {
 
     const xData = depthToIntervalData.map(el => new Date(el.intervalStartDate).toLocaleString())
@@ -37,9 +51,10 @@ export const ChartTelemetryDepthToInterval = ({ depthToIntervalData }) => {
         {
           label: 'Скорость проходки за интервал',
           data: yData,
-          borderColor: '#0A0',
+          borderColor: '#00b300',
+          borderWidth: 2,
           backgroundColor: '#0A0',
-          barThickness: xData.length < 3 ? 150 : 70
+          barThickness: calculateBarWidth(xData.length)
         }
       ]
     }

src/components/charts/ChartTelemetryOperationsSummary.jsx

@@ -3,16 +3,44 @@ import { Chart, registerables } from 'chart.js';
 
 Chart.register(...registerables);
 
-const defaultOptions = {
+const transformSecondsToHoursString = (seconds) => {
-  responsive: true,
+  const hours = Math.floor(seconds / 3600)
-  aspectRatio: 2.8
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const s = seconds - (hours * 3600) - (minutes * 60)
+
+  return hours + ' ч.' + minutes + ' мин.' + s + ' сек.'
 }
 
-const secondsToTimeString = (seconds) => {
+const transformSecondsToTimeString = (seconds) => {
-    if(seconds < 60)
+  if (seconds === 1) // 1 is default state if null returned (1 is to show chart anyway with 0 sec)
-        return seconds + ' сек.'
+    return '0 сек.'
-    else if (seconds < 3600)
+  else if(seconds < 60)
-        return Math.floor(3600 / seconds) + ' мин.' + (3600 % seconds).toFixed(2) + ' сек.'  
+    return seconds + ' сек.'
+  else if (seconds < 3600)
+    return Math.floor(seconds / 60) + ' мин. ' + (0.6 * (seconds % 60)).toFixed() + ' сек.' 
+  else 
+    return transformSecondsToHoursString(seconds)
+}
+
+const defaultOptions = {
+  responsive: true,
+  aspectRatio: 2.8,
+  plugins: {
+    datalabels: {
+      color: '#ffffff',
+      formatter: transformSecondsToTimeString,
+      font: {
+        weight: 'bold'
+      }
+    },
+    tooltip: {
+        callbacks: {
+          label: function(tooltipItem) {
+            return transformSecondsToTimeString(tooltipItem.parsed);
+          },
+        }
+    }
+  }
 }
 
 export const ChartTelemetryOperationsSummary = ({ operationsData }) => {

src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx

@@ -16,9 +16,11 @@ export default function TelemetryAnalysisDepthToDay({idWell}) {
         const depthToDayData = await TelemetryAnalyticsService.getWellDepthToDay(idWell)
 
         const depths = depthToDayData.map(el => ({depth: el.wellDepth, date: el.date}))
+          .sort((a, b) => new Date(a.date) - new Date(b.date))
         setDepthData(depths)
 
         const bitPositions = depthToDayData.map(el => ({depth: el.bitDepth, date: el.date}))
+          .sort((a, b) => new Date(a.date) - new Date(b.date))
         setBitPositionData(bitPositions)
       },
       setLoader, 

src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx

@@ -8,10 +8,6 @@ import LoaderPortal from '../../components/LoaderPortal'
 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 часов' },
@@ -21,7 +17,7 @@ const timePeriodCollection = [
 export default function TelemetryAnalysisDepthToInterval({idWell}) {
   const [depthToIntervalData, setDepthToIntervalData] = useState([])
   const [loader, setLoader] = useState(false)
-  const [chartInterval, setChartInterval] = useState(600)
+  const [chartInterval, setChartInterval] = useState(86400)
 
   const children = timePeriodCollection.map((line) => 
     <Option key={line.value}>{line.label}</Option>)
@@ -43,7 +39,7 @@ export default function TelemetryAnalysisDepthToInterval({idWell}) {
     <LoaderPortal show={loader}>
       <div className='mt-20px'>
         <Select 
-          defaultValue="600" 
+          defaultValue="86400" 
           onChange={setChartInterval}
           className='ml-30px'
         >

src/pages/TelemetryAnalysis/index.jsx

@@ -26,7 +26,7 @@ export default function TelemetryAnalysis({idWell}) {
                 </Menu.Item>
                 <Menu.Item key="operationsSummary" icon={<FolderOutlined />}>
                     <Link to={`${rootPath}/operationsSummary`}>Все операции</Link>
-                </Menu.Item>        
+                </Menu.Item>       
                 <Menu.Item key="operationsToInterval" icon={<FolderOutlined />}>
                     <Link to={`${rootPath}/operationsToInterval`}>Операции-интервал</Link>
                 </Menu.Item>