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>
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>
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>
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>
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>
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>
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>
Jared He
Mark Chiu
Amy Wang
Shahan Nedadahandeh