asb_cloud_front/src/components/charts/ChartTimeArchive.jsx

import moment from 'moment';
import { useEffect, useState} from 'react';
import {ChartTimeBase} from './ChartTimeBase'

export const GetRandomColor = () => "#" + Math.floor(Math.random()*16777215).toString(16)

export const CreateDataset = (lineConfig) => {
  let color = lineConfig.borderColor
    ?? lineConfig.backgroundColor
    ?? lineConfig.color
    ?? GetRandomColor()

  let datasets = {
    label: lineConfig.label,
    data: [],
    backgroundColor: lineConfig.backgroundColor ?? color,
    borderColor: lineConfig.borderColor ?? color,
    borderWidth: lineConfig.borderWidth ?? 1,
    borderDash: lineConfig.dash ?? [],
  }
  return datasets
}

const ChartOptions = {
  // responsive: true,
  // plugins:{
  //   legend:{
  //     display: false,
  //     maxHeight: 64,
  //     fullSize: true,
  //     position: 'chartArea',
  //     align: 'start',
  //   }
  // }
}

export const ChartTimeArchive = ({lines, data, yDisplay, rangeDate, chartRatio}) => {
  const [dataParams, setDataParams] = useState({data:{datasets: []}})

  useEffect(() => {
    if ((!lines)
      || (!data))
      return

    let newDatasets = lines.map(lineCfg => {      
      let dataset = CreateDataset(lineCfg)
      dataset.data = data.map(dataItem => {
        return {
          x: dataItem[lineCfg.xAccessorName],
          y: new Date(dataItem[lineCfg.yAccessorName??'date'])
        }
      })
      return dataset
    })

    let interval = rangeDate ? (rangeDate[1] - rangeDate[0]) / 1000 : null
    let startDate = rangeDate ? rangeDate[0] : moment()
    let newParams = {
      yInterval: interval,
      yStart: startDate,
      displayLabels: yDisplay??false,
      data: {
        datasets: newDatasets
      }
    }
    setDataParams(newParams)
  }, [data, lines, yDisplay, rangeDate, chartRatio])

  const opt = ChartOptions
  opt.aspectRatio = chartRatio

  return (<ChartTimeBase dataParams={dataParams} options={opt}/>)
}