Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d8efe76

Browse files
hiromikZhongou ZHENG
and
Zhongou ZHENG
authored
Pattern frequencies per company/difficulty (#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>
1 parent 8c11cb1 commit d8efe76

File tree

4 files changed

+96
-0
lines changed

4 files changed

+96
-0
lines changed

‎.eslintrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@ module.exports = {
1010
rules: {
1111
'jsx-a11y/href-no-hash': ['off'],
1212
'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
13+
'react/destructuring-assignment': [
14+
'warn',
15+
'always',
16+
{
17+
ignoreClassFields: false,
18+
},
19+
],
1320
'max-len': [
1421
'warn',
1522
{
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Badge } from 'reactstrap';
2+
import React from 'react';
3+
// eslint-disable-next-line import/no-extraneous-dependencies
4+
import PropTypes from 'prop-types';
5+
import './styles.scss';
6+
7+
const PatternFrequencies = ({ filters, rows }) => {
8+
const patternsMap = rows.reduce((acc, row) => {
9+
for (let i = 0; i < row.original.pattern.length; i += 1) {
10+
const pattern = row.original.pattern[i];
11+
acc[pattern] = acc[pattern] + 1 || 1;
12+
}
13+
return acc;
14+
}, Object.create(null));
15+
const sortedPatternsByFrequency = Object.keys(patternsMap).sort(
16+
(a, b) => patternsMap[b] - patternsMap[a],
17+
);
18+
const showComponent = filters.find(filter =>
19+
['companies', 'difficulty'].includes(filter.id),
20+
);
21+
22+
const getFrequencyClass = rate => {
23+
const highestFrequency = Math.round(
24+
patternsMap[sortedPatternsByFrequency[0]],
25+
);
26+
27+
if (highestFrequency / 3 < 1) {
28+
return '';
29+
}
30+
31+
const frequencyRate = {
32+
easy: Math.round(highestFrequency / 3),
33+
medium: Math.round((highestFrequency / 3) * 2),
34+
hard: highestFrequency,
35+
};
36+
37+
return Object.keys(frequencyRate).find(key => rate <= frequencyRate[key]);
38+
};
39+
40+
return showComponent ? (
41+
<div className="pattern-count">
42+
<h5>Problems pattern frequency</h5>
43+
{sortedPatternsByFrequency.map((pattern, index) => (
44+
<Badge
45+
// eslint-disable-next-line react/no-array-index-key
46+
key={pattern + index}
47+
className={`${getFrequencyClass(patternsMap[pattern])}`}
48+
pill
49+
>
50+
<span
51+
data-tip={`${patternsMap[pattern]} "${pattern}" related problems`}
52+
>
53+
{pattern} : {patternsMap[pattern]}
54+
</span>
55+
</Badge>
56+
))}
57+
</div>
58+
) : null;
59+
};
60+
61+
PatternFrequencies.propTypes = {
62+
filters: PropTypes.arrayOf(
63+
PropTypes.shape({ id: PropTypes.string, value: PropTypes.string }),
64+
).isRequired,
65+
rows: PropTypes.arrayOf(
66+
PropTypes.shape({
67+
original: PropTypes.shape({
68+
pattern: PropTypes.arrayOf(PropTypes.string),
69+
}),
70+
}),
71+
).isRequired,
72+
};
73+
74+
export default PatternFrequencies;
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.pattern-count {
2+
padding: 0.75em;
3+
4+
h5 {
5+
font-weight: bold;
6+
}
7+
8+
.badge {
9+
margin: 0.25em 0.25em;
10+
}
11+
}

‎src/components/Table/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import questions from '../../data';
2222

2323
import 'react-toggle/style.css';
2424
import './styles.scss';
25+
import PatternFrequencies from '../PatternFrequencies';
2526

2627
const iconPath = `${process.env.PUBLIC_URL}/assets/icons/`;
2728

@@ -328,6 +329,8 @@ const Table = () => {
328329
getTableProps,
329330
getTableBodyProps,
330331
headerGroups,
332+
filteredRows,
333+
state: { filters },
331334
rows,
332335
prepareRow,
333336
} = useTable(
@@ -343,6 +346,7 @@ const Table = () => {
343346
return (
344347
<Container className="table">
345348
<ReactTooltip />
349+
<PatternFrequencies filters={filters} rows={filteredRows} />
346350
<ReactTable borderless striped hover {...getTableProps()}>
347351
<thead>
348352
{headerGroups.map(headerGroup => (

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /