Vertical Filter Bar

Overview

The Vertical Filter Bar component shall be used to consolidate and display a collection of all filters which collectively can be used by end users to specify parameter boundaries for a given data set rendered on screen.

Using Vertical Filter Bar

The Vertical Filter Bar can be included as follows:

import VerticalFilterBar from '../vertical-filter-bar/VerticalFilterBar.jsx';

...

filterValueChange(newFilterValue) {
  [do some logic here]
}

...

<VerticalFilterBar
            filtersConfig={dataIntegrityFilterConfiguration.filters}
            filterValues={this.state.filterValues}
            onFilterChange={this.onFilter}
            filterTitle={FILTER_TITLE}
          />

The Vertical Filter Bar can be configured as follows

Run & Test Locally

The Vertical Filter Bar component can be launched independently in order to see/test it's capabilities as follows:

1. type the following NPM command from a comand prompt that supports NPM: npm run startDev
2. view the test app at the following URL: http://localhost:8080/

Once launched, the Vertical Filter Bar will be displayed on the side of the page with a set of demo filters preconfigured. The centre of the page shall list the filter names and their currenlty set/selected values.

Changing a filter value in the Vertical Filter Bar shall update its corresponding displayed value in the main (central) portion of the screen.