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
Changes:
- Remove Text that is displayed when hovering over the bar in the Bar Graph and Grouped Bar Graph - DIDN'T DO IT FOR Pie Charts since I wasn't sure if we still want the text or no.
- Add tooltips for Bar Graph + Grouped Bar Graph + Pie Chart
NOTE: weird tooltip position with PieChart, might be related to other tooltip bugs we have
Used this approach for the PieChart: https://codesandbox.io/s/mjp8lmvop?expanddevtools=1
The only approach that worked with the PieChart required to have the PieSlice code within the PieChart component.
Improvement we can make:
- For the Pie Chart, we could display the percentage and the number of answers in the tooltip to provide more context.
- For the Pie Chart, we could also display label in tooltip.
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #112
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Closes#5.
To fix:
- [x] Inner pie slice text not perfectly centered
- [x] Create optional props for `padRadius` and `innerRadius`
- [x] Change colors to global colors and merge from main to get fonts
Also, outer labels can get cut off if they are long enough, but the `labelWidth` is provided as a prop for the user to adjust.
Staging url: https://j285he-pie-chart-csc-class-profile-staging-snedadah.k8s.csclub.cloud
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #19
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>