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>
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>
continuous-integration/drone/push Build is passingDetails
Done:
- [x] Display boxplot with left and bottom axis in `playground.tsx`
- [x] Add mock data for boxplot
- [x] Hovering over boxplot displays a Tool Tip box.
My version:
Note:
- No percentage displayed next to value axis labels.
- We can add outlier points although it could complicate the graph.
- Still displays the following error:
- Error: Hydration failed because the initial UI does not match what was rendered on the server.
- Error: Text content does not match server-rendered HTML.
- Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Staging: https://boxplot-component-csc-class-profile-staging-snedadah.k8s.csclub.cloud/
Co-authored-by: Miniapple8888 <miniapple8888@gmail.com>
Co-authored-by: Emily Chiu <e26chiu@corn-syrup.csclub.uwaterloo.ca>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #34
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Made without visx, because that was easier.
Closes#10.
Co-authored-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Reviewed-on: #36
Reviewed-by: j285he <j285he@localhost>
continuous-integration/drone/push Build is passingDetails
Just realized that we shouldn't have quotes around `monospace` 🤦
Co-authored-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Reviewed-on: #28
Reviewed-by: j285he <j285he@localhost>
continuous-integration/drone/push Build is passingDetails
Adds a `<BarGraphHorizontal />` component and a `<BarGraphVertical />` component.
Closes#1.
Possible changes for the future:
- Refactor to make the horizontal and vertical bar graphs into one component
- Add (optional) graph title
Co-authored-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Reviewed-on: #16
Reviewed-by: Shahan Neda <snedadah@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passingDetails
Fixes#23
Kudos to @j285he for noticing that we had commas in `pages/font.css` when we should've had semicolons.
Co-authored-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Reviewed-on: #24
Reviewed-by: Shahan Neda <snedadah@csclub.uwaterloo.ca>
Since inconsolata is a monospace font, I think we should change the fallback to be monospace as well (it also matches the aesthetic of the design more closely).
What do you all think?
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #20
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
- Added variables for the theme colours (pink, orange, lighter pink, dark blue, etc.)
- Added variables for common styles (header, background, text, link, etc.) in dark mode and light mode; default theme is in dark mode
- Added font family Inconsolata
- Styled the page background + font family
Note: Using custom properties for variables (CSS as a single source of truth)
Missing:
- Line height
- Spacing
Co-authored-by: Emily Chiu <e26chiu@uwaterloo.ca>
Reviewed-on: #14
Reviewed-by: Shahan Neda <snedadah@csclub.uwaterloo.ca>
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Shahan Nedadahandeh
Mark Chiu
Beihao Zhou
Amy Wang
Jared He