const [rootAll, setRootAll] = useState([]);
  const [state, setState] = useState([]);

  useEffect(() => {
    fetch("http://localhost.com/api/root/all/static")
      .then((res) => res.json())
      .then((result) => setRootAll(result));
  }, []);

  useEffect(() => {
    setState({
      options: {
        chart: {
          id: "apexchart",
        },
        xaxis: {
          categories: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
          ],
        },
      },
      series: [
        {
          type: "bar",
          name: "Satış Miktarı",
          data: [
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["01:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["02:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["03:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["04:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["05:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["06:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["07:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["08:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["09:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["10:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["11:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["12:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["13:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["14:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["15:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["16:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["17:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["18:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["19:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["20:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["21:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["22:00"] : 0,
            rootAll.saleTotal > 0 ? rootAll.hoursGraphic["23:00"] : 0,
          ],
        },
      ],
    });
  }, []);
  
  /* Render */ 
          {state.options && (
                <ReactApexCharts
                  options={state.options}
                  series={state.series}
                  type="bar"
                  width={500}
                  height={320}
                />
              )}