egaumer · July 24, 2018 13:25 · YannBrrd · Mar 14, 2013 · thoufeeqmf · Oct 24, 2013
diff --git a/app.js b/app.js
 /*jshint globalstrict:true */
 /*global angular:true */
 'use strict';

 angular.module('demo', [
    'demo.controllers',
    'demo.directives',
    'elasticjs.service'
 ]);
diff --git a/controller.js b/controller.js
 /*jshint globalstrict:true */
 /*global angular:true */
 'use strict';

 /* controller.js */

 angular.module('demo.controllers', [])
    .controller('SearchCtrl', function($scope, ejsResource) {

        var ejs = ejsResource('https://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();
        }

    });
diff --git a/directives.js b/directives.js
 /*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();
                    } 
                })
            }
        };
    });
diff --git a/index.html b/index.html
 <!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>
	/jshint globalstrict:true /
	/global angular:true /
	'use strict';

	angular.module('demo', [
	'demo.controllers',
	'demo.directives',
	'elasticjs.service'
	]);
	/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>
	<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>