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>