From a2a60aee8e3108b03aa7dec266e5e74853a1b31d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 26 Oct 2023 12:25:08 +0600
Subject: [PATCH] move graphic cards to left sidebar

---
 .../boris/BorisGraphicStats/index.tsx         |  4 ---
 .../BorisGraphicStats/styles.module.scss      |  7 +---
 .../boris/BorisStatsBackend/index.tsx         | 29 ++++++++++++++---
 .../BorisStatsBackend/styles.module.scss      |  9 +++---
 src/components/charts/StatsCard/index.tsx     | 21 +++++++++---
 .../charts/StatsGraphCard/index.tsx           |  4 +--
 .../charts/StatsGraphCard/styles.module.scss  | 17 ++++++++--
 src/layouts/BorisLayout/index.tsx             | 32 ++++++-------------
 8 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/src/components/boris/BorisGraphicStats/index.tsx b/src/components/boris/BorisGraphicStats/index.tsx
index e3481089..3ef97068 100644
--- a/src/components/boris/BorisGraphicStats/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/boris/BorisGraphicStats/styles.module.scss b/src/components/boris/BorisGraphicStats/styles.module.scss
index 0856cb8e..81f0fb5a 100644
--- a/src/components/boris/BorisGraphicStats/styles.module.scss
+++ b/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;
 }
diff --git a/src/components/boris/BorisStatsBackend/index.tsx b/src/components/boris/BorisStatsBackend/index.tsx
index bee2b47d..834b6ca5 100644
--- a/src/components/boris/BorisStatsBackend/index.tsx
+++ b/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>
+        {/*
+          <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>
diff --git a/src/components/boris/BorisStatsBackend/styles.module.scss b/src/components/boris/BorisStatsBackend/styles.module.scss
index 638e4277..a5080596 100644
--- a/src/components/boris/BorisStatsBackend/styles.module.scss
+++ b/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;
+}
diff --git a/src/components/charts/StatsCard/index.tsx b/src/components/charts/StatsCard/index.tsx
index 2c642188..7b7fed26 100644
--- a/src/components/charts/StatsCard/index.tsx
+++ b/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>
       )}
diff --git a/src/components/charts/StatsGraphCard/index.tsx b/src/components/charts/StatsGraphCard/index.tsx
index ce17e6c7..33d2c6b9 100644
--- a/src/components/charts/StatsGraphCard/index.tsx
+++ b/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>
 );
diff --git a/src/components/charts/StatsGraphCard/styles.module.scss b/src/components/charts/StatsGraphCard/styles.module.scss
index 5ae52c03..66de2d98 100644
--- a/src/components/charts/StatsGraphCard/styles.module.scss
+++ b/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;
+}
diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx
index f98a58f0..59ae398a 100644
--- a/src/layouts/BorisLayout/index.tsx
+++ b/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>
-              <div>
-                <Superpower>
-                  <BorisSuperPowersSSR />
-                </Superpower>
-              </div>
-
-              <BorisGraphicStats
-                totalComments={stats.backend.comments.total}
-                commentsByMonth={commentsByMonth}
-                totalNodes={stats.backend.nodes.total}
-                nodesByMonth={nodesByMonth}
-              />
+              {isTester && (
+                <div>
+                  <Superpower>
+                    <BorisSuperPowersSSR />
+                  </Superpower>
+                </div>
+              )}
 
               <BorisComments />
             </Group>