Untitled

import React, { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import { fetchMarketingData } from '../services/facebookService';

const MarketingDataVisualization = () => {
  const [data, setData] = useState({
    labels: [], // Campaign names
    datasets: [
      {
        label: 'Clicks',
        data: [],
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
      // Add other datasets as needed
    ],
  });

  useEffect(() => {
    const fetchData = async () => {
      const marketingData = await fetchMarketingData();
      // Processing the data for visualization
      const labels = marketingData.map((item) => item.campaign_name);
      const clicksData = marketingData.map((item) => item.clicks);
      // Update other datasets similarly

      setData((prevData) => ({
        ...prevData,
        labels,
        datasets: [{ ...prevData.datasets[0], data: clicksData }],
        // Update other datasets similarly
      }));
    };

    fetchData();
  }, []);

  return <div className="marketing-data-chart">
    <Line data={data} />
  </div>;
};

export default MarketingDataVisualization;