move graphic cards to left sidebar

src/components/boris/BorisGraphicStats/index.tsx

@@ -42,10 +42,6 @@ const BorisGraphicStats: VFC<BorisGraphicStatsProps> = ({
         left={year - 1}
         right={year}
       />
-
-      {/*
-      <StatsCountdownCard since={parseISO(foundationDate)} className={styles.card} />
-  */}
     </div>
   );
 };

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

@@ -5,10 +5,5 @@
   grid-template-columns: 1fr 1fr;
   grid-column-gap: $gap;
   grid-row-gap: $gap;
-  grid-auto-rows: 140px;
-
-  @include tablet {
-    grid-template-columns: 1fr;
-    grid-auto-rows: 120px;
-  }
+  grid-auto-rows: 100px;
 }

src/components/boris/BorisStatsBackend/index.tsx

@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
+import { FC, useMemo } from 'react';
 
+import { BorisGraphicStats } from '~/components/boris/BorisGraphicStats';
 import { StatsRow } from '~/components/common/StatsRow';
 import { SubTitle } from '~/components/common/SubTitle';
 import { StatBackend } from '~/types/boris';
@@ -13,6 +14,15 @@ interface IProps {
 }
 
 const BorisStatsBackend: FC<IProps> = ({ isLoading, stats }) => {
+  const commentsByMonth = useMemo(
+    () => stats.comments.by_month?.slice(0, -1),
+    [stats.comments.by_month],
+  );
+  const nodesByMonth = useMemo(
+    () => stats.nodes.by_month?.slice(0, -1),
+    [stats.comments.by_month],
+  );
+
   if (!stats && !isLoading) {
     return null;
   }
@@ -54,11 +64,22 @@ const BorisStatsBackend: FC<IProps> = ({ isLoading, stats }) => {
           {stats.nodes.audios}
         </StatsRow>
 
+        {/*
           <StatsRow isLoading={isLoading} label="Комментарии">
             {stats.comments.total}
           </StatsRow>
+        */}
       </ul>
 
+      <div className={styles.graphs}>
+        <BorisGraphicStats
+          totalComments={stats.comments.total}
+          commentsByMonth={commentsByMonth}
+          totalNodes={stats.nodes.total}
+          nodesByMonth={nodesByMonth}
+        />
+      </div>
+
       <SubTitle isLoading={isLoading} className={styles.title}>
         Сторедж
       </SubTitle>

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

@@ -1,14 +1,15 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .title {
   margin: $gap * 2 0 $gap;
 }
 
-.wrap {
-}
-
 .subtitle {
   margin-left: $gap;
   font: $font_12_semibold;
   text-transform: uppercase;
 }
+
+.graphs {
+  padding-top: $gap;
+}

src/components/charts/StatsCard/index.tsx

@@ -15,13 +15,26 @@ interface StatsCardProps extends CardProps {
   background?: ReactNode;
 }
 
-const StatsCard: FC<StatsCardProps> = ({ children, title, background, total, ...props }) => (
-  <Card {...props} className={classNames(styles.card, props.className)}>
+const StatsCard: FC<StatsCardProps> = ({
+  children,
+  title,
+  background,
+  total,
+  ...props
+}) => (
+  <Card
+    {...props}
+    className={classNames(styles.card, props.className)}
+    elevation={0}
+  >
     <div className={styles.content}>
       {(!!title || !!total) && (
         <Group className={styles.title} horizontal>
-          {!!title && <SubTitle>{title}</SubTitle>}
-          <Filler />
+          {!!title && (
+            <Filler>
+              <SubTitle>{title}</SubTitle>
+            </Filler>
+          )}
           {!!total && <SubTitle className={styles.total}>{total}</SubTitle>}
         </Group>
       )}

src/components/charts/StatsGraphCard/index.tsx

@@ -31,9 +31,9 @@ const StatsGraphCard: VFC<StatsGraphCardProps> = ({
     className={styles.card}
   >
     <div className={styles.content}>
-      <span>{left}</span>
+      <span className={styles.legend}>{left}</span>
       <Filler />
-      <span>{right}</span>
+      <span className={styles.legend}>{right}</span>
     </div>
   </StatsCard>
 );

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .content {
   flex: 1;
@@ -6,9 +6,22 @@
   display: flex;
   align-items: flex-end;
   font: $font_12_medium;
-  opacity: 0.2;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  margin: -2px;
 }
 
 .card {
   height: 100%;
 }
+
+.legend {
+  opacity: 0.5;
+  background: $content_bg_light;
+  backdrop-filter: blur(10px);
+  padding: 2px;
+  border-radius: 4px;
+}

src/layouts/BorisLayout/index.tsx

@@ -1,8 +1,7 @@
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
-import { BorisGraphicStats } from '~/components/boris/BorisGraphicStats';
 import { Superpower } from '~/components/boris/Superpower';
 import { Card } from '~/components/containers/Card';
 import { Group } from '~/components/containers/Group';
@@ -24,15 +23,7 @@ type IProps = {
 };
 
 const BorisLayout: FC<IProps> = observer(({ title, stats, isLoadingStats }) => {
-  const { isUser } = useAuthProvider();
-  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],
-  );
+  const { isUser, isTester } = useAuthProvider();
 
   return (
     <Container>
@@ -50,18 +41,13 @@ const BorisLayout: FC<IProps> = observer(({ title, stats, isLoadingStats }) => {
         <div className={styles.container}>
           <Card className={styles.content}>
             <Group>
+              {isTester && (
                 <div>
                   <Superpower>
                     <BorisSuperPowersSSR />
                   </Superpower>
                 </div>
-
-              <BorisGraphicStats
-                totalComments={stats.backend.comments.total}
-                commentsByMonth={commentsByMonth}
-                totalNodes={stats.backend.nodes.total}
-                nodesByMonth={nodesByMonth}
-              />
+              )}
 
               <BorisComments />
             </Group>