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>
e26chiu
Shahan Nedadahandeh
Rebecca-Chou
Beihao Zhou
Mark Chiu
Amy Wang
Jared He