График аналитики Глубина-День

src/components/charts/ChartDepthToDay.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState} from 'react'
+import {GetRandomColor} from "./ChartTimeArchive"
+import {ChartDepthToDayBase} from "./ChartDepthToDayBase";
+import {ChartTimeBase} from "./ChartTimeBase";
+
+const CreateDataset = (lineConfig) => {
+  let color = lineConfig.borderColor
+    ?? lineConfig.backgroundColor
+    ?? lineConfig.color
+    ?? GetRandomColor()
+
+  let dataset = {
+    label: lineConfig.label,
+    data: [],
+    backgroundColor: lineConfig.backgroundColor ?? color,
+    borderColor: lineConfig.borderColor ?? color,
+    borderWidth: lineConfig.borderWidth ?? 1,
+    borderDash: lineConfig.dash ?? [],
+  }
+  return dataset
+}
+
+export const ChartAnalyticDepthToDay = ({lines, data, yDisplay, rangeDate, chartRatio}) => {
+  const [analyticDataParams, setAnalyticDataParams] = useState({data:{datasets:[]}})
+  let startOfDay = new Date().setHours(0,0,0,0)
+
+  useEffect(() => {
+    if ((!lines)
+      || (!data))
+      return
+
+    let newDatasets = lines.map(lineCfg => {
+      let dataset = CreateDataset(lineCfg)
+      dataset.data = data.map(dataItem => {
+        return {
+          x: new Date(dataItem[lineCfg.xAccessorName??'date']),
+          y: dataItem[lineCfg.yAccessorName],
+        }
+      })
+      return dataset
+    })
+
+    let newParams = {
+      xStart: startOfDay,
+      displayLabels: yDisplay??false,
+      data: {
+        datasets: newDatasets
+      }
+    }
+    setAnalyticDataParams(newParams)
+  }, [data, lines, yDisplay, rangeDate, chartRatio])
+
+  return (<ChartTimeBase dataParams={analyticDataParams}/>)
+}