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

deck

By Ismael Slimane Zubillaga