ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

На странице Наработка добавлен сброс даты и выделение данных при наведении

Browse Source
This commit is contained in:
ts_salikhov 2022-10-12 16:45:34 +04:00
parent 6455be0891
commit 116de6e912
3 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/d3/D3HorizontalPercentChart.tsx
View File

@ -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<ChartOffset>
afterDraw?: (d: d3.Selection<SVGGElement, unknown, null, undefined>) => void
afterDraw?: (d: d3.Selection<d3.BaseType, PercentChartDataType, d3.BaseType, unknown>) => void
}
const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 }
@ -37,7 +37,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
const [divRef, { width, height }] = useElementSize()
const rootRef = useRef<SVGGElement | null>(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<D3HorizontalChartProps>(({
const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
root().selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
root().selectChild<SVGGElement>('.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<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
root().selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
}, [root, width, height, yScale])
useEffect(() => {
@ -66,10 +66,10 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
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<SVGGElement>('.data')
root().selectChild<SVGGElement>('.data')
.selectAll<SVGRectElement, PercentChartDataType>('rect')
.attr('fill', (d) => d.color || 'black')
.attr('y', (d) => yScale(d.name) ?? null)
@ -77,14 +77,14 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
.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 (
<LoaderPortal show={false} style={{ width: givenWidth, height: givenHeight }}>
<div ref={divRef} style={{ width: '100%', height: '100%' }}>
<svg id={'d3-horizontal-chart'} width={'100%'} height={'100%'}>
<svg width={'100%'} height={'100%'}>
<g ref={rootRef} transform={`translate(${offset.left}, ${offset.top})`}>
<g className={'axis x top'}></g>
<g className={'axis x bottom'} transform={`translate(0, ${inlineHeight})`}></g>

30
src/pages/Telemetry/OperationTime/index.jsx
View File

@ -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) => (
<div className={'table_color'} style={{ 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(() => {

5
src/styles/operation_time.less
View File

@ -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
}