Pattern frequencies per company/difficulty (seanprashad#113)

* Changed eslint rule to prevent app from crashing * Show pattern frequency when a difficulty or company or both is chosen Co-authored-by: Zhongou ZHENG <zhongou.zheng@gmail.com>

Author: hiromik

.eslintrc.js

@@ -10,6 +10,13 @@ module.exports = {
  rules: {
  'jsx-a11y/href-no-hash': ['off'],
  'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
+ 'react/destructuring-assignment': [
+ 'warn',
+ 'always',
+ {
+ ignoreClassFields: false,
+ },
+ ],
  'max-len': [
  'warn',
  {

src/components/PatternFrequencies/index.js

@@ -0,0 +1,74 @@
+import { Badge } from 'reactstrap';
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import PropTypes from 'prop-types';
+import './styles.scss';
+
+const PatternFrequencies = ({ filters, rows }) => {
+ const patternsMap = rows.reduce((acc, row) => {
+ for (let i = 0; i < row.original.pattern.length; i += 1) {
+ const pattern = row.original.pattern[i];
+ acc[pattern] = acc[pattern] + 1 || 1;
+ }
+ return acc;
+ }, Object.create(null));
+ const sortedPatternsByFrequency = Object.keys(patternsMap).sort(
+ (a, b) => patternsMap[b] - patternsMap[a],
+ );
+ const showComponent = filters.find(filter =>
+ ['companies', 'difficulty'].includes(filter.id),
+ );
+
+ const getFrequencyClass = rate => {
+ const highestFrequency = Math.round(
+ patternsMap[sortedPatternsByFrequency[0]],
+ );
+
+ if (highestFrequency / 3 < 1) {
+ return '';
+ }
+
+ const frequencyRate = {
+ easy: Math.round(highestFrequency / 3),
+ medium: Math.round((highestFrequency / 3) * 2),
+ hard: highestFrequency,
+ };
+
+ return Object.keys(frequencyRate).find(key => rate <= frequencyRate[key]);
+ };
+
+ return showComponent ? (
+ <div className="pattern-count">
+ <h5>Problems pattern frequency</h5>
+ {sortedPatternsByFrequency.map((pattern, index) => (
+ <Badge
+ // eslint-disable-next-line react/no-array-index-key
+ key={pattern + index}
+ className={`${getFrequencyClass(patternsMap[pattern])}`}
+ pill
+ >
+ <span
+ data-tip={`${patternsMap[pattern]} "${pattern}" related problems`}
+ >
+ {pattern} : {patternsMap[pattern]}
+ </span>
+ </Badge>
+ ))}
+ </div>
+ ) : null;
+};
+
+PatternFrequencies.propTypes = {
+ filters: PropTypes.arrayOf(
+ PropTypes.shape({ id: PropTypes.string, value: PropTypes.string }),
+ ).isRequired,
+ rows: PropTypes.arrayOf(
+ PropTypes.shape({
+ original: PropTypes.shape({
+ pattern: PropTypes.arrayOf(PropTypes.string),
+ }),
+ }),
+ ).isRequired,
+};
+
+export default PatternFrequencies;

src/components/PatternFrequencies/styles.scss

@@ -0,0 +1,11 @@
+.pattern-count {
+ padding: 0.75em;
+
+ h5 {
+ font-weight: bold;
+ }
+
+ .badge {
+ margin: 0.25em 0.25em;
+ }
+}

src/components/Table/index.js

@@ -22,6 +22,7 @@ import questions from '../../data';
 
 import 'react-toggle/style.css';
 import './styles.scss';
+import PatternFrequencies from '../PatternFrequencies';
 
 const iconPath = `${process.env.PUBLIC_URL}/assets/icons/`;
 
@@ -328,6 +329,8 @@ const Table = () => {
  getTableProps,
  getTableBodyProps,
  headerGroups,
+ filteredRows,
+ state: { filters },
  rows,
  prepareRow,
  } = useTable(
@@ -343,6 +346,7 @@ const Table = () => {
  return (
  <Container className="table">
  <ReactTooltip />
+ <PatternFrequencies filters={filters} rows={filteredRows} />
  <ReactTable borderless striped hover {...getTableProps()}>
  <thead>
  {headerGroups.map(headerGroup => (