Question 263665 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Expected 3 arguments, but got 4

This my dashboard.tsx. I get an error in "const { filteredEvents, stats, tableApps, formattedDate } = filterData(dataAll, Prefix, listApp, dateSelected);" the dateSelected show error "Expected 3 arguments, but got 4.". i tried to change the data in filterData but end up getting more error.

"use client";
import Widget from "@/components/widget/Widget";
import { IoMdHome } from "react-icons/io";
import { IoDocuments } from "react-icons/io5";
import { MdBarChart, MdDangerous, MdDashboard } from "react-icons/md";
import TotalSpent from "@/components/charts/TotalSpent";
import PieChartCard from "@/components/charts/PieChartCard";
import ComplexTable from "@/components/tables/ComplexTable";
import { Stats } from "@/types/chart";
import { tableData } from "@/types/table";
import {
  Events,
  dataPc,
  filteredEvents,
} from "@/types/hook";
import { useEffect, useState } from "react";
import Timeline from "../../../../components/charts/Timeline";
import { DataWindow, DataCPM, DataPPM, calculatedPercentages, DataAll } from "@/types/data";
import Loading from "../loading";
import Card from "@/components/card";
import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  useDisclosure,
} from "@chakra-ui/react";
import { useFetchDataPc } from "@/features/data/fetchDataPc";
import { toast } from "react-hot-toast";
import { useRouter } from "next/navigation";

function filterData(
  data: DataWindow | DataCPM | DataPPM,
  Prefix: string[],
  dateSelected: Date
): {
  filteredEvents: filteredEvents;
  stats: Stats;
  tableApps: tableData[];
  formattedDate: string;
} {
  const filteredEvents: filteredEvents = {
    ppmEvents: [],
    windowEvents: [],
    cpmEvents: [],
  };

  const stats: Stats = {};
  const tableApps: tableData[] = [];

  const selectedMonth = dateSelected.getMonth() + 1;
  const selectedYear = dateSelected.getFullYear();
  const monthName = new Date(selectedYear, selectedMonth - 1).toLocaleString(
    "default",
    { month: "long" }
  );
  const formattedDate = `${monthName} ${selectedYear}`;

    Object.entries(data.buckets).forEach(([key, bucket]) => {
        const matchingPrefix = Prefix.find((prefix) => key.startsWith(prefix));
        if (matchingPrefix) {
        const events: Events[] = bucket.events || [];
        const filteredEventsByTimestamp: Events[] = events.filter((event: Events) => {
            let eventDate: Date | null = null;
    
            if ('timestamp' in event.window) {
            eventDate = new Date(event.window.timestamp);
            } else if ('timestamp' in event.cpm) {
            eventDate = new Date(event.cpm.timestamp);
            } else if ('timestamp' in event.ppm) {
            eventDate = new Date(event.ppm.timestamp);
            }
    
            if (eventDate) {
            const eventMonth = eventDate.getMonth() + 1;
            const eventYear = eventDate.getFullYear();
    
            return eventMonth === selectedMonth && eventYear === selectedYear;
            }
    
            return false;
        });
    
        if (!filteredEvents.cpmEvents) {
            filteredEvents.cpmEvents = [];
        }
        if (!filteredEvents.windowEvents) {
            filteredEvents.windowEvents = [];
        }
        if (!filteredEvents.ppmEvents) {
            filteredEvents.ppmEvents = [];
        }
    
        if (matchingPrefix === "aw-watcher-cpm") {
            filteredEvents.cpmEvents.push(...filteredEventsByTimestamp);
        } else if (matchingPrefix === "aw-watcher-window") {
            filteredEvents.windowEvents.push(...filteredEventsByTimestamp);
        } else if (matchingPrefix === "aw-watcher-ppm") {
            filteredEvents.ppmEvents.push(...filteredEventsByTimestamp);
        }
        }
    });
  

    filteredEvents.windowEvents.forEach((event: Events) => {
        if (event.window && event.window.title) {
            const appName = event.window.title.toLowerCase();
            const _date = event.window.timestamp.slice(0, 10);
            const date = _date.split("-").reverse().join("-");
            if (!statsOctober 12, 2023) statsOctober 12, 2023 = { focus: 0, nonFocus: 0, afk: 0 };
        
            const appIndex = tableApps.findIndex((row) => row.title === appName);

            if (appIndex === -1 && appName !== "unknown") {
                tableApps.push({
                    title: appName,
                    status: 'focus', // Or 'nonFocus', or however you want to determine status
                    cpm: 0,
                    ppm: 0,
                    // Setting time to 0 as it won't be calculated
                });
            }
        }
    });

    const timeRange = 5000; // Rentang waktu tambahan sebelum dan setelah timestamp aplikasi (dalam milidetik)
    filteredEvents.cpmEvents.forEach((event) => {
      const inputTimestamp = new Date(event.cpm.timestamp).getTime();
      const appTimestamp = new Date(event.cpm.timestamp).getTime();
      const appEndTime = appTimestamp + event.cpm.cpm * 1000;

      // Extract the app name from the event
      const appName = event.cpm.activity;

      if (
        inputTimestamp >= appTimestamp - timeRange &&
        inputTimestamp <= appEndTime + timeRange
      ) {
        const appIndex = tableApps.findIndex((row) => row.title === appName);
        if (appIndex !== -1) {
          tableApps[appIndex].cpm = (tableApps[appIndex].cpm || 0) + 1;
        }
      }
    });

  return { filteredEvents, stats, tableApps, formattedDate };
}

function calculatePercentages(stats: Stats) {
    return {
      calculatedPercentages: {
        focus: 30,         // Hardcoded value for focus percentage
        nonFocus: 40,      // Hardcoded value for nonFocus percentage
        afk: 30,           // Hardcoded value for afk percentage
      },
    };
}

export default function Dashboard({ dataPc }: { dataPc: dataPc }) {
    const { response, responseApp } = dataPc;
    const router = useRouter();
    const [errorLogData, setErrorLogData] = useState<boolean>(false);
    const {
      data : dataAll,
      isLoading: dataAllIsLoading,
      refetch: refetchdataAll,
      isRefetching: refetchingdataAll,
    } = useFetchDataPc({
      slug: response.ip_pc,
      onError: () => {
        toast.error("Something wrong when fetching data");
        setErrorLogData(true);
      },
    });
  
    const { isOpen, onOpen, onClose } = useDisclosure();
    const [timelineActive, setTimelineActive] = useState(false);
    const [dateSelected, setDateSelected] = useState<Date>(new Date());
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const [filteredEvents, setFilteredEvents] = useState<filteredEvents | null>(
      null
    );
    const [stats, setStats] = useState<Stats | null>(null);
    const [tableApps, setTableApps] = useState<tableData[] | null>(null);
    const [formattedDate, setFormattedDate] = useState<string>("");
    const [calculatedPercentages, setCalculatedPercentages] =
      useState<calculatedPercentages | null>(null);
  
    const changeDateHandler = (date: Date) => {
      setDateSelected(date);
    };
  
    const Prefix: string[] = [
      "aw-watcher-CPM",
      "aw-watcher-window",
      "aw-watcher-PPM",
    ];
    const listApp: string[] = responseApp.map((title) => title.name_aplikasi);
  
    useEffect(() => {
      router.refresh();
    }, []);
    useEffect(() => {
      const fetchData = async () => {
        setIsLoading(true);
        if (dataAll !== undefined && !dataAllIsLoading && !refetchingdataAll) {
      const { filteredEvents, stats, tableApps, formattedDate } =
          filterData(dataAll, Prefix, listApp, dateSelected);
          setFilteredEvents(filteredEvents);
          setStats(stats);
          setTableApps(tableApps);
          setFormattedDate(formattedDate);
  
          const { calculatedPercentages } = await calculatePercentages(stats);
          setCalculatedPercentages(calculatedPercentages);
        }
  
        setIsLoading(false);
      };
      fetchData();
    }, [dateSelected, dataAllIsLoading, refetchingdataAll, dataAll]);
  
    return (
      <div>
        {isLoading || dataAllIsLoading || refetchingdataAll ? (
          <Loading />
        ) : !dataAll || errorLogData ? (
          <div>
            <Widget
              icon={<MdDangerous className="h-7 w-7" />}
              title={"Data Not Found"}
              subtitle="Please Check Your IP, maybe thats the problem"
            />
          </div>
        ) : (
          <div>
            {/* Card widget */}
            <div className="grid grid-cols-1 gap-5 mt-3 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6">
              <Widget
                icon={<MdBarChart className="h-7 w-7" />}
                title={"PC Name"}
                subtitle={response.nama_pc ? response.nama_pc : "null"}
              />
              <Widget
                icon={<IoDocuments className="w-6 h-6" />}
                title={"IP"}
                subtitle={response.ip_pc ? response.ip_pc : "null"}
              />
              <Widget
                icon={<MdDashboard className="w-6 h-6" />}
                title={"Online Status"}
                subtitle={"PC is Online"}
                warnaSubtitla="text-green-700"
              />
            </div>
  
            <div className="flex justify-center">
              <Card extra="!flex-row px-8 py-4 gap-x-5 mt-7 ">
                <Button
                  colorScheme="custom"
                  color={!timelineActive ? "#FFFFFF" : "#422afb"}
                  bg={!timelineActive ? "#422afb" : "transparent"}
                  variant="outline"
                  onClick={() => setTimelineActive(false)}
                >
                  Information
                </Button>
                <Button
                  colorScheme="custom"
                  color={timelineActive ? "#FFFFFF" : "#422afb"}
                  bg={timelineActive ? "#422afb" : "transparent"}
                  variant="outline"
                  onClick={() =>
                    stats !== null ? setTimelineActive(true) : onOpen()
                  }
                >
                  Timeline
                </Button>
              </Card>
            </div>
  
            {/* Charts */}
            {filteredEvents &&
              stats &&
              tableApps &&
              formattedDate &&
              calculatedPercentages && (
                <div>
                  {timelineActive ? (
                    <div className="grid grid-cols-1 gap-5 mt-5">
                      <Timeline
                        stats={filteredEvents}
                        dateSelected={dateSelected}
                        changeDateHandler={changeDateHandler}
                      />
                    </div>
                  ) : (
                    <div>
                      <div className="grid gap-5 mt-5 xl:grid-cols-1">
                        <TotalSpent
                          stats={stats}
                          monthYear={formattedDate}
                          dateSelected={dateSelected}
                          changeDateHandler={changeDateHandler}
                        />
                      </div>
                      <div className="grid grid-cols-1 gap-5 mt-5">
                        <PieChartCard
                          calculatedPercentages={calculatedPercentages}
                          monthYear={formattedDate}
                        />
                      </div>
                      <div className="grid grid-cols-1 gap-5 mt-5">
                        <ComplexTable
                          tableData={tableApps}
                          monthYear={formattedDate}
                        />
                      </div>
                    </div>
                  )}
                </div>
              )}
          </div>
        )}
  
        
        <Modal onClose={onClose} isOpen={isOpen} isCentered>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>Select a month</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <p>Please select a month with a data</p>
            </ModalBody>
            <ModalFooter>
              <Button onClick={onClose}>Close</Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </div>
    );
}

other file included is data.d.ts it has DataAll

// data.d.ts
import {dataWindow, dataCpm, dataPpm } from "./hook";

export interface DataWindow {
    [key: string]: {
      window: {
        window: dataWindow;
      }[];
    };
}

export interface DataCPM {
  [key: string]: {
    cpm: {
      cpm: dataCpm;
    }[];
  };
}

export interface DataPPM {
  [key: string]: {
    ppm: {
      ppm: dataPpm;
    }[];
  };
}

export interface DataAll<T> {
  [key: string]: {
    [dataType: string]: {
      [dataKey: string]: T;
    }[];
  };
}

export interface calculatedPercentages {
  focus: number;
  nonFocus: number;
  afk: number;
}

export type pcInfoDetail = PcInfo & {
  jenis_pekerjaan: JenisPekerjaan;
};

Is there any mistake in my code?

Tags:

2

Answers


  1. 0

    You have declared

    filterDate( data: DataWindow | DataCPM | DataPPM, Prefix: string[], dateSelected: Date)

    as a function with 3 arguments but in line

    filterData(dataAll, Prefix, listApp, dateSelected);

    You are passing 4 arguments and that’s why you are getting "Expected 3 arguments, but got 4" error

    Login or Signup to reply.
  2. 0

    I think the error you are getting is self-explanatory. You have created a function filterData that accepts 3 arguments;

    function filterData(
  data: DataWindow | DataCPM | DataPPM,
  Prefix: string[],
  dateSelected: Date
){ 
   //rest of your logic 
}

    But inline in your useEffect hook, you have invoked the function with 4 arguments;

    filterData(dataAll, Prefix, listApp, dateSelected);

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search