From fc6646eb80b898c95c819f3e628de0d13578e70d Mon Sep 17 00:00:00 2001 From: goodmice Date: Tue, 9 Aug 2022 11:54:06 +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=20tooltip=20=D0=B4=D0=BB=D1=8F=20=D0=B3=D1=80=D0=B0?= =?UTF-8?q?=D1=84=D0=B8=D0=BA=D0=B0=20=D0=BE=D0=BF=D0=B5=D1=80=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D0=B9=20=D0=B2=D1=80=D0=B5=D0=BC=D1=8F-=D0=B4=D0=B5?= =?UTF-8?q?=D0=BD=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Telemetry/Operations/OperationsChart.jsx | 8 ++-- src/pages/Telemetry/Operations/index.jsx | 6 ++- src/pages/WellOperations/Tvd/TLChart.jsx | 46 +++++++++++++++++-- src/styles/d3.less | 20 +++++++- src/styles/tvd.less | 11 +++++ 5 files changed, 82 insertions(+), 9 deletions(-) diff --git a/src/pages/Telemetry/Operations/OperationsChart.jsx b/src/pages/Telemetry/Operations/OperationsChart.jsx index a0e7e82..3a20be2 100644 --- a/src/pages/Telemetry/Operations/OperationsChart.jsx +++ b/src/pages/Telemetry/Operations/OperationsChart.jsx @@ -8,7 +8,7 @@ import '@styles/detected_operations.less' const displayNumber = makeDisplayValue({ fixed: 2 }) -const makeTooltipRender = (category) => ([{ data: [data] }]) => ( +export const makeTooltipRender = (category) => ([{ data: [data] }]) => (
{data.operationCategory?.name} {formatDate(data.dateStart, undefined, 'DD.MM.YYYY')} @@ -21,12 +21,12 @@ const makeTooltipRender = (category) => ([{ data: [data] }]) => ( {displayNumber(data.depthEnd)} м - {category?.name ?? 'Ключ'}: + {category?.keyValueName ?? 'Ключ'}: {displayNumber(data.value)} - {category?.unit ?? '----'} + {category?.keyValueUnits ?? '----'} Цель: {displayNumber(data.operationValue?.targetValue)} - {category?.unit ?? '----'} + {category?.keyValueUnits ?? '----'}
) diff --git a/src/pages/Telemetry/Operations/index.jsx b/src/pages/Telemetry/Operations/index.jsx index 8306be8..b04f835 100644 --- a/src/pages/Telemetry/Operations/index.jsx +++ b/src/pages/Telemetry/Operations/index.jsx @@ -70,7 +70,11 @@ const Operations = memo(() => { invokeWebApiWrapperAsync( async () => { const categories = arrayOrDefault(await DetectedOperationService.getCategories()) - setCategories(categories.map(({ id, name }) => ({ value: id, label: name }))) + setCategories(categories.map((category) => ({ + ...category, + value: category.id, + label: category.name, + }))) }, setIsLoading, 'Не удалось загрзуить категории операций' diff --git a/src/pages/WellOperations/Tvd/TLChart.jsx b/src/pages/WellOperations/Tvd/TLChart.jsx index 7050c87..84b431d 100644 --- a/src/pages/WellOperations/Tvd/TLChart.jsx +++ b/src/pages/WellOperations/Tvd/TLChart.jsx @@ -11,8 +11,13 @@ import { DetectedOperationService } from '@api' import { unique } from '@utils/filters' import { formatDate } from '@utils' +import { makeTooltipRender } from '@pages/Telemetry/Operations/OperationsChart' import { makeGetColor } from '.' +import '@styles/d3.less' +import '@styles/tvd.less' +import '@styles/detected_operations.less' + const defaultOffset = { left: 40, right: 20, top: 20, bottom: 20 } const zeroDate = moment('2000-01-01 00:00:00') @@ -42,10 +47,13 @@ export const TLChart = memo(({ backgroundColor = '#0000', barHeight = 15, offset = defaultOffset, + tooltipSize = { width: 200, height: 220 }, }) => { const [isLoading, setIsLoading] = useState(false) const [svgRef, setSvgRef] = useState() const [data, setData] = useState() + const [selected, setSelected] = useState() + const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 }) const getColor = useMemo(() => makeGetColor(data?.map((row) => row.idCategory).filter(unique)), [data]) @@ -124,22 +132,54 @@ export const TLChart = memo(({ .attr('width', (d) => xAxis(d.endTime) - xAxis(d.startTime)) .attr('height', barHeight) .attr('fill', (d) => getColor(d.idCategory)) + .on('mouseover', (e, data) => { + d3.select(svgRef).select('.chart-area') + .selectAll('rect') + .filter((d) => d.idCategory === data.idCategory) + .attr('stroke-width', '2px') + const rect = e.target.getBoundingClientRect() + setTooltipPos({ x: rect.x, y: rect.y }) + setSelected(data) + }) + .on('mouseout', (e, data) => { + d3.select(svgRef).select('.chart-area') + .selectAll('rect') + .filter((d) => d.idCategory === data.idCategory) + .attr('stroke-width', '0') + setSelected(null) + }) }, [svgRef, xAxis, yAxis, data, getColor]) + const tooltipStyle = useMemo(() => { + return { + ...tooltipSize, + left: tooltipPos.x - tooltipSize.width - 8, + top: tooltipPos.y - tooltipSize.height / 2 + barHeight / 2, + } + }, [tooltipPos, tooltipSize, barHeight]) + return (
- + + {selected && ( +
+
+ {makeTooltipRender(selected.operationCategory)([{ data: [selected] }])} +
+
+ )} {data ? ( - + - + ) : ( diff --git a/src/styles/d3.less b/src/styles/d3.less index 5701d12..be70bbe 100644 --- a/src/styles/d3.less +++ b/src/styles/d3.less @@ -41,7 +41,7 @@ &.bottom { - margin-top: 0; + margin-bottom: @arrow-size; &::after { border-top-color: @bg-color; @@ -50,6 +50,24 @@ margin-left: -@arrow-size; } } + + &.left { + margin-left: @arrow-size; + &::after { + border-right-color: @bg-color; + top: 50%; + right: 100%; + } + } + + &.right { + margin-right: @arrow-size; + &::after { + border-left-color: @bg-color; + top: 50%; + left: 100%; + } + } & .tooltip-content { overflow: hidden; diff --git a/src/styles/tvd.less b/src/styles/tvd.less index 4f61f63..65beb38 100755 --- a/src/styles/tvd.less +++ b/src/styles/tvd.less @@ -86,6 +86,17 @@ justify-content: center; } +.tl-op-tooltip { + position: absolute; + pointer-events: none; +} + +.tl-op-chart { + & .chart-area > rect { + transition: stroke-width .25s ease-in-out; + } +} + .tl-pie { display: flex; flex-direction: column;