YousefED / ElasticUI

AngularJS directives for Elasticsearch
http://www.elasticui.com
Other
526 stars 135 forks source link

Date Histogram #46

Closed petercsmith closed 9 years ago

petercsmith commented 9 years ago

The readme on the ElasticUI project page shows a screenshot of your Twitter dashboard with a date histogram. Is that widget part of ElasticUI?

My multi-select checklist widgets are filtering as I narrow my selection. Does your library support post_filter to change this behavior and/or is there another trick?

Thanks, Peter

mastermind1981 commented 9 years ago

No date histogram is not in the library. but you can make a widget base on the actual component of elastic ui by creating a histogram aggregation and associate the result with a charting library.

For the multi-select checklist yes it narrows the checklist based on the selection. You can change this by adding or eui-or-filter to container of the result of the aggregation.

Here is an example with both a histogram aggregation and a checklist that does not change when selecting one of its elements. I'm using to have a list of price intervals with their doc count.


<div  class="form-group wrapper-sm" eui-aggregation="ejs.HistogramAggregation('price90').field('price').interval('50000').minDocCount(0)" eui-filter-self="false" eui-or-filter >
  <div ng-repeat="bucket in aggResult.buckets   ">
       <div class="checkbox" eui-filter="ejs.RangeFilter('price').from(bucket.key).to(aggResult.buckets[$index + 1].key)">
                        <label class="i-checks">
                        <input type="checkbox" ng-model="filter.enabled"  >
                        <i></i>
                        </label>
       <span class="m-r-n-sm">
        <small><span ng-bind-html="bucket.key | number"></span>&nbsp;<span  ng-bind="currency"></span>-<span ng-bind-html="aggResult.buckets[$index + 1].key | number"></span>&nbsp;<span  ng-bind="currency"></span></small>
        <span class="badge bg-success"><span ng-bind-html="bucket.doc_count | number"></span></span>                        </span>
      </div>
  </div>
</div>
petercsmith commented 9 years ago

Thanks @mastermind1981, I've worked the histogram routine you posted into a sleek time range selector. Much appreciated!

YousefED commented 9 years ago

Great guys! Would love to see any screenshots if possible to see what you've been building

petercsmith commented 9 years ago

Happy to share screenshots privately -- is there an email I can send them to?

YousefED commented 9 years ago

Yep, pre @ sign: yousef domain after @: tweetbeam.com

YousefED commented 9 years ago

Closing this issue. I welcome any date-histogram widget additions to the demo + widgets :)