forked from ddrilling/asb_cloud_front
Исправлена работа компонента D3HorizontalPercentChart
This commit is contained in:
goodmice
parent
2aca41da83
commit
336fe6e0d4
@ -1,149 +0,0 @@
|
||||
import React, { memo, useEffect } from 'react'
|
||||
import * as d3 from 'd3'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { useElementSize } from 'usehooks-ts'
|
||||
|
||||
|
||||
import '@styles/d3.less'
|
||||
|
||||
type DataType = {
|
||||
name: string
|
||||
percent: number
|
||||
}
|
||||
|
||||
type D3HorizontalChartProps = {
|
||||
width?: string
|
||||
height?: string
|
||||
data: DataType[]
|
||||
colors?: string[]
|
||||
}
|
||||
|
||||
const D3HorizontalChart = memo((
|
||||
{
|
||||
width: givenWidth = '100%',
|
||||
height: givenHeight = '100%',
|
||||
data,
|
||||
colors
|
||||
}: D3HorizontalChartProps) => {
|
||||
|
||||
const [rootRef, { width, height }] = useElementSize()
|
||||
|
||||
const margin = { top: 50, right: 100, bottom: 50, left: 100 }
|
||||
|
||||
useEffect(() => {
|
||||
if (width < 100 || height < 100) return
|
||||
const _width = width - margin.left - margin.right
|
||||
const _height = height - margin.top - margin.bottom
|
||||
|
||||
const svg = d3.select('#d3-horizontal-chart')
|
||||
.attr('width', '100%')
|
||||
.attr('height', '100%')
|
||||
.append('g')
|
||||
.attr('transform', `translate(${margin.left},${margin.top})`)
|
||||
|
||||
const percents = ['percents']
|
||||
const names = data.map(d => d.name)
|
||||
|
||||
const stackedData = d3.stack()
|
||||
//@ts-ignore
|
||||
.keys(percents)(data)
|
||||
|
||||
const xMax = 100
|
||||
|
||||
// scales
|
||||
|
||||
const x = d3.scaleLinear()
|
||||
.domain([0, xMax])
|
||||
.range([0, _width])
|
||||
|
||||
const y = d3.scaleBand()
|
||||
.domain(names)
|
||||
.range([0, _height])
|
||||
.padding(0.25)
|
||||
|
||||
// axes
|
||||
|
||||
const xAxisTop = d3.axisTop(x)
|
||||
.tickValues([0, 25, 50, 75, 100])
|
||||
.tickFormat(d => d + '%')
|
||||
|
||||
const xAxisBottom = d3.axisBottom(x)
|
||||
.tickValues([0, 25, 50, 75, 100])
|
||||
.tickFormat(d => d + '%')
|
||||
|
||||
const yAxisLeft = d3.axisLeft(y)
|
||||
|
||||
const gridlines = d3.axisBottom(x)
|
||||
.tickValues([0, 25, 50, 75, 100])
|
||||
.tickFormat(d => '')
|
||||
.tickSize(_height)
|
||||
|
||||
const yAxisRight = d3.axisRight(y)
|
||||
.ticks(0)
|
||||
.tickValues([])
|
||||
.tickFormat(d => '')
|
||||
|
||||
svg.append('g')
|
||||
.attr('transform', `translate(0,0)`)
|
||||
.attr("class", "grid-line")
|
||||
.call(g => g.select('.domain').remove())
|
||||
.call(gridlines)
|
||||
|
||||
svg.append('g')
|
||||
.attr('transform', `translate(0,0)`)
|
||||
.call(xAxisTop)
|
||||
|
||||
svg.append("g")
|
||||
.call(yAxisLeft)
|
||||
|
||||
svg.append('g')
|
||||
.attr('transform', `translate(0,${_height})`)
|
||||
.call(xAxisBottom)
|
||||
|
||||
svg.append('g')
|
||||
.attr('transform', `translate(${_width},0)`)
|
||||
.call(yAxisRight)
|
||||
|
||||
const layers = svg.append('g')
|
||||
.selectAll('g')
|
||||
.data(stackedData)
|
||||
.join('g')
|
||||
|
||||
// transition for bars
|
||||
const duration = 1000
|
||||
const t = d3.transition()
|
||||
.duration(duration)
|
||||
.ease(d3.easeLinear)
|
||||
|
||||
layers.each(function() {
|
||||
d3.select(this)
|
||||
.selectAll('rect')
|
||||
//@ts-ignore
|
||||
.data(d => d)
|
||||
.join('rect')
|
||||
.attr('fill', (d, i) => colors ? colors[i] : 'black')
|
||||
//@ts-ignore
|
||||
.attr('y', d => y(d.data.name))
|
||||
.attr('height', y.bandwidth())
|
||||
//@ts-ignore
|
||||
.transition(t)
|
||||
//@ts-ignore
|
||||
.attr('width', d => x(d.data.percent))
|
||||
})
|
||||
|
||||
return () => {
|
||||
svg.selectAll("g").selectAll("*").remove()
|
||||
}
|
||||
}, [width, height, data])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={false} style={{width: givenWidth, height: givenHeight}}>
|
||||
<div ref={rootRef} style={{width: '100%', height: '100%'}}>
|
||||
<svg id={'d3-horizontal-chart'}></svg>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
)
|
||||
})
|
||||
|
||||
export default D3HorizontalChart
|
||||
95
src/components/d3/D3HorizontalPercentChart.tsx
Normal file
95
src/components/d3/D3HorizontalPercentChart.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import { memo, useEffect, useMemo, useRef } from 'react'
|
||||
import { useElementSize } from 'usehooks-ts'
|
||||
import { Property } from 'csstype'
|
||||
import * as d3 from 'd3'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { ChartOffset } from './types'
|
||||
|
||||
import '@styles/d3.less'
|
||||
import { usePartialProps } from '@asb/utils'
|
||||
|
||||
export type PercentChartDataType = {
|
||||
name: string
|
||||
percent: number
|
||||
color?: Property.Color
|
||||
}
|
||||
|
||||
export type D3HorizontalChartProps = {
|
||||
width?: Property.Width
|
||||
height?: Property.Height
|
||||
data: PercentChartDataType[]
|
||||
offset?: Partial<ChartOffset>
|
||||
}
|
||||
|
||||
const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 }
|
||||
|
||||
export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
|
||||
width: givenWidth = '100%',
|
||||
height: givenHeight = '100%',
|
||||
offset: givenOffset,
|
||||
data,
|
||||
}) => {
|
||||
const offset = usePartialProps<ChartOffset>(givenOffset, defaultOffset)
|
||||
|
||||
const [divRef, { width, height }] = useElementSize()
|
||||
const rootRef = useRef<SVGGElement | null>(null)
|
||||
|
||||
const root = useMemo(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
|
||||
|
||||
const inlineWidth = useMemo(() => width - offset.left - offset.right, [width])
|
||||
const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height])
|
||||
|
||||
const xScale = useMemo(() => d3.scaleLinear().domain([0, 100]).range([0, inlineWidth]), [inlineWidth])
|
||||
const yScale = useMemo(() => d3.scaleBand().domain(data.map((d) => d.name)).range([0, inlineHeight]).padding(0.25), [data, inlineHeight])
|
||||
|
||||
useEffect(() => { /// Отрисовываем оси X сверху и снизу
|
||||
if (width < 100 || height < 100 || !root) return
|
||||
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)
|
||||
.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, width, height, yScale])
|
||||
|
||||
useEffect(() => {
|
||||
if (width < 100 || height < 100 || !root) return
|
||||
|
||||
const delay = d3.transition().duration(500).ease(d3.easeLinear)
|
||||
|
||||
const rects = root.selectChild('.data').selectAll('rect').data(data)
|
||||
rects.enter().append('rect')
|
||||
rects.exit().remove()
|
||||
root.selectChild<SVGGElement>('.data')
|
||||
.selectAll<SVGRectElement, PercentChartDataType>('rect')
|
||||
.attr('fill', (d) => d.color || 'black')
|
||||
.attr('y', (d) => yScale(d.name) ?? null)
|
||||
.attr('height', yScale.bandwidth())
|
||||
.transition(delay)
|
||||
.attr('width', (d) => xScale(d.percent))
|
||||
}, [data, width, height, root, yScale, xScale])
|
||||
|
||||
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%'}>
|
||||
<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>
|
||||
<g className={'data'}></g>
|
||||
<g className={'axis y left'}></g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
)
|
||||
})
|
||||
|
||||
export default D3HorizontalPercentChart
|
||||
Loading…
Reference in New Issue
Block a user