made boris graphic stats

src/components/boris/BorisGraphicStats/index.tsx

@@ -0,0 +1,46 @@
+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 { foundationDate } from '~/constants/boris/constants';
+
+import styles from './styles.module.scss';
+
+interface BorisGraphicStatsProps {
+  totalNodes: number;
+  nodesByMonth: number[];
+  totalComments: number;
+  commentsByMonth: number[];
+}
+
+const BorisGraphicStats: VFC<BorisGraphicStatsProps> = ({
+  totalComments,
+  commentsByMonth,
+  totalNodes,
+  nodesByMonth,
+}) => {
+  return (
+    <div className={styles.group}>
+      <StatsCard
+        background={<BasicCurveChart items={nodesByMonth} />}
+        title="Посты"
+        total={totalNodes}
+        className={styles.card}
+      />
+
+      <StatsCard
+        background={<BasicCurveChart items={commentsByMonth} />}
+        title="Комментарии"
+        total={totalComments}
+        className={styles.card}
+      />
+
+      <StatsCountdownCard since={parseISO(foundationDate)} className={styles.card} />
+    </div>
+  );
+};
+
+export { BorisGraphicStats };

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

@@ -0,0 +1,12 @@
+@import 'src/styles/variables';
+
+.group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+}
+
+.card {
+  height: 150px;
+}

src/components/charts/StatsCard/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { SubTitle } from '~/components/common/SubTitle';
+import { Card, CardProps } from '~/components/containers/Card';
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+
+import styles from './styles.module.scss';
+
+interface StatsCardProps extends CardProps {
+  title?: string;
+  total?: number;
+  background?: ReactNode;
+}
+
+const StatsCard: FC<StatsCardProps> = ({ children, title, background, total, ...props }) => (
+  <Card {...props} className={classNames(styles.card, props.className)}>
+    <div className={styles.content}>
+      {(!!title || !!total) && (
+        <Group className={styles.title} horizontal>
+          {!!title && <SubTitle>{title}</SubTitle>}
+          <Filler />
+          {!!total && <SubTitle className={styles.total}>{total}</SubTitle>}
+        </Group>
+      )}
+
+      {children}
+    </div>
+
+    {!!background && <div className={styles.background}>{background}</div>}
+  </Card>
+);
+
+export { StatsCard };

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

@@ -0,0 +1,22 @@
+@import "src/styles/variables";
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  z-index: 1;
+  position: relative;
+  flex: 1;
+}
+
+.background {
+  top: 32px;
+  left: 0;
+  right: 0;
+  bottom: $gap;
+  position: absolute;
+  z-index: 0;
+}

src/components/charts/StatsCountdownCard/index.tsx

@@ -0,0 +1,49 @@
+import React, { VFC } from 'react';
+
+import classNames from 'classnames';
+import { addMonths } from 'date-fns';
+import { addYears, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns/esm';
+
+import { StatsCard } from '~/components/charts/StatsCard';
+import { CardProps } from '~/components/containers/Card';
+
+import styles from './styles.module.scss';
+
+interface StatsCountdownCardProps extends CardProps {
+  since: Date;
+}
+
+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)}>
+      <div className={styles.content}>
+        {years > 0 && (
+          <>
+            <span className={styles.val}>{years}</span>
+            {' лет '}
+          </>
+        )}
+
+        {months > 0 && (
+          <>
+            <span className={styles.val}>{months}</span>
+            {' мес. '}
+          </>
+        )}
+
+        {days > 0 && (
+          <>
+            <span className={styles.val}>{days}</span>
+            {' дн. '}
+          </>
+        )}
+      </div>
+    </StatsCard>
+  );
+};
+
+export { StatsCountdownCard };

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

@@ -0,0 +1,19 @@
+@import "src/styles/variables";
+
+.content {
+  width: 100%;
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_18_semibold;
+  color: transparentize(white, 0.5);
+  padding-bottom: 10px;
+}
+
+span.val {
+  font: $font_48_bold;
+  color: white;
+  padding: 0 $gap * 0.5 0 $gap * 2;
+}

src/components/containers/Card/index.tsx

@@ -2,13 +2,15 @@ import React, { FC } from 'react';
 
 import classNames from 'classnames';
 
+import { DivProps } from '~/utils/types';
+
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {
+export type CardProps = DivProps & {
   seamless?: boolean;
 };
 
-const Card: FC<IProps> = ({ className, children, seamless, ...props }) => (
+const Card: FC<CardProps> = ({ className, children, seamless, ...props }) => (
   <div className={classNames(styles.card, className, { seamless })} {...props}>
     {children}
   </div>

src/constants/boris/constants.ts

@@ -22,3 +22,5 @@ export const initialBackendStats: StatBackend = {
     size: 0,
   },
 };
+
+export const foundationDate = '2009-07-21 12:28:58';

src/layouts/BorisLayout/index.tsx

@@ -2,9 +2,11 @@ import React, { FC } from 'react';
 
 import { useRouter } from 'next/router';
 
+import { BorisGraphicStats } from '~/components/boris/BorisGraphicStats';
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
 import { Superpower } from '~/components/boris/Superpower';
 import { BasicCurveChart } from '~/components/charts/BasicCurveChart';
+import { StatsCard } from '~/components/charts/StatsCard';
 import { Card } from '~/components/containers/Card';
 import { Filler } from '~/components/containers/Filler';
 import { Grid } from '~/components/containers/Grid';
@@ -51,6 +53,7 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
 
         <div className={styles.container}>
           <Card className={styles.content}>
+            <Group>
               <Superpower>
                 <Padder>
                   <Group>
@@ -65,28 +68,19 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
                         Профиль на отдельной странице
                       </Button>
                     </div>
-
-                  <Group>
-                    <h4>Количество нод за год</h4>
-                    <Grid horizontal>
-                      <Card style={{ padding: 0 }}>
-                        <BasicCurveChart items={stats.backend.nodes.by_month} width={200} />
-                      </Card>
-
-                      <Card style={{ padding: 0 }}>
-                        <BasicCurveChart items={stats.backend.comments.by_month} width={200} />
-                      </Card>
-
-                      <Filler />
-                    </Grid>
-
-                    <h4>Количество комментов за год</h4>
-                  </Group>
                   </Group>
                 </Padder>
               </Superpower>
 
+              <BorisGraphicStats
+                totalComments={stats.backend.comments.total}
+                commentsByMonth={stats.backend.comments.by_month}
+                totalNodes={stats.backend.nodes.total}
+                nodesByMonth={stats.backend.nodes.by_month}
+              />
+
               <BorisComments />
+            </Group>
           </Card>
 
           <Group className={styles.stats}>

src/styles/_fonts.scss

@@ -18,7 +18,8 @@ $font_24_bold: $bold 24px $font;
 $font_24_semibold: $bold 24px $font;
 $font_24_medium: $medium 24px $font;
 $font_24_regular: $regular 24px $font;
-$font_20_semibold: $bold 24px $font;
+$font_20_bold: $bold 24px $font;
+$font_20_semibold: $semibold 24px $font;
 $font_18_regular: $regular 18px $font;
 $font_18_extra_light: $extra_light 18px $font;
 $font_18_semibold: $semibold 18px $font;