Add filters for the Charts page.

types/client/stats.ts

+export enum StatsSectionId {
+  'all',
+  'accounts',
+  'blocks',
+  'transactions',
+  'gas',
+}
+export type StatsSectionIds = keyof typeof StatsSectionId;
+export type StatsSection = { id: StatsSectionIds; value: string }
+
+export enum StatsIntervalId {
+  'all',
+  'oneMonth',
+  'threeMonths',
+  'sixMonths',
+  'oneYear',
+}
+export type StatsIntervalIds = keyof typeof StatsIntervalId;
+export type StatsInterval = { id: StatsIntervalIds; value: string }

ui/pages/Stats.tsx

+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-import WidgetsList from '../charts/WidgetsList';
+import StatsFilters from '../stats/StatsFilters';
+import WidgetsList from '../stats/WidgetsList';
 
 const Stats = () => {
   return (
     <Page>
       <PageTitle text="Ethereum Stats"/>
+
+      <Box mb={{ base: 6, sm: 8 }}>
+        <StatsFilters/>
+      </Box>
+
       <WidgetsList/>
     </Page>
   );

ui/charts/ChartWidget.tsx → ui/stats/ChartWidget.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Grid, Heading, Text, useColorModeValue } from '@chakra-ui/
 import React, { useCallback } from 'react';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
-import { demoData } from './demo-data';
+import { demoData } from './constants/demo-data';
 
 type Props = {
   apiMethodURL: string;

ui/stats/StatsDropdownMenu.tsx

+import { Box, Button, Icon, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import eastMiniArrowIcon from 'icons/arrows/east-mini.svg';
+
+type Props<T extends string> = {
+  items: Array<{id: T; value: string}>;
+  selectedId: T;
+  onSelect: (id: T) => void;
+}
+
+export function StatsDropdownMenu<T extends string>({ items, selectedId, onSelect }: Props<T>) {
+  const selectedCategory = items.find(category => category.id === selectedId);
+
+  const handleSelection = useCallback((id: string | Array<string>) => {
+    const selectedId = Array.isArray(id) ? id[0] : id;
+    onSelect(selectedId as T);
+  }, [ onSelect ]);
+
+  return (
+    <Menu
+    >
+      <MenuButton
+        as={ Button }
+        size="md"
+        variant="outline"
+        colorScheme="gray"
+        w="100%"
+      >
+        <Box
+          as="span"
+          display="flex"
+          alignItems="center"
+        >
+          { selectedCategory?.value }
+          <Icon transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} as={ eastMiniArrowIcon } w={ 5 } h={ 5 }/>
+        </Box>
+      </MenuButton>
+
+      <MenuList zIndex={ 3 }>
+        <MenuOptionGroup
+          value={ selectedId }
+          type="radio"
+          onChange={ handleSelection }
+        >
+          { items.map((item) => (
+            <MenuItemOption
+              key={ item.id }
+              value={ item.id }
+            >
+              { item.value }
+            </MenuItemOption>
+          )) }
+        </MenuOptionGroup>
+      </MenuList>
+    </Menu>
+  );
+}
+
+export default StatsDropdownMenu;

ui/stats/StatsFilters.tsx

+import { Grid, GridItem } from '@chakra-ui/react';
+import debounce from 'lodash/debounce';
+import React, { useCallback, useState } from 'react';
+
+import type { StatsInterval, StatsIntervalIds, StatsSection, StatsSectionIds } from 'types/client/stats';
+
+import FilterInput from 'ui/shared/FilterInput';
+
+import { STATS_INTERVALS, STATS_SECTIONS } from './constants';
+import StatsDropdownMenu from './StatsDropdownMenu';
+
+const sectionsList = Object.keys(STATS_SECTIONS).map((id: string) => ({
+  id: id,
+  value: STATS_SECTIONS[id as StatsSectionIds],
+})) as Array<StatsSection>;
+
+const intervalList = Object.keys(STATS_INTERVALS).map((id: string) => ({
+  id: id,
+  value: STATS_INTERVALS[id as StatsIntervalIds],
+})) as Array<StatsInterval>;
+
+const StatsFilters = () => {
+  const [ selectedSectionId, setSelectedSectionId ] = useState<StatsSectionIds>('all');
+  const [ selectedIntervalId, setSelectedIntervalId ] = useState<StatsIntervalIds>('all');
+  const [ , setFilterQuery ] = useState('');
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debounceFilterCharts = useCallback(debounce(q => setFilterQuery(q), 500), []);
+
+  return (
+    <Grid
+      gap={ 2 }
+      templateAreas={{
+        base: `"input input"
+                "section interval"`,
+        lg: `"input section interval"`,
+      }}
+      gridTemplateColumns={{ lg: '1fr auto auto' }}
+    >
+      <GridItem
+        w="100%"
+        area="input"
+      >
+        <FilterInput
+          onChange={ debounceFilterCharts }
+          placeholder="Find chart, metric..."/>
+      </GridItem>
+
+      <GridItem
+        w={{ base: '100%', lg: 'auto' }}
+        area="section"
+      >
+        <StatsDropdownMenu
+          items={ sectionsList }
+          selectedId={ selectedSectionId }
+          onSelect={ setSelectedSectionId }
+        />
+      </GridItem>
+
+      <GridItem
+        w={{ base: '100%', lg: 'auto' }}
+        area="interval"
+      >
+        <StatsDropdownMenu
+          items={ intervalList }
+          selectedId={ selectedIntervalId }
+          onSelect={ setSelectedIntervalId }
+        />
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default StatsFilters;

ui/charts/WidgetsList.tsx → ui/stats/WidgetsList.tsx

 import { Grid, GridItem, Heading, List, ListItem } from '@chakra-ui/react';
 import React from 'react';
 
-import { statisticsChartsScheme } from '../stats/constants/list';
 import ChartWidget from './ChartWidget';
+import { statisticsChartsScheme } from './constants/charts-scheme';
 
 const WidgetsList = () => {
   return (

ui/charts/demo-data.ts → ui/stats/constants/demo-data.ts

-import type { TimeChartItem } from '../shared/chart/types';
+import type { TimeChartItem } from '../../shared/chart/types';
 
 export const demoData: Array<TimeChartItem> = [ { date: new Date('2022-10-17T00:00:00.000Z'), value: 432670 }, {
   date: new Date('2022-10-18T00:00:00.000Z'),

ui/stats/constants/index.ts

+import type { StatsSectionIds, StatsIntervalIds } from 'types/client/stats';
+
+export const STATS_SECTIONS: { [key in StatsSectionIds]: string } = {
+  all: 'All stats',
+  accounts: 'Accounts',
+  blocks: 'Blocks',
+  transactions: 'Transactions',
+  gas: 'Gas',
+};
+
+export const STATS_INTERVALS: { [key in StatsIntervalIds]: string } = {
+  all: 'All time',
+  oneMonth: '1 month',
+  threeMonths: '3 months',
+  sixMonths: '6 months',
+  oneYear: '1 year',
+};