Dashboard

by Hugo Carneiro

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div class="apps-container">
  <h3 class="page-header">Dashboard <small>last 7 days</small></h3>
  <div class="app-metrics-wrapper">
    <div class="top-app-metrics">
      <div id="total-apps" class="app-metric">
        <p class="app-metric-title">Total apps</p>
        <p class="app-metric-value">10</p>
        <div class="app-metric-data"> <span class="data-color data-positive"><span class="icon-holder"><i class="fa fa-arrow-up"></i></span> <span class="percentage-value">+22.22%</span></span> than last week (<span class="previous-value">8</span>) </div>
      </div>
      <div id="total-live-apps" class="app-metric">
        <p class="app-metric-title">Total total live apps</p>
        <p class="app-metric-value">7</p>
        <div class="app-metric-data"> <span class="data-color data-positive"><span class="icon-holder"><i class="fa fa-arrow-up"></i></span> <span class="percentage-value">+15.38%</span></span> than last week (<span class="previous-value">6</span>) </div>
      </div>
      <div id="total-users" class="app-metric">
        <p class="app-metric-title">Total logged in users</p>
        <p class="app-metric-value">423</p>
        <div class="app-metric-data"> <span class="data-color data-negative"> <span class="icon-holder"> <i class="fa fa-arrow-up"></i> </span> <span class="percentage-value">-29.09%</span> </span> than last week (<span class="previous-value">567</span>) </div>
      </div>
      <div...

CSS

body {
  font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  background-color: #f8f6f7;
}

.apps-container {
  padding: 30px 8.33333vw 0;
}

.page-header {
  margin-top: 15px;
  margin-bottom: 10px;
  padding-bottom: 0;
  line-height: 1.1;
  border-bottom: 0;
  color: #474974;
  font-weight: 700;
}

.page-header small {
  font-size: 12px;
  color: #8D8EA5;
}

.app-metrics-wrapper {
  margin-top: 25px;
}

.app-metrics-wrapper .top-app-metrics {
  padding: 15px;
  margin-bottom: 15px;
  background-color: #ffffff;
  display: flex;
  flex: row wrap;
}

.top-app-metrics .app-metric {
  position: relative;
  width: 20%;
  margin-right: 31px;
}

.top-app-metrics .app-metric:last-child {
  margin-right: 0;
}

.top-app-metrics .app-metric::after {
  display: block;
  content: '';
  position: absolute;
  width: 1px;
  height: 64px;
  background-color: #8D8EA5;
  top: 50%;
  right: -16px;
  margin-top: -32px;
}

.top-app-metrics .app-metric:last-child::after {
  display: none;
}

.app-metric .app-metric-title,
.graph-holder .app-metric-title {
  font-size: 16px;
  color: #474974;
  margin-bottom: 0;
}

.graph-holder .app-metric-title {
  margin-bottom: 15px;
}


.app-metric .app-metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #474974;
}

.app-metric .app-metric-data {
  font-size: 14px;
  color: #8D8EA5;
  margin-bottom: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.app-metric-data > span.data-color {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.app-metric-data .data-positive {
  color: #19CD9D;
}

.app-metric-data .data-negative {
  color: #E03629;
}

.app-metric-data .icon-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  font-size: 10px;
  margin-right: 5px;
}

.app-metric-data .icon-holder .fa {
  position: relative;
  top: -1px;
}

.app-metric-data .data-positive .icon-holder {
 ...

JavaScript

var ctx1 = document.getElementById('total-devices').getContext('2d');
var ctx2 = document.getElementById('top-events').getContext('2d');

var days1 = [{
  x: Date.parse('2022-08-30'),
  y: 10
}, {
  x: Date.parse('2022-08-31'),
  y: 6
}, {
  x: Date.parse('2022-09-02'),
  y: 56
}, {
  x: Date.parse('2022-09-03'),
  y: 12
}, {
  x: Date.parse('2022-09-04'),
  y: 1
}];
var days2 = [{
  x: Date.parse('2022-08-30'),
  y: 5
}, {
  x: Date.parse('2022-08-31'),
  y: 12
}, {
  x: Date.parse('2022-09-02'),
  y: 43
}, {
  x: Date.parse('2022-09-03'),
  y: 12
}, {
  x: Date.parse('2022-09-04'),
  y: 5
}];

// setup 
var data1 = {
  datasets: [{
    label: "Current period",
    data: days1,
    backgroundColor: 'rgba(71, 73, 117, 1)',
    barPercentage: 1.0
  },
  {
    label: "Previous period",
    data: days2,
    backgroundColor: 'rgba(182, 189, 204, 1)',
    barPercentage: 1.0
  }]
};
var data2 = {
  labels: ['Submit form', 'Open menu', 'Accordion open', 'Link action', 'Entry open'],
  datasets: [{
    label: "Total users",
    data: [5, 12, 6, 23, 34],
    backgroundColor: [
      'rgba(0, 171, 209, 1)',
      'rgba(237, 145, 25, 1)',
      'rgba(25, 205, 157, 1)',
      'rgba(255, 217, 75, 1)',
      'rgba(71, 73, 117, 1)',
      'rgba(224, 54, 41, 1)',
      'rgba(240, 88, 101, 1)'
    ]
  }]
};

// config 
var config1 = {
  type: 'bar',
  plugins: [ChartDataLabels],
  data: data1,
  options: {
  	grouped: true,
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'start',
        labels: {
          value: {
            color: '#ffffff'
          }
        },
        formatter: function(value, ctx) {
          return value.y;
        }
      },
      tooltip: {
        callbacks: {
          title: function(context) {
          	console.log('context', context);
            return moment(context[0].parsed.x).format('dddd');
          }
        }
      }
    },
    scales: {
      x: {
       ...