github.com/hernad/nomad@v1.6.112/ui/app/styles/charts/recommendation-chart.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .chart.recommendation-chart {
     7    display: block;
     8    position: relative;
     9  
    10    svg.chart {
    11      display: inline-block;
    12      width: 100%;
    13    }
    14  
    15    .resource {
    16      font-weight: $weight-semibold;
    17      dominant-baseline: central;
    18      text-anchor: end;
    19    }
    20  
    21    .icon.delta g {
    22      transform: scale(0.8);
    23      transform-origin: center;
    24    }
    25  
    26    .delta {
    27      transition: width 1s, x 1s, transform 1s, color 0.5s;
    28    }
    29  
    30    rect.stat,
    31    line.stat {
    32      transition: fill 0.5s, stroke 0.5s;
    33    }
    34  
    35    rect.delta {
    36      // Allow hover events for stats ticks beneath delta gradient
    37      pointer-events: none;
    38    }
    39  
    40    polygon.delta {
    41      fill: $yellow-700;
    42    }
    43  
    44    .center {
    45      stroke: $cool-gray-500;
    46      stroke-width: 1.5px;
    47    }
    48  
    49    .stats-label {
    50      font-size: $size-7;
    51      text-anchor: end;
    52  
    53      &.right {
    54        text-anchor: start;
    55      }
    56  
    57      &.hidden {
    58        display: none;
    59      }
    60    }
    61  
    62    text.new {
    63      font-weight: $weight-semibold;
    64    }
    65  
    66    text.percent {
    67      font-size: $size-7;
    68      text-anchor: middle;
    69    }
    70  
    71    &.increase {
    72      .mean {
    73        fill: $red-500;
    74        stroke: $red-500;
    75      }
    76  
    77      .p99 {
    78        fill: $red-300;
    79        stroke: $red-300;
    80      }
    81  
    82      .max {
    83        fill: $red-200;
    84        stroke: $red-200;
    85      }
    86  
    87      rect.delta {
    88        fill: url(#recommendation-chart-increase-gradient);
    89      }
    90  
    91      text.percent {
    92        fill: $red-500;
    93      }
    94    }
    95  
    96    &.decrease {
    97      .mean {
    98        fill: $teal-500;
    99        stroke: $teal-500;
   100      }
   101  
   102      .p99 {
   103        fill: $teal-300;
   104        stroke: $teal-300;
   105      }
   106  
   107      .max {
   108        fill: $teal-200;
   109        stroke: $teal-200;
   110      }
   111  
   112      rect.delta {
   113        fill: url(#recommendation-chart-decrease-gradient);
   114      }
   115  
   116      text.percent {
   117        fill: $teal-500;
   118      }
   119    }
   120  
   121    &.disabled {
   122      .resource,
   123      .icon {
   124        fill: $cool-gray-500;
   125        color: $ui-gray-500;
   126      }
   127  
   128      .mean {
   129        fill: $gray-300;
   130        stroke: $gray-300;
   131      }
   132  
   133      .p99 {
   134        fill: $gray-200;
   135        stroke: $gray-200;
   136      }
   137  
   138      .max {
   139        fill: $gray-100;
   140        stroke: $gray-100;
   141      }
   142    }
   143  
   144    line {
   145      stroke-width: 1px;
   146  
   147      &.zero {
   148        stroke: $cool-gray-500;
   149      }
   150  
   151      &.changes {
   152        stroke: $yellow-700;
   153      }
   154  
   155      &.changes:hover,
   156      &.stat:hover {
   157        stroke-width: 2px;
   158      }
   159    }
   160  }