Compact Logical Filter

Recently, I worked on a compact logical filter component for an Analytics tool.

Constraints: ● It needs to be placed beside a chart in a pane of width 400px. ● Must support grouping of filters and all types of Logical equations.

Output: ● As you can see, I have created a minimalistic component with provision for grouping filters. ● Supports single-level logical equations and not multi-level logical equations. The reason behind, we didn’t find enough use cases to push multi-level equations into the component as it might ruin its compact nature.

Single-level: (A + B) ∙ (C+D)

Multi-level: A + (B ∙ (C + D))

Thanks!