Add Histogram Component #66

Open
e26chiu wants to merge 2 commits from histogram-component into main
Collaborator

This PR adds the histogram component. The histogram component is a bargraph component with few changes:

  • No space between bar (achieved by setting barPadding: 0 but this makes the bar wider)
  • Centered bars of graph in the grid (by extending the grid lines)

Note:

  • DEFAULT_LABEL_SIZE can be added as a global style to be reused in multiple components?

Screenshot:
image

Staging:
https://histogram-component-csc-class-profile-stagin-snedadah.k8s.csclub.cloud/

This PR adds the histogram component. The histogram component is a bargraph component with few changes: * No space between bar (achieved by setting `barPadding: 0` but this makes the bar wider) * Centered bars of graph in the grid (by extending the grid lines) Note: * `DEFAULT_LABEL_SIZE` can be added as a global style to be reused in multiple components? Screenshot: ![image](/attachments/cee1791f-affc-4a5c-b12c-1b4dde4affae) Staging: https://histogram-component-csc-class-profile-stagin-snedadah.k8s.csclub.cloud/
e26chiu added 2 commits 2 months ago
snedadah requested review from a258wang 2 months ago
a258wang reviewed 2 months ago
a258wang left a comment
Owner

This is great! My one nitpick is, can we figure out some way to have a 0 appear in the bottom left corner, on the x-axis? I'm thinking that we can change the format of the data prop that the Histogram takes in, and then transform the data before passing it into the Bar Graph (and perhaps change the shiftBottomAxis prop to be isHistogram and then we can use that to make sure everything works the way we want it to).
image

@e26chiu Let me know if you'd like to pair on this and we can find a time to tackle it together!

This is great! My one nitpick is, can we figure out some way to have a 0 appear in the bottom left corner, on the x-axis? I'm thinking that we can change the format of the data prop that the Histogram takes in, and then transform the data before passing it into the Bar Graph (and perhaps change the `shiftBottomAxis` prop to be `isHistogram` and then we can use that to make sure everything works the way we want it to). ![image](/attachments/f9b3092a-e7d9-425b-be70-375c26b87acf) @e26chiu Let me know if you'd like to pair on this and we can find a time to tackle it together!

Reviewers

a258wang was requested for review 2 months ago
All checks were successful
continuous-integration/drone/push Build is passing
Required
Details
This pull request has changes conflicting with the target branch.
components/BarGraph.tsx
data/mocks.ts
pages/playground.tsx
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/cs-2022-class-profile#66
Loading…
There is no content yet.