Rally percent done ui component

StackOverflow https://stackoverflow.com/questions/18317899

  •  25-06-2022
  •  | 
  •  

Question

Related to Rally percent done by story count and plan estimate color coding algorithm, but asking the unanswered portion here.

The Percent Done ui component in the SDK 2.0 does not color the cards according to the algorithm used by rally (it only color codes based on a percentage). Is there any way to provide a color coding function or a rendering function to change this functionality to line up with Rally's? Thanks!

[EDIT] - attempting to override existing functionality to use a record rather than a percent done to generate the ui component

Ext.define('Custom.PercentDone', {
    requires: ['Rally.ui.renderer.template.progressbar.PortfolioItemPercentDoneTemplate', 'Rally.util.HealthColorCalculator'],
    extend  : 'Rally.ui.PercentDone',
    alias   : 'widget.cpercentdone',


    config: {
        record: null
    },

    constructor: function(config) {
        this.initConfig(config);
        config = this.config;
        this.renderTpl = Ext.create('Custom.renderer.template.progressbar.PercentDoneTemplate', {
            calculateColorFn: Ext.bind(function(recordData) {
                console.log('called my custom coloring fn');
                var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(config.record, config.percentDoneName);
                return colorObject.hex;
            }, this)
        });
        this.renderData = config;
        this.mergeConfig(config);
        this.callParent([this.config]);
    }
});

App.down('#subContainer').add({
    xtype: 'cpercentdone',
    record: item,
    useStoryCount: !App.estimate
});

I cannot quite get it to work properly - I want to pass the information to the calculateHealthColorForPortfolioItemData function, but I cannot quite figure out what parameters are being passed and where, so I am not sure what to set and where.

I have also tried using Ext.override:

            var percentDone = Ext.create('Rally.ui.PercentDone', {
                record: item,
                percentDoneName: 'PercentDoneByStoryCount'
            });
            var tpl = percentDone.renderTpl;
            tpl.calculateColorFn = function(recordData) {
                var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(percentDone.record, percentDone.percentDoneName);
                return colorObject.hex;
            };

            Ext.override(percentDone, {
                renderTpl: tpl
            });
            App.down('#subContainer').add(percentDone);
Was it helpful?

Solution

The percent done component determines what color it will be in the same way as we do for Rally in production (since the SDK and prod share the same code). If you look at the template that the component uses (found here) you can see that it uses the HealthColorCalculator.

If you want to change the way that the component colors the tooltip you can use Ext Override and change the functionality of that class to calculate the color however you like

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top