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>