Sharepoint JSON : Progress bar not working

Question

Hi!

I've created a automated flow to request approve via "Approve/Reject - Everyone must approve" and update my SharePoint List for the approval decision in "Ticket Status" column which doesn't have any issue.

I would like to optimize the progress bar check like in the link below and formatted via JSON.
https://answers-afd.microsoft.com/static/images/image-not-found.jpgI've followed the process on this tutorial and the JSON provided, however, I'm not getting the result I wanted to get.
SharePoint/ApprovalTimeline at master · rdorrani/SharePoint · GitHub

All items are recognised to flex end, which is the outcome of iferror formula, regardless of status like "Approval In Progress" or when all the required approval have not been obtained (e.g., when only 1 of 2 approvers approved).

Appreciate your brilliant ideas!

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json","elmType": "div","style": {"position": "relative","width": "100%","height": "70px"},"children": [{"elmType": "div","style": {"position": "absolute","display": "flex","align-items": "center","justify-content": "center","width": "100%","height": "100%"},"children": [{"elmType": "div","style": {"width": "100%","height": "5px"},"attributes": {"class": "ms-bgColor-neutralSecondaryAlt"}}]},{"elmType": "div","style": {"position": "absolute","display": "flex","align-items": "center","justify-content": "=if([$TicketStatus]=='Approval In Progress','center',if([$TicketStatus]=='Rejected','left','flex-end'))","width": "100%","height": "100%"},"children": [{"elmType": "div","style": {"width": "25px","height": "25px","border-radius": "50%","cursor": "pointer"},"attributes": {"class": "=if([$TicketStatus]=='Rejected','ms-bgColor-red',if([$TicketStatus]=='Approval In Progress','ms-bgColor-yellow',if([$TicketStatus]=='Approve','ms-bgColor-green','ms-bgColor-blue')))"},"customCardProps": {"directionalHint": "rightCenter","openOnEvent": "click","isBeakVisible": true,"formatter": {"elmType": "div","style": {"width": "300px","height": "300px","padding": "10px 20px 10px 20px","background-color": "#E6E6E3"},"children": [{"elmType": "div","txtContent": "=if([$TicketStatus]!='Approval In Progress',[$ApprovalComments],'No History Available'","style": {"width": "100%","height": "100%"}}]}}}]}]}

Answer 1

Dear Loudi Tinapay (Titan WH),

Good day! Thank you for posting to Microsoft Community. We are happy to help you

Regarding your query on JSON code. Please understand that this query is outside of our support boundaries. For you to be assisted properly, please reach out to Questions - Microsoft Q&A; I am sure that our experts from that team can address your query effectively and accurately.

Thank you for your cooperation and understanding. Please do not hesitate to post your queries in Microsoft Community and we will always do our best to assist you!

Sincerely,

Tin | Microsoft Community Moderator