github.com/hernad/nomad@v1.6.112/ui/app/components/das/recommendation-chart.hbs (about)

     1  {{!
     2    Copyright (c) HashiCorp, Inc.
     3    SPDX-License-Identifier: MPL-2.0
     4  ~}}
     5  
     6  <div
     7    ...attributes
     8    class="chart recommendation-chart {{this.directionClass}}"
     9    {{did-insert this.onResize}}
    10    {{window-resize this.onResize}}
    11    {{on "mousemove" this.setLegendPosition}}
    12    {{on "mouseleave" (action (mut this.showLegend) false)}}
    13  >
    14  
    15    <svg
    16      class="chart"
    17      height={{this.chartHeight}}
    18      {{did-insert this.storeSvgElement}}
    19    >
    20      <svg
    21        class="icon delta"
    22        x={{this.icon.x}}
    23        y={{this.icon.y}}
    24        width={{this.icon.width}}
    25        height={{this.icon.height}}
    26      >
    27        {{x-icon this.icon.name}}
    28      </svg>
    29  
    30      <text
    31        class="resource"
    32        x={{this.resourceLabel.x}}
    33        y={{this.resourceLabel.y}}
    34      >
    35        {{this.resourceLabel.text}}
    36      </text>
    37  
    38      {{#if this.center}}
    39        <line
    40          class="center"
    41          x1={{this.center.x1}}
    42          y1={{this.center.y1}}
    43          x2={{this.center.x2}}
    44          y2={{this.center.y2}}
    45        ></line>
    46      {{/if}}
    47  
    48      {{#each this.statsShapes as |shapes|}}
    49        <text
    50          class="stats-label {{shapes.text.class}}"
    51          text-anchor="end"
    52          x={{shapes.text.x}}
    53          y={{shapes.text.y}}
    54          data-test-label={{shapes.class}}
    55          {{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
    56          {{on "mouseleave" this.unsetActiveLegendRow}}
    57        >
    58          {{shapes.text.label}}
    59        </text>
    60  
    61        <rect
    62          class="stat {{shapes.class}}"
    63          x={{shapes.rect.x}}
    64          width={{shapes.rect.width}}
    65          y={{shapes.rect.y}}
    66          height={{shapes.rect.height}}
    67          {{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
    68          {{on "mouseleave" this.unsetActiveLegendRow}}
    69        ></rect>
    70  
    71        <line
    72          class="stat {{shapes.class}}"
    73          x1={{shapes.line.x1}}
    74          y1={{shapes.line.y1}}
    75          x2={{shapes.line.x2}}
    76          y2={{shapes.line.y2}}
    77          {{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
    78          {{on "mouseleave" this.unsetActiveLegendRow}}
    79        ></line>
    80      {{/each}}
    81  
    82      {{#unless @disabled}}
    83        {{#if this.deltaRect.x}}
    84          <rect
    85            {{did-insert this.isShown}}
    86            class="delta"
    87            x={{this.deltaRect.x}}
    88            y={{this.deltaRect.y}}
    89            width={{this.deltaRect.width}}
    90            height={{this.deltaRect.height}}
    91          ></rect>
    92  
    93          <polygon
    94            class="delta"
    95            style={{this.deltaTriangle.style}}
    96            points={{this.deltaTriangle.points}}
    97          ></polygon>
    98  
    99          <line
   100            class="changes delta"
   101            style={{this.deltaLines.delta.style}}
   102            x1={{0}}
   103            y1={{this.edgeTickY1}}
   104            x2={{0}}
   105            y2={{this.edgeTickY2}}
   106            {{on "mouseenter" (fn this.setActiveLegendRow "New")}}
   107            {{on "mouseleave" this.unsetActiveLegendRow}}
   108          ></line>
   109  
   110          <line
   111            class="changes"
   112            x1={{this.deltaLines.original.x}}
   113            y1={{this.edgeTickY1}}
   114            x2={{this.deltaLines.original.x}}
   115            y2={{this.edgeTickY2}}
   116            {{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
   117            {{on "mouseleave" this.unsetActiveLegendRow}}
   118          ></line>
   119  
   120          <text
   121            class="changes"
   122            text-anchor="{{this.deltaText.original.anchor}}"
   123            x={{this.deltaText.original.x}}
   124            y={{this.deltaText.original.y}}
   125            {{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
   126            {{on "mouseleave" this.unsetActiveLegendRow}}
   127          >
   128            Current
   129          </text>
   130  
   131          <text
   132            class="changes new"
   133            text-anchor="{{this.deltaText.delta.anchor}}"
   134            x={{this.deltaText.delta.x}}
   135            y={{this.deltaText.delta.y}}
   136            {{on "mouseenter" (fn this.setActiveLegendRow "New")}}
   137            {{on "mouseleave" this.unsetActiveLegendRow}}
   138          >
   139            New
   140          </text>
   141  
   142          <text
   143            class="changes percent"
   144            x={{this.deltaText.percent.x}}
   145            y={{this.deltaText.percent.y}}
   146          >
   147            {{this.deltaText.percent.text}}
   148          </text>
   149        {{/if}}
   150      {{/unless}}
   151  
   152      <line
   153        class="zero"
   154        x1={{this.gutterWidthLeft}}
   155        y1={{this.edgeTickY1}}
   156        x2={{this.gutterWidthLeft}}
   157        y2={{this.edgeTickY2}}
   158      ></line>
   159    </svg>
   160  
   161    <div
   162      class="chart-tooltip {{if this.showLegend 'active' 'inactive'}}"
   163      style={{this.tooltipStyle}}
   164    >
   165      <ol>
   166        {{#each this.sortedStats as |stat|}}
   167          <li class={{if (eq this.activeLegendRow stat.label) "active"}}>
   168            <span class="label">
   169              {{stat.label}}
   170            </span>
   171            <span class="value">{{stat.value}}</span>
   172          </li>
   173        {{/each}}
   174      </ol>
   175    </div>
   176  
   177  </div>