Problems pattern frequency doesn't show colors for new companies

These pills are gray for the newly added companies (e.g. Airbnb) while they are supposed to be colored by difficulty. The pills work correctly for the companies we previously had like Apple and Microsoft.

Expected:

Current:

Steps to reproduce:

Select any company from the dropdown list under Companies
Observe the pills under Problems pattern frequency

Possibly related to either https://github.com/seanprashad/leetcode-patterns/pull/214/files#diff-9aa6b25aa4aab24215ebcedc56e0ff3c2a2e481a30b42eb3ca0fcce2c7752789R402 or #227

One problem that I see here is from a UX perspective - the colouring is also used in the Difficulty column to denote Easy/Medium/Hard questions.

Here, we use the same colour schema, but for a different purpose:

leetcode-patterns/src/components/PatternFrequencies/index.js

Lines 31 to 35 in bdbb042

    
           const frequencyRate = { 
        
             easy: Math.round(highestFrequency / 3), 
        
             medium: Math.round((highestFrequency / 3) * 2), 
        
             hard: highestFrequency, 
        
           };

Since we have two different contexts, we should look into a better colouring scheme when revisiting this!

More breadcrumbs:

leetcode-patterns/src/components/PatternFrequencies/index.js

Line 47 in 2409a60

className={`${getFrequencyClass(patternsMap[pattern])}`}

Looks like some companies, like Apple, show up correctly:

The issue is in this line:

leetcode-patterns/src/components/PatternFrequencies/index.js

Line 27 in 2409a60

if (highestFrequency / 3 < 1) {

The colors will only show up if a given company has a category of questions (e.g. heap) that has a frequency of at least three. I tested this with Airbnb by adding the company and the "Heap" pattern to the first question in questions.json (Contains Duplicate), and the colors immediately show for all of them.

How do we want the colors to be in these cases?

How do we want the colors to be in these cases?

Hmm well, I'm not sure to be honest. Ideally, I think some sort of coloured gradient would look nice, where a darker shade maps to a pattern that is more frequent. There's a bunch of websites to help do the CSS, like https://coolors.co/gradient-maker.

Edit: On second thought, let's choose something easy - red if the frequency is >=5 and orange for everything else. We can fiddle around with an appropriate colour scheme after fixing this bug!

	const frequencyRate = {
	easy: Math.round(highestFrequency / 3),
	medium: Math.round((highestFrequency / 3) * 2),
	hard: highestFrequency,
	};