Pattern frequencies per company/difficulty

.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 => (