fixed stats

.env.development

@@ -1,4 +1,5 @@
 #REACT_APP_API_HOST=http://localhost:3334/
-REACT_APP_API_HOST=https://pig.staging.vault48.org/
+#REACT_APP_API_HOST=https://pig.staging.vault48.org/
-#REACT_APP_API_HOST=https://pig.vault48.org/
+REACT_APP_API_HOST=https://pig.vault48.org/
-REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
+#REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
+REACT_APP_REMOTE_CURRENT=https://pig.vault48.org/static/

src/components/boris/BorisGraphicStats/styles.module.scss

@@ -2,12 +2,13 @@
 
 .group {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: 1fr 1fr 0.5fr;
   grid-column-gap: $gap;
   grid-row-gap: $gap;
   grid-auto-rows: 140px;
 
   @include tablet {
+    grid-template-columns: 1fr;
     grid-auto-rows: 120px;
   }
 }

src/components/charts/StatsCountdownCard/index.tsx

@@ -21,7 +21,6 @@ interface StatsCountdownCardProps extends CardProps {
 const StatsCountdownCard: VFC<StatsCountdownCardProps> = ({ since, ...props }) => {
   const years = differenceInYears(new Date(), since);
   const months = differenceInMonths(new Date(), addYears(since, years));
-  const days = differenceInDays(new Date(), addMonths(addYears(since, years), months));
 
   return (
     <StatsCard {...props} title="Нам уже" className={classNames(styles.card, props.className)}>
@@ -36,14 +35,7 @@ const StatsCountdownCard: VFC<StatsCountdownCardProps> = ({ since, ...props }) =
         {months > 0 && (
           <>
             <span className={styles.val}>{months}</span>
-            {' мес. '}
+            {' мес '}
-          </>
-        )}
-
-        {days > 0 && (
-          <>
-            <span className={styles.val}>{days}</span>
-            {' дн. '}
           </>
         )}
       </div>

src/components/charts/StatsCountdownCard/styles.module.scss

@@ -13,7 +13,7 @@
 span.val {
   font: $font_48_bold;
   color: white;
-  padding: 0 $gap * 0.5 0 $gap * 2;
+  padding: $gap;
 }
 
 .card {

src/layouts/BorisLayout/index.tsx

@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 
+import { observer } from 'mobx-react-lite';
 import { useRouter } from 'next/router';
 
 import { BorisGraphicStats } from '~/components/boris/BorisGraphicStats';
@@ -33,11 +34,14 @@ type IProps = {
   isLoadingStats: boolean;
 };
 
-const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
+const BorisLayout: FC<IProps> = observer(({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
   const { isUser } = useAuthProvider();
   const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
   const { push } = useRouter();
 
+  const commentsByMonth = useMemo(() => stats.backend.comments.by_month?.slice(0, -1), [stats.backend.comments.by_month]);
+  const nodesByMonth = useMemo(() => stats.backend.nodes.by_month?.slice(0, -1), [stats.backend.comments.by_month]);
+
   return (
     <Container>
       <div className={styles.wrap}>
@@ -74,9 +78,9 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
 
               <BorisGraphicStats
                 totalComments={stats.backend.comments.total}
-                commentsByMonth={stats.backend.comments.by_month}
+                commentsByMonth={commentsByMonth}
                 totalNodes={stats.backend.nodes.total}
-                nodesByMonth={stats.backend.nodes.by_month}
+                nodesByMonth={nodesByMonth}
               />
 
               <BorisComments />
@@ -100,6 +104,6 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
       <SidebarRouter prefix="/" />
     </Container>
   );
-};
+});
 
 export { BorisLayout };