From 0a18b79416ae565ac06e22ddcfa88d3460ee0aab Mon Sep 17 00:00:00 2001
From: goodmice <hamel2517@gmail.com>
Date: Sun, 14 Aug 2022 15:05:48 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=80=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=BE=D1=82=D1=80=D0=B8=D1=81=D0=BE=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D0=B0=D1=80=D0=B0=D0=BC=D0=B5=D1=82=D1=80=D0=B0=20=D0=BE=D0=B3?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=87=D0=B8=D0=B2=D0=B0=D1=8E=D1=89?=
 =?UTF-8?q?=D0=B5=D0=B3=D0=BE=20=D0=BF=D0=BE=D0=B4=D0=B0=D1=87=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/monitoring/D3MonitoringCharts.tsx      |  8 ++
 .../d3/monitoring/D3MonitoringLimitChart.tsx  | 95 +++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 src/components/d3/monitoring/D3MonitoringLimitChart.tsx

diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx
index 35db3ab..c8c0e29 100644
--- a/src/components/d3/monitoring/D3MonitoringCharts.tsx
+++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx
@@ -573,6 +573,14 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                                     return <line key={`${i}`} x1={x} x2={x} y1={sizes.chartsTop} y2={offset.top + sizes.inlineHeight} />
                                 })}
                             </g>
+                            <D3MonitoringLimitChart
+                                data={data}
+                                yAxis={yAxis}
+                                width={20}
+                                height={sizes.chartsHeight}
+                                left={sizes.inlineWidth + sizes.left}
+                                top={sizes.chartsTop}
+                            />
                             <D3MouseZone width={width} height={height} offset={{ ...offset, top: sizes.chartsTop }}>
                                 <D3HorizontalCursor
                                     {...plugins?.cursor}
diff --git a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
new file mode 100644
index 0000000..aea37d9
--- /dev/null
+++ b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
@@ -0,0 +1,95 @@
+import { memo, useEffect, useMemo, useState } from 'react'
+import * as d3 from 'd3'
+
+import { TelemetryDataSaubDto } from '@api'
+
+export type D3MonitoringLimitChartProps<DataType> = {
+    yAxis?: d3.ScaleTime<number, number, never>
+    data: DataType[]
+    width: number
+    height: number
+    left: number
+    top: number
+}
+
+type LimitChartData = {
+    id: number
+    dateStart: Date
+    dateEnd: Date
+}
+
+type LimitChartDataRaw = {
+    id?: number
+    dateStart?: string
+    dateEnd?: string
+}
+
+const regulators: Record<number, any> = {
+    1: { color: '#007070', label: 'Расход' },
+    2: { color: '#59B359', label: 'Скорость блока' },
+    3: { color: '#FF0000', label: 'Давление' },
+    4: { color: '#0000CC', label: 'Осевая нагрузка' },
+    5: { color: '#00B3B3', label: 'Вес на крюке' },
+    6: { color: '#990099', label: 'Момент на роторе' },
+}
+
+const getLast = (out: LimitChartDataRaw[]) => out.at(-1) as LimitChartDataRaw
+function isDataCorrect(value: LimitChartDataRaw): value is Required<LimitChartDataRaw> {
+    return typeof value.id !== 'undefined'
+}
+
+const calcualteData = <DataType extends TelemetryDataSaubDto>(data: DataType[]) => {
+    const out = data.filter((row) => row.dateTime).reduce((out, row) => {
+        const last = getLast(out)
+        if (last.id === row.idFeedRegulator) {
+            if (!row.idFeedRegulator) return out
+            last.dateEnd = row.dateTime
+        } else {
+            const n: LimitChartDataRaw = {}
+            if (row.idFeedRegulator) {
+                n.id = row.idFeedRegulator
+                n.dateStart = row.dateTime
+                n.dateEnd = row.dateTime
+            }
+            out.push(n)
+        }
+        return out
+    }, [{}] as LimitChartDataRaw[])
+
+    return out.filter(isDataCorrect).map<LimitChartData>((row) => ({
+        id: row.id,
+        dateStart: new Date(row.dateStart),
+        dateEnd: new Date(row.dateEnd),
+    }))
+}
+
+const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({ yAxis, data: chartData, width, height, left, top }: D3MonitoringLimitChartProps<DataType>) => {
+    const [ref, setRef] = useState<SVGGElement | null>(null)
+
+    const data = useMemo(() => calcualteData(chartData), [chartData])
+
+    useEffect(() => {
+        if (!ref || !yAxis) return
+        const elms = d3.select(ref).selectAll<SVGRectElement, unknown>('rect').data(data)
+
+        elms.exit().remove()
+        const newElms = elms.enter().append('rect')
+
+        elms.merge(newElms)
+            .attr('width', width)
+            .attr('height', (d) => Math.max(yAxis(d.dateEnd) - yAxis(d.dateStart), 1))
+            .attr('y', (d) => yAxis(d.dateStart))
+            .attr('fill', (d) => regulators[d.id].color)
+    }, [yAxis, data, ref, width])
+
+    return (
+        <g transform={`translate(${left}, ${top})`} stroke={'#333'} strokeWidth={1} fill={'none'}>
+            <g ref={setRef} strokeWidth={0} />
+            <rect x={0} y={0} width={width} height={height} />
+        </g>
+    )
+}
+
+export const D3MonitoringLimitChart = memo(_D3MonitoringLimitChart) as typeof _D3MonitoringLimitChart
+
+export default D3MonitoringLimitChart