Histogram should take eventStore filters into account

[taauntik]

Forum post

See this demo https://bryntum.com/products/gantt/examples/resourcehistogram/

You can override the current code to the one below.

Issue: when we use the filter, the resource histogram has inconsistent data.

Explanation:

1: Using the demo above, we filtered by install 2: The gantt chart gets filtered 3: We update (or open for the first time) the resource histogram 4: The resource histogram shows that it has only 1 event but the histogram keeps showing all of them.

Question: any suggestions on how can we avoid it? Maybe not consider the filter on the event count OR consider the filter for the entire histogram.

Code:

import { Gantt, ProjectModel, ResourceHistogram, Splitter } from '../../build/gantt.module.js?463787';
import shared from '../_shared/shared.module.js?463787';

const project = window.project = new ProjectModel({
    startDate : '2019-01-16',
    endDate   : '2019-02-13',

transport : {
    load : {
        url : '../_datasets/launch-saas.json'
    }
},

autoLoad : true,

// This config enables response validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse : true
});

const gantt = new Gantt({
    project,

dependencyIdField       : 'sequenceNumber',
resourceImageFolderPath : '../_shared/images/users/',

appendTo : 'container',
features : {
    labels : {
        left : {
            field  : 'name',
            editor : {
                type : 'textfield'
            }
        }
    }
},

viewPreset  : 'weekAndDayLetter',
columnLines : true,

columns : [
    { type : 'name', width : 280 },
    { type : 'resourceassignment', showAvatars : true, width : 170 }
],
tbar: [ {
          type: 'textfield',
          ref: 'search',
          cls: 'search',
          placeholder: 'Search',
          clearable: true,
          keyStrokeChangeDelay: 100,
          triggers: {
            filter: {
              align: 'end',
              cls: 'b-fa b-fa-filter',
            },
          },
          onChange: ({ value }) => {
               if (value === '') {
            gantt.taskStore.clearFilters();
        }
        else {
            value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

        gantt.taskStore.filter({
            filters : task => task.name && task.name.match(new RegExp(value, 'i')),
            replace : true
        });
    }
      },
    },
],
    startDate : '2019-01-11',

});

new Splitter({
    appendTo : 'container'
});

const histogram = window.histogram = new ResourceHistogram({
    appendTo          : 'container',
    project,
    hideHeaders       : true,
    partner           : gantt,
    rowHeight         : 50,
    showBarTip        : true,

resourceImagePath : '../_shared/images/users/',
features          : {
    scheduleTooltip : false,
    group           : {
        field : 'city'
    }
},
columns : [
    { type : 'resourceInfo', field : 'name', showEventCount : true, flex : 1 }
],
tbar : {
    cls    : 'histogram-toolbar',
    height : '3em',
    items  : [
        {
            type     : 'checkbox',
            ref      : 'showBarText',
            text     : 'Show bar texts',
            tooltip  : 'Check to show resource allocation in the bars',
            checked  : false,
            onAction : 'up.onShowBarTextToggle'
        },
        {
            type     : 'checkbox',
            ref      : 'showMaxEffort',
            text     : 'Show max allocation',
            tooltip  : 'Check to display max resource allocation line',
            checked  : true,
            onAction : 'up.onShowMaxAllocationToggle'
        },
        {
            type     : 'checkbox',
            ref      : 'showBarTip',
            text     : 'Enable bar tooltip',
            tooltip  : 'Check to show tooltips when moving mouse over bars',
            checked  : true,
            onAction : 'up.onShowBarTipToggle'
        }
    ]
},
onShowBarTextToggle({ source }) {
    histogram.showBarText = source.checked;
},
onShowMaxAllocationToggle({ source }) {
    histogram.showMaxEffort = source.checked;
},
onShowBarTipToggle({ source }) {
    histogram.showBarTip = source.checked;
}
});

[chuckn0rris]

User pinged the status