Merge pull request 'Бар Посещаемость лекций студентами' (#24) from feature/charts into master

Reviewed-on: https://git.inno-js.ru/bro-js/journal.pl/pulls/24

ijl.config.js

@@ -13,6 +13,11 @@ module.exports = {
     features: {
         'journal': {
             // add your features here in the format [featureName]: { value: string }
+            "lesson.bar": {
+              "on": true,
+              "value": "",
+              "key": "lesson.bar"
+          }
         },
     },
     config: {

package-lock.json

@@ -13,6 +13,7 @@
                 "@chakra-ui/react": "^2.8.2",
                 "@emotion/react": "^11.11.4",
                 "@emotion/styled": "^11.11.0",
+                "@nivo/bar": "^0.85.1",
                 "@reduxjs/toolkit": "^2.2.1",
                 "@types/react": "^18.2.60",
                 "@types/react-dom": "^18.2.19",
@@ -3617,6 +3618,172 @@
                 "@jridgewell/sourcemap-codec": "1.4.14"
             }
         },
+        "node_modules/@nivo/annotations": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.85.1.tgz",
+            "integrity": "sha512-+YVFKMokf6MMXsztpEoOoFwG+XcEJV90xezuqJ8FmS0hgEzJ8xTeWNxPRWfrvxndMXNrau4QIRU5GrumBmiy4Q==",
+            "dependencies": {
+                "@nivo/colors": "0.85.1",
+                "@nivo/core": "0.85.1",
+                "@react-spring/web": "9.4.5 || ^9.7.2",
+                "@types/prop-types": "^15.7.2",
+                "lodash": "^4.17.21",
+                "prop-types": "^15.7.2"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
+        "node_modules/@nivo/axes": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.85.1.tgz",
+            "integrity": "sha512-qhqyamgH8CAdOGEiLwwnqMpPKN6bv9FmKr/75UrNcAvWbU0PZ3unZJGKNkuFzlVAI9/RVvOUvXEE0rRBqV93qg==",
+            "dependencies": {
+                "@nivo/core": "0.85.1",
+                "@nivo/scales": "0.85.1",
+                "@react-spring/web": "9.4.5 || ^9.7.2",
+                "@types/d3-format": "^1.4.1",
+                "@types/d3-time-format": "^2.3.1",
+                "@types/prop-types": "^15.7.2",
+                "d3-format": "^1.4.4",
+                "d3-time-format": "^3.0.0",
+                "prop-types": "^15.7.2"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
+        "node_modules/@nivo/bar": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.85.1.tgz",
+            "integrity": "sha512-42Hjvt5YJ9O5Ew+SrZ+jd8NR30odSRuHS/B4tpsL/Yqg2MjmpB+niRMuybEhUAuhQ0aCKvwUHlocjwRRzNXqnA==",
+            "dependencies": {
+                "@nivo/annotations": "0.85.1",
+                "@nivo/axes": "0.85.1",
+                "@nivo/colors": "0.85.1",
+                "@nivo/core": "0.85.1",
+                "@nivo/legends": "0.85.1",
+                "@nivo/scales": "0.85.1",
+                "@nivo/tooltip": "0.85.1",
+                "@react-spring/web": "9.4.5 || ^9.7.2",
+                "@types/d3-scale": "^4.0.8",
+                "@types/d3-shape": "^2.0.0",
+                "d3-scale": "^4.0.2",
+                "d3-shape": "^1.3.5",
+                "lodash": "^4.17.21"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
+        "node_modules/@nivo/colors": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.85.1.tgz",
+            "integrity": "sha512-61qG98cfyku0fTJTdtCTS3zBQKt88URh4FAvlQIoifvKg0607S2Gz5l7P9KJfN7xEK5tmE4bRaOMmjc4AZS2Kg==",
+            "dependencies": {
+                "@nivo/core": "0.85.1",
+                "@types/d3-color": "^3.0.0",
+                "@types/d3-scale": "^4.0.8",
+                "@types/d3-scale-chromatic": "^3.0.0",
+                "@types/prop-types": "^15.7.2",
+                "d3-color": "^3.1.0",
+                "d3-scale": "^4.0.2",
+                "d3-scale-chromatic": "^3.0.0",
+                "lodash": "^4.17.21",
+                "prop-types": "^15.7.2"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
+        "node_modules/@nivo/core": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.85.1.tgz",
+            "integrity": "sha512-366bc4hBicsitcinQyKGfUPpifk5W60RAjwZ4sQkY8R6OzwPMgY+eu/sfPZTNcY7rsleGg8whX0A2dBg2czWMA==",
+            "dependencies": {
+                "@nivo/recompose": "0.85.0",
+                "@nivo/tooltip": "0.85.1",
+                "@react-spring/web": "9.4.5 || ^9.7.2",
+                "@types/d3-shape": "^2.0.0",
+                "d3-color": "^3.1.0",
+                "d3-format": "^1.4.4",
+                "d3-interpolate": "^3.0.1",
+                "d3-scale": "^4.0.2",
+                "d3-scale-chromatic": "^3.0.0",
+                "d3-shape": "^1.3.5",
+                "d3-time-format": "^3.0.0",
+                "lodash": "^4.17.21",
+                "prop-types": "^15.7.2"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/nivo/donate"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
+        "node_modules/@nivo/legends": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.85.1.tgz",
+            "integrity": "sha512-v2DRiUieo3/iV1Fft3i9pbGTkE5arXzmw+p1ptb4xfBBPpd0hSAHvaePXDY370G31dsh2v5LouL97u+q12li4Q==",
+            "dependencies": {
+                "@nivo/colors": "0.85.1",
+                "@nivo/core": "0.85.1",
+                "@types/d3-scale": "^4.0.8",
+                "@types/prop-types": "^15.7.2",
+                "d3-scale": "^4.0.2",
+                "prop-types": "^15.7.2"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
+        "node_modules/@nivo/recompose": {
+            "version": "0.85.0",
+            "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.85.0.tgz",
+            "integrity": "sha512-UptKwVJ9mlGQKn4a/JiORWbZgo6hT+qEpKBKIs9BUHRIW0a4T0BIE2PA+uDMPpNxzNFgOCu/y8iM5Rhs6QmrmA==",
+            "dependencies": {
+                "@types/prop-types": "^15.7.2",
+                "@types/react-lifecycles-compat": "^3.0.1",
+                "prop-types": "^15.7.2",
+                "react-lifecycles-compat": "^3.0.4"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
+        "node_modules/@nivo/scales": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.85.1.tgz",
+            "integrity": "sha512-zObimCMjbbioMpQtVSGmr52OTn+BVJZsyhKHFx7CK57RA+OW/9lGnvqzc0rnFxl8WBqvHk7wReE5UI8xva/6Zw==",
+            "dependencies": {
+                "@types/d3-scale": "^4.0.8",
+                "@types/d3-time": "^1.1.1",
+                "@types/d3-time-format": "^3.0.0",
+                "d3-scale": "^4.0.2",
+                "d3-time": "^1.0.11",
+                "d3-time-format": "^3.0.0",
+                "lodash": "^4.17.21"
+            }
+        },
+        "node_modules/@nivo/scales/node_modules/@types/d3-time-format": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.4.tgz",
+            "integrity": "sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg=="
+        },
+        "node_modules/@nivo/tooltip": {
+            "version": "0.85.1",
+            "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.85.1.tgz",
+            "integrity": "sha512-lX0/MuDI9HvGzYxAtE3mnriYEgFHBWf7d5BMqUifJZIyg82XkI9g3z6vwAwPKRJ52rON9Yhik42+gwFMFj3BrA==",
+            "dependencies": {
+                "@nivo/core": "0.85.1",
+                "@react-spring/web": "9.4.5 || ^9.7.2"
+            },
+            "peerDependencies": {
+                "react": ">= 16.14.0 < 19.0.0"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3661,6 +3828,66 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@react-spring/animated": {
+            "version": "9.7.3",
+            "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz",
+            "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==",
+            "dependencies": {
+                "@react-spring/shared": "~9.7.3",
+                "@react-spring/types": "~9.7.3"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
+        "node_modules/@react-spring/core": {
+            "version": "9.7.3",
+            "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz",
+            "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==",
+            "dependencies": {
+                "@react-spring/animated": "~9.7.3",
+                "@react-spring/shared": "~9.7.3",
+                "@react-spring/types": "~9.7.3"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/react-spring/donate"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
+        "node_modules/@react-spring/shared": {
+            "version": "9.7.3",
+            "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz",
+            "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==",
+            "dependencies": {
+                "@react-spring/types": "~9.7.3"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
+        "node_modules/@react-spring/types": {
+            "version": "9.7.3",
+            "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz",
+            "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw=="
+        },
+        "node_modules/@react-spring/web": {
+            "version": "9.7.3",
+            "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz",
+            "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==",
+            "dependencies": {
+                "@react-spring/animated": "~9.7.3",
+                "@react-spring/core": "~9.7.3",
+                "@react-spring/shared": "~9.7.3",
+                "@react-spring/types": "~9.7.3"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/@reduxjs/toolkit": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz",
@@ -3719,6 +3946,52 @@
             "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
             "dev": true
         },
+        "node_modules/@types/d3-color": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+            "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+        },
+        "node_modules/@types/d3-format": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz",
+            "integrity": "sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA=="
+        },
+        "node_modules/@types/d3-path": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-2.0.4.tgz",
+            "integrity": "sha512-jjZVLBjEX4q6xneKMmv62UocaFJFOTQSb/1aTzs3m3ICTOFoVaqGBHpNLm/4dVi0/FTltfBKgmOK1ECj3/gGjA=="
+        },
+        "node_modules/@types/d3-scale": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+            "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+            "dependencies": {
+                "@types/d3-time": "*"
+            }
+        },
+        "node_modules/@types/d3-scale-chromatic": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
+            "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw=="
+        },
+        "node_modules/@types/d3-shape": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-2.1.7.tgz",
+            "integrity": "sha512-HedHlfGHdwzKqX9+PiQVXZrdmGlwo7naoefJP7kCNk4Y7qcpQt1tUaoRa6qn0kbTdlaIHGO7111qLtb/6J8uuw==",
+            "dependencies": {
+                "@types/d3-path": "^2"
+            }
+        },
+        "node_modules/@types/d3-time": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz",
+            "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g=="
+        },
+        "node_modules/@types/d3-time-format": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz",
+            "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg=="
+        },
         "node_modules/@types/eslint": {
             "version": "8.4.10",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz",
@@ -3814,6 +4087,14 @@
                 "@types/react": "*"
             }
         },
+        "node_modules/@types/react-lifecycles-compat": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+            "integrity": "sha512-1CM48Y9ztL5S4wjt7DK2izrkgPp/Ql0zCJu/vHzhgl7J+BD4UbSGjHN1M2TlePms472JvOazUtAO1/G3oFZqIQ==",
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
         "node_modules/@types/scheduler": {
             "version": "0.16.2",
             "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -5619,6 +5900,105 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
+        "node_modules/d3-array": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+            "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+            "dependencies": {
+                "internmap": "1 - 2"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-color": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+            "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-format": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+            "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+        },
+        "node_modules/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+            "dependencies": {
+                "d3-color": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-path": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+            "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+        },
+        "node_modules/d3-scale": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+            "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+            "dependencies": {
+                "d3-array": "2.10.0 - 3",
+                "d3-format": "1 - 3",
+                "d3-interpolate": "1.2.0 - 3",
+                "d3-time": "2.1.1 - 3",
+                "d3-time-format": "2 - 4"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale-chromatic": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+            "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+            "dependencies": {
+                "d3-color": "1 - 3",
+                "d3-interpolate": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale/node_modules/d3-time": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+            "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+            "dependencies": {
+                "d3-array": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-shape": {
+            "version": "1.3.7",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+            "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+            "dependencies": {
+                "d3-path": "1"
+            }
+        },
+        "node_modules/d3-time": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+            "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+        },
+        "node_modules/d3-time-format": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+            "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+            "dependencies": {
+                "d3-time": "1 - 2"
+            }
+        },
         "node_modules/data-view-buffer": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -8141,6 +8521,14 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/internmap": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+            "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/interpret": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -8914,6 +9302,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -10432,8 +10825,7 @@
         "node_modules/react-lifecycles-compat": {
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-            "dev": true
         },
         "node_modules/react-redux": {
             "version": "9.1.0",

package.json

@@ -30,6 +30,7 @@
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
+        "@nivo/bar": "^0.85.1",
         "@reduxjs/toolkit": "^2.2.1",
         "@types/react": "^18.2.60",
         "@types/react-dom": "^18.2.19",

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
+    }
+  />
+)