continuous-integration/drone/push Build is passingDetails
Decided not to fix NITPICK #1 because aligning the line with the edge of the graph can make the grid column gap seem bigger than intended.
- Center align bottom axis labels in both horizontal and vertical graphs
- Right align left axis labels in both horizontal and vertical graphs
- Fixed Cumulative Average to CAV in Academics page.
- Add line at the top of the horizontal graph
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
Reviewed-on: #133
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Closes#110
Fixed the header not being sticky. The reason was due to the overflow-x hidden on the body. Removed that, and instead solved the root cause of the horizontal overflow, which was some graphs overflowing.
This required changing some of the compontent wrapper styles, which I think are overall improved now (slightly less hacks). But please check to make sure that the alignment of graphs and text isnt destroyed on various screen sizes. I checked and it seemed fine.
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #123
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
https://j285he-front-page-csc-class-profile-staging-snedadah.k8s.csclub.cloud/
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
Reviewed-on: #68
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
Co-authored-by: Jared He <j285he@csclub.uwaterloo.ca>
Co-committed-by: Jared He <j285he@csclub.uwaterloo.ca>
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
Todo:
- [x] Fix Grouped bar graphs (done in a separate PR) (#104) DO NOT MERGE BEFORE OTHER GROUPED BAR PR IS DONE: #108
- [x] Fix responsiveness of quotation carousels.
Note that Lifestyle and Interests link in BottomNav (that appears in the co-op and Intimacy and Drugs pages) is overflowing because the text is a bit too long in mobile.
Other changes:
- Add minWidth to QuotationCarousel
- Fix friends page pie charts percentage values (one of them got converted into a bar graph because the values were too small for the pie to display itself at times and we already had many pie charts in that page already)
- Lifestyle and Interests page had the wrong bottom nav links.
- Fixed the `lowerLabel` value of bar graphs in multiple pages since the alternating labels aren't really necessary. Now that I'm doing it pretty frequently, I think it should be made a default value perhaps 🤔
- SectionWrapper component is fixed so it's centered in mobile.
- Fix ComponentWrapper for mobile responsive purposes
https://intimacy-drugs-page-csc-class-profile-stagin-snedadah.k8s.csclub.cloud/intimacy-and-drugs/
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #103
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Changes are very similar to the ones made in this PR: #107
This must be merged before Intimacy and Drugs page is merged.
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #108
Reviewed-by: Shahan Nedadahandeh <snedadah@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
This PR creates a new util file `DefaultProp` that provides default prop values for graph/chart components. More values could be added in the future as the pages are developed.
staging: (shahan: sorry, due to a unlucky naming this branch name doesnt work with staging )
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #87
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Closes#80Closes#78
Added finer control for word cloud min/max font sizes. Changed defaults to be a bit more sensible, and also adjusted the values for the demographics page word cloud to display all data (main culprit was "wordPadding" was too big)
Added a console.error for when not all the words are being display to aid in development for when we're adjusting the min/max font sizes.
Fixed word cloud tooltip not being correct on centered word clouds.
Added a min width to the word cloud, aniticipating changes from #85https://fix-wordcloud-data-csc-class-profile-staging-snedadah.k8s.csclub.cloud/samplePage/https://fix-wordcloud-data-csc-class-profile-staging-snedadah.k8s.csclub.cloud/demographics/
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #84
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
* Add alternating label functionality to vertical bar graphs when the width of the graph reaches its `minWidth`
* Add `minWidth` prop to horizontal and vertical bar graphs, by default, set to 500 (make a PR to contain these default prop values)
* Add overflow scroll on mobile for horizontal and vertical bar graphs
https://fix-mobile-bug-labels-csc-class-profile-stag-snedadah.k8s.csclub.cloud/
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #83
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Changes: (outside of Demographics page)
* colour of the text (might be changed later on) because pure white strains the eye (contrast is too high).
* font size + line height
* SectionHeader word break fix of the title
* `isMobile` breakpoint is changed to 900
https://demographics-page-csc-class-profile-staging-snedadah.k8s.csclub.cloud/demographics/
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #73
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
This PR adds the SectionHeader component as described in the issue. The text is centered, so it's adapted for mobile. Possible improvements (or nitpicks) would be to add spacing around the text in mobile version (left and right margin/padding) or maybe make the title or subtitle smaller? I think it looks fine otherwise.
https://sectionheader-component-csc-class-profile-st-snedadah.k8s.csclub.cloud/
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #75
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Closes#2
Notes:
- Named the component the GroupedBarGraph since it can support bar groups of > 2 bars.
- The horizontal graph is mostly a copy of the vertical graph, with slight modifications. This ended up being the ~~laziest~~ easiest way to implement it.
Reviewed-on: #65
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>
continuous-integration/drone/push Build is passingDetails
Closes#33.
There were many more font sizes in the Figma, but as a best design practice, I chose the four most common.
Staging:
https://j285he-standardize-font-sizes-csc-class-prof-snedadah.k8s.csclub.cloud/
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #46
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Shahan Nedadahandeh
Mark Chiu
Jared He
Beihao Zhou
Amy Wang