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-13 09:44:59 +04:00
parent 83666424ad
commit a574b78cdb
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,8 +37,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
const [divRef, { width, height }] = useElementSize() const [divRef, { width, height }] = useElementSize()
const rootRef = useRef<SVGGElement | null>(null) const rootRef = useRef<SVGGElement | null>(null)
const selectedRootRef = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current]) const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
const root = selectedRootRef()
const inlineWidth = useMemo(() => width - offset.left - offset.right, [width]) const inlineWidth = useMemo(() => width - offset.left - offset.right, [width])
const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height]) const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height])
@ -47,31 +46,34 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
const yScale = useMemo(() => d3.scaleBand().domain(data.map((d) => d.name)).range([0, inlineHeight]).padding(0.25), [data, inlineHeight]) const yScale = useMemo(() => d3.scaleBand().domain(data.map((d) => d.name)).range([0, inlineHeight]).padding(0.25), [data, inlineHeight])
useEffect(() => { /// Отрисовываем оси X сверху и снизу useEffect(() => { /// Отрисовываем оси X сверху и снизу
if (width < 100 || height < 100 || !root) return const r = root()
if (width < 100 || height < 100 || !r) return
const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight) const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4) const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom) r.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop) r.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
.selectAll('.tick') .selectAll('.tick')
.attr('class', 'tick grid-line') .attr('class', 'tick grid-line')
}, [root, width, height, xScale, inlineHeight]) }, [root, width, height, xScale, inlineHeight])
useEffect(() => { /// Отрисовываем ось Y слева useEffect(() => { /// Отрисовываем ось Y слева
if (width < 100 || height < 100 || !root) return const r = root()
root.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale)) if (width < 100 || height < 100 || !r) return
r.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
}, [root, width, height, yScale]) }, [root, width, height, yScale])
useEffect(() => { useEffect(() => {
if (width < 100 || height < 100 || !root) return const r = root()
if (width < 100 || height < 100 || !r) return
const delay = d3.transition().duration(500).ease(d3.easeLinear) const delay = d3.transition().duration(500).ease(d3.easeLinear)
const rects = root.selectChild('.data').selectAll('rect').data(data) const rects = r.selectChild('.data').selectAll('rect').data(data)
rects.enter().append('rect') rects.enter().append('rect')
rects.exit().remove() rects.exit().remove()
const selectedRects = root.selectChild<SVGGElement>('.data') const selectedRects = r.selectChild<SVGGElement>('.data')
.selectAll<SVGRectElement, PercentChartDataType>('rect') .selectAll<SVGRectElement, PercentChartDataType>('rect')
selectedRects.attr('fill', (d) => d.color || 'black') selectedRects.attr('fill', (d) => d.color || 'black')