Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Bar Chart Component using SCSS, React, and TypeScript

#react#typescript#sass/scss
Shiva 670

@shivaprakash-sudo

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Pheww! That took a LOT of time. I wanted to make the bars dynamic according to the data, but I was stuck on how to actually implement it. On top of that, I'm still new to TypeScript and SCSS, so it took even longer with their respective errors😫.

I tried different ways, but they didn't work, so I started looking for other solutions for potential ideas, then I saw one by @elaine and realized using inline styling was a great idea, so I went with that too and it worked🥳! Well, I still had to struggle to incorporate that and the dynamic day thing using TypeScript, but I finally did it😂. I know it's not the perfect solution, but I did my best and learnt a lot about TypeScript and React.

Anyway, feel free to checkout the output and the code.

Community feedback

Maksim 590

@MaxTarasevich

Posted

Hi!

Good job!

I am also currently learning how to work with React, TypeScript, Scss and Tailwind.

I would like to pay your attention to the following points:

1.In the package.json file, I did not find dependencies for sass! Perhaps you will find the link to install it useful:

Adding a Sass Stylesheet

  1. Components.

Looking through your code on GitHub, I found only one component in the components folder - ExpensesChart.tsx, but in this file there was another component - BarChart, and in the App component I found another component - Attribution. I think it's a good idea to put all the components in separate files, it's much easier to read the code!

As for me, splitting the code into components is the most important and difficult part in React!

I found an interesting article about components in React, maybe you will be interested in reading:React components composition: how to get it right.

It also seems to me that each component should have its own style file, so they will become independent and self-sufficient!

I hope my feedback was helpful to you!

Marked as helpful

1

Shiva 670

@shivaprakash-sudo

Posted

@MaxTarasevich

Hello!

Thank you.

Nice! How's it going so far?😀

I installed SASS globally, so I keep forgetting to add it to the dependencies😅.

Yeah, you have some good points about the component structures, I'll try to structure them better from now onwards.

Also, good point, I'll do that from now.

Thank you, it was very helpful😊.

0
Elaine 11,420

@elaineleung

Posted

Hey Shiva, great job in getting this working in the end, and thanks for the mention! I'm glad I could give you some ideas on how to solve the problem 😊

This was really well done in all aspects; the component is optimally responsive, and the use of clamp() makes the sizing transition really smooth. Wish I could check out the JS too but I think you probably needed the files minified in order to have them hosted on GH pages, so anyway, what matters is everything works! The only suggestion I can think of is just to give the tool tip price a bit of spacing from the bar underneath as it kinda looks super close right now. Other than that, I can't say enough good things about it, good work here, and looking forward to more!

0

Shiva 670

@shivaprakash-sudo

Posted

@elaineleung

😊.

I accidentally shared the gh-pages branch link, instead of my main repository, I'm sorry for that. I've updated the solution with the main branch now, so you can check my code if you're still interested.

I did give the tooltip space, but it seems to work only on mobile devices, which is weird. I've tried giving it more space through media queries, but it doesn't seem to work🤔.

0
Elaine 11,420

@elaineleung

Posted

@shivaprakash-sudo I just played around with in the inspector just now; maybe instead of top: -2.5rem, try top: -3rem and see how that looks. Repo looks good!

0
Shiva 670

@shivaprakash-sudo

Posted

@elaineleung I've already tried that, but it didn't work, it seems to have effect only on mobile screens. Thank you😊.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord