react-feather#ArrowLeft JavaScript Examples

function CapacityForecast({
  filterDistrict,
  filterFacilityTypes,
  date,
  setForecast,
}) {
  const [timespan, setTimespan] = useState({ past: 14, forecast: 14 });
  const { data } = useSWR(
    ["CapacityForecast", date, filterDistrict.id, timespan.past],
    (url, date, district, days) =>
      careSummary(
        "facility",
        dateString(getNDateBefore(date, days - 1)),
        dateString(getNDateAfter(date, 1)),
        district
      )
  );
  const {
    filtered,
    timeseries,
    max,
    min,
    avg,
    forecasted,
    forecasted_max,
    forecasted_min,
    forecasted_avg,
  } = useMemo(() => {
    const filtered = processFacilities(data.results, filterFacilityTypes);
    const datewise = filtered.reduce((acc, cur) => {
      if (acc[cur.date]) {
        Object.keys(AVAILABILITY_TYPES).forEach((k) => {
          acc[cur.date][k].used += cur.capacity[k]?.current_capacity || 0;
          acc[cur.date][k].total += cur.capacity[k]?.total_capacity || 0;
        });
        return acc;
      }
      const _t = {
        20: { total: 0, used: 0 },
        10: { total: 0, used: 0 },
        150: { total: 0, used: 0 },
        1: { total: 0, used: 0 },
        70: { total: 0, used: 0 },
        50: { total: 0, used: 0 },
        60: { total: 0, used: 0 },
        40: { total: 0, used: 0 },
        100: { total: 0, used: 0 },
        110: { total: 0, used: 0 },
        120: { total: 0, used: 0 },
        30: { total: 0, used: 0 },
      };
      Object.keys(AVAILABILITY_TYPES).forEach((k) => {
        _t[k].used += cur.capacity[k]?.current_capacity || 0;
        _t[k].total += cur.capacity[k]?.total_capacity || 0;
      });
      return {
        ...acc,
        [cur.date]: _t,
      };
    }, {});
    const timeseries = {};
    Object.keys(AVAILABILITY_TYPES).forEach((k) => {
      timeseries[k] = Object.entries(datewise)
        .reverse()
        .map(([d, value]) => ({
          date: d,
          usage: (value[k].used / value[k].total) * 100 || 0,
        }));
    });
    const max = {};
    const min = {};
    const avg = {};
    for (const k of Object.keys(AVAILABILITY_TYPES)) {
      max[k] = Math.max(...timeseries[k].map((e) => e.usage));
      min[k] = Math.min(...timeseries[k].map((e) => e.usage));
      avg[k] =
        timeseries[k].reduce((a, p) => a + p.usage, 0) / timeseries[k].length;
    }
    const forecasted = {};
    const forecasted_max = {};
    const forecasted_min = {};
    const forecasted_avg = {};
    if (filtered.length > 0) {
      for (const k of Object.keys(AVAILABILITY_TYPES)) {
        // https://github.com/zemlyansky/arima
        // eslint-disable-next-line prefer-destructuring
        forecasted[k] = arima(
          timeseries[k].map((e) => e.usage),
          timespan.forecast,
          {
            method: 0, // ARIMA method (Default: 0)
            optimizer: 0, // Optimization method (Default: 6)
            p: 1, // Number of Autoregressive coefficients
            d: 0, // Number of times the series needs to be differenced
            q: 4, // Number of Moving Average Coefficients
            verbose: false, // Output model analysis to console
          }
        )[0];
        forecasted_max[k] = Math.max(...forecasted[k]);
        forecasted_min[k] = Math.min(...forecasted[k]);
        forecasted_avg[k] =
          forecasted[k].reduce((a, p) => a + p, 0) / timespan.forecast;
      }
    }
    return {
      filtered,
      timeseries,
      max,
      min,
      avg,
      forecasted,
      forecasted_max,
      forecasted_min,
      forecasted_avg,
    };
  }, [data, filterFacilityTypes, timespan]);

  return filtered.length > 0 ? (
    <>
      <div className="grid gap-1 grid-rows-none mb-8 sm:grid-flow-col-dense sm:grid-rows-1 sm:place-content-end">
        <Pill title="Forecast">
          <>
            <Button
              size="small"
              onClick={() => setTimespan({ ...timespan, forecast: 7 })}
              className="rounded-r-none shadow-xs"
              disabled={timespan.forecast === 7}
            >
              <span className="text-gray-200 capitalize">7 Days</span>
            </Button>
            <Button
              size="small"
              onClick={() => setTimespan({ ...timespan, forecast: 14 })}
              className="rounded-l-none shadow-xs"
              disabled={timespan.forecast !== 7}
            >
              <span className="text-gray-200 capitalize">14 Days</span>
            </Button>
          </>
        </Pill>
        <Pill title="Go back">
          <Button
            size="small"
            onClick={() => setForecast(false)}
            className="shadow-xs"
          >
            <ArrowLeft className="h-4" />
          </Button>
        </Pill>
      </div>
      <div className="my-4 text-center text-red-600 text-xs">
        This is a work in progress version for a utilization forecasting system.
        These numbers should not be considered for decision making as it can
        vary as we haven't considered all variables to project it.
      </div>
      <div className="grid gap-6 mb-8 md:grid-cols-1 xl:grid-cols-1">
        {AVAILABILITY_TYPES_ORDERED.map((k) => (
          <SingleCapacityForecast
            key={k}
            title={AVAILABILITY_TYPES[k]}
            past={{
              data: timeseries[k],
              avg: avg[k],
              max: max[k],
              min: min[k],
            }}
            forecasted={{
              data: forecasted[k],
              avg: forecasted_avg[k],
              max: forecasted_max[k],
              min: forecasted_min[k],
            }}
          />
        ))}
      </div>
    </>
  ) : (
    <NoData />
  );
}