github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/components/das/recommendation-chart.hbs (about)

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