vault/ui/app/styles/components/chart-container.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.chart-wrapper {
  border: $light-border;
  border-radius: $radius-large;
  padding: $spacing-12 $spacing-24;
  margin-bottom: $spacing-16;
}

// GRID LAYOUT //
.single-chart-grid {
  display: grid;
  grid-template-columns: 1fr 0.3fr 3.7fr;
  grid-template-rows: 0.5fr 1fr 1fr 1fr 0.25fr;
  width: 100%;
  &.no-legend {
    grid-template-rows: 0.5fr 1fr 1fr 0.25fr;
  }
}

.dual-chart-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 0.7fr 1fr 1fr 1fr 0.3fr;
  width: 100%;
}

.chart-header {
  grid-column-start: 1;
  grid-column-end: span col4-end;
  grid-row-start: 1;
  box-shadow: inset 0 -1px 0 $ui-gray-200;
}

.has-header-link {
  display: grid;
  grid-template-columns: 4fr 1fr;

  .header-right {
    text-align: right;
    > button {
      &:hover,
      &:focus {
        background-color: transparent;
        background-color: darken($ui-gray-050, 5%);
        border-color: darken($ui-gray-300, 5%);
      }
    }
  }
}

.chart-container-wide {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: span 3;
  justify-self: center;
  height: 300px;
  max-width: 700px;
  width: 100%;

  svg.chart {
    width: 100%;
    height: 100%;
  }
}

.chart-container-left {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 5;
  padding-bottom: $spacing-36;
  margin-bottom: $spacing-12;
  box-shadow: inset 0 -1px 0 $ui-gray-200;

  > h2 {
    padding-left: 18px;
  }
  > p {
    padding-left: 18px;
  }
}

.chart-container-right {
  grid-column-start: 4;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 5;
  padding-bottom: $spacing-36;
  margin-bottom: $spacing-12;
  box-shadow: inset 0 -1px 0 $ui-gray-200;

  > h2 {
    padding-left: 18px;
  }
  > p {
    padding-left: 18px;
  }
}

.chart-empty-state {
  place-self: center stretch;
  grid-row-end: span 2;
  grid-column-start: 1;
  grid-column-end: span 3;
  max-width: none;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;

  > div {
    box-shadow: none !important;
  }

  > div.empty-state {
    white-space: nowrap;
    align-self: stretch;
    width: 100%;
  }
}

.chart-subTitle {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
}

.data-details-top {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
}

.data-details-bottom {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
}

.timestamp {
  grid-column: 1 / span 2;
  grid-row-start: -1;
  color: $ui-gray-500;
  font-size: $size-9;
  align-self: end;
}

.legend {
  grid-row-start: 5;
  grid-column-start: 2;
  grid-column-end: 6;
  align-self: center;
  justify-self: center;
  font-size: $size-9;
}

// FONT STYLES //

h2.chart-title {
  font-weight: $font-weight-bold;
  font-size: $size-5;
  line-height: $spacing-24;
  margin-bottom: $spacing-4;
}

p.chart-description {
  color: $ui-gray-700;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: $spacing-8;
}

p.chart-subtext {
  color: $ui-gray-500;
  font-size: $size-8;
  line-height: 16px;
  margin-top: $spacing-8;
}

h3.data-details {
  font-weight: $font-weight-bold;
  font-size: $size-8;
  line-height: 14px;
  margin-bottom: $spacing-8;
}

p.data-details {
  font-weight: $font-weight-normal;
  font-size: $size-4;
}