continuous-integration/drone/push Build is passingDetails
Applied the fix used by the WordCloud to all graphs so that tooltips will be properly positioned, even if the graph is centered on the page. Did so by refactoring some tooltip logic in to a common getTooltipPosition used by all graphs.
One thing is that this simplifies all the tooltips to simply follow the mouse, instead of locking onto certain "blocks"/bars like in the grouped bar graph, which is more consitant with all the other tooltips, since we only had this in some cases.
Do we think that having the tooltip be sticky to a certain bar/group is important?
Closes#89https://fix-tooltip-center-csc-class-profile-staging-snedadah.k8s.csclub.cloud/samplePage/
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #118
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Summary of noteworthy changes:
- **Pie charts do NOT currently calculate percentages of values**. I left it as is, and just changed the data to reflect the percentages instead of the actual value (because that is what we're displaying)
- Minor fix to the Stacked Bar Graph so that the legend displays on top in a row instead of in a column to the right of the graph.
- Added styling to Carousel so that it is properly centered.
- In the Stacked Bar Graphs, I grouped certain ranges of values because the value for the individual categories would have been too small and insignificant otherwise.
Problems:
- [x] WordCloud still doesn't display the right text-value association no matter how much I tweak the values. The font size is correctly displayed though and all words are shown (I counted!). Errors still show in the console log.
- [ ] WordCloud still weirdly overflows sometimes when I resize my window. See figure below. (#98)
- [ ] Stacked Bar Graph still needs some fixing (to be done in a separate PR) related to how the legend is displayed + labels.
- [x] **Description blurbs NEED to be re-read before copy-pasting**. I just noticed that the given blurbs are sometimes incomplete, grammatically incorrect, or erroneous.
- [ ] Bar graphs and pie charts need to have tooltips. (all graphs) (#97)
- [ ] Tooltips in Stacked Bar Graphs are not well positioned when hovering over them. (#89)
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #94
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Notes:
- Add Stacked Bar Graph component using the `BarStack` component from Visx.
- Hovering over a bar will add a highlight on the hovered bar and not the entire stacked bar (I have not yet found a way to highlight the entire stacked bar)
- Hovering over a bar will also show a tooltip box with the data for each bar. (The number represents the height of the bar and not the cumulative stacked bar height)
- In the mock data, the number given to each key represent their individual height (and not their overall value). The graph calculates the total height of the stacked bars.
- Missing percentage next to the left axis labels
- Resizable width, height, and margins. Customizable number of ticks for the y axis.
Staging: https://stackedbar-component-csc-class-profile-staging-snedadah.k8s.csclub.cloud/playground/
Co-authored-by: Miniapple8888 <miniapple8888@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #37
Reviewed-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Shahan Nedadahandeh
Mark Chiu