Skip to content

A Polymer Element that builds and runs an elasticsearch aggregation query, shows the transformed image results in a paginated image gallery, and shows a double bar chart with optional selectable behavior.

License

Notifications You must be signed in to change notification settings

DigElements/image-query-and-display

Folders and files

NameName
Last commit message
Last commit date
Oct 5, 2017
Nov 20, 2017
Apr 19, 2017
Apr 19, 2017
Mar 21, 2018
Apr 25, 2018
Mar 21, 2018
Apr 19, 2017
Apr 19, 2017

Repository files navigation

image-query-and-display

A Polymer Element that builds and runs an elasticsearch aggregation query, shows the transformed image results in a paginated image gallery, and shows a double bar chart with optional selectable behavior.

Example

<image-query-and-display
  aggregation-field="myAggregationField"
  query-fields='"myQueryField"'
  query-values='"myQueryValue"'
  client="[[client]]"
  index-name="myIndexName"
  index-types='["myIndexType"]'
  filter-list="[[filterList]]"
  transform-config="{}"
  transform-function="[[myTransformFunction]]"
  show-checkboxes
  hovering="{{hovering}}"
  images="{{images}}"
  loaded-images="{{loadedImages}}"
  selected="{{selected}}">
</image-query-and-display>

Styling

<image-query-and-display> provides the following custom properties and mixins for styling:

Custom property Description Default
--image-query-and-display-hovering-color The background color of the hovering images. none
--image-query-and-display-loading-spinner Mixin applied to the loading-spinner. none
--image-query-and-display-max-height Maximum height of the gallery. 160px
--image-query-and-display-scroll-threshold Mixin applied to the iron-scroll-threshold. none
--image-query-and-display-selected-color The background color of the selected images. none
--image-query-and-display-show-more-button Mixin applied to the show more button. none
--image-query-and-display-bar-color The color of the single or left bars. --paper-grey-300
--image-query-and-display-bar-count-color The color of the single or left count labels. --paper-grey-900
--image-query-and-display-bar-height The height of the single or left bars. 20px
--image-query-and-display-bar-title-color The color of the single or left title labels. --paper-grey-900
--image-query-and-display-bar-title-hover-color The color of the single or left title labels on hover (if a link). --paper-indigo-900
--image-query-and-display-second-bar-color The color of the right (second) bars. --paper-grey-300
--image-query-and-display-second-bar-count-color The color of the right (second) count labels. --paper-grey-900
--image-query-and-display-second-bar-height The height of the right (second) bars. 20px
--image-query-and-display-second-bar-title-color The color of the right (second) title labels. --paper-grey-900
--image-query-and-display-second-bar-title-hover-color The color of the right (second) title labels on hover (if a link). --paper-indigo-900

Dependencies

Dependencies are installed using Bower:

npm install -g bower
bower install

Testing

Tests are run using web-component-tester:

npm install -g web-component-tester
wct

Demonstration & Documentation

Demonstration and documentation are viewed using polyserve:

npm install -g polyserve
polyserve

About

A Polymer Element that builds and runs an elasticsearch aggregation query, shows the transformed image results in a paginated image gallery, and shows a double bar chart with optional selectable behavior.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages