Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Statistics - Numbers chart #14

Merged
merged 5 commits into from
Aug 4, 2024
Merged

Statistics - Numbers chart #14

merged 5 commits into from
Aug 4, 2024

Conversation

isa-leroux448
Copy link

@isa-leroux448 isa-leroux448 commented Jul 2, 2024 •
edited
Loading

🎟️ Ticket: Statistics - Numbers chart

👷 Changes: Added a grid that maps an object's data (for example dietary restrictions).

💭 Notes:

  • Not responsive yet - the width is fixed for now. I'm assuming that responsiveness will be added when the stats page layout is implemented
Screenshot 2024-07-02 at 12 00 30 AM

@vercel Vercel
Copy link

vercel bot commented Jul 2, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
biztech-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 25, 2024 3:00am

@isa-leroux448 isa-leroux448 changed the base branch from main to dev July 2, 2024 07:00
@isa-leroux448 isa-leroux448 marked this pull request as ready for review July 2, 2024 07:08
@AllanT102
Copy link
Contributor

The data shouldnt be coupled with the "dietary restrictions" It should be able to render dynamic sets of data, so I think just the naming of things should be generalized.

Also, we need to have nested labels ie. the dietary one in the figma design should be able to have:
other
peanuts
etc...

Note the indents ^

@isa-leroux448
Copy link
Author

isa-leroux448 commented Jul 4, 2024 •
edited
Loading

My bad I got a bit confused. I assumed we wouldn't need nesting since the data returned from our db isn't currently nested but I just added it in. The component can take non-nested and nested objects now:
Screenshot 2024-07-03 at 11 17 16 PM
Screenshot 2024-07-03 at 11 16 52 PM

For testing you can use these objects:

const dietaryRestrictions = {
  None: 200,
  Vegetarian: 20,
  Vegan: 4,
  Halal: 8,
  Pescetarian: 4,
};

const dietaryRestrictions2 = {
  None: 200,
  Vegetarian: 20,
  Vegan: 4,
  Halal: 8,
  Other: {
    Peanut: 4,
    Seafood: 2,
    Sesame: 1,
  },
};

AllanT102
AllanT102 approved these changes Jul 26, 2024
View reviewed changes
src/components/Stats/StatsTable.tsx Outdated
}

const StatsTable: React.FC<StatsTableProps> = ({
title = "Dietary Restrictions",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

general

src/components/Stats/StatsTable.tsx Outdated
<br />
<div className="grid grid-cols-2 gap-2 text-pale-blue">
{Object.entries(data).map(
([restriction, count], index) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

general

src/components/Stats/StatsTable.tsx Outdated
{Object.entries(data).map(
([restriction, count], index) => (
<>
<div className="col-span-1">{restriction}</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

general

src/components/Stats/StatsTable.tsx Outdated

const StatsTable: React.FC<StatsTableProps> = ({ title, data }) => {
const renderData = (data: Object, marginValue: number = 0): JSX.Element[] => {
return Object.entries(data).map(([restriction, count]) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

restriction -> label

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@isa-leroux448

src/components/Stats/StatsTable.tsx Outdated
className="col-span-2"
style={{ marginLeft: `${marginValue}px` }}
>
{restriction}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

label

src/components/Stats/StatsTable.tsx Outdated
className="col-span-2"
style={{ marginLeft: `${marginValue}px` }}
>
{restriction}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

label

@AllanT102 AllanT102 merged commit ddb7ca1 into dev Aug 4, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AllanT102 AllanT102 AllanT102 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@isa-leroux448 @AllanT102