import { merge } from "lodash"; import React, { FunctionComponent, useCallback, useEffect, useState, } from "react"; import { Col, Container } from "react-bootstrap"; import { Helmet } from "react-helmet"; import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts"; import { useDidMount } from "rooks"; import { HistoryApi, ProvidersApi, SystemApi, useAsyncRequest, } from "../../apis"; import { AsyncOverlay, AsyncSelector, ContentHeader, LanguageSelector, Selector, } from "../../components"; import { actionOptions, timeframeOptions } from "./options"; function converter(item: History.Stat) { const movies = item.movies.map((v) => ({ date: v.date, movies: v.count, })); const series = item.series.map((v) => ({ date: v.date, series: v.count, })); const result = merge(movies, series); return result; } const providerLabel = (item: System.Provider) => item.name; const SelectorContainer: FunctionComponent = ({ children }) => (