github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/charts/recommendation-chart.scss (about)

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