diff --git a/src/components/AnalyticDepthToDayColumn.jsx b/src/components/AnalyticDepthToDayColumn.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/charts/ChartDepthToDay.jsx b/src/components/charts/ChartDepthToDay.jsx new file mode 100644 index 0000000..efdff61 --- /dev/null +++ b/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 () +} \ No newline at end of file diff --git a/src/components/charts/ChartDepthToDayBase.tsx b/src/components/charts/ChartDepthToDayBase.tsx new file mode 100644 index 0000000..e69de29