From 39f9f04c209d7cf295b33b75486ae8753cd26023 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?= Date: Fri, 13 Aug 2021 11:40:20 +0500 Subject: [PATCH] cleanup --- src/concept/AnalisysOperationsToInterval.jsx | 44 ----- src/concept/ChartOperationsToInterval.jsx | 83 -------- src/concept/ChartOperationsToIntervalBase.tsx | 180 ------------------ src/concept/dragNDrop/Draggable.jsx | 18 -- src/concept/dragNDrop/Droppable.jsx | 19 -- 5 files changed, 344 deletions(-) delete mode 100644 src/concept/AnalisysOperationsToInterval.jsx delete mode 100644 src/concept/ChartOperationsToInterval.jsx delete mode 100644 src/concept/ChartOperationsToIntervalBase.tsx delete mode 100644 src/concept/dragNDrop/Draggable.jsx delete mode 100644 src/concept/dragNDrop/Droppable.jsx diff --git a/src/concept/AnalisysOperationsToInterval.jsx b/src/concept/AnalisysOperationsToInterval.jsx deleted file mode 100644 index 2080547..0000000 --- a/src/concept/AnalisysOperationsToInterval.jsx +++ /dev/null @@ -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 ( - <> - - - ) -} \ No newline at end of file diff --git a/src/concept/ChartOperationsToInterval.jsx b/src/concept/ChartOperationsToInterval.jsx deleted file mode 100644 index e3264a5..0000000 --- a/src/concept/ChartOperationsToInterval.jsx +++ /dev/null @@ -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 (<> - - - ) -} \ No newline at end of file diff --git a/src/concept/ChartOperationsToIntervalBase.tsx b/src/concept/ChartOperationsToIntervalBase.tsx deleted file mode 100644 index 3f715e4..0000000 --- a/src/concept/ChartOperationsToIntervalBase.tsx +++ /dev/null @@ -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 - -export type ChartTimeDataParams = { - data: ChartTimeData, - xStart?: 0, - xInterval?: number, - displayLabels?: Boolean, -} - -export type ChartTimeBaseProps = { - dataParams: ChartTimeDataParams, - // TODO: Create good type for options - options?: ChartOptions | 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 = ({ options, dataParams }) => { - const chartRef = useRef(null) - const [chart, setChart] = useState() - - 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 () -} \ No newline at end of file diff --git a/src/concept/dragNDrop/Draggable.jsx b/src/concept/dragNDrop/Draggable.jsx deleted file mode 100644 index 76eaa5b..0000000 --- a/src/concept/dragNDrop/Draggable.jsx +++ /dev/null @@ -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 ( - - ); -} \ No newline at end of file diff --git a/src/concept/dragNDrop/Droppable.jsx b/src/concept/dragNDrop/Droppable.jsx deleted file mode 100644 index 7a2ad46..0000000 --- a/src/concept/dragNDrop/Droppable.jsx +++ /dev/null @@ -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 ( -
- {props.children} -
- ); -} \ No newline at end of file