github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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
    35          class="center"
    36          x1={{this.center.x1}}
    37          y1={{this.center.y1}}
    38          x2={{this.center.x2}}
    39          y2={{this.center.y2}}
    40        ></line>
    41      {{/if}}
    42  
    43      {{#each this.statsShapes as |shapes|}}
    44        <text
    45          class="stats-label {{shapes.text.class}}"
    46          text-anchor="end"
    47          x={{shapes.text.x}}
    48          y={{shapes.text.y}}
    49          data-test-label={{shapes.class}}
    50          {{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
    51          {{on "mouseleave" this.unsetActiveLegendRow}}
    52        >
    53          {{shapes.text.label}}
    54        </text>
    55  
    56        <rect
    57          class="stat {{shapes.class}}"
    58          x={{shapes.rect.x}}
    59          width={{shapes.rect.width}}
    60          y={{shapes.rect.y}}
    61          height={{shapes.rect.height}}
    62          {{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
    63          {{on "mouseleave" this.unsetActiveLegendRow}}
    64        ></rect>
    65  
    66        <line
    67          class="stat {{shapes.class}}"
    68          x1={{shapes.line.x1}}
    69          y1={{shapes.line.y1}}
    70          x2={{shapes.line.x2}}
    71          y2={{shapes.line.y2}}
    72          {{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
    73          {{on "mouseleave" this.unsetActiveLegendRow}}
    74        ></line>
    75      {{/each}}
    76  
    77      {{#unless @disabled}}
    78        {{#if this.deltaRect.x}}
    79          <rect
    80            {{did-insert this.isShown}}
    81            class="delta"
    82            x={{this.deltaRect.x}}
    83            y={{this.deltaRect.y}}
    84            width={{this.deltaRect.width}}
    85            height={{this.deltaRect.height}}
    86          ></rect>
    87  
    88          <polygon
    89            class="delta"
    90            style={{this.deltaTriangle.style}}
    91            points={{this.deltaTriangle.points}}
    92          ></polygon>
    93  
    94          <line
    95            class="changes delta"
    96            style={{this.deltaLines.delta.style}}
    97            x1={{0}}
    98            y1={{this.edgeTickY1}}
    99            x2={{0}}
   100            y2={{this.edgeTickY2}}
   101            {{on "mouseenter" (fn this.setActiveLegendRow "New")}}
   102            {{on "mouseleave" this.unsetActiveLegendRow}}
   103          ></line>
   104  
   105          <line
   106            class="changes"
   107            x1={{this.deltaLines.original.x}}
   108            y1={{this.edgeTickY1}}
   109            x2={{this.deltaLines.original.x}}
   110            y2={{this.edgeTickY2}}
   111            {{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
   112            {{on "mouseleave" this.unsetActiveLegendRow}}
   113          ></line>
   114  
   115          <text
   116            class="changes"
   117            text-anchor="{{this.deltaText.original.anchor}}"
   118            x={{this.deltaText.original.x}}
   119            y={{this.deltaText.original.y}}
   120            {{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
   121            {{on "mouseleave" this.unsetActiveLegendRow}}
   122          >
   123            Current
   124          </text>
   125  
   126          <text
   127            class="changes new"
   128            text-anchor="{{this.deltaText.delta.anchor}}"
   129            x={{this.deltaText.delta.x}}
   130            y={{this.deltaText.delta.y}}
   131            {{on "mouseenter" (fn this.setActiveLegendRow "New")}}
   132            {{on "mouseleave" this.unsetActiveLegendRow}}
   133          >
   134            New
   135          </text>
   136  
   137          <text
   138            class="changes percent"
   139            x={{this.deltaText.percent.x}}
   140            y={{this.deltaText.percent.y}}
   141          >
   142            {{this.deltaText.percent.text}}
   143          </text>
   144        {{/if}}
   145      {{/unless}}
   146  
   147      <line
   148        class="zero"
   149        x1={{this.gutterWidthLeft}}
   150        y1={{this.edgeTickY1}}
   151        x2={{this.gutterWidthLeft}}
   152        y2={{this.edgeTickY2}}
   153      ></line>
   154    </svg>
   155  
   156    <div
   157      class="chart-tooltip {{if this.showLegend 'active' 'inactive'}}"
   158      style={{this.tooltipStyle}}
   159    >
   160      <ol>
   161        {{#each this.sortedStats as |stat|}}
   162          <li class={{if (eq this.activeLegendRow stat.label) "active"}}>
   163            <span class="label">
   164              {{stat.label}}
   165            </span>
   166            <span class="value">{{stat.value}}</span>
   167          </li>
   168        {{/each}}
   169      </ol>
   170    </div>
   171  
   172  </div>