Бар Посещаемость лекций студентами

src/pages/lesson-list.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { ResponsiveBar } from '@nivo/bar'
 import dayjs from 'dayjs'
 import { Link, useParams } from 'react-router-dom'
-import { getNavigationsValue } from '@ijl/cli'
+import { getNavigationsValue, getFeatures } from '@ijl/cli'
 import { useForm, Controller } from 'react-hook-form'
 import {
   Breadcrumb,
@@ -51,9 +52,14 @@ import { api } from '../__data__/api/api'
 import { isTeacher } from '../utils/user'
 import { qrCode } from '../assets'
 import { Lesson } from '../__data__/model'
+import pkg from '../../package.json'
 
 import { ErrorSpan, BreadcrumbsWrapper } from './style'
 
+const features = getFeatures('journal')
+
+const barFeature = features?.['lesson.bar']
+
 interface NewLessonForm {
   name: string
   date: string
@@ -333,7 +339,7 @@ const LessonList = () => {
           </BreadcrumbItem>
         </Breadcrumb>
       </BreadcrumbsWrapper>
-      <Container maxW="container.xl">
+      <Container maxW="container.xl" position="relative">
         {isTeacher(user) && (
           <Box mt="15" mb="15">
             {showForm ? (
@@ -363,7 +369,17 @@ const LessonList = () => {
             )}
           </Box>
         )}
-        <TableContainer whiteSpace="wrap">
+        {barFeature && (
+          <Box height="300">
+            <Bar
+              data={data?.body.map((lesson, index) => ({
+                lessonIndex: `#${index + 1}`,
+                count: lesson.students.length,
+              }))}
+            />
+          </Box>
+        )}
+        <TableContainer whiteSpace="wrap" pb={13}>
           <Table variant="striped" colorScheme="cyan">
             <Thead>
               <Tr>
@@ -435,3 +451,29 @@ const LessonList = () => {
 }
 
 export default LessonList
+
+const Bar = ({ data /* see data tab */ }) => (
+  <ResponsiveBar
+    data={data}
+    keys={['count']}
+    indexBy="lessonIndex"
+    margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
+    padding={0.3}
+    valueScale={{ type: 'linear' }}
+    indexScale={{ type: 'band', round: true }}
+    colors={{ scheme: 'set3' }}
+    axisTop={null}
+    axisRight={null}
+    labelSkipWidth={12}
+    labelSkipHeight={12}
+    labelTextColor={{
+      from: 'color',
+      modifiers: [['brighter', 1.4]],
+    }}
+    role="application"
+    ariaLabel="График посещаемости лекций"
+    barAriaLabel={(e) =>
+      e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue
+    }
+  />
+)