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
}
/** Добавление зума графику */
zoom?: {
/** Массив коэффициентов приближения k0 - минимальный k1 - максимальный коэффициент */
scaleExtent: [k0: number, k1: number]
}
}
const getDefaultXAxisConfig = <DataType extends BaseDataType>(): ChartAxis<DataType> => ({
@ -115,6 +120,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
ticks,
plugins,
dash,
zoom,
...other
}: D3ChartProps<DataType>) => {
const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig)
@ -360,17 +366,18 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
}, [redrawCharts])
useEffect(() => {
if (!svgRef) return
const zoom = d3.zoom<SVGSVGElement, unknown>()
.scaleExtent([1, 5])
.translateExtent([[0, 0], [width, height]])
if (!svgRef || !zoom) return
const zoomBehavior = d3.zoom<SVGSVGElement, unknown>()
.scaleExtent(zoom.scaleExtent)
.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', () => {
const zoomState = d3.zoomTransform(svgRef)
setCurrentZoomState(zoomState)
})
d3.select(svgRef).call(zoom)
}, [svgRef, width, height, offset])
d3.select(svgRef).call(zoomBehavior)
}, [svgRef, zoom, width, height, offset])
return (
<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={setYAxisRef} className={'axis y'} transform={`translate(${offset.left}, ${offset.top})`} />
<defs>
<clipPath id={'clipPath'}>
<clipPath id={'clipZoomData'}>
<rect
x={0}
y={0}
@ -400,7 +407,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
/>
</clipPath>
</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
width={Math.max(width - offset.left - offset.right, 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])
const zoom = useMemo(() => ({
scaleExtent: [1, 5]
}), [])
return (
<D3Chart
xAxis={xAxis}
@ -109,6 +113,7 @@ export const OperationsChart = memo(({ data, yDomain, height, category, onDomain
height={height}
plugins={plugins}
ticks={ticks}
zoom={zoom}
/>
)
})