From 367b63ae50a7d04669d87fc5103d910d5ccb7974 Mon Sep 17 00:00:00 2001 From: goodmice Date: Sat, 30 Jul 2022 19:00:42 +0500 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=80=D0=B0=D0=B1?= =?UTF-8?q?=D0=BE=D1=82=D0=B0=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80?= =?UTF-8?q?=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=82=D0=BE=D1=87=D0=B5?= =?UTF-8?q?=D0=BA-=D0=BB=D0=B8=D0=BD=D0=B8=D0=B8=20=D0=BD=D0=B0=20=D0=B3?= =?UTF-8?q?=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/d3/plugins/base.tsx | 5 ++- src/components/d3/renders/points.ts | 41 +++++++++++-------- src/components/d3/types.ts | 2 +- .../Telemetry/Operations/OperationsChart.jsx | 20 ++++++--- src/pages/WellOperations/Tvd/index.jsx | 2 +- 5 files changed, 44 insertions(+), 26 deletions(-) diff --git a/src/components/d3/plugins/base.tsx b/src/components/d3/plugins/base.tsx index 2a98302..5095c86 100644 --- a/src/components/d3/plugins/base.tsx +++ b/src/components/d3/plugins/base.tsx @@ -102,12 +102,13 @@ export const getTouchedElements = ( case 'line': case 'point': { const tag = chart.point?.shape ?? 'circle' - nodes = chart().selectAll(tag) + nodes = chart().selectAll(['hline', 'vline'].includes(tag) ? 'line' : tag) switch (tag) { case 'circle': nodes = nodes.filter(makeIsCircleTouched(x, y, chart.tooltip?.limit ?? limit, type)) break - case 'line': + case 'hline': + case 'vline': nodes = nodes.filter(makeIsLineTouched(x, y, chart.tooltip?.limit ?? limit, type)) break } diff --git a/src/components/d3/renders/points.ts b/src/components/d3/renders/points.ts index 68f09e8..674ac75 100644 --- a/src/components/d3/renders/points.ts +++ b/src/components/d3/renders/points.ts @@ -1,5 +1,15 @@ import { ChartRegistry, PointChartDataset } from '@components/d3/types' +const defaultConfig: Required> = { + radius: 3, + shape: 'circle', + strokeWidth: 0, + strokeColor: 'currentColor', + strokeOpacity: 1, + fillColor: 'currentColor', + fillOpacity: 1, +} + export const renderPoint = >( xAxis: (value: any) => number, yAxis: (value: any) => number, @@ -7,20 +17,11 @@ export const renderPoint = >( data: DataType[], embeded: boolean = false, ): DataType[] => { - let config: Required> = { - radius: 3, - shape: 'circle', - strokeWidth: 0, - strokeColor: 'currentColor', - strokeOpacity: 1, - fillColor: 'currentColor', - fillOpacity: 1, - } - + let config: Required> if (embeded) - config = { ...config, ...chart.point } + config = { ...defaultConfig, ...chart.point } else if (chart.type === 'point') - config = { ...config, ...chart } + config = { ...defaultConfig, ...chart } else return data const getPointsRoot = (): d3.Selection => { @@ -42,15 +43,17 @@ export const renderPoint = >( .attr('stroke', config.strokeColor) .attr('stroke-opacity', config.strokeOpacity) + const shape = ['hline', 'vline'].includes(config.shape) ? 'line' : config.shape + const currentPoints = getPointsRoot() - .selectAll(config.shape) + .selectAll(shape) .data(data.filter(chart.y)) currentPoints.exit().remove() - currentPoints.enter().append(config.shape) + currentPoints.enter().append(shape) const newPoints = getPointsRoot() - .selectAll(config.shape) + .selectAll(shape) .transition() .duration(chart.animDurationMs ?? 0) @@ -61,7 +64,13 @@ export const renderPoint = >( .attr('cx', (d) => xAxis(chart.x(d))) .attr('cy', (d) => yAxis(chart.y(d))) break - case 'line': + case 'hline': + newPoints.attr('x1', (d) => xAxis(chart.x(d)) - config.radius) + .attr('x2', (d) => xAxis(chart.x(d)) + config.radius) + .attr('y1', (d) => yAxis(chart.y(d))) + .attr('y2', (d) => yAxis(chart.y(d))) + break + case 'vline': newPoints.attr('x1', (d) => xAxis(chart.x(d))) .attr('x2', (d) => xAxis(chart.x(d))) .attr('y1', (d) => yAxis(chart.y(d)) - config.radius) diff --git a/src/components/d3/types.ts b/src/components/d3/types.ts index 228e107..6094803 100644 --- a/src/components/d3/types.ts +++ b/src/components/d3/types.ts @@ -21,7 +21,7 @@ export type PointChartDataset = { /** Радиус точек */ radius?: number /** Форма точек */ - shape?: 'circle' | 'line' + shape?: 'circle' | 'hline' | 'vline' /** Цвет обводки точек */ strokeColor?: Property.Color /** Толщина обводки */ diff --git a/src/pages/Telemetry/Operations/OperationsChart.jsx b/src/pages/Telemetry/Operations/OperationsChart.jsx index a04d0ba..776bc00 100644 --- a/src/pages/Telemetry/Operations/OperationsChart.jsx +++ b/src/pages/Telemetry/Operations/OperationsChart.jsx @@ -55,11 +55,22 @@ const chartDatasets = [{ }, optimization: false, point: { - radius: 2, - strokeColor: 'none', + radius: 5, + strokeWidth: 1.5, + shape: 'vline', fillColor: 'currentColor', }, nullValues: 'gap', +}, { + key: 'target_dash', + type: 'needle', + width: 2, + color: 'black', + opacity: 0.075, + yAxis: { + type: 'linear', + accessor: (row) => row.operationValue?.targetValue ?? null, + } }] const xAxis = { @@ -75,10 +86,7 @@ const ticks = { } export const OperationsChart = memo(({ data, yDomain, height, category, onDomainChanged }) => { - const domain = useMemo(() => ({ - y: { min: 0, max: yDomain }, - // x: { min: new Date('2021-11-04 03:57'), max: new Date('2022-06-17 13:16') } - }), [yDomain]) + const domain = useMemo(() => ({ y: { min: 0, max: yDomain } }), [yDomain]) const plugins = useMemo(() => ({ menu: { enabled: false }, diff --git a/src/pages/WellOperations/Tvd/index.jsx b/src/pages/WellOperations/Tvd/index.jsx index 0451af3..08de1b2 100755 --- a/src/pages/WellOperations/Tvd/index.jsx +++ b/src/pages/WellOperations/Tvd/index.jsx @@ -125,7 +125,7 @@ const makeDataset = (key, label, color, width, radius, dash) => ({ strokeColor: 'currentColor', strokeOpacity: 0.7, fillOpacity: 0.1, - shape: 'line', + shape: 'vline', strokeWidth: 1.5, radius },