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

Исправлен зум для графика D3Chart

Browse Source
This commit is contained in:
ts_salikhov 2022-11-01 13:54:45 +04:00
parent f481a212c5
commit 17c388c0b7
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/d3/D3Chart.tsx
View File

@ -93,6 +93,11 @@ export type D3ChartProps<DataType extends BaseDataType> = React.DetailedHTMLProp
/** Параметры блока легенды */ /** Параметры блока легенды */
legend?: BasePluginSettings & D3LegendSettings legend?: BasePluginSettings & D3LegendSettings
} }
/** Добавление зума графику */
zoom?: {
/** Массив коэффициентов приближения k0 - минимальный k1 - максимальный коэффициент */
scaleExtent: [k0: number, k1: number]
}
} }
const getDefaultXAxisConfig = <DataType extends BaseDataType>(): ChartAxis<DataType> => ({ const getDefaultXAxisConfig = <DataType extends BaseDataType>(): ChartAxis<DataType> => ({
@ -115,6 +120,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
ticks, ticks,
plugins, plugins,
dash, dash,
zoom,
...other ...other
}: D3ChartProps<DataType>) => { }: D3ChartProps<DataType>) => {
const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig) const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig)
@ -360,17 +366,18 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
}, [redrawCharts]) }, [redrawCharts])
useEffect(() => { useEffect(() => {
if (!svgRef) return if (!svgRef || !zoom) return
const zoom = d3.zoom<SVGSVGElement, unknown>() const zoomBehavior = d3.zoom<SVGSVGElement, unknown>()
.scaleExtent([1, 5]) .scaleExtent(zoom.scaleExtent)
.translateExtent([[0, 0], [width, height]]) .translateExtent([[0, 0], [width - offset.left - offset.right, height - offset.top - offset.bottom]])
.extent([[0, 0], [width - offset.left - offset.right, height - offset.top - offset.bottom]])
.on('zoom', () => { .on('zoom', () => {
const zoomState = d3.zoomTransform(svgRef) const zoomState = d3.zoomTransform(svgRef)
setCurrentZoomState(zoomState) setCurrentZoomState(zoomState)
}) })
d3.select(svgRef).call(zoom) d3.select(svgRef).call(zoomBehavior)
}, [svgRef, width, height, offset]) }, [svgRef, zoom, width, height, offset])
return ( return (
<LoaderPortal <LoaderPortal
@ -391,7 +398,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
<g ref={setXAxisRef} className={'axis x'} transform={`translate(${offset.left}, ${height - offset.bottom})`} /> <g ref={setXAxisRef} className={'axis x'} transform={`translate(${offset.left}, ${height - offset.bottom})`} />
<g ref={setYAxisRef} className={'axis y'} transform={`translate(${offset.left}, ${offset.top})`} /> <g ref={setYAxisRef} className={'axis y'} transform={`translate(${offset.left}, ${offset.top})`} />
<defs> <defs>
<clipPath id={'clipPath'}> <clipPath id={'clipZoomData'}>
<rect <rect
x={0} x={0}
y={0} y={0}
@ -400,7 +407,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
/> />
</clipPath> </clipPath>
</defs> </defs>
<g clipPath={'url(#clipPath)'} ref={setChartAreaRef} className={'chart-area'} transform={`translate(${offset.left}, ${offset.top})`}> <g clipPath={'url(#clipZoomData)'} ref={setChartAreaRef} className={'chart-area'} transform={`translate(${offset.left}, ${offset.top})`}>
<rect <rect
width={Math.max(width - offset.left - offset.right, 0)} width={Math.max(width - offset.left - offset.right, 0)}
height={Math.max(height - offset.top - offset.bottom, 0)} height={Math.max(height - offset.top - offset.bottom, 0)}

5
src/pages/Well/Telemetry/Operations/OperationsChart.jsx
View File

@ -100,6 +100,10 @@ export const OperationsChart = memo(({ data, yDomain, height, category, onDomain
}, },
}), [category]) }), [category])
const zoom = useMemo(() => ({
scaleExtent: [1, 5]
}), [])
return ( return (
<D3Chart <D3Chart
xAxis={xAxis} xAxis={xAxis}
@ -109,6 +113,7 @@ export const OperationsChart = memo(({ data, yDomain, height, category, onDomain
height={height} height={height}
plugins={plugins} plugins={plugins}
ticks={ticks} ticks={ticks}
zoom={zoom}
/> />
) )
}) })