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>