Skip to content

Instantly share code, notes, and snippets.

@egaumer
Last active July 24, 2018 13:25
Show Gist options
  • Save egaumer/5101149 to your computer and use it in GitHub Desktop.
Save egaumer/5101149 to your computer and use it in GitHub Desktop.
Getting Started with elasticsearch and AngularJS
/*jshint globalstrict:true */
/*global angular:true */
'use strict';
angular.module('demo', [
'demo.controllers',
'demo.directives',
'elasticjs.service'
]);
/*jshint globalstrict:true */
/*global angular:true */
'use strict';
/* controller.js */
angular.module('demo.controllers', [])
.controller('SearchCtrl', function($scope, ejsResource) {
var ejs = ejsResource('http://localhost:9200');
var QueryObj = ejs.QueryStringQuery().defaultField('Title');
var activeFilters = {};
var client = ejs.Request()
.indices('stackoverflow')
.types('question')
.facet(
ejs.TermsFacet('tags')
.field('Tags')
.size(10));
$scope.isActive = function (field, term) {
return activeFilters.hasOwnProperty(field + term);
};
var applyFilters = function(query) {
var filter = null;
var filters = Object.keys(activeFilters).map(function(k) { return activeFilters[k]; });
if (filters.length > 1) {
filter = ejs.AndFilter(filters);
} else if (filters.length === 1) {
filter = filters[0];
}
return filter ? ejs.FilteredQuery(query, filter) : query;
};
$scope.search = function() {
$scope.results = client
.query(applyFilters(QueryObj.query($scope.queryTerm || '*')))
.doSearch();
};
$scope.filter = function(field, term) {
if ($scope.isActive(field, term)) {
delete activeFilters[field + term];
} else {
activeFilters[field + term] = ejs.TermFilter(field, term);
}
$scope.search();
}
});
/*jshint globalstrict:true */
/*global angular:true */
angular.module('demo.directives', [])
.directive('bar', function() {
return {
restrict: 'E',
scope: {
onClick: '=',
bind: '=',
field: '@'
},
link: function(scope, element, attrs) {
var width = 300;
var height = 250;
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.ordinal().rangeBands([0, height], .1);
var svg = d3.select(element[0])
.append('svg')
.attr('preserveAspectRatio', 'xMaxYMin meet')
.attr('viewBox', '0 0 ' + (width + 75) + ' ' + height)
.append('g');
scope.$watch('bind', function(data) {
if (data) {
x.domain([0, d3.max(data, function(d) { return d.count; })]);
y.domain(data.map(function(d) { return d.term; }));
var bars = svg.selectAll('rect')
.data(data, function(d, i) { return Math.random(); });
// d3 enter fn binds each new value to a rect
bars.enter()
.append('rect')
.attr('class', 'bar rect')
.attr('y', function(d) { return y(d.term); })
.attr('height', y.rangeBand())
.attr('width', function(d) { return x(d.count); });
// wire up event listeners - (registers filter callback)
bars.on('mousedown', function(d) {
scope.$apply(function() {
(scope.onClick || angular.noop)(scope.field, d.term);
});
});
// d3 exit/remove flushes old values (removes old rects)
bars.exit().remove();
var labels = svg.selectAll('text')
.data(data, function(d) { return Math.random(); });
labels.enter()
.append('text')
.attr('y', function(d) { return y(d.term) + y.rangeBand() / 2; })
.attr('x', function(d) { return x(d.count) + 3; })
.attr('dy', '.35em')
.attr('text-anchor', function(d) { return 'start'; })
.text(function(d) { return d.term + ' (' + d.count + ')'; });
// d3 exit/remove flushes old values (removes old rects)
labels.exit().remove();
}
})
}
};
});
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="common/css/bootstrap.min.css">
<!-- project dependency libs -->
<script src="common/lib/angular.min.js"></script>
<script src="common/lib/d3.min.js"></script>
<script src="common/lib/elastic.min.js"></script>
<script src="common/lib/elastic-angular-client.min.js"></script>
<!-- project specific files -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<style>.bar.rect { fill: #058dc7; stroke: none; }</style>
</head>
<body ng-controller="SearchCtrl">
<div class="container-fluid">
<div class="row-fluid">
<span class="span3">
<input class="input-block-level" ng-model="queryTerm" type="text">
</span>&nbsp;
<button ng-click="search()" class="btn" type="button">Search</button>
</div>
<div class="row-fluid">
<div class="span2">
<div ng-repeat="entry in results.facets.tags.terms">
<a ng-click="filter('Tags', entry.term)">
<i class="icon-remove-sign" ng-show="isActive('Tags', entry.term)"></i> {{ entry.term }}
</a> {{ entry.count }}
</div>
</div>
<div class="span3">
<bar bind="results.facets.tags.terms" on-click="filter" field="Tags" />
</div>
<div class="span4">
<li ng-repeat="doc in results.hits.hits">
{{ doc._source.Title }}
</li>
</div>
</div>
</div>
</body>
</html>
@iamstoick
Copy link

It is not working for me either.

TypeError: ejs.Request(...).indices is not a function

I am using Angular 1.5.2.

Here is the result of console.log(ejs.Request());
console

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment