Untitled
const SecuritiesSeverityComp = ({ header, security }) => { const [open, setOpen] = useState(""); console.log("open", open); const formatNumber = (num) => { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; const formatPercentage = (value) => `${value}%`; const metrics = [ { key: "premium", label: "Premium", format: formatNumber }, { key: "adequacy", label: "Adequacy", format: formatPercentage }, { key: "rateOnLine", label: "Rate on Line", format: formatPercentage }, { key: "ultimateLossRatio", label: "Ultimate Loss Ratio", format: formatPercentage, }, ]; const toggle = (id) => { setOpen((prevOpen) => (prevOpen === id ? "" : id)); }; const details = qouteBuilderData[0].details; return ( <div className="accordin-custom-dropdown"> <Accordion open={open} toggle={toggle}> <AccordionItem> <AccordionHeader targetId="1">{header}</AccordionHeader> <AccordionBody accordionId="1"> <table> <thead> <tr> <th></th> <th>Modelled</th> <th></th> <th>Benchmark</th> <th></th> </tr> <tr> <th></th> <th>Unadjusted</th> <th>Adjusted</th> <th>Unadjusted</th> <th>Adjusted</th> </tr> </thead> <tbody> {metrics.map(({ key, label, format }) => ( <tr key={key}> <td>{label}</td> <td>{details.modelled.unadjusted[key]}</td> <td>{details.modelled.adjusted[key]}</td> <td>{details.benchmark.unadjusted[key]}</td> <td>{details.benchmark.adjusted[key]}</td> {/* <td>{item.percentile}%</td> <td>{item.severity.toLocaleString()}</td> */} </tr> ))} </tbody> </table> </AccordionBody> </AccordionItem> </Accordion> </div> ); };
Leave a Comment