import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFC from "react-fusioncharts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import Overlappedbar2d from 'fusioncharts/fusioncharts.overlappedbar2d';
import Bars2D from "fusioncharts/fusioncharts.charts";
import { FC } from "react";

ReactFC.fcRoot(FusionCharts, Bars2D,Overlappedbar2d, FusionTheme);
// Resolves charts dependancy
charts(FusionCharts);

export type OverlapingBarsProps = {
  data:Array<{
    recomended:number | String
    value:number | String
  }>
    
  };

const OverlapingBars : FC<OverlapingBarsProps> = ({data}) => {

  

  
  
  
  const dataSource = {
    chart: {
      showZeroPlaneValue: false,
      numDivLines: 0,
      showValues: false,
      showLabels: false,
      showLimits: false,
      theme: "fusion",
    },
    categories: [
      {
        category: data.map((element)=>({
          label: "",
        })),
      },
    ],
    dataset: [
      {
        seriesname: "Recomendado",//target
        data: data.map((element)=>({
          value: element.recomended,
        })),
      },
      {
        seriesname: "Actual",//Value
        data: data.map((element)=>({
          value: element.value,
        })),
      },
    ],
  };

  const chartConfigs = {
    type:  "overlappedbar2d",
    width: "100%",
    height: "25%",
    dataFormat: "json",
    dataSource: dataSource,
  };

  return (
    <div>
      <ReactFC {...chartConfigs} />
    </div>
  );
};
export default OverlapingBars;
