Tabit

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>

<!DOCTYPE html>
<html>

  <head>
    <style>
    </style>
  </head>

  <body>
    <div class="header">
      <div>
        <span class="company">ПАО "ЛИДЕР ПЛЮС"</span>
        <br>
        <span class="user">Сомов Константин</span>
      </div>
      <div>
        <img class="userImg" src="https://i.ibb.co/XWSdtxn/Group-3.png" width=50>
      </div>
    </div>


    <div class="container">
      <div class="curved">УЧАСТИЕ В ТЕСТИРОВАНИИ</div>
      <div class="curved">УРОВЕНЬ</div>
      <div class="curved">ТЕКУЧЕСТЬ КАДРОВ</div>
    </div>

    <div class="containerTransparent">
      <div class="curvedTransparent">
        <div class="curvedSmall">
          <div style="color: #43dea6; font-size: 48px; font-weight: 300;">934</div>
          <img src="https://i.ibb.co/PjL5GTM/Supervisor-Account-Icon-31.png" width=40>
          <div style="color: #43dea6;">ПРОШЛИ</div>
        </div>
        <div class="curvedSmall">
          <div style="color: #da4166; font-size: 48px; font-weight: 300;">66</div>
          <img src="https://i.ibb.co/GFRMrkJ/Supervisor-Account-Icon-34.png" width=40>
          <div style="color: #da4166;">НЕ ПРОШЛИ</div>
        </div>
      </div>

      <div class="curvedTransparent">
        <div class="curvedSmall">
          <div>
            <img src="https://i.ibb.co/hgyhPss/Check-Circle-Icon-1.png" width=40>
            <span>ДОВЕРИЯ - <span style="color: #43dea6;">ВЫСОКИЙ</span></span>
          </div>
          <div>
            <img src="https://i.ibb.co/dbMgc9v/Assignment-Late-Icon-1.png" width=40>
            <span>КОНФЛИКТНОСТИ - <span style="color: #da4166;">ВЫСОКИЙ</span></span>
          </div>
        </div>
      </div>

      <div class="curvedTransparent">
        <div class="curvedSmall2">12%</div>
      </div>
    </div>

    <div class="curvedSmall" style="height: 83px; width: calc(100% - 20px);">
      <div>
       ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  width: 100%;
  height: 100%;
  background-color: grey;
  font-family: 'Lato', serif;
}

img, span {
  vertical-align: middle;
}

.header {
  display: flex;
  justify-content: flex-end;
  background-color: #262e3a;
}

.company {
  font-size: 24px;
  text-align: right;
  vertical-align: middle;
  color: white;
}

.user {
  font-size: 18px;
  text-align: right;
  vertical-align: middle;
  color: white;
}

.userImg {
  display: block
    /* remove gap*/
}

.container {
  display: flex;
  /* border:1px red solid;*/
  padding-top: 40px;

}

.container>div {
  /* border:1px blue solid;  */
  margin: 10px;
}

.curved {
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;

  border-radius: 27px;
  background: #262e3a;
  width: 465px;
  height: 144px;
}

.containerTransparent {
  display: flex;
  /* border:1px red solid;*/
  padding-top: 5px;

}

.curvedTransparent {
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 27px;
  width: 465px;
  height: 183px;
}

.curvedSmall {
	display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  background: #262e3a;
  border-radius: 10px;
  color: white;
  
	width: 100%;
  height: 183px;
}

.curvedSmall2 {
  font-weight: 300;
  font-size: 70px;
  display: flex;
  justify-content: center;
  align-items: center;  
  margin: 10px;
  background: #262e3a;
  border-radius: 10px;
  color: #2394df;
  
  width: 100%;
  height: 183px;
}

.chartDiv {
	border:1px red solid;
  width: calc(100% - 20px);
  height: 50px;
}

JavaScript

var barChartData = {
  labels: [""],
  datasets: [{
      label: "Воодушевлённые сотрудники",
      backgroundColor: "rgba(68,222,166,1)",
			barThickness: 30,
      //hoverBackgroundColor: "rgba(34,139,34,1)",
      data: [177]
    },
    {
      label: "Напряжённые сотрудники",
			barThickness: 30,
      backgroundColor: "rgba(218, 65, 102, 1)",
      //hoverBackgroundColor: "rgba(255, 0, 0, 1)",
      data: [170]
    }
  ]
};

var optionsBar = {
  maintainAspectRatio: false,    
  legend: false,
  title: {
    display: false    
  },
  scales: {
    xAxes: [{
      stacked: true,
      display: false
    }],
    yAxes: [{
      stacked: true,
      display: false
    }]
  }
};


var ctx = document.getElementById("mychart");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar
});