diff --git a/src/components/charts/ChartTelemetryDepthToInterval.jsx b/src/components/charts/ChartTelemetryDepthToInterval.jsx index eb12469..cd0f362 100644 --- a/src/components/charts/ChartTelemetryDepthToInterval.jsx +++ b/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) } ] } diff --git a/src/components/charts/ChartTelemetryOperationsSummary.jsx b/src/components/charts/ChartTelemetryOperationsSummary.jsx index 73f86f7..34ae0a4 100644 --- a/src/components/charts/ChartTelemetryOperationsSummary.jsx +++ b/src/components/charts/ChartTelemetryOperationsSummary.jsx @@ -3,16 +3,44 @@ import { Chart, registerables } from 'chart.js'; Chart.register(...registerables); -const defaultOptions = { - responsive: true, - aspectRatio: 2.8 +const transformSecondsToHoursString = (seconds) => { + const hours = Math.floor(seconds / 3600) + const minutes = Math.floor((seconds % 3600) / 60) + const s = seconds - (hours * 3600) - (minutes * 60) + + return hours + ' ч.' + minutes + ' мин.' + s + ' сек.' } -const secondsToTimeString = (seconds) => { - if(seconds < 60) - return seconds + ' сек.' - else if (seconds < 3600) - return Math.floor(3600 / seconds) + ' мин.' + (3600 % seconds).toFixed(2) + ' сек.' +const transformSecondsToTimeString = (seconds) => { + if (seconds === 1) // 1 is default state if null returned (1 is to show chart anyway with 0 sec) + return '0 сек.' + else if(seconds < 60) + 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 }) => { diff --git a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx index 242ff06..f7d3735 100644 --- a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx +++ b/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, diff --git a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx index 56ce1e8..6cc0e7b 100644 --- a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx +++ b/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) => {line.label}) @@ -43,7 +39,7 @@ export default function TelemetryAnalysisDepthToInterval({idWell}) { diff --git a/src/pages/TelemetryAnalysis/index.jsx b/src/pages/TelemetryAnalysis/index.jsx index 7d07a6e..81f9ca7 100644 --- a/src/pages/TelemetryAnalysis/index.jsx +++ b/src/pages/TelemetryAnalysis/index.jsx @@ -26,7 +26,7 @@ export default function TelemetryAnalysis({idWell}) { }> Все операции - + }> Операции-интервал