From 48ee08acab4427eb11cfd2f907cf3ff0761ab290 Mon Sep 17 00:00:00 2001 From: goodmice Date: Mon, 15 Aug 2022 11:58:32 +0500 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D1=82=D1=83=D0=BB=D1=82=D0=B8=D0=BF=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3MonitoringCharts.tsx | 22 ++++----- .../d3/monitoring/D3MonitoringLimitChart.tsx | 47 +++++++++++++++++-- src/styles/d3.less | 10 +++- 3 files changed, 63 insertions(+), 16 deletions(-) diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index d93633a..57dcde6 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -78,12 +78,11 @@ const defaultOffsets: ChartOffset = { } const defaultRegulators: TelemetryRegulators = { - 1: { color: '#007070', label: 'Расход' }, - 2: { color: '#59B359', label: 'Скорость блока' }, - 3: { color: '#FF0000', label: 'Давление' }, - 4: { color: '#0000CC', label: 'Осевая нагрузка' }, - 5: { color: '#00B3B3', label: 'Вес на крюке' }, - 6: { color: '#990099', label: 'Момент на роторе' }, + 1: { color: '#59B359', label: 'Скорость блока' }, + 2: { color: '#FF0000', label: 'Давление' }, + 3: { color: '#0000CC', label: 'Осевая нагрузка' }, + 4: { color: '#990099', label: 'Момент на роторе' }, + 5: { color: '#007070', label: 'Расход' }, } const getDefaultYAxisConfig = (): ChartAxis => ({ @@ -321,11 +320,12 @@ const _D3MonitoringCharts = >({ let sets = chartName ? await UserSettingsService.get(chartName) : null if (typeof sets === 'string') sets = JSON.parse(sets) - const { settings, regulators } = sets - if (regulators) - setRegulators(regulators) - if (Array.isArray(settings)) { - setDatasets(settings) + if (sets && Array.isArray(sets.settings)) { + if (sets.regulators) + setRegulators(sets.regulators) + if (Array.isArray(sets.settings)) { + setDatasets(sets.settings) + } } else if (Array.isArray(datasetGroups)) { setDatasets(datasetGroups) if (chartName) { diff --git a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx index 203041d..9017b05 100644 --- a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx +++ b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx @@ -1,18 +1,24 @@ import { memo, useEffect, useMemo, useState } from 'react' import * as d3 from 'd3' +import { Grid, GridItem } from '@components/Grid' import { TelemetryDataSaubDto } from '@api' +import { formatDate } from '@utils' type LimitChartData = { id: number dateStart: Date dateEnd: Date + depthStart: number | null + depthEnd: number | null } type LimitChartDataRaw = { id?: number dateStart?: string dateEnd?: string + depthStart?: number | null + depthEnd?: number | null } export type TelemetryRegulators = Record(data: DataType[]) if (last.id === row.idFeedRegulator) { if (!row.idFeedRegulator) return out last.dateEnd = row.dateTime + last.depthEnd = row.wellDepth } else { - const n: LimitChartDataRaw = {} + let n: LimitChartDataRaw = {} if (row.idFeedRegulator) { - n.id = row.idFeedRegulator - n.dateStart = row.dateTime - n.dateEnd = row.dateTime + n = { + id: row.idFeedRegulator, + dateStart: row.dateTime, + dateEnd: row.dateTime, + depthStart: row.wellDepth, + depthEnd: row.wellDepth, + } } out.push(n) } @@ -47,6 +58,8 @@ const calcualteData = (data: DataType[]) id: row.id, dateStart: new Date(row.dateStart), dateEnd: new Date(row.dateEnd), + depthStart: row.depthStart, + depthEnd: row.depthEnd, })) } @@ -60,6 +73,9 @@ export type D3MonitoringLimitChartProps = { top: number } +const tooltipWidth = 300 +const tooltipHeight = 130 + const _D3MonitoringLimitChart = ({ yAxis, data: chartData, @@ -70,6 +86,8 @@ const _D3MonitoringLimitChart = ({ regulators }: D3MonitoringLimitChartProps) => { const [ref, setRef] = useState(null) + const [tooltipRef, setTooltipRef] = useState(null) + const [selected, setSelected] = useState>({}) const data = useMemo(() => calcualteData(chartData), [chartData]) @@ -85,12 +103,33 @@ const _D3MonitoringLimitChart = ({ .attr('height', (d) => Math.max(yAxis(d.dateEnd) - yAxis(d.dateStart), 1)) .attr('y', (d) => yAxis(d.dateStart)) .attr('fill', (d) => regulators[d.id].color) + .on('mouseover', (_, d) => { + const y = (yAxis(d.dateStart) + yAxis(d.dateEnd) - tooltipHeight) / 2 + setSelected({ ...d, y, x: -tooltipWidth, visible: true }) + }) + .on('mouseout', (_, d) => setSelected((pre) => ({ ...pre, visible: false }))) }, [yAxis, data, ref, width]) return ( + +
+ + Регулятор: + {selected?.id ? regulators[selected.id].label : '---'} + Начало: + {formatDate(selected?.dateStart) ?? '---'} + {selected?.depthStart?.toFixed(2) ?? '---'} + м. + Конец: + {formatDate(selected?.dateEnd) ?? '---'} + {selected?.depthEnd?.toFixed(2) ?? '---'} + м. + +
+ ) } diff --git a/src/styles/d3.less b/src/styles/d3.less index be70bbe..6ec1bb0 100644 --- a/src/styles/d3.less +++ b/src/styles/d3.less @@ -8,7 +8,7 @@ @arrow-size: 8px; width: 100%; - height: 100% - @arrow-size; + height: 100%; font-size: 13px; color: @color; @@ -30,6 +30,7 @@ &.top { margin-top: @arrow-size; + height: 100% - @arrow-size; &::after { border-bottom-color: @bg-color; @@ -42,6 +43,7 @@ &.bottom { margin-bottom: @arrow-size; + height: 100% - @arrow-size; &::after { border-top-color: @bg-color; @@ -53,8 +55,11 @@ &.left { margin-left: @arrow-size; + width: 100% - @arrow-size; + &::after { border-right-color: @bg-color; + margin-top: -@arrow-size; top: 50%; right: 100%; } @@ -62,8 +67,11 @@ &.right { margin-right: @arrow-size; + width: 100% - @arrow-size; + &::after { border-left-color: @bg-color; + margin-top: -@arrow-size; top: 50%; left: 100%; }