added graphs to boris

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
+      <StatsGraphCard
-        background={<BasicCurveChart items={nodesByMonth} />}
         title="Посты"
         total={totalNodes}
+        data={nodesByMonth}
         className={styles.card}
+        left={year - 1}
+        right={year}
       />
 
-      <StatsCard
+      <StatsGraphCard
-        background={<BasicCurveChart items={commentsByMonth} />}
+        title="Комменты"
-        title="Комментарии"
         total={totalComments}
+        data={commentsByMonth}
         className={styles.card}
+        left={year - 1}
+        right={year}
       />
 
       <StatsCountdownCard since={parseISO(foundationDate)} className={styles.card} />

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;
 }
 

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 {
-import { addYears, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns/esm';
+  addMonths,
+  addYears,
+  differenceInDays,
+  differenceInMonths,
+  differenceInYears,
+} from 'date-fns';
 
 import { StatsCard } from '~/components/charts/StatsCard';
 import { CardProps } from '~/components/containers/Card';

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 };

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;
+}