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