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 = >({ return })} + = { + yAxis?: d3.ScaleTime + 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 = { + 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 { + return typeof value.id !== 'undefined' +} + +const calcualteData = (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((row) => ({ + id: row.id, + dateStart: new Date(row.dateStart), + dateEnd: new Date(row.dateEnd), + })) +} + +const _D3MonitoringLimitChart = ({ yAxis, data: chartData, width, height, left, top }: D3MonitoringLimitChartProps) => { + const [ref, setRef] = useState(null) + + const data = useMemo(() => calcualteData(chartData), [chartData]) + + useEffect(() => { + if (!ref || !yAxis) return + const elms = d3.select(ref).selectAll('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 ( + + + + + ) +} + +export const D3MonitoringLimitChart = memo(_D3MonitoringLimitChart) as typeof _D3MonitoringLimitChart + +export default D3MonitoringLimitChart