From 116de6e912f6395014e6091c0c79285660f432bd Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Wed, 12 Oct 2022 16:45:34 +0400 Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82=D1=8B=20?= =?UTF-8?q?=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF=D1=80=D0=B8=20?= =?UTF-8?q?=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/D3HorizontalPercentChart.tsx | 20 ++++++------- src/pages/Telemetry/OperationTime/index.jsx | 30 +++++++------------ src/styles/operation_time.less | 5 ++++ 3 files changed, 25 insertions(+), 30 deletions(-) diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx index 18cc6f8..224fa52 100644 --- a/src/components/d3/D3HorizontalPercentChart.tsx +++ b/src/components/d3/D3HorizontalPercentChart.tsx @@ -1,4 +1,4 @@ -import { memo, useEffect, useMemo, useRef } from 'react' +import { memo, useCallback, useEffect, useMemo, useRef } from 'react' import { useElementSize } from 'usehooks-ts' import { Property } from 'csstype' import * as d3 from 'd3' @@ -20,7 +20,7 @@ export type D3HorizontalChartProps = { height?: Property.Height data: PercentChartDataType[] offset?: Partial - afterDraw?: (d: d3.Selection) => void + afterDraw?: (d: d3.Selection) => void } const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 } @@ -37,7 +37,7 @@ export const D3HorizontalPercentChart = memo(({ const [divRef, { width, height }] = useElementSize() const rootRef = useRef(null) - const root = useMemo(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current]) + const root = useCallback(() => d3.select(rootRef.current), [rootRef.current]) const inlineWidth = useMemo(() => width - offset.left - offset.right, [width]) const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height]) @@ -50,15 +50,15 @@ export const D3HorizontalPercentChart = memo(({ const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight) const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4) - root.selectChild('.axis.x.bottom').call(xAxisBottom) - root.selectChild('.axis.x.top').call(xAxisTop) + root().selectChild('.axis.x.bottom').call(xAxisBottom) + root().selectChild('.axis.x.top').call(xAxisTop) .selectAll('.tick') .attr('class', 'tick grid-line') }, [root, width, height, xScale, inlineHeight]) useEffect(() => { /// Отрисовываем ось Y слева if (width < 100 || height < 100 || !root) return - root.selectChild('.axis.y.left').call(d3.axisLeft(yScale)) + root().selectChild('.axis.y.left').call(d3.axisLeft(yScale)) }, [root, width, height, yScale]) useEffect(() => { @@ -66,10 +66,10 @@ export const D3HorizontalPercentChart = memo(({ const delay = d3.transition().duration(500).ease(d3.easeLinear) - const rects = root.selectChild('.data').selectAll('rect').data(data) + const rects = root().selectChild('.data').selectAll('rect').data(data) rects.enter().append('rect') rects.exit().remove() - root.selectChild('.data') + root().selectChild('.data') .selectAll('rect') .attr('fill', (d) => d.color || 'black') .attr('y', (d) => yScale(d.name) ?? null) @@ -77,14 +77,14 @@ export const D3HorizontalPercentChart = memo(({ .transition(delay) .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0) - afterDraw?.(root) + afterDraw?.(root().selectChild('.data').selectAll('rect')) }, [data, width, height, root, yScale, xScale, afterDraw]) return (
- + diff --git a/src/pages/Telemetry/OperationTime/index.jsx b/src/pages/Telemetry/OperationTime/index.jsx index a29d7c5..9e55b25 100644 --- a/src/pages/Telemetry/OperationTime/index.jsx +++ b/src/pages/Telemetry/OperationTime/index.jsx @@ -21,6 +21,8 @@ const subsystemColors = [ '#ecf0f1', '#bdc3c7', '#95a5a6', '#7f8c8d', ] +const tableStyle = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600', transition: 'all 0.2s ease-out' } + const tableColumns = [ makeColumn('Цвет', 'color', { width: 60, render: (backgroundColor) => (
@@ -62,37 +64,25 @@ export const OperationTime = memo(() => { const onRow = useCallback((item) => { const out = { - onMouseEnter: () => { - setSelectedSubsystem(item.subsystemName) - }, - onMouseLeave: () => { - setSelectedSubsystem(null) - }, + onMouseEnter: () => setSelectedSubsystem(item.subsystemName), + onMouseLeave: () => setSelectedSubsystem(null), } if (item.subsystemName === selectedSubsystem) { - out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600', transition: 'all 0.2s ease-out' } + out.style = tableStyle } return out }, [selectedSubsystem]) - const onMouseOver = useCallback((_, d) => { - setSelectedSubsystem(d.name) - }, []) + const onMouseOver = useCallback((_, d) => setSelectedSubsystem(d.name), []) - const onMouseOut = useCallback(() => { - setSelectedSubsystem(null) - }, []) + const onMouseOut = useCallback(() => setSelectedSubsystem(null), []) - const afterDraw = useCallback(function(selection) { - selection.selectAll('rect') - .on('mouseover', onMouseOver) + const afterDraw = useCallback(selection => { + selection.on('mouseover', onMouseOver) .on('mouseout', onMouseOut) - .transition(200) - .style('stroke-width', d => d.name === selectedSubsystem ? '2' : '0') - .style('stroke', d => d.name === selectedSubsystem ? 'black' : '') - .style('stroke-opacity', '0.4') + .classed('selected_graph_column', d => d.name === selectedSubsystem) }, [onMouseOver, onMouseOut, selectedSubsystem]) useEffect(() => { diff --git a/src/styles/operation_time.less b/src/styles/operation_time.less index d35e54f..851c178 100644 --- a/src/styles/operation_time.less +++ b/src/styles/operation_time.less @@ -1,3 +1,8 @@ .table_color { padding: 5px 0; } + +.selected_graph_column { + filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .6)); + transition: all 0.2s ease-out +} \ No newline at end of file