Remove 'visible' property from charts.

types/client/stats.ts

@@ -19,7 +19,6 @@ export enum StatsIntervalId {
 }
 
 export type StatsChart = {
-  visible?: boolean;
   id: string;
   title: string;
   description: string;

ui/stats/ChartsWidgetsList.tsx

@@ -14,7 +14,7 @@ type Props = {
 }
 
 const ChartsWidgetsList = ({ charts, interval }: Props) => {
-  const isAnyChartDisplayed = charts.some((section) => section.charts.some(chart => chart.visible));
+  const isAnyChartDisplayed = charts.some((section) => section.charts.length > 0);
 
   return (
     <Box>
@@ -23,7 +23,6 @@ const ChartsWidgetsList = ({ charts, interval }: Props) => {
           {
             charts.map((section) => (
               <ListItem
-                display={ section.charts.every((chart) => !chart.visible) ? 'none' : 'block' }
                 key={ section.id }
                 mb={ 8 }
                 _last={{
@@ -46,7 +45,6 @@ const ChartsWidgetsList = ({ charts, interval }: Props) => {
                   { section.charts.map((chart) => (
                     <GridItem
                       key={ chart.id }
-                      display={ chart.visible ? 'block' : 'none' }
                     >
                       <ChartWidget
                         id={ chart.id }

ui/stats/constants/charts-scheme.ts

@@ -9,13 +9,11 @@ export const statsChartsScheme: Array<StatsSection> = [
         id: 'new-blocks',
         title: 'New blocks',
         description: 'New blocks number per day',
-        visible: true,
       },
       {
         id: 'average-block-size',
         title: 'Average block size',
         description: 'Average size of blocks in bytes',
-        visible: true,
       },
     ],
   },
@@ -27,25 +25,21 @@ export const statsChartsScheme: Array<StatsSection> = [
         id: 'average-transaction-fee',
         title: 'Average transaction fee',
         description: 'The average amount in USD spent per transaction',
-        visible: true,
       },
       {
         id: 'transactions-fees',
         title: 'Transactions fees',
         description: 'Amount of tokens paid as fees',
-        visible: true,
       },
       {
         id: 'new-transactions',
         title: 'Transactions fees',
         description: 'New transactions number per period',
-        visible: true,
       },
       {
         id: 'transactions-growth',
         title: 'Transactions growth',
         description: 'Cumulative transactions number per period',
-        visible: true,
       },
     ],
   },
@@ -57,13 +51,11 @@ export const statsChartsScheme: Array<StatsSection> = [
         id: 'active-accounts',
         title: 'Active accounts',
         description: 'Active accounts number per period',
-        visible: true,
       },
       {
         id: 'accounts-growth',
         title: 'Accounts growth',
         description: 'Cumulative accounts number per period',
-        visible: true,
       },
     ],
   },

ui/stats/useStats.tsx

@@ -25,16 +25,13 @@ export default function useStats() {
   const filterCharts = useCallback((q: string, currentSection: StatsSectionIds) => {
     const charts = statsChartsScheme
       ?.map((section: StatsSection) => {
-        const charts = section.charts.map((chart: StatsChart) => ({
-          ...chart,
-          visible: isSectionMatches(section, currentSection) && isChartNameMatches(q, chart),
-        }));
+        const charts = section.charts.filter((chart: StatsChart) => isSectionMatches(section, currentSection) && isChartNameMatches(q, chart));
 
         return {
           ...section,
           charts,
         };
-      });
+      }).filter((section: StatsSection) => section.charts.length > 0);
 
     setDisplayedCharts(charts || []);
   }, []);