feat: Implement Card Horizontal Bar component #237

chadstewart · 2022-08-19T14:55:48Z

What type of PR is this? (check all applicable)

Description

This PR adds the feature of the Card Horizontal Bar component.

Details:

Implemented a version of the Progress Bar from the Highlight Card component that specialized for this component.
Added types for the specific type of object that this component expects. Will also need to be updated in the PR that fixes refactor: correct typescript types usage across the application #212
Currently the language type will be highlighted onmouseover of a bar
The array that is passed in is sorted by percentage
There is a variable that has a list of languages that have specific colors for bars. This will need to be updated to support the various potential languages that can come in. If a language isn't supported, it'll be displayed as a grey bar.

Related Tickets & Documents

Fixes #219

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2022-08-19T14:55:54Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`a9dd852`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6303bcbccb68630008ef03b6
😎 Deploy Preview	https://deploy-preview-237--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2022-08-19T14:56:38Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`a9dd852`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6303bcbca528e3000912d050
😎 Deploy Preview	https://deploy-preview-237--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…g up when it should.

… languages.

… add to list.

…centage is first.

pixelsbyeryc

For languages that are not supported, we can use a lighter gray color, like bg-slate-200 or bg-slate-100.

I think that's it! 🙌

Looking good, Chad

components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx

…f how colors are displayed because of a bug that came up.

chadstewart · 2022-08-20T00:15:58Z

For languages that are not supported, we can use a lighter gray color, like bg-slate-200 or bg-slate-100.

I think that's it! raised_hands

Looking good, Chad

bg-slate-100 or 200 is next to impossible to see on a white background so I made it bg-slate-500 instead.

pixelsbyeryc

Looks good to me! 🍕

I'd love to add some animations when you hover over the bar, but I can open another issue for that. 🚀

0-vortex

Very minor changes, if possible! 👍 🍕

lib/utils/language-to-color.ts

bdougie

Looks good

…a decision between which file to ultimately use.

## [1.3.0-beta.6](v1.3.0-beta.5...v1.3.0-beta.6) (2022-08-22) ### 🍕 Features * Implement Card Horizontal Bar component ([#237](#237)) ([7bbbe40](7bbbe40))

github-actions · 2022-08-22T18:44:44Z

🎉 This PR is included in version 1.3.0-beta.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.3.0](v1.2.3...v1.3.0) (2022-08-29) ### 🧑‍💻 Code Refactoring * Improve the `<ComponentCard>` CSS ([#266](#266)) ([9da4d62](9da4d62)) * Make the avatar component accept custom sizes ([#255](#255)) ([9076e91](9076e91)), closes [#235](#235) ### 🍕 Features * Add Images to Scatter Chart ([#257](#257)) ([20df419](20df419)) * Add item count meta data to Highlight Card ([#254](#254)) ([693479e](693479e)) * Added Reports History component to Reports Page ([#272](#272)) ([c6a56f6](c6a56f6)) * Implement Card Horizontal Bar component ([#237](#237)) ([7bbbe40](7bbbe40)) * Implement Card Table Component ([#243](#243)) ([0cbc6ea](0cbc6ea)) * Implement contribution page ([#263](#263)) ([f41d7f9](f41d7f9)) * Implement Contributor Card Component ([#245](#245)) ([3bd55ea](3bd55ea)) * Implement Reports History Component ([#209](#209)) ([bb531e4](bb531e4)) * Implement the hacktoberfest reports page ([#229](#229)) ([0cfa5e5](0cfa5e5)), closes [#168](#168) * Implement waitlist page ([#210](#210)) ([0826d07](0826d07)), closes [#152](#152) ### 🐛 Bug Fixes * adjusted opinion filter on mobile screens ([#264](#264)) ([2d9785c](2d9785c)) * correct login redirect issues in supabase implemetation ([#274](#274)) ([8fcd81e](8fcd81e)) * correct login redirect issues in supabase implemetation x2 ([#275](#275)) ([0239abd](0239abd)) * correct supabase-ui default style for hover ([#267](#267)) ([a23fe4b](a23fe4b)), closes [#226](#226) * increase truncate string number of words ([#268](#268)) ([ab47a96](ab47a96)), closes [#247](#247) * max width removed from card ([#250](#250)) ([523969a](523969a)), closes [#249](#249) * removes unused function ([b37de35](b37de35)) * Repo count ([#244](#244)) ([d59eef8](d59eef8)) * Update GitSense API route for repos ([#270](#270)) ([8f7e1c5](8f7e1c5))

github-actions · 2022-08-29T19:53:23Z

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.3.0-beta.6](open-sauced/app@v1.3.0-beta.5...v1.3.0-beta.6) (2022-08-22) ### 🍕 Features * Implement Card Horizontal Bar component ([#237](open-sauced/app#237)) ([7bbbe40](open-sauced/app@7bbbe40))

## [1.3.0](open-sauced/app@v1.2.3...v1.3.0) (2022-08-29) ### 🧑‍💻 Code Refactoring * Improve the `<ComponentCard>` CSS ([#266](open-sauced/app#266)) ([9da4d62](open-sauced/app@9da4d62)) * Make the avatar component accept custom sizes ([#255](open-sauced/app#255)) ([9076e91](open-sauced/app@9076e91)), closes [#235](open-sauced/app#235) ### 🍕 Features * Add Images to Scatter Chart ([#257](open-sauced/app#257)) ([20df419](open-sauced/app@20df419)) * Add item count meta data to Highlight Card ([#254](open-sauced/app#254)) ([693479e](open-sauced/app@693479e)) * Added Reports History component to Reports Page ([#272](open-sauced/app#272)) ([c6a56f6](open-sauced/app@c6a56f6)) * Implement Card Horizontal Bar component ([#237](open-sauced/app#237)) ([7bbbe40](open-sauced/app@7bbbe40)) * Implement Card Table Component ([#243](open-sauced/app#243)) ([0cbc6ea](open-sauced/app@0cbc6ea)) * Implement contribution page ([#263](open-sauced/app#263)) ([f41d7f9](open-sauced/app@f41d7f9)) * Implement Contributor Card Component ([#245](open-sauced/app#245)) ([3bd55ea](open-sauced/app@3bd55ea)) * Implement Reports History Component ([#209](open-sauced/app#209)) ([bb531e4](open-sauced/app@bb531e4)) * Implement the hacktoberfest reports page ([#229](open-sauced/app#229)) ([0cfa5e5](open-sauced/app@0cfa5e5)), closes [#168](open-sauced/app#168) * Implement waitlist page ([#210](open-sauced/app#210)) ([0826d07](open-sauced/app@0826d07)), closes [#152](open-sauced/app#152) ### 🐛 Bug Fixes * adjusted opinion filter on mobile screens ([#264](open-sauced/app#264)) ([2d9785c](open-sauced/app@2d9785c)) * correct login redirect issues in supabase implemetation ([#274](open-sauced/app#274)) ([8fcd81e](open-sauced/app@8fcd81e)) * correct login redirect issues in supabase implemetation x2 ([#275](open-sauced/app#275)) ([0239abd](open-sauced/app@0239abd)) * correct supabase-ui default style for hover ([#267](open-sauced/app#267)) ([a23fe4b](open-sauced/app@a23fe4b)), closes [#226](open-sauced/app#226) * increase truncate string number of words ([#268](open-sauced/app#268)) ([ab47a96](open-sauced/app@ab47a96)), closes [#247](open-sauced/app#247) * max width removed from card ([#250](open-sauced/app#250)) ([523969a](open-sauced/app@523969a)), closes [#249](open-sauced/app#249) * removes unused function ([b37de35](open-sauced/app@b37de35)) * Repo count ([#244](open-sauced/app#244)) ([d59eef8](open-sauced/app@d59eef8)) * Update GitSense API route for repos ([#270](open-sauced/app#270)) ([8f7e1c5](open-sauced/app@8f7e1c5))

Initial commit for card horizontal bar.

178cbb8

chadstewart added 12 commits August 19, 2022 09:57

Renamed component to proper name.

68ec226

Made some progress on making the... well progress bar.

f984c5a

Continuing work on the progress bar.

0d7bef3

Some code clean up. Currently having an issue where bar is not showin…

b38a06c

…g up when it should.

Fixed issue if one language is selected. Issue persists with multiple…

ea3f316

… languages.

Fixing a mistake really quickly.

8396097

Solved issue with bar not showing up.

0ca0700

Added a color for languages currently not supported by the color scheme.

a2868b8

Updated story to show not supported language option.

70c2f80

Put language to color in it's own file so it'll be easy for anyone to…

817d63d

… add to list.

Add functionality to sort array based on percentage where highest per…

909d80a

…centage is first.

Doing a bit of clean up.

3e2e7fa

chadstewart requested review from bdougie and pixelsbyeryc August 19, 2022 18:55

chadstewart marked this pull request as ready for review August 19, 2022 18:55

chadstewart added the awaiting review label Aug 19, 2022

pixelsbyeryc suggested changes Aug 19, 2022

View reviewed changes

Made some changes based on code review. Also changed implementation o…

33bae47

…f how colors are displayed because of a bug that came up.

chadstewart requested review from pixelsbyeryc and 0-vortex August 20, 2022 00:16

pixelsbyeryc approved these changes Aug 20, 2022

View reviewed changes

pixelsbyeryc mentioned this pull request Aug 20, 2022

design: Animate the CardHorizontalBar component #241

Closed

1 task

0-vortex suggested changes Aug 20, 2022

View reviewed changes

lib/utils/language-to-color.ts Outdated Show resolved Hide resolved

bdougie approved these changes Aug 22, 2022

View reviewed changes

bdougie added ready-to-merge and removed awaiting review labels Aug 22, 2022

chadstewart and others added 2 commits August 22, 2022 11:37

Updated language to color file using color.json file. Trying to make …

262f71d

…a decision between which file to ultimately use.

fix: adjust types for colors json coming in as strings

a9dd852

0-vortex approved these changes Aug 22, 2022

View reviewed changes

chadstewart merged commit 7bbbe40 into beta Aug 22, 2022

chadstewart deleted the 219-card-horizontal-bar branch August 22, 2022 18:34

github-actions bot added the released on @beta label Aug 22, 2022

github-actions bot added the released label Aug 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement Card Horizontal Bar component #237

feat: Implement Card Horizontal Bar component #237

chadstewart commented Aug 19, 2022 •

edited

netlify bot commented Aug 19, 2022 •

edited

netlify bot commented Aug 19, 2022 •

edited

pixelsbyeryc left a comment

chadstewart commented Aug 20, 2022

pixelsbyeryc left a comment

0-vortex left a comment

bdougie left a comment

github-actions bot commented Aug 22, 2022

github-actions bot commented Aug 29, 2022

feat: Implement Card Horizontal Bar component #237

feat: Implement Card Horizontal Bar component #237

Conversation

chadstewart commented Aug 19, 2022 • edited

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Aug 19, 2022 • edited

✅ Deploy Preview for oss-insights ready!

netlify bot commented Aug 19, 2022 • edited

✅ Deploy Preview for design-insights ready!

pixelsbyeryc left a comment

Choose a reason for hiding this comment

chadstewart commented Aug 20, 2022

pixelsbyeryc left a comment

Choose a reason for hiding this comment

0-vortex left a comment

Choose a reason for hiding this comment

bdougie left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 22, 2022

github-actions bot commented Aug 29, 2022

chadstewart commented Aug 19, 2022 •

edited

netlify bot commented Aug 19, 2022 •

edited

netlify bot commented Aug 19, 2022 •

edited