Fetch Zones

Enable the fetch zones feature to display the fetch zones in the timeline to fetch your data from the server.

Fetch Zone schema

Property	Type	Status	Values
enabled	boolean	required
timeSlots	number	optional	This is the number of hours or days or months depends on which mode you enabled
channelsPerSlot	number	optional	The number of channels to be included in a single fetch zone
onFetchZone	function	required	Function to retrieve the data about the since and till time or dates and channelsToFetchData a list of channels ids

{
  enabled: true,
  timeSlots: 4,
  channelsPerSlot: 10,
  onFetchZone: (data) => {
    console.log("onFetchZone", data);
    },
}

Fetch Zone - hours example

import { Channel, Program, useEpg, Zone } from "@nessprim/planby-pro";

const { getEpgProps, getLayoutProps } = useEpg({
  channels,
  epg,
  startDate,
  endDate,
  fetchZone: {
      enabled: true,
      // In this example we are using 4h as a zone fetch
      timeSlots: 6, // 1, 2, 4, 6, 12, 24
      channelsPerSlot: 10, // Set the number of channels to be included in a single fetch
      onFetchZone: (data: Zone) => {
        // Set the loading state to true to show the loading spinner
        //  <Epg isLoading={isLoading} {...getEpgProps()}>
        // setIsLoading(true);

        // Get the zone's data to fetch new elements in the layout
        // {
        //   "since" : "2023-04-06T00:00:00",
        //   "till": "2023-04-06T06:00:00"
        //   "channelsToFetchData": [
        //     "73797723-3218-49e9-86a5-3366d142636f",...
        //   ]
        // }
        console.log("onFetchZone", data);
      },
    },
  ...
});

Fetch Zone - week/month example

import { Channel, Program, useEpg, Zone } from "@nessprim/planby-pro";

const { getEpgProps, getLayoutProps } = useEpg({
  channels,
  epg,
  startDate,
  endDate,
  mode: { type: 'week', style: "modern" },
    fetchZone: {
      enabled: true,
      // Use week or month mode to use the fetchZone feature
      // In this example we are using 12 days as a zone fetch
      timeSlots: 12, // 1, 2, 4, 6, 12, 24 in days or use months
      channelsPerSlot: 10, // Set the number of channels to be included in a single fetch
      onFetchZone: (data: Zone) => {
        // Set the loading state to true to show the loading spinner
        //  <Epg isLoading={isLoading} {...getEpgProps()}>
        // setIsLoading(true);

        // Get the zone's data to fetch new elements in the layout
        // {
        //   "since": "2023-05-01T00:00:00",
        //   "till": "2023-05-12T24:00:00",
        //   "channelsToFetchData": [
        //     "73797723-3218-49e9-86a5-3366d142636f",...
        //   ]
        // }
        console.log("onFetchZone", data);
      },
    },
  ...
});