Skip to content

Add Chullora component and table with dynamic data #1

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

Open
MinhazAyaaz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Chullora component and table with dynamic data #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 166 additions & 0 deletions src/Components/Chullora.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import React from "react";
import { useState, useEffect } from "react";
import { ChulloraRun } from "../data/ChulloraRun";
import Detailed from "./Detailed";

function Chullora(props) {
const [tableRows, setTableRows] = useState([]);
const [tableValues, setTableValues] = useState([]);
let top = 0;

useEffect(() => {

const rowsArray = [];
const valuesArray = [];

const json = ChulloraRun.ChulloraRun.map((item) => {

let pickupScore="NA";
let deliveryScore="NA";
let complianceScore="NA";
let productivityScore="NA";
let totalScore="Run not active";

props.DataTwoA?.map((temp) => {
Copy link

@gitloop-ai gitloop-ai bot Sep 2, 2024

Choose a reason for hiding this comment

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

The use of optional chaining (?.) on props.DataTwoA is good for preventing errors, but consider adding a default value or error handling if props.DataTwoA is undefined.

if(item["Run #"]==temp["Run #"]){
Copy link

@gitloop-ai gitloop-ai bot Sep 2, 2024

Choose a reason for hiding this comment

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

Consider using a more descriptive variable name instead of 'temp'. For example, 'runData' or 'scoreData' would be more meaningful and improve code readability.

pickupScore = temp["Pickup Score"];
deliveryScore = temp["Delivery Score"]
complianceScore = temp["Compliance Score"]
productivityScore = temp["Productivity Score"]
totalScore = temp["Overall Score"]
}
})

return {
...item,
"Pickup Score": pickupScore,
"Delivery Score": deliveryScore,
"Compliance Score": complianceScore,
"Productivity Score": productivityScore,
"Total Score (%)": totalScore,
};
});

// Sort JSON based on "Total Score (%)"
json.sort((a, b) => {
const scoreA = parseFloat(a["Total Score (%)"]);
const scoreB = parseFloat(b["Total Score (%)"]);
return scoreB - scoreA; // Sort in descending order
});

const newData = json.map((item) => {
Copy link

@gitloop-ai gitloop-ai bot Sep 2, 2024

Choose a reason for hiding this comment

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

The 'top' variable is being used as both a number and a string. Consider using separate variables for clarity, such as 'topRank' (number) and 'topDisplay' (string).

if(item["Total Score (%)"]!="Run not active"){
top++;
}
else{
top = ""
}
return{
...item,
"Top 5?":top,
"OSH cost grouping" : "Chullora",
}
});

newData.map((d) => {
rowsArray.push(Object.keys(d));
valuesArray.push(Object.values(d));
});

// Filtered Column Names
setTableRows(rowsArray[0]);

// Filtered Values
setTableValues(valuesArray);
}, []);

return (
<div className="w-full">
Copy link

@gitloop-ai gitloop-ai bot Sep 2, 2024

Choose a reason for hiding this comment

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

The 'class' attribute should be 'className' in React. Update 'class="table-auto border-x border-b w-full text-left text-gray-800"' to use 'className' instead.

<table class="table-auto border-x border-b w-full text-left text-gray-800">
<thead className="">
<tr>
{tableRows.map((rows, index) => {
return (
<th
className="font-bold p-2 border-b border-l border-[#dc291e] text-left bg-[#dc291e] text-white"
key={index}
>
{rows}
</th>
);
})}
</tr>
</thead>
<tbody>
{tableValues.map((value, index) => {
return (
<tr className="odd:bg-gray-100 hover:!bg-red-200" key={index}>
{value.map((val, i) => {
return (
<td className="p-2 border-b border-l text-left" key={i}>
{val}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<div className="w-full flex flex-wrap justify-between">
Copy link

@gitloop-ai gitloop-ai bot Sep 2, 2024

Choose a reason for hiding this comment

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

There are multiple instances of the Detailed component with hardcoded run numbers. Consider generating these dynamically based on the data to improve maintainability and flexibility.

<Detailed runNumber={"055"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"358"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"257"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"155"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"160"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"358"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"059"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"060"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"152"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"153"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"155"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"156"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"157"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"158"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"160"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"255"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"256"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"257"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"258"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"260"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"352"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"358"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"359"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"360"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"452"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"458"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"460"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"558"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"559"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"560"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"658"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"660"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-center">
<Detailed runNumber={"758"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"760"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
</div>
);
}

export default Chullora;