Geforce File Manager

NAME	SIZE	ACTIONS
📄 DataTable.js	1,235 B	[ EDIT ] \| [ DEL ]
📄 DatePicker.js	1,421 B	[ EDIT ] \| [ DEL ]
📄 TopUsers.js	1,992 B	[ EDIT ] \| [ DEL ]
📄 TopVideos.js	2,633 B	[ EDIT ] \| [ DEL ]
📄 TotalVideoViewsByUser.js	790 B	[ EDIT ] \| [ DEL ]
📄 TotalViewsGraph.js	3,001 B	[ EDIT ] \| [ DEL ]
📄 TotalWatchGraph.js	2,949 B	[ EDIT ] \| [ DEL ]
📄 VideoAverageWatchTime.js	847 B	[ EDIT ] \| [ DEL ]
📄 VideoAverageWatchTimeByUser.js	861 B	[ EDIT ] \| [ DEL ]
📄 VideoTimeline.js	2,670 B	[ EDIT ] \| [ DEL ]
📄 VideoTotalWatchTimeByUser.js	857 B	[ EDIT ] \| [ DEL ]
📄 VideoViews.js	818 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: TotalViewsGraph.js

import { __, sprintf } from "@wordpress/i18n";
const { Card, CardBody } = wp.components;
const { useState, useEffect, useRef } = wp.element;

import Loading from "@/admin/settings/components/Loading";
import apiFetch from "@/shared/services/fetch";
import Chart from "react-apexcharts";
import { convertDateTimeToAbsoluteDate } from "../util";

export default (props) => {
  const [loading, setLoading] = useState(true);
  const [totalViews, setTotalViews] = useState(0);
  const { startDate, endDate } = props;
  const [series, setSeries] = useState([
    {
      name: "Views",
      data: [],
    },
  ]);

// fetch only if we already mounted
  useEffect(() => {
    fetchViews();
  }, [props]);

if (loading) {
    return (
      <CardBody>
        <Loading />
      </CardBody>
    );
  }

return (
    <CardBody className="presto-flow">
      <div className="presto-card__title">
        {sprintf(__("%d Unique Views", "presto-player"), totalViews)}
      </div>
      <Chart options={chart.options} series={series} type="area" height={280} />
    </CardBody>
  );
};