Wrapper over pepsweetener-heatmap, this element is used by simple and advanced search elements. When query gets submitted parent element assigns to it json file containing list of query masses. This event triggers generation of navigation tabs on side of the internal heatmap element. After each server response, the json is updated with data and the corresponding tab is being enabled. By selecting tab data are passed to the heatmap element.
-
Import polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-
Import custom element:
<link rel="import" href="bower_components/pepsweetener-multi-result/pepsweetener-multi-result.html">
-
Start using it!
<pepsweetener-multi-result></pepsweetener-multi-result>
| Attribute | Options | Default | Description |
|---|---|---|---|
masses |
array | null | list of masses passed from the search form, |
| | | change triggers generation of navigation tabs
datasets | array | {} | container for charts data
selected | number | null | index of currently selected tab
| Method | Parameters | Returns | Description |
|---|---|---|---|
newDataset() |
None. | Nothing. | Function used to update this.datasets property, search forms |
| | | are querying the server separately for each mass and subsequently
| | | use this function to pass the received dataset
_datasetSelected()| None. | Nothing. | Listener monitoring which tab is currently selected and triggering
| | | update of the chart data
In order to run it locally you'll need to fetch some dependencies and a basic server setup.
-
$ npm install -g bower polyserve
-
Install local dependencies:
$ bower install
-
Start development server and open
http://localhost:8080/components/pepsweetener-multi-result/.$ polyserve