open-nomad/ui/app/components/das/recommendation-chart.hbs
Phil Renaud 99185e2d8f
[ui, compliance] Remove the newline after .hbs copyright headers (#16861)
* Remove the newline after .hbs copyright headers

* Trying with the whitespace control char
2023-04-14 13:08:13 -04:00

177 lines
4.6 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
~}}
<div
...attributes
class="chart recommendation-chart {{this.directionClass}}"
{{did-insert this.onResize}}
{{window-resize this.onResize}}
{{on "mousemove" this.setLegendPosition}}
{{on "mouseleave" (action (mut this.showLegend) false)}}
>
<svg
class="chart"
height={{this.chartHeight}}
{{did-insert this.storeSvgElement}}
>
<svg
class="icon delta"
x={{this.icon.x}}
y={{this.icon.y}}
width={{this.icon.width}}
height={{this.icon.height}}
>
{{x-icon this.icon.name}}
</svg>
<text
class="resource"
x={{this.resourceLabel.x}}
y={{this.resourceLabel.y}}
>
{{this.resourceLabel.text}}
</text>
{{#if this.center}}
<line
class="center"
x1={{this.center.x1}}
y1={{this.center.y1}}
x2={{this.center.x2}}
y2={{this.center.y2}}
></line>
{{/if}}
{{#each this.statsShapes as |shapes|}}
<text
class="stats-label {{shapes.text.class}}"
text-anchor="end"
x={{shapes.text.x}}
y={{shapes.text.y}}
data-test-label={{shapes.class}}
{{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
{{on "mouseleave" this.unsetActiveLegendRow}}
>
{{shapes.text.label}}
</text>
<rect
class="stat {{shapes.class}}"
x={{shapes.rect.x}}
width={{shapes.rect.width}}
y={{shapes.rect.y}}
height={{shapes.rect.height}}
{{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
{{on "mouseleave" this.unsetActiveLegendRow}}
></rect>
<line
class="stat {{shapes.class}}"
x1={{shapes.line.x1}}
y1={{shapes.line.y1}}
x2={{shapes.line.x2}}
y2={{shapes.line.y2}}
{{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
{{on "mouseleave" this.unsetActiveLegendRow}}
></line>
{{/each}}
{{#unless @disabled}}
{{#if this.deltaRect.x}}
<rect
{{did-insert this.isShown}}
class="delta"
x={{this.deltaRect.x}}
y={{this.deltaRect.y}}
width={{this.deltaRect.width}}
height={{this.deltaRect.height}}
></rect>
<polygon
class="delta"
style={{this.deltaTriangle.style}}
points={{this.deltaTriangle.points}}
></polygon>
<line
class="changes delta"
style={{this.deltaLines.delta.style}}
x1={{0}}
y1={{this.edgeTickY1}}
x2={{0}}
y2={{this.edgeTickY2}}
{{on "mouseenter" (fn this.setActiveLegendRow "New")}}
{{on "mouseleave" this.unsetActiveLegendRow}}
></line>
<line
class="changes"
x1={{this.deltaLines.original.x}}
y1={{this.edgeTickY1}}
x2={{this.deltaLines.original.x}}
y2={{this.edgeTickY2}}
{{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
{{on "mouseleave" this.unsetActiveLegendRow}}
></line>
<text
class="changes"
text-anchor="{{this.deltaText.original.anchor}}"
x={{this.deltaText.original.x}}
y={{this.deltaText.original.y}}
{{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
{{on "mouseleave" this.unsetActiveLegendRow}}
>
Current
</text>
<text
class="changes new"
text-anchor="{{this.deltaText.delta.anchor}}"
x={{this.deltaText.delta.x}}
y={{this.deltaText.delta.y}}
{{on "mouseenter" (fn this.setActiveLegendRow "New")}}
{{on "mouseleave" this.unsetActiveLegendRow}}
>
New
</text>
<text
class="changes percent"
x={{this.deltaText.percent.x}}
y={{this.deltaText.percent.y}}
>
{{this.deltaText.percent.text}}
</text>
{{/if}}
{{/unless}}
<line
class="zero"
x1={{this.gutterWidthLeft}}
y1={{this.edgeTickY1}}
x2={{this.gutterWidthLeft}}
y2={{this.edgeTickY2}}
></line>
</svg>
<div
class="chart-tooltip {{if this.showLegend 'active' 'inactive'}}"
style={{this.tooltipStyle}}
>
<ol>
{{#each this.sortedStats as |stat|}}
<li class={{if (eq this.activeLegendRow stat.label) "active"}}>
<span class="label">
{{stat.label}}
</span>
<span class="value">{{stat.value}}</span>
</li>
{{/each}}
</ol>
</div>
</div>