forked from ddrilling/asb_cloud_front
cleanup
This commit is contained in:
Фролов
parent
7ea9d8a393
commit
39f9f04c20
@ -1,44 +0,0 @@
|
|||||||
import { ChartOperationsToInterval } from './charts/ChartOperationsToInterval'
|
|
||||||
import { useParams } from "react-router-dom"
|
|
||||||
import notify from "../components/notify"
|
|
||||||
import { useState, useEffect } from 'react'
|
|
||||||
import { AnalyticsService } from "../services/api"
|
|
||||||
|
|
||||||
const lines = [
|
|
||||||
{ yAccessorName: "operationName", xAccessorName: "duration" },
|
|
||||||
]
|
|
||||||
|
|
||||||
export function AnalysisOperationsToInterval() {
|
|
||||||
let { id } = useParams()
|
|
||||||
const [operationsToInterval, setOperationsToInterval] = useState([])
|
|
||||||
const [loader, setLoader] = useState(false)
|
|
||||||
|
|
||||||
const handleReceiveOperationsToIntervalData = (data) => {
|
|
||||||
setOperationsToInterval(data[0].operations)
|
|
||||||
console.log(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLoader(true)
|
|
||||||
let intervalHoursTimestamp = 600
|
|
||||||
let workBeginTimestamp = 1
|
|
||||||
|
|
||||||
AnalyticsService.getOperationsToInterval(id, intervalHoursTimestamp, workBeginTimestamp)
|
|
||||||
.then(handleReceiveOperationsToIntervalData)
|
|
||||||
.catch(error => {
|
|
||||||
notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${id}"`,
|
|
||||||
'warning')
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
.finally(setLoader(false))
|
|
||||||
}, [id])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ChartOperationsToInterval
|
|
||||||
data={operationsToInterval}
|
|
||||||
lines={lines}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
import { ChartDepthToIntervalBase } from './ChartOperationsToIntervalBase'
|
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { GetRandomColor, CreateDataset } from './ChartTimeArchive'
|
|
||||||
|
|
||||||
const CreateLabels = () => {
|
|
||||||
let labels = []
|
|
||||||
return labels
|
|
||||||
}
|
|
||||||
|
|
||||||
const CreateData = (lineConfig) => {
|
|
||||||
|
|
||||||
let datasets = {
|
|
||||||
label: lineConfig.label,
|
|
||||||
data: [],
|
|
||||||
backgroundColor: GetRandomColor()
|
|
||||||
}
|
|
||||||
return datasets
|
|
||||||
}
|
|
||||||
|
|
||||||
const labels = ['Первый']
|
|
||||||
const datasets = [
|
|
||||||
{
|
|
||||||
label: 'Dataset 1',
|
|
||||||
data: [123],
|
|
||||||
backgroundColor: "#00f",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Dataset 2',
|
|
||||||
data: [170],
|
|
||||||
backgroundColor: "#f0f",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Dataset 3',
|
|
||||||
data: [150],
|
|
||||||
backgroundColor: "#0f0",
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
export const ChartOperationsToInterval = ({ data, lines }) => {
|
|
||||||
const [operationsToIntervalDataParams, setOperationsToIntervalDataParams] = useState({data: {labels: labels, datasets: datasets}})
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// if ((!lines)
|
|
||||||
// || (!data))
|
|
||||||
// return
|
|
||||||
|
|
||||||
let newDatasets = lines.map(lineCfg => {
|
|
||||||
let datasets = CreateData(lineCfg)
|
|
||||||
if (data.length !== 0)
|
|
||||||
datasets = data.map(dataItem => {
|
|
||||||
return {
|
|
||||||
label: 'Dataset 1',
|
|
||||||
data: [dataItem[lineCfg.xAccessorName]],
|
|
||||||
backgroundColor: "#00f",
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return datasets
|
|
||||||
})
|
|
||||||
|
|
||||||
// let newLabels = lines.map(lineCfg => {
|
|
||||||
// let labels = CreateLabels(lineCfg)
|
|
||||||
// if (data.length !== 0)
|
|
||||||
// labels = data.map(dataItem => {
|
|
||||||
// return dataItem[lineCfg.yAccessorName]
|
|
||||||
// })
|
|
||||||
// return labels
|
|
||||||
// })
|
|
||||||
|
|
||||||
let newParams = {
|
|
||||||
data: {
|
|
||||||
datasets: newDatasets
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setOperationsToIntervalDataParams(newParams)
|
|
||||||
|
|
||||||
}, [data, lines])
|
|
||||||
|
|
||||||
return (<>
|
|
||||||
<ChartDepthToIntervalBase dataParams={operationsToIntervalDataParams} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,180 +0,0 @@
|
|||||||
import { useEffect, useRef, useState } from 'react'
|
|
||||||
import {
|
|
||||||
Chart,
|
|
||||||
TimeScale,
|
|
||||||
Legend,
|
|
||||||
PointElement,
|
|
||||||
ChartData,
|
|
||||||
ChartTypeRegistry,
|
|
||||||
ChartOptions,
|
|
||||||
BarController,
|
|
||||||
BarElement,
|
|
||||||
TimeSeriesScale,
|
|
||||||
LinearScale,
|
|
||||||
LineController,
|
|
||||||
CategoryScale
|
|
||||||
} from 'chart.js'
|
|
||||||
import 'chartjs-adapter-moment'
|
|
||||||
import ChartDataLabels from 'chartjs-plugin-datalabels'
|
|
||||||
|
|
||||||
Chart.register(TimeScale, BarController, BarElement, PointElement, TimeSeriesScale, LineController, LinearScale, CategoryScale, Legend, ChartDataLabels)
|
|
||||||
|
|
||||||
const defaultOptions = {
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Chart.js Bar Chart - Stacked'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
stacked: true,
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
stacked: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ChartTimeData = ChartData<keyof ChartTypeRegistry, {
|
|
||||||
x: string;
|
|
||||||
label: string;
|
|
||||||
y: number;
|
|
||||||
}[], unknown>
|
|
||||||
|
|
||||||
export type ChartTimeDataParams = {
|
|
||||||
data: ChartTimeData,
|
|
||||||
xStart?: 0,
|
|
||||||
xInterval?: number,
|
|
||||||
displayLabels?: Boolean,
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ChartTimeBaseProps = {
|
|
||||||
dataParams: ChartTimeDataParams,
|
|
||||||
// TODO: Create good type for options
|
|
||||||
options?: ChartOptions<keyof ChartTypeRegistry> | any,
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TimeParams = {
|
|
||||||
unit: String
|
|
||||||
stepSize: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const linesPerInterval = 32
|
|
||||||
|
|
||||||
export const timeUnitByInterval = (intervalSec: number): String => {
|
|
||||||
if (intervalSec <= 60)
|
|
||||||
return 'millisecond'
|
|
||||||
|
|
||||||
if (intervalSec <= 32 * 60)
|
|
||||||
return 'second'
|
|
||||||
|
|
||||||
if (intervalSec <= 32 * 60 * 60)
|
|
||||||
return 'minute'
|
|
||||||
|
|
||||||
if (intervalSec <= 32 * 12 * 60 * 60)
|
|
||||||
return 'hour'
|
|
||||||
|
|
||||||
if (intervalSec <= 32 * 24 * 60 * 60)
|
|
||||||
return 'day'
|
|
||||||
|
|
||||||
if (intervalSec <= 32 * 7 * 24 * 60 * 60)
|
|
||||||
return 'week'
|
|
||||||
|
|
||||||
if (intervalSec <= 32 * 30.4375 * 24 * 60 * 60)
|
|
||||||
return 'month'
|
|
||||||
|
|
||||||
if (intervalSec <= 32 * 121.75 * 24 * 60 * 60)
|
|
||||||
return 'quarter'
|
|
||||||
else
|
|
||||||
return 'year'
|
|
||||||
}
|
|
||||||
|
|
||||||
export const timeParamsByInterval = (intervalSec: number): TimeParams => {
|
|
||||||
let stepSize = intervalSec
|
|
||||||
let unit = timeUnitByInterval(intervalSec)
|
|
||||||
|
|
||||||
switch (unit) {
|
|
||||||
case "millisecond":
|
|
||||||
stepSize *= 1000
|
|
||||||
break;
|
|
||||||
case "second":
|
|
||||||
//stepSize *= 1
|
|
||||||
break;
|
|
||||||
case "minute":
|
|
||||||
stepSize /= 60
|
|
||||||
break;
|
|
||||||
case "hour":
|
|
||||||
stepSize /= 60 * 60
|
|
||||||
break;
|
|
||||||
case "day":
|
|
||||||
stepSize /= 24 * 60 * 60
|
|
||||||
break;
|
|
||||||
case "week":
|
|
||||||
stepSize /= 7 * 24 * 60 * 60
|
|
||||||
break;
|
|
||||||
case "month":
|
|
||||||
stepSize /= 30 * 24 * 60 * 60
|
|
||||||
break;
|
|
||||||
case "quarter":
|
|
||||||
stepSize /= 91 * 24 * 60 * 60
|
|
||||||
break;
|
|
||||||
case "year":
|
|
||||||
stepSize /= 365.25 * 24 * 60 * 60
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
stepSize = Math.round(stepSize / linesPerInterval)
|
|
||||||
stepSize = stepSize > 0 ? stepSize : 1;
|
|
||||||
return { unit, stepSize }
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ChartDepthToIntervalBase: React.FC<ChartTimeBaseProps> = ({ options, dataParams }) => {
|
|
||||||
const chartRef = useRef<HTMLCanvasElement>(null)
|
|
||||||
const [chart, setChart] = useState<any>()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if ((chartRef.current) && (!chart)) {
|
|
||||||
let thisOptions = {}
|
|
||||||
Object.assign(thisOptions, defaultOptions, options)
|
|
||||||
|
|
||||||
let newChart = new Chart(chartRef.current, {
|
|
||||||
type: 'bar',
|
|
||||||
plugins: [ChartDataLabels],
|
|
||||||
options: thisOptions,
|
|
||||||
data: dataParams.data
|
|
||||||
})
|
|
||||||
setChart(newChart)
|
|
||||||
|
|
||||||
return () => chart?.destroy()
|
|
||||||
}
|
|
||||||
}, [chart, options, dataParams])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!chart)
|
|
||||||
return
|
|
||||||
|
|
||||||
chart.data = dataParams.data
|
|
||||||
chart.options.aspectRatio = options?.aspectRatio
|
|
||||||
if (dataParams.xStart) {
|
|
||||||
let interval = Number(dataParams.xInterval ?? 600)
|
|
||||||
let start = new Date(dataParams.xStart)
|
|
||||||
let end = new Date(dataParams.xStart)
|
|
||||||
end.setSeconds(end.getSeconds() + interval)
|
|
||||||
let { unit, stepSize } = timeParamsByInterval(interval)
|
|
||||||
|
|
||||||
if (chart.options.scales?.x) {
|
|
||||||
chart.options.scales.x.max = end.getTime()
|
|
||||||
chart.options.scales.x.min = start.getTime()
|
|
||||||
chart.options.scales.x.ticks.display = dataParams.displayLabels ?? true
|
|
||||||
chart.options.scales.x.time.unit = unit
|
|
||||||
chart.options.scales.x.time.stepSize = stepSize
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
chart.update()
|
|
||||||
}, [chart, dataParams, options])
|
|
||||||
|
|
||||||
return (<canvas ref={chartRef} />)
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {useDraggable} from '@dnd-kit/core'
|
|
||||||
import {CSS} from '@dnd-kit/utilities'
|
|
||||||
|
|
||||||
export function Draggable(props) {
|
|
||||||
const {attributes, listeners, setNodeRef, transform} = useDraggable({
|
|
||||||
id: 'draggable',
|
|
||||||
})
|
|
||||||
const style = {
|
|
||||||
transform: CSS.Translate.toString(transform),
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button ref={setNodeRef} style={style} {...listeners} {...attributes}>
|
|
||||||
{props.children}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {useDroppable} from '@dnd-kit/core';
|
|
||||||
|
|
||||||
export function Droppable(props) {
|
|
||||||
const {isOver, setNodeRef} = useDroppable({
|
|
||||||
id: 'droppable',
|
|
||||||
});
|
|
||||||
const style = {
|
|
||||||
color: isOver ? 'green' : undefined,
|
|
||||||
width: "100px",
|
|
||||||
height: "100px",
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={setNodeRef} style={style}>
|
|
||||||
{props.children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user