Geforce File Manager

NAME	SIZE	ACTIONS
📄 DataTable.js	1,235 B	[ EDIT ] \| [ DEL ]
📄 DatePicker.js	1,421 B	[ EDIT ] \| [ DEL ]
📄 OverviewPanel.js	1,014 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: VideoTimeline.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, timestamp } from "../util";

export default (props) => {
  const { video_id, startDate, endDate } = props;
  const [loading, setLoading] = useState(true);

const [series, setSeries] = useState([
    {
      name: "Views",
      data: [],
    },
  ]);

useEffect(() => {
    fetchTimeline();
  }, [startDate, endDate]);

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

return (
    <Card>
      <CardBody>
        <div className="presto-card__title">
          {__("Audience Retention", "presto-player")}
        </div>
        <Chart
          options={chart.options}
          series={series}
          type="area"
          height={280}
        />
      </CardBody>
    </Card>
  );
};