const [loading, setLoading] = useState(true);
  const [rootAll, setRootAll] = useState([]);
  const [chartOptions, setChartOpitons] = useState();
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      await fetch("https://localhost/api/root/all/static")
        .then((response) => response.json())
        .then((response) => {
          setRootAll(response);
          setLoading(false);
        });
    };
    fetchData();
  }, []);

  useEffect(() => {
    rootAll &&
      setChartOpitons({
        plugins: {
          title: {
            display: true,
          },
          legend: {
            display: false,
          },
        },
        responsive: true,
        interaction: {
          mode: "index",
          intersect: false,
        },
        scales: {
          x: {
            stacked: true,
          },
          y: {
            stacked: true,
          },
        },
      });
  }, []);
  const labels = [
    "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",
  ];
  useEffect(() => {
    rootAll && 
    setChartData({
      labels,
      datasets: [
        {
          label: "Satış Miktarı",
          data: [
            rootAll.hoursGraphic && rootAll.hoursGraphic["01:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["02:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["03:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["04:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["05:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["06:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["07:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["08:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["09:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["10:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["11:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["12:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["13:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["14:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["15:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["16:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["17:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["18:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["19:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["20:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["21:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["22:00"],
            rootAll.hoursGraphic && rootAll.hoursGraphic["23:00"],

          ],
          backgroundColor: "rgb(255, 99, 132)",
        },
      ],
    });
    return () => {};
  }, [rootAll.hoursGraphic]);
  if (loading) {
    return <div> Loading ... </div>;
  }

    return () => {};
  }, [rootAll.hoursGraphic]);