Histogram

Total orders

View all

50254

<div class="histogram">
  <div>
    <div class="histogram__header">
      <p class="histogram__title">Total orders</p>
      <span class="histogram__link histogram_previewLink_solid">
        View all
      </span>
    </div>
    <h4 class="histogram__count">50254</h4>
  </div>
  <div class="histogram__chart" id="previewHistogram">
    <div class="histogram__bar" style="height: 100%;"></div>
    <div class="histogram__bar" style="height: 85.2566%;"></div>
    <div class="histogram__bar" style="height: 67.0671%;"></div>
    <div class="histogram__bar" style="height: 89.5417%;"></div>
    <div class="histogram__bar" style="height: 42.0257%;"></div>
    <div class="histogram__bar" style="height: 48.6861%;"></div>
    <div class="histogram__bar" style="height: 93.981%;"></div>
    <div class="histogram__bar" style="height: 69.8613%;"></div>
    <div class="histogram__bar" style="height: 2.46595%;"></div>
    <div class="histogram__bar" style="height: 66.7328%;"></div>
    <div class="histogram__bar" style="height: 63.3505%;"></div>
    <div class="histogram__bar" style="height: 7.57491%;"></div>
    <div class="histogram__bar" style="height: 32.9139%;"></div>
    <div class="histogram__bar" style="height: 25.2855%;"></div>
    <div class="histogram__bar" style="height: 67.6671%;"></div>
    <div class="histogram__bar" style="height: 41.4404%;"></div>
    <div class="histogram__bar" style="height: 31.1776%;"></div>
    <div class="histogram__bar" style="height: 45.6582%;"></div>
    <div class="histogram__bar" style="height: 80.2207%;"></div>
    <div class="histogram__bar" style="height: 99.3807%;"></div>
    <div class="histogram__bar" style="height: 54.0036%;"></div>
    <div class="histogram__bar" style="height: 43.6207%;"></div>
    <div class="histogram__bar" style="height: 9.78507%;"></div>
    <div class="histogram__bar" style="height: 36.7408%;"></div>
    <div class="histogram__bar" style="height: 24.1856%;"></div>
    <div class="histogram__bar" style="height: 74.3543%;"></div>
    <div class="histogram__bar" style="height: 85.3018%;"></div>
    <div class="histogram__bar" style="height: 84.4595%;"></div>
    <div class="histogram__bar" style="height: 87.7856%;"></div>
    <div class="histogram__bar" style="height: 60.7711%;"></div>
  </div>
</div>

.histogram {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 24px 24px 24px;

  border: 1px solid var(--grey-3);
  border-radius: 8px;
}
.histogram__header {
  display: flex;
  justify-content: space-between;
}

.histogram__title {
  color: var(--black);
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
}
.histogram__link {
  color: var(--primary);
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  margin-top: 3px;
}
.histogram__count {
  color: var(--black);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin: 6px 0 39px 0;
}

.histogram__chart {
  display: flex;
  align-items: flex-end;
  height: 50px;
  overflow: hidden;
}
.histogram__bar {
  background: var(--primary);
  flex-grow: 1;
  transform: scaleY(1);
  transform-origin: bottom;
  animation: grow 400ms ease-in-out;
}

@keyframes grow {
  0% {
    transform: scaleY(0);
  }
  75% {
    transform: scaleY(1.5);
  }
  100% {
    transform: scaleY(1);
  }
}

.histogram__bar ~ .histogram__bar {
  margin-left: 1px;
}

/* модификаторы */
.histogram_preview {
  width: 100%;
  margin: 0 25px 0 25px;
}
.histogram_previewLink_solid {
  text-decoration: solid;
}