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.
![image](/attachments/0ef5c998-c6c3-4e36-971e-6a33fe72ed1e)
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:
![image](/attachments/6c8c4499-a1bd-4434-9230-7117266691ea)
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
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>