Add progress bars

package.json

@@ -12,11 +12,13 @@
  "enzyme": "^3.11.0",
  "enzyme-adapter-react-16": "^1.15.5",
  "gh-pages": "^2.2.0",
+ "prop-types": "^15.8.1",
  "react": "^16.14.0",
  "react-dom": "^16.14.0",
  "react-ga": "^2.7.0",
  "react-icons": "^3.11.0",
  "react-markdown": "^4.3.1",
+ "react-minimal-pie-chart": "^8.4.0",
  "react-scripts": "^4.0.0",
  "react-scroll": "^1.8.0",
  "react-table": "^7.6.3",

src/components/Table/index.js

@@ -1,10 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import {
  Table as ReactTable,
  Container,
  Row,
  Badge,
+ Progress,
  NavLink,
  Button,
  Modal,
@@ -13,6 +15,7 @@ import {
 } from 'reactstrap';
 import Toggle from 'react-toggle';
 import ReactTooltip from 'react-tooltip';
+import { PieChart } from 'react-minimal-pie-chart';
 import { useTable, useFilters, useSortBy } from 'react-table';
 import {
  FaLock,
@@ -75,10 +78,16 @@ const Table = () => {
  }
  }
 
- const difficultyMap = { Easy: 0, Medium: 0, Hard: 0 };
- const totalDifficultyCount = { Easy: 0, Medium: 0, Hard: 0 };
+ const difficultyMap = { Easy: 0, Medium: 0, Hard: 0, Total: 0 };
+ const totalDifficultyCount = {
+ Easy: 0,
+ Medium: 0,
+ Hard: 0,
+ Total: questions.length,
+ };
  for (let i = 0; i < questions.length; i += 1) {
  difficultyMap[questions[i].difficulty] += checkedList[questions[i].id];
+ difficultyMap.Total += checkedList[questions[i].id];
  totalDifficultyCount[questions[i].difficulty] += 1;
  }
 
@@ -109,7 +118,7 @@ const Table = () => {
  const resetHandler = () => {
  setChecked(new Array(checked.length).fill(false));
  setDifficultyCount(() => {
- return { Easy: 0, Medium: 0, Hard: 0 };
+ return { Easy: 0, Medium: 0, Hard: 0, Total: 0 };
  });
  const count = resetCount + 1;
  setResetCount(count);
@@ -128,51 +137,30 @@ const Table = () => {
  };
 
  return (
- <span>
- <Badge className="" pill>
- <span
- data-tip={`You've completed ${difficultyCount.Easy +
- difficultyCount.Medium +
- difficultyCount.Hard}/${totalDifficultyCount.Easy +
- totalDifficultyCount.Medium +
- totalDifficultyCount.Hard} total questions`}
- >
- Total:{' '}
- {difficultyCount.Easy +
- difficultyCount.Medium +
- difficultyCount.Hard}
- /
- {totalDifficultyCount.Easy +
- totalDifficultyCount.Medium +
- totalDifficultyCount.Hard}
- </span>
- </Badge>
- <br />
- <Badge className="easy" pill>
- <span
- data-tip={`You've completed ${difficultyCount.Easy}/${totalDifficultyCount.Easy} easy questions`}
- >
- Easy: {difficultyCount.Easy}/{totalDifficultyCount.Easy}
- </span>
- </Badge>
- <br />
- <Badge className="medium" pill>
- <span
- data-tip={`You've completed ${difficultyCount.Medium}/${totalDifficultyCount.Medium} medium questions`}
- >
- Medium: {difficultyCount.Medium}/
- {totalDifficultyCount.Medium}
- </span>
- </Badge>
- <br />
- <Badge className="hard" pill>
- <span
- data-tip={`You've completed ${difficultyCount.Hard}/${totalDifficultyCount.Hard} hard questions`}
- >
- Hard: {difficultyCount.Hard}/{totalDifficultyCount.Hard}
- </span>
- </Badge>
- <br />
+ <span className="d-flex flex-column justify-content-between">
+ <PieChart
+ data={[
+ {
+ title: 'One',
+ value: difficultyCount.Total,
+ color: '#ffa929',
+ },
+ ]}
+ totalValue={totalDifficultyCount.Total}
+ label={() =>
+ `${difficultyCount.Total} /
+ ${totalDifficultyCount.Total}`
+ }
+ labelPosition={0}
+ labelStyle={{
+ // Needed for Dark Reader to work
+ fill: 'black',
+ }}
+ startAngle={-90}
+ lineWidth={12}
+ style={{ height: '75px' }}
+ background="#e9ecef"
+ />
  <Button
  className="reset-button"
  outline
@@ -226,6 +214,7 @@ const Table = () => {
  difficultyCount[
  cellInfo.row.original.difficulty
  ] += additive;
+ difficultyCount.Total += additive;
  setDifficultyCount(difficultyCount);
  setChecked([...checked]);
  setData(filteredByCheckbox());
@@ -248,7 +237,28 @@ const Table = () => {
  );
  };
  return (
- <>
+ <div>
+ <div id="difficultyProgress">
+ <ProgressBar
+ style={{ marginBottom: 10 }}
+ name="Easy"
+ value={difficultyCount.Easy}
+ total={totalDifficultyCount.Easy}
+ barClassName="easy"
+ />
+ <ProgressBar
+ name="Medium"
+ value={difficultyCount.Medium}
+ total={totalDifficultyCount.Medium}
+ barClassName="medium"
+ />
+ <ProgressBar
+ name="Hard"
+ value={difficultyCount.Hard}
+ total={totalDifficultyCount.Hard}
+ barClassName="hard"
+ />
+ </div>
  <div
  style={{ whiteSpace: 'nowrap', display: 'inline-block' }}
  >
@@ -264,7 +274,7 @@ const Table = () => {
  </span>
  </Button>
  </div>
- </>
+ </div>
  );
  },
  accessor: 'questions',
@@ -525,4 +535,35 @@ const Table = () => {
  );
 };
 
+const ProgressBar = ({ name, value, total, className, barClassName }) => {
+ return (
+ <div>
+ <div className="d-flex justify-content-between">
+ <div>{name}</div>
+ <div>
+ {value}/{total}
+ </div>
+ </div>
+ <Progress
+ className={className}
+ barClassName={barClassName}
+ value={(value / total) * 100}
+ />
+ </div>
+ );
+};
+
+ProgressBar.propTypes = {
+ name: PropTypes.string.isRequired,
+ value: PropTypes.number.isRequired,
+ total: PropTypes.number.isRequired,
+ className: PropTypes.string,
+ barClassName: PropTypes.string,
+};
+
+ProgressBar.defaultProps = {
+ className: 'progress-bar-sm',
+ barClassName: null,
+};
+
 export default Table;

src/components/Table/styles.scss

@@ -19,6 +19,19 @@
  padding: 0;
  }
 
+ #difficultyProgress {
+ margin-bottom: 25px;
+ font-size: 0.72rem;
+ }
+
+ #difficultyProgress > div:nth-child(n + 2) {
+ margin-top: 12px;
+ }
+
+ .progress-bar-sm {
+ height: 5px;
+ }
+
  .easy {
  background-color: #5cb85c;
  }