Angular-based Dashboard for Elasticsearch

Titulación: Grado en Ingeniería en Tecnologías de la Telecomunicación

Alumno: Ismael Slimane Zubillaga

Tutor: Dr. Jesús María González Barahona

¿Why?

Data visualization
Dashboards
Big Data
Web Applications
Flexibility

Introduction

Objectives

Dashboard implementation
no-SQL Database
Angular as front-end Framework
Data introspection
Visualizations
Data persistence
HTML5 Application

Introduction

Kibana

Elasticsearch
Visualizations
Dashboards

Technologies

Elasticsearch
Github
Webpack
Angular
Typescript
Javascript
HTML5
SASS
Flexbox

Main Tech.

Elasticsearch js API
jQuery
Lodash
ChartJS
And more...

Libraries

Methodology & Development

SCRUM Methodology

Agile Framework Methodology
Software development
Sprints
Development Team - Customer

Methodology & Development

First Metric through Elasticsearch.
Aggregations and Indexes.

Sprint 1

Finishing Metrics.
Implementing Data Table Visualization.
Metrics, Buckets and Visualizations dynamism.
Visualizations persistence.

Sprint 2

"Pie Chart" visualization
"Bar Chart" visualization
Design a User Interface
Delete feature for visualizations

Sprint 3

Implementing Dashboard for visualizations
Implementing dashboard persistence

Sprint 4

Web Application Structure

Loading and Saving Data

Web Application Structure

Chart Rendering

Final Result

App Features

Visualizations

Metric
Data Table
Pie Chart
Bar Chart
Saving/Loading

Dashboard Feature

Visualizations
Saving/Loading
Personalized

Final Result

App Features

Aggregations

Metrics
Buckets

Metrics

Count
Min
Max
Sum
Average
Standard Deviation
Unique Count
Percentiles
Percentile Ranks
Top Hits

Buckets

Histogram
Range

Final Result

App Features

Final Result

App Features

Final Result

App Features

Conclusions

Achievements

Creation of Visualizations (Metrics, Data Table, Pie Chart and Bar Chart)
Combination of different visualizations on a dashboard
Persistence of data in a no-SQL database
Developed an HTML5 web application
Accessibility