|
|
|
@ -1,8 +1,8 @@ |
|
|
|
import { Axis, Chart, Geom, Tooltip } from 'bizcharts'; |
|
|
|
import React, { Component } from 'react'; |
|
|
|
import React, { useCallback, useEffect, useRef, useState } from 'react'; |
|
|
|
import Debounce from 'lodash.debounce'; |
|
|
|
import autoHeight from '../autoHeight'; |
|
|
|
import useStyles from '../index.style'; |
|
|
|
|
|
|
|
export type BarProps = { |
|
|
|
title: React.ReactNode; |
|
|
|
color?: string; |
|
|
|
@ -16,123 +16,107 @@ export type BarProps = { |
|
|
|
autoLabel?: boolean; |
|
|
|
style?: React.CSSProperties; |
|
|
|
}; |
|
|
|
class Bar extends Component< |
|
|
|
BarProps, |
|
|
|
{ |
|
|
|
autoHideXLabels: boolean; |
|
|
|
} |
|
|
|
> { |
|
|
|
state = { |
|
|
|
autoHideXLabels: false, |
|
|
|
}; |
|
|
|
root: HTMLDivElement | undefined = undefined; |
|
|
|
node: HTMLDivElement | undefined = undefined; |
|
|
|
resize = Debounce(() => { |
|
|
|
if (!this.node || !this.node.parentNode) { |
|
|
|
return; |
|
|
|
} |
|
|
|
const canvasWidth = (this.node.parentNode as HTMLDivElement).clientWidth; |
|
|
|
const { data = [], autoLabel = true } = this.props; |
|
|
|
if (!autoLabel) { |
|
|
|
return; |
|
|
|
} |
|
|
|
const minWidth = data.length * 30; |
|
|
|
const { autoHideXLabels } = this.state; |
|
|
|
if (canvasWidth <= minWidth) { |
|
|
|
if (!autoHideXLabels) { |
|
|
|
this.setState({ |
|
|
|
autoHideXLabels: true, |
|
|
|
}); |
|
|
|
const Bar: React.FC<BarProps> = ({ |
|
|
|
height = 1, |
|
|
|
title, |
|
|
|
forceFit = true, |
|
|
|
data, |
|
|
|
color = 'rgba(24, 144, 255, 0.85)', |
|
|
|
padding, |
|
|
|
autoLabel = true, |
|
|
|
}) => { |
|
|
|
const { styles } = useStyles(); |
|
|
|
const [autoHideXLabels, setAutoHideXLabels] = useState(false); |
|
|
|
const rootRef = useRef<HTMLDivElement | null>(null); |
|
|
|
const nodeRef = useRef<HTMLDivElement | null>(null); |
|
|
|
|
|
|
|
const resize = useCallback( |
|
|
|
Debounce(() => { |
|
|
|
if (!nodeRef.current || !nodeRef.current.parentNode) { |
|
|
|
return; |
|
|
|
} |
|
|
|
const canvasWidth = nodeRef.current.parentNode?.clientWidth || 0; |
|
|
|
if (!autoLabel) { |
|
|
|
return; |
|
|
|
} |
|
|
|
} else if (autoHideXLabels) { |
|
|
|
this.setState({ |
|
|
|
autoHideXLabels: false, |
|
|
|
}); |
|
|
|
} |
|
|
|
}, 500); |
|
|
|
componentDidMount() { |
|
|
|
window.addEventListener('resize', this.resize, { |
|
|
|
const minWidth = data?.length * 30; |
|
|
|
if (canvasWidth <= minWidth) { |
|
|
|
if (!autoHideXLabels) { |
|
|
|
setAutoHideXLabels(true); |
|
|
|
} |
|
|
|
} else if (autoHideXLabels) { |
|
|
|
setAutoHideXLabels(false); |
|
|
|
} |
|
|
|
}, 500), |
|
|
|
[autoHideXLabels, autoLabel, data?.length], |
|
|
|
); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
window.addEventListener('resize', resize, { |
|
|
|
passive: true, |
|
|
|
}); |
|
|
|
} |
|
|
|
componentWillUnmount() { |
|
|
|
window.removeEventListener('resize', this.resize); |
|
|
|
} |
|
|
|
handleRoot = (n: HTMLDivElement) => { |
|
|
|
this.root = n; |
|
|
|
}; |
|
|
|
handleRef = (n: HTMLDivElement) => { |
|
|
|
this.node = n; |
|
|
|
}; |
|
|
|
render() { |
|
|
|
const { |
|
|
|
height = 1, |
|
|
|
title, |
|
|
|
forceFit = true, |
|
|
|
data, |
|
|
|
color = 'rgba(24, 144, 255, 0.85)', |
|
|
|
padding, |
|
|
|
} = this.props; |
|
|
|
const { autoHideXLabels } = this.state; |
|
|
|
const scale = { |
|
|
|
x: { |
|
|
|
type: 'cat', |
|
|
|
}, |
|
|
|
y: { |
|
|
|
min: 0, |
|
|
|
}, |
|
|
|
return () => { |
|
|
|
window.removeEventListener('resize', resize); |
|
|
|
}; |
|
|
|
const tooltip: [ |
|
|
|
string, |
|
|
|
(...args: any[]) => { |
|
|
|
name?: string; |
|
|
|
value: string; |
|
|
|
}, |
|
|
|
] = [ |
|
|
|
'x*y', |
|
|
|
(x: string, y: string) => ({ |
|
|
|
name: x, |
|
|
|
value: y, |
|
|
|
}), |
|
|
|
]; |
|
|
|
return ( |
|
|
|
<div |
|
|
|
className={styles.chart} |
|
|
|
style={{ |
|
|
|
height, |
|
|
|
}} |
|
|
|
ref={this.handleRoot} |
|
|
|
> |
|
|
|
<div ref={this.handleRef}> |
|
|
|
{title && ( |
|
|
|
<h4 |
|
|
|
style={{ |
|
|
|
marginBottom: 20, |
|
|
|
}} |
|
|
|
> |
|
|
|
{title} |
|
|
|
</h4> |
|
|
|
)} |
|
|
|
<Chart |
|
|
|
scale={scale} |
|
|
|
height={title ? height - 41 : height} |
|
|
|
forceFit={forceFit} |
|
|
|
data={data} |
|
|
|
padding={padding || 'auto'} |
|
|
|
}, [resize]); |
|
|
|
|
|
|
|
const handleRoot = useCallback((n: HTMLDivElement) => { |
|
|
|
rootRef.current = n; |
|
|
|
}, []); |
|
|
|
|
|
|
|
const handleRef = useCallback((n: HTMLDivElement) => { |
|
|
|
nodeRef.current = n; |
|
|
|
}, []); |
|
|
|
|
|
|
|
const scale = { |
|
|
|
x: { |
|
|
|
type: 'cat', |
|
|
|
}, |
|
|
|
y: { |
|
|
|
min: 0, |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
const tooltip = [ |
|
|
|
'x*y', |
|
|
|
(x: string, y: string) => ({ |
|
|
|
name: x, |
|
|
|
value: y, |
|
|
|
}), |
|
|
|
]; |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className={styles.chart} style={{ height }} ref={handleRoot}> |
|
|
|
<div ref={handleRef}> |
|
|
|
{title && ( |
|
|
|
<h4 |
|
|
|
style={{ |
|
|
|
marginBottom: 20, |
|
|
|
}} |
|
|
|
> |
|
|
|
<Axis |
|
|
|
name="x" |
|
|
|
title={false} |
|
|
|
label={autoHideXLabels ? undefined : {}} |
|
|
|
tickLine={autoHideXLabels ? undefined : {}} |
|
|
|
/> |
|
|
|
<Axis name="y" min={0} /> |
|
|
|
<Tooltip showTitle={false} crosshairs={false} /> |
|
|
|
<Geom type="interval" position="x*y" color={color} tooltip={tooltip} /> |
|
|
|
</Chart> |
|
|
|
</div> |
|
|
|
{title} |
|
|
|
</h4> |
|
|
|
)} |
|
|
|
<Chart |
|
|
|
scale={scale} |
|
|
|
height={title ? height - 41 : height} |
|
|
|
forceFit={forceFit} |
|
|
|
data={data} |
|
|
|
padding={padding || 'auto'} |
|
|
|
> |
|
|
|
<Axis |
|
|
|
name="x" |
|
|
|
title={false} |
|
|
|
label={autoHideXLabels ? undefined : {}} |
|
|
|
tickLine={autoHideXLabels ? undefined : {}} |
|
|
|
/> |
|
|
|
<Axis name="y" min={0} /> |
|
|
|
<Tooltip showTitle={false} crosshairs={false} /> |
|
|
|
<Geom type="interval" position="x*y" color={color} tooltip={tooltip} /> |
|
|
|
</Chart> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
export default autoHeight()(Bar); |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
export default Bar; |
|
|
|
|
期贤
4 years ago