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

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