import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
import React from "react";
import { BarChartRequest } from "@gtpl/shared-models/common-models";



export interface BarChartProps {
  request: BarChartRequest;
}
const HighBar = (props: BarChartProps) => {
  const { request } = props; 
  const categories = request.chartCategories.map(chart => chart.title);
  const categoryData = request.chartCategories.map(chart => chart.value);


  const config = {
    chart: {
      type: 'bar',
      width: '500',
      height: '400'

    },
    title: {
      text: request.name,
    },
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      max: 300,
      title: {
        text: 'Sales'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
      name: 'Sale Orders',
      data: categoryData,
    }]
  }

  return (

    <HighchartsReact highcharts={Highcharts} options={config} />


  )
}

export default HighBar;