Our state of the art Gantt chart


Post by rahulranjan »

Hi Thanks
I will though it. If you have gone through the project which i have attach please let me know where i am going wrong .

Post by rahulranjan »

pmiklashevich wrote: Thu May 16, 2019 4:49 pm Unit is hardcoded in some places. I've created a ticket to make it fully localizable: https://app.assembla.com/spaces/bryntum/tickets/8433

To change it now you need to override some classes. Please try the following code in our Basic demo.
/* eslint-disable no-unused-vars */
import '../_shared/shared.js'; // not required, our example styling etc.
import Gantt from '../../lib/Gantt/view/Gantt.js';
import ProjectModel from '../../lib/Gantt/model/ProjectModel.js';
import ResourceAssignmentColumn from '../../lib/Gantt/column/ResourceAssignmentColumn.js';
import Override from '../../lib/Common/mixin/Override.js';
import AssignmentField from '../../lib/Gantt/widget/AssignmentField.js';
import LocaleManager from '../../lib/Common/localization/LocaleManager.js';

class ResourceAssignmentColumnOverride {
    static get target() {
        return {
            class   : ResourceAssignmentColumn,
            product : 'gantt'
        };
    }

    itemTpl(assignment, i) {
        return `${assignment.resourceName} ${assignment.units}[MY_UNIT!]`;
    }
}

Override.apply(ResourceAssignmentColumnOverride);

class AssignmentFieldOverride {
    static get target() {
        return {
            class   : AssignmentField,
            product : 'gantt'
        };
    }

    static get defaultConfig() {
        const cfg = this._overridden.defaultConfig;

        cfg.chipView.itemTpl = (assignment, i) => {
            return `${assignment.name} ${assignment.units}[MY_UNIT!]`;
        };

        return cfg;
    }
}

Override.apply(AssignmentFieldOverride);

// Apply changes to locale
Object.assign(LocaleManager.locale.AssignmentGrid, {
    '%'      : '[MY_UNIT!]',
    unitsTpl : ({ value }) => value ? value + '[MY_UNIT!]' : ''
});

const project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    }
});

const gantt = new Gantt({
    appendTo : 'container',

    project : project,

    columns : [
        { type : 'name', field : 'name', width : 250 },
        { type : 'resourceassignment', width : 250 }
    ]
});

project.load();

Best,
Pavel

Hi Can you let me know what is _overridden in this

Post by rahulranjan »

Hi I am Achieve this but it is Giving me one error. I.e Value must be less than 100. How can i customise this error message

Post by rahulranjan »

Hi Thanks
One More question how can change the range of units in resource assignment pop up
class ResourceAssignmentColumnOverride {
    static get target() {
        return {
            class: ResourceAssignmentColumn,
            product: 'gantt'
        };
    }

    itemTpl(assignment, i) {
        return `${assignment.resourceName} ${assignment.units}[MY_UNIT!]`;
    }

}

Override.apply(ResourceAssignmentColumnOverride);

class AssignmentFieldOverride {
    static get target() {
        return {
            class: AssignmentField,
            product: 'gantt'
        };
    }

    static get defaultConfig() {
        const cfg = this._overridden.defaultConfig;
        console.log(cfg);
        cfg.chipView.itemTpl = (assignment, i) => {
            return `${assignment.name} ${assignment.units}`;
        };

        return cfg;
    }
}

Override.apply(AssignmentFieldOverride);

// Apply changes to locale
Object.assign(LocaleManager.locale.AssignmentGrid, {
    ' ': '[MY_UNIT!]',
    unitsTpl: ({ value }) => value
});

Post by rahulranjan »

Hi pmiklashevich
Please have look into this.

Post by pmiklashevich »

Please see AssignmentGrid.defaultConfig. It returns array of columns definition.
{
    field      : 'units',
    type       : NumberColumn.type,
    text       : this.L('Units'),
    width      : 80,
    min        : 0,
    max        : 100,
    step       : 10,
    unit       : this.L('%'),
    renderer   : (p) => p.grid.renderUnits(p),
    filterable : false
}
In the override please find the element responsible for units field and change the property values to what you need.

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Thanks

Post by rahulranjan »

Hi pmiklashevich
I was able to achieve this. Thanks for your kind support
But one more question , in tooltip it is still showing in % . How can i remove this % symbol from tool tip.

Post by pmiklashevich »

It's not supported right now. I've added this requirement to this ticket: https://app.assembla.com/spaces/bryntum/tickets/8433

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply