github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/Heatmap/Heatmap.module.scss (about)

     1  $svg-side-margin: 40px;
     2  
     3  .heatmapContainer {
     4    position: relative;
     5    width: calc(100% - $svg-side-margin * 2);
     6    margin: auto auto 10px auto;
     7    min-height: 100px;
     8    user-select: none;
     9  
    10    span[role='progressbar'] {
    11      display: block;
    12      text-align: center;
    13      padding-top: 45px;
    14    }
    15  
    16    .heatmapSvg {
    17      width: 100%;
    18      cursor: crosshair;
    19  
    20      .selectionContainer {
    21        width: 100%;
    22      }
    23    }
    24  
    25    .yAxis {
    26      left: -40px;
    27      width: 40px;
    28      position: absolute;
    29      display: flex;
    30  
    31      .axisUnits {
    32        position: absolute;
    33        top: -30px;
    34        width: 60px;
    35        font-size: 14px;
    36      }
    37  
    38      .tickValues {
    39        margin: -10px 0px;
    40        width: 30px;
    41  
    42        .tickValue {
    43          position: relative;
    44          height: 20px;
    45  
    46          span {
    47            position: absolute;
    48            display: block;
    49            width: 40px;
    50            right: 0;
    51          }
    52        }
    53      }
    54  
    55      .ticksContainer {
    56        border-right: 1px solid var(--ps-neutral-2);
    57      }
    58    }
    59  
    60    .xAxis {
    61      width: 100%;
    62      display: flex;
    63      flex-direction: column-reverse;
    64  
    65      .tickValues {
    66        flex-direction: row;
    67  
    68        .tickValue {
    69          width: 1px;
    70          height: 20px;
    71          position: relative;
    72        }
    73  
    74        span {
    75          width: 115px;
    76          display: inline-block;
    77          position: absolute;
    78          left: -60px;
    79        }
    80  
    81        .tickValue:first-child {
    82          visibility: hidden;
    83        }
    84      }
    85  
    86      .ticksContainer {
    87        position: relative;
    88        left: -1px;
    89        width: calc(100% + 1px);
    90        display: flex;
    91        flex-direction: row;
    92        justify-content: space-between;
    93        margin-bottom: 2px;
    94        height: 10px;
    95        margin-left: 0;
    96        border-top: 1px solid var(--ps-neutral-2);
    97  
    98        .tick {
    99          width: 1px;
   100          height: 8px;
   101  
   102          &:first-child {
   103            visibility: hidden;
   104          }
   105        }
   106      }
   107    }
   108  
   109    .tickValues {
   110      display: flex;
   111      flex-direction: column-reverse;
   112      justify-content: space-between;
   113  
   114      .tickValue {
   115        font-size: 12px;
   116        text-align: center;
   117  
   118        &.yTickValue {
   119          text-align: right;
   120        }
   121      }
   122    }
   123  
   124    .ticksContainer {
   125      margin-left: 2px;
   126      display: flex;
   127      flex-direction: column;
   128      justify-content: space-between;
   129      width: 8px;
   130    }
   131  
   132    .tick {
   133      height: 1px;
   134      background-color: var(--ps-neutral-2);
   135    }
   136  
   137    .selectedAreaBlock {
   138      cursor: crosshair;
   139      position: absolute;
   140    }
   141  
   142    .legend {
   143      position: absolute;
   144      right: -40px;
   145      top: -30px;
   146  
   147      .units {
   148        display: block;
   149        font-size: 14px;
   150        height: 20px;
   151        margin-bottom: 10px;
   152        line-height: 20px;
   153      }
   154  
   155      .colorLabelContainer {
   156        display: flex;
   157        align-items: center;
   158        justify-content: right;
   159  
   160        .label {
   161          font-size: 10px;
   162          line-height: 10px;
   163          padding-right: 3px;
   164        }
   165  
   166        .color {
   167          width: 12px;
   168          height: 12px;
   169          margin-bottom: 2px;
   170        }
   171      }
   172    }
   173  }