Mashup: Progress by Custom Field

tau.mashups
  .addDependency('react')
  .addDependency('tau/api/layout-renderer/v1/registerReactComponent')
  .addDependency('tau/api/layout-renderer/v1/LayoutContextConsumer')
  .addDependency('tau/api/layout-renderer/v1/useEntityQuery')
  .addMashup(function(React,registerReactComponent,LayoutContextConsumer,useEntityQuery) {
    //Name of the Custom Field based on which the Progress is calculated
    //The value of this custom field should be between 0 and 1
    const progressCF = `ProgressbyStoryPoint`; 
    const progressHeader = "Progress by Story Points";
    
    registerReactComponent({
      type: `customProgressByPoint`,
      component: function(props) {

        const {
          data,
          isLoading,
          error
        } = useEntityQuery(
          `customProgress:${progressCF}`
        );
        // handle is still loading
        if (isLoading && !data) { // this is the case for initial loading
          return React.createElement("div","Loading...");
        }
        
        //handle error
        if (error) {
          console.error(error);
          return React.createElement("div","Error");
        }
        
        //console.log(data);
        const progressValue = Math.round(data.customProgress * 100);
        
        return React.createElement("div", {className: "layout-renderer__component-container", style: {display: "block"}}, 
            React.createElement("div", {className: "entity-progress-box entity-progress-box--simple i-role-entity-progress-panel"}, 
            [
                React.createElement("div", {className: "ui-progressbar__data"},
                [
                    React.createElement("div", {className: "ui-progressbar__data__label"}, progressHeader),
                    React.createElement("div", {className: "ui-progressbar__data__percent"}, progressValue + "%")
                ]
                ),
                React.createElement("div", {className: "ui-progress-bar-progress ui-progressbar__progress"},
                    React.createElement("div", {className: "ui-progress-progress ui-progressbar__progress__indicator", style: {width: progressValue +"%", backgroundColor: "#4cd0a4"}})
                )
                ]
            )
        );
      }});
  });

{
  "type": "customProgressByPoint"
}