Skip to content

Disabling "active" filter also disables "hover" filter #2776

@Imbecillus

Description

@Imbecillus

Description

Setting the filter for the state "active" to 'none' also disables any filter set for "hover".

Steps to Reproduce

  1. Create a chart (e.g. a pie chart) with a filter for "hover" but no filter for "active" (see the reproduction link)
  2. Move the mouse over the pie sections.

Expected Behavior

The chart's sections are highlighted on mouseover as described in the filter. There are no visual changes when a section is clicked.

Actual Behavior

There are no visual changes for either mouseover or clicking. This also applies to bar charts and probably other chart types as well.

Reproduction Link

https://codepen.io/imbecillus/pen/LYjBKLB

Further notes

This seems to have been introduced with the fix for issue #180. In Graphics.js, the hover filter is only applied when a filter for the state "active" is set and not operating on a touch device:

pathMouseEnter(path, e) {
    // ...
    if (
        w.config.states.active.filter.type !== 'none' &&
        !w.globals.isTouchDevice
    ) {
        let hoverFilter = w.config.states.hover.filter
        filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
    }
}

Resulting from this, the hover filter is never applied if there isn't also a filter for the "active" state.

As far as I can tell, if the code only checked whether it was operating on a touch device and the condition w.config.states.active.filter.type !== 'none' was removed, the bug from issue #180 would still be solved.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingverified

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions