LGTM! I just have a small comment about something to change. Non-blocking though.
Everything LGTM! Interesting that you also committed the script you used to convert the data to text and value. I might consider also putting my scripts there for future usage!🤔
Just a question, where did you choose these colours from? I think we should aim to reuse colours defined in the _app.css file as much as possible instead of definining new colours. It's also better if you define the variable names in that file so that it will be easier to change these values later on (since they are all mostly in that file).
There should be perhaps a cursor: pointer property to make the button seem clickable?
Instead of hardcoding this value, we could perhaps use buttonList[0]?
Hey @r2shuai ! Thanks for working on this issue, it's definitely more complex since we don't have the design for this component! In our case (or at least, in this term), the type of the graph shouldn't change (it should be the same for all terms! Have we considered trying to put the buttons above instead? How would that look?
Some of these categories are repeat of each other. E.g. Communication, Become more social, (to a lesser extent) Improved relationship
Mindfulness & Mature sounds weird, I don't know if it's just me... I prefer keeping mindfulness only.