Untitled

import React from 'react';
import { Box, Heading, Grid, Text } from "@chakra-ui/react";
import { useQuery } from "@tanstack/react-query";
import { getDashboardDetailByGuidID } from "../../services/datasetService"; // Adjust the import path as necessary
import CustomLineChart from "./CustomLineChart";
import CustomPieChart from "./CustomPieChart";
import CustomBarChart from "./CustomBarChart";

const ApiCharts = ({ data }) => {
  const id = data?.data?.id;

  const { data: transformedData, isLoading, isError, error } = useQuery(
    ["dashboardData", id],
    async () => {
      // const response = await getDashboardDetailByGuidID(id);
      const response = {
        apiUsageDaily: {
          "2024-04-16": 2,
          "2024-04-18": 3,
          "2024-04-20": 5,
        },
        averageResponseTimeDaily: {
          "2024-04-16": 119.1595835,
          "2024-04-18": 130.5,
          "2024-04-20": 110.2,
        },
        apiHitStatusDaily: {
          "2024-04-16": { success: 0, fail: 2 },
          "2024-04-18": { success: 3, fail: 1 },
          "2024-04-20": { success: 4, fail: 0 },
        },
        "apiHitsByUserDaily": {
          "2024-04-16": { "Bima Pangestu": 2, "Company A": 3, "User 2": 0, "User 3": 0, "Company B": 0 },
          "2024-04-18": { "Bima Pangestu": 0, "Company A": 2, "User 2": 1, "User 3": 0, "Company B": 0 },
          "2024-04-20": { "Bima Pangestu": 0, "Company A": 0, "User 2": 0, "User 3": 4, "Company B": 2 }
        }
      };

      const dates = Object.keys(response.apiUsageDaily);
      const usageData = dates.map((date) => ({
        date,
        usage: response.apiUsageDaily[date],
      }));

      const responseTimeData = dates.map((date) => ({
        date,
        time: response.averageResponseTimeDaily[date],
      }));

      const totalSuccess = dates.reduce(
        (sum, date) => sum + response.apiHitStatusDaily[date].success,
        0,
      );
      const totalFail = dates.reduce(
        (sum, date) => sum + response.apiHitStatusDaily[date].fail,
        0,
      );
      const apiStatusData = [
        { name: "Success", value: totalSuccess },
        { name: "Failed", value: totalFail },
      ];

      const formattedData = Object.keys(response.apiHitsByUserDaily).map(date => ({
        date,
        ...response.apiHitsByUserDaily[date],
      }));

      const userKeys = Array.from(
        new Set(formattedData.flatMap((entry) => Object.keys(entry).slice(1))),
      );

      const colorsBarChart = userKeys.map(() => {
        const letters = "0123456789ABCDEF";
        let color = "#";
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      });

      return { usageData, responseTimeData, apiStatusData, formattedData, userKeys, colorsBarChart };
    },
    {
      enabled: !!id, // Only run the query if id is available
    }
  );

  if (isLoading) {
    return <Text>Loading...</Text>;
  }

  if (isError) {
    return <Text>Error fetching data: {error.message}</Text>;
  }

  const { usageData, responseTimeData, apiStatusData, formattedData, userKeys, colorsBarChart } = transformedData;

  const colorsPieChart = {
    "Failed": "#FB4219",
    "Success": "#60F505"
  };

  const legendConfig = {
    layout: "horizontal",
    verticalAlign: "top",
    align: "right",
    iconType: "square",
    wrapperStyle: { paddingRight: "20px" }
  };

  return (
    <Box padding={4}>
      <Heading as="h1" size="md" mb={4}>
        Usage Statistic
      </Heading>
      <Grid templateColumns="repeat(2, 1fr)" gap={4}>
        <CustomLineChart
          title="API Usage Daily"
          subtitle="Last 7 days"
          data={usageData}
          xAxisKey="date"
          yAxisKey="usage"
          lineColor="#8884d8"
        />

        <CustomPieChart
          title="API Hit Status"
          subtitle="Last 7 days"
          data={apiStatusData}
          dataKey="value"
          colors={colorsPieChart}
          legendConfig={legendConfig}
        />

        <CustomLineChart
          title="Average Response Time (in ms)"
          subtitle="Last 7 days"
          data={responseTimeData}
          xAxisKey="date"
          yAxisKey="time"
          lineColor="#FF6347"
        />

        <CustomBarChart
          title="API Hit by Company/User"
          subtitle="Last 7 days"
          data={formattedData}
          xAxisKey="date"
          yAxisKeys={userKeys}
          colors={colorsBarChart}
          legendConfig={legendConfig}
        />
      </Grid>
    </Box>
  );
};

export default ApiCharts;