Source: data/Chart.js

import React, { useEffect, useMemo, useState } from "react";
import ApexChart from 'react-apexcharts'
import { emptyArray, emptyObject, processOptions } from "../../_core";


/**
 * Componente que renderiza un grafico ApexCharts.
 * Para más información de como enviar los parametros type, series y options, ver la doc oficial de <a target="_blank" href="https://apexcharts.com/">ApexCharts</a>
 * @name Reactor.Components.Data.Chart
 * @param {ChartType} type Tipo de gráfico
 * @param {JsonString} series Datos del gráfico
 * @param {JsonString} options Configuración del gráfico
 * @param {string} width Width del contenedor
 * @param {string} height Height del contenedor
 * @param {string} chart_width Width del gráfico
 * @param {string} chart_height Height del gráfico
 * @class
 * @example
<chart
  type="area"
  series='[
        {
          "name": "series1",
          "data": [31, 40, 28, 51, 42, 109, 100]
        }, {
          "name": "series2",
          "data": [11, 32, 45, 32, 34, 52, 41]
        }
  ]'
  options='{
        "dataLabels": {
          "enabled": false
        },
        "stroke": {
          "curve": "smooth"
        },
        "xaxis": {
          "type": "datetime",
          "categories": ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },
        "tooltip": {
          "x": {
            "format": "dd/MM/yy HH:mm"
          }
        }
  }'
  width="100%"
/>
 */
const Chart = ({ type, series, options, width = "400px", height = "400px" }) => {

  const [ loaded, setLoaded ] = useState(false);

  useEffect(()=>{
    setLoaded(true);
  }, [])

  const dataOptions = useMemo(()=>{
    return !!options ? processOptions(options) : emptyObject;
  }, [options])
  
  const dataSeries = useMemo(()=>{
    return !!series ? processOptions(series) : emptyArray;
  }, [series])

  return (
    <>
      {loaded && <ApexChart options={dataOptions} series={dataSeries} type={type} width={width} height={height}/>}
    </>
  )

}

export default Chart;