Responsive Bar Chart Component using SCSS, React, and TypeScript

Community feedback

• 

  Maksim•590

  @MaxTarasevichPosted about 2 years ago

  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

  2. 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-sudoPosted about 2 years ago

  @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,400

  @elaineleungPosted about 2 years ago

  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-sudoPosted about 2 years ago

  @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,400

  @elaineleungPosted about 2 years ago

  @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-sudoPosted about 2 years ago

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

  0