From 7bcb33b0d0e18ff84a3d27ddc6e498b7073b5500 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 1 Apr 2022 15:14:17 +0700
Subject: [PATCH] added graphs to boris

---
 .../boris/BorisGraphicStats/index.tsx         | 19 ++++++++-----
 src/components/charts/StatsCard/index.tsx     |  2 +-
 .../charts/StatsCountdownCard/index.tsx       |  9 ++++--
 .../charts/StatsGraphCard/index.tsx           | 28 +++++++++++++++++++
 .../charts/StatsGraphCard/styles.module.scss  | 11 ++++++++
 5 files changed, 59 insertions(+), 10 deletions(-)
 create mode 100644 src/components/charts/StatsGraphCard/index.tsx
 create mode 100644 src/components/charts/StatsGraphCard/styles.module.scss

diff --git a/src/components/boris/BorisGraphicStats/index.tsx b/src/components/boris/BorisGraphicStats/index.tsx
index 0fb24e25..1be99ec3 100644
--- a/src/components/boris/BorisGraphicStats/index.tsx
+++ b/src/components/boris/BorisGraphicStats/index.tsx
@@ -2,9 +2,8 @@ import React, { VFC } from 'react';
 
 import { parseISO } from 'date-fns/esm';
 
-import { BasicCurveChart } from '~/components/charts/BasicCurveChart';
-import { StatsCard } from '~/components/charts/StatsCard';
 import { StatsCountdownCard } from '~/components/charts/StatsCountdownCard';
+import { StatsGraphCard } from '~/components/charts/StatsGraphCard';
 import { foundationDate } from '~/constants/boris/constants';
 
 import styles from './styles.module.scss';
@@ -22,20 +21,26 @@ const BorisGraphicStats: VFC<BorisGraphicStatsProps> = ({
   totalNodes,
   nodesByMonth,
 }) => {
+  const year = new Date().getFullYear();
+
   return (
     <div className={styles.group}>
-      <StatsCard
-        background={<BasicCurveChart items={nodesByMonth} />}
+      <StatsGraphCard
         title="Посты"
         total={totalNodes}
+        data={nodesByMonth}
         className={styles.card}
+        left={year - 1}
+        right={year}
       />
 
-      <StatsCard
-        background={<BasicCurveChart items={commentsByMonth} />}
-        title="Комментарии"
+      <StatsGraphCard
+        title="Комменты"
         total={totalComments}
+        data={commentsByMonth}
         className={styles.card}
+        left={year - 1}
+        right={year}
       />
 
       <StatsCountdownCard since={parseISO(foundationDate)} className={styles.card} />
diff --git a/src/components/charts/StatsCard/index.tsx b/src/components/charts/StatsCard/index.tsx
index 0b1d35b1..2c642188 100644
--- a/src/components/charts/StatsCard/index.tsx
+++ b/src/components/charts/StatsCard/index.tsx
@@ -11,7 +11,7 @@ import styles from './styles.module.scss';
 
 interface StatsCardProps extends CardProps {
   title?: string;
-  total?: number;
+  total?: string | number;
   background?: ReactNode;
 }
 
diff --git a/src/components/charts/StatsCountdownCard/index.tsx b/src/components/charts/StatsCountdownCard/index.tsx
index 8cc072fd..f3e15103 100644
--- a/src/components/charts/StatsCountdownCard/index.tsx
+++ b/src/components/charts/StatsCountdownCard/index.tsx
@@ -1,8 +1,13 @@
 import React, { VFC } from 'react';
 
 import classNames from 'classnames';
-import { addMonths } from 'date-fns';
-import { addYears, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns/esm';
+import {
+  addMonths,
+  addYears,
+  differenceInDays,
+  differenceInMonths,
+  differenceInYears,
+} from 'date-fns';
 
 import { StatsCard } from '~/components/charts/StatsCard';
 import { CardProps } from '~/components/containers/Card';
diff --git a/src/components/charts/StatsGraphCard/index.tsx b/src/components/charts/StatsGraphCard/index.tsx
new file mode 100644
index 00000000..e2bf4f20
--- /dev/null
+++ b/src/components/charts/StatsGraphCard/index.tsx
@@ -0,0 +1,28 @@
+import React, { VFC } from 'react';
+
+import { BasicCurveChart } from '~/components/charts/BasicCurveChart';
+import { StatsCard } from '~/components/charts/StatsCard';
+import { CardProps } from '~/components/containers/Card';
+import { Filler } from '~/components/containers/Filler';
+
+import styles from './styles.module.scss';
+
+interface StatsGraphCardProps extends CardProps {
+  title?: string;
+  total?: string | number;
+  data: number[];
+  left?: string | number;
+  right?: string | number;
+}
+
+const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
+  <StatsCard title={title} total={total} background={<BasicCurveChart items={data} />}>
+    <div className={styles.content}>
+      <span>{left}</span>
+      <Filler />
+      <span>{right}</span>
+    </div>
+  </StatsCard>
+);
+
+export { StatsGraphCard };
diff --git a/src/components/charts/StatsGraphCard/styles.module.scss b/src/components/charts/StatsGraphCard/styles.module.scss
new file mode 100644
index 00000000..3874a51b
--- /dev/null
+++ b/src/components/charts/StatsGraphCard/styles.module.scss
@@ -0,0 +1,11 @@
+@import "src/styles/variables";
+
+.content {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: $gap;
+  font: $font_12_medium;
+  opacity: 0.2;
+}