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 = ({ totalNodes, nodesByMonth, }) => { + const year = new Date().getFullYear(); + return (
- } + - } - title="Комментарии" + 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 = ({ total, title, data, left, right }) => ( + }> +
+ {left} + + {right} +
+
+); + +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; +}