[VUE 2] use the percentdone circle for an other value

[beotech]

Hello,
We are already using the percentdone column with the circle and we would like to add another column with a second type of advancement and also use the circle?
Is it possible to use the showcircle property on another column than PercentDoneColumn?
Many thanks

[alex.l]

PercentDoneColumn is not configurable out of the box to use it with another field. You can check the source code and create your own column class with configs you want, it's pretty easy to achieve.

// use your name for the class here
export default class PercentDoneColumn extends NumberColumn {

static get $name() {
    // change to your class name
    return 'PercentDoneColumn';
}

static get type() {
    return 'percentdone'; // use your type here
}

static get isGanttColumn() {
    return true;
}

//region Config

static get fields() {
    return [
        /**
         * Set to `true` to render a circular progress bar to visualize the task progress
         * @config {Boolean} showCircle
         */
        'showCircle'
    ];
}

static get defaults() {
    return {
        field : 'percentDone', // change to the field you need
        text  : 'L{% Done}', // change to the text you need
        unit  : '%',
        step  : 1,
        min   : 0,
        max   : 100,
        width : 90
    };
}
//endregion

construct(config) {
    super.construct(...arguments);

    if (this.showCircle) {
        this.htmlEncode = false;
    }
}

defaultRenderer({ record, isExport, value }) {
    value = record.getFormattedPercentDone(value); // if no need to format the value before use, just remove this line

    if (isExport) {
        return value;
    }

    if (this.showCircle) {
        return {
            className : {
                'b-percentdone-circle' : 1,
                'b-full'               : value === 100,
                'b-empty'              : value === 0
            },
            style : {
                '--gantt-percentdone-angle' : `${value / 100}turn`
            },
            dataset : {
                value
            }
        };

    }

    return value + this.unit;
}
}

ColumnStore.registerColumnType(PercentDoneColumn); // use your class name here